/* landing.css — Планер marketing site, dark premium */
:root{
  --bg:#06090F; --bg2:#0A0E18; --surface:#11161F; --surface2:#161C28;
  --line:rgba(255,255,255,0.08); --line2:rgba(255,255,255,0.14);
  --blue:#3B82F6; --blueBright:#5B9CFF; --blueDeep:#1D5FD6;
  --cyan:#34E3D0; --violet:#A78BFA; --green:#34D399; --amber:#FBBF24; --red:#FB7185;
  --t1:#ECF1FB; --t2:#9AA6BE; --t3:#646E84;
  --glow:rgba(59,130,246,0.5);
  --font:'Outfit',-apple-system,system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font); background:var(--bg); color:var(--t1);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    radial-gradient(900px 600px at 80% -5%, rgba(59,130,246,0.13), transparent 60%),
    radial-gradient(700px 500px at 0% 30%, rgba(52,227,208,0.06), transparent 55%);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-weight:700;font-size:16px;
  padding:14px 26px;border-radius:999px;cursor:pointer;border:none;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .25s;
  white-space:nowrap;
}
.btn:active{transform:scale(.96)}
.btn-primary{background:linear-gradient(135deg,var(--blueBright),var(--blue));color:#fff;box-shadow:0 14px 34px -10px var(--glow)}
.btn-primary:hover{box-shadow:0 18px 44px -10px var(--glow)}
.btn-ghost{background:var(--surface);color:var(--t1);border:1px solid var(--line2)}
.btn-ghost:hover{background:var(--surface2)}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.3px;
  color:var(--blueBright);background:rgba(59,130,246,0.12);border:1px solid rgba(59,130,246,0.25);
  padding:7px 15px;border-radius:999px;text-transform:uppercase;
}
.h1{font-size:clamp(40px,6vw,76px);font-weight:800;letter-spacing:-2.5px;line-height:1.02}
.h2{font-size:clamp(30px,4.2vw,50px);font-weight:800;letter-spacing:-1.4px;line-height:1.08}
.lead{font-size:clamp(17px,2vw,21px);color:var(--t2);line-height:1.55;font-weight:400}
.grad{background:linear-gradient(120deg,var(--blueBright),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}

/* nav */
nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);background:rgba(6,9,15,0.7);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.5px}
.logo-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--blueBright),var(--blueDeep));display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -4px var(--glow)}
.nav-links{display:flex;gap:34px;font-size:15px;font-weight:600;color:var(--t2)}
.nav-links a:hover{color:var(--t1)}
.nav-cta{display:flex;align-items:center;gap:14px}
@media(max-width:860px){.nav-links{display:none}.nav-cta .btn-ghost{display:none}}

/* hero */
.hero{position:relative;padding:90px 0 40px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-cta{justify-content:center}.trust{justify-content:center}}
.hero h1{margin:22px 0 20px}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:26px;margin-top:34px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--t3)}
.stars{display:flex;gap:2px}
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}

/* phone */
.phone{
  position:relative;width:300px;height:610px;border-radius:46px;
  background:#0c1019;border:1px solid var(--line2);
  box-shadow:0 50px 110px -30px rgba(0,0,0,0.8),0 0 0 11px #16191f,0 0 0 12px #2a2e36;
  padding:13px;flex-shrink:0;
}
.phone::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);width:96px;height:26px;background:#000;border-radius:99px;z-index:5}
.screen{width:100%;height:100%;border-radius:34px;overflow:hidden;background:var(--bg2);position:relative}
.phone-glow{position:absolute;width:420px;height:420px;border-radius:999px;background:radial-gradient(circle,var(--glow),transparent 65%);filter:blur(30px);z-index:-1;opacity:.55}

