/* DROPIT Static v1 — Club/EDM premium */

/* Self-hosted fonts (downloaded from Google Fonts) */
@font-face{
  font-family:"IBM Plex Sans";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:Fraunces;
  font-style:normal;
  font-weight:500 650;
  font-display:swap;
  src:url("assets/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#0b0d0c;
  --base:#191d21;
  --surface:#14181c;
  --ink:#e7e1df;
  --muted:rgba(231,225,223,.68);
  --line:rgba(231,225,223,.14);
  --a:#7a4e5a;      /* wine */
  --b:#72a3bd;      /* steel */
  --radius:22px;
}
*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
body{
  margin:0;
  /* space for fixed floating nav */
  padding-top:84px;
  background:radial-gradient(1200px 700px at 18% 18%, rgba(122,78,90,.30), transparent 55%),
             radial-gradient(1200px 700px at 85% 62%, rgba(114,163,189,.22), transparent 60%),
             var(--bg);
  color:var(--ink);
  font-family:"IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing:.01em;
}
a{color:inherit}
.wrap{width:min(1120px, 92vw); margin:0 auto;}

/* NAV (floating + fixed) */
.nav{position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:10px 0;
  background:transparent;
  pointer-events:none;
}
.nav__inner{pointer-events:auto;}

.nav__inner{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  height:62px;
  border-radius:999px;
  border:1px solid rgba(231,225,223,.14);
  background:rgba(11,13,12,.72);
  backdrop-filter: blur(12px);
  box-shadow:0 22px 70px rgba(0,0,0,.55);
  padding:0 14px;
}
.brand img{height:22px; width:auto; opacity:.95; display:block}
.nav__links{display:flex; gap:18px; font-size:13px; color:var(--muted)}
.nav__links a{text-decoration:none; position:relative}
.nav__links a:hover{color:rgba(231,225,223,.92)}

.btn{display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid var(--line); text-decoration:none; font-weight:600; font-size:13px;}
.btn--primary{background:linear-gradient(135deg, rgba(122,78,90,1), rgba(114,163,189,.62)); border-color:rgba(231,225,223,.18);
  box-shadow:0 18px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn--primary:hover{filter:brightness(1.08)}
.link{color:var(--muted); text-decoration:none}
.link:hover{color:rgba(231,225,223,.92)}

.menuBtn{display:none; padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink); font-weight:700}
.menuOverlay{position:fixed; inset:0; background:rgba(0,0,0,.58); backdrop-filter:blur(6px); z-index:120}
.menu{position:fixed; left:14px; right:14px; top:14px; z-index:130; border-radius:var(--radius);
  border:1px solid rgba(231,225,223,.16);
  background:rgba(15,18,17,.92);
  box-shadow:0 40px 120px rgba(0,0,0,.72);
  padding:16px;
}
.menu__head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.menu__title{font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:rgba(231,225,223,.72)}
.menu__close{width:44px; height:44px; border-radius:16px; border:1px solid rgba(231,225,223,.16); background:transparent; color:var(--ink); font-size:22px}
.menu__links{display:grid; gap:10px}
.menu__links a{padding:14px 12px; border-radius:16px; border:1px solid rgba(231,225,223,.10); background:rgba(231,225,223,.04); text-decoration:none; font-weight:700}

/* Floating WhatsApp quick contact */
.waFloat{position:fixed; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:200;
  width:56px; height:56px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(38,211,102,.95), rgba(162,255,204,.55));
  border:1px solid rgba(234,240,255,.18);
  box-shadow:0 22px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  text-decoration:none;
}
.waFloat svg{width:24px; height:24px; fill:#07120C; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.waFloat:hover{filter:brightness(1.05)}
.waFloat:focus-visible{outline:2px solid rgba(142,231,255,.24); outline-offset:3px}
@media (max-width: 520px){
  .waFloat{right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); width:54px; height:54px}
  body{padding-bottom:72px}
}

/* HERO */
.hero{position:relative; border-bottom:1px solid var(--line);}
.hero__bg{position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.78)),
    url('assets/generated/hero-wow/image-001.webp') center/cover no-repeat;
}
@media (max-width: 520px){
  .hero__bg{background:
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.78)),
    url('assets/generated/hero-wow/image-001-960.webp') center/cover no-repeat;
  }
}
.hero__bg::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 18% 22%, rgba(122,78,90,.38), transparent 60%),
    radial-gradient(900px 520px at 82% 62%, rgba(114,163,189,.26), transparent 62%);
  mix-blend-mode:screen;
  opacity:.55;
}
.hero__bg::after{content:""; position:absolute; inset:0;
  background:radial-gradient(700px 420px at 50% 20%, rgba(255,255,255,.08), transparent 55%);
  opacity:.55;
}
@keyframes spinGlow{to{transform:rotate(360deg)}}

.hero{min-height:92vh; display:flex; align-items:flex-end}
.hero__inner{position:relative; padding:110px 0 66px; display:grid; grid-template-columns: 1fr; gap:0; align-items:end}
.hero__left{max-width:720px; position:relative}
.hero__left::before{content:""; position:absolute; inset:-18px -14px -18px -14px;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border:1px solid rgba(231,225,223,.10);
  border-radius:26px;
  backdrop-filter: blur(10px);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
  opacity:.55;
  pointer-events:none;
}
.hero__left > *{position:relative}
.pill{display:inline-flex; align-items:center; gap:10px; border-radius:999px; border:1px solid var(--line);
  background:rgba(20,24,28,.38); padding:6px 10px; color:rgba(231,225,223,.78); font-size:12px}
.dot{width:4px; height:4px; border-radius:999px; background:rgba(231,225,223,.38)}

.hero__h{margin:18px 0 0; font-family:"Fraunces", ui-serif, Georgia, serif; letter-spacing:-.02em}
.hero__h1{display:block; font-size:clamp(46px, 5.2vw, 78px); line-height:.90; text-shadow:0 22px 80px rgba(0,0,0,.68)}
.hero__h2{display:block; font-size:clamp(46px, 5.2vw, 78px); line-height:.90; opacity:.86}

/* intro motion */
.hero .reveal{opacity:0; transform:translateY(10px); filter:blur(6px);}
.hero.isOn .reveal{opacity:1; transform:translateY(0); filter:blur(0); transition: 900ms cubic-bezier(.2,.9,.2,1);}
.hero.isOn .reveal.d2{transition-delay:120ms}
.hero.isOn .reveal.d3{transition-delay:220ms}
.hero.isOn .reveal.d4{transition-delay:320ms}
.hero.isOn .reveal.d5{transition-delay:420ms}
.hero__sub{margin:16px 0 0; color:rgba(231,225,223,.78); max-width:56ch; line-height:1.6}
.hero__cta{margin-top:22px; display:flex; gap:14px; align-items:center; flex-wrap:wrap}

.proof{margin-top:24px;
  border:1px solid rgba(231,225,223,.06);
  background:rgba(255,255,255,.035);
  border-radius:16px;
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  backdrop-filter: blur(12px);
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}
.proof__seg{padding:18px 18px}
.proof__seg + .proof__seg{border-left:1px solid rgba(231,225,223,.05)}
.proof__k{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,223,.55)}
.proof__v{margin-top:6px; font-weight:650}
.proof__v strong{font-weight:650; font-size:20px; letter-spacing:-.02em}

.frame{position:relative; border-radius:28px; overflow:hidden; border:1px solid var(--line);
  background:rgba(20,24,28,.22);
  box-shadow:0 40px 120px rgba(0,0,0,.66);
}
.frame__img{width:100%; height:460px;
  background:
    url('assets/generated/hero-wow/image-001.webp') center/cover no-repeat;
  transform: translateZ(0) scale(1.06);
  animation: kenburns 12s ease-in-out infinite alternate;
  filter: brightness(.95) contrast(1.20) saturate(1.25);
}
@keyframes kenburns{
  from{transform:translateZ(0) scale(1.06)}
  to{transform:translateZ(0) scale(1.12)}
}
.frame__shade{position:absolute; inset:0;
  background:radial-gradient(900px 420px at 55% 35%, rgba(255,255,255,.06), transparent 55%),
             linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62));
}
.frame__grain{position:absolute; inset:0; opacity:.12; mix-blend-mode:overlay; background:url('assets/fx/grain.svg') 0 0/220px 220px repeat; pointer-events:none}
.frame__tag{position:absolute; left:14px; top:14px; padding:7px 10px; border-radius:999px; border:1px solid rgba(231,225,223,.16);
  background:rgba(11,13,12,.35); backdrop-filter: blur(10px); font-size:12px; color:rgba(231,225,223,.82)}

.thumbs{margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.thumb{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); text-decoration:none; background:rgba(20,24,28,.22)}
.thumb img{width:100%; height:110px; object-fit:cover; display:block; filter:brightness(.92) contrast(1.12) saturate(1.15)}
.thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(0,0,0,.60));}
.thumb__cap{position:absolute; left:10px; bottom:10px; font-size:12px; color:rgba(231,225,223,.86); z-index:2}
.thumb:hover{transform:translateY(-2px); box-shadow:0 28px 80px rgba(0,0,0,.55)}

/* SECTIONS */
.section{padding:70px 0; border-bottom:1px solid rgba(231,225,223,.08)}
.section__head{display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:18px}
.section__head h2{margin:0; font-family:"Fraunces", ui-serif, Georgia, serif; font-size:28px; letter-spacing:-.02em}
.section__head p{margin:0; color:var(--muted); max-width:60ch; line-height:1.6}
.section__head--stack{flex-direction:column; align-items:flex-start}

.section__cta{margin-top:18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.section__cta .btn{padding:12px 16px}

/* --- Services Switcher (Option A) --- */
.svc{margin-top:18px; display:grid; grid-template-columns: 1fr; gap:18px}
.svc__tabs{display:flex; gap:10px; flex-wrap:wrap; padding:8px; border:1px solid var(--line); border-radius:18px; background:rgba(12,12,14,.32); backdrop-filter: blur(10px)}
.svc__tab{position:relative; appearance:none; border:1px solid rgba(231,225,223,.14); background:transparent !important; color:var(--muted); padding:10px 12px; border-radius:14px; font-weight:800; letter-spacing:.02em; cursor:pointer}
.svc__tab::after{content:""; position:absolute; left:12px; right:12px; bottom:7px; height:2px; border-radius:99px; background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.55), rgba(255,255,255,.0)); transform:scaleX(.2); opacity:0; transform-origin:center; transition:transform .35s ease, opacity .35s ease}
.svc__tab:hover{color:rgba(255,255,255,.88)}
.svc__tab.isActive{color:rgba(255,255,255,.95); background:rgba(231,225,223,.08) !important; border-color:rgba(231,225,223,.22)}
.svc__tab.isActive::after{opacity:1; transform:scaleX(1)}

.svc__stage{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch}
.svc__media{position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(231,225,223,.14); background:radial-gradient(1200px 600px at 30% 10%, rgba(114,163,189,.15), transparent 55%), rgba(12,12,14,.52);
  aspect-ratio: 16 / 10; max-height:520px}
.svc__frame{position:absolute; inset:0; margin:0; opacity:0; transform:scale(1.05); transition:opacity .42s ease, transform .70s ease}
.svc__frame img{width:100%; height:100%; object-fit:cover; filter:saturate(1.06) contrast(1.03)}
.svc__frame.isOn{opacity:1; transform:scale(1.02)}
.svc__media::before{content:""; position:absolute; inset:-2px; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.62)); pointer-events:none; z-index:2}
.svc__glow{position:absolute; inset:auto -20% -30% -20%; height:60%; background:radial-gradient(circle at 50% 10%, rgba(114,163,189,.35), transparent 60%); filter:blur(18px); opacity:.75; z-index:3; pointer-events:none}

.svc__copy{border-radius:22px; border:1px solid rgba(231,225,223,.14); background:linear-gradient(180deg, rgba(12,12,14,.38), rgba(12,12,14,.22)); padding:16px 16px 14px}
.svc__panel{display:none}
.svc__panel.isOn{display:block; animation:svcFade .32s ease both}
@keyframes svcFade{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:translateY(0)}}
.svc__outcome{margin:0 0 10px; font-weight:800; font-size:16px; letter-spacing:.01em}
.svc__how,.svc__for{margin:0 0 10px; color:var(--muted); line-height:1.65}
.svc__specs{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(231,225,223,.14); background:rgba(231,225,223,.06); color:rgba(255,255,255,.84); font-size:12px; letter-spacing:.02em}

.svc__actions{margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.svc__link{color:rgba(255,255,255,.88); text-decoration:none; font-weight:700}
.svc__link:hover{text-decoration:underline}

@media (max-width: 860px){
  .svc__stage{grid-template-columns:1fr}
  .svc__media{min-height:260px}
}
.note{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(231,225,223,.52)}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.card{border:1px solid rgba(231,225,223,.12); border-radius:18px; background:rgba(20,24,28,.24); padding:18px}
.card h3{margin:0 0 8px; font-size:16px}
.card p{margin:0; color:var(--muted); line-height:1.6}

/* Featured cases */
.featured{display:grid; gap:14px}
.ft{display:grid; grid-template-columns: 0.95fr 1.05fr; gap:16px; align-items:stretch;
  border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(20,24,28,.18); overflow:hidden}
.ft__media{position:relative; display:block; text-decoration:none; min-height:260px}
.ft__media img{width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.92) contrast(1.18) saturate(1.20)}
.ft__veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.68))}
.ft__badge{position:absolute; left:14px; top:14px; padding:7px 10px; border-radius:999px;
  border:1px solid rgba(231,225,223,.16);
  background:rgba(11,13,12,.35); backdrop-filter: blur(10px);
  font-size:12px; color:rgba(231,225,223,.86)}
