:root{
  --bg:#06071A; --bg2:#0A0C24; --surface:#0E1130; --surface2:#141840;
  --line:rgba(170,180,255,.10); --line2:rgba(170,180,255,.18);
  --text:#EEF0FF; --muted:#A3A8CC; --faint:#6B7099;
  --cu:#6C63FF; --cu2:#A89BFF; --cu-dim:rgba(108,99,255,.16);
  --blue:#3B82F6; --violet:#9B5CFF;
  --grad:linear-gradient(120deg,#3B82F6 0%,#6C63FF 45%,#A855F7 100%);
  --sage:#5EE3A1;
  --serif:'Sora', 'Plus Jakarta Sans', system-ui, sans-serif;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:22px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#06071A; --text:#EEF0FF; } }
:root[data-theme="dark"]{ --bg:#06071A; --text:#EEF0FF; }
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 90px)}
body{margin:0; background:var(--bg) radial-gradient(1200px 600px at 50% -200px, rgba(80,90,255,.12), transparent); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.locked{overflow:hidden}
img,svg{max-width:100%}
a{color:inherit}
::selection{background:var(--cu); color:#1a0f07}
.wrap{width:min(1200px, 100% - 48px); margin:0 auto}
.serif{font-family:var(--serif); font-weight:800}
.it{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent}
.eyebrow{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; border:1px solid rgba(139,120,255,.35); background:rgba(90,100,255,.08); font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#C4BDFF}
.eyebrow::before{content:""; width:24px; height:13px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Ccircle cx='5' cy='5.5' r='4.2' fill='none' stroke='%23B3A8FF' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='5.5' r='4.2' fill='none' stroke='%23B3A8FF' stroke-width='1.5'/%3E%3Ccircle cx='5.6' cy='6' r='1.7' fill='%23B3A8FF'/%3E%3Ccircle cx='14.4' cy='6' r='1.7' fill='%23B3A8FF'/%3E%3C/svg%3E") no-repeat center/contain}
h1,h2,h3{margin:0; font-weight:800}
h2{font-family:var(--serif); font-weight:800; font-size:clamp(36px,4.8vw,64px); line-height:1.05; letter-spacing:-.035em}
p{margin:0}
.muted{color:var(--muted)}
section{position:relative}

/* grain + glow */
.grain{position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.glow{position:fixed; left:0; top:0; width:560px; height:560px; margin:-280px 0 0 -280px; border-radius:50%; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(108,99,255,.13), rgba(108,99,255,0) 62%); transition:opacity .4s; opacity:0}

/* buttons */
.btn{--mx:0px; --my:0px; position:relative; display:inline-flex; align-items:center; gap:10px; height:56px; padding:0 28px; border-radius:999px; font:600 16px/1 var(--sans); text-decoration:none; border:1px solid transparent; cursor:pointer; transform:translate(var(--mx),var(--my)); transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, color .25s}
.btn-cu{background:var(--grad); color:#fff; box-shadow:0 12px 36px -10px rgba(108,99,255,.7), inset 0 1px 0 rgba(255,255,255,.25)}
.btn-cu:hover{filter:brightness(1.12); box-shadow:0 16px 44px -8px rgba(124,92,255,.85), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{border-color:var(--line2); color:var(--text); background:rgba(238,235,227,.02)}
.btn-ghost:hover{border-color:var(--cu); color:var(--cu2)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cu2); outline-offset:3px}
.arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}



/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; padding-top:env(safe-area-inset-top,0px); transition:background .35s, border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(6,7,26,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:78px; gap:20px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; font:800 26px/1 var(--serif); letter-spacing:-.03em}
.logo b{font-weight:800; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.nav-links{display:flex; align-items:center; gap:34px}
.nav-links a{text-decoration:none; color:var(--muted); font-size:15px; font-weight:500; transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav .btn{height:46px; padding:0 22px; font-size:15px}
.nav-links a.btn-cu,.nav-links a.btn-cu:hover{color:#fff}
.menu-btn{display:none; background:none; border:1px solid var(--line2); color:var(--text); width:46px; height:46px; border-radius:50%; cursor:pointer}

/* hero */
.hero{padding:calc(170px + env(safe-area-inset-top,0px)) 0 90px; overflow:hidden}
.hero .wrap{display:flex; flex-direction:column; align-items:center; text-align:center}
.hero-copy{max-width:1000px; display:flex; flex-direction:column; align-items:center}
.hero h1{font-family:var(--serif); font-weight:800; font-size:clamp(44px,7vw,100px); line-height:1.0; letter-spacing:-.05em; margin:30px 0 28px}
.hero .lead{font-size:clamp(17px,1.6vw,20px); color:var(--muted); max-width:680px}
.hero .ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:40px}
.hero .facts{display:flex; flex-wrap:wrap; justify-content:center; gap:64px; margin-top:56px}
.fact span{display:block; margin-top:8px}
.hero-visual{position:relative; margin-top:90px; width:100%; display:flex; justify-content:center}
.float{position:absolute; z-index:2; padding:16px 18px; border-radius:18px; background:rgba(20,24,64,.72); border:1px solid var(--line2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); text-align:left; box-shadow:0 30px 60px -20px rgba(0,0,0,.6); animation:bob 6s ease-in-out infinite}
.float b{display:block; font:700 15px/1.3 var(--serif); letter-spacing:-.01em}
.float small{color:var(--muted); font-size:13px}
.float .ico{width:34px; height:34px; border-radius:10px; background:var(--grad); display:grid; place-items:center; margin-bottom:10px}
.float.f1{left:calc(50% - 440px); top:18%}
.float.f2{right:calc(50% - 450px); top:48%; animation-delay:-3s}
.waves{position:absolute; left:0; right:0; top:46%; height:600px; opacity:.6; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent)}
.waves svg{position:absolute; left:0; top:0; width:200%; height:100%}
.waves .wv{animation:wave linear infinite; transform-box:view-box}
@keyframes wave{to{transform:translateX(-1440px)}}
.waves.paused .wv{animation-play-state:paused}
.waves.flip svg{transform:scaleY(-1)}
.numbers,.pricing,.story,.features{overflow:hidden}
.numbers .wrap,.pricing .wrap,.story .wrap,.features .wrap,.contact-card > :not(.waves){position:relative; z-index:1}
@keyframes bob{50%{transform:translateY(-12px)}}
.fact b{display:block; font:800 32px/1 var(--serif); letter-spacing:-.03em; color:var(--text)}
.fact span{font-size:13px; color:var(--faint); letter-spacing:.06em; text-transform:uppercase}
.hero-orb{position:absolute; left:50%; top:-10%; width:1100px; height:760px; margin-left:-550px; border-radius:50%; background:radial-gradient(ellipse at 35% 45%, rgba(59,130,246,.30), transparent 55%), radial-gradient(ellipse at 68% 50%, rgba(168,85,247,.28), transparent 55%); filter:blur(30px); pointer-events:none; animation:float 14s ease-in-out infinite}
@keyframes float{50%{transform:translate(-30px,24px) scale(1.04)}}

/* phone */
.phone{position:relative; width:min(360px,100%); margin:0 auto; aspect-ratio:9/18.5; border-radius:48px; padding:12px; background:linear-gradient(160deg,#2C3160,#0E1030 40%,#1B1F4A); box-shadow:0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(108,99,255,.25)}
.screen{position:relative; height:100%; border-radius:38px; overflow:hidden; background:#0A0C26; display:flex; flex-direction:column}
.notch{position:absolute; top:10px; left:50%; width:100px; height:28px; margin-left:-50px; border-radius:20px; background:#050605; z-index:3}
.chat-head{display:flex; align-items:center; gap:11px; padding:52px 18px 14px; border-bottom:1px solid var(--line); background:#0E1132}
.avatar{width:38px; height:38px; border-radius:50%; background:var(--grad); display:grid; place-items:center; flex-shrink:0}
.chat-head b{display:block; font-size:14px; font-weight:600}
.chat-head small{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--sage)}
.chat-head small::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--sage)}
.msgs{flex:1; padding:18px 14px; display:flex; flex-direction:column; gap:10px; overflow:hidden; justify-content:flex-end}
.msg{max-width:84%; padding:11px 14px; border-radius:18px; font-size:14px; line-height:1.45; animation:pop .45s cubic-bezier(.2,.9,.3,1.2) both}
.msg.me{align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start; background:var(--surface2); border:1px solid var(--line); border-bottom-left-radius:5px}
.msg time{display:block; font-size:10.5px; opacity:.6; margin-top:4px}
.typing{align-self:flex-start; display:flex; gap:4px; padding:14px 16px; border-radius:18px; background:var(--surface2); border:1px solid var(--line)}
.typing i{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:dot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3; transform:none}30%{opacity:1; transform:translateY(-3px)}}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.96)}}
.chat-input{margin:0 12px 14px; padding:12px 16px; border-radius:999px; border:1px solid var(--line); color:var(--faint); font-size:13px}

/* marquee */
.marquee{border-block:1px solid var(--line); padding:26px 0; overflow:hidden; background:var(--bg2)}
.track{display:flex; gap:56px; width:max-content; animation:scroll 42s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{display:flex; align-items:center; gap:56px; font:700 26px/1 var(--serif); letter-spacing:-.02em; color:var(--muted); white-space:nowrap}
.track span::after{content:""; width:26px; height:14px; flex-shrink:0; opacity:.8; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Ccircle cx='5' cy='5.5' r='4.2' fill='none' stroke='%238F82FF' stroke-width='1.4'/%3E%3Ccircle cx='15' cy='5.5' r='4.2' fill='none' stroke='%238F82FF' stroke-width='1.4'/%3E%3Ccircle cx='5.6' cy='6' r='1.7' fill='%238F82FF'/%3E%3Ccircle cx='14.4' cy='6' r='1.7' fill='%238F82FF'/%3E%3C/svg%3E") no-repeat center/contain}
@keyframes scroll{to{transform:translateX(-50%)}}

/* story */
.story{padding:150px 0 60px}
.story-head{max-width:820px; margin:0 auto 90px; text-align:center}
.story-head p{margin-top:24px; font-size:19px}
.story-grid{display:grid; grid-template-columns:1fr 1fr; gap:80px}
.story-phone{position:sticky; top:calc(110px + env(safe-area-inset-top,0px)); height:calc(100vh - 150px); max-height:760px; display:flex; align-items:center}
.story-phone .phone{width:min(330px,100%)}
.steps{display:flex; flex-direction:column}
.step{min-height:62vh; display:flex; flex-direction:column; justify-content:center; opacity:.28; transition:opacity .5s}
.step.on{opacity:1}
.step .clock{font:800 60px/1 var(--serif); letter-spacing:-.03em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.step h3{font:600 26px/1.25 var(--sans); margin:18px 0 12px; letter-spacing:-.01em}
.step p{color:var(--muted); max-width:440px}
.lock{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; padding:70px 14px 20px; background:radial-gradient(circle at 50% 20%, #2A2C6E, #07081E 70%); opacity:0; transition:opacity .5s; z-index:2}
.lock.show{opacity:1}
.lock .big{font:300 64px/1 var(--sans); letter-spacing:-.02em}
.lock .date{font-size:13px; color:var(--muted); margin:6px 0 28px}
.notif{width:100%; padding:14px; border-radius:18px; background:rgba(238,235,227,.1); backdrop-filter:blur(8px); display:flex; gap:11px; animation:pop .5s both}
.notif .ico{width:34px; height:34px; border-radius:9px; background:var(--grad); display:grid; place-items:center; flex-shrink:0}
.notif b{font-size:13px} .notif p{font-size:13px; line-height:1.4; color:#DAD7CF}
.notif small{font-size:11px; color:var(--muted)}
.call{display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:auto; margin-bottom:40px}
.call .ring{width:72px; height:72px; border-radius:50%; background:#3DAA6A; display:grid; place-items:center; animation:ring 1.4s infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(61,170,106,.5)}100%{box-shadow:0 0 0 22px rgba(61,170,106,0)}}

/* bento */
.features{padding:140px 0}
.features-head{display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; margin:0 auto 64px; max-width:760px}
.features-head p{max-width:560px; font-size:18px}
.bento{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:18px}
.card{position:relative; grid-column:span 2; padding:34px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); overflow:hidden; transition:border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1)}
.card::before{content:""; position:absolute; inset:0; background:radial-gradient(400px circle at var(--x,50%) var(--y,50%), rgba(108,99,255,.12), transparent 60%); opacity:0; transition:opacity .3s; pointer-events:none}
.card:hover{border-color:var(--line2)} .card:hover::before{opacity:1}
.card.wide{grid-column:span 3}
.card .num{font:400 15px var(--sans); color:var(--faint); letter-spacing:.1em}
.card h3{font:700 26px/1.15 var(--serif); letter-spacing:-.02em; margin:34px 0 12px}
.card p{color:var(--muted); font-size:16px}
.card .icon{width:48px; height:48px; border-radius:14px; background:var(--cu-dim); display:grid; place-items:center; color:var(--cu2)}

/* demo */
.demo{padding:140px 0; background:linear-gradient(180deg, transparent, var(--bg2) 20%, var(--bg2) 80%, transparent)}
.demo .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center}
.demo-copy p{font-size:18px; margin-top:24px; max-width:460px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.chip{border:1px solid var(--line2); background:transparent; color:var(--text); padding:11px 16px; border-radius:999px; font:500 14px var(--sans); cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.chip:hover{border-color:var(--cu); color:var(--cu2); background:var(--cu-dim)}
.demo-box{border-radius:28px; background:var(--surface); border:1px solid var(--line2); box-shadow:0 50px 100px -50px rgba(0,0,0,.9); overflow:hidden; display:flex; flex-direction:column; height:600px}
.demo-box .chat-head{padding:18px 22px}
.demo-box .msgs{overflow-y:auto; justify-content:flex-start; padding:22px}
.demo-box .msg{font-size:15px}
.demo-form{display:flex; gap:10px; padding:14px; border-top:1px solid var(--line)}
.demo-form input{flex:1; min-width:0; height:50px; padding:0 18px; border-radius:999px; background:var(--bg); border:1px solid var(--line2); color:var(--text); font:500 15px var(--sans)}
.demo-form button{width:50px; height:50px; border-radius:50%; border:0; background:var(--grad); color:#FFFFFF; cursor:pointer; display:grid; place-items:center; flex-shrink:0}
.demo-note{font-size:13px; color:var(--faint); margin-top:14px}

/* numbers */
.numbers{padding:110px 0; border-block:1px solid var(--line)}
.numbers .wrap{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px}
.nb b{display:block; white-space:nowrap; font:800 clamp(52px,6vw,84px)/1 var(--serif); letter-spacing:-.045em; color:var(--text)}
.nb b em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.nb > span{display:block; margin-top:12px; color:var(--muted); font-size:15px; max-width:220px}

/* pricing */
.pricing{padding:150px 0}
.pricing-head{text-align:center; max-width:720px; margin:0 auto 50px}
.pricing-head p{margin-top:20px; font-size:18px}
.toggle{display:inline-flex; margin:0 auto 54px; padding:5px; border-radius:999px; border:1px solid var(--line2); background:var(--surface)}
.toggle button{height:44px; padding:0 22px; border-radius:999px; border:0; background:transparent; color:var(--muted); font:600 14px var(--sans); cursor:pointer; transition:background .25s, color .25s}
.toggle button[aria-pressed="true"]{background:var(--grad); color:#fff}
.toggle small{color:var(--cu); font-weight:700; margin-left:6px}
.toggle button[aria-pressed="true"] small{color:#E4E0FF}
.plans{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:stretch}
.plan{position:relative; padding:38px 34px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); display:flex; flex-direction:column}
.plan.hot{background:linear-gradient(180deg, #1A1650, var(--surface) 60%); border-color:rgba(139,120,255,.6); box-shadow:0 40px 90px -40px rgba(108,99,255,.35)}
.badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:6px 14px; border-radius:999px; background:var(--grad); color:#FFFFFF; font:700 12px var(--sans); letter-spacing:.08em; text-transform:uppercase}
.plan .for{color:var(--muted); font-size:15px; margin-top:6px}
.plan h3{font:800 30px/1 var(--serif); letter-spacing:-.02em}
.price{margin:34px 0 6px; display:flex; align-items:baseline; gap:8px}
.price b{font:800 58px/1 var(--serif); letter-spacing:-.04em}
.price span{color:var(--muted); font-size:15px}
.setup{font-size:14px; color:var(--faint)}
.plan ul{list-style:none; padding:0; margin:30px 0 34px; display:flex; flex-direction:column; gap:13px; flex:1}
.plan li{display:flex; gap:12px; font-size:15.5px}
.plan li svg{flex-shrink:0; margin-top:4px; color:var(--cu2)}
.plan .btn{justify-content:center}

/* faq */
.faq{padding:40px 0 150px}
.faq .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:80px}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px 0; font:600 19px/1.35 var(--sans)}
summary::-webkit-details-marker{display:none}
summary .plus{width:36px; height:36px; border-radius:50%; border:1px solid var(--line2); display:grid; place-items:center; flex-shrink:0; transition:transform .35s, background .3s}
details[open] summary .plus{transform:rotate(45deg); background:var(--grad); border-color:transparent; color:#fff}
details .ans{padding:0 60px 28px 0; color:var(--muted); font-size:16.5px}

/* contact */
.contact{padding:0 0 120px}
.contact-card{position:relative; border-radius:36px; padding:clamp(34px,6vw,80px); background:radial-gradient(900px circle at 85% 0%, rgba(108,99,255,.2), transparent 55%), var(--surface); border:1px solid var(--line2); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; gap:60px}
.contact-card h2{font-size:clamp(44px,5.6vw,80px)}
.contact-card .lead{margin-top:24px; font-size:18px; color:var(--muted)}
form.lead-form{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13px; color:var(--muted); font-weight:600}
.field input,.field select,.field textarea{width:100%; padding:15px 16px; border-radius:14px; background:var(--bg); border:1px solid var(--line2); color:var(--text); font:500 15.5px var(--sans); transition:border-color .2s}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cu); outline:none}
.form-ok{grid-column:1/-1; padding:18px; border-radius:14px; background:rgba(157,184,162,.12); border:1px solid rgba(157,184,162,.3); color:#CFE0D2; display:none}

footer{padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); color:var(--faint); font-size:14px}
footer .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
footer a{text-decoration:none} footer a:hover{color:var(--text)}

/* reveal */
.js .rv{opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1; transform:none}
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.split .w{display:inline-block; overflow:hidden; vertical-align:top; padding:.16em .2em .08em 0; margin:-.16em -.2em -.08em 0}
.split .w > span{display:inline-block}
.js .split .w > span{transform:translateY(105%); transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.split .it{background:none; -webkit-text-fill-color:initial; color:inherit}
.split .it .w > span{background:linear-gradient(120deg,#5B8CFF,#8B7CFF 50%,#B06BFF); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; padding:.12em .14em 0 0; margin:-.12em -.14em 0 0}
.js .split.in .w > span{transform:none}

/* responsive */
@media (max-width:1020px){
  .hero .wrap,.demo .wrap,.faq .wrap,.contact-card{grid-template-columns:1fr}
  .hero{padding-top:calc(130px + env(safe-area-inset-top,0px))}
  .float{display:none}
  .hero-visual{margin-top:60px}
  .story-grid{grid-template-columns:1fr; gap:0}
  .story-phone{top:calc(78px + env(safe-area-inset-top,0px)); height:auto; max-height:none; z-index:2; justify-content:center; padding:12px 0 26px; background:linear-gradient(var(--bg) 88%, transparent)}
  .story-phone .phone{width:250px; aspect-ratio:9/13; border-radius:36px; padding:9px}
  .story-phone .screen{border-radius:28px}
  .story-phone .chat-head{padding:40px 14px 10px}
  .story-phone .msg{font-size:12px; padding:8px 11px}
  .story-phone .msg time{display:none}
  .story-phone .lock{padding:48px 10px 14px}
  .story-phone .lock .big{font-size:42px}
  .story-phone .lock .date{margin-bottom:14px}
  .story-phone .notif{padding:10px; gap:8px}
  .story-phone .notif p,.story-phone .notif b{font-size:11.5px}
  .story-phone .call{margin-bottom:10px}
  .story-phone .call .ring{width:54px; height:54px}
  .step{min-height:78vh; justify-content:flex-end; padding-bottom:6vh; position:relative; z-index:1}
  .bento .card,.bento .card.wide{grid-column:span 6}
  .plans{grid-template-columns:1fr; max-width:520px; margin:0 auto}
  .numbers .wrap{grid-template-columns:1fr 1fr; row-gap:50px}
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:78px; left:12px; right:12px; flex-direction:column; align-items:stretch; gap:0; padding:10px; background:rgba(10,12,36,.97); border:1px solid var(--line2); border-radius:20px}
  .nav-links.open a{padding:16px 14px}
  .nav-links.open .btn{margin-top:8px; justify-content:center}
  .menu-btn{display:grid; place-items:center}
}
@media (max-width:600px){
  body{font-size:16px}
  .wrap{width:calc(100% - 36px)}
  form.lead-form{grid-template-columns:1fr}
  .demo-box{height:540px}
  details .ans{padding-right:0}
  .hero .facts{gap:24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .rv{opacity:1; transform:none}
  .split .w > span{transform:none}
  html{scroll-behavior:auto}
}
/* ===== vstupní animace se sovou ===== */
.owl-intro{position:fixed; inset:0; z-index:100; display:none; flex-direction:column; align-items:center; justify-content:center; gap:clamp(4px,1.5vh,18px); background:radial-gradient(900px 500px at 50% 60%, #0B0D30, #03041A 70%); overflow:hidden}
.js .owl-intro{display:flex}
.js .owl-intro.gone{display:none}
#scene{width:min(860px, 94vw); height:auto; max-height:52vh; overflow:visible; will-change:transform; flex-shrink:1}
#owl{transform-box:fill-box; transform-origin:50% 100%; opacity:0}
#wingL{transform-box:fill-box; transform-origin:100% 4%}
#wingR{transform-box:fill-box; transform-origin:0% 4%}
#owlHead{transform-box:fill-box; transform-origin:50% 90%}
#pupils{transform-box:fill-box}
.lid{transform-box:fill-box; transform-origin:50% 0%; transform:scaleY(0)}
.owl-intro .caret{opacity:0}
.owl-intro .caret.on{opacity:1; animation:blink 1s steps(1) infinite}
.intro-skip{position:absolute; z-index:3; right:24px; bottom:calc(24px + env(safe-area-inset-bottom,0px)); background:rgba(255,255,255,.04); border:1px solid var(--line2); color:var(--muted); font:600 14px var(--sans); padding:10px 18px; border-radius:999px; cursor:pointer}
.intro-skip:hover{color:var(--text); border-color:var(--cu)}
@keyframes blink{50%{opacity:0}}

.intro-title{position:relative; z-index:2; text-align:center; padding:0 20px; display:flex; flex-direction:column; align-items:center}
.it-kicker{display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; border:1px solid rgba(139,120,255,.35); background:rgba(90,100,255,.08); font:700 12.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; color:#C4BDFF}
.it-kicker::before{content:""; width:24px; height:13px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 11'%3E%3Ccircle cx='5' cy='5.5' r='4.2' fill='none' stroke='%23B3A8FF' stroke-width='1.5'/%3E%3Ccircle cx='15' cy='5.5' r='4.2' fill='none' stroke='%23B3A8FF' stroke-width='1.5'/%3E%3Ccircle cx='5.6' cy='6' r='1.7' fill='%23B3A8FF'/%3E%3Ccircle cx='14.4' cy='6' r='1.7' fill='%23B3A8FF'/%3E%3C/svg%3E") no-repeat center/contain}
.it-brand{margin-top:18px; font:800 clamp(52px,9vw,112px)/1 var(--serif); letter-spacing:-.055em; color:var(--text)}
.it-brand b{font-weight:800; padding-right:.06em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.it-sub{margin-top:16px; font:500 clamp(16px,1.8vw,21px)/1.45 var(--sans); color:var(--muted)}
.intro-title > *{opacity:0}
.owl-intro.static .intro-title > *{opacity:1}
@media (max-height:620px){ .it-sub{display:none} .it-brand{font-size:clamp(40px,7vw,72px)} }
/* ===== noční obloha přes celý web ===== */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:linear-gradient(180deg, #04051A 0%, #080A28 50%, #10133C 100%)}
.sky .dawn{position:absolute; inset:0; opacity:var(--dawn,0);
  background:linear-gradient(0deg, rgba(255,165,110,.55) 0%, rgba(255,140,115,.45) 28%, rgba(214,110,170,.30) 48%, rgba(120,90,210,.14) 66%, rgba(40,50,120,0) 84%)}
.stars{position:absolute; inset:0; opacity:calc(1 - var(--dawn,0) * .85)}
.stars i{position:absolute; width:var(--s); height:var(--s); border-radius:50%; background:#E6E9FF; opacity:var(--o)}
.stars i.tw{animation:twinkle var(--d) ease-in-out infinite; animation-delay:var(--dl)}
@keyframes twinkle{50%{opacity:calc(var(--o) * .25)}}
.moon{position:absolute; right:9vw; top:11vh; width:clamp(72px,8vw,124px); aspect-ratio:1; transform:translateY(calc(var(--p,0) * 46vh)); opacity:calc(1 - var(--dawn,0) * .6); will-change:transform}
.moon::before{content:""; position:absolute; inset:-140%; border-radius:50%; background:radial-gradient(circle, rgba(225,228,255,.22) 0%, rgba(190,185,255,.10) 22%, rgba(140,120,255,.05) 40%, transparent 66%)}
.moon svg{position:relative; width:100%; height:100%; display:block}
.cloud{position:absolute; height:40px; border-radius:50%; background:rgba(150,160,230,.10); filter:blur(14px); animation:drift linear infinite}
@keyframes drift{from{transform:translateX(-40vw)} to{transform:translateX(140vw)}}
.fly-owl{position:absolute; top:15vh; left:0; width:46px; opacity:0; animation:owlfly 34s linear infinite 5s}
.fly-owl svg{display:block; width:100%; animation:flapS .5s ease-in-out infinite alternate; transform-origin:50% 60%}
@keyframes owlfly{0%{transform:translate(-8vw,6vh) ; opacity:0} 2%{opacity:.75} 16%{transform:translate(55vw,-3vh)} 30%{transform:translate(108vw,4vh); opacity:.75} 31%,100%{transform:translate(110vw,4vh); opacity:0}}
@keyframes flapS{to{transform:scaleY(.55)}}
.forest{position:absolute; left:0; right:0; bottom:0; height:clamp(150px,24vh,250px); pointer-events:none; z-index:0}
.forest svg{position:absolute; inset:0; width:100%; height:100%; will-change:transform}
.forest .f-far{fill:#1A2058} .forest .f-mid{fill:#0E1238} .forest .f-near{fill:#05061A}
.fog{position:absolute; left:0; right:0; pointer-events:none}
.forest .fog1{bottom:18%; height:42%; background:linear-gradient(0deg, rgba(60,70,160,.38), rgba(60,70,160,0))}
.forest .fog2{bottom:4%; height:30%; background:linear-gradient(0deg, rgba(40,46,120,.45), rgba(40,46,120,0))}
.forest-end .fog1{bottom:18%; height:42%; background:linear-gradient(0deg, rgba(210,120,150,.30), rgba(210,120,150,0))}
.forest-end .fog2{bottom:4%; height:30%; background:linear-gradient(0deg, rgba(120,70,140,.35), rgba(120,70,140,0))}
.forest-end{position:relative; height:clamp(140px,20vh,230px); margin-top:-40px; pointer-events:none; z-index:1}
.forest-end svg{position:absolute; inset:0; width:100%; height:100%}
.forest-end .f-far{fill:#4A3272} .forest-end .f-mid{fill:#20183F} .forest-end .f-near{fill:#05061A}
footer{background:#05061A}
.fireflies{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0}
.fireflies i{position:absolute; width:5px; height:5px; border-radius:50%; background:#FFE9A0; box-shadow:0 0 10px 3px rgba(255,220,120,.55); opacity:0; animation:ffly var(--d) ease-in-out infinite, fblink var(--b) ease-in-out infinite; animation-delay:var(--dl)}
@keyframes ffly{0%,100%{transform:translate(0,0)} 25%{transform:translate(var(--x1),var(--y1))} 50%{transform:translate(var(--x2),var(--y2))} 75%{transform:translate(var(--x3),var(--y3))}}
@keyframes fblink{0%,100%{opacity:0} 40%,60%{opacity:.9}}
main,footer,.marquee{position:relative; z-index:1}
.hero,.sub-hero{isolation:isolate}
.hero > .wrap{position:relative; z-index:2}
body{background:#04051A}
@media (max-width:700px){ .fireflies{display:none} .moon{right:6vw; top:9vh} .fly-owl{width:34px} }

/* ===== meteory ===== */
.meteors{position:absolute; inset:0; overflow:hidden; opacity:calc(1 - var(--dawn,0) * .9)}
.meteor{position:absolute; left:var(--x); top:var(--y); width:var(--len); height:2px; border-radius:2px; transform-origin:100% 50%;
  background:linear-gradient(90deg, rgba(190,200,255,0) 0%, rgba(190,200,255,.35) 55%, #FFFFFF 100%);
  filter:drop-shadow(0 0 4px rgba(200,210,255,.9)); opacity:0; will-change:transform,opacity;
  animation:meteorFly var(--dur) cubic-bezier(.3,.2,.6,1) var(--delay) 1 both}
.meteor::after{content:""; position:absolute; right:-2px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:#fff; box-shadow:0 0 10px 3px rgba(210,220,255,.9)}
@keyframes meteorFly{
  0%{transform:rotate(var(--a)) translateX(0); opacity:0}
  12%{opacity:var(--o)}
  70%{opacity:calc(var(--o) * .7)}
  100%{transform:rotate(var(--a)) translateX(var(--dist)); opacity:0}}
.daytime .meteors{display:none}
@media (prefers-reduced-motion:reduce){ .meteors{display:none} }
/* ===== kalkulačka ===== */
.calc{padding:130px 0 60px}
.calc-box{display:grid; grid-template-columns:1.1fr .9fr; gap:0; border-radius:28px; border:1px solid var(--line2); background:var(--surface); overflow:hidden; box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.calc-inputs{padding:44px; display:flex; flex-direction:column; gap:30px}
.range .row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:10px}
.range label{font-weight:600; font-size:15.5px}
.range b{font:800 20px var(--serif); letter-spacing:-.02em; background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; white-space:nowrap}
.range input{width:100%; accent-color:#7C6CFF; height:26px}
.calc-out{padding:44px; background:radial-gradient(600px circle at 100% 0%, rgba(124,108,255,.25), transparent 60%), #10133A; display:flex; flex-direction:column; gap:10px; border-left:1px solid var(--line)}
.calc-out .lbl{color:var(--muted); font-size:15px}
.big-num{font:800 clamp(44px,5vw,68px)/1 var(--serif); letter-spacing:-.05em; background:linear-gradient(120deg,#FF9E7A,#F472B6 50%,#A855F7); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.calc-line{height:1px; background:var(--line2); margin:14px 0}
.calc-out p{font-size:16.5px} .calc-out p strong{color:var(--text)}
.calc-out .btn{margin-top:14px; justify-content:center}
/* ===== srovnání ===== */
.compare{padding:90px 0}
.cmp{overflow-x:auto; border-radius:24px; border:1px solid var(--line2); background:var(--surface)}
.cmp table{width:100%; border-collapse:collapse; min-width:720px}
.cmp th,.cmp td{padding:20px 22px; text-align:left; border-bottom:1px solid var(--line); font-size:15.5px}
.cmp tr:last-child td{border-bottom:0}
.cmp th{font:700 15px var(--serif); letter-spacing:-.01em; color:var(--muted)}
.cmp td:first-child{color:var(--muted); font-weight:600}
.cmp .hl{background:rgba(108,99,255,.12); color:var(--text); font-weight:600}
.cmp th.hl span{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:17px}
/* ===== náhled na vlastním webu ===== */
.tryit{padding:90px 0}
.tryit .wrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center}
.try-form{display:flex; flex-direction:column; gap:14px; margin-top:30px}
.try-form .btn{justify-content:center}
.browser{border-radius:18px; border:1px solid var(--line2); background:#0B0E2C; overflow:hidden; box-shadow:0 60px 110px -50px rgba(0,0,0,.95)}
.b-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; background:#12163F; border-bottom:1px solid var(--line)}
.b-bar i{width:11px; height:11px; border-radius:50%; background:#2B3070}
.b-bar span{margin-left:12px; flex:1; padding:6px 14px; border-radius:8px; background:#0B0E2C; color:var(--muted); font-size:13px}
.b-body{position:relative; padding:24px; height:380px; background:#F4F5FB; color:#1B1F3B}
.b-nav{display:flex; align-items:center; gap:14px; margin-bottom:34px}
.b-nav b{flex:1; font:800 18px var(--serif); letter-spacing:-.02em; color:#1B1F3B}
.b-nav span{width:54px; height:8px; border-radius:4px; background:#D5D8EA}
.sk{background:#DCDFEE; border-radius:8px}
.b-hero{display:flex; flex-direction:column; gap:12px; margin-bottom:34px}
.sk.w70{width:70%; height:22px} .sk.w50{width:50%; height:22px} .sk.w60{width:60%; height:10px} .sk.btn-sk{width:120px; height:34px; border-radius:17px; background:#C9CDEA; margin-top:6px}
.b-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px} .sk.box{height:78px}
.b-widget{position:absolute; right:18px; bottom:18px; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
.b-bubble{max-width:250px; padding:13px 15px; border-radius:16px 16px 4px 16px; background:#fff; box-shadow:0 12px 30px -8px rgba(30,30,90,.35); font-size:13.5px; line-height:1.45; color:#1B1F3B; animation:pop .5s both}
.b-fab{width:56px; height:56px; border-radius:50%; background:var(--grad); display:grid; place-items:center; box-shadow:0 12px 26px -6px rgba(108,99,255,.7)}
/* ===== zakládající klienti ===== */
.founders{padding:40px 0 60px}
.founders-card{display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:center; padding:clamp(32px,5vw,64px); border-radius:32px; border:1px solid rgba(139,120,255,.4); background:linear-gradient(135deg, rgba(59,130,246,.14), rgba(168,85,247,.14)), var(--surface)}
.founders-card h2{font-size:clamp(34px,4.2vw,56px)}
.founders-card .lead{margin-top:20px; font-size:17.5px; color:var(--muted)}
.seats{display:flex; flex-direction:column; gap:16px}
.seat-num b{display:block; font:800 72px/1 var(--serif); letter-spacing:-.05em}
.seat-num span{color:var(--muted)}
.seat-bar{height:10px; border-radius:99px; background:var(--line2); overflow:hidden}
.seat-bar i{display:block; height:100%; background:var(--grad); border-radius:99px; transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.seats .btn{justify-content:center}
/* ===== o mně ===== */
.about{padding:80px 0 60px}
.about-grid{display:grid; grid-template-columns:.6fr 1.4fr; gap:70px; align-items:center}
.about-photo{aspect-ratio:4/5; border-radius:28px; overflow:hidden; border:1px solid var(--line2); background:linear-gradient(160deg,#1A1F5A,#2A1856)}
.about-photo img{width:100%; height:100%; object-fit:cover; display:block}
.photo-ph{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:rgba(255,255,255,.35); font-size:14px}
.about .lead{margin-top:18px; font-size:17.5px; color:var(--muted)} .about .lead strong{color:var(--text)}
/* ===== animované ikony ===== */
.card .icon{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:hover .icon{transform:translateY(-4px) rotate(-6deg)}
.js .card .draw *{stroke-dasharray:1; stroke-dashoffset:1}
.js .card.in .draw *{animation:drawI 1.4s cubic-bezier(.6,0,.2,1) forwards .2s}
@keyframes drawI{to{stroke-dashoffset:0}}
/* ===== plovoucí chat ===== */
.sw{position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:58; display:flex; flex-direction:column; align-items:flex-end; gap:12px}
.sw-fab{position:relative; width:64px; height:64px; border-radius:50%; border:0; cursor:pointer; background:var(--grad); display:grid; place-items:center; box-shadow:0 16px 36px -10px rgba(108,99,255,.8); transition:transform .25s}
.sw-fab:hover{transform:scale(1.06)}
.sw-fab .pp{transition:transform .15s}
.sw-hint{padding:11px 15px; border-radius:16px 16px 4px 16px; background:#fff; color:#1B1F3B; font-size:14px; font-weight:600; box-shadow:0 14px 30px -10px rgba(0,0,0,.5); animation:pop .5s both}
.sw-panel{width:min(370px, calc(100vw - 32px)); height:min(540px, calc(100vh - 140px)); border-radius:24px; overflow:hidden; background:var(--surface); border:1px solid var(--line2); box-shadow:0 40px 90px -30px rgba(0,0,0,.9); display:none; flex-direction:column; animation:pop .35s both}
.sw.open .sw-panel{display:flex} .sw.open .sw-hint{display:none}
.sw-panel .chat-head{padding:16px 18px; position:relative}
.sw-close{position:absolute; right:12px; top:12px; width:36px; height:36px; border-radius:50%; border:1px solid var(--line2); background:transparent; color:var(--muted); cursor:pointer; font-size:18px}
.sw-panel .msgs{overflow-y:auto; justify-content:flex-start; padding:16px}
.sw-panel .msg{font-size:14.5px}
.sw-chips{display:flex; gap:8px; padding:0 14px 10px; flex-wrap:wrap}
.sw-chips .chip{padding:8px 12px; font-size:13px}
body.locked .sw{display:none}
/* ===== den ===== */
.daytime .sky{background:linear-gradient(180deg, #0C1A4A 0%, #16266A 55%, #2A3A86 100%)}
.daytime .stars{display:none}
.daytime .moon::before{background:radial-gradient(circle, rgba(255,210,140,.35), rgba(255,170,90,.1) 40%, transparent 68%)}
.daytime .forest .f-far{fill:#223071} .daytime .forest .f-mid{fill:#152259} .daytime .forest .f-near{fill:#08103A}
@media (max-width:1020px){ .calc-box,.tryit .wrap,.founders-card,.about-grid{grid-template-columns:1fr} .calc-out{border-left:0; border-top:1px solid var(--line)} .about-photo{max-width:240px; aspect-ratio:1; margin:0 auto} }
@media (max-width:600px){ .calc-inputs,.calc-out{padding:28px} .b-body{height:340px; padding:18px} .b-bubble{max-width:200px} .sw{right:14px; bottom:calc(14px + env(safe-area-inset-bottom,0px))} .sw-fab{width:56px; height:56px} }

.daytime .moon svg circle:first-of-type{fill:#FFE0A8}
.daytime .moon svg circle:not(:first-of-type){display:none}
.daytime .moon{filter:drop-shadow(0 0 30px rgba(255,190,110,.55))}

@media (max-width:700px){
  .moon{width:46px; top:12vh; right:6vw; transform:none; opacity:clamp(0, calc(1 - var(--p,0) * 7), 1)}
  .daytime .moon{filter:drop-shadow(0 0 18px rgba(255,190,110,.5))}
}
/* ===== objednávka ===== */
.order-hero{padding:calc(160px + env(safe-area-inset-top,0px)) 0 30px; text-align:center}
.order-hero .wrap{display:flex; flex-direction:column; align-items:center}
.order-hero h1{font-family:var(--serif); font-weight:800; font-size:clamp(40px,6vw,76px); letter-spacing:-.045em; line-height:1.02; margin:26px 0 18px}
.order-hero .lead{color:var(--muted); max-width:640px; font-size:18px}
.order-sec{padding:40px 0 120px}
.order-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:28px; align-items:start}
.order-form{display:flex; flex-direction:column; gap:18px; position:relative}
.o-card{margin:0; border:1px solid var(--line2); border-radius:22px; background:var(--surface); padding:26px 26px 22px; min-width:0}
.o-card legend{font:800 20px var(--serif); letter-spacing:-.02em; padding:0 8px; margin-left:-8px}
.o-opts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:6px}
.o-opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.o-opt{position:relative; cursor:pointer}
.o-opt input{position:absolute; opacity:0; pointer-events:none}
.o-opt span{display:flex; flex-direction:column; gap:4px; height:100%; padding:16px 16px 14px; border-radius:16px; border:1.5px solid var(--line2); background:var(--bg); transition:border-color .2s, background .2s, box-shadow .2s}
.o-opt b{font:800 17px var(--serif); letter-spacing:-.02em}
.o-opt small{color:var(--muted); font-size:13px; line-height:1.4}
.o-opt em{font-style:normal; font-weight:700; margin-top:6px; color:var(--cu2)}
.o-opt input:checked + span{border-color:#8B7CFF; background:rgba(108,99,255,.14); box-shadow:0 0 0 3px rgba(108,99,255,.18)}
.o-opt input:focus-visible + span{outline:2px solid var(--cu2); outline-offset:2px}
.o-check{display:flex; gap:12px; align-items:flex-start; margin-top:14px; cursor:pointer; font-size:15.5px; line-height:1.5}
.o-check input{width:20px; height:20px; margin-top:2px; flex-shrink:0; accent-color:#7C6CFF}
.o-check a{color:var(--cu2)}
.o-card .note{margin-top:14px}
.o-err{margin-top:14px; padding:14px 16px; border-radius:12px; background:rgba(255,120,120,.12); border:1px solid rgba(255,120,120,.4); color:#FFC2C2; font-size:14.5px}
.o-sum{position:sticky; top:calc(100px + env(safe-area-inset-top,0px))}
.o-sum-card{border-radius:24px; border:1px solid rgba(139,120,255,.45); background:linear-gradient(180deg,#1A1650,var(--surface) 70%); padding:28px; display:flex; flex-direction:column; gap:12px; box-shadow:0 40px 90px -40px rgba(108,99,255,.45)}
.o-sum-card h2{font-size:34px}
.o-row{display:flex; justify-content:space-between; gap:12px; font-size:15.5px; color:var(--muted)}
.o-row b{color:var(--text); white-space:nowrap}
.o-row.total{padding-top:12px; border-top:1px solid var(--line2); font-size:17px}
.o-row.total b{font:800 22px var(--serif)}
.o-sum-card .btn{justify-content:center; margin-top:8px}
.o-sum-card .btn:disabled{opacity:.6; cursor:wait}
.o-sum-card .form-ok{display:none}
@media (max-width:1020px){ .order-grid{grid-template-columns:1fr} .o-sum{position:static} }
@media (max-width:600px){ .o-opts,.o-opts.two{grid-template-columns:1fr} .o-card{padding:20px 18px} }

/* ===== podstránky ===== */
.sub-hero{padding:calc(170px + env(safe-area-inset-top,0px)) 0 90px; overflow:hidden; text-align:center}
.sub-hero .wrap{display:flex; flex-direction:column; align-items:center}
.sub-hero h1{font-family:var(--serif); font-weight:800; font-size:clamp(40px,6vw,84px); line-height:1.02; letter-spacing:-.045em; margin:28px 0 24px; max-width:980px}
.sub-hero .lead{font-size:clamp(17px,1.6vw,20px); color:var(--muted); max-width:680px}
.sub-hero .ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:38px}
.sub-sec{padding:90px 0}
.two{display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center}
.qlist{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-direction:column; gap:12px}
.qlist li{padding:16px 20px; border-radius:16px; background:var(--surface); border:1px solid var(--line); font-weight:600}
.qlist li::before{content:"„"; color:var(--cu2); margin-right:4px}
.qlist li::after{content:"“"; color:var(--cu2)}
.convo{border-radius:28px; background:var(--surface); border:1px solid var(--line2); overflow:hidden; box-shadow:0 50px 100px -50px rgba(0,0,0,.9)}
.convo .msgs{justify-content:flex-start; padding:22px; overflow:visible}
.convo .msg{animation:none; font-size:15px}
.cta-band{padding:40px 0 120px}
.cta-band .contact-card{grid-template-columns:1.3fr .7fr; align-items:center}
.cta-band .contact-card .btn{justify-content:center}
.legal{padding:calc(150px + env(safe-area-inset-top,0px)) 0 110px}
.legal .wrap{max-width:820px}
.legal h1{font-family:var(--serif); font-weight:800; font-size:clamp(36px,5vw,58px); letter-spacing:-.04em; line-height:1.05; margin:22px 0 14px}
.legal h2{font-size:24px; letter-spacing:-.02em; margin:44px 0 12px}
.legal p,.legal li{color:var(--muted); font-size:16.5px}
.legal ul,.legal ol{padding-left:22px; display:flex; flex-direction:column; gap:8px}
.legal p + p{margin-top:12px}
.legal strong{color:var(--text)}
.draft{padding:16px 20px; border-radius:14px; border:1px solid rgba(255,200,87,.35); background:rgba(255,200,87,.07); color:#F3DFA8; font-size:15px; margin:18px 0 10px}
.note{font-size:13px; color:var(--faint)}
.note a{color:var(--muted)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px}
.foot-grid h4{margin:0 0 14px; font:700 14px var(--sans); color:var(--text); letter-spacing:.02em}
.foot-grid a{display:block; color:var(--muted); text-decoration:none; font-size:14.5px; padding:4px 0}
.foot-grid a:hover{color:var(--text)}
.foot-grid p{color:var(--faint); font-size:14.5px; margin-top:14px; max-width:320px}
.foot-bottom{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line)}
footer{padding-top:70px}
footer .wrap{display:block}
.e404{min-height:100vh; display:grid; place-items:center; text-align:center; padding:120px 24px}
.e404 b{display:block; font:800 clamp(90px,16vw,180px)/1 var(--serif); letter-spacing:-.06em}
@media (max-width:1020px){ .two,.cta-band .contact-card{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .foot-grid{grid-template-columns:1fr} #scene{width:130vw} .waves svg{width:450%} }