/* Polylingo landing styles — all selectors scoped under .landing so
   nothing here can affect the app's own UI (style.css). Generated from
   polylingo-landing.html. */
.landing{min-height:100dvh}
:root{--night:#14112e;        
  --night-2:#1c1740;      
  --night-3:#262054;      
  --line:#37306b;
  --ink:#f6f1e7;          
  --dim:#a9a3c9;
  --glow:#ffb35c;         
  --glow-deep:#f28c38;
  --rose:#ff7e6b;         
  --sky-top:#191243;
  --sky-mid:#3b2a66;
  --silhouette:#0d0a22;
  --radius:14px;
  --display:"Fraunces", Georgia, serif;
  --body:"Sora", -apple-system, "Segoe UI", sans-serif;}
.landing *{box-sizing:border-box}
html{scroll-behavior:smooth}
.landing{margin:0; background:var(--night); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;}
.landing img, .landing svg{display:block;max-width:100%}
.landing a{color:var(--glow)}
.landing h1, .landing h2, .landing h3{font-family:var(--display); line-height:1.15; margin:0}
.landing .nav{position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(16px,4vw,40px);
  transition:background .25s ease, box-shadow .25s ease;}
.landing .nav.scrolled{background:rgba(20,17,46,.9); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line)}
.landing .brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.landing .brand-name{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:.01em}
.landing .nav-links{display:flex; gap:26px; align-items:center}
.landing .nav-links a{color:var(--dim); text-decoration:none; font-size:14px; font-weight:500}
.landing .nav-links a:hover{color:var(--ink)}
.landing .btn{display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
  font-family:var(--body); font-weight:600; font-size:15px;
  border-radius:10px; padding:11px 22px; color:#241300;
  background:linear-gradient(135deg,var(--glow),var(--glow-deep));
  transition:transform .15s ease, filter .15s ease;}
.landing .btn:hover{filter:brightness(1.07); transform:translateY(-1px)}
.landing .btn.small{padding:8px 16px; font-size:14px}
.landing .btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.landing .btn.ghost:hover{border-color:var(--glow); color:var(--glow)}
.landing .hero{min-height:100dvh; display:grid; grid-template-columns:1.15fr .85fr;}
.landing .scene{position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 46%,#7c3a5e 68%,#c85a52 82%,#f0894e 100%);
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:clamp(90px,14vh,140px) clamp(24px,4.5vw,64px) 0;}
.landing .scene h1{font-size:clamp(34px,4vw,56px); font-weight:600; max-width:14em;
  text-shadow:0 2px 24px rgba(13,10,34,.45);}
