/* ==================================================================
   KYVEON — shared stylesheet
   Single source of truth for the design system; loaded by every page.
   Sections 1-22 are the original homepage design system (extracted
   verbatim); 23-27 add inner-page components.
   ================================================================== */

  /* ==================================================================
     1. DESIGN TOKENS
     ================================================================== */
  :root{
    /* Color */
    --bg:            #0A0A0F;
    --bg-raised:     #10101A;
    --surface:       rgba(255,255,255,.04);
    --surface-hover: rgba(255,255,255,.07);
    --stroke:        rgba(255,255,255,.09);
    --primary:       #6C63FF;
    --primary-soft:  rgba(108,99,255,.16);
    --accent:        #00D4FF;
    --accent-soft:   rgba(0,212,255,.12);
    --success:       #00E676;
    --text:          #FFFFFF;
    --muted:         #B8B8C7;
    --grad:          linear-gradient(135deg,#6C63FF 0%,#00D4FF 100%);

    /* Type */
    --font-display: 'Sora', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;
    --fs-h1: clamp(2.4rem, 5.4vw, 4.25rem);
    --fs-h2: clamp(1.9rem, 3.6vw, 2.9rem);
    --fs-h3: clamp(1.2rem, 2vw, 1.45rem);
    --fs-body: 1rem;
    --fs-small: .875rem;

    /* Spacing scale (8pt system) */
    --s-1: .5rem;
    --s-2: 1rem;
    --s-3: 1.5rem;
    --s-4: 2rem;
    --s-5: 3rem;
    --s-6: 4.5rem;
    --section-pad: clamp(5rem, 9vw, 8.5rem);

    /* Shape & elevation */
    --radius-sm: 10px;
    --radius:    18px;
    --radius-lg: 26px;
    --shadow-soft: 0 18px 50px rgba(0,0,0,.45);
    --glow-primary: 0 0 44px rgba(108,99,255,.35);

    /* Motion */
    --ease-out: cubic-bezier(.22,1,.36,1);
    --dur: .45s;

    /* Layout */
    --container: 1200px;
    --nav-h: 76px;
  }

  /* ==================================================================
     2. RESET & BASE
     ================================================================== */
  *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  html.lenis{ scroll-behavior:auto; } /* Lenis takes over */
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    font-size:var(--fs-body);
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
  input,select,textarea{ font:inherit; color:inherit; }
  h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.15; letter-spacing:-.02em; }

  ::selection{ background:var(--primary); color:#fff; }

  /* Accessible focus */
  :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

  .skip-link{
    position:fixed; top:-100px; left:16px; z-index:1000;
    background:var(--primary); color:#fff; padding:.6rem 1.2rem;
    border-radius:var(--radius-sm); transition:top .25s var(--ease-out);
  }
  .skip-link:focus{ top:16px; }

  /* ==================================================================
     3. UTILITIES
     ================================================================== */
  .container{ width:min(var(--container), 100% - 3rem); margin-inline:auto; }
  .grad-text{
    background:var(--grad);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  .section{ padding-block:var(--section-pad); position:relative; }
  .section-head{ max-width:640px; margin-bottom:var(--s-6); }
  .section-head.center{ margin-inline:auto; text-align:center; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:.55rem;
    font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:var(--accent); margin-bottom:var(--s-2);
  }
  .eyebrow::before{
    content:""; width:22px; height:2px; background:var(--grad); border-radius:2px;
  }
  .center .eyebrow::after{ content:""; width:22px; height:2px; background:var(--grad); border-radius:2px; }
  .section-head h2{ font-size:var(--fs-h2); margin-bottom:var(--s-2); }
  .section-head p{ color:var(--muted); }

  /* Scroll reveal base state (hidden only when JS is available to reveal it) */
  html.js .reveal{ opacity:0; transform:translateY(34px); }
  html.js .reveal.is-visible{
    opacity:1; transform:none;
    transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  }

  /* Glass card primitive */
  .glass{
    background:var(--surface);
    border:1px solid var(--stroke);
    border-radius:var(--radius);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }

  /* ==================================================================
     4. BUTTONS
     ================================================================== */
  .btn{
    position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
    padding:.95rem 2rem; border-radius:100px;
    font-family:var(--font-display); font-weight:600; font-size:.95rem;
    transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur);
    overflow:hidden; will-change:transform;
  }
  .btn-primary{
    background:var(--grad); color:#fff;
    box-shadow:0 8px 28px rgba(108,99,255,.38);
  }
  .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(108,99,255,.5); }
  .btn-ghost{
    background:var(--surface); border:1px solid var(--stroke); color:var(--text);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  }
  .btn-ghost:hover{ transform:translateY(-3px); background:var(--surface-hover); border-color:rgba(108,99,255,.5); }
  .btn .arrow{ transition:transform .35s var(--ease-out); }
  .btn:hover .arrow{ transform:translateX(4px); }

  /* Click ripple (span injected by JS) */
  .ripple{
    position:absolute; border-radius:50%; pointer-events:none;
    background:rgba(255,255,255,.35); transform:scale(0);
    animation:ripple .55s var(--ease-out) forwards;
  }
  @keyframes ripple{ to{ transform:scale(3.2); opacity:0; } }

  /* ==================================================================
     5. LOADER
     ================================================================== */
  html:not(.js) .loader{ display:none; } /* never trap no-JS visitors behind the overlay */
  .loader{
    position:fixed; inset:0; z-index:200;
    background:var(--bg);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-3);
    transition:opacity .6s var(--ease-out), visibility .6s;
  }
  .loader.done{ opacity:0; visibility:hidden; }
  .loader__logo{
    font-family:var(--font-display); font-size:clamp(1.8rem,5vw,2.6rem); font-weight:800; letter-spacing:.3em;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .loader__bar{
    width:min(220px,60vw); height:3px; border-radius:3px;
    background:rgba(255,255,255,.08); overflow:hidden;
  }
  .loader__bar span{
    display:block; height:100%; width:0; background:var(--grad); border-radius:3px;
    animation:load 1.6s var(--ease-out) forwards;
  }
  @keyframes load{ 0%{width:0} 60%{width:74%} 100%{width:100%} }

  /* ==================================================================
     6. SCROLL PROGRESS & BACK TO TOP
     ================================================================== */
  .scroll-progress{
    position:fixed; top:0; left:0; height:3px; width:100%; z-index:120;
    transform-origin:0 50%; transform:scaleX(0);
    background:var(--grad); pointer-events:none;
  }
  .to-top{
    position:fixed; right:1.4rem; bottom:1.4rem; z-index:110;
    width:48px; height:48px; border-radius:50%;
    background:var(--surface); border:1px solid var(--stroke);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    display:grid; place-items:center;
    opacity:0; visibility:hidden; transform:translateY(14px);
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s, border-color .35s;
  }
  .to-top.show{ opacity:1; visibility:visible; transform:none; }
  .to-top:hover{ border-color:var(--primary); box-shadow:var(--glow-primary); }

  /* ==================================================================
     7. NAVBAR
     ================================================================== */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    height:var(--nav-h);
    transition:background .4s, border-color .4s, height .4s var(--ease-out), box-shadow .4s;
    border-bottom:1px solid transparent;
  }
  .nav.scrolled{
    height:64px;
    background:rgba(10,10,15,.78);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border-color:var(--stroke);
    box-shadow:0 8px 30px rgba(0,0,0,.35);
  }
  .nav__inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
  /* Brand mark — the logo SVG is INLINED in the markup, not referenced via <img>.
     An <img>-referenced SVG renders in an isolated context where Google Fonts is
     unavailable, so its Sora wordmark would silently fall back to Arial. */
  .nav__logo{ position:relative; display:inline-flex; align-items:center; }
  .nav__logo svg{ display:block; height:34px; width:auto; }
  .footer .nav__logo svg{ height:30px; }
  @media (max-width:520px){ .nav__logo svg{ height:27px; } }

  /* One-time glitch intro. Drives the SVG itself — the previous
     content:attr(data-text) pseudo-element trick only worked on a text wordmark. */
  .glitch{ position:relative; }
  .glitch.play svg{ animation:logoGlitch .9s steps(2,end) 2; }
  @keyframes logoGlitch{
    0%,100%{ transform:none; filter:none; }
    20%{ transform:translate(-3px,-2px); filter:drop-shadow(2px 0 var(--accent)); }
    40%{ transform:translate(3px,1px);   filter:drop-shadow(-2px 0 var(--primary)); }
    60%{ transform:translate(-2px,2px);  filter:drop-shadow(2px 0 var(--primary)); }
    80%{ transform:translate(2px,-1px);  filter:drop-shadow(-2px 0 var(--accent)); }
  }

  .nav__links{ display:flex; gap:.4rem; align-items:center; }
  .nav__links a{
    padding:.5rem .85rem; border-radius:100px; font-size:.9rem; font-weight:500; color:var(--muted);
    transition:color .3s, background .3s;
  }
  .nav__links a:hover{ color:var(--text); }
  .nav__links a.active{ color:var(--text); background:var(--primary-soft); }
  .nav__cta{ padding:.6rem 1.4rem; font-size:.85rem; }

  /* Hamburger */
  .nav__burger{
    display:none; width:44px; height:44px; border-radius:var(--radius-sm);
    place-items:center; border:1px solid var(--stroke); background:var(--surface);
  }
  .nav__burger span{
    display:block; width:20px; height:2px; background:var(--text); border-radius:2px; position:relative;
    transition:background .3s;
  }
  .nav__burger span::before, .nav__burger span::after{
    content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); border-radius:2px;
    transition:transform .35s var(--ease-out), top .35s var(--ease-out);
  }
  .nav__burger span::before{ top:-6px; }
  .nav__burger span::after{ top:6px; }
  .nav__burger[aria-expanded="true"] span{ background:transparent; }
  .nav__burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
  .nav__burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

  /* Mobile menu panel */
  .nav__panel{
    display:none; position:fixed; top:var(--nav-h); left:0; right:0; z-index:99;
    background:rgba(10,10,15,.96);
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
    border-bottom:1px solid var(--stroke);
    padding:var(--s-3) var(--s-3) var(--s-4);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
  }
  .nav__panel.open{ opacity:1; transform:none; pointer-events:auto; }
  .nav__panel a{
    display:block; padding:.85rem .5rem; font-family:var(--font-display); font-weight:600;
    border-bottom:1px solid rgba(255,255,255,.05); color:var(--muted); transition:color .3s, padding-left .3s;
  }
  .nav__panel a:hover, .nav__panel a.active{ color:var(--text); padding-left:.9rem; }

  @media (max-width: 900px){
    .nav__links, .nav .nav__cta{ display:none; }
    .nav__burger{ display:grid; }
    .nav__panel{ display:block; }
  }

  /* ==================================================================
     8. HERO
     ================================================================== */
  .hero{
    min-height:100svh; display:flex; align-items:center;
    position:relative; overflow:hidden;
    padding-top:var(--nav-h);
  }
  #particles{ position:absolute; inset:0; width:100%; height:100%; }

  /* Floating gradient orbs (GPU-friendly: transform+opacity only) */
  .orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; will-change:transform; }
  .orb--1{ width:480px; height:480px; background:rgba(108,99,255,.35); top:-120px; right:-120px; animation:float 11s ease-in-out infinite; }
  .orb--2{ width:380px; height:380px; background:rgba(0,212,255,.22); bottom:-80px; left:-140px; animation:float 14s ease-in-out infinite reverse; }
  @keyframes float{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(-36px,32px) } }

  .hero__inner{ position:relative; z-index:2; max-width:860px; }
  .hero__badge{
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.5rem 1.1rem; border-radius:100px; font-size:.82rem; font-weight:500; color:var(--muted);
    background:var(--surface); border:1px solid var(--stroke);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    margin-bottom:var(--s-3);
  }
  .hero__badge .dot{
    width:8px; height:8px; border-radius:50%; background:var(--success);
    box-shadow:0 0 10px var(--success); animation:pulse 2.2s ease-in-out infinite;
  }
  @keyframes pulse{ 50%{ opacity:.45 } }

  .hero h1{ font-size:var(--fs-h1); font-weight:800; margin-bottom:var(--s-3); }
  .hero__sub{ color:var(--muted); font-size:clamp(1rem,1.6vw,1.15rem); max-width:600px; margin-bottom:var(--s-3); }

  .hero__type{
    font-family:var(--font-display); font-weight:600; font-size:clamp(1.05rem,2vw,1.3rem);
    min-height:2.1em; display:flex; align-items:center; gap:.15rem; margin-bottom:var(--s-4);
  }
  .hero__type .typed{ color:var(--accent); }
  .hero__type .caret{
    width:2px; height:1.2em; background:var(--accent); display:inline-block;
    animation:caret 1s steps(1) infinite;
  }
  @keyframes caret{ 50%{ opacity:0 } }

  .hero__ctas{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-5); }

  .hero__trust{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); color:var(--muted); font-size:.85rem; }
  .hero__trust span{ display:inline-flex; align-items:center; gap:.5rem; }
  .hero__trust svg{ color:var(--success); flex:none; }

  .scroll-hint{
    position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); z-index:2;
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    color:var(--muted); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  }
  .scroll-hint .mouse{
    width:24px; height:38px; border:2px solid var(--muted); border-radius:14px; position:relative;
  }
  .scroll-hint .mouse::after{
    content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; margin-left:-1.5px;
    border-radius:3px; background:var(--accent); animation:wheel 1.8s var(--ease-out) infinite;
  }
  @keyframes wheel{ 0%{ transform:translateY(0); opacity:1 } 70%{ transform:translateY(12px); opacity:0 } 100%{ opacity:0 } }
  @media (max-height:640px){ .scroll-hint{ display:none; } }

  /* ==================================================================
     8.5 PLATFORMS WE INTEGRATE — logo marquee
     ================================================================== */
  .trusted{
    padding-block:60px;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    background:var(--bg);
  }
  .trusted__label{
    text-align:center; font-size:12px; font-weight:600;
    letter-spacing:3px; text-transform:uppercase;
    color:#B8B8C7; margin-bottom:40px;
  }
  .marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .marquee__track{
    display:flex; width:max-content;
    animation:marquee 30s linear infinite;
    will-change:transform;
  }
  .marquee:hover .marquee__track{ animation-play-state:paused; }
  @keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

  .logo-set{ display:flex; align-items:center; }
  .logo-set li{ display:flex; align-items:center; padding-inline:2.2rem; }
  .logo-set svg{
    height:32px; width:auto; display:block;
    filter:grayscale(100%) opacity(.4);
    transition:filter .3s ease;
  }
  .logo-set li:hover svg{ filter:grayscale(0) opacity(1); }

  /* Mobile: static 2 rows of 4 instead of the marquee */
  @media (max-width: 640px){
    .marquee{ -webkit-mask-image:none; mask-image:none; }
    .marquee__track{ animation:none; width:auto; }
    .logo-set{
      display:grid; grid-template-columns:repeat(4, 1fr);
      gap:1.8rem .8rem; justify-items:center; width:100%;
    }
    .logo-set li{ padding:0; }
    .logo-set--dup{ display:none; }
    .logo-set svg{ height:22px; }
  }

  /* ==================================================================
     9. SERVICES
     ================================================================== */
  /* Two services: cap the track width so the pair stays balanced, not stretched */
  .services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--s-3); max-width:940px; margin-inline:auto; }
  .service-card{
    position:relative; padding:var(--s-4); border-radius:var(--radius-lg);
    background:var(--surface); border:1px solid var(--stroke);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur);
    display:flex; flex-direction:column; gap:var(--s-2);
    overflow:hidden;
  }
  /* Gradient glow border on hover */
  .service-card::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
    background:var(--grad);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    opacity:0; transition:opacity var(--dur);
    pointer-events:none;
  }
  .service-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-soft), var(--glow-primary); }
  .service-card:hover::before{ opacity:1; }

  .service-card .icon{
    width:56px; height:56px; border-radius:var(--radius-sm);
    background:var(--primary-soft); color:var(--accent);
    display:grid; place-items:center; margin-bottom:.25rem;
    transition:transform var(--dur) var(--ease-out);
  }
  .service-card:hover .icon{ transform:scale(1.08) rotate(-4deg); }
  .service-card h3{ font-size:var(--fs-h3); }
  .service-card > p{ color:var(--muted); font-size:.95rem; }
  .service-card ul{ display:grid; gap:.5rem; margin-block:.25rem; }
  .service-card li{
    display:flex; gap:.6rem; align-items:flex-start; color:var(--muted); font-size:.9rem;
  }
  .service-card li svg{ color:var(--success); flex:none; margin-top:.3rem; }
  .service-card .price{
    margin-top:auto; padding-top:var(--s-2); border-top:1px solid var(--stroke);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
  }
  .service-card .price strong{ font-family:var(--font-display); font-size:1.15rem; }
  .service-card .price small{ display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
  .link-arrow{
    display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.9rem; color:var(--accent);
  }
  .link-arrow svg{ transition:transform .35s var(--ease-out); }
  .link-arrow:hover svg{ transform:translateX(4px); }

  /* ==================================================================
     10. WHY KYVEON
     ================================================================== */
  .why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s-3); }
  .why-card{
    padding:var(--s-3) var(--s-3);
    border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--stroke);
    transition:transform var(--dur) var(--ease-out), border-color var(--dur), background var(--dur);
  }
  .why-card:hover{ transform:translateY(-6px); border-color:rgba(0,212,255,.4); background:var(--surface-hover); }
  .why-card .icon{
    width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
    background:var(--accent-soft); color:var(--accent); margin-bottom:var(--s-2);
  }
  .why-card h3{ font-size:1.05rem; margin-bottom:.5rem; }
  .why-card p{ color:var(--muted); font-size:.9rem; }

  /* ==================================================================
     11. TECH STACK
     ================================================================== */
  .stack-cloud{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; max-width:900px; margin-inline:auto; }
  .badge{
    display:inline-flex; align-items:center; gap:.55rem;
    padding:.65rem 1.25rem; border-radius:100px;
    background:var(--surface); border:1px solid var(--stroke);
    font-family:var(--font-display); font-weight:600; font-size:.88rem;
    transition:transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
  }
  .badge i{ width:9px; height:9px; border-radius:50%; background:var(--grad); flex:none; }
  .badge:hover{ transform:translateY(-4px) scale(1.04); border-color:var(--primary); box-shadow:0 6px 24px rgba(108,99,255,.3); }

  /* ==================================================================
     12. PROCESS TIMELINE
     ================================================================== */
  .timeline{ position:relative; max-width:760px; margin-inline:auto; padding-left:2.4rem; }
  .timeline::before{                                   /* base rail */
    content:""; position:absolute; left:11px; top:8px; bottom:8px; width:2px;
    background:rgba(255,255,255,.09); border-radius:2px;
  }
  .timeline__progress{                                 /* scroll-drawn line */
    position:absolute; left:11px; top:8px; bottom:8px; width:2px;
    background:var(--grad); border-radius:2px;
    transform-origin:top; transform:scaleY(0);
  }
  .tl-step{ position:relative; padding-bottom:var(--s-4); }
  .tl-step:last-child{ padding-bottom:0; }
  .tl-step::before{                                    /* node */
    content:""; position:absolute; left:-2.4rem; top:6px;
    width:24px; height:24px; border-radius:50%;
    background:var(--bg-raised); border:2px solid var(--primary);
    box-shadow:0 0 0 5px rgba(108,99,255,.14);
  }
  .tl-step .num{
    font-family:var(--font-display); font-size:.72rem; font-weight:700; letter-spacing:.2em;
    color:var(--accent); text-transform:uppercase;
  }
  .tl-step h3{ font-size:1.15rem; margin:.3rem 0 .4rem; }
  .tl-step p{ color:var(--muted); font-size:.92rem; max-width:560px; }

  /* ==================================================================
     15. PRICING
     ================================================================== */
  .pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--s-3); align-items:stretch; }
  /* Pricing is split into two categories: websites and mobile apps */
  .pricing-group + .pricing-group{ margin-top:var(--s-6); }
  .pricing-group__head{ display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-4); }
  .pricing-group__head h3{
    font-family:var(--font-display); font-size:.85rem; font-weight:700;
    letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .pricing-group__head::after{
    content:''; flex:1; height:1px; min-width:2rem;
    background:linear-gradient(90deg, var(--stroke), transparent);
  }
  .price-card{
    position:relative; padding:var(--s-4); border-radius:var(--radius-lg);
    background:var(--surface); border:1px solid var(--stroke);
    display:flex; flex-direction:column; gap:var(--s-2);
    transition:transform var(--dur) var(--ease-out), box-shadow var(--dur), border-color var(--dur);
  }
  .price-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-soft); }
  .price-card.popular{
    border-color:rgba(108,99,255,.55);
    background:linear-gradient(180deg, rgba(108,99,255,.12), rgba(255,255,255,.03));
    box-shadow:var(--glow-primary);
  }
  .price-card .flag{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    padding:.3rem 1.1rem; border-radius:100px; white-space:nowrap;
    background:var(--grad); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  }
  .price-card h3{ font-size:1.2rem; }
  .price-card .for{ color:var(--muted); font-size:.88rem; min-height:2.6em; }
  .price-card .amount{ display:flex; align-items:baseline; flex-wrap:wrap; gap:.5rem; padding-block:.4rem; }
  .price-card .amount small{ color:var(--muted); font-size:.8rem; }
  .price-card .amount b{ font-family:var(--font-display); font-size:2.3rem; font-weight:800; }
  .price-card ul{ display:grid; gap:.6rem; margin-bottom:var(--s-2); }
  .price-card li{ display:flex; gap:.6rem; color:var(--muted); font-size:.9rem; align-items:flex-start; }
  .price-card li svg{ color:var(--success); flex:none; margin-top:.32rem; }
  .price-card .btn{ margin-top:auto; width:100%; }
  .pricing-note{ text-align:center; color:var(--muted); font-size:.88rem; margin-top:var(--s-4); }

  /* ==================================================================
     16. WHAT WE BUILD — capability panel
     One glass panel of capability rows, deliberately distinct from the
     bordered card grid used by "Why KYVEON".
     ================================================================== */
  .build-panel{
    position:relative; overflow:hidden;
    max-width:1000px; margin-inline:auto;
    padding:clamp(1.8rem,4vw,var(--s-5));
    background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius-lg);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .build-panel::before{
    content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--grad);
  }
  /* Two even columns on desktop/tablet, single column on phones —
     keeps the 8 items on a balanced grid with a comfortable measure. */
  .build-grid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:var(--s-4) var(--s-5);
  }
  .build-item{ display:flex; gap:var(--s-2); align-items:flex-start; }
  .build-item .tick{
    flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center;
    background:var(--primary-soft); border:1px solid rgba(108,99,255,.35); color:var(--accent);
    transition:transform var(--dur) var(--ease-out), box-shadow var(--dur);
  }
  .build-item:hover .tick{ transform:translateY(-2px) scale(1.06); box-shadow:var(--glow-primary); }
  .build-item h3{ font-size:1rem; margin-bottom:.35rem; }
  .build-item p{ color:var(--muted); font-size:.9rem; }

  /* ==================================================================
     17. FAQ
     ================================================================== */
  .faq-list{ max-width:760px; margin-inline:auto; display:grid; gap:var(--s-2); }
  .faq-item{
    border-radius:var(--radius); background:var(--surface); border:1px solid var(--stroke);
    transition:border-color .35s;
    overflow:hidden;
  }
  .faq-item.open{ border-color:rgba(108,99,255,.5); }
  .faq-q{
    width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
    padding:1.2rem 1.5rem; text-align:left;
    font-family:var(--font-display); font-weight:600; font-size:1rem;
  }
  .faq-q .chev{ flex:none; transition:transform .4s var(--ease-out); color:var(--accent); }
  .faq-item.open .chev{ transform:rotate(180deg); }
  .faq-a{
    display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--ease-out);
  }
  .faq-item.open .faq-a{ grid-template-rows:1fr; }
  .faq-a > div{ overflow:hidden; }
  .faq-a p{ padding:0 1.5rem 1.3rem; color:var(--muted); font-size:.93rem; }

  /* ==================================================================
     18. ABOUT
     ================================================================== */
  .about-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:var(--s-5); align-items:start; }
  @media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } }
  .founder{
    padding:var(--s-4); border-radius:var(--radius-lg); text-align:left;
    background:var(--surface); border:1px solid var(--stroke);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    position:sticky; top:calc(var(--nav-h) + 1.5rem);
    overflow:hidden;
  }
  /* Gradient hairline anchors the card now that there is no portrait */
  .founder::before{
    content:''; position:absolute; inset:0 0 auto; height:3px; background:var(--grad);
  }
  .founder h3{ font-size:1.4rem; }
  .founder .role{
    color:var(--accent); font-size:.75rem; font-weight:600;
    letter-spacing:.16em; text-transform:uppercase; margin-bottom:.35rem;
  }
  .founder p{ color:var(--muted); font-size:.9rem; margin-bottom:var(--s-3); }
  .founder h3 + p{ margin-top:.7rem; }
  .founder .skills-label{
    font-family:var(--font-display); font-size:.72rem; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase;
    color:var(--text); opacity:.55;
    padding-top:var(--s-2); border-top:1px solid var(--stroke);
    margin-bottom:var(--s-2);
  }
  .skills{ display:grid; gap:1rem; text-align:left; }
  .skill header{ display:flex; justify-content:space-between; font-size:.82rem; font-weight:600; margin-bottom:.4rem; }
  .skill header span:last-child{ color:var(--accent); font-variant-numeric:tabular-nums; }
  .skill .bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; }
  .skill .bar i{
    display:block; height:100%; width:0; background:var(--grad); border-radius:6px;
    transition:width 1.2s var(--ease-out);
  }

  .about-blocks{ display:grid; gap:var(--s-3); }
  .about-block{
    padding:var(--s-3); border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--stroke);
  }
  .about-block h3{
    display:flex; align-items:center; gap:.7rem; font-size:1.05rem; margin-bottom:.6rem;
  }
  .about-block h3 .icon{
    width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none;
    background:var(--accent-soft); color:var(--accent);
  }
  .about-block p{ color:var(--muted); font-size:.92rem; }
  .values{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.8rem; }
  .values span{
    padding:.4rem 1rem; border-radius:100px; font-size:.8rem; font-weight:600;
    background:var(--primary-soft); border:1px solid rgba(108,99,255,.3);
  }

  /* ==================================================================
     19. CONTACT
     ================================================================== */
  .contact-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:var(--s-5); align-items:start; }
  @media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }

  .contact-info h2{ font-size:var(--fs-h2); margin-bottom:var(--s-2); }
  .contact-info > p{ color:var(--muted); margin-bottom:var(--s-4); }
  .contact-channels{ display:grid; gap:var(--s-2); }
  .channel{
    display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem;
    border-radius:var(--radius); background:var(--surface); border:1px solid var(--stroke);
    transition:transform .35s var(--ease-out), border-color .35s;
  }
  .channel:hover{ transform:translateX(6px); border-color:rgba(0,212,255,.45); }
  .channel .icon{
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none;
    background:var(--accent-soft); color:var(--accent);
  }
  .channel b{ display:block; font-family:var(--font-display); font-size:.92rem; }
  .channel span{ color:var(--muted); font-size:.82rem; }

  .contact-form{
    padding:clamp(1.5rem,3.5vw,2.6rem); border-radius:var(--radius-lg);
    background:var(--surface); border:1px solid var(--stroke);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
  @media (max-width: 560px){ .form-row{ grid-template-columns:1fr; } }
  .field{ margin-bottom:var(--s-2); }
  .field label{
    display:block; font-size:.82rem; font-weight:600; margin-bottom:.45rem;
    font-family:var(--font-display); letter-spacing:.02em;
  }
  .field input, .field select, .field textarea{
    width:100%; padding:.85rem 1.05rem; border-radius:var(--radius-sm);
    background:rgba(255,255,255,.05); border:1px solid var(--stroke);
    transition:border-color .3s, box-shadow .3s, background .3s;
  }
  .field select{ appearance:none; -webkit-appearance:none;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" stroke="%23B8B8C7" stroke-width="2" fill="none" stroke-linecap="round"/></svg>');
    background-repeat:no-repeat; background-position:right 1rem center;
  }
  .field select option{ background:var(--bg-raised); color:var(--text); }
  .field textarea{ min-height:130px; resize:vertical; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(108,99,255,.2); background:rgba(255,255,255,.07);
  }
  .field.invalid input, .field.invalid textarea, .field.invalid select{ border-color:#ff5470; }
  .field .err{ display:none; color:#ff8296; font-size:.78rem; margin-top:.35rem; }
  .field.invalid .err{ display:block; }

  .submit-btn{ width:100%; padding:1.05rem; position:relative; }
  .submit-btn .spinner{
    width:18px; height:18px; border-radius:50%; display:none;
    border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
    animation:spin .7s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg) } }
  .submit-btn.loading .spinner{ display:inline-block; }
  .submit-btn.loading .label{ opacity:.7; }

  .form-error{ margin-top:1rem; text-align:center; font-size:.88rem; color:#ff8296; }
  .form-error a{ color:var(--accent); text-decoration:underline; }

  .form-success{
    display:none; text-align:center; padding:var(--s-5) var(--s-3);
  }
  .form-success.show{ display:block; }
  .form-success .check{
    width:76px; height:76px; margin:0 auto var(--s-3); border-radius:50%;
    background:rgba(0,230,118,.12); border:1px solid rgba(0,230,118,.4);
    display:grid; place-items:center; color:var(--success);
  }
  .form-success .check svg path{
    stroke-dasharray:40; stroke-dashoffset:40; animation:draw .7s .2s var(--ease-out) forwards;
  }
  @keyframes draw{ to{ stroke-dashoffset:0 } }
  .form-success h3{ margin-bottom:.5rem; }
  .form-success p{ color:var(--muted); font-size:.92rem; }

  /* ==================================================================
     20. FOOTER
     ================================================================== */
  .footer{
    border-top:1px solid var(--stroke);
    background:linear-gradient(180deg, transparent, rgba(108,99,255,.05));
    padding-top:var(--s-6);
  }
  .footer-grid{
    display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-4);
    padding-bottom:var(--s-5);
  }
  @media (max-width: 860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width: 520px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer .brand-col p{ color:var(--muted); font-size:.9rem; max-width:300px; margin-top:var(--s-2); }
  .footer h4{ font-size:.85rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--s-2); color:var(--text); }
  .footer-col a{
    display:block; padding:.32rem 0; color:var(--muted); font-size:.9rem;
    transition:color .3s, padding-left .3s;
  }
  .footer-col a:hover{ color:var(--accent); padding-left:.4rem; }
  .socials{ display:flex; gap:.7rem; margin-top:var(--s-3); }
  .socials a{
    width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
    background:var(--surface); border:1px solid var(--stroke); color:var(--muted);
    transition:all .3s var(--ease-out);
  }
  .socials a:hover{ color:#fff; border-color:var(--primary); box-shadow:var(--glow-primary); transform:translateY(-3px); }
  .footer-bottom{
    border-top:1px solid var(--stroke); padding-block:var(--s-3);
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
    color:var(--muted); font-size:.82rem;
  }
  .footer-bottom nav{ display:flex; gap:1.4rem; }
  .footer-bottom a:hover{ color:var(--accent); }

  /* ==================================================================
     21. CURSOR FOLLOWER (desktop / fine pointer only)
     ================================================================== */
  .cursor-ring{
    position:fixed; top:0; left:0; z-index:150; pointer-events:none;
    width:36px; height:36px; border-radius:50%;
    border:1.5px solid rgba(108,99,255,.7);
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s, opacity .3s;
    opacity:0; mix-blend-mode:screen;
  }
  .cursor-ring.on{ opacity:1; }
  .cursor-ring.hovering{ width:56px; height:56px; border-color:var(--accent); }
  @media (pointer:coarse){ .cursor-ring{ display:none; } }

  /* ==================================================================
     21.5 COMING SOON — badge, tooltip, toast & notify modal
     ================================================================== */
  .soon-badge{
    position:absolute; top:1.1rem; right:1.1rem; z-index:5;
    padding:.32rem .85rem; border-radius:100px;
    background:#F59E0B; color:#fff;
    font-family:var(--font-display); font-weight:700; font-size:.66rem;
    letter-spacing:.12em; text-transform:uppercase; line-height:1.4;
    box-shadow:0 4px 14px rgba(245,158,11,.4);
  }
  /* Dim the card's content, not the card itself — GSAP animates the card's
     own opacity during scroll-reveal and would override a card-level value. */
  .coming-soon > *:not(.soon-badge){ opacity:.8; }

  /* Hover/focus tooltip (amber, matches the badge) */
  [data-tip]{ position:relative; }
  [data-tip]::after{
    content:attr(data-tip);
    position:absolute; bottom:calc(100% + 9px); left:50%;
    transform:translateX(-50%) translateY(4px);
    padding:.3rem .75rem; border-radius:6px; white-space:nowrap;
    background:#F59E0B; color:#fff;
    font-family:var(--font-display); font-weight:700; font-size:.66rem;
    letter-spacing:.1em; text-transform:uppercase;
    opacity:0; pointer-events:none;
    transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
  }
  [data-tip]:hover::after, [data-tip]:focus-visible::after{
    opacity:1; transform:translateX(-50%) translateY(0);
  }

  /* Toast */
  .toast{
    position:fixed; left:50%; bottom:1.8rem; z-index:190;
    transform:translate(-50%, 16px);
    padding:.85rem 1.6rem; border-radius:100px;
    background:var(--bg-raised); border:1px solid rgba(245,158,11,.55);
    color:var(--text); font-family:var(--font-display); font-weight:600; font-size:.9rem;
    box-shadow:0 12px 34px rgba(0,0,0,.5);
    max-width:calc(100vw - 2rem); text-align:center;
    opacity:0; visibility:hidden;
    transition:opacity .35s var(--ease-out), transform .35s var(--ease-out), visibility .35s;
  }
  .toast.show{ opacity:1; visibility:visible; transform:translate(-50%, 0); }

  /* Notify-me modal */
  .modal-backdrop{
    position:fixed; inset:0; z-index:180;
    background:rgba(6,6,10,.72);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    display:grid; place-items:center; padding:1.2rem;
    opacity:0; visibility:hidden;
    transition:opacity .35s var(--ease-out), visibility .35s;
  }
  .modal-backdrop.open{ opacity:1; visibility:visible; }
  .modal{
    width:min(440px, 100%); position:relative;
    background:var(--bg-raised); border:1px solid var(--stroke);
    border-radius:var(--radius-lg); padding:2.4rem 2.2rem 2.2rem;
    box-shadow:var(--shadow-soft), var(--glow-primary);
    transform:translateY(18px) scale(.97);
    transition:transform .4s var(--ease-out);
  }
  .modal-backdrop.open .modal{ transform:none; }
  .modal h3{ font-size:1.35rem; margin-bottom:.5rem; padding-right:2rem; }
  .modal > p{ color:var(--muted); font-size:.92rem; margin-bottom:1.4rem; }
  .modal-close{
    position:absolute; top:1rem; right:1rem;
    width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
    background:var(--surface); border:1px solid var(--stroke); color:var(--muted);
    transition:color .3s, border-color .3s;
  }
  .modal-close:hover{ color:#fff; border-color:var(--primary); }
  .modal-success{ text-align:center; padding:1.4rem 0 .4rem; }
  .modal-success b{ display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--success); margin-bottom:.3rem; }
  .modal-success span{ color:var(--muted); font-size:.9rem; }

  /* ==================================================================
     22. REDUCED MOTION
     ================================================================== */
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important; animation-iteration-count:1 !important;
      transition-duration:.01ms !important; scroll-behavior:auto !important;
    }
    html.js .reveal{ opacity:1; transform:none; }
    .orb{ animation:none; }
    .cursor-ring{ display:none; }
    .timeline__progress{ transform:scaleY(1); }
  }

  /* ==================================================================
     23. INNER PAGE HERO + BREADCRUMBS
     ================================================================== */
  .page-hero{
    min-height:52svh; display:flex; align-items:center;
    padding-top:calc(var(--nav-h) + var(--s-5)); padding-bottom:var(--s-5);
    position:relative; overflow:hidden;
    background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:34px 34px;
    -webkit-mask-image:linear-gradient(#000 55%, transparent);
            mask-image:linear-gradient(#000 55%, transparent);
  }
  .page-hero__inner{ position:relative; z-index:2; max-width:820px; }
  .page-hero h1{ font-size:var(--fs-h1); font-weight:800; margin-bottom:var(--s-3); }
  .page-hero .lede{ color:var(--muted); font-size:clamp(1rem,1.7vw,1.2rem); max-width:640px; }
  .crumbs{ font-size:.82rem; color:var(--muted); margin-bottom:var(--s-3); }
  .crumbs a:hover{ color:var(--accent); }
  .crumbs span{ margin-inline:.5rem; opacity:.5; }

  /* ==================================================================
     24. PROSE — long-form body copy on inner pages
     ================================================================== */
  .prose{ max-width:760px; }
  .prose > * + *{ margin-top:1rem; }
  .prose h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin-top:var(--s-5); margin-bottom:.2rem; }
  .prose h3{ font-size:1.05rem; margin-top:var(--s-3); margin-bottom:.1rem; }
  .prose p{ color:var(--muted); font-size:.97rem; }
  .prose strong{ color:var(--text); font-weight:600; }
  .prose ul{ list-style:none; display:grid; gap:.6rem; }
  /* Bullet is absolutely positioned, NOT a flex sibling — a flex li would turn
     every <strong> and its trailing text into separate items and break wrapping. */
  .prose ul li{ color:var(--muted); font-size:.95rem; position:relative; padding-left:1.35rem; }
  .prose ul li::before{
    content:""; position:absolute; left:0; top:.52em;
    width:6px; height:6px; border-radius:50%; background:var(--grad);
  }
  .prose a:not(.btn){ color:var(--accent); border-bottom:1px solid rgba(0,212,255,.35); }
  .prose a:not(.btn):hover{ border-bottom-color:var(--accent); }
  .prose-wide{ max-width:900px; }

  /* ==================================================================
     25. LEGAL PAGE LAYOUT (lifted verbatim from the legal pages)
     ================================================================== */
  .legal-hero{
    padding:calc(var(--nav-h) + var(--s-6)) 0 var(--s-5);
    border-bottom:1px solid var(--stroke);
    background:
      radial-gradient(600px 300px at 80% 0%, rgba(108,99,255,.12), transparent),
      var(--bg);
  }
  .legal-hero h1{ font-size:clamp(1.9rem,4vw,2.9rem); margin-bottom:var(--s-2); }
  .legal-hero .updated{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.4rem 1rem; border-radius:100px; font-size:.8rem; font-weight:600;
    background:var(--surface); border:1px solid var(--stroke); color:var(--muted);
  }
  .legal-hero .updated i{ width:7px; height:7px; border-radius:50%; background:var(--success); }
  .legal-hero p.intro{ color:var(--muted); max-width:640px; margin-top:var(--s-3); font-size:.95rem; }

  .legal-layout{
    display:grid; grid-template-columns:270px 1fr; gap:var(--s-6);
    padding-block:var(--s-6); align-items:start;
  }
  @media (max-width:900px){ .legal-layout{ grid-template-columns:1fr; gap:var(--s-4); } }

  /* Table of contents */
  .toc{
    position:sticky; top:calc(var(--nav-h) + 1.5rem);
    padding:var(--s-3); border-radius:var(--radius);
    background:var(--surface); border:1px solid var(--stroke);
  }
  @media (max-width:900px){ .toc{ position:static; } }
  .toc h2{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--s-2); }
  .toc ol{ list-style:none; counter-reset:toc; }
  .toc a{
    display:flex; gap:.6rem; padding:.42rem 0; font-size:.85rem; color:var(--muted);
    counter-increment:toc; transition:color .25s, padding-left .25s;
    border-left:2px solid transparent;
  }
  .toc a::before{ content:counter(toc) "."; color:var(--primary); font-weight:700; min-width:1.4em; }
  .toc a:hover, .toc a.active{ color:var(--text); }
  .toc a.active{ border-left-color:var(--primary); padding-left:.7rem; }

  /* Legal body typography */
  .legal-content section{ margin-bottom:var(--s-5); }
  .legal-content h2{
    font-size:1.3rem; margin-bottom:var(--s-2); scroll-margin-top:calc(var(--nav-h) + 24px);
    padding-bottom:.6rem; border-bottom:1px solid var(--stroke);
  }
  .legal-content h2 span{ color:var(--primary); margin-right:.4rem; }
  .legal-content h3{ font-size:1rem; margin:1.4rem 0 .5rem; color:var(--text); }
  .legal-content p{ color:var(--muted); font-size:.95rem; margin-bottom:.9rem; }
  .legal-content strong{ color:var(--text); font-weight:600; }
  .legal-content ul{ list-style:disc; padding-left:1.4rem; margin-bottom:1rem; }
  .legal-content ul li{ color:var(--muted); font-size:.95rem; margin-bottom:.5rem; }
  .legal-content ul li::marker{ color:var(--primary); }
  .legal-content a:not(.btn){ color:var(--accent); border-bottom:1px solid rgba(0,212,255,.35); }
  .legal-content a:not(.btn):hover{ border-bottom-color:var(--accent); }
  .callout{
    padding:var(--s-3); border-radius:var(--radius); margin-bottom:1rem;
    background:var(--primary-soft); border:1px solid rgba(108,99,255,.35);
  }
  .callout p{ margin:0; }

  /* ==================================================================
     26. PORTFOLIO & CASE STUDIES
     ================================================================== */
  .cs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--s-3); }
  .cs-tile{
    display:flex; flex-direction:column; gap:.85rem;
    padding:var(--s-4); border-radius:var(--radius-lg);
    background:var(--surface); border:1px solid var(--stroke);
    transition:transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur);
  }
  .cs-tile:hover{ transform:translateY(-8px); border-color:rgba(108,99,255,.5); box-shadow:var(--shadow-soft); }
  .cs-tile__eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
  .cs-tile h3{ font-size:1.2rem; }
  .cs-tile p{ color:var(--muted); font-size:.92rem; flex:1; }
  .cs-tile .link-arrow{ margin-top:auto; }

  .kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--s-2); }
  .kpi{
    padding:1.1rem 1rem; border-radius:var(--radius); text-align:center;
    background:rgba(108,99,255,.07); border:1px solid rgba(108,99,255,.22);
    transition:transform .35s var(--ease-out), border-color .35s;
  }
  .kpi:hover{ transform:translateY(-4px); border-color:rgba(0,212,255,.5); }
  .kpi b{
    display:block; font-family:var(--font-display); font-weight:800; line-height:1.1;
    font-size:clamp(1.2rem,2.1vw,1.6rem); margin-bottom:.3rem;
    background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
    font-variant-numeric:tabular-nums;
  }
  .kpi span{ color:var(--muted); font-size:.78rem; line-height:1.45; display:block; }

  .tech-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
  .tech-chips span{
    padding:.35rem .9rem; border-radius:100px; font-size:.8rem; font-weight:600;
    background:var(--primary-soft); border:1px solid rgba(108,99,255,.3);
  }

  /* Case-study screenshots. Sized naturally — the real images range from 1.24
     to 2.84 aspect ratio, so a fixed frame ratio would crop or letterbox them.
     width/height attributes in the markup reserve space and prevent layout shift. */
  .shot-fig{ display:grid; gap:.75rem; }
  .shot-fig figcaption{ color:var(--muted); font-size:.8rem; text-align:center; }
  .shot-fig img{
    width:100%; height:auto; display:block;
    border-radius:var(--radius); border:1px solid var(--stroke);
    background:#0c0c14; box-shadow:var(--shadow-soft);
  }

  /* Thumbnail on a portfolio/homepage case-study card */
  .cs-tile__thumb{
    display:block; border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--stroke); background:#0c0c14;
    aspect-ratio:16/10;                 /* uniform card tops regardless of source ratio */
    margin-bottom:.15rem;
  }
  .cs-tile__thumb img{
    width:100%; height:100%; object-fit:cover; object-position:top center;
    display:block; transition:transform var(--dur) var(--ease-out);
  }
  .cs-tile:hover .cs-tile__thumb img{ transform:scale(1.04); }

  /* Anonymised-client / disclosure notice */
  .note-strip{
    display:flex; gap:.7rem; align-items:flex-start;
    padding:.9rem 1.1rem; border-radius:var(--radius);
    background:rgba(0,212,255,.06); border:1px solid rgba(0,212,255,.25);
    color:var(--muted); font-size:.88rem;
  }
  .note-strip svg{ color:var(--accent); flex:none; margin-top:.15rem; }

  /* ==================================================================
     27. CTA PANEL
     ================================================================== */
  .cta-panel{
    position:relative; overflow:hidden; text-align:center;
    padding:clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 4vw, 3rem);
    border-radius:var(--radius-lg);
    background:linear-gradient(180deg, rgba(108,99,255,.14), rgba(0,212,255,.05));
    border:1px solid rgba(108,99,255,.35);
  }
  .cta-panel::before{
    content:""; position:absolute; top:-60%; left:50%; transform:translateX(-50%);
    width:70%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(0,212,255,.16), transparent 65%);
    pointer-events:none;
  }
  .cta-panel h2{ font-size:var(--fs-h2); margin-bottom:var(--s-2); position:relative; }
  .cta-panel p{ color:var(--muted); max-width:560px; margin:0 auto var(--s-4); position:relative; }
  .cta-panel .btn{ position:relative; }