/* Gonofin tanıtım sayfası — public_html_1/DESIGN_public_1.md (Column) dilini izler. */
:root{
  --navy:#111a4a;--ink:#011821;--slate:#3b3e47;--steel:#7c7f88;--fog:#a9acb6;--mist:#cbcccf;
  --line:#e3e4e8;--canvas:#f6f6f8;--white:#fff;--charcoal:#232730;
  --orange:#ec652b;--sea6:#44b48b;--sea7:#167e6c;--sea4:#94efb7;--sky:#88deeb;--deep-sea:#023247;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Old Standard TT',Georgia,'Times New Roman',serif;
  --shadow-product:rgba(0,0,0,.02) 0 40px 32px,rgba(0,0,0,.03) 0 22px 18px,rgba(0,0,0,.03) 0 12px 10px,rgba(0,0,0,.04) 0 7px 5px,rgba(0,0,0,.07) 0 3px 2px;
  --shadow-widget:rgba(30,30,44,.15) 24px 48px 64px,#fff 0 0 0 1px inset;
  --shadow-card:rgba(18,22,30,.024) 0 1px 4px,rgba(18,22,30,.05) 0 1px 0,rgba(18,22,30,.024) 0 0 0 1px;
  --shadow-btn:rgba(17,26,74,.1) 0 1px 3px,rgba(17,26,74,.05) 0 1px 0,rgba(255,255,255,.5) 0 1px 0 inset;
  --r:8px;--max:1200px;--gutter:max(calc((100vw - var(--max))/2),32px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{margin:0;background:var(--canvas);color:var(--navy);font:400 16px/1.5 var(--font);font-feature-settings:"cv11";-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
em{font-style:normal;color:var(--sea7)}
.mono{font-family:var(--mono)}
.shell{padding-left:var(--gutter);padding-right:var(--gutter)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:16px;top:-60px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:var(--r);z-index:100}
.skip-link:focus{top:12px}

/* progress */
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:60}
.progress span{display:block;height:100%;background:var(--sea6);transform-origin:0 50%;transform:scaleX(var(--progress,0))}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:62px;background:rgba(246,246,248,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.nav.is-scrolled{background:rgba(255,255,255,.92);border-color:var(--line)}
.nav-inner{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:500;letter-spacing:-.04em}
.brand b{font-weight:300;color:var(--steel)}
.brand-logo{display:block;height:28px;width:auto}
.brand-mark{display:grid;grid-template-columns:repeat(2,7px);gap:2px;transform:rotate(-14deg)}
.brand-mark i{width:7px;height:7px;border-radius:2px;background:var(--sea7)}
.brand-mark i:nth-child(2){background:var(--navy)}
.nav-links{display:flex;gap:4px;margin-inline-start:auto}
.nav-links a{font-size:14px;padding:6px 12px;border-radius:var(--r);color:var(--slate)}
.nav-links a:hover{background:#fff;box-shadow:var(--shadow-card)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r);font:500 14px/1 var(--font);padding:14px 20px;transition:transform .2s,background .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:#26336f}
.btn-outline{border:1px solid var(--navy);padding:13px 32px}
.btn-outline:hover{background:#fff}
.btn-sm{padding:10px 16px}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#e6f8ee}
.btn-ghost{border:1px solid rgba(255,255,255,.35);color:#fff;padding:13px 28px}
.btn-ghost:hover{background:rgba(255,255,255,.08)}

/* tag with dot */
.tag{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--font);letter-spacing:.12em;color:var(--navy)}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--sea6)}

/* hero */
.hero{position:relative;min-height:calc(100svh - 62px);display:flex;align-items:center;padding-top:72px;padding-bottom:120px;overflow:hidden}
.field{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fill,14px);grid-auto-rows:14px;justify-content:end;align-content:center;padding:0 0 0 40%;opacity:.9;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 72% 50%,#000 30%,transparent 75%);
  transform:translate3d(0,calc(var(--hero,0) * -60px),0)}
.field span{width:4px;height:4px;margin:5px;border-radius:50%;background:var(--mist);transition:background 1.2s,transform 1.2s}
.field span.up{background:var(--sea6);transform:scale(1.25)}
.field span.dn{background:var(--navy);opacity:.55}
.hero-grid{position:relative;width:100%;display:grid;grid-template-columns:44% 56%;align-items:center;gap:24px}
.hero h1{font-size:clamp(44px,6.4vw,76px);font-weight:600;line-height:1.02;letter-spacing:-.045em;margin:24px 0}
.hero-copy p{font-size:18px;line-height:1.5;color:var(--steel);max-width:440px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-visual{position:relative;height:460px;transform:translate3d(0,calc(var(--hero,0) * 50px),0)}
.widget{position:absolute;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-widget)}
.hero-anim{position:absolute;right:-6%;top:50%;width:min(720px,112%);height:auto;aspect-ratio:1600/1036;object-fit:contain;translate:0 -50%;filter:drop-shadow(0 25px 38px rgba(17,26,74,.12));animation:float 7s ease-in-out infinite}
.widget-chip{display:flex;align-items:center;gap:8px;padding:12px 16px;font-size:13px;color:var(--slate);white-space:nowrap}
.widget-chip .mono{color:var(--sea7);font-weight:500}
.chip-a{left:6%;top:8%;transform:translate3d(0,calc(var(--hero,0) * -70px),0)}
.chip-b{right:0;bottom:0;transform:translate3d(0,calc(var(--hero,0) * -30px),0)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--sea6);box-shadow:0 0 0 5px rgba(68,180,139,.18);animation:pulse 2s infinite}
.scroll-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font:500 11px var(--font);letter-spacing:.2em;color:var(--steel)}
.scroll-cue i{width:1px;height:40px;background:linear-gradient(var(--sea6),transparent);animation:drip 1.8s infinite}
@keyframes float{50%{translate:0 calc(-50% - 10px)}}
@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(68,180,139,0)}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* story — horizontal pinned */
.story{position:relative;background:#fff;height:500vh}
.story-stage{position:sticky;top:62px;height:calc(100vh - 62px);height:calc(100svh - 62px);display:flex;flex-direction:column;justify-content:center;gap:40px;overflow:hidden}
.story-head{display:flex;align-items:flex-end;gap:24px}
.story-head h2{margin-top:16px;font-size:clamp(36px,4.4vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.story-dots{display:flex;gap:6px;margin:0 0 10px auto;padding:0;list-style:none}
.story-dots li{width:22px;height:3px;border-radius:2px;background:var(--line);transition:background .3s,width .3s}
.story-dots li.on{background:var(--navy);width:40px}
.story-track{--cw:min(420px,80vw);display:flex;gap:24px;padding-left:calc(50vw - var(--cw) / 2);padding-right:calc(50vw - var(--cw) / 2);will-change:transform}
.s-card{flex:0 0 var(--cw);min-height:min(440px,58vh);display:flex;flex-direction:column;padding:32px;background:var(--canvas);border-radius:var(--r);box-shadow:var(--shadow-card);transform-origin:50% 100%;will-change:transform}
.s-num{font:500 12px var(--mono);letter-spacing:.06em;color:var(--sea7)}
.s-card h3{font-size:clamp(26px,2.4vw,32px);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:16px 0 12px}
.s-card p{color:var(--steel);font-size:16px}
.s-visual{margin-top:auto;padding-top:28px;min-height:150px;position:relative}
.s-card-dark{position:relative;overflow:hidden;background:var(--navy);color:#fff;box-shadow:var(--shadow-product)}
.s-card-dark .s-num{color:var(--sea4)}
.s-card-dark p{color:#b9c0dc}
/* v1 */
/* 01 — eski dünya: gazetenin borsa sayfası */
.s-card-news{--news:#ebe4d2;--news-ink:#1d1a14;--news-faded:#5f574a;position:relative;overflow:hidden;color:var(--news-ink);
  background: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='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),var(--news);
  box-shadow:rgba(40,30,10,.2) 0 16px 28px -14px,rgba(40,30,10,.1) 0 1px 3px}
.s-card-news .mast{display:flex;justify-content:space-between;align-items:baseline;border-top:3px double var(--news-ink);border-bottom:1px solid var(--news-ink);padding:6px 0 4px;margin-bottom:14px;font:400 11px var(--serif);letter-spacing:.06em;text-transform:uppercase}
.s-card-news .mast strong{font:700 15px var(--serif);letter-spacing:.2em}
.s-card-news .s-num{font:400 12px var(--serif);letter-spacing:.12em;color:var(--news-faded)}
.s-card-news h3{font-family:var(--serif);font-weight:700;font-size:clamp(30px,2.8vw,36px);letter-spacing:-.015em;margin-top:6px}
.s-card-news p{font-family:var(--serif);color:var(--news-faded);font-size:17px}
.news-table{width:100%;border-collapse:collapse;font:400 14px var(--serif);font-variant-numeric:tabular-nums}
.news-table th{font-weight:700;font-size:11px;letter-spacing:.1em;text-align:start;border-bottom:1px solid var(--news-ink);padding:0 0 4px}
.news-table td{padding:5px 0;border-bottom:1px dotted #9b917d}
.news-table td:nth-child(n+2),.news-table th:nth-child(n+2){text-align:right}
.s-card-news .halftone{position:absolute;right:-30px;top:120px;width:150px;height:150px;border-radius:50%;background-image:radial-gradient(var(--news-ink) 1.1px,transparent 1.4px);background-size:6px 6px;opacity:.12;pointer-events:none}
/* v2 */
/* 02 — yeni dünya: derin deniz gecesi, parlayan sembol ızgarası */
.s-card-glow{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  background:radial-gradient(ellipse 80% 55% at 75% 95%,rgba(68,180,139,.32),transparent 70%),radial-gradient(ellipse 60% 50% at 10% 0%,rgba(136,222,235,.14),transparent 70%),linear-gradient(160deg,var(--deep-sea),var(--ink) 65%);
  box-shadow:rgba(1,24,33,.35) 0 24px 40px -16px}
.s-card-glow::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(148,239,183,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(148,239,183,.06) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%)}
.s-card-glow .s-num{color:var(--sea4)}
.s-card-glow p{color:#a9c3cc}
.glow-count{position:absolute;right:0;top:-6px;font-size:11px;font-weight:500;color:var(--sea4)}
.v-many{display:grid;grid-template-columns:repeat(25,1fr);gap:5px}
.v-many i{aspect-ratio:1;border-radius:50%;background:rgba(169,195,204,.18)}
.v-many i.up{background:var(--sea4);box-shadow:0 0 6px rgba(148,239,183,.8)}
.v-many i.sky{background:var(--sky);box-shadow:0 0 6px rgba(136,222,235,.8)}
.v-many i.tw{animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25;box-shadow:none}}
/* v3 */
.v-narrow{display:flex;align-items:flex-end;gap:16px}
.mini-win{width:110px;height:130px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:10px;display:flex;flex-direction:column;gap:7px;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.mini-win i{height:8px;border-radius:2px;background:var(--line)}
.mini-win i:nth-child(odd){width:70%}
.lost{font-size:12px;color:var(--steel);padding:8px 12px;border:1px dashed var(--fog);border-radius:var(--r)}
/* v4 / v5 */
.v-crowd svg,.v-diverge svg{width:100%;height:110px;overflow:visible}
.same path{fill:none;stroke:var(--fog);stroke-width:1.5}
.buys circle{fill:var(--navy);opacity:.4}
.v-crowd .mono{display:block;margin-top:8px;font-size:12px;color:var(--steel);letter-spacing:.1em}
.s-card-dark .same path{stroke:#3a4479}
.you{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:calc(400 - var(--draw,0) * 400)}
.you-label{position:absolute;right:0;top:-4px;font-size:12px;color:var(--orange);letter-spacing:.14em}
.v-diverge{width:46%}
/* 05 — telefonda izleme listesi: kaydırdıkça yukarı kayar */
.phone{position:absolute;right:28px;top:190px;width:170px;padding:6px;border-radius:30px;background:#0a0f2c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),rgba(0,0,0,.45) 0 30px 50px -10px;rotate:-6deg;translate:0 calc((1 - var(--draw,1)) * 60px)}
.phone img{display:block;width:100%;height:auto;border-radius:24px}
.phone::before{content:"";position:absolute;left:50%;top:13px;width:46px;height:12px;border-radius:8px;background:#0a0f2c;translate:-50% 0;z-index:1}

/* tool — stacking cards */
.tool{padding-top:144px;padding-bottom:72px}
.tool-head{margin-bottom:64px}
.tool-head h2{font-size:clamp(40px,5vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin-top:20px}
.stack{display:flex;flex-direction:column;gap:32px}
.k-card{--i:0;position:sticky;top:calc(96px + var(--i) * 18px);display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;min-height:400px;padding:48px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-product);transform-origin:50% 0;will-change:transform}
.k-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--canvas);opacity:var(--dim,0);pointer-events:none}
.k-num{font-size:12px;color:var(--sea7)}
.k-copy h3{font-size:clamp(28px,3.3vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.1;margin:16px 0}
.k-copy p{font-size:18px;color:var(--steel);max-width:380px}
.k-visual{background:var(--canvas);border-radius:var(--r);padding:28px;min-height:280px;display:flex;align-items:center;justify-content:center}
.shot{padding:20px}
.shot img,.shot video{display:block;width:100%;max-width:380px;height:auto;border-radius:6px;box-shadow:var(--shadow-card),rgba(17,26,74,.08) 0 12px 24px -8px}
/* 03 — alarm: fiyat MOST'u keser, işaret yanar, bildirim düşer (6 sn döngü) */
.sprite{position:absolute}
.c-fog{color:var(--fog)}.c-blue{color:#2962ff}.c-amber{color:#f0a020}
.al-bell{width:16px;height:16px;flex:none}
.k-visual:has(.al-wrap){position:relative;overflow:hidden;min-height:300px;padding:56px 28px 44px}
.al-states{position:absolute;left:28px;top:20px;display:flex;gap:12px;font:400 10px var(--mono);color:var(--steel)}
.al-states span{display:inline-flex;gap:5px;align-items:center}
.al-states .al-bell{width:12px;height:12px}
.al-wrap{width:100%;max-width:380px;position:relative;margin-bottom:24px}
.al-chart{background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card);padding:14px 14px 10px}
.al-head{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.al-head strong{font-weight:600}
.al-head span{font-size:11px;color:var(--steel)}
.al-chart svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.al-price{fill:none;stroke:var(--navy);stroke-width:1.8;stroke-dasharray:420;stroke-dashoffset:420;animation:al-draw 6s ease-out infinite}
.al-most{fill:none;stroke:#7a1f2b;stroke-width:1.6}
.al-hit{fill:#f0a020;opacity:0;animation:al-hit 6s infinite}
.al-ring{fill:none;stroke:#f0a020;stroke-width:1.5;opacity:0;transform-origin:207px 70px;animation:al-ring 6s infinite}
.al-legend{display:flex;gap:14px;font-size:11px;color:var(--steel);margin-top:6px}
.al-legend i{display:inline-block;width:12px;height:2px;margin-inline-end:6px;vertical-align:middle}
.al-legend .lp{background:var(--navy)}.al-legend .lm{background:#7a1f2b}
.al-toast{position:absolute;right:-8px;bottom:-26px;width:250px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-widget);padding:12px 14px;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;opacity:0;transform:translateY(12px);animation:al-toast 6s infinite}
.al-ic{grid-row:span 3;width:30px;height:30px;border-radius:8px;background:#fff4dc;display:grid;place-items:center}
.al-toast strong{font-size:13px;font-weight:600}
.al-toast span{font-size:12px;color:var(--slate)}
.al-toast small{font-size:10px;color:var(--steel)}
@keyframes al-draw{0%{stroke-dashoffset:420}55%,100%{stroke-dashoffset:0}}
@keyframes al-hit{0%,52%{opacity:0}56%,100%{opacity:1}}
@keyframes al-ring{0%,54%{opacity:0;transform:scale(1)}58%{opacity:1}80%,100%{opacity:0;transform:scale(3)}}
@keyframes al-toast{0%,58%{opacity:0;transform:translateY(12px)}64%,94%{opacity:1;transform:none}100%{opacity:0}}

/* pricing */
.pricing{padding-top:72px;padding-bottom:144px}
.p-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:40px}
.p-head h2{margin-top:16px;font-size:clamp(36px,4.4vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.p-head p{max-width:340px;color:var(--steel)}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.plan{display:flex;flex-direction:column;gap:24px;min-width:0;padding:36px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-card)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan h3{font-size:15px;font-weight:500;letter-spacing:.02em}
.plan-speed{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--steel)}
.plan-speed i{width:7px;height:7px;border-radius:50%;background:var(--fog)}
.plan-speed.is-live{color:var(--sea4)}
.plan-speed.is-live i{background:var(--sea4);box-shadow:0 0 0 4px rgba(148,239,183,.18)}
.price{display:flex;align-items:baseline;gap:8px}
.price strong{font-size:56px;font-weight:500;line-height:1;letter-spacing:-.04em}
.price span{font-size:15px;color:var(--steel)}
.feats{list-style:none;margin:0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;gap:14px;font-size:15px;color:var(--slate)}
.feats li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start}
.feats svg{width:18px;height:18px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feats .ok{color:var(--sea7);stroke-width:1.8}
.feats .mid{color:var(--fog)}
.plan .btn{justify-content:center;margin-top:auto}
.plan-pro{position:relative;overflow:hidden;background:var(--navy);color:#fff;box-shadow:var(--shadow-product)}
.plan-pro::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(148,239,183,.3) 1px,transparent 1.5px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 60% 50% at 100% 0%,#000,transparent 70%);mask-image:radial-gradient(ellipse 60% 50% at 100% 0%,#000,transparent 70%);pointer-events:none}
.plan-pro>*{position:relative}
.plan-pro .price span{color:#a8b8bf}
.plan-pro .feats{border-color:rgba(255,255,255,.12);color:#dfe5ea}
.plan-pro .feats .ok{color:var(--sea4)}
.pricing-note{margin-top:20px;font-size:13px;color:var(--steel)}

/* language */
.i18n-wait body{visibility:hidden}
.lang{position:relative}
.lang summary{list-style:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:var(--r);font-size:14px;color:var(--slate);cursor:pointer;white-space:nowrap}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover,.lang[open] summary{background:#fff;box-shadow:var(--shadow-card)}
.lang svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lang .lang-chev{width:12px;height:12px;transition:transform .2s}
.lang[open] .lang-chev{transform:rotate(180deg)}
.lang-code{display:none;font:500 12px var(--mono);letter-spacing:.04em}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:60;width:340px;max-width:calc(100vw - 32px);max-height:min(420px,calc(100vh - 90px));overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:6px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-widget)}
.lang-menu a{padding:9px 12px;border-radius:6px;font-size:14px;color:var(--slate)}
.lang-menu a:hover{background:var(--canvas);color:var(--navy)}
.lang-menu a[aria-current=true]{background:var(--canvas);color:var(--sea7);font-weight:500}
@media (max-width:600px){.lang-menu{position:fixed;top:62px;inset-inline:16px;width:auto;max-width:none}}

/* Non-Latin scripts: tight tracking breaks joined (Arabic) and stacked (Indic) letters,
   and display line-heights clip their marks. */
:root:is(:lang(ar),:lang(ur),:lang(hi),:lang(bn),:lang(mr),:lang(te),:lang(ta),:lang(zh),:lang(ja),:lang(ko)) body *{letter-spacing:normal!important}
:root:is(:lang(ar),:lang(ur),:lang(hi),:lang(bn),:lang(mr),:lang(te),:lang(ta)) :is(h1,h2,h3){line-height:1.3}
:root:is(:lang(zh),:lang(ja),:lang(ko)) :is(h1,h2,h3){line-height:1.2}
:root:lang(ur) body{font-family:var(--font),"Noto Nastaliq Urdu","Noto Naskh Arabic",sans-serif}

/* RTL: the story track scrolls by measured offsets, so it stays LTR while card text flips. */
[dir=rtl] .story-track{direction:ltr}
[dir=rtl] .s-card{direction:rtl}
[dir=rtl] .btn span[aria-hidden]{display:inline-block;transform:scaleX(-1)}
@media (min-width:901px){
  [dir=rtl] .field{padding:0 40% 0 0;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 28% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 60% 70% at 28% 50%,#000 30%,transparent 75%)}
}

/* cta */
.cta{background:var(--ink);color:#fff;padding:144px 0;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(148,239,183,.35) 1px,transparent 1.5px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse 50% 70% at 85% 50%,#000,transparent 70%);mask-image:radial-gradient(ellipse 50% 70% at 85% 50%,#000,transparent 70%)}
.cta-inner{position:relative}
.cta h2{font-size:clamp(40px,5.2vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.cta h2 em{color:var(--sea4)}
.cta p{margin-top:20px;font-size:18px;color:#a8b8bf}

/* footer */
.foot{display:flex;align-items:center;gap:32px;padding-top:32px;padding-bottom:32px;background:var(--ink);color:#a8b8bf;border-top:1px solid rgba(255,255,255,.08)}
.foot .brand{color:#fff}.foot .brand-logo{filter:brightness(0) invert(1)}.foot .brand b{color:#a8b8bf}.foot .brand-mark i{background:var(--sea4)}.foot .brand-mark i:nth-child(2){background:#fff}
.foot nav{display:flex;gap:20px;margin-inline-start:auto;font-size:14px}
.foot nav a:hover{color:#fff}
.foot small{font-size:12px}

/* reveal */
.has-js .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.has-js .reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{height:420px}
  .field{padding-left:0;-webkit-mask-image:radial-gradient(ellipse 80% 35% at 50% 78%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 80% 35% at 50% 78%,#000 30%,transparent 75%)}
  .k-card{grid-template-columns:1fr;gap:24px;padding:28px;min-height:0}
  .k-visual{min-height:220px}
  .plans{grid-template-columns:1fr}
  .nav-links{display:none}
  .lang{margin-inline-start:auto}
}
@media (max-width:600px){
  :root{--gutter:16px}
  .hero{padding-top:48px}
  .hero-copy p,.k-copy p{font-size:16px}
  .hero-visual{height:400px}
  .hero-anim{right:0;width:100%}
  .chip-a{top:auto;bottom:56px}
  .s-card{padding:24px}
  .phone{width:132px;right:18px;top:200px;border-radius:24px;padding:5px}
  .phone img{border-radius:19px}
  .phone::before{top:10px;width:36px;height:9px}
  .k-card{top:calc(78px + var(--i) * 10px);padding:20px}
  .k-visual{padding:16px}
  .shot{padding:10px}
  .al-states{left:16px;top:12px}
  .al-toast{right:0;width:230px}
  .k-visual:has(.al-wrap){padding-top:44px}
  .pricing{padding-top:48px;padding-bottom:96px}
  .plan{padding:24px}
  .price strong{font-size:44px}
  .cta{padding:96px 0}
  .foot{flex-wrap:wrap;gap:16px}
  .foot nav{margin-inline-start:0;width:100%}
  .lang summary{padding:0 8px}
  .lang-name{display:none}
  .lang-code{display:inline}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important}
  .field,.hero-visual,.chip-a,.chip-b{transform:none!important}
  .story{height:auto}
  .story-stage{position:static;height:auto;padding:96px 0}
  .story-track{flex-wrap:wrap;padding-left:var(--gutter);padding-right:var(--gutter);transform:none!important}
  .s-card{transform:none!important}
  .you{stroke-dashoffset:0}
  .k-card{position:static;transform:none!important}
  .al-price{stroke-dashoffset:0}
  .al-hit,.al-toast{opacity:1;transform:none}
  .has-js .reveal{opacity:1;transform:none;transition:none}
}