/* Philoxa assistant site. Brand world: lagoon at blue hour, one coral light. */
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(fonts/BarlowCondensed-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-weight:500;font-display:swap;src:url(fonts/BarlowCondensed-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(fonts/BarlowCondensed-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:100 700;font-display:swap;src:url(fonts/IBMPlexSans-var-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:100 700;font-display:swap;src:url(fonts/IBMPlexSans-var-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(fonts/IBMPlexMono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --canvas:#051c24; --deep:#03141a; --panel:#0b2f39; --panel2:#0f3a46;
  --line:rgba(150,220,225,.14); --line2:rgba(150,220,225,.28);
  --lagoon:#19b3be; --lagoon-soft:rgba(25,179,190,.16);
  --accent:#ff6a3d; --accent-hover:#ff8563; --accent-muted:rgba(255,106,61,.22);
  --text:#eaf6f5; --text2:#a9c6c8; --text3:#7fa1a4;
  --disp:"Barlow Condensed","Arial Narrow",sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.8,.2,1); --ease2:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(3,12,16,.95),0 3px 12px rgba(3,12,16,.75),0 10px 44px rgba(3,12,16,.8);
  --r:22px;
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip;margin:0;background:var(--canvas);color:var(--text);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;opacity:0;animation:pagein .9s var(--ease) .05s forwards}
@keyframes pagein{to{opacity:1}}
a{color:inherit}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--accent);color:#1a0a04;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* one environment: fixed drifting glow + grain behind everything */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 20% 10%,rgba(25,179,190,.10),transparent 70%),radial-gradient(50% 40% at 85% 80%,rgba(255,106,61,.06),transparent 70%),var(--canvas)}
.env::before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 35% at 50% 50%,rgba(25,179,190,.08),transparent 70%);animation:drift 70s linear infinite;animation-delay:-20s}
.env::after{content:"";position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{0%{transform:translate(-8%,-6%) rotate(0)}50%{transform:translate(10%,8%) rotate(180deg)}100%{transform:translate(-8%,-6%) rotate(360deg)}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(16px,4vw,56px);transition:background .5s var(--ease),backdrop-filter .5s,padding .5s var(--ease),border-color .5s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(4,22,28,.72);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);padding-top:12px;padding-bottom:12px;border-color:var(--line)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font:600 22px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase}
.logo svg{width:28px;height:28px}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--text2);font-size:15px;transition:color .3s}
.nav ul a:hover{color:var(--text)}
.nav .right{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;font:400 12px/1 var(--mono);letter-spacing:.08em}
.lang a{padding:6px 7px;border-radius:8px;text-decoration:none;color:var(--text3);transition:color .3s,background .3s}
.lang a.on{color:var(--text);background:rgba(255,255,255,.07)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border-radius:999px;background:var(--accent);color:#1d0b05;font:600 16px/1 var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .35s var(--ease),background .3s,box-shadow .4s var(--ease);box-shadow:0 8px 30px -10px rgba(255,106,61,.6)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 40px -12px rgba(255,106,61,.75)}
.btn.sm{padding:11px 20px;font-size:14px}
.btn.ghost{background:rgba(255,255,255,.06);color:var(--text);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
@media(max-width:980px){.nav ul{display:none}}
.nav .in{color:var(--text2);text-decoration:none;font-size:15px;white-space:nowrap}.nav .in:hover{color:var(--text)}
@media(max-width:520px){.nav .right{gap:12px}.nav .in{font-size:14px}}
@media(max-width:520px){.nav .lang{display:none}.logo{font-size:19px}}

/* ---------- HERO (scrub) ---------- */
.hero{position:relative;height:420vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#04151b}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:center}
.stage video{opacity:0;transition:opacity .8s var(--ease);transform:translateZ(0);will-change:transform}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(3,14,19,0) 38%,rgba(3,14,19,.62) 100%),linear-gradient(180deg,rgba(3,14,19,.45) 0%,rgba(3,14,19,0) 22%,rgba(3,14,19,0) 70%,rgba(5,28,36,.9) 100%)}
.band{position:absolute;opacity:0;text-shadow:var(--tshadow);will-change:opacity;pointer-events:none}
.band.live{pointer-events:auto}
.band::before{content:"";position:absolute;inset:-18% -14%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(closest-side,rgba(3,14,19,var(--sa,.62)) 0%,rgba(3,14,19,calc(var(--sa,.62)*.66)) 55%,rgba(3,14,19,0) 100%)}
.b-left{left:clamp(20px,7vw,120px);top:50%;translate:0 -50%;width:min(600px,42vw)}
.b-right{right:clamp(20px,6vw,110px);top:50%;translate:0 -50%;width:min(540px,36vw)}
.b-center{left:50%;top:max(84px,11vh);translate:-50% 0;width:min(1240px,92vw);text-align:center}
.b-center .hh{font-size:clamp(40px,5.3vw,86px)}
.kick{display:inline-flex;align-items:center;gap:10px;font:400 12px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text2)}
.kick::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.bubble{margin:16px 0 22px;padding:16px 20px 18px;border-radius:18px;background:rgba(6,30,38,.58);border:1px solid var(--line2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-shadow:0 1px 3px rgba(3,12,16,.8)}
.bubble small{display:block;font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--text3);margin-bottom:10px}
.bubble p{margin:0;font-size:clamp(17px,1.5vw,21px);line-height:1.4}
.bubble.me{border-color:rgba(255,106,61,.35)}
.bubble.ok small{color:#7fe3d0}
.hh{margin:0;font:600 clamp(46px,6.2vw,96px)/.95 var(--disp);letter-spacing:-.01em;text-transform:uppercase}
.hh.xl{font-size:clamp(54px,8.6vw,140px)}
.hp{margin:14px 0 0;font-size:clamp(18px,1.6vw,22px);color:var(--text2)}
.b-center .bubble{display:inline-block;text-align:left;max-width:620px}
.b-center .ctas{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*28px))}
.fx-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-30px))}
.fx-ring .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) scale(calc(.6 + .4*var(--kc)))}
.fx-depth .hh{transform:scale(calc(.84 + .16*var(--k,0)));opacity:var(--k,0)}
.fade-sub{opacity:clamp(0,(var(--k,0) - .45)*3,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .45)*3,1))*14px))}
.fade-sub2{opacity:clamp(0,(var(--k,0) - .7)*4,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .7)*4,1))*14px))}
.ring-load{position:absolute;right:28px;bottom:28px;width:44px;height:44px;color:var(--lagoon);opacity:.8;transition:opacity .6s}
.ring-load.gone{opacity:0}
.cue{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:10px;font:400 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:var(--text2);transition:opacity .6s}
.cue i{width:1px;height:38px;background:linear-gradient(var(--text2),transparent);animation:cue 2.4s var(--ease2) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-height:560px){.cue,.ring-load{display:none}}