.ft__body{padding:18px}
.ft__body h3{margin:0; font-size:22px; letter-spacing:-.02em}
.trl{margin:12px 0 0; padding:0; list-style:none; display:grid; gap:10px; color:var(--muted); line-height:1.6}
.trl strong{color:rgba(231,225,223,.86); font-weight:650}
.ft__cta{margin-top:14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.mini{margin-top:10px; font-size:12px; color:rgba(231,225,223,.62); line-height:1.45}
.caps{margin-top:10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(231,225,223,.55)}

.ft:hover{box-shadow:0 40px 120px rgba(0,0,0,.45)}
.ft:hover .ft__media img{transform:scale(1.02)}
.ft__media img{transition: transform 700ms cubic-bezier(.2,.9,.2,1)}

@media (max-width: 920px){
  .ft{grid-template-columns:1fr}
  .ft__media{min-height:220px}
}

.about{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.about__box{border:1px solid rgba(231,225,223,.12); border-radius:18px; background:rgba(20,24,28,.18); padding:18px; line-height:1.7}

/* --- About v2 (Credibility + Perspektive) --- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.eyebrow::before{content:""; width:18px; height:1px; background:rgba(231,225,223,.26)}

.about2__head h2{margin:10px 0 8px; font-size:34px; letter-spacing:-.03em}
.lead{margin:0; color:var(--muted); line-height:1.7; max-width:78ch}

.about2__grid{margin-top:22px; display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:start}

.p3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.p3__card{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:linear-gradient(180deg, rgba(20,24,28,.22), rgba(20,24,28,.14)); padding:18px; position:relative; overflow:hidden}
.p3__card::before{content:""; position:absolute; inset:-2px; background:radial-gradient(520px 220px at 25% 0%, rgba(114,163,189,.18), transparent 60%); opacity:.9}
.p3__card > *{position:relative}
.p3__card h3{margin:0 0 8px; font-size:15px; letter-spacing:.02em; text-transform:uppercase; color:rgba(231,225,223,.86)}
.p3__card p{margin:0 0 12px; color:var(--muted); line-height:1.6}
.p3__k{margin-top:auto; padding-top:10px; border-top:1px solid rgba(231,225,223,.10); font-weight:850; letter-spacing:-.01em}

.about2__side{display:grid; gap:14px}
.portrait{margin:0; border-radius:22px; overflow:hidden; border:1px solid rgba(231,225,223,.14); background:rgba(20,24,28,.18)}
.portrait img{width:100%; height:auto; display:block; filter:contrast(1.02) saturate(1.02)}
.portrait figcaption{padding:10px 12px; font-size:12px; color:rgba(231,225,223,.70); border-top:1px solid rgba(231,225,223,.10)}

.proof{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(20,24,28,.16); padding:16px}
.proof__t{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,223,.62); margin-bottom:10px}
.proof__list{margin:0; padding-left:18px; display:grid; gap:8px; color:var(--muted); line-height:1.55}
.proof__list strong{color:rgba(231,225,223,.92)}

.manifest{border:1px solid rgba(231,225,223,.12); border-radius:22px; padding:14px 16px; background:linear-gradient(135deg, rgba(114,163,189,.12), rgba(122,78,90,.10)); font-weight:900; letter-spacing:-.02em}

.about2__cta{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width: 980px){
  .about2__head h2{font-size:28px}
  .about2__grid{grid-template-columns:1fr}
  .p3{grid-template-columns:1fr}
}

/* --- Founder + Proof (Option 1) --- */
.founder{position:relative; border:1px solid rgba(231,225,223,.12); border-radius:26px; overflow:hidden; background:rgba(12,12,14,.35)}
.founder__bg{position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.78) 100%),
    url('assets/media/marx-halle-led.webp') center/cover no-repeat;
  filter:saturate(1.06) contrast(1.05) blur(2px);
  transform:scale(1.04);
}
.founder__inner{position:relative; padding:22px; display:grid; grid-template-columns: 1.05fr .95fr; gap:16px; align-items:start}
.founder__copy h2{margin:10px 0 10px; font-size:34px; letter-spacing:-.03em}
.founder__cta{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}

.proof2{border:1px solid rgba(231,225,223,.14); border-radius:22px; background:rgba(12,12,14,.42); padding:16px; backdrop-filter: blur(10px)}
.proof2__t{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,223,.62); margin-bottom:10px}
.proof2__list{margin:0; padding-left:18px; display:grid; gap:8px; color:rgba(231,225,223,.76); line-height:1.55}
.proof2__list strong{color:rgba(255,255,255,.92)}

@media (max-width: 980px){
  .founder__inner{grid-template-columns:1fr}
  .founder__copy h2{font-size:28px}
}

/* --- About WOW (WEB3/HUD-style, full-bleed video + docked glass panel) --- */
.section--bleed{padding:0}
.section--bleed .wrap{padding:0}

.aboutwow{position:relative; width:100vw; margin-left:calc(50% - 50vw);
  --hudw: min(520px, calc(100vw - 28px));
  --hudpad: clamp(14px, 2.6vw, 34px);
  --hudbottom: clamp(56px, 6.2vw, 76px);
  height:clamp(520px, 82vh, 900px);
  overflow:hidden; border-top:1px solid rgba(231,225,223,.08); border-bottom:1px solid rgba(231,225,223,.08);
  background:rgba(10,10,12,.42)}

.aboutwow__visual{position:absolute; inset:0}
.aboutwow__video{width:100%; height:100%; object-fit:cover; filter:saturate(1.10) contrast(1.12) brightness(.78)}
.aboutwow__veil{position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 18% 30%, rgba(114,163,189,.22), transparent 60%),
    radial-gradient(700px 420px at 80% 60%, rgba(122,78,90,.18), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 48%, rgba(0,0,0,.70) 100%);
}
.aboutwow__grid{position:absolute; inset:0; opacity:.07; background:
  repeating-linear-gradient(0deg, rgba(231,225,223,.55) 0 1px, transparent 1px 44px),
  repeating-linear-gradient(90deg, rgba(231,225,223,.45) 0 1px, transparent 1px 44px);
  mix-blend-mode:overlay; pointer-events:none}
.aboutwow__scan{position:absolute; inset:0; opacity:.045; background:repeating-linear-gradient(180deg, rgba(231,225,223,.55) 0 1px, transparent 1px 6px); mix-blend-mode:overlay; pointer-events:none; animation:scanDrift 9s linear infinite}
@keyframes scanDrift{from{transform:translateY(0)}to{transform:translateY(18px)}}
.aboutwow__noise{position:absolute; inset:0; opacity:.035; background:url('assets/fx/grain.svg') 0 0/220px 220px repeat; mix-blend-mode:overlay; pointer-events:none}

.aboutwow__content{position:absolute; inset:0; z-index:5}
.storyGrid{height:100%; display:grid; position:relative;
  --imgw: min(520px, 42vw);
  grid-template-columns: 1fr var(--imgw);
  gap:clamp(32px, 3.5vw, 48px);
  padding:clamp(16px, 3vw, 42px);
  padding-bottom:calc(56px + clamp(16px, 3vw, 42px));
  align-items:start}
.storyCol{max-width:56ch}

.keywordTag{position:absolute;
  right:calc(var(--imgw) + 34px);
  top:calc(clamp(16px, 3vw, 42px) + 6px);
  transform:none;
  font-size:clamp(28px, 2.4vw, 40px);
  font-weight:720;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:rgba(206,200,199,.74);
  text-align:right;
  line-height:1.05;
  text-shadow: 0 22px 70px rgba(0,0,0,.75)}
.keywordTag::after{content:""; display:block; width:64px; height:1px; margin-top:14px; margin-left:auto;
  background:rgba(206,200,199,.28)}

.lead--tight{max-width:62ch}
.stack{margin-top:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,223,.60)}
.status{font-size:12px; letter-spacing:.20em; text-transform:uppercase; color:rgba(231,225,223,.64)}
.hudMeta{margin-top:6px; display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.58)}
.hudMeta__line{width:22px; height:1px; background:rgba(231,225,223,.22)}
.ghostLink{display:inline-flex; align-items:center; gap:8px; margin-top:14px; text-decoration:none; font-weight:800; color:rgba(255,255,255,.88)}
.ghostLink:hover{text-decoration:underline}

.storyTitle{margin:12px 0 10px; font-size:clamp(36px, 3.2vw, 44px); letter-spacing:-.03em; line-height:1.08}
.story{margin:0 0 12px; color:rgba(231,225,223,.74); line-height:1.7; max-width:56ch; font-size:16px}

.aboutBullets{margin:10px 0 12px; padding-left:18px; color:rgba(231,225,223,.78); line-height:1.6}
.aboutBullets li{margin:6px 0}
.aboutBullets strong{color:rgba(255,255,255,.92)}

.aboutFacts{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:10px}
.aboutFact{padding:12px 12px; border-radius:18px; border:1px solid rgba(231,225,223,.10); background:rgba(0,0,0,.14)}
.aboutFact__k{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.60)}
.aboutFact__v{margin-top:6px; font-weight:850; letter-spacing:-.01em; color:rgba(231,225,223,.92)}
@media (max-width: 520px){
  .aboutFacts{grid-template-columns:1fr;}
}

.sectionTag{position:absolute;
  right:calc(var(--hudpad) + var(--hudw) + 22px);
  top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:4px; align-items:flex-end;
  font-size:clamp(24px, 2.6vw, 44px);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(206,200,199,.78);
  pointer-events:none;
  z-index:6;
  text-shadow: 0 22px 70px rgba(0,0,0,.65)}
.sectionTag__word{line-height:1.0}
.sectionTag__line{display:none}

/* console-style reveal without changing typography */
.console{position:relative}
.console .conLine{opacity:0; transform:translateY(10px)}
[data-reveal].isIn .console .conLine{animation:conIn .55s ease both; animation-delay: calc(var(--i, 0) * 90ms)}
@keyframes conIn{to{opacity:1; transform:translateY(0)}}
[data-reveal].isIn .console::after{content:""; position:absolute; left:-2px; top:0; width:2px; height:1.2em; border-radius:2px;
  background:rgba(114,163,189,.85); box-shadow:0 0 14px rgba(114,163,189,.35);
  animation:cursorBlink 1.6s steps(2, end) 1;
}
@keyframes cursorBlink{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}

.aboutwow__h{position:relative; margin:12px 0 14px; font-size:clamp(32px, 4.0vw, 56px); letter-spacing:-.04em; line-height:1.06}
.aboutwow__h .cue{display:block; height:1px; margin-top:14px; background:rgba(231,225,223,.18); position:relative; overflow:hidden; border-radius:99px}
.aboutwow__h .cue::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(231,225,223,.72), transparent); transform:translateX(-60%); animation:cueRun 3.8s ease-in-out infinite}
@keyframes cueRun{0%,40%{transform:translateX(-60%)}70%,100%{transform:translateX(60%)}}

/* Glass panel (not iOS — darker tint, edge shift, deep shadow) */
.aboutwow__right{position:relative; width:100%; max-width:520px; justify-self:end; align-self:start;
  transform:translateY(var(--py, 0px));
}

.founderShot{margin:0; aspect-ratio:4/5; display:grid; grid-template-rows: 1fr auto;
  border-radius:22px; overflow:hidden;
  background:rgba(12,12,14,.58); backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
  position:relative}
.founderShot::before{content:""; position:absolute; inset:0; border-radius:22px; padding:1px;
  background:linear-gradient(135deg, rgba(114,163,189,.26), rgba(122,78,90,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.62; pointer-events:none}

.cornerTag{position:absolute; left:-10px; top:-10px; z-index:3;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:14px;
  background:rgba(12,12,14,.58); backdrop-filter: blur(14px);
  border:1px solid rgba(231,225,223,.12);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
  font-size:12px; letter-spacing:.20em; text-transform:uppercase;
  color:rgba(206,200,199,.82)}
.cornerTag::after{content:""; position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background:radial-gradient(120px 60px at 30% 30%, rgba(0,0,0,.20), transparent 70%);
  opacity:.55}
.cornerTag__line{width:26px; height:1px; background:rgba(206,200,199,.35)}

.founderShot img{width:100%; height:100%; object-fit:cover; filter:contrast(1.06) saturate(1.02)}
.founderShot figcaption{padding:12px 14px; border-top:1px solid rgba(231,225,223,.10); background:rgba(12,12,14,.32)}
.founderShot__name{font-weight:930; letter-spacing:-.01em}
.founderShot__one{margin-top:4px; color:rgba(231,225,223,.72); font-size:13px; line-height:1.35}

.specbar{position:absolute; left:0; right:0; bottom:0; height:56px;
  background:rgba(12,12,14,.38); backdrop-filter: blur(14px);
  border-top:1px solid rgba(231,225,223,.10);
  z-index:4;
}
.specbar::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:linear-gradient(90deg, rgba(114,163,189,.10), transparent 20%, transparent 80%, rgba(122,78,90,.10))}

.ticker{height:100%; display:flex; align-items:center; overflow:hidden; padding:0 clamp(14px, 2.6vw, 34px)}
.ticker__track{display:flex; gap:48px; align-items:center; width:max-content; animation:tickerMove 34s linear infinite}
.ticker__row{white-space:nowrap; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(206,200,199,.80)}

/* pause on hover */
.specbar:hover .ticker__track{animation-play-state:paused}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none}
}

@keyframes tickerMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

.proof2{margin-top:14px; border:1px solid rgba(231,225,223,.10); border-radius:18px; background:rgba(12,12,14,.36); padding:14px}
.proof2__t{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,223,.62); margin-bottom:10px}
.proof2__list{margin:0; padding-left:0; list-style:none; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 12px;
  color:rgba(231,225,223,.78); line-height:1.45}
.proof2__list li{position:relative; padding-left:14px; opacity:0; transform:translateY(8px)}
.proof2__list li::before{content:"▸"; position:absolute; left:0; top:0; color:rgba(114,163,189,.75)}
.proof2__list strong{color:rgba(255,255,255,.92)}

.aboutwow__cta{margin-top:14px; display:flex; gap:10px; flex-wrap:wrap}

/* Reveal / micro motion */
[data-reveal]{opacity:0; transform:translateY(12px); transition:opacity .55s ease, transform .65s ease}
[data-reveal].isIn{opacity:1; transform:translateY(0)}
[data-reveal].isIn .proof2__list li{animation:bulletIn .55s ease both; animation-delay: var(--d, 0ms)}
@keyframes bulletIn{to{opacity:1; transform:translateY(0)}}

@media (max-width: 980px){
  .aboutwow{height:auto}
  .aboutwow__content{position:relative}
  .storyGrid{grid-template-columns:1fr; row-gap:18px; padding:18px; padding-bottom:18px}
  .keywordTag{display:none}
  .aboutwow__right{max-width:none; justify-self:stretch; transform:none}
  .founderShot{aspect-ratio:16/11}
  .founderShot img{object-position:50% 18%}

  .specbar{position:relative; height:auto}
  .ticker{padding:12px 14px}
  .ticker__track{animation-duration:46s}

  .proof2__list{grid-template-columns:1fr}
}

/* --- Services WOW (full-bleed + interaction) --- */
.serviceswow{position:relative; width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(560px, 78vh, 900px);
  overflow:hidden; border-top:1px solid rgba(231,225,223,.08); border-bottom:1px solid rgba(231,225,223,.08);
  background:rgba(10,10,12,.42)}
.serviceswow__visual{position:absolute; inset:0}
.serviceswow__bg{width:100%; height:100%; object-fit:cover; filter:saturate(1.10) contrast(1.12) brightness(.74)}
.serviceswow__veil{position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 18% 30%, rgba(114,163,189,.18), transparent 60%),
    radial-gradient(700px 420px at 80% 60%, rgba(122,78,90,.14), transparent 62%),
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.46) 52%, rgba(0,0,0,.70) 100%);
}
.serviceswow__grid{position:absolute; inset:0; opacity:.07; background:
  repeating-linear-gradient(0deg, rgba(231,225,223,.55) 0 1px, transparent 1px 44px),
  repeating-linear-gradient(90deg, rgba(231,225,223,.45) 0 1px, transparent 1px 44px);
  mix-blend-mode:overlay; pointer-events:none}
.serviceswow__scan{position:absolute; inset:0; opacity:.045; background:repeating-linear-gradient(180deg, rgba(231,225,223,.55) 0 1px, transparent 1px 6px); mix-blend-mode:overlay; pointer-events:none; animation:scanDrift 9s linear infinite}
.serviceswow__noise{position:absolute; inset:0; opacity:.035; background:url('assets/fx/grain.svg') 0 0/220px 220px repeat; mix-blend-mode:overlay; pointer-events:none}

.serviceswow__content{position:absolute; inset:0; z-index:5}
.servicesGrid{height:100%; display:grid; grid-template-columns:1fr; gap:18px; position:relative;
  --imgw: min(560px, 46vw);
  padding:clamp(16px, 3vw, 42px);
  padding-bottom:clamp(16px, 3vw, 42px);
  align-items:start}
.servicesCol--story{max-width:56ch}
.serviceswow__h{position:relative; margin:12px 0 14px; font-size:clamp(30px, 3.3vw, 46px); letter-spacing:-.04em; line-height:1.06}
.serviceswow__h .cue{display:block; height:1px; margin-top:14px; background:rgba(231,225,223,.18); position:relative; overflow:hidden; border-radius:99px}
.serviceswow__h .cue::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(231,225,223,.72), transparent); transform:translateX(-60%); animation:cueRun 3.8s ease-in-out infinite}