.landing .scene h1 em{font-style:italic; color:var(--glow)}
.landing .scene .sub{color:#e8ddf0; max-width:34em; margin:18px 0 0; font-size:clamp(15px,1.2vw,17px); text-shadow:0 1px 12px rgba(13,10,34,.5)}
.landing .hellos{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.landing .hello{font-size:13px; color:#f3e8da; border:1px solid rgba(246,241,231,.28);
  background:rgba(13,10,34,.22); border-radius:999px; padding:5px 13px;
  backdrop-filter:blur(2px); animation:drift 6s ease-in-out infinite;}
.landing .hello:nth-child(2n){animation-delay:1.4s}
.landing .hello:nth-child(3n){animation-delay:2.8s}
@keyframes drift{50%{transform:translateY(-5px)}}
.landing .scene{background: url("skyline.png") center bottom / cover no-repeat, var(--sky-top);}
.landing .window{fill:var(--glow); opacity:.85; animation:twinkle 4.5s ease-in-out infinite}
.landing .window:nth-of-type(3n){animation-delay:1.6s}
.landing .window:nth-of-type(4n){animation-delay:3s}
@keyframes twinkle{50%{opacity:.25}}
.landing .scene .credit{position:absolute; bottom:12px; left:0; right:0; text-align:center;
  font-size:11.5px; color:rgba(246,241,231,.55); letter-spacing:.14em; text-transform:uppercase;}
.landing .authside{display:flex; align-items:center; justify-content:center;
  padding:clamp(90px,12vh,120px) clamp(20px,3.5vw,52px) 40px;
  background:
    radial-gradient(700px 500px at 110% -10%, #2b2153 0%, transparent 60%),
    var(--night);}
.landing .card{width:min(420px,100%); background:var(--night-2);
  border:1px solid var(--line); border-radius:20px;
  padding:30px 28px; box-shadow:0 24px 60px rgba(0,0,0,.35);}
.landing .card .logo-row{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.landing .card h2{font-size:26px; font-weight:700}
.landing .tagline{color:var(--dim); font-size:13.5px; margin:6px 0 20px; line-height:1.5}
.landing .tabs{display:flex; background:var(--night-3); border-radius:10px; padding:4px; margin-bottom:18px}
.landing .tabs button{flex:1; border:none; background:transparent; color:var(--dim);
  font-family:var(--body); font-weight:600; font-size:14px;
  padding:9px 0; border-radius:8px; cursor:pointer; transition:all .18s ease;}
.landing .tabs button.active{background:var(--night); color:var(--ink); box-shadow:0 1px 6px rgba(0,0,0,.3)}
.landing .google-btn{width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1a1a1a; border:none; border-radius:10px;
  padding:12px; font-family:var(--body); font-size:15px; font-weight:600; cursor:pointer;}
.landing .google-btn:hover{filter:brightness(.94)}
.landing .divider{display:flex; align-items:center; gap:12px; color:var(--dim); font-size:12px; margin:16px 0}
.landing .divider::before, .landing .divider::after{content:""; flex:1; border-top:1px solid var(--line)}
.landing label{display:block; font-size:12.5px; font-weight:600; color:var(--dim); margin:0 0 6px; letter-spacing:.02em}
.landing .field{margin-bottom:14px}
.landing input{width:100%; background:var(--night-3); color:var(--ink);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-family:var(--body); font-size:15px;}
.landing input:focus{outline:2px solid var(--glow); outline-offset:0; border-color:transparent}
.landing input::placeholder{color:#6f689a}
.landing .card .btn{width:100%; margin-top:4px; padding:13px}
.landing .auth-msg{min-height:20px; font-size:13px; color:var(--glow); margin-top:12px; white-space:pre-wrap}
.landing .finehint{font-size:12px; color:var(--dim); margin-top:14px; text-align:center}
.landing .scroll-cue{margin-top:26px; text-align:center; font-size:13px; color:var(--dim)}
.landing .scroll-cue a{color:var(--dim); text-decoration:none}
.landing .scroll-cue a:hover{color:var(--glow)}
.landing .scroll-cue .arrow{display:block; font-size:18px; animation:drift 2.4s ease-in-out infinite}
.landing section{padding:clamp(70px,9vw,110px) clamp(20px,5vw,60px)}
.landing .wrap{max-width:1080px; margin:0 auto}
.landing .eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--glow); font-weight:600; margin-bottom:14px;}
.landing .section-title{font-size:clamp(26px,3vw,38px); font-weight:600; max-width:18em}
.landing .section-sub{color:var(--dim); max-width:44em; margin:14px 0 0}
.landing .pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.landing .pillar{background:var(--night-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px;}
.landing .pillar .glyph{font-size:26px; margin-bottom:12px}
.landing .pillar h3{font-size:19px; font-weight:600; margin-bottom:8px}
.landing .pillar p{color:var(--dim); font-size:14.5px; margin:0}
.landing .shots{display:flex; flex-direction:column; gap:56px; margin-top:52px}
.landing .shot{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(22px,4vw,48px);
  align-items:center;}
.landing .shot.flip .media{order:2}
.landing .shot .media{background:var(--night); border:1px solid var(--line); border-radius:18px;
  padding:10px; box-shadow:0 20px 50px rgba(0,0,0,.35);
  transition:transform .25s ease;}
.landing .shot .media:hover{transform:translateY(-4px)}
.landing .shot .media img, .landing .shot .media video{width:100%; height:auto; border-radius:11px; display:block}
.landing .shot .copy .stepno{display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,179,92,.14); color:var(--glow);
  font-weight:700; font-size:15px; margin-bottom:14px;}
.landing .shot .copy h3{font-size:clamp(19px,1.8vw,24px); font-weight:600; margin-bottom:10px}
.landing .shot .copy p{color:var(--dim); font-size:15px; margin:0}
.landing .features{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-top:44px}
.landing .feature{background:var(--night); padding:26px 24px}
.landing .feature h3{font-size:17px; font-weight:600; margin-bottom:8px; display:flex; gap:9px; align-items:center}
.landing .feature p{color:var(--dim); font-size:14px; margin:0}
.landing .feature .fx{color:var(--glow)}
.landing .video-shell{margin-top:44px; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); position:relative;
  background:
    radial-gradient(560px 300px at 50% 120%, rgba(255,126,107,.22), transparent 65%),
    linear-gradient(180deg,#1c1740,#14112e);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;}
.landing .play{width:74px; height:74px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--glow),var(--glow-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 34px rgba(242,140,56,.35); transition:transform .15s ease;}
.landing .play:hover{transform:scale(1.06)}
.landing .play svg{margin-left:4px}
.landing .video-shell p{color:var(--dim); font-size:13.5px; margin:0}
.landing .video-shell iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.landing .tutorial-shell{margin-top:44px; border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:#000;
  box-shadow:0 20px 50px rgba(0,0,0,.35);}
.landing .tutorial-shell video{width:100%; height:auto; display:block}
.landing .cta{text-align:center;
  background:
    radial-gradient(800px 420px at 50% 130%, rgba(255,179,92,.16), transparent 70%),
    var(--night);
  border-top:1px solid var(--line);}
.landing .cta h2{font-size:clamp(28px,3.4vw,44px); font-weight:600}
.landing .cta p{color:var(--dim); margin:16px auto 30px; max-width:36em}
.landing .cta .btn{padding:15px 38px; font-size:17px}
.landing footer{border-top:1px solid var(--line); padding:26px clamp(20px,5vw,60px);
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  color:var(--dim); font-size:13px;}
.landing footer .brand-name{font-size:16px}
.landing .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.landing .reveal.in{opacity:1; transform:none}
@media (max-width:960px){
.landing .pillars, .landing .features{grid-template-columns:1fr 1fr}
.landing .shot{grid-template-columns:1fr}
.landing .shot.flip .media{order:0}
}
@media (max-width:860px){
.landing .hero{grid-template-columns:1fr; min-height:0}
.landing .scene{min-height:56dvh; padding-top:96px}
.landing .authside{padding-top:40px}
.landing .nav-links a:not(.btn){display:none}
}
@media (max-width:600px){
.landing .pillars, .landing .features{grid-template-columns:1fr}
.landing .scene h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.landing .hello, .landing .window, .landing .scroll-cue .arrow{animation:none}
.landing .reveal{opacity:1; transform:none; transition:none}
}