/* static hero (phones, reduced motion): identical gate strings in site.js */
@media (max-width: 720px),(orientation: portrait) and (max-width: 1024px),(orientation: portrait) and (pointer: coarse),(orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100svh;padding:110px 20px 70px;display:flex;flex-direction:column;justify-content:flex-end;gap:26px}
  .stage video,.ring-load,.cue{display:none}
  .poster{background-image:var(--static-img);background-position:50% 40%}
  .band{position:relative;opacity:1!important;left:auto;right:auto;top:auto;translate:none;width:auto;--k:1!important}
  .band::before{display:none}
  .band.b-hide-static{display:none}
  .b-center{text-align:left}
  .b-center .ctas{justify-content:flex-start}
  .hh{font-size:clamp(44px,12vw,72px)}
  .scrim{background:linear-gradient(180deg,rgba(3,14,19,.35),rgba(3,14,19,.55) 40%,rgba(5,28,36,.96))}
}

/* ---------- sections ---------- */
main section{position:relative;padding:clamp(90px,14vh,170px) clamp(20px,6vw,90px)}
.wrap{max-width:1200px;margin:0 auto}
.sk{font:400 12px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--lagoon)}
.sp{margin:16px 0 0;max-width:52ch;color:var(--text2);font-size:17px;line-height:1.55}
.sh{margin:18px 0 0;font:600 clamp(40px,5.4vw,84px)/.96 var(--disp);text-transform:uppercase;letter-spacing:-.005em;max-width:16ch}
.lede{color:var(--text2);font-size:clamp(17px,1.4vw,20px);max-width:52ch}

/* reveal choreography */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.in .rv,.rv.in{opacity:1;transform:none}
.in .rv:nth-child(2){transition-delay:.08s}.in .rv:nth-child(3){transition-delay:.16s}.in .rv:nth-child(4){transition-delay:.24s}.in .rv:nth-child(5){transition-delay:.32s}
.done .rv{transition-delay:0s!important}