.servicesTabs{margin-top:10px}
.serviceswow .svc__tabs{padding:10px; border-radius:18px; background:rgba(12,12,14,.36)}
.serviceswow .svc__tab{font-size:13px}

.servicesKeyword{display:none}

.servicesCol--stage{transform:translateY(var(--py, 0px))}
.serviceswow .svc__stage{grid-template-columns:1fr; gap:12px}
.serviceswow .svc__media{aspect-ratio:4/5; max-height:none}
.serviceswow .svc__copy{border-radius:22px; border:1px solid rgba(231,225,223,.14); background:rgba(12,12,14,.46); backdrop-filter: blur(14px)}

@media (min-width: 768px){
  .servicesGrid{grid-template-columns: 1fr var(--imgw); gap:clamp(32px, 3.5vw, 48px)}
  .servicesKeyword{display:block; position:absolute;
    right:calc(var(--imgw) + 34px);
    top:calc(clamp(16px, 3vw, 42px) + 6px);
    font-size:clamp(28px, 2.2vw, 40px);
    font-weight:720;
    letter-spacing:.30em;
    text-transform:uppercase;
    color:rgba(206,200,199,.70);
    text-align:right;
    line-height:1.05;
    text-shadow: 0 22px 70px rgba(0,0,0,.75)
  }
  .servicesKeyword::after{content:""; display:block; width:64px; height:1px; margin-top:14px; margin-left:auto; background:rgba(206,200,199,.28)}
}

@media (min-width: 1024px){
  .serviceswow .svc__stage{gap:14px}
}

.muted{color:var(--muted)}

.contact{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(20,24,28,.22); padding:22px}
.contact h2{margin:0; font-family:"Fraunces", ui-serif, Georgia, serif; font-size:28px; letter-spacing:-.02em}
.contact__grid{margin-top:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.tile{border:1px solid rgba(231,225,223,.12); border-radius:16px; background:rgba(11,13,12,.28); padding:14px; text-decoration:none}
.tile:hover{filter:brightness(1.06)}
.tile .t{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,223,.55)}
.tile .v{display:block; margin-top:7px; font-weight:700}
.fine{margin:12px 0 0; font-size:12px; color:rgba(231,225,223,.55)}

.footer{padding:28px 0}
.footer__inner{display:flex; justify-content:space-between; gap:14px; color:rgba(231,225,223,.60); font-size:13px}

/* Premium minimal dark footer (3 cols desktop / 1 col mobile) */
.drFooter{position:relative; padding:34px 0 30px;
  background:rgba(12,12,14,.16);
  border-top:1px solid rgba(231,225,223,.10);
}
.drFooter::before{content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(121,183,255,.22), rgba(162,255,204,.18), transparent);
  opacity:.85;
}
.drFooter__inner{display:grid; gap:16px}
.drFooter__grid{display:grid; grid-template-columns:1fr; gap:18px}
.drFooter__col{padding:14px 14px; border-radius:22px;
  border:1px solid rgba(231,225,223,.10);
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.drFooter__k{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.drFooter__v{margin-top:10px; color:rgba(231,225,223,.84); line-height:1.6}
.drFooter__label{color:rgba(231,225,223,.56)}
.drFooter__links{margin-top:12px; display:flex; flex-wrap:wrap; gap:10px 14px}
.drFooter__links a{color:rgba(231,225,223,.70); text-decoration:none; border-bottom:1px solid transparent}
.drFooter__links a:hover{color:rgba(231,225,223,.92); border-bottom-color:rgba(231,225,223,.28)}

.drFooter__wa{margin-top:12px; display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:999px;
  border:1px solid rgba(162,255,204,.22);
  background:linear-gradient(135deg, rgba(38,211,102,.18), rgba(162,255,204,.08));
  color:rgba(231,225,223,.90);
  text-decoration:none;
}
.drFooter__wa:hover{border-color:rgba(162,255,204,.35); filter:brightness(1.04)}
.drFooter__fine{margin-top:10px; font-size:12px; color:rgba(231,225,223,.58)}

.drFooter__chips{display:flex; flex-wrap:wrap; gap:10px; padding-top:2px}

@media (min-width: 900px){
  .drFooter__grid{grid-template-columns:repeat(3,1fr)}
}

/* Responsive */
@media (max-width: 920px){
  .nav__links{display:none}
  .menuBtn{display:inline-flex}
  .btn.btn--primary{display:none}
  .hero__inner{grid-template-columns:1fr; padding:60px 0 40px}
  .frame__video{height:340px}
  .proof{grid-template-columns:repeat(2,1fr)}
  .proof__seg:nth-child(3){border-left:0; border-top:1px solid var(--line)}
  .proof__seg:nth-child(4){border-top:1px solid var(--line)}
  .grid{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .contact__grid{grid-template-columns:1fr}
}

/* --- Services Lab (SSH terminal + virtual PC screen) --- */
.serviceslab{position:relative; width:100vw; margin-left:calc(50% - 50vw);
  height:clamp(620px, 82vh, 980px);
  overflow:hidden; border-top:1px solid rgba(231,225,223,.08); border-bottom:1px solid rgba(231,225,223,.08);
  background:radial-gradient(1200px 700px at 18% 18%, rgba(114,163,189,.08), transparent 60%),
             radial-gradient(900px 520px at 78% 68%, rgba(122,78,90,.06), transparent 62%),
             #0b0d10;
}
.serviceslab__bg{position:absolute; inset:0}
.serviceslab__veil{position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.70), rgba(0,0,0,.40) 55%, rgba(0,0,0,.65));
  animation:veilDrift 18s ease-in-out infinite alternate}
@keyframes veilDrift{from{transform:translateX(-1.2%) scale(1.01)}to{transform:translateX(1.2%) scale(1.01)}}
.serviceslab__grid{position:absolute; inset:0; opacity:.06; background:
  repeating-linear-gradient(0deg, rgba(231,225,223,.55) 0 1px, transparent 1px 46px),
  repeating-linear-gradient(90deg, rgba(231,225,223,.40) 0 1px, transparent 1px 46px);
  mix-blend-mode:overlay; pointer-events:none}
.serviceslab__scan{position:absolute; inset:0; opacity:.04; background:repeating-linear-gradient(180deg, rgba(231,225,223,.55) 0 1px, transparent 1px 7px); mix-blend-mode:overlay; pointer-events:none; animation:scanDrift 10s linear infinite}
.serviceslab__noise{position:absolute; inset:0; opacity:.03; background:url('assets/fx/grain.svg') 0 0/220px 220px repeat; mix-blend-mode:overlay; pointer-events:none}

.serviceslab__content{position:absolute; inset:0; z-index:5; padding:clamp(16px, 3vw, 42px)}

.serviceslab__head{margin-bottom:14px}
.sysTitle{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sysTitle__kicker{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.sysTitle__sep{flex:1 1 120px; height:1px; background:linear-gradient(90deg, rgba(231,225,223,.20), rgba(114,163,189,.18), rgba(122,78,90,.16), rgba(231,225,223,.14))}
.sysTitle__name{font-size:20px; letter-spacing:-.02em; color:rgba(231,225,223,.90); font-weight:850}
.sysIntro{margin:10px 0 0; max-width:72ch; color:rgba(231,225,223,.70); line-height:1.6}

.labGrid{height:calc(100% - 76px); display:grid; grid-template-columns:1fr; gap:18px; align-items:stretch}

/* Terminal */
.terminal{border-radius:22px; border:1px solid rgba(231,225,223,.12);
  background:rgba(12,12,14,.56); backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
  padding:16px; overflow:hidden;
}
.terminal__body{margin-top:10px; display:grid; gap:8px}
.termLine{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px; letter-spacing:.06em; color:rgba(231,225,223,.72)}
.termOut{min-height:16px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:11px; letter-spacing:.10em; color:rgba(231,225,223,.55); padding-left:2px;
  opacity:.0; transition:opacity .45s ease}
.termPrompt{color:rgba(142,231,255,.86)}
.termDim{color:rgba(231,225,223,.42)}
.termCursor{display:inline-block; width:7px; height:14px; margin-left:4px; background:rgba(142,231,255,.75); border-radius:2px; transform:translateY(2px);
  animation:cursorBlink 1.2s steps(2, end) infinite}

.termOpt{display:grid; grid-template-columns: 44px 1fr; grid-template-rows:auto auto;
  gap:2px 10px; align-items:baseline;
  text-align:left;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(231,225,223,.10);
  background:rgba(20,24,28,.12);
  color:rgba(231,225,223,.86);
  cursor:pointer;
  position:relative; overflow:hidden;
  transition:transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.termOpt::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:2px; border-radius:99px;
  background:rgba(142,231,255,.0); opacity:.0; transform:scaleY(.65);
  transition:opacity .18s ease, transform .18s ease, background .18s ease}
.termOpt::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(142,231,255,.10), transparent);
  transform:translateX(-120%); transition:transform .45s ease; opacity:.8; pointer-events:none}

.termOpt__idx{grid-row:1 / span 2; align-self:center; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:rgba(231,225,223,.52); font-size:12px; letter-spacing:.16em}
.termOpt__name{font-weight:930; letter-spacing:.10em; font-size:12px}
.termOpt__meta{grid-column:2; color:rgba(231,225,223,.56); font-size:11px; letter-spacing:.10em}

.termOpt:hover{border-color:rgba(231,225,223,.18); box-shadow: 0 18px 50px rgba(0,0,0,.35)}
.termOpt:hover::after{transform:translateX(120%)}
.termOpt:active{transform:translateY(1px)}

.termOpt.isActive{border-color:rgba(142,231,255,.22); background:rgba(12,12,14,.26); box-shadow: inset 0 0 0 1px rgba(142,231,255,.10), 0 22px 70px rgba(0,0,0,.45)}
.termOpt.isActive::before{opacity:1; transform:scaleY(1); background:linear-gradient(180deg, rgba(142,231,255,.20), rgba(142,231,255,.75), rgba(142,231,255,.12))}
.termOpt:focus-visible{outline:2px solid rgba(142,231,255,.35); outline-offset:2px}

.terminal__hint{margin-top:12px; font-size:12px; color:rgba(231,225,223,.55)}

.labKeyword{display:none}

/* Monitor */
.monitor{border-radius:26px; overflow:hidden; display:flex; flex-direction:column; gap:10px}
.monitor__bezel{position:relative; border-radius:26px; overflow:hidden; border:1px solid rgba(231,225,223,.12);
  background:rgba(12,12,14,.46); backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
}
.monitor__bar{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(231,225,223,.10);
  background:linear-gradient(90deg, rgba(12,12,14,.72), rgba(12,12,14,.38))
}
.monitor__dots{display:flex; gap:6px}
.monitor__dots span{width:8px; height:8px; border-radius:50%; background:rgba(231,225,223,.22)}
.monitor__title{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.60)}
.monitor__stat{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(142,231,255,.72)}

/* Quick module rail (desktop only, fades in after scroll) */
.svcRail{position:absolute; right:12px; top:64px; z-index:8;
  display:flex; flex-direction:column; gap:10px;
  opacity:0; transform:translateY(6px);
  transition:opacity .28s ease, transform .28s ease;
  pointer-events:none;
}
.serviceslab.isRailOn .svcRail{opacity:1; transform:translateY(0); pointer-events:auto}
.svcRail__btn{width:40px; height:40px; border-radius:14px;
  border:1px solid rgba(231,225,223,.14);
  background:rgba(0,0,0,.22);
  color:rgba(231,225,223,.86);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  display:grid; place-items:center;
  cursor:pointer;
}
.svcRail__ic{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:800; letter-spacing:.06em}
.svcRail__btn.isActive{border-color:rgba(142,231,255,.26);
  box-shadow:0 0 0 2px rgba(142,231,255,.10) inset, 0 18px 70px rgba(0,0,0,.46)}
@media (max-width: 1023px){
  .svcRail{right:10px; top:58px; gap:8px}
  .svcRail__btn{width:34px; height:34px; border-radius:12px}
}
@media (max-width: 520px){
  /* mobile: horizontal mini-rail inside the monitor bezel */
  .svcRail{
    left:12px; right:12px; top:58px;
    flex-direction:row;
    justify-content:space-between;
    gap:8px;
    padding:8px;
    border-radius:16px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(231,225,223,.10);
    backdrop-filter: blur(10px);
  }
  .svcRail__btn{width:36px; height:36px; border-radius:12px}
}

.monitor__screen{position:relative; height:100%; min-height:360px; aspect-ratio: 16/10;}

.screenLoad{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start;
  padding:14px; pointer-events:none; opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .28s ease}
.screenLoad__bar{height:2px; width:0%; background:linear-gradient(90deg, rgba(142,231,255,.0), rgba(142,231,255,.75), rgba(142,231,255,.0)); border-radius:99px}
.screenLoad__txt{margin-left:10px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.monitor.isLoading .screenLoad{opacity:1; transform:translateY(0)}
.monitor.isLoading .screenLoad__bar{animation:loadBar .55s ease both}
@keyframes loadBar{from{width:0%}to{width:68%}}

.serviceslab .svc__media{position:absolute; inset:0; aspect-ratio:auto; max-height:none; height:100%; border:0}
.serviceslab .svc__frame img{filter:saturate(1.22) contrast(1.14) brightness(.94)}

.screenHUD{position:absolute; left:12px; right:12px; top:12px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.66);
  text-shadow:0 18px 60px rgba(0,0,0,.75)}
.screenHUD__left,.screenHUD__right{display:flex; align-items:center; gap:10px}
.pill{display:inline-flex; align-items:center; padding:6px 8px; border-radius:999px;
  border:1px solid rgba(231,225,223,.12);
  background:rgba(12,12,14,.38); backdrop-filter: blur(10px);
  color:rgba(231,225,223,.72); font-size:10px}

.readout{position:absolute; left:14px; right:14px; bottom:22px;
  border-radius:18px; border:1px solid rgba(231,225,223,.16);
  background:rgba(12,12,14,.64); backdrop-filter: blur(12px);
  padding:14px;
}
.readout__t{font-weight:950; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:rgba(231,225,223,.86); margin-bottom:8px}
.serviceslab .svc__how{margin:0 0 10px; color:rgba(231,225,223,.78)}
.readout__actions{margin-top:12px; display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap}

@media (min-width: 1024px){
  .labGrid{grid-template-columns: 0.95fr 1.05fr; gap:clamp(18px, 2.8vw, 34px)}
  .monitor__screen{min-height:520px}
  /* labKeyword removed to avoid overlap with section title */
}


/* --- Work/Cases: Production Pass Cards --- */
.passGrid{margin-top:14px; display:grid; grid-template-columns:1fr; gap:14px}

.pass{border-radius:22px; overflow:hidden;
  border:1px solid rgba(231,225,223,.12);
  background:rgba(20,24,28,.16);
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pass::after{content:""; position:absolute; inset:-2px; background:linear-gradient(90deg, transparent, rgba(142,231,255,.08), transparent);
  transform:translateX(-140%); transition:transform .7s ease; pointer-events:none}
.pass:hover{transform:translateY(-2px); border-color:rgba(231,225,223,.18); box-shadow: 0 38px 120px rgba(0,0,0,.58)}
.pass:hover::after{transform:translateX(140%)}

.pass__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 14px 10px;
  border-bottom:1px solid rgba(231,225,223,.08);
  background:linear-gradient(90deg, rgba(12,12,14,.26), rgba(12,12,14,.10))}
