:root{
    --bg:#05070B;
    --bg-2:#080B12;
    --surface:rgba(255,255,255,0.035);
    --surface-2:rgba(255,255,255,0.06);
    --chrome-1:#EAF1FA;
    --chrome-2:#AFC0D6;
    --border:rgba(150,180,220,0.14);
    --border-strong:rgba(150,180,220,0.30);
    --text:#EDF2F9;
    --muted:#9DAAC0;
    --muted-2:#5F6C82;
    --blue:#5FA8FF;
    --blue-deep:#1E4FD6;
    --accent:linear-gradient(102deg,#7CC0FF 0%,#2C6BFF 55%,#1436A8 100%);
    --chrome:linear-gradient(160deg,#FFFFFF 0%,#CFDCEC 22%,#8FA3BE 48%,#E8F0FA 60%,#7D93B2 78%,#C4D3E6 100%);
    --glow:rgba(60,120,255,0.45);
    --glow-light:rgba(120,190,255,0.40);
    --maxw:1180px;
    --ease:cubic-bezier(.22,.61,.36,1);
    --video-edge:rgba(150,180,220,0.07);
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:"Hanken Grotesk",system-ui,sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    transition:background .45s var(--ease),color .45s var(--ease);
  }
  ::selection{background:var(--blue);color:#04121A}

  /* ---------- atmosphere ---------- */
  .bg-grid{
    position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.55;
    background-image:
      linear-gradient(rgba(150,180,220,0.05) 1px,transparent 1px),
      linear-gradient(90deg,rgba(150,180,220,0.05) 1px,transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  }
  .bg-glow{
    position:fixed;z-index:-3;pointer-events:none;border-radius:50%;
    filter:blur(90px);opacity:.6;
  }
  .bg-glow.g1{top:-180px;left:50%;transform:translateX(-50%);width:820px;height:560px;
    background:radial-gradient(circle,rgba(44,107,255,0.28),transparent 70%)}
  .bg-glow.g2{top:780px;left:-220px;width:600px;height:600px;
    background:radial-gradient(circle,rgba(120,190,255,0.18),transparent 70%)}
  .bg-glow.g3{top:1700px;right:-220px;width:600px;height:600px;
    background:radial-gradient(circle,rgba(20,54,168,0.22),transparent 70%)}
  .bg-noise{
    position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ---------- 3D glass objects ---------- */
  .glass-field{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
  .glass-orb{
    position:absolute;border-radius:50%;
    background:
      radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,0.9),rgba(255,255,255,0) 38%),
      radial-gradient(140% 140% at 72% 80%,rgba(44,107,255,0.55),rgba(20,54,168,0) 55%),
      radial-gradient(100% 100% at 50% 50%,rgba(120,190,255,0.22),rgba(8,12,20,0.55) 78%);
    box-shadow:
      inset 0 -18px 40px rgba(20,40,120,0.55),
      inset 8px 10px 30px rgba(255,255,255,0.35),
      0 40px 90px -30px rgba(20,54,168,0.6);
    backdrop-filter:blur(2px);
    border:1px solid rgba(255,255,255,0.12);
  }
  .glass-orb::after{
    content:"";position:absolute;top:10%;left:16%;width:44%;height:30%;border-radius:50%;
    background:linear-gradient(140deg,rgba(255,255,255,0.85),rgba(255,255,255,0));
    filter:blur(2px);transform:rotate(-18deg);opacity:.8;
  }
  /* orbs are generated + positioned by JS (infinite scroll field) */
  .glass-orb,.ring-wrap,.sh-frame,.sh-curve{position:absolute;top:0;left:0;will-change:transform}

  /* keyframe diamond (After Effects nod) — same glass, softer corners */
  .glass-orb.sh-diamond{border-radius:18%}
  .glass-orb.sh-diamond::after{top:14%;left:20%;width:38%;height:26%}
  /* capsule — echoes the pill buttons */
  .glass-orb.sh-capsule{border-radius:999px}
  .glass-orb.sh-capsule::after{top:16%;left:10%;width:34%;height:34%}

  /* two corner brackets — a 16:9 frame, implied */
  .sh-frame::before,.sh-frame::after{
    content:"";position:absolute;width:34px;height:34px;
    border:1.6px solid rgba(150,190,255,0.5);
    filter:drop-shadow(0 0 14px rgba(60,120,255,0.35));
  }
  .sh-frame::before{top:0;left:0;border-right:none;border-bottom:none;border-radius:10px 0 0 0}
  .sh-frame::after{bottom:0;right:0;border-left:none;border-top:none;border-radius:0 0 10px 0}

  /* easing curve — a graph-editor bezier */
  .sh-curve{opacity:.5}
  .sh-curve svg{width:100%;height:100%;display:block;overflow:visible}

  html[data-theme="light"] .sh-frame::before,html[data-theme="light"] .sh-frame::after{
    border-color:rgba(37,96,232,0.45);filter:drop-shadow(0 0 12px rgba(60,120,255,0.22))}
  html[data-theme="light"] .sh-curve{opacity:.42}

  .ring-wrap{width:280px;height:280px}
  .chrome-ring{
    position:absolute;inset:0;border-radius:50%;
    background:conic-gradient(from 210deg,#8FA3BE,#FFFFFF,#5F6C82,#E8F0FA,#7D93B2,#FFFFFF,#8FA3BE);
    mask:radial-gradient(circle,transparent 58%,#000 60%);
    -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);
    filter:blur(.3px) drop-shadow(0 30px 60px rgba(20,54,168,0.5));
    opacity:.55;animation:spin 40s linear infinite;
  }

  @keyframes spin{to{transform:rotate(360deg)}}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}

  /* ---------- type ---------- */
  h1,h2,h3{font-family:"ITC Fenice","ITC Fenice Std","Playfair Display",Georgia,serif;font-weight:600;line-height:1.04;letter-spacing:-.01em}
  .eyebrow{
    font-family:"JetBrains Mono",monospace;font-size:.72rem;font-weight:500;
    text-transform:uppercase;letter-spacing:.24em;color:var(--blue);
    display:inline-flex;align-items:center;gap:10px;
  }
  .eyebrow::before{content:"◆";font-size:.55rem;color:var(--chrome-2);opacity:.9}
  .accent-text{
    background:var(--accent);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
  .chrome-text{
    background:var(--chrome);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 2px 10px rgba(120,190,255,0.25));
  }
  .blue-text{
    background:linear-gradient(100deg,#AFD4FF 0%,#5FA8FF 40%,#2C6BFF 70%,#1436A8 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 3px 18px rgba(60,120,255,0.55));
  }
  /* elegant italic script accent (same face as the marquee) */
  .script-text{
    font-family:"Playfair Display","ITC Fenice",Georgia,serif;
    font-style:italic;font-weight:500;letter-spacing:0;
    padding-right:.06em;
  }

  /* ---------- buttons (glass) ---------- */
  .btn{
    position:relative;display:inline-flex;align-items:center;gap:9px;
    font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.95rem;
    padding:15px 28px;border-radius:999px;cursor:pointer;border:1px solid transparent;
    text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;
    transition:transform .3s var(--ease),box-shadow .35s var(--ease),border-color .3s,background .3s;
  }
  .btn .arr{transition:transform .3s var(--ease)}
  .btn::before{
    content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
    background:linear-gradient(120deg,rgba(255,255,255,0) 20%,rgba(255,255,255,0.14) 48%,rgba(255,255,255,0) 60%);
    transform:translateX(-120%);transition:transform .7s var(--ease);
  }
  .btn:hover::before{transform:translateX(120%)}
  .btn::after{
    content:"";position:absolute;top:0;left:6%;right:6%;height:52%;z-index:-1;border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0));
    opacity:.5;
  }
  .btn-primary{
    color:#EEF4FF;
    background:linear-gradient(180deg,#4C7FE0 0%,#3563C8 52%,#26489E 100%);
    border-color:rgba(150,185,240,0.28);
    box-shadow:0 12px 28px -16px rgba(40,90,200,0.7),inset 0 1px 0 rgba(255,255,255,0.16);
  }
  .btn-primary:hover{transform:translateY(-2px);
    background:linear-gradient(180deg,#578AE9 0%,#3D6DD4 52%,#2B51AC 100%);
    box-shadow:0 18px 38px -16px rgba(40,90,200,0.8),inset 0 1px 0 rgba(255,255,255,0.22)}
  .btn-primary:hover .arr{transform:translate(3px,-3px)}
  .btn-ghost{
    color:var(--text);
    background:rgba(180,205,240,0.05);
    border-color:rgba(150,180,225,0.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 10px 26px -18px rgba(0,0,0,0.9);
    backdrop-filter:blur(10px);
  }
  .btn-ghost:hover{transform:translateY(-2px);border-color:rgba(120,190,255,0.45);background:rgba(120,190,255,0.08)}
  .btn-ghost:hover .arr{transform:translateX(3px)}

  /* ---------- nav ---------- */
  header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,border-color .35s,backdrop-filter .35s}
  header.scrolled{background:rgba(5,7,11,0.62);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--border)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:74px}
  .logo{font-family:"ITC Fenice","Playfair Display",serif;font-weight:800;font-size:1.4rem;letter-spacing:-.02em;text-decoration:none;color:var(--text)}
  .logo .fx{background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 16px var(--glow-light))}
  .nav-links{display:flex;align-items:center;gap:34px;list-style:none}
  .nav-links a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500;position:relative;transition:color .25s}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--accent);transition:width .3s var(--ease)}
  .nav-links a:hover{color:var(--text)}
  .nav-links a:hover::after{width:100%}
  .nav-cta{display:flex;align-items:center;gap:14px}
  .nav-cta .btn{padding:10px 18px}
  .burger{display:none;background:rgba(180,205,240,0.05);border:1px solid var(--border-strong);border-radius:9px;padding:9px;cursor:pointer;backdrop-filter:blur(8px)}
  .burger span{display:block;width:20px;height:2px;background:var(--text);margin:4px 0;transition:.3s}

  .mobile-menu{position:fixed;inset:0;z-index:99;background:rgba(5,7,11,0.94);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;justify-content:center;gap:8px;padding:40px;
    transform:translateY(-100%);transition:transform .45s var(--ease);visibility:hidden}
  .mobile-menu.open{transform:translateY(0);visibility:visible}
  .mobile-menu a{font-family:"ITC Fenice","Playfair Display",serif;font-size:2rem;font-weight:600;color:var(--text);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--border)}
  .mobile-menu a:last-of-type{border:none}
  .mobile-menu .btn{margin-top:24px;justify-content:center;font-size:1.1rem;padding:18px}

  /* ---------- glass surface helper ---------- */
  .glass{
    background:linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02));
    border:1px solid var(--border-strong);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.22),0 40px 90px -46px rgba(0,0,0,.85);
    backdrop-filter:blur(14px) saturate(130%);
  }

  /* ---------- hero ---------- */
  .hero{position:relative;padding:148px 0 60px}
  .hero-top{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .hero h1{font-size:clamp(2.8rem,6.6vw,6rem);margin:22px 0 0}
  .hero h1 .line{display:block;overflow:hidden}
  .hero h1 .reveal{display:block;transform:translateY(105%);transition:transform .9s var(--ease)}
  .loaded .hero h1 .reveal{transform:translateY(0)}
  .hero p.lead{max-width:480px;color:var(--muted);font-size:1.12rem;margin:26px 0 32px}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}

  .hero-video{position:relative;aspect-ratio:16/9;width:100%;border-radius:20px;overflow:hidden;
    border:1px solid var(--video-edge);background:var(--bg-2);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
  .hero-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

  .reel{position:relative;aspect-ratio:9/16;width:min(360px,100%);margin-left:auto;border-radius:20px;overflow:hidden;
    border:1px solid var(--video-edge);background:var(--bg-2);
    box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
  .reel iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

  /* ---------- cases ---------- */
  .cases{position:relative;padding:clamp(56px,7vw,100px) 0 clamp(72px,9vw,128px)}
  .cases-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
  .case-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--video-edge);
    background:var(--bg-2);box-shadow:0 40px 90px -40px rgba(0,0,0,.85)}
  .case-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  .case-card.ratio-169{aspect-ratio:16/9}
  .case-card.ratio-916{aspect-ratio:9/16;width:min(320px,100%);margin:0 auto}

  /* ---------- interactive video overlay (hides Bunny's own UI, shows glass controls) ---------- */
  .v-overlay{position:absolute;inset:0;z-index:4;overflow:hidden;border-radius:inherit;pointer-events:auto}
  .v-overlay .v-sweep{position:absolute;top:-60%;left:0;width:55%;height:220%;pointer-events:none;
    background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(190,220,255,0.38) 48%,rgba(255,255,255,0) 100%);
    transform:translateX(-160%) rotate(9deg);opacity:0}
  .v-overlay:not(.active):hover .v-sweep{opacity:1;animation:vsweep 1.05s var(--ease)}
  @keyframes vsweep{0%{transform:translateX(-160%) rotate(9deg)}100%{transform:translateX(360%) rotate(9deg)}}
  .v-overlay::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:inset 0 0 0 0 rgba(120,190,255,0);transition:box-shadow .35s var(--ease)}
  .v-overlay:hover::after{box-shadow:inset 0 0 60px rgba(60,120,255,0.20)}
  .v-overlay .v-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);
    width:74px;height:74px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#EAF2FF;
    background:rgba(120,190,255,0.16);border:1px solid rgba(180,215,255,0.55);backdrop-filter:blur(6px);
    box-shadow:0 10px 34px rgba(20,54,168,0.5),inset 0 1px 0 rgba(255,255,255,0.45);
    transition:opacity .3s,transform .3s var(--ease)}
  .v-overlay .v-play svg{margin:0}
  .v-overlay:hover .v-play{transform:translate(-50%,-50%) scale(1)}
  .v-overlay.playing .v-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.7)}
  .v-overlay .ripple{position:absolute;width:24px;height:24px;border-radius:50%;pointer-events:none;
    transform:translate(-50%,-50%) scale(0);
    background:radial-gradient(circle,rgba(190,220,255,0.6),rgba(120,190,255,0) 70%);
    animation:vripple .6s var(--ease) forwards}
  @keyframes vripple{to{transform:translate(-50%,-50%) scale(16);opacity:0}}
  .v-controls{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;
    padding:14px 16px;opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease);
    background:linear-gradient(180deg,rgba(5,7,11,0),rgba(5,7,11,0.72));pointer-events:none}
  .v-overlay:hover .v-controls,.v-overlay.active .v-controls{opacity:1;transform:none;pointer-events:auto}
  .v-btn{width:40px;height:40px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;
    color:#EAF2FF;border:1px solid rgba(180,215,255,0.42);background:rgba(120,190,255,0.13);
    backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3);
    transition:background .25s,border-color .25s,transform .25s}
  .v-btn:hover{background:rgba(120,190,255,0.26);border-color:rgba(180,215,255,0.75);transform:translateY(-1px)}
  .v-btn svg{pointer-events:none}
  .v-spacer{flex:1 1 auto}

  /* ---------- contact modal ---------- */
  .modal-backdrop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
    background:rgba(3,5,9,0.62);backdrop-filter:blur(8px);opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease),visibility .3s}
  .modal-backdrop.open{opacity:1;visibility:visible}
  .modal{max-width:440px;width:100%;border-radius:22px;padding:36px 30px 30px;position:relative;
    transform:translateY(16px) scale(.98);transition:transform .38s var(--ease)}
  .modal-backdrop.open .modal{transform:none}
  .modal h3{font-size:1.8rem;margin:14px 0 8px}
  .modal p{color:var(--muted);font-size:1rem;margin-bottom:22px}
  .modal .email-row{display:flex;align-items:center;gap:10px;padding:13px 15px;border-radius:12px;margin-bottom:18px;
    border:1px solid var(--border-strong);background:rgba(180,205,240,0.06);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14);
    font-family:"JetBrains Mono",monospace;font-size:.95rem;color:var(--text)}
  .modal .email-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .modal .m-actions{display:flex;gap:12px;flex-wrap:wrap}
  .modal .m-actions .btn{flex:1 1 150px;justify-content:center}
  .modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:10px;
    border:1px solid var(--border-strong);background:rgba(180,205,240,0.05);color:var(--text);
    display:flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;cursor:pointer;backdrop-filter:blur(8px)}

  /* ---------- marquee ---------- */
  .marquee{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;margin-top:64px;
    overflow:hidden;display:flex;gap:0;white-space:nowrap;-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:inline-flex;align-items:center;gap:0;animation:scroll 32s linear infinite}
  .marquee-track span{font-family:"ITC Fenice","Playfair Display",serif;font-style:italic;font-weight:500;font-size:1.6rem;color:var(--muted);padding:0 30px;display:inline-flex;align-items:center;gap:30px}
  .marquee-track span::after{content:"◆";color:var(--blue);font-size:.6rem;opacity:.8}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ---------- section frame ---------- */
  section.block{padding:clamp(72px,9vw,128px) 0;position:relative}
  .sec-head{margin-bottom:54px;max-width:680px}
  .sec-head h2{font-size:clamp(2rem,4.6vw,3.5rem);margin:18px 0 0}
  .sec-head p{color:var(--muted);margin-top:18px;font-size:1.08rem}

  .ru{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
  .ru.in{opacity:1;transform:none}

  /* ---------- problem ---------- */
  .problem .pgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
  .problem h2{font-size:clamp(1.9rem,4.2vw,3rem)}
  .problem h2 em{font-style:italic}
  .problem .pbody{color:var(--muted);font-size:1.1rem}
  .pcards{display:flex;flex-direction:column;gap:14px}
  .pcard{border-radius:15px;padding:20px 22px;display:flex;gap:16px;align-items:flex-start;transition:border-color .3s,transform .3s,box-shadow .3s}
  .pcard:hover{transform:translateX(4px);border-color:var(--blue);box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 20px 50px -30px var(--glow)}
  .pcard .pn{font-family:"JetBrains Mono",monospace;color:var(--blue);font-size:.8rem;padding-top:2px}
  .pcard h4{font-family:"ITC Fenice","Playfair Display",serif;font-weight:600;font-size:1.12rem;margin-bottom:4px}
  .pcard p{font-size:.95rem;color:var(--muted)}

  /* ---------- services ---------- */
  .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .svc{position:relative;border-radius:18px;padding:30px 28px 28px;overflow:hidden;transition:border-color .35s,transform .35s,box-shadow .35s}
  .svc::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--accent);opacity:0;transition:opacity .35s}
  .svc:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:inset 0 1px 0 rgba(255,255,255,0.28),0 30px 70px -34px var(--glow)}
  .svc:hover::before{opacity:1}
  .svc .ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(160deg,rgba(120,190,255,0.22),rgba(20,54,168,0.12));border:1px solid rgba(180,215,255,0.35);margin-bottom:20px;color:var(--blue);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.4)}
  .svc .snum{position:absolute;top:26px;right:28px;font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--muted-2)}
  .svc h3{font-size:1.4rem;margin-bottom:10px}
  .svc p{color:var(--muted);font-size:.98rem}

  /* ---------- work ---------- */
  .work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .wcard{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;border:1px solid var(--border);
    background:var(--bg-2);cursor:pointer;transition:border-color .35s,transform .35s,box-shadow .35s}
  .wcard:hover{transform:translateY(-5px);border-color:var(--border-strong);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
  .wcard iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .wposter{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
  .wposter.c1{background:radial-gradient(120% 100% at 90% 0%,rgba(44,107,255,0.28),transparent 55%),linear-gradient(155deg,#0E1626,#05070B)}
  .wposter.c2{background:radial-gradient(120% 100% at 10% 0%,rgba(120,190,255,0.24),transparent 55%),linear-gradient(155deg,#0D1524,#05070B)}
  .wposter.c3{background:radial-gradient(120% 100% at 50% 100%,rgba(20,54,168,0.28),transparent 55%),linear-gradient(155deg,#0F1828,#05070B)}
  .wposter .wplay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;
    border:1px solid var(--border-strong);background:rgba(120,190,255,0.10);display:flex;align-items:center;justify-content:center;color:var(--blue);
    backdrop-filter:blur(6px);transition:transform .35s var(--ease),background .35s}
  .wcard:hover .wplay{transform:translate(-50%,-50%) scale(1.1);background:rgba(120,190,255,0.2)}
  .wcat{font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;position:relative;z-index:2}
  .wtitle{font-family:"ITC Fenice","Playfair Display",serif;font-weight:600;font-size:1.2rem;position:relative;z-index:2}
  .wmeta{font-size:.82rem;color:var(--muted);margin-top:3px;position:relative;z-index:2}

  /* ---------- process ---------- */
  .proc{display:flex;flex-direction:column}
  .pstep{display:grid;grid-template-columns:120px 1fr;gap:32px;padding:30px 0;border-top:1px solid var(--border);align-items:start}
  .pstep:last-child{border-bottom:1px solid var(--border)}
  .pstep .pidx{font-family:"JetBrains Mono",monospace;font-size:.9rem;color:var(--blue);display:flex;align-items:center;gap:10px}
  .pstep .pidx::before{content:"◆";font-size:.6rem;color:var(--chrome-2)}
  .pstep h3{font-size:1.6rem;transition:color .3s}
  .pstep:hover h3{color:var(--blue)}
  .pstep .ptext{color:var(--muted);max-width:560px;margin-top:8px}
  .pstep .ptools{margin-top:12px;font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase}

  /* ---------- about ---------- */
  .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .about h2{font-size:clamp(1.9rem,4.2vw,3rem);margin-bottom:22px}
  .about p{color:var(--muted);font-size:1.08rem;margin-bottom:16px}
  .about .stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .chip{font-family:"JetBrains Mono",monospace;font-size:.74rem;letter-spacing:.06em;color:var(--text);
    border:1px solid var(--border);background:rgba(180,205,240,0.05);padding:8px 14px;border-radius:9px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.15)}
  .about-side{border-radius:20px;padding:34px;position:relative;overflow:hidden}
  .about-side::after{content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(44,107,255,0.24),transparent 70%);filter:blur(20px)}
  .about-side .big{font-family:"ITC Fenice","Playfair Display",serif;font-weight:800;font-size:3.6rem;line-height:1;margin-bottom:6px}
  .about-side .row{display:flex;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border);position:relative;z-index:2}
  .about-side .row:last-child{border:none;padding-bottom:0}
  .about-side .row span{color:var(--muted);font-size:.92rem}
  .about-side .row b{font-family:"ITC Fenice","Playfair Display",serif;font-weight:600;font-size:1.08rem}

  /* ---------- faq ---------- */
  .faq-list{border-top:1px solid var(--border)}
  .faq-item{border-bottom:1px solid var(--border)}
  .faq-q{width:100%;text-align:left;background:none;border:none;color:var(--text);cursor:pointer;
    padding:26px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
    font-family:"ITC Fenice","Playfair Display",serif;font-size:1.3rem;font-weight:600}
  .faq-q .qmark{flex-shrink:0;width:26px;height:26px;position:relative}
  .faq-q .qmark::before,.faq-q .qmark::after{content:"";position:absolute;top:50%;left:50%;background:var(--blue);transition:transform .3s var(--ease)}
  .faq-q .qmark::before{width:13px;height:2px;transform:translate(-50%,-50%)}
  .faq-q .qmark::after{width:2px;height:13px;transform:translate(-50%,-50%)}
  .faq-item.open .qmark::after{transform:translate(-50%,-50%) scaleY(0)}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .faq-a p{color:var(--muted);padding:0 0 26px;max-width:660px;font-size:1rem}

  /* ---------- final cta ---------- */
  .cta-final{position:relative;text-align:center;border-radius:26px;overflow:hidden;
    border:1px solid var(--border-strong);padding:clamp(56px,8vw,96px) 28px;
    background:radial-gradient(120% 130% at 50% 0%,rgba(44,107,255,0.18),transparent 60%),linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.24),0 50px 100px -50px rgba(0,0,0,.85);
    backdrop-filter:blur(14px)}
  .cta-final h2{font-size:clamp(2.2rem,5.2vw,4.2rem);max-width:760px;margin:18px auto 22px}
  .cta-final p{color:var(--muted);max-width:520px;margin:0 auto 34px;font-size:1.1rem}
  .cta-final .hero-cta{justify-content:center}

  /* ---------- footer ---------- */
  footer{border-top:1px solid var(--border);padding:54px 0 40px;margin-top:clamp(72px,9vw,120px)}
  .foot{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
  .foot .logo{font-size:1.6rem}
  .foot .ftag{color:var(--muted);margin-top:10px;max-width:280px;font-size:.95rem}
  .foot-links{display:flex;gap:60px;flex-wrap:wrap}
  .foot-col h5{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
  .foot-col a{display:block;color:var(--muted);text-decoration:none;font-size:.95rem;margin-bottom:11px;transition:color .25s}
  .foot-col a:hover{color:var(--blue)}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:48px;padding-top:26px;border-top:1px solid var(--border);flex-wrap:wrap;gap:14px}
  .foot-bottom small{color:var(--muted-2);font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.05em}

  /* ================= LIGHT MODE — creamy white + chrome blue ================= */
  html[data-theme="light"]{
    --bg:#F6F2EA;
    --bg-2:#FFFCF6;
    --surface:rgba(255,255,255,0.62);
    --surface-2:rgba(255,255,255,0.85);
    --chrome-1:#4A5B73;
    --chrome-2:#8698B1;
    --border:rgba(28,58,105,0.13);
    --border-strong:rgba(28,58,105,0.22);
    --text:#131922;
    --muted:#5B6879;
    --muted-2:#8B97A8;
    --blue:#2560E8;
    --blue-deep:#12379E;
    --accent:linear-gradient(102deg,#5FA8FF 0%,#2C6BFF 55%,#12379E 100%);
    --chrome:linear-gradient(160deg,#8FA3BE 0%,#3A4A61 22%,#93A7C2 46%,#2B3A4F 62%,#7D93B2 80%,#3A4A61 100%);
    --glow:rgba(60,120,255,0.30);
    --glow-light:rgba(80,150,255,0.30);
    --video-edge:rgba(28,58,105,0.13);
  }
  html[data-theme="light"] body{
    background:
      radial-gradient(120% 80% at 50% 0%,#FFFDF8 0%,rgba(255,253,248,0) 60%),
      var(--bg);
  }
  html[data-theme="light"] ::selection{background:var(--blue);color:#FFFFFF}

  /* atmosphere */
  html[data-theme="light"] .bg-grid{opacity:.5;
    background-image:
      linear-gradient(rgba(40,70,120,0.07) 1px,transparent 1px),
      linear-gradient(90deg,rgba(40,70,120,0.07) 1px,transparent 1px)}
  html[data-theme="light"] .bg-glow{opacity:.42}
  html[data-theme="light"] .bg-noise{opacity:.025}
  html[data-theme="light"] .glass-field{opacity:.85}
  html[data-theme="light"] .chrome-ring{opacity:.38}
  html[data-theme="light"] .glass-orb{
    background:
      radial-gradient(120% 120% at 30% 22%,rgba(255,255,255,0.98),rgba(255,255,255,0) 42%),
      radial-gradient(140% 140% at 72% 80%,rgba(44,107,255,0.40),rgba(20,54,168,0) 58%),
      radial-gradient(100% 100% at 50% 50%,rgba(140,200,255,0.30),rgba(196,214,238,0.60) 80%);
    box-shadow:
      inset 0 -18px 40px rgba(40,80,170,0.28),
      inset 8px 10px 30px rgba(255,255,255,0.75),
      0 40px 90px -34px rgba(40,80,170,0.30);
    border-color:rgba(255,255,255,0.6);
  }
  html[data-theme="light"] .glass-orb::after{opacity:.55}

  /* surfaces */
  html[data-theme="light"] header.scrolled{background:rgba(246,242,234,0.72)}
  html[data-theme="light"] .mobile-menu{background:rgba(246,242,234,0.96)}
  html[data-theme="light"] .glass{
    background:linear-gradient(180deg,rgba(255,255,255,0.88),rgba(255,255,255,0.56));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 30px 70px -46px rgba(30,50,90,0.38)}
  html[data-theme="light"] .hero-video,
  html[data-theme="light"] .case-card,
  html[data-theme="light"] .reel{box-shadow:0 40px 90px -44px rgba(30,50,90,0.40)}
  html[data-theme="light"] .wcard:hover{box-shadow:0 30px 60px -36px rgba(30,50,90,0.45)}
  html[data-theme="light"] .cta-final{
    background:radial-gradient(120% 130% at 50% 0%,rgba(44,107,255,0.12),transparent 60%),
      linear-gradient(180deg,rgba(255,255,255,0.88),rgba(255,255,255,0.52));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 50px 100px -56px rgba(30,50,90,0.4)}
  html[data-theme="light"] .modal-backdrop{background:rgba(24,34,54,0.34)}

  /* controls */
  html[data-theme="light"] .btn-ghost{
    background:rgba(255,255,255,0.72);border-color:rgba(28,58,105,0.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.95),0 10px 26px -20px rgba(30,50,90,0.7)}
  html[data-theme="light"] .btn-ghost:hover{background:rgba(255,255,255,0.95);border-color:rgba(37,96,232,0.45)}
  html[data-theme="light"] .burger,
  html[data-theme="light"] .modal-close{background:rgba(255,255,255,0.7)}

  /* accent type */
  html[data-theme="light"] .blue-text{
    background:linear-gradient(100deg,#5FA8FF 0%,#2C6BFF 36%,#1A46C8 68%,#0E2A80 100%);
    -webkit-background-clip:text;background-clip:text;
    filter:drop-shadow(0 3px 14px rgba(60,120,255,0.28))}
  html[data-theme="light"] .chrome-text{filter:drop-shadow(0 2px 8px rgba(60,120,255,0.16))}
  html[data-theme="light"] .logo .fx{filter:drop-shadow(0 0 14px rgba(60,120,255,0.25))}

  /* ---------- theme toggle ---------- */
  .theme-toggle{
    width:40px;height:40px;flex:0 0 auto;border-radius:999px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    color:var(--text);border:1px solid var(--border-strong);
    background:rgba(180,205,240,0.06);backdrop-filter:blur(10px);
    transition:background .25s,border-color .25s,transform .25s;
  }
  .theme-toggle:hover{transform:translateY(-2px);border-color:var(--blue);background:rgba(120,190,255,0.10)}
  .theme-toggle svg{width:18px;height:18px;display:block}
  .theme-toggle .ic-sun{display:none}
  html[data-theme="light"] .theme-toggle{background:rgba(255,255,255,0.72)}
  html[data-theme="light"] .theme-toggle .ic-sun{display:block}
  html[data-theme="light"] .theme-toggle .ic-moon{display:none}
  .mobile-menu .theme-toggle{margin-top:22px;align-self:flex-start;width:auto;padding:0 18px;height:46px;gap:10px;font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.95rem}
  .mobile-menu .theme-toggle::after{content:"Light mode"}
  html[data-theme="light"] .mobile-menu .theme-toggle::after{content:"Dark mode"}

  /* ---------- responsive ---------- */
  @media(max-width:900px){
    .nav-links{display:none}
    .nav-cta .btn{display:none}
    .burger{display:block}
    .hero{padding:120px 0 40px}
    .hero-top{grid-template-columns:1fr;gap:36px}
    .cases-grid{grid-template-columns:1fr}
    .reel{margin:0 auto;width:min(320px,100%)}
    .problem .pgrid,.about-grid{grid-template-columns:1fr;gap:36px}
    .svc-grid,.work-grid{grid-template-columns:1fr}
    .pstep{grid-template-columns:1fr;gap:8px;padding:24px 0}
  }
  @media(max-width:520px){
    body{font-size:16px}
    .wrap{padding:0 20px}
    .marquee-track span{font-size:1.3rem}
    .about-side .big{font-size:2.8rem}
  }

  @media(prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .ru{opacity:1;transform:none}
    .hero h1 .reveal{transform:none}
    .marquee-track{animation:none}
  }

/* ============================================================
   MULTI-PAGE ADDITIONS — dropdown nav, page heroes, pricing
   ============================================================ */

/* ---------- nav: services mega dropdown ---------- */
.nav-links li.has-drop{position:relative}
.nav-links .drop-t{
  display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:0;
  font-family:inherit;font-size:.92rem;font-weight:500;color:var(--muted);cursor:pointer;
  transition:color .25s;
}
.nav-links .drop-t:hover,.has-drop.open .drop-t{color:var(--text)}
.drop-t .caret{
  width:7px;height:7px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease);
}
.has-drop.open .caret{transform:translateY(1px) rotate(-135deg)}

.drop-panel{
  position:absolute;top:calc(100% + 22px);left:50%;z-index:120;
  width:min(640px,92vw);border-radius:22px;padding:14px;
  opacity:0;visibility:hidden;transform:translateX(-50%) translateY(-10px);
  transition:opacity .3s var(--ease),transform .34s var(--ease),visibility .3s;
}
.has-drop.open .drop-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-panel::before{content:"";position:absolute;top:-24px;left:0;right:0;height:24px}
.drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.drop-item{
  display:flex;gap:13px;align-items:flex-start;padding:14px;border-radius:15px;
  text-decoration:none;color:var(--text);transition:background .25s,transform .25s var(--ease);
}
.drop-item:hover{background:rgba(120,190,255,0.10);transform:translateX(2px)}
html[data-theme="light"] .drop-item:hover{background:rgba(37,96,232,0.07)}
.drop-item .di-ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--blue);background:rgba(120,190,255,0.10);border:1px solid var(--border-strong);
}
.drop-item b{display:block;font-size:.96rem;font-weight:600;line-height:1.3;color:#FBFDFF}
.drop-item span span{display:block;color:#B7C3D6;font-size:.82rem;margin-top:3px;line-height:1.45}
html[data-theme="light"] .drop-item b{color:var(--text)}
html[data-theme="light"] .drop-item span span{color:var(--muted)}
.drop-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:8px;padding:14px 14px 4px;border-top:1px solid var(--border);
}
.drop-foot small{color:var(--muted-2);font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.drop-foot a{color:var(--blue);text-decoration:none;font-size:.9rem;font-weight:600}

/* current page marker */
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{width:100%}

/* ---------- mobile menu: service sub-links ---------- */
.mobile-menu .mm-sub{display:grid;gap:2px;padding:6px 0 14px;border-bottom:1px solid var(--border)}
.mobile-menu .mm-sub a{font-family:"Hanken Grotesk",sans-serif;font-size:1.02rem;font-weight:500;color:var(--muted);border:none;padding:8px 0 8px 16px}
.mobile-menu .mm-label{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);padding:18px 0 2px}

/* ---------- sub-page hero ---------- */
.page-hero{position:relative;padding:150px 0 6px}
.page-hero h1{font-size:clamp(2.4rem,5.6vw,4.6rem);margin:20px 0 0;max-width:14ch}
.page-hero h1.wide{max-width:20ch}
.page-hero .lead{color:var(--muted);max-width:600px;margin-top:24px;font-size:1.12rem}
.page-hero .hero-cta{margin-top:32px}
.crumbs{font-family:"JetBrains Mono",monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:20px}
.crumbs a{color:var(--muted-2);text-decoration:none;transition:color .25s}
.crumbs a:hover{color:var(--blue)}
.crumbs span{color:var(--blue)}

/* facts strip under a page hero */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px}
.fact{border-radius:16px;padding:22px 20px}
.fact b{display:block;font-family:"ITC Fenice","Playfair Display",serif;font-size:1.8rem;line-height:1.1}
.fact span{display:block;color:var(--muted);font-size:.86rem;margin-top:6px}

/* two-column text + list */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.tick-list{list-style:none;display:grid;gap:13px}
.tick-list li{position:relative;padding-left:26px;color:var(--muted);font-size:1rem}
.tick-list li::before{content:"◆";position:absolute;left:0;top:.15em;color:var(--blue);font-size:.62rem}
.tick-list li b{color:var(--text);font-weight:600}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;border-radius:20px;padding:32px 28px 30px;display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.plan:hover{transform:translateY(-6px);border-color:var(--border-strong)}
.plan .ptag{font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.plan h3{font-size:1.5rem;margin:14px 0 6px}
.plan .amount{font-family:"ITC Fenice","Playfair Display",serif;font-size:2.4rem;line-height:1.1;margin:10px 0 4px}
.plan .amount small{font-family:"Hanken Grotesk",sans-serif;font-size:.9rem;color:var(--muted-2);font-weight:500}
.plan .pdesc{color:var(--muted);font-size:.96rem;margin-top:10px}
.plan ul{list-style:none;display:grid;gap:11px;margin:24px 0 28px}
.plan li{position:relative;padding-left:24px;color:var(--muted);font-size:.94rem}
.plan li::before{content:"◆";position:absolute;left:0;top:.2em;color:var(--blue);font-size:.58rem}
.plan .btn{margin-top:auto;justify-content:center}
.plan.featured{border-color:rgba(120,190,255,0.42)}
.plan.featured::after{content:"Most picked";position:absolute;top:18px;right:18px;
  font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);border:1px solid var(--border-strong);border-radius:999px;padding:5px 10px}

/* add-on / info rows */
.rows{border-top:1px solid var(--border)}
.rowi{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.rowi b{font-family:"ITC Fenice","Playfair Display",serif;font-weight:600;font-size:1.1rem}
.rowi p{color:var(--muted);font-size:.94rem;margin-top:3px}
.rowi .price{color:var(--blue);font-family:"JetBrains Mono",monospace;font-size:.9rem;white-space:nowrap}

/* ---------- work / portfolio ---------- */
.case-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:20px}
.case-row.flip .case-copy{order:2}
.case-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:20px}
.case-meta div{min-width:88px}
.case-meta b{display:block;font-family:"ITC Fenice","Playfair Display",serif;font-size:1.3rem}
.case-meta span{display:block;color:var(--muted-2);font-size:.76rem;font-family:"JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}

@media(max-width:900px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .split,.case-row{grid-template-columns:1fr;gap:34px}
  .case-row.flip .case-copy{order:0}
  .price-grid{grid-template-columns:1fr}
  .page-hero{padding:120px 0 0}
  .page-hero h1,.page-hero h1.wide{max-width:none}
}

/* ---------- scope calculator ---------- */
.calc{border-radius:24px;overflow:hidden}
.calc-head,.calc-row{display:grid;grid-template-columns:1.1fr 1.4fr .55fr;gap:28px;align-items:center;padding:22px 28px}
.calc-head{
  font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);border-bottom:1px solid var(--border);background:rgba(180,205,240,0.05);
}
html[data-theme="light"] .calc-head{background:rgba(28,58,105,0.04)}
.calc-head .r{text-align:right}
.calc-row{border-bottom:1px solid var(--border);transition:background .3s var(--ease)}
.calc-row:last-child{border-bottom:none}
.calc-row:hover{background:rgba(120,190,255,0.05)}
html[data-theme="light"] .calc-row:hover{background:rgba(37,96,232,0.04)}

.c-svc{display:flex;gap:15px;align-items:flex-start}
.c-ico{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:var(--blue);background:rgba(120,190,255,0.10);border:1px solid var(--border-strong)}
.c-svc b{display:block;font-family:"ITC Fenice","Playfair Display",serif;font-weight:600;font-size:1.14rem;line-height:1.25}
.c-svc span span{display:block;color:var(--muted);font-size:.88rem;margin-top:5px;line-height:1.45}

.c-scope{min-width:0}
/* the handle is an After Effects keyframe: a diamond on a timeline track */
.c-slider{-webkit-appearance:none;appearance:none;width:100%;height:24px;cursor:pointer;outline:none;background:transparent}

/* --- track (webkit) --- */
.c-slider::-webkit-slider-runnable-track{
  height:5px;border-radius:999px;
  background:
    repeating-linear-gradient(90deg,rgba(190,215,255,0.18) 0 1px,transparent 1px 26px),
    linear-gradient(90deg,var(--blue) 0 var(--p,0%),rgba(150,180,220,0.18) var(--p,0%) 100%);
}
html[data-theme="light"] .c-slider::-webkit-slider-runnable-track{
  background:
    repeating-linear-gradient(90deg,rgba(28,58,105,0.16) 0 1px,transparent 1px 26px),
    linear-gradient(90deg,var(--blue) 0 var(--p,0%),rgba(28,58,105,0.14) var(--p,0%) 100%);
}
/* --- keyframe handle (webkit) --- */
.c-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;margin-top:-6px;border-radius:3px;
  transform:rotate(45deg);
  background:linear-gradient(145deg,#FFFFFF 0%,#D8E6FA 45%,#93B9EA 100%);
  border:1px solid rgba(190,220,255,0.9);
  box-shadow:0 3px 12px rgba(20,54,168,0.55),inset 1px 1px 2px rgba(255,255,255,0.9);
  transition:transform .22s var(--ease),box-shadow .22s;
}
.c-slider:hover::-webkit-slider-thumb{transform:rotate(45deg) scale(1.16);box-shadow:0 5px 18px rgba(20,54,168,0.7),inset 1px 1px 2px rgba(255,255,255,0.9)}
.c-slider:active::-webkit-slider-thumb{transform:rotate(45deg) scale(1.05)}
.c-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(120,190,255,0.28),0 3px 12px rgba(20,54,168,0.55)}
html[data-theme="light"] .c-slider::-webkit-slider-thumb{
  background:linear-gradient(145deg,#FFFFFF 0%,#E4EEFC 45%,#A8C6EE 100%);
  border-color:rgba(37,96,232,0.55);
  box-shadow:0 3px 10px rgba(30,60,140,0.28),inset 1px 1px 2px rgba(255,255,255,0.95);
}

/* --- firefox --- */
.c-slider::-moz-range-track{
  height:5px;border-radius:999px;
  background:
    repeating-linear-gradient(90deg,rgba(190,215,255,0.18) 0 1px,transparent 1px 26px),
    linear-gradient(90deg,var(--blue) 0 var(--p,0%),rgba(150,180,220,0.18) var(--p,0%) 100%);
}
.c-slider::-moz-range-thumb{
  width:14px;height:14px;border-radius:3px;transform:rotate(45deg);
  background:linear-gradient(145deg,#FFFFFF 0%,#D8E6FA 45%,#93B9EA 100%);
  border:1px solid rgba(190,220,255,0.9);
  box-shadow:0 3px 12px rgba(20,54,168,0.55);
}

.c-legend{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:12px}
.c-val{font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:8px}
.c-val::before{content:"";width:7px;height:7px;border-radius:1px;transform:rotate(45deg);
  background:linear-gradient(145deg,#FFFFFF,#93B9EA);flex:0 0 auto}
.c-max{font-family:"JetBrains Mono",monospace;font-size:.7rem;color:var(--muted-2);white-space:nowrap}

.c-price{text-align:right}
.c-price b{display:block;font-family:"ITC Fenice","Playfair Display",serif;font-size:1.9rem;line-height:1.1;
  font-variant-numeric:tabular-nums}
.c-price span{display:block;font-family:"JetBrains Mono",monospace;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2);margin-top:6px}
.calc-note{color:var(--muted-2);font-size:.9rem;margin-top:20px;text-align:center}

@media(max-width:900px){
  .calc-head{display:none}
  .calc-row{grid-template-columns:1fr;gap:20px;padding:26px 22px}
  .c-price{text-align:left;display:flex;align-items:baseline;gap:12px}
  .c-price span{margin-top:0}
}