/* pain: scroll-lit words */
.pain{padding-top:clamp(120px,18vh,200px)}
.pain .lines{margin-top:40px;display:grid;gap:clamp(26px,5vh,54px)}
.pain .ln{margin:0;font:500 clamp(38px,5.4vw,90px)/1.02 var(--disp);letter-spacing:-.005em;max-width:22ch}
.pain .ln .w{color:rgba(234,246,245,.16);transition:color .5s var(--ease)}
.pain .ln .w.lit{color:var(--text)}
.pain .ln .w.lit.hot{color:var(--accent)}

/* how: three frames */
.how .grid{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative}
.step{position:relative;border-radius:var(--r);overflow:hidden;background:var(--panel);border:1px solid var(--line);min-height:520px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
.step img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.step.in img{transform:scale(1)}
.step:hover img{transform:scale(1.04)}
.step::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(3,14,19,0) 30%,rgba(3,14,19,.72) 62%,rgba(3,14,19,.94))}
.step .t{padding:28px}
.step .n{font:400 12px/1 var(--mono);letter-spacing:.2em;color:var(--accent)}
.step h3{margin:12px 0 10px;font:600 32px/1 var(--disp);text-transform:uppercase}
.step p{margin:0;color:var(--text2)}
.thread{position:absolute;left:0;right:0;top:-34px;height:40px;pointer-events:none}
.thread path{stroke:var(--lagoon);stroke-width:1.2;fill:none;stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len)*(1 - var(--p,0)));opacity:.6}
.thread circle{fill:var(--accent)}
@media(max-width:900px){.how .grid{grid-template-columns:1fr}.step{min-height:420px}.thread{display:none}}