.pass__brand{font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.pass__flags{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.flag{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(231,225,223,.58);
  padding:6px 8px; border-radius:999px; border:1px solid rgba(231,225,223,.12); background:rgba(12,12,14,.22)}
.flag--live{color:rgba(142,231,255,.70); border-color:rgba(142,231,255,.18)}

.pass__media{display:block; position:relative; text-decoration:none}
.pass__media img{width:100%; height:260px; object-fit:cover; display:block; filter:brightness(.92) contrast(1.14) saturate(1.18)}
.pass__veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.66))}
.pass__code{position:absolute; right:12px; bottom:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:11px; letter-spacing:.22em; color:rgba(231,225,223,.64);
  padding:8px 10px; border-radius:12px;
  border:1px solid rgba(231,225,223,.12);
  background:rgba(12,12,14,.38); backdrop-filter: blur(10px);
}
.pass__code::before{content:""; display:block; height:10px; margin-bottom:6px;
  background:repeating-linear-gradient(90deg, rgba(231,225,223,.30) 0 2px, transparent 2px 5px);
  opacity:.75}

.pass__body{padding:14px}
.pass__name{font-weight:950; letter-spacing:.08em; text-transform:uppercase; font-size:13px; color:rgba(231,225,223,.90)}
.pass__meta{margin-top:6px; color:rgba(231,225,223,.62); letter-spacing:.06em}

.pass__badges{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.badge{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.70);
  padding:7px 9px; border-radius:999px; border:1px solid rgba(231,225,223,.12); background:rgba(12,12,14,.18)}

.pass__role{margin-top:12px; padding-top:12px; border-top:1px solid rgba(231,225,223,.08);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.pass__label{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.56)}
.pass__roleval{font-weight:900; color:rgba(231,225,223,.86)}

.pass__foot{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 14px 14px; border-top:1px solid rgba(231,225,223,.08);
  background:rgba(12,12,14,.18)}

@media (min-width: 768px){
  .passGrid{grid-template-columns:repeat(2,1fr)}
  .pass__media img{height:240px}
}
@media (min-width: 1280px){
  .passGrid{grid-template-columns:repeat(3,1fr)}
}

/* --- Trusted By --- */
.trusted{margin-top:10px}
.logoMarquee{margin-top:12px; border-radius:22px; overflow:hidden;
  border:1px solid rgba(231,225,223,.10);
  background:rgba(12,12,14,.14);
  backdrop-filter: blur(12px);
}
.logoMarquee__track{display:flex; gap:48px; width:max-content; align-items:center;
  animation:logoMove 36s linear infinite}
.logoMarquee:hover .logoMarquee__track{animation-play-state:paused}
.logoMarquee__row{display:flex; align-items:center; gap:18px; padding:16px 18px}
@keyframes logoMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .logoMarquee__track{animation:none}
}

.logo{display:flex; justify-content:center; align-items:center;
  padding:12px 18px; text-decoration:none;
  border-radius:18px;
  border:1px solid rgba(231,225,223,.06);
  background:rgba(12,12,14,.06);
  color:rgba(231,225,223,.70);
  opacity:.80;
  transition:opacity .22s ease, box-shadow .28s ease, border-color .28s ease, transform .22s ease;
  position:relative; overflow:hidden;
}
.logo img{max-width:150px; max-height:64px; width:auto; height:auto; object-fit:contain;
  opacity:.92;
  filter:grayscale(.58) saturate(.60) contrast(1.08);
  transition:opacity .22s ease, filter .28s ease;
}
.logo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(142,231,255,.08), transparent);
  transform:translateX(-120%);
  transition:transform .8s ease;
  pointer-events:none}
.logo:hover{opacity:1;
  border-color:rgba(142,231,255,.18);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  transform:translateY(-1px)}
.logo:hover::after{transform:translateX(120%)}
.logo:hover img{opacity:1; filter:grayscale(0) saturate(1) contrast(1.10)}

@media (min-width: 768px){
  .logo img{max-height:70px}
}
@media (min-width: 1280px){
  .logoMarquee__row{gap:20px}
}
.logo:focus-visible{outline:2px solid rgba(142,231,255,.35); outline-offset:3px}

.casesCta{margin-top:16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.casesCta .muted{max-width:72ch}

/* --- Trusted → Work transition --- */
#trusted{border-bottom:0; padding-bottom:50px}
.hudBridge{margin-top:-34px; padding:18px 0 10px;
  background:linear-gradient(180deg, rgba(12,12,14,0) 0%, rgba(12,12,14,.46) 55%, rgba(12,12,14,0) 100%);
}
.hudDivider{display:flex; align-items:center; justify-content:center; gap:14px}
.hudDivider__line{flex:1; height:1px;
  background:linear-gradient(90deg, rgba(231,225,223,.08), rgba(114,163,189,.18), rgba(122,78,90,.16), rgba(231,225,223,.08));
  opacity:.55}
.hudDivider__label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.58)}

#work{padding-top:56px}

/* --- WHY DROPIT --- */
.whyGrid{margin-top:14px; display:grid; grid-template-columns:1fr; gap:12px}
.why{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(12,12,14,.18);
  padding:16px; line-height:1.65}
.why__k{font-size:11px; letter-spacing:.20em; text-transform:uppercase; color:rgba(231,225,223,.62); margin-bottom:8px}
.why p{margin:0; color:rgba(231,225,223,.76)}
@media (min-width: 768px){
  .whyGrid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1280px){
  .whyGrid{grid-template-columns:repeat(4,1fr)}
}

/* --- PRODUCTION PROCESS --- */
.pipe{margin-top:14px; display:grid; grid-template-columns:1fr; gap:12px; position:relative}
.pipe__step{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(12,12,14,.16);
  padding:16px; position:relative; overflow:hidden}
.pipe__n{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:rgba(142,231,255,.72); letter-spacing:.18em}
.pipe__t{margin-top:6px; font-weight:950; letter-spacing:.12em; text-transform:uppercase}
.pipe__d{margin-top:8px; color:rgba(231,225,223,.68); line-height:1.6}
@media (min-width: 1024px){
  .pipe{grid-template-columns:repeat(4,1fr)}
  .pipe__step::after{content:""; position:absolute; right:-18px; top:48px; width:36px; height:1px;
    background:linear-gradient(90deg, rgba(231,225,223,.18), rgba(142,231,255,.18)); opacity:.75}
  .pipe__step:last-child::after{display:none}
}

/* --- CAPABILITIES --- */
.specGrid{margin-top:14px; display:grid; grid-template-columns:1fr; gap:12px}
.specPanel{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(12,12,14,.16);
  padding:16px}
.specPanel__h{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.62); margin-bottom:10px}
.specPanel ul{margin:0; padding-left:18px; color:rgba(231,225,223,.72); line-height:1.6}
.specPanel strong{color:rgba(231,225,223,.92)}
@media (min-width: 768px){
  .specGrid{grid-template-columns:repeat(2,1fr)}
}

/* --- FIT --- */
.fit{margin-top:14px; display:grid; grid-template-columns:1fr; gap:12px}
.fit__col{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(12,12,14,.16);
  padding:16px}
.fit__col--no{background:rgba(12,12,14,.10)}
.fit__h{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.62); margin-bottom:10px}
.fit ul{margin:0; padding-left:18px; color:rgba(231,225,223,.74); line-height:1.7}
@media (min-width: 768px){
  .fit{grid-template-columns:repeat(2,1fr)}
}

/* --- FAQ --- */
.faq{margin-top:14px; display:grid; gap:10px}
.faq__item{border:1px solid rgba(231,225,223,.12); border-radius:18px; background:rgba(12,12,14,.14); padding:12px 14px}
.faq__item summary{cursor:pointer; font-weight:850; letter-spacing:-.01em}
.faq__item[open]{background:rgba(12,12,14,.22)}
.faq__a{margin-top:10px; color:rgba(231,225,223,.70); line-height:1.7}

/* --- Contact Form --- */
.contact__layout{margin-top:14px; display:grid; gap:14px}
.reqForm{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(12,12,14,.16); padding:16px}
.fgrid{display:grid; grid-template-columns:1fr; gap:12px}
.frow{display:grid; gap:6px}
.frow--full{grid-column:1 / -1}
label, legend{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.62)}
input, select, textarea{width:100%; border-radius:14px; border:1px solid rgba(231,225,223,.12);
  background:rgba(11,13,12,.28); color:rgba(231,225,223,.90); padding:10px 12px; font:inherit}

/* Force dark dropdown menus where supported */
select{color-scheme:dark}
select option{background:#0A1022; color:rgba(234,240,255,.90)}

textarea{resize:vertical}
input:focus, select:focus, textarea:focus{outline:2px solid rgba(142,231,255,.20); outline-offset:2px}
fieldset{border:1px solid rgba(231,225,223,.10); border-radius:18px; padding:12px}
.checks{display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:8px}
.checks label{font-size:12px; letter-spacing:.06em; text-transform:none; color:rgba(231,225,223,.74); display:flex; gap:8px; align-items:center}
.factions{margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.contact__side .contact__grid{margin-top:0}

@media (min-width: 768px){
  .contact__layout{grid-template-columns: 1.2fr .8fr; align-items:start}
  .fgrid{grid-template-columns:repeat(2,1fr)}
}

/* --- Trust strip --- */
.trustStrip{border-top:1px solid rgba(231,225,223,.08); background:rgba(12,12,14,.10)}
.trustStrip__inner{padding:14px 0; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.trustPill{display:inline-flex; align-items:center; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(231,225,223,.10); background:rgba(12,12,14,.18);
  color:rgba(231,225,223,.68); font-size:12px; letter-spacing:.06em}

/* --- WHY (Production Pipeline / Signal Chain) --- */
.sigPipe{margin-top:14px; display:grid; grid-template-columns:1fr; gap:12px; position:relative}
.sigPipe__step{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(12,12,14,.16);
  padding:16px; position:relative; overflow:hidden;
  transition:border-color .28s ease, box-shadow .28s ease, transform .22s ease, color .22s ease}
.sigPipe__top{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.sigPipe__n{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:rgba(142,231,255,.78); letter-spacing:.18em}
.sigPipe__status{display:inline-flex; align-items:center; gap:8px; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.56)}
.sigDot{width:7px; height:7px; border-radius:50%; background:rgba(142,231,255,.20);
  box-shadow:0 0 0 2px rgba(142,231,255,.07)}
.sigPipe__t{font-weight:950; letter-spacing:.12em; text-transform:uppercase}
.sigPipe__d{margin:8px 0 0; color:rgba(231,225,223,.70); line-height:1.65}

/* subtle scan / tech sweep */
.sigPipe__step::marker{display:none}
.sigPipe__step::after{content:""; position:absolute; inset:-40% -50%;
  background:linear-gradient(90deg, transparent, rgba(142,231,255,.06), transparent);
  transform:translateX(-30%) rotate(-8deg);
  opacity:0; transition:opacity .35s ease}
.sigPipe__step:hover::after{opacity:1}

@media (min-width: 1024px){
  .sigPipe{grid-template-columns:repeat(4,1fr); align-items:stretch}
  .sigPipe__step{padding:18px}
  .sigPipe__step::before{content:""; position:absolute; right:-18px; top:48px; width:36px; height:1px;
    background:linear-gradient(90deg, rgba(231,225,223,.18), rgba(142,231,255,.16)); opacity:.55;
    transition:opacity .28s ease, filter .28s ease, background .28s ease}
  .sigPipe__step:last-child::before{display:none}
  .sigPipe__step:hover::before{opacity:1; filter:drop-shadow(0 0 10px rgba(142,231,255,.18));
    background:linear-gradient(90deg, rgba(142,231,255,.28), rgba(231,225,223,.22))}
}

.sigPipe__step:hover{border-color:rgba(142,231,255,.20);
  box-shadow: 0 18px 70px rgba(0,0,0,.46);
  transform:translateY(-1px)}
.sigPipe__step:hover .sigPipe__t{color:rgba(231,225,223,.96)}
.sigPipe__step:hover .sigPipe__d{color:rgba(231,225,223,.80)}
.sigPipe__step:hover .sigPipe__status{color:rgba(231,225,223,.70)}
.sigPipe__step:hover .sigDot{background:rgba(142,231,255,.34); box-shadow:0 0 0 2px rgba(142,231,255,.10), 0 0 18px rgba(142,231,255,.16)}

/* --- Production Process: animated data flow --- */
@media (min-width: 1024px){
  .pipe{position:relative}
  .pipe__flow{position:absolute; left:18px; right:18px; top:48px; height:1px;
    background:linear-gradient(90deg, rgba(231,225,223,.10), rgba(142,231,255,.14), rgba(231,225,223,.10));
    opacity:.55;
    box-shadow:0 0 18px rgba(142,231,255,.06);
    pointer-events:none;
    container-type:inline-size;
  }
  .pipe:hover .pipe__flow{opacity:.72}
  .pipe__pulse{position:absolute; top:-3px; left:0; width:7px; height:7px; border-radius:50%;
    background:rgba(142,231,255,.55);
    box-shadow: 0 0 0 2px rgba(142,231,255,.10), 0 0 18px rgba(142,231,255,.18);
    filter:blur(.1px);
    animation:pipePulseMove 10s ease-in-out infinite;
  }
  @keyframes pipePulseMove{
    0%{transform:translateX(0)}
    100%{transform:translateX(calc(100cqw - 7px))}
  }
  @supports not (width: 1cqw){
    .pipe__flow{container-type:normal}
    .pipe__pulse{transform:none; animation:pipePulseMoveLeft 10s ease-in-out infinite}
    @keyframes pipePulseMoveLeft{0%{left:0}100%{left:calc(100% - 7px)}}
  }

  .pipe__step{transition:border-color .28s ease, box-shadow .28s ease, transform .22s ease}
  .pipe__step:hover{border-color:rgba(142,231,255,.18); box-shadow:0 18px 70px rgba(0,0,0,.46); transform:translateY(-1px)}
  .pipe__step:hover .pipe__d{color:rgba(231,225,223,.78)}
  .pipe__step:hover::after{opacity:1; filter:drop-shadow(0 0 12px rgba(142,231,255,.14));
    background:linear-gradient(90deg, rgba(142,231,255,.24), rgba(231,225,223,.22))}
}

@media (prefers-reduced-motion: reduce){
  .pipe__pulse{animation:none !important}
}

/* --- System Capabilities: Spec Board / Rider --- */
.specBoard{margin-top:14px; border:1px solid rgba(231,225,223,.12); border-radius:24px;
  background:rgba(12,12,14,.14); overflow:hidden; position:relative}
.specBoard::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(800px 220px at 10% 0%, rgba(142,231,255,.07), transparent 60%),
    radial-gradient(700px 220px at 90% 10%, rgba(122,78,90,.08), transparent 55%),
    repeating-linear-gradient(90deg, rgba(231,225,223,.04) 0, rgba(231,225,223,.04) 1px, transparent 1px, transparent 18px);
  opacity:.55; pointer-events:none; mix-blend-mode:screen}
.specBoard__top{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border-bottom:1px solid rgba(231,225,223,.10); position:relative}
.specBoard__label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.specBoard__meta{display:flex; flex-wrap:wrap; gap:10px 10px; align-items:center}
.specBoard__meta .kv{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.46)}
.specBoard__meta .val{font-size:11px; letter-spacing:.10em; color:rgba(231,225,223,.74)}
.specBoard__meta .val--ok{color:rgba(142,231,255,.74)}

.specBoard__grid{display:grid; grid-template-columns:1fr; gap:12px; padding:14px}

.specModule{border:1px solid rgba(231,225,223,.12); border-radius:20px; background:rgba(12,12,14,.18);
  padding:14px; position:relative; overflow:hidden;
  transition:border-color .28s ease, box-shadow .28s ease, transform .22s ease}
.specModule:hover{border-color:rgba(142,231,255,.18); box-shadow:0 20px 70px rgba(0,0,0,.46); transform:translateY(-1px)}
.specModule__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.specModule__title{font-weight:950; letter-spacing:.14em; text-transform:uppercase}
.specModule__sep{height:1px; background:linear-gradient(90deg, rgba(231,225,223,.10), rgba(142,231,255,.10), rgba(231,225,223,.10)); opacity:.85; margin:10px 0 12px}

.specModule__kv{margin:0}
.specModule__kv .row{display:grid; grid-template-columns:120px 1fr; gap:10px; padding:7px 0}
.specModule__kv .row + .row{border-top:1px dashed rgba(231,225,223,.08)}
.specModule__kv dt{margin:0; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(231,225,223,.56)}
.specModule__kv dd{margin:0; color:rgba(231,225,223,.76); line-height:1.5}
.specModule__kv strong{color:rgba(231,225,223,.94)}

.tag{display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px;
  border:1px solid rgba(231,225,223,.12); background:rgba(12,12,14,.18);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.tag--ok{border-color:rgba(142,231,255,.18); color:rgba(142,231,255,.72)}
.tag--warn{border-color:rgba(122,78,90,.22); color:rgba(231,225,223,.70)}

@media (min-width: 768px){
  .specBoard__grid{grid-template-columns:repeat(2,1fr)}
  .specModule__kv .row{grid-template-columns:140px 1fr}
}

/* --- Project Compatibility (Fit) --- */
.compat{margin-top:14px; display:grid; grid-template-columns:1fr; gap:12px}
.compatPanel{border:1px solid rgba(231,225,223,.12); border-radius:22px; background:rgba(12,12,14,.16);
  padding:14px; position:relative; overflow:hidden;
  transition:border-color .28s ease, box-shadow .28s ease, transform .22s ease}
.compatPanel--no{background:linear-gradient(180deg, rgba(12,12,14,.14), rgba(122,78,90,.06))}
.compatPanel__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.compatPanel__title{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.compatPanel__status{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.compatPanel__status .kv{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.46)}
.compatPanel__sep{height:1px; background:linear-gradient(90deg, rgba(231,225,223,.10), rgba(142,231,255,.10), rgba(231,225,223,.10)); opacity:.85; margin:10px 0 12px}
.compatPanel--no .compatPanel__sep{background:linear-gradient(90deg, rgba(231,225,223,.10), rgba(122,78,90,.16), rgba(231,225,223,.10))}
.compatPanel__list{margin:0; padding-left:18px; color:rgba(231,225,223,.74); line-height:1.7}
.compatPanel:hover{border-color:rgba(142,231,255,.16); box-shadow:0 20px 70px rgba(0,0,0,.46); transform:translateY(-1px)}
.compatPanel--no:hover{border-color:rgba(122,78,90,.26)}

.compatNote{margin-top:12px; color:rgba(231,225,223,.66)}

@media (min-width: 768px){
  .compat{grid-template-columns:repeat(2,1fr)}
}

/* --- FAQ: Production knowledge base panel --- */
.faqPanel{margin-top:14px; border:1px solid rgba(231,225,223,.12); border-radius:24px;
  background:rgba(12,12,14,.14); overflow:hidden; position:relative}
.faqPanel::before{content:""; position:absolute; inset:0;
  background:radial-gradient(700px 200px at 12% 0%, rgba(142,231,255,.06), transparent 60%);
  opacity:.55; pointer-events:none}

.faqItem{border-bottom:1px solid rgba(231,225,223,.08)}
.faqItem:last-child{border-bottom:0}
.faqItem summary{list-style:none; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:14px 16px; cursor:pointer; position:relative}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem__sys{display:inline-flex; align-items:center; gap:10px}
.faqItem__idx{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:rgba(142,231,255,.78); letter-spacing:.18em}
.faqItem__label{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.52)}
.faqItem__q{font-weight:900; color:rgba(231,225,223,.82)}
.faqItem__chev{width:10px; height:10px; border-right:1px solid rgba(231,225,223,.48);
  border-bottom:1px solid rgba(231,225,223,.48); transform:rotate(45deg);
  opacity:.65; transition:transform .22s ease, opacity .22s ease, border-color .22s ease}

.faqItem:focus-within summary{outline:2px solid rgba(142,231,255,.18); outline-offset:-2px}
.faqItem[open] summary{background:rgba(12,12,14,.20)}
.faqItem[open] .faqItem__chev{transform:rotate(-135deg); opacity:.9; border-color:rgba(142,231,255,.38)}

.faqItem__a{padding:0 16px 14px; color:rgba(231,225,223,.70); line-height:1.7;
  border-top:1px dashed rgba(231,225,223,.10)}
.faqNote{margin-top:12px; color:rgba(231,225,223,.66)}

/* --- Contact: WhatsApp-first module --- */
.btn--ghost{background:rgba(12,12,14,.10); border-color:rgba(231,225,223,.12); color:rgba(231,225,223,.74)}
.btn--ghost:hover{border-color:rgba(142,231,255,.18)}

.waModule{margin-top:14px; border:1px solid rgba(231,225,223,.12); border-radius:24px;
  background:rgba(12,12,14,.16); padding:16px; position:relative; overflow:hidden}
.waModule::before{content:""; position:absolute; inset:0;
  background:radial-gradient(900px 220px at 20% 0%, rgba(142,231,255,.09), transparent 60%),
    radial-gradient(700px 220px at 90% 20%, rgba(122,78,90,.09), transparent 55%);
  opacity:.55; pointer-events:none}
.waModule__top{display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative}
.waModule__label{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.62)}

.btn--wa{width:100%; margin-top:12px; padding:14px 16px; font-weight:950; letter-spacing:.10em;
  justify-content:space-between; box-shadow:0 24px 90px rgba(0,0,0,.55)}
.btn--wa::before{content:"WA"; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:11px; letter-spacing:.22em; opacity:.85}

.waModule__tpl{margin-top:12px; border:1px solid rgba(231,225,223,.10); border-radius:18px; background:rgba(12,12,14,.12); overflow:hidden; position:relative}
.waModule__tplHead{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-bottom:1px solid rgba(231,225,223,.08)}
.waTemplate{margin:0; padding:12px; color:rgba(231,225,223,.74); line-height:1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px; white-space:pre-wrap}

.contactAltLabel{margin-top:14px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.62)}
.reqForm--secondary{background:rgba(12,12,14,.10); border-color:rgba(231,225,223,.10)}
.waModule__tplHead .kv{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(231,225,223,.46)}
/*
  DROPIT Redesign – Sections 06–11 (CSS-only motion kit)
  ------------------------------------------------------
  Goals:
  - Avoid repetitive "card" styling; focus on section-level systems.
  - Includes: diagonal cuts, full-bleed media masks, subtle light sweeps,
    cable-run SVG motif, cue stack interactions, blueprint grid overlays,
    comms-channel layout, WhatsApp module hierarchy.
  - Respects prefers-reduced-motion.

  Expected markup (flexible):
    <section class="dr-section dr-section--06">…</section>
    <section class="dr-section dr-section--07">…</section>
    …

  Optional helper elements/classes used below:
    .dr-wrap, .dr-kicker, .dr-title, .dr-subtitle, .dr-media,
    .dr-media__img, .dr-media__mask, .dr-cue-stack, .dr-cue,
    .dr-blueprint, .dr-comms, .dr-wa
*/