/* app screen mock */
.app{padding:54px 16px 16px;display:flex;flex-direction:column;gap:13px;height:100%;font-size:13px}
.app-status{position:absolute;top:18px;left:0;right:0;display:flex;justify-content:space-between;padding:0 24px;font-size:13px;font-weight:700;color:var(--t1)}
.app-head{display:flex;align-items:center;justify-content:space-between}
.app-ava{width:40px;height:40px;border-radius:40px;background:linear-gradient(135deg,var(--violet),#6D4FD6);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:17px}
.app-bell{width:38px;height:38px;border-radius:38px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative}
.app-bell .dot{position:absolute;top:-2px;right:-2px;width:16px;height:16px;border-radius:16px;background:var(--red);border:2px solid var(--bg2);font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;color:#fff}
.switcher{display:flex;padding:4px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);position:relative}
.switcher .knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;transition:transform .4s cubic-bezier(.3,.9,.3,1),background .3s}
.switcher span{flex:1;text-align:center;padding:8px 0;font-size:12px;font-weight:700;z-index:1;position:relative;transition:color .3s}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:15px}
.ring-card{display:flex;align-items:center;gap:15px}
.ring{width:66px;height:66px;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring b{font-size:18px;font-weight:800}
.mini-chips{display:flex;gap:6px;margin-top:8px}
.chip{font-size:10px;font-weight:700;padding:4px 9px;border-radius:99px;background:rgba(255,255,255,0.05);border:1px solid var(--line);color:var(--t2);display:flex;align-items:center;gap:4px}
.ai-card{background:linear-gradient(135deg,rgba(52,227,208,0.13),rgba(59,130,246,0.05));border:1px solid rgba(52,227,208,0.2);border-radius:16px;padding:13px;display:flex;gap:10px}
.ai-card .ico{color:var(--cyan);flex-shrink:0}
.list-item{display:flex;align-items:center;gap:11px;padding:11px 13px;background:var(--surface);border:1px solid var(--line);border-radius:15px}
.checkbox{width:22px;height:22px;border-radius:22px;border:2px solid var(--line2);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.checkbox.done{background:var(--blue);border-color:var(--blue)}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:64px;background:rgba(10,14,24,0.92);backdrop-filter:blur(16px);border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;padding-bottom:6px}
.tabbar .tb{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9px;font-weight:600;color:var(--t3)}
.tabbar .tb.active{color:var(--blueBright)}

/* section */
section{padding:90px 0;position:relative}
.sec-head{text-align:center;max-width:660px;margin:0 auto 56px}
.sec-head .h2{margin:16px 0 16px}
.sec-head .lead{margin:0 auto}

/* dual mode */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.dual{grid-template-columns:1fr}}
.mode-card{border-radius:28px;padding:34px;border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .3s,border-color .3s}
.mode-card:hover{transform:translateY(-4px)}
.mode-card.personal{background:linear-gradient(160deg,rgba(167,139,250,0.12),var(--surface))}
.mode-card.personal:hover{border-color:rgba(167,139,250,0.4)}
.mode-card.business{background:linear-gradient(160deg,rgba(59,130,246,0.12),var(--surface))}
.mode-card.business:hover{border-color:rgba(59,130,246,0.4)}
.mode-ico{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.mode-card h3{font-size:26px;font-weight:800;letter-spacing:-.6px;margin-bottom:10px}
.mode-card p{color:var(--t2);font-size:15px;line-height:1.55;margin-bottom:22px}
.mode-list{display:flex;flex-direction:column;gap:13px}
.mode-list .li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--t1)}
.mode-list .li .b{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* features */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.feat-grid{grid-template-columns:1fr}}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:28px;transition:transform .3s,border-color .3s,background .3s}
.feat:hover{transform:translateY(-4px);border-color:var(--line2);background:var(--surface2)}
.feat-ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.feat h3{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:9px}
.feat p{color:var(--t2);font-size:14.5px;line-height:1.55}
.feat.wide{grid-column:span 2}
@media(max-width:600px){.feat.wide{grid-column:span 1}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:20px}
.step .num{font-size:15px;font-weight:800;color:var(--blueBright);background:rgba(59,130,246,0.12);width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.step h3{font-size:21px;font-weight:700;letter-spacing:-.4px;margin-bottom:10px}
.step p{color:var(--t2);font-size:15px;line-height:1.55}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}
.stat .v{font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-2px;background:linear-gradient(120deg,var(--blueBright),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{color:var(--t2);font-size:15px;margin-top:6px}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.price-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}}
.price{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:32px;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.price:hover{transform:translateY(-4px)}
.price.featured{background:linear-gradient(165deg,rgba(59,130,246,0.14),var(--surface));border-color:rgba(59,130,246,0.4);box-shadow:0 30px 70px -30px var(--glow)}
.price .tier{font-size:16px;font-weight:700;color:var(--t2)}
.price .amt{font-size:46px;font-weight:800;letter-spacing:-2px;margin:14px 0 4px;display:flex;align-items:baseline;gap:5px}
.price .amt span{font-size:16px;font-weight:600;color:var(--t3)}
.price .desc{font-size:14px;color:var(--t3);margin-bottom:22px;min-height:38px}
.price ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin-bottom:26px;flex:1}
.price li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--t1)}
.price li .ck{color:var(--green);flex-shrink:0}
.badge-pop{position:absolute;top:18px;right:18px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:var(--blue);padding:5px 12px;border-radius:99px}

/* cta band */
.cta-band{background:linear-gradient(135deg,rgba(59,130,246,0.16),rgba(52,227,208,0.07));border:1px solid rgba(59,130,246,0.25);border-radius:34px;padding:64px 40px;text-align:center;position:relative;overflow:hidden}
.cta-band .glow{position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:500px;height:300px;background:radial-gradient(circle,var(--glow),transparent 70%);filter:blur(40px)}

/* footer */
footer{border-top:1px solid var(--line);padding:54px 0 40px;margin-top:30px}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:34px}
.foot-col h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:16px}
.foot-col a{display:block;color:var(--t2);font-size:15px;margin-bottom:11px}
.foot-col a:hover{color:var(--t1)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding-top:26px;border-top:1px solid var(--line);color:var(--t3);font-size:14px;flex-wrap:wrap;gap:14px}

/* store badges */
.stores{display:flex;gap:12px;flex-wrap:wrap}
.store{display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line2);transition:background .2s}
.store:hover{background:var(--surface2)}
.store .s1{font-size:10px;color:var(--t3);line-height:1}
.store .s2{font-size:16px;font-weight:700;line-height:1.1}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* download section */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:840px;margin:0 auto}
@media(max-width:760px){.dl-grid{grid-template-columns:1fr}}
.dl-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:16px;transition:transform .3s,border-color .3s}
.dl-card:hover{transform:translateY(-4px);border-color:var(--line2)}
.dl-os{display:flex;align-items:center;gap:14px}
.dl-os .dl-t{font-size:21px;font-weight:800;letter-spacing:-.4px}
.dl-os .dl-s{font-size:13px;color:var(--t3);font-weight:600;margin-top:2px}
.dl-note{color:var(--t2);font-size:14px;line-height:1.55;flex:1}
.dl-btn{justify-content:center;width:100%}