/* product: sticky phone */
.prod{padding-top:40px}
.prod .pin{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}
.prod .copy{padding-top:10vh}
.prod .beat{min-height:78vh;display:flex;flex-direction:column;justify-content:center;opacity:.25;transition:opacity .7s var(--ease)}
.prod .beat.on{opacity:1}
.prod .beat h3{margin:14px 0 12px;font:600 clamp(36px,4vw,60px)/.98 var(--disp);text-transform:uppercase;max-width:14ch}
.prod .beat p{margin:0;color:var(--text2);max-width:40ch;font-size:18px}
.phone-col{position:sticky;top:12vh;height:76vh;display:flex;align-items:center;justify-content:center}
.phone{position:relative;width:min(340px,80%);aspect-ratio:9/19.3;border-radius:52px;padding:12px;background:linear-gradient(145deg,#1c3e47,#081c22 40%,#12323a);box-shadow:0 0 0 1px rgba(170,230,235,.18),0 60px 120px -40px rgba(0,0,0,.8),0 0 80px -20px rgba(25,179,190,.35),inset 0 0 0 2px rgba(255,255,255,.04)}
.phone::before{content:"";position:absolute;top:22px;left:50%;translate:-50% 0;width:96px;height:28px;border-radius:20px;background:#020a0d;z-index:3}
.screen{position:relative;height:100%;border-radius:42px;overflow:hidden;background:linear-gradient(180deg,#0a2a33,#06202a);display:flex;flex-direction:column}
.screen .top{padding:62px 18px 14px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.screen .av{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#ff9b77,#ff6a3d 45%,#b8401c);box-shadow:0 0 18px rgba(255,106,61,.5)}
.screen .who b{display:block;font-size:15px}
.screen .who span{font:400 11px/1 var(--mono);color:#7fe3d0;letter-spacing:.06em}
.chat{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end;overflow:hidden}
.msg{max-width:84%;padding:10px 13px;border-radius:18px;font-size:14px;line-height:1.38;opacity:0;transform:translateY(14px) scale(.96);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.msg.show{opacity:1;transform:none}
.msg.me{align-self:flex-end;background:var(--accent);color:#1d0b05;border-bottom-right-radius:6px}
.msg.px{align-self:flex-start;background:rgba(255,255,255,.08);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.call{align-self:stretch;max-width:none;display:flex;align-items:center;gap:12px;background:rgba(25,179,190,.12);border:1px solid rgba(25,179,190,.35)}
.msg.call .wave{display:flex;gap:3px;align-items:center;height:22px}
.msg.call .wave i{width:3px;border-radius:2px;background:var(--lagoon);height:30%;animation:wv 1.1s ease-in-out infinite}
.msg.call .wave i:nth-child(2){animation-delay:-.2s}.msg.call .wave i:nth-child(3){animation-delay:-.45s}.msg.call .wave i:nth-child(4){animation-delay:-.7s}.msg.call .wave i:nth-child(5){animation-delay:-.9s}
@keyframes wv{50%{height:100%}}
.msg.call small{display:block;font:400 11px/1.2 var(--mono);color:var(--text2)}
.msg.done{border-color:rgba(127,227,208,.45);background:rgba(127,227,208,.1)}
.msg.done b{color:#7fe3d0;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:6px}
@media(max-width:900px){.prod .pin{grid-template-columns:1fr}.phone-col{position:relative;top:0;height:auto;margin:30px 0}.prod .beat{min-height:auto;opacity:1;margin-bottom:44px}.prod .copy{padding-top:0}}

/* demo: press and hold */
.demo .box{margin-top:56px;display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(28px,4vw,56px);border-radius:32px;background:linear-gradient(160deg,rgba(15,58,70,.7),rgba(6,30,38,.6));border:1px solid var(--line)}
.hold{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center}
.hold svg.rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hold svg.rings circle{fill:none;stroke:var(--lagoon);opacity:.25}
.hold svg.rings .prog{stroke:var(--accent);stroke-width:3;opacity:1;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%}
.hold .pulse{position:absolute;inset:22%;border-radius:50%;border:1px solid rgba(25,179,190,.5);opacity:0;animation:pl 3.2s var(--ease) infinite}
.hold .pulse:nth-of-type(2){animation-delay:-1.1s}.hold .pulse:nth-of-type(3){animation-delay:-2.2s}
@keyframes pl{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.hold button{position:relative;width:46%;aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;background:radial-gradient(circle at 50% 38%,#ff9b77,#ff6a3d 50%,#c2471f);color:#1d0b05;font:600 15px/1.2 var(--body);box-shadow:0 0 60px -6px rgba(255,106,61,.7),inset 0 -8px 20px rgba(0,0,0,.2);transition:transform .4s var(--ease);touch-action:none;user-select:none;-webkit-user-select:none}
.hold button:active{transform:scale(.95)}
.hold.live .pulse{animation-duration:1.4s;border-color:rgba(255,106,61,.6)}.hold.live button{background:radial-gradient(circle at 50% 38%,#ffd2c2,#ff8a63 50%,#d9532a);animation:lv 1.4s var(--ease) infinite}@keyframes lv{0%,100%{box-shadow:0 0 60px -6px rgba(255,106,61,.7),inset 0 -8px 20px rgba(0,0,0,.2)}50%{box-shadow:0 0 90px 0 rgba(255,106,61,.95),inset 0 -8px 20px rgba(0,0,0,.2)}}
.hold.complete button{background:radial-gradient(circle at 50% 38%,#aef3e6,#44cdb8 55%,#1b8e84)}
.lines2{display:grid;gap:12px}
.lines2 .l{display:grid;grid-template-columns:110px 1fr;gap:14px;opacity:.12;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.lines2 .l.on{opacity:1;transform:none}
.lines2 .l b{font:400 11px/1.9 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
.lines2 .l.px b{color:var(--accent)}
.lines2 .l span{font-size:17px}
.res{margin-top:20px;padding:16px 18px;border-radius:16px;border:1px solid rgba(127,227,208,.4);background:rgba(127,227,208,.08);opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.res.on{opacity:1;transform:none}
.rufan{margin-top:28px;padding:30px 34px;border-radius:var(--r);border:1px solid var(--line2);background:linear-gradient(135deg,rgba(15,58,70,.72),rgba(8,36,45,.72));display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.rufan h3{margin:0;font:600 clamp(28px,3vw,40px)/1 var(--disp);text-transform:uppercase;letter-spacing:.005em}
.rufan .rtx p{margin:12px 0 0;color:var(--text2);max-width:44ch}
.rrow{display:flex;gap:10px}
.rrow input{flex:1;min-width:0;padding:14px 18px;border-radius:999px;border:1px solid var(--line2);background:rgba(3,20,26,.7);color:var(--text);font:500 17px/1 var(--body);outline:none;transition:border-color .3s}
.rrow input:focus{border-color:var(--lagoon)}
.ronay{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;line-height:1.45;color:var(--text3);cursor:pointer}
.ronay input{margin-top:2px;accent-color:var(--accent);width:16px;height:16px;flex:none}
.ronay a{color:var(--text2)}
.rufan .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rmsg{margin:12px 0 0;min-height:1.4em;font-size:15px;color:var(--text2)}
.rmsg.ok{color:#7fe3d0}.rmsg.err{color:#ffb199}
.rufan button[disabled]{opacity:.6;pointer-events:none}
.pnote{margin:26px auto 0;text-align:center;color:var(--text3);font-size:15px;max-width:70ch}
.res b{font:400 11px/1 var(--mono);letter-spacing:.14em;color:#7fe3d0;text-transform:uppercase;display:block;margin-bottom:8px}
@media(max-width:800px){.rufan{grid-template-columns:1fr;padding:24px 20px;gap:18px}.rrow{flex-direction:column}.demo .box{grid-template-columns:1fr}.hold{max-width:300px;margin:0 auto}.lines2 .l{grid-template-columns:1fr;gap:2px}}

/* who: split */
.who .split{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line2)}
.who .col{padding:40px clamp(0px,3vw,48px) 10px 0}
.who .col + .col{padding-left:clamp(20px,3vw,48px);border-left:1px solid var(--line2)}
.who h3{margin:0 0 24px;font:600 40px/1 var(--disp);text-transform:uppercase}
.who ul{list-style:none;margin:0;padding:0}
.who li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font-size:18px}
.who li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--lagoon);translate:0 -2px}
.lim .col + .col li::before{border-color:var(--accent);background:var(--accent-muted)}
@media(max-width:800px){.who .split{grid-template-columns:1fr}.who .col + .col{padding-left:0;border-left:0}}

/* security: horizontal rail */
.sec .rail{margin-top:60px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.sec .it{padding:26px 22px;border-radius:20px;background:rgba(11,47,57,.55);border:1px solid var(--line);transition:border-color .4s,transform .5s var(--ease)}
.sec .it:hover{border-color:var(--line2);transform:translateY(-4px)}
.sec .ic{width:44px;height:44px;margin-bottom:22px;color:var(--lagoon)}
.sec h3{margin:0 0 8px;font:600 22px/1.05 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.sec p{margin:0;color:var(--text2);font-size:15px}
.sec .glow{position:absolute;right:-10vw;top:10%;width:40vw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(25,179,190,.12),transparent 65%);pointer-events:none;animation:breathe 9s ease-in-out infinite;animation-delay:-3s}
@keyframes breathe{50%{transform:scale(1.12);opacity:.6}}
@media(max-width:1100px){.sec .rail{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sec .rail{grid-template-columns:1fr}}

/* pricing */
.price .cards{margin-top:60px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;max-width:900px;margin-left:auto;margin-right:auto}
.pc{position:relative;padding:34px 30px;border-radius:28px;background:rgba(11,47,57,.55);border:1px solid var(--line);display:flex;flex-direction:column}
.pc.pop{background:linear-gradient(165deg,rgba(255,106,61,.16),rgba(11,47,57,.7) 45%);border-color:rgba(255,106,61,.45)}
.pc.soon{opacity:.62}
.pc .tag{position:absolute;top:24px;right:24px;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;border-radius:999px;background:var(--accent-muted);color:#ffb59c}
.pc h3{margin:0;font:600 26px/1 var(--disp);text-transform:uppercase;letter-spacing:.06em;color:var(--text2)}
.pc .amt{margin:22px 0 4px;font:600 clamp(48px,4.6vw,68px)/1 var(--disp)}
.pc .per{color:var(--text3);font-size:14px}
.pc ul{list-style:none;margin:26px 0 30px;padding:0;flex:1}
.pc li{padding:10px 0;border-top:1px solid var(--line);color:var(--text2)}
.pc li:first-child{border-top:0}
@media(max-width:900px){.price .cards{grid-template-columns:1fr}}
.donem{display:flex;gap:6px;justify-content:center;margin:40px auto 0;padding:5px;border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%}
.donem button{border:0;background:none;color:var(--text2);font-family:inherit;font-size:15px;font-weight:500;line-height:1;padding:11px 18px;border-radius:999px;cursor:pointer}
.donem button.on{background:var(--accent-muted);color:#ffd2c2}
.price .cards.yil,.price .ynot{display:none}
.price.yil .cards.yil{display:grid}.price.yil .ynot{display:block}.price.yil .cards.ay{display:none}
.price .donem+.cards{margin-top:28px}

/* faq */
.faq .list{margin-top:50px;border-top:1px solid var(--line2);max-width:900px}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:26px 0;font:500 clamp(22px,2.2vw,30px)/1.15 var(--disp);letter-spacing:.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;position:relative;width:18px;height:18px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--lagoon);transition:transform .4s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq details p{margin:0 0 26px;color:var(--text2);max-width:60ch;font-size:18px}

/* end */
.end{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;text-align:center;overflow:hidden;isolation:isolate;padding-top:max(110px,13vh)!important}
.end .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.06);transition:transform 2.4s var(--ease)}
.end.in .bg{transform:scale(1)}
.end::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--canvas),rgba(5,28,36,.35) 30%,rgba(5,28,36,.45) 70%,var(--canvas))}
.end .sh{margin:0 auto;max-width:none;width:min(1100px,100%);font-size:clamp(44px,6.2vw,100px);text-shadow:var(--tshadow)}
.end p{color:var(--text2);margin:22px auto 34px;font-size:19px;text-shadow:var(--tshadow)}

footer{padding:50px clamp(20px,6vw,90px) 60px;border-top:1px solid var(--line);color:var(--text3);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px 30px;justify-content:space-between;align-items:center}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none;color:var(--text2)}
footer a:hover{color:var(--text)}

@media (pointer:coarse){.btn{min-height:44px}.lang a{min-height:44px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  body{opacity:1}
  .rv{opacity:1;transform:none}
  .pain .ln .w{color:var(--text)}
  .msg{opacity:1;transform:none}
  .prod .beat{opacity:1}
  .lines2 .l,.res{opacity:1;transform:none}
  .fx-rise .w,.fx-drift .w,.fx-ring .c,.fx-depth .hh,.fade-sub,.fade-sub2{opacity:1;transform:none}
}

/* mobil dil 03.10 */
@media(max-width:520px){.nav .lang{display:flex;position:absolute;top:100%;right:clamp(16px,4vw,56px);margin-top:-6px;font-size:11px}
.nav .lang a{min-height:0;min-width:0;padding:6px 7px}}
@media(max-width:380px){.nav .right{gap:10px}.nav .in{font-size:13px}.nav .btn.sm{padding:9px 12px;font-size:12.5px;white-space:nowrap}.logo{font-size:14px;letter-spacing:.1em;gap:6px}.logo svg{width:22px;height:22px}}

/* Dil secimi belirgin (09.10.2026) */
.lang{gap:6px;font:500 13px/1 var(--mono)}
.lang a{border:1px solid rgba(234,246,245,.28);color:#eaf6f5}
.lang a.on{background:#19b3be;border-color:#19b3be;color:#051c24;font-weight:700}
@media(max-width:520px){.nav .lang{font-size:13px;margin-top:2px;gap:6px}.nav .lang a{padding:8px 11px}}
/* Telefonda dil butonlari ust cubugun icinde ikinci satir, icerigin ustune binmesin; #familie basligi cubugun altinda kalmasin (09.10.2026) */
[id]{scroll-margin-top:96px}
@media(max-width:520px){.nav .right{flex-wrap:wrap;justify-content:flex-end;row-gap:8px}.nav .lang{position:static;order:3;flex-basis:100%;justify-content:flex-end;margin-top:0}[id]{scroll-margin-top:150px}}

/* 11.10.2026: Business (dertler, branslar, test aramasi) */
.pgrid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pn{padding:28px 24px;border-radius:20px;background:rgba(11,47,57,.55);border:1px solid var(--line);transition:border-color .4s}
.pn:hover{border-color:var(--line2)}
.sec .pn h3{margin:0 0 16px;font:600 26px/1.05 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.sec .pn .fact{margin:0 0 16px;padding-left:12px;border-left:2px solid var(--accent);color:var(--text);font-size:16px;line-height:1.45}
.sec .pn .fact small{display:block;margin-top:6px;font:400 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.sec .pn p{color:var(--text2);font-size:15px;line-height:1.55}
.sec.br .rail{margin-top:48px}
.sec.br .it h3{font-size:24px}
.rrow.r2{margin-top:10px}
.rrow select{flex:1;min-width:0;padding:14px 40px 14px 18px;border-radius:999px;border:1px solid var(--line2);background:rgba(3,20,26,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2319b3be' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center;color:var(--text);font:500 16px/1 var(--body);outline:none;appearance:none;-webkit-appearance:none}
.rrow select:focus{border-color:var(--lagoon)}
.rrow select option{background:#051c24;color:#fff}
@media(max-width:1000px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.pgrid{grid-template-columns:1fr}}

/* 11.10.2026: 3 paket yan yana */
.price .cards{grid-template-columns:repeat(3,1fr);max-width:1180px}
@media(max-width:980px){.price .cards{grid-template-columns:1fr;max-width:520px}}
.pc .amt small.vat{font:500 .34em/1 var(--body);color:var(--text2);letter-spacing:0;white-space:nowrap}