:root{
  --dr-bg-0:#070A12;
  --dr-bg-1:#0B1020;
  --dr-ink-0:#EAF0FF;
  --dr-ink-1:rgba(234,240,255,.78);
  --dr-ink-2:rgba(234,240,255,.55);

  --dr-accent:#79B7FF;
  --dr-accent-2:#A2FFCC;
  --dr-hot:#FF4FD8;
  --dr-warn:#FFB86B;

  --dr-line:rgba(234,240,255,.12);
  --dr-line-2:rgba(234,240,255,.08);

  --dr-r0:12px;
  --dr-r1:18px;
  --dr-r2:28px;

  --dr-shadow: 0 18px 60px rgba(0,0,0,.55);
  --dr-shadow-soft: 0 18px 60px rgba(0,0,0,.35);

  --dr-ease: cubic-bezier(.2,.8,.2,1);
  --dr-dur-1: 260ms;
  --dr-dur-2: 520ms;
  --dr-dur-3: 900ms;

  --dr-grid: 24px;
  --dr-cut: clamp(18px, 3vw, 38px);
}

/* Base section scaffold */
.dr-section{
  position:relative;
  color:var(--dr-ink-0);
  background:linear-gradient(180deg, var(--dr-bg-0), var(--dr-bg-1));
  overflow:hidden;
}

.dr-wrap{
  width:min(1120px, calc(100% - 2*clamp(18px, 4vw, 42px)));
  margin-inline:auto;
  padding:clamp(52px, 7vw, 96px) 0;
  position:relative;
  z-index:2;
}

.dr-kicker{
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--dr-ink-2);
}

.dr-title{
  font-size:clamp(28px, 3.6vw, 52px);
  line-height:1.05;
  margin:.35em 0 .25em;
}

.dr-subtitle{
  font-size:clamp(15px, 1.4vw, 18px);
  line-height:1.55;
  color:var(--dr-ink-1);
  max-width:68ch;
}

/* Subtle light sweep utility (section-level, not card-level) */
.dr-sweep{
  position:relative;
  isolation:isolate;
}
.dr-sweep::after{
  content:"";
  position:absolute;
  inset:-30% -60%;
  background:
    linear-gradient(110deg,
      transparent 0%,
      rgba(121,183,255,.0) 35%,
      rgba(121,183,255,.22) 50%,
      rgba(162,255,204,.16) 56%,
      rgba(121,183,255,.0) 65%,
      transparent 100%);
  transform:translateX(-40%) rotate(-6deg);
  mix-blend-mode:screen;
  pointer-events:none;
  opacity:.55;
  filter:blur(0.2px);
  animation:drSweep 8.5s var(--dr-ease) infinite;
}
@keyframes drSweep{
  0%{ transform:translateX(-55%) rotate(-6deg); opacity:.0; }
  9%{ opacity:.35; }
  45%{ opacity:.55; }
  60%{ opacity:.25; }
  100%{ transform:translateX(55%) rotate(-6deg); opacity:.0; }
}

/* Full-bleed media mask system */
.dr-media{
  position:relative;
  border-radius:var(--dr-r2);
  overflow:hidden;
  box-shadow:var(--dr-shadow-soft);
  background:rgba(255,255,255,.02);
}

.dr-media__img,
.dr-media img,
.dr-media video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.02);
}

/* Mask overlay: diagonal + vignette + subtle grain */
.dr-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(140deg, rgba(0,0,0,.55) 0%, transparent 42%, rgba(0,0,0,.48) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
  opacity:.95;
  pointer-events:none;
}

/* Diagonal cut wrapper (applies to entire section blocks) */
.dr-diagonal{
  position:relative;
  border-top:1px solid var(--dr-line-2);
  border-bottom:1px solid var(--dr-line-2);
}
.dr-diagonal::before,
.dr-diagonal::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:var(--dr-cut);
  background:inherit;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.35));
  z-index:1;
}
.dr-diagonal::before{
  top:calc(-1*var(--dr-cut));
  clip-path:polygon(0 100%, 100% 0, 100% 100%, 0 100%);
}
.dr-diagonal::after{
  bottom:calc(-1*var(--dr-cut));
  clip-path:polygon(0 0, 100% 0, 100% 0, 0 100%);
}

/* ---------------------------------------------------------
   SECTION 06 — Cable-run / signal routing (SVG motif)
   --------------------------------------------------------- */
.dr-section--06{
  background:
    radial-gradient(90% 120% at 15% 20%, rgba(121,183,255,.22), transparent 60%),
    radial-gradient(80% 120% at 90% 75%, rgba(162,255,204,.14), transparent 60%),
    linear-gradient(180deg, #060915, #090E20);
}

/* Crew playbook background (full-bleed backstage image) */
.crewPlaybookBg{position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; opacity:.28}
.crewPlaybookBg img{width:100%; height:100%; object-fit:cover; filter:saturate(.85) contrast(1.12) blur(.2px); transform:scale(1.06)}

.dr-section--06 .dr-wrap.crewPlaybook{position:relative; z-index:2;
  display:grid; grid-template-columns:1fr; gap:16px; align-items:start}

.crewPlaybook__head{max-width:68ch}

.crewPlaybook__board{border-radius:calc(var(--dr-r2) + 2px);
  border:1px solid rgba(234,240,255,.14);
  background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.18));
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
  overflow:hidden;
}
.crewPlaybook__boardTop{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid rgba(234,240,255,.10);
  background:rgba(12,12,14,.24)}
.crewPlaybook__stamp{font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(121,183,255,.24);
  color:rgba(121,183,255,.78);
  background:rgba(0,0,0,.22)}
.crewPlaybook__meta{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(234,240,255,.56)}

.crewChecklist{list-style:none; margin:0; padding:10px 10px 12px; display:grid; gap:10px}
.crewChecklist__item{display:grid; grid-template-columns:52px 1fr; gap:12px; align-items:start;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid rgba(234,240,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  position:relative;
}
.crewChecklist__item::before{content:""; position:absolute; left:14px; top:14px; width:12px; height:12px; border-radius:3px;
  border:1px solid rgba(162,255,204,.35); background:rgba(162,255,204,.08);
  box-shadow:0 0 0 3px rgba(162,255,204,.08);
}
.crewChecklist__n{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.22em; color:rgba(234,240,255,.72); padding-left:20px}
.crewChecklist__t{font-weight:950; letter-spacing:.08em; text-transform:uppercase}
.crewChecklist__k{margin-top:4px; font-size:12px; letter-spacing:.04em; color:rgba(234,240,255,.62)}
.crewChecklist__d{margin-top:8px; color:rgba(234,240,255,.76); line-height:1.6}

@media (min-width: 900px){
  .dr-section--06 .dr-wrap.crewPlaybook{grid-template-columns: .95fr 1.05fr; align-items:start}
  .crewPlaybook__board{align-self:start}
  .crewChecklist{grid-template-columns:1fr}
}

/* Cable motif as data-uri SVG (thin lines + nodes) */
.dr-section--06::before{
  content:"";
  position:absolute;
  inset:-60px -40px;
  opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='60%25'%3E%3Cstop offset='0%25' stop-color='%2379B7FF' stop-opacity='.38'/%3E%3Cstop offset='100%25' stop-color='%2379B7FF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%23EAF0FF' stroke-opacity='.18' stroke-width='1.25'%3E%3Cpath d='M-20,120 C140,40 320,40 480,140 S800,280 980,190 1210,60 1260,90'/%3E%3Cpath d='M-30,560 C160,640 310,520 470,460 650,390 760,520 900,530 1020,540 1130,460 1240,430'/%3E%3Cpath d='M90,820 C180,640 320,620 420,520 560,380 640,420 740,340 900,200 1010,330 1120,210'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='480' cy='140' r='9' fill='url(%23g)'/%3E%3Ccircle cx='470' cy='460' r='10' fill='url(%23g)'/%3E%3Ccircle cx='740' cy='340' r='10' fill='url(%23g)'/%3E%3Ccircle cx='980' cy='190' r='9' fill='url(%23g)'/%3E%3Ccircle cx='900' cy='530' r='9' fill='url(%23g)'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
  transform:rotate(-2deg) scale(1.03);
  pointer-events:none;
}

.dr-section--06 .dr-wrap{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:clamp(18px, 3vw, 38px);
  align-items:center;
}

/* Override for the crew playbook redesign */
.dr-section--06 .dr-wrap.crewPlaybook{grid-template-columns:1fr; align-items:start; gap:16px}

.dr-section--06 .dr-media{
  min-height:clamp(260px, 36vw, 440px);
  border-radius:calc(var(--dr-r2) + 10px);
}

/* Routing legend (not cardy): inline labels with connectors */
.dr-route-legend{
  display:grid;
  gap:12px;
  margin-top:22px;
}
.dr-route{
  display:grid;
  grid-template-columns: 14px 1fr;
  gap:12px;
  align-items:start;
  padding:10px 0;
  border-bottom:1px dashed rgba(234,240,255,.14);
}
.dr-route:last-child{ border-bottom:0; }
.dr-route__dot{
  width:10px; height:10px;
  margin-top:6px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(121,183,255,.85), rgba(121,183,255,.25));
  box-shadow:0 0 0 3px rgba(121,183,255,.14), 0 10px 22px rgba(0,0,0,.35);
}
.dr-route__title{
  font-weight:650;
  letter-spacing:.01em;
}
.dr-route__meta{
  font-size:13px;
  color:var(--dr-ink-2);
  margin-top:4px;
  line-height:1.45;
}

@media (max-width: 900px){
  .dr-section--06 .dr-wrap{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   SECTION 07 — Cue stack interactions (hover/active)
   --------------------------------------------------------- */
.dr-section--07{
  background:
    radial-gradient(120% 120% at 20% 30%, rgba(255,79,216,.13), transparent 55%),
    radial-gradient(110% 140% at 80% 70%, rgba(121,183,255,.14), transparent 58%),
    linear-gradient(180deg, #070915, #0A1022);
}

/* Timeline (replaces right-side output/inspector) */
.dr-timeline{margin-top:28px; position:relative}
.dr-timeline__list{list-style:none; padding:0; margin:0; display:grid; gap:12px}

.dr-timelineStep{display:grid; grid-template-columns: 28px 1fr; gap:12px; align-items:start}
.dr-timelineStep__node{position:relative; padding-top:6px}
.dr-timelineStep__dot{display:block; width:12px; height:12px; border-radius:50%;
  background:rgba(162,255,204,.18);
  border:1px solid rgba(162,255,204,.38);
  box-shadow:0 0 0 3px rgba(162,255,204,.10), 0 0 24px rgba(162,255,204,.10);
}
.dr-timelineStep__line{position:absolute; left:5.5px; top:22px; bottom:-18px; width:1px;
  background:linear-gradient(180deg, rgba(121,183,255,.45), rgba(234,240,255,.08));
  opacity:.9;
}

.dr-timelineStep__body{border-radius:var(--dr-r2);
  border:1px solid rgba(234,240,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow: var(--dr-shadow-soft);
  padding:14px 14px 12px;
  position:relative;
  overflow:hidden;
}

.dr-timelineStep__body::before{content:""; position:absolute; inset:-1px;
  border-radius:inherit;
  background:linear-gradient(120deg, transparent 0%, rgba(121,183,255,.12) 52%, transparent 74%);
  opacity:0;
  transform:translateX(-12%);
  transition:opacity var(--dr-dur-1) var(--dr-ease), transform var(--dr-dur-2) var(--dr-ease);
  pointer-events:none;
}
.dr-timelineStep:hover .dr-timelineStep__body{border-color:rgba(121,183,255,.24)}
.dr-timelineStep:hover .dr-timelineStep__body::before{opacity:.9; transform:translateX(10%)}
.dr-timelineStep:hover .dr-timelineStep__dot{background:rgba(162,255,204,.28);
  box-shadow:0 0 0 3px rgba(162,255,204,.12), 0 0 30px rgba(162,255,204,.14)}

.dr-timelineStep__top{display:flex; align-items:baseline; gap:10px}
.dr-timelineStep__n{font-variant-numeric:tabular-nums; letter-spacing:.16em;
  color:rgba(234,240,255,.70)}
.dr-timelineStep__title{font-weight:900; letter-spacing:.06em; text-transform:uppercase}
.dr-timelineStep__desc{margin:10px 0 0; color:rgba(234,240,255,.76); line-height:1.65}
.dr-timelineStep__hint{margin-top:10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(234,240,255,.54)}

@media (min-width: 1024px){
  .dr-timeline__list{grid-template-columns:repeat(4,1fr); gap:14px}
  .dr-timelineStep{grid-template-columns:1fr; gap:10px}
  .dr-timelineStep__node{padding-top:0; height:26px}
  .dr-timelineStep__dot{margin:0 auto}
  .dr-timelineStep__line{display:none}
  .dr-timeline{padding-top:16px}
  .dr-timeline::before{content:""; position:absolute; left:0; right:0; top:22px; height:1px;
    background:linear-gradient(90deg, rgba(234,240,255,.10), rgba(121,183,255,.26), rgba(234,240,255,.10));
    opacity:.75;
    box-shadow:0 0 18px rgba(121,183,255,.08);
  }
  .dr-timeline::after{content:""; position:absolute; top:19px; left:0; right:0; height:7px;
    background:radial-gradient(circle, rgba(162,255,204,.60) 0 2px, transparent 3px);
    background-size:calc(100%/4) 7px;
    background-position:calc(100%/8) 0;
    opacity:.18;
    pointer-events:none;
  }
}

/* Production Pipeline (timeline + detail panel) */
.dr-trustLine{margin-top:10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(234,240,255,.60)}

.dr-processLayout{margin-top:28px; display:grid; grid-template-columns:1fr; gap:14px; align-items:start}

.dr-vTimeline{position:relative; border-radius:var(--dr-r2);
  border:1px solid rgba(234,240,255,.12);
  background:rgba(0,0,0,.18);
  box-shadow: var(--dr-shadow-soft);
  padding:14px 12px;
}
.dr-vTimeline__rail{position:absolute; left:26px; top:18px; bottom:18px; width:1px;
  background:linear-gradient(180deg, rgba(121,183,255,.55), rgba(234,240,255,.10));
  opacity:.9;
}

.dr-vStep{width:100%; text-align:left; cursor:pointer;
  display:grid; grid-template-columns:22px 46px 1fr; grid-template-rows:auto auto;
  column-gap:12px; row-gap:2px;
  padding:12px 10px;
  border-radius:18px;
  border:1px solid rgba(234,240,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  color:rgba(234,240,255,.86);
  transition: transform var(--dr-dur-2) var(--dr-ease), border-color var(--dr-dur-1) var(--dr-ease), background var(--dr-dur-1) var(--dr-ease);
}
.dr-vStep + .dr-vStep{margin-top:10px}

.dr-vStep__dot{grid-column:1; grid-row:1 / span 2; align-self:start; justify-self:center; margin-top:4px;
  width:12px; height:12px; border-radius:50%;
  background:rgba(121,183,255,.12);
  border:1px solid rgba(121,183,255,.32);
  box-shadow:0 0 0 3px rgba(121,183,255,.08);
}
.dr-vStep__n{grid-column:2; grid-row:1; letter-spacing:.18em; font-variant-numeric:tabular-nums;
  color:rgba(234,240,255,.70)}
.dr-vStep__title{grid-column:3; grid-row:1; font-weight:900; letter-spacing:.06em; text-transform:uppercase}
.dr-vStep__keys{grid-column:2 / span 2; grid-row:2;
  color:rgba(234,240,255,.62); font-size:12px; letter-spacing:.04em}

.dr-vStep:hover{transform:translateY(-1px); border-color:rgba(121,183,255,.22)}
.dr-vStep.is-active,
.dr-vStep[aria-current="true"]{
  border-color:rgba(162,255,204,.38);
  background:linear-gradient(180deg, rgba(162,255,204,.10), rgba(255,255,255,.015));
}
.dr-vStep.is-active .dr-vStep__dot,
.dr-vStep[aria-current="true"] .dr-vStep__dot{
  background:rgba(162,255,204,.22);
  border-color:rgba(162,255,204,.45);
  box-shadow:0 0 0 3px rgba(162,255,204,.10), 0 0 24px rgba(162,255,204,.10);
}

.dr-processPanel{min-height:320px}

.dr-processCard{border-radius:var(--dr-r2);
  border:1px solid rgba(234,240,255,.12);
  background:rgba(0,0,0,.18);
  box-shadow: var(--dr-shadow-soft);
  padding:14px;
  overflow:hidden;
}
.dr-processCard__top{display:flex; align-items:baseline; gap:12px}
.dr-processCard__sys{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color:rgba(162,255,204,.78); letter-spacing:.22em}
.dr-processCard__title{margin:0; font-size:16px; font-weight:950; letter-spacing:.08em; text-transform:uppercase}
.dr-processCard__desc{margin:10px 0 0; color:rgba(234,240,255,.76); line-height:1.65}

.dr-processCard__out{margin-top:12px; padding-top:12px; border-top:1px dashed rgba(234,240,255,.12)}
.dr-processCard__outLabel{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(234,240,255,.56)}
.dr-processCard__outItems{margin-top:6px; color:rgba(234,240,255,.80)}

.dr-processCard__media{margin:14px 0 0; border-radius:18px; overflow:hidden;
  border:1px solid rgba(234,240,255,.10);
  background:rgba(255,255,255,.02);
  aspect-ratio: 16/10;
}
.dr-processCard__media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.03)}

@media (min-width: 900px){
  .dr-processLayout{grid-template-columns: .86fr 1.14fr; gap:18px}
  .dr-processPanel{min-height:420px}
}

/* Cue stack: stacked, tactile, not generic cards */
.dr-cue-stack{
  margin-top:28px;
  display:grid;
  gap:10px;
  perspective:1000px;
}

.dr-cue{
  position:relative;
  display:grid;
  grid-template-columns: 92px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-radius:var(--dr-r1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  border:1px solid rgba(234,240,255,.11);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  transform: translateZ(0);
  transition:
    transform var(--dr-dur-2) var(--dr-ease),
    border-color var(--dr-dur-1) var(--dr-ease),
    background var(--dr-dur-1) var(--dr-ease);
}

.dr-cue::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(120deg, transparent 0%, rgba(121,183,255,.16) 48%, transparent 70%);
  opacity:0;
  transform:translateX(-12%);
  transition:opacity var(--dr-dur-1) var(--dr-ease), transform var(--dr-dur-2) var(--dr-ease);
  pointer-events:none;
}

.dr-cue:hover{
  transform: translateY(-4px) rotateX(2deg);
  border-color:rgba(121,183,255,.24);
}
.dr-cue:hover::before{
  opacity:.85;
  transform:translateX(10%);
}

/* Active cue: cut-corner + glowing edge */
.dr-cue[aria-current="true"],
.dr-cue.is-active{
  border-color:rgba(162,255,204,.38);
  background:
    linear-gradient(180deg, rgba(162,255,204,.09), rgba(255,255,255,.018));
}
.dr-cue[aria-current="true"]::after,
.dr-cue.is-active::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  border:1px solid rgba(162,255,204,.35);
  box-shadow:0 0 0 2px rgba(162,255,204,.10) inset, 0 0 26px rgba(162,255,204,.12);
  pointer-events:none;
}

.dr-cue__time{
  font-variant-numeric: tabular-nums;
  letter-spacing:.04em;
  color:rgba(234,240,255,.72);
}
.dr-cue__name{ font-weight:650; }
.dr-cue__desc{ color:var(--dr-ink-2); font-size:13px; margin-top:2px; }
.dr-cue__tag{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(234,240,255,.14);
  color:rgba(234,240,255,.78);
  background:rgba(0,0,0,.18);
}

@media (max-width: 760px){
  .dr-cue{ grid-template-columns: 82px 1fr; grid-auto-flow:row; }
  .dr-cue__tag{ justify-self:start; }
}

/* ---------------------------------------------------------
   SECTION 08 — Blueprint grid overlay (planning + measures)
   --------------------------------------------------------- */
.dr-section--08{
  background:
    radial-gradient(120% 140% at 50% 10%, rgba(121,183,255,.16), transparent 56%),
    linear-gradient(180deg, #060A14, #070D1B);
}

/* Blueprint overlay grid (layered, subtle) */
.dr-section--08::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(121,183,255,.06) 1px, transparent 1px) 0 0 / var(--dr-grid) var(--dr-grid),
    linear-gradient(90deg, rgba(121,183,255,.05) 1px, transparent 1px) 0 0 / var(--dr-grid) var(--dr-grid),
    radial-gradient(1200px 800px at 70% 20%, rgba(162,255,204,.06), transparent 60%);
  opacity:.95;
  pointer-events:none;
}

/* "Dimension" rails */
.dr-blueprint{
  margin-top:26px;
  border-radius:var(--dr-r2);
  padding:20px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(121,183,255,.14);
  box-shadow:var(--dr-shadow-soft);
  position:relative;
  overflow:hidden;
}

.dr-blueprint::after{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(120deg, rgba(121,183,255,.14), transparent 35%, rgba(162,255,204,.08) 70%, transparent 100%);
  opacity:.22;
  transform:translateX(-12%);
  pointer-events:none;
}

.dr-measure{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

.dr-measure__row{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:14px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px dashed rgba(121,183,255,.18);
}
.dr-measure__row:last-child{ border-bottom:0; }

.dr-measure__label{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(234,240,255,.68);
}
.dr-measure__rail{
  height:10px;
  border-radius:999px;
  background:
    linear-gradient(90deg, rgba(121,183,255,.35), rgba(162,255,204,.22));
  position:relative;
  overflow:hidden;
}
.dr-measure__rail::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.0) 0 14px,
      rgba(0,0,0,.35) 14px 15px);
  opacity:.35;
}

@media (max-width: 720px){
  .dr-measure__row{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   SECTION 09 — Comms channel layout (intercom + roles)
   --------------------------------------------------------- */
.dr-section--09{
  background:
    radial-gradient(100% 140% at 30% 20%, rgba(255,184,107,.12), transparent 58%),
    radial-gradient(90% 120% at 86% 74%, rgba(121,183,255,.12), transparent 60%),
    linear-gradient(180deg, #070A12, #090F1E);
}

.dr-comms{
  margin-top:26px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

/* Channel column = header rail + message stream */
.dr-channel{
  border-radius:var(--dr-r2);
  border:1px solid rgba(234,240,255,.12);
  background:rgba(255,255,255,.02);
  overflow:hidden;
  box-shadow:var(--dr-shadow-soft);
}

.dr-channel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-bottom:1px solid rgba(234,240,255,.09);
}

.dr-channel__title{
  font-weight:700;
  letter-spacing:.01em;
}

.dr-channel__meta{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(234,240,255,.62);
}

.dr-channel__body{
  padding:14px 14px 16px;
  display:grid;
  gap:10px;
}

/* Comms lines: left rail + waveform dot; avoids "chat bubble" look */
.dr-line{
  display:grid;
  grid-template-columns: 12px 1fr;
  gap:12px;
  align-items:start;
}
.dr-line__rail{
  width:12px;
  height:100%;
  border-radius:999px;
  background:rgba(121,183,255,.12);
  position:relative;
  overflow:hidden;
}
.dr-line__rail::after{
  content:"";
  position:absolute;
  left:50%;
  top:12px;
  width:6px;
  height:6px;
  border-radius:999px;
  transform:translateX(-50%);
  background:rgba(162,255,204,.65);
  box-shadow:0 0 0 3px rgba(162,255,204,.10);
}
.dr-line__txt{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(234,240,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(234,240,255,.82);
}
.dr-line__who{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(234,240,255,.55);
  margin-bottom:4px;
}

/* Priority line variant */
.dr-line.is-priority .dr-line__rail{ background:rgba(255,184,107,.14); }
.dr-line.is-priority .dr-line__rail::after{ background:rgba(255,184,107,.72); box-shadow:0 0 0 3px rgba(255,184,107,.10); }
.dr-line.is-priority .dr-line__txt{ border-color:rgba(255,184,107,.22); }

@media (max-width: 920px){
  .dr-comms{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   SECTION 10 — WhatsApp module hierarchy (modules + states)
   --------------------------------------------------------- */
.dr-section--10{
  background:
    radial-gradient(110% 140% at 22% 20%, rgba(162,255,204,.12), transparent 60%),
    radial-gradient(100% 140% at 82% 70%, rgba(121,183,255,.10), transparent 60%),
    linear-gradient(180deg, #060A13, #081023);
}

/* WhatsApp-like module layout WITHOUT mimicking bubbles too literally.
   Hierarchy: app shell > thread list > active thread > message modules.
*/
.dr-wa{
  margin-top:26px;
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:18px;
}

.dr-wa__pane{
  border-radius:var(--dr-r2);
  border:1px solid rgba(234,240,255,.12);
  background:rgba(255,255,255,.02);
  box-shadow:var(--dr-shadow-soft);
  overflow:hidden;
}

.dr-wa__pane--threads{
  display:grid;
  grid-template-rows: auto 1fr;
}

.dr-wa__topbar{
  padding:14px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border-bottom:1px solid rgba(234,240,255,.09);
}

.dr-wa__search{
  margin:12px 12px 0;
  border-radius:999px;
  border:1px solid rgba(234,240,255,.10);
  padding:10px 12px;
  background:rgba(0,0,0,.22);
  color:rgba(234,240,255,.80);
}

.dr-wa__threads{
  padding:12px;
  display:grid;
  gap:8px;
}

/* Thread row: diagonal notch to signal "module" state */
.dr-thread{
  display:grid;
  grid-template-columns: 34px 1fr auto;
  gap:12px;
  align-items:center;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(234,240,255,.10);
  background:rgba(0,0,0,.16);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: transform var(--dr-dur-1) var(--dr-ease), border-color var(--dr-dur-1) var(--dr-ease);
}

.dr-thread:hover{ transform:translateY(-2px); border-color:rgba(121,183,255,.22); }
.dr-thread.is-active,
.dr-thread[aria-current="true"]{ border-color:rgba(162,255,204,.32); background:rgba(162,255,204,.06); }

.dr-thread__avatar{
  width:34px; height:34px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(162,255,204,.65), rgba(121,183,255,.18));
  box-shadow:0 0 0 3px rgba(121,183,255,.08);
}

.dr-thread__name{ font-weight:700; }
.dr-thread__snip{ font-size:12.5px; color:rgba(234,240,255,.60); margin-top:2px; }
.dr-thread__badge{
  font-variant-numeric: tabular-nums;
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 7px;
  border-radius:999px;
  background:rgba(162,255,204,.16);
  border:1px solid rgba(162,255,204,.26);
  color:rgba(234,240,255,.82);
  font-size:12px;
}

/* Active thread pane */
.dr-wa__pane--chat{
  display:grid;
  grid-template-rows: auto 1fr auto;
}

.dr-wa__messages{
  padding:14px;
  display:grid;
  gap:10px;
  background:
    radial-gradient(120% 140% at 60% 0%, rgba(121,183,255,.07), transparent 62%),
    repeating-linear-gradient(0deg, rgba(234,240,255,.02) 0 1px, transparent 1px 7px);
}

/* Message module = label rail + content block */
.dr-msg{
  display:grid;
  grid-template-columns: 10px 1fr;
  gap:12px;
  align-items:start;
}

.dr-msg__rail{
  width:10px;
  border-radius:999px;
  background:rgba(121,183,255,.14);
  position:relative;
}

.dr-msg__rail::after{
  content:"";
  position:absolute;
  left:50%;
  top:10px;
  transform:translateX(-50%);
  width:6px; height:6px;
  border-radius:999px;
  background:rgba(121,183,255,.55);
}

.dr-msg__body{
  border-radius:16px;
  padding:10px 12px;
  border:1px solid rgba(234,240,255,.10);
  background:rgba(0,0,0,.18);
}

.dr-msg__meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(234,240,255,.55);
  margin-bottom:6px;
}

.dr-msg.is-system .dr-msg__rail{ background:rgba(255,184,107,.14); }
.dr-msg.is-system .dr-msg__rail::after{ background:rgba(255,184,107,.72); }
.dr-msg.is-system .dr-msg__body{ border-color:rgba(255,184,107,.20); }

.dr-wa__composer{
  padding:12px;
  border-top:1px solid rgba(234,240,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
}

.dr-wa__input{
  width:100%;
  border-radius:999px;
  padding:12px 14px;
  border:1px solid rgba(234,240,255,.12);
  background:rgba(0,0,0,.22);
  color:rgba(234,240,255,.82);
}

@media (max-width: 980px){
  .dr-wa{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   SECTION 11 — Closing: diagonal cut + full-bleed media + sweep
   --------------------------------------------------------- */
.dr-section--11{
  background:
    radial-gradient(100% 140% at 20% 30%, rgba(255,79,216,.11), transparent 58%),
    radial-gradient(120% 140% at 86% 70%, rgba(162,255,204,.10), transparent 60%),
    linear-gradient(180deg, #050812, #070C19);
}

.dr-section--11 .dr-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:clamp(18px, 3vw, 38px);
  align-items:center;
}

.dr-section--11 .dr-media,
.contactCockpit{
  min-height:clamp(260px, 34vw, 420px);
  transform: translateZ(0);
}

/* A more pronounced diagonal cut on the media itself */
.dr-section--11 .dr-media,
.contactCockpit{
  clip-path:polygon(0 0, 92% 0, 100% 12%, 100% 100%, 8% 100%, 0 88%);
  border:1px solid rgba(234,240,255,.12);
}

/* Contact cockpit (Option B) */
.contactCockpit{position:relative; overflow:hidden; background:rgba(0,0,0,.18); box-shadow:var(--dr-shadow-soft)}
.contactCockpit__bg{position:absolute; inset:0; z-index:1; opacity:.42; pointer-events:none}
.contactCockpit__bg img{width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.08); transform:scale(1.04)}
.contactCockpit::before{content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(700px 320px at 20% 10%, rgba(121,183,255,.16), transparent 60%),
    radial-gradient(620px 280px at 80% 80%, rgba(162,255,204,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.70), rgba(0,0,0,.35));
}
.contactCockpit__inner{position:relative; z-index:2; padding:16px; display:flex; flex-direction:column; gap:14px}

.contactCockpit__facts{display:grid; gap:10px;
  border-radius:20px; border:1px solid rgba(234,240,255,.10); background:rgba(0,0,0,.18); padding:12px}
.contactFact__k{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,240,255,.56)}
.contactFact__v{margin-top:6px; color:rgba(234,240,255,.84)}
.contactFact__v a{color:inherit}

.contactCockpit__miniTrust{display:flex; flex-wrap:wrap; gap:10px}
.contactCockpit__miniTrust .trustPill{background:rgba(12,12,14,.22)}

/* Optional: a section sweep wrapper */
.dr-section--11 .dr-sweep::after{ opacity:.62; }

@media (max-width: 900px){
  .dr-section--11 .dr-wrap{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:1ms !important;
    scroll-behavior:auto !important;
  }
  .dr-sweep::after{ display:none !important; }
  .dr-cue:hover{ transform:none; }
  .dr-cue::before{ display:none; }
}

/* DR: Section 07 layout helpers */
.dr-processTop{display:grid; grid-template-columns: 1fr; gap:clamp(18px, 3vw, 38px); align-items:start}
.dr-processGrid{margin-top:28px; display:grid; grid-template-columns: 1fr 1fr; gap:18px; align-items:start}
.dr-inspector{border-radius:var(--dr-r2); border:1px solid rgba(234,240,255,.12); background:rgba(255,255,255,.02);
  box-shadow:var(--dr-shadow-soft); padding:16px; min-height:220px; overflow:hidden}
.dr-inspector .cue-output__title{font-weight:850; letter-spacing:.08em; text-transform:uppercase}
.dr-inspector .cue-output__desc{margin-top:10px; color:rgba(234,240,255,.76); line-height:1.65}
.dr-inspector .cue-output__meta{margin-top:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,240,255,.56)}

@media (max-width: 900px){
  .dr-processTop{grid-template-columns:1fr}
  .dr-processGrid{grid-template-columns:1fr}
}

/* DR: Spec rows inside blueprint */
.dr-specGrid{margin-top:18px; display:grid; grid-template-columns:1fr; gap:10px}
.dr-spec{margin:0; padding:12px 12px; border-radius:16px; border:1px solid rgba(121,183,255,.14);
  background:rgba(0,0,0,.16)}
.dr-spec dt{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,240,255,.62)}
.dr-spec dd{margin:6px 0 0; color:rgba(234,240,255,.78); line-height:1.55}
@media (min-width: 768px){
  .dr-specGrid{grid-template-columns:repeat(2,1fr)}
}

/* DR: Section 09fit (Radar compatibility) */
.dr-section--09fit{position:relative;
  background:linear-gradient(180deg, #060A13, #091022);
}
.dr-fitBg{position:absolute; inset:0; z-index:1; opacity:.22; pointer-events:none; overflow:hidden}
.dr-fitBg img{width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.05)}

.dr-section--09fit .dr-wrap{z-index:2}

.dr-fitGrid{margin-top:26px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch}
.dr-fitPanel{border-radius:var(--dr-r2); border:1px solid rgba(234,240,255,.12); background:rgba(0,0,0,.18);
  box-shadow:var(--dr-shadow-soft); padding:16px; min-height:280px}

.dr-radar{position:relative; border-radius:var(--dr-r2); border:1px solid rgba(234,240,255,.12);
  background:rgba(0,0,0,.20);
  box-shadow:var(--dr-shadow-soft);
  min-height:340px; overflow:hidden}
.dr-radar::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(700px 420px at 60% 50%, rgba(121,183,255,.10), transparent 60%),
    radial-gradient(520px 320px at 30% 70%, rgba(162,255,204,.08), transparent 55%),
    repeating-linear-gradient(0deg, rgba(234,240,255,.03) 0 1px, transparent 1px 10px);
  opacity:.9; pointer-events:none}

.dr-radar__axis{position:absolute; background:linear-gradient(90deg, rgba(234,240,255,.12), rgba(121,183,255,.14), rgba(234,240,255,.12)); opacity:.65}
.dr-radar__axis--x{left:10%; right:10%; top:62%; height:1px}
.dr-radar__axis--y{top:10%; bottom:10%; left:38%; width:1px; background:linear-gradient(180deg, rgba(234,240,255,.10), rgba(121,183,255,.14), rgba(234,240,255,.10))}

.stage-dot{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  border-radius:999px; border:1px solid rgba(234,240,255,.14); background:rgba(0,0,0,.22);
  color:rgba(234,240,255,.84); padding:8px 10px; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 18px 60px rgba(0,0,0,.40);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease, opacity .22s ease;
}
.stage-dot::before{content:""; position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:50%; transform:translate(-50%,-50%);
  background:rgba(121,183,255,.55); box-shadow:0 0 0 3px rgba(121,183,255,.12), 0 0 18px rgba(121,183,255,.14)}
.stage-dot--no::before{background:rgba(255,184,107,.62); box-shadow:0 0 0 3px rgba(255,184,107,.12), 0 0 18px rgba(255,184,107,.14)}
.stage-dot:hover{transform:translate(-50%,-50%) scale(1.03); border-color:rgba(121,183,255,.24)}
.stage-dot.is-active, .stage-dot[aria-current="true"]{border-color:rgba(162,255,204,.34); background:rgba(162,255,204,.06)}

.dr-radar__labels{position:absolute; inset:auto 12px 12px 12px; display:flex; justify-content:space-between; gap:12px;
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,240,255,.52)}

.stage-output__title{font-weight:850; letter-spacing:.10em; text-transform:uppercase}
.stage-output__desc{margin-top:10px; color:rgba(234,240,255,.74); line-height:1.7}

@media (max-width: 980px){
  .dr-fitGrid{grid-template-columns:1fr}
  .dr-radar{min-height:300px}
}

/* DR: FAQ channel stack (uses section--09 base) */
.dr-faqBg{position:absolute; inset:0; z-index:1; opacity:.16; pointer-events:none; overflow:hidden}
.dr-faqBg img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.08)}
.dr-section--09 .dr-wrap{position:relative; z-index:2}

.dr-faqGrid{margin-top:26px; display:grid; grid-template-columns: 340px 1fr; gap:18px; align-items:stretch}
.dr-faqSearch{margin:12px 12px 0; border-radius:999px; border:1px solid rgba(234,240,255,.10);
  padding:10px 12px; background:rgba(0,0,0,.22); color:rgba(234,240,255,.80)}

.dr-faqChannels{gap:8px}
.faq-channel{display:flex; justify-content:space-between; gap:10px; align-items:center;
  padding:12px 12px; border-radius:16px; border:1px solid rgba(234,240,255,.10);
  background:rgba(0,0,0,.16); text-decoration:none; color:rgba(234,240,255,.82);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition:transform .18s ease, border-color .18s ease, background .18s ease}
.faq-channel span{font-size:12.5px; color:rgba(234,240,255,.60)}
.faq-channel:hover{transform:translateY(-2px); border-color:rgba(121,183,255,.22)}
.faq-channel.is-active, .faq-channel[aria-current="true"]{border-color:rgba(162,255,204,.32); background:rgba(162,255,204,.06)}

.faq-item{border:1px solid rgba(234,240,255,.10); border-radius:18px; background:rgba(0,0,0,.14); overflow:hidden}
.faq-item summary{cursor:pointer; padding:12px 12px; font-weight:750; letter-spacing:.06em; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item__a{padding:0 12px 12px; color:rgba(234,240,255,.72); line-height:1.7}
.faq-item[open]{background:rgba(0,0,0,.20); border-color:rgba(121,183,255,.18)}

@media (max-width: 980px){
  .dr-faqGrid{grid-template-columns:1fr}
}

/* AB iteration: proof modal + flow spine + microcopy */
.hero__micro{margin-top:10px; font-size:12px; letter-spacing:.02em; color:rgba(234,240,255,.62)}
.trusted__proof{margin-top:14px; text-align:center; font-size:12px; letter-spacing:.06em}

/* Flow spine (subtle signal line across the whole site) */
body{position:relative}
body::before{content:""; position:fixed; left:18px; top:-10vh; bottom:-10vh; width:2px;
  background:linear-gradient(180deg, rgba(121,183,255,0), rgba(121,183,255,.22), rgba(162,255,204,.18), rgba(121,183,255,.10), rgba(121,183,255,0));
  filter:blur(.2px);
  opacity:.55; pointer-events:none; z-index:0}
main{position:relative; z-index:1}

.section__head{position:relative}
.section__head::before{content:""; position:absolute; left:-18px; top:10px; width:10px; height:10px; border-radius:50%;
  background:rgba(121,183,255,.55); box-shadow:0 0 0 3px rgba(121,183,255,.12), 0 0 18px rgba(121,183,255,.14)}
.dr-kicker{position:relative}
.dr-kicker::before{content:""; position:absolute; left:-18px; top:50%; transform:translateY(-50%); width:10px; height:10px; border-radius:50%;
  background:rgba(162,255,204,.44); box-shadow:0 0 0 3px rgba(162,255,204,.10), 0 0 18px rgba(162,255,204,.12)}

@media (max-width: 520px){
  body::before{left:10px; opacity:.35}
  .section__head::before, .dr-kicker::before{left:-10px}
}

/* Focus ring: important on dark UI */
:where(a, button, input, select, textarea, summary):focus-visible{
  outline:2px solid rgba(162,255,204,.75);
  outline-offset:3px;
}

/* Case modal */
html.isModalOpen{overflow:hidden}
.caseModal{position:fixed; inset:0; z-index:2500}
.caseModal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.68); backdrop-filter: blur(8px)}
.caseModal__panel{position:absolute; right:max(14px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%);
  width:min(680px, calc(100% - 28px)); max-height:calc(100vh - 44px); overflow:auto;
  border-radius:24px; border:1px solid rgba(234,240,255,.14);
  background:linear-gradient(180deg, rgba(10,12,18,.92), rgba(6,8,12,.92));
  box-shadow:0 30px 120px rgba(0,0,0,.55);
  padding:16px 16px 14px;
}
.caseModal__close{position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(234,240,255,.16); background:rgba(0,0,0,.24); color:rgba(234,240,255,.84);
  font-size:22px; line-height:1; cursor:pointer}
.caseModal__head{padding-right:52px}
.caseModal__code{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(121,183,255,.18); background:rgba(121,183,255,.06);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(234,240,255,.74)}
.caseModal__title{margin:10px 0 4px; font-size:22px; line-height:1.15}
.caseModal__meta{margin:0; color:rgba(234,240,255,.62)}

.caseModal__media{margin-top:14px}
.caseModal__media img{width:100%; height:auto; display:block; border-radius:18px; border:1px solid rgba(234,240,255,.10)}

.caseModal__kpis{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.caseModal__kpi{padding:8px 10px; border-radius:999px; border:1px solid rgba(234,240,255,.12);
  background:rgba(0,0,0,.18); font-size:11px; letter-spacing:.10em; color:rgba(234,240,255,.78)}

.caseModal__grid{margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.caseModal__label{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,240,255,.55)}
.caseModal__txt{margin:8px 0 0; color:rgba(234,240,255,.72); line-height:1.65}

.caseModal__scope{margin-top:14px}
.caseModal__scopeRow{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:start}
.caseModal__scopePre{margin:8px 0 0; padding:12px; border-radius:16px; border:1px solid rgba(234,240,255,.10);
  background:rgba(0,0,0,.22); color:rgba(234,240,255,.72); overflow:auto; max-height:180px}
.caseModal__cta{margin-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px}

@media (max-width: 780px){
  .caseModal__panel{right:50%; transform:translate(50%,-50%)}
  .caseModal__grid{grid-template-columns:1fr}
  .caseModal__cta{flex-direction:column; align-items:stretch}
}

/* Why section: use background image instead of floating right tile */
.dr-section--06{position:relative; overflow:visible}
.dr-section--06 .dr-wrap{position:relative; z-index:2}
.dr-whyBg{position:absolute; inset:0; z-index:1; opacity:.18; pointer-events:none; overflow:hidden}
.dr-whyBg img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.08); transform:scale(1.06)}

/* Pipeline right panel (sticky) */
.dr-whySide{align-self:start; position:sticky; top:96px}
.dr-whyCard{border-radius:var(--dr-r2); border:1px solid rgba(234,240,255,.14);
  background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.16));
  box-shadow:var(--dr-shadow-soft);
  overflow:hidden}
.dr-whyCard__top{display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 12px; border-bottom:1px solid rgba(234,240,255,.10);
  background:rgba(0,0,0,.18)}
.dr-whyCard__label{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,240,255,.68)}
.dr-whyCard__pill{font-size:10px; letter-spacing:.22em; text-transform:uppercase; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(162,255,204,.20); background:rgba(162,255,204,.06); color:rgba(234,240,255,.78)}
.dr-whyCard__media img{width:100%; height:260px; object-fit:cover; display:block; filter:saturate(.95) contrast(1.06)}
.dr-whyCard__body{padding:12px 12px 14px}
.dr-whyCard__title{font-weight:850; letter-spacing:.08em; text-transform:uppercase; font-size:12px}
.dr-whyList{margin:10px 0 0; padding:0 0 0 18px; color:rgba(234,240,255,.74); line-height:1.6}
.dr-whyCard__fine{margin-top:10px; color:rgba(234,240,255,.58); font-size:12px}

@media (max-width: 980px){
  .dr-whySide{position:relative; top:auto}
  .dr-whyCard__media img{height:220px}
}

/* SECTION 08 — Production Scale (capability showcase, no bars) */
.dr-section--08scale{
  background:
    radial-gradient(120% 120% at 20% 25%, rgba(121,183,255,.18), transparent 60%),
    radial-gradient(120% 120% at 85% 70%, rgba(255,79,216,.12), transparent 62%),
    linear-gradient(180deg, #060915, #0A0F22);
}

.capStack{margin-top:26px; display:grid; gap:16px}

.capRow{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:18px;
  align-items:stretch;
  padding:16px;
  border-radius:var(--dr-r2);
  border:1px solid rgba(234,240,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.capRow.is-reverse{grid-template-columns: .92fr 1.08fr}
.capRow.is-reverse .capRow__text{order:2}
.capRow.is-reverse .capRow__media{order:1}

.capRow__text{display:flex; flex-direction:column; justify-content:center}
.capRow__num{
  font-size:clamp(44px, 5.2vw, 72px);
  line-height:1;
  font-weight:850;
  letter-spacing:-0.02em;
  margin-bottom:10px;
  background:linear-gradient(180deg, rgba(234,240,255,.96), rgba(121,183,255,.72));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.capRow__sys{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(234,240,255,.62);
}
.capRow__desc{margin-top:10px; color:rgba(234,240,255,.78); line-height:1.65}
.capRow__bullets{margin:12px 0 0; padding:0 0 0 18px; color:rgba(234,240,255,.70); line-height:1.65}

.capRow__media{min-height:260px}
.capRow__media.dr-media{border-radius:calc(var(--dr-r2) + 10px)}
.capRow__media img{transform:scale(1.02)}

.capUsed{margin-top:18px; padding:14px 14px; border-radius:var(--dr-r2);
  border:1px solid rgba(234,240,255,.10); background:rgba(0,0,0,.16)}
.capUsed__label{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(234,240,255,.55)}
.capUsed__items{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.capTag{padding:8px 10px; border-radius:999px; border:1px solid rgba(234,240,255,.12);
  background:rgba(0,0,0,.18); color:rgba(234,240,255,.78); font-size:12px}
.capUsed__fine{margin-top:10px; color:rgba(234,240,255,.60)}

@media (max-width: 980px){
  .capRow{grid-template-columns:1fr}
  .capRow.is-reverse{grid-template-columns:1fr}
  .capRow.is-reverse .capRow__text{order:1}
  .capRow.is-reverse .capRow__media{order:2}
  .capRow__media{min-height:220px}
}

/* Project Fit (production map, not IT radar) */
.dr-section--09fit{position:relative;
  background:
    radial-gradient(120% 120% at 18% 30%, rgba(255,79,216,.12), transparent 58%),
    radial-gradient(120% 120% at 78% 70%, rgba(121,183,255,.12), transparent 60%),
    linear-gradient(180deg, #050A12, #081021);
}
.fitBg2{position:absolute; inset:0; z-index:1; opacity:.16; pointer-events:none; overflow:hidden}
.fitBg2 img{width:100%; height:100%; object-fit:cover; filter:saturate(.9) contrast(1.12)}
.dr-section--09fit .dr-wrap{position:relative; z-index:2}

.fitGrid{margin-top:26px; display:grid; grid-template-columns: 330px 1fr; gap:18px; align-items:start}

.fitNav{border-radius:var(--dr-r2); border:1px solid rgba(234,240,255,.12);
  background:rgba(0,0,0,.18); box-shadow:var(--dr-shadow-soft);
  padding:12px; clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.fitNav__head{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(234,240,255,.60);
  padding:6px 6px 10px}

.fitOpt{width:100%; text-align:left; cursor:pointer; border-radius:16px;
  border:1px solid rgba(234,240,255,.10); background:rgba(0,0,0,.14);
  color:rgba(234,240,255,.82); padding:12px 12px; margin:6px 0 0;
  font-size:13px; letter-spacing:.02em;
  transition:transform .18s ease, border-color .18s ease, background .18s ease}
.fitOpt:hover{transform:translateY(-1px); border-color:rgba(121,183,255,.22)}
.fitOpt.is-active{border-color:rgba(162,255,204,.32); background:rgba(162,255,204,.06)}

.fitDivider{height:1px; margin:12px 6px; background:linear-gradient(90deg, transparent, rgba(234,240,255,.14), transparent)}
.fitNot__title{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(234,240,255,.55)}
.fitNot__list{margin:10px 0 0; padding:0 0 0 18px; color:rgba(234,240,255,.68); line-height:1.65}

.fitPanel{border-radius:var(--dr-r2); border:1px solid rgba(234,240,255,.12);
  background:rgba(0,0,0,.16); box-shadow:var(--dr-shadow-soft);
  padding:14px}

.fitHero{display:grid; grid-template-columns: .95fr 1.05fr; gap:14px; align-items:stretch}
.fitHero__media{min-height:260px}
.fitHero__text{display:flex; flex-direction:column; justify-content:center}
.fitHero__tag{display:inline-flex; align-items:center; width:max-content;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(162,255,204,.20); background:rgba(162,255,204,.06); color:rgba(234,240,255,.78)}
.fitHero__title{margin:10px 0 6px; font-size:20px; line-height:1.15}
.fitHero__desc{margin:0; color:rgba(234,240,255,.74); line-height:1.65}
.fitHero__scale{margin-top:10px; color:rgba(234,240,255,.60)}

.fitTwo{margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.fitBox{border-radius:18px; border:1px solid rgba(234,240,255,.10); background:rgba(0,0,0,.16); padding:12px}
.fitBox__title{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:rgba(234,240,255,.55)}
.fitBox__list{margin:10px 0 0; padding:0 0 0 18px; color:rgba(234,240,255,.72); line-height:1.65}

.fitFine{margin-top:12px; color:rgba(234,240,255,.62)}

@media (max-width: 980px){
  .fitGrid{grid-template-columns:1fr}
  .fitHero{grid-template-columns:1fr}
  .fitTwo{grid-template-columns:1fr}
}

/* ---------------------------------------------------------
   Mobile premium pass (≤520px)
   --------------------------------------------------------- */
@media (max-width: 520px){
  body{padding-top:72px}

  /* floating nav: tighter */
  .nav{padding:8px 0}
  .nav__inner{height:54px; padding:0 10px}
  .brand img{height:20px}
  .nav .btn.btn--primary{display:none !important}

  /* HERO (mobile redesign): readable glass panel + clean stack */
  .hero{min-height:auto}
  .hero__inner{padding:64px 0 36px}
  .hero__left{
    border-radius:26px;
    border:1px solid rgba(231,225,223,.12);
    background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
    backdrop-filter: blur(12px);
    box-shadow:0 30px 90px rgba(0,0,0,.55);
    padding:18px 16px;
  }
  .pill{font-size:11px}
  .hero__h{margin:0}
  .hero__h .hero__h1{font-size:clamp(28px, 8.6vw, 36px); line-height:1.05}
  .hero__h .hero__h2{font-size:clamp(26px, 8.2vw, 34px); line-height:1.07}
  .hero__sub{font-size:14px; line-height:1.65}

  .hero__cta{display:grid !important; grid-template-columns:1fr !important; gap:10px; align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__cta .link{width:100%; display:inline-flex; align-items:center; justify-content:center;
    padding:10px 14px; border-radius:999px; border:1px solid rgba(231,225,223,.14);
    background:rgba(11,13,12,.18); color:rgba(231,225,223,.88);
  }

  /* proof: stack (no horizontal scroll) */
  .hero .proof{display:grid !important; grid-template-columns:1fr !important; gap:10px;
    background:transparent; border:0; box-shadow:none; padding:0}
  .hero .proof__seg{padding:14px 14px; border-radius:18px;
    border:1px solid rgba(231,225,223,.10);
    background:rgba(11,13,12,.22)}
  .hero .proof__seg + .proof__seg{border-left:0 !important}
  .proof__v strong{font-size:18px}


  /* Services Lab: avoid clipping + reduce jank */
  .serviceslab{width:100%; margin-left:0; height:auto; min-height:0; overflow:visible}
  .serviceslab__content{position:relative}
  .labGrid{height:auto; grid-template-columns:1fr}
  .monitor__screen{min-height:300px}
  .termLine{font-size:11px; letter-spacing:.04em}
  .termOut{font-size:10px; letter-spacing:.06em}
  .terminal__hint{display:none}
  /* performance trims */
  .serviceslab__scan{animation:none}
  .serviceslab__veil{animation:none}

  /* Process: make step selector horizontal + thumb-friendly */
  .dr-processLayout{gap:12px}
  .dr-vTimeline{display:flex; gap:10px; overflow:auto; padding:10px;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
  .dr-vTimeline__rail{display:none}
  .dr-vStep{min-width:260px; scroll-snap-align:start}
  .dr-vStep + .dr-vStep{margin-top:0}

  /* Section heads: stack on mobile */
  .section__head{flex-direction:column; align-items:flex-start}
  .section__head h2{font-size:24px}

  /* FAQ: channels as horizontal tabs */
  .dr-faqGrid{grid-template-columns:1fr}
  .dr-faqChannels{display:flex; gap:10px; overflow:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px}
  .faq-channel{flex:0 0 auto}

  /* Contact: avoid WA float overlap */
  .dr-section--11{padding-bottom:72px}
}


/* =============================
   LEGAL PAGES (Impressum / Datenschutz / AGB)
   ============================= */
.legalMain{padding:64px 0 86px}
.legalHead{margin-bottom:14px}
.legalH{margin:10px 0 0; font-family:Fraunces, ui-serif, Georgia, serif; letter-spacing:-.02em; line-height:1.04}

.legalCard{border-radius:26px;
  border:1px solid rgba(231,225,223,.12);
  background:linear-gradient(180deg, rgba(12,12,14,.58), rgba(12,12,14,.40));
  backdrop-filter: blur(14px);
  box-shadow: 0 28px 90px rgba(0,0,0,.62);
  padding:22px;
}
.legalCard h2{margin:18px 0 10px; font-size:18px; letter-spacing:-.01em}
.legalCard h3{margin:14px 0 8px; font-size:14px; letter-spacing:.01em; text-transform:uppercase; color:rgba(231,225,223,.72)}
.legalCard p{max-width:92ch}
.legalCard a{color:rgba(142,231,255,.86)}
.legalBack{margin-top:16px; padding-top:14px; border-top:1px solid rgba(231,225,223,.10)}

.legalGrid{display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:16px}
.legalCol{padding:16px; border-radius:20px; border:1px solid rgba(231,225,223,.10); background:rgba(0,0,0,.14)}
@media (min-width: 980px){.legalGrid{grid-template-columns:1.15fr .85fr}}

.legalBlock{margin-top:14px; padding-top:14px; border-top:1px solid rgba(231,225,223,.10)}

.legalList{list-style:none; padding:0; margin:10px 0 0; display:grid; gap:10px}
.legalList li{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:10px 12px; border-radius:16px; border:1px solid rgba(231,225,223,.10);
  background:rgba(0,0,0,.12)
}
.legalList li span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(231,225,223,.60)}
.legalList li strong{font-weight:600; color:rgba(231,225,223,.92); text-align:right}

.legalNote{margin-top:12px; padding:12px 12px; border-radius:18px;
  border:1px solid rgba(142,231,255,.16);
  background:rgba(10,16,34,.38);
  color:rgba(231,225,223,.78)
}

.legalStamp{display:flex; flex-wrap:wrap; gap:8px}
.legalStamp span{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(231,225,223,.10); background:rgba(0,0,0,.14);
  font-size:12px; color:rgba(231,225,223,.74)
}