/* GWO Marketing - dark tech premium, one accent, kinetic type */
:root{
  --bg:#0b0d0f;
  --bg2:#101317;
  --fg:#f2f4f3;
  --muted:#a2aba8;
  --line:rgba(255,255,255,.08);
  --accent:#37e0a0;
  --accent-ink:#062b1d;
  --max:1140px;
  --r:14px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:-apple-system,"Segoe UI",system-ui,"Helvetica Neue",sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.02em;line-height:1.08;font-weight:600}
[id]{scroll-margin-top:90px}
img{max-width:100%;display:block}

/* progress bar */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:90}

/* spotlight */
.spotlight{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 600px 420px at var(--mx,50%) var(--my,20%),rgba(55,224,160,.05),transparent 65%)}

/* nav */
.navbar{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
  background:rgba(11,13,15,.75);backdrop-filter:blur(14px)}
.navbar-inner{max-width:var(--max);margin:0 auto;padding:0 24px;height:68px;
  display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:600;font-size:1.1rem;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.brand-mark{width:22px;height:22px;border-radius:6px;background:var(--accent);position:relative;flex:none}
.brand-mark::after{content:"";position:absolute;inset:5px 5px 5px 11px;background:var(--accent-ink);border-radius:2px}
.brand span{color:var(--muted);font-weight:400}
.nav{display:flex;gap:26px;font-size:.9rem;color:var(--muted);align-items:center}
.nav a{transition:color .25s var(--ease)}
.nav a:hover{color:var(--fg)}
.nav a.active{color:var(--fg)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:.72rem 1.35rem;border-radius:999px;
  font-weight:600;font-size:.92rem;transition:transform .35s var(--ease),box-shadow .35s var(--ease);cursor:pointer;border:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(55,224,160,.25)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{border:1px solid var(--line);color:var(--fg)}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;position:relative;z-index:1}
section{padding:6rem 0;position:relative}
.hairline{border-top:1px solid var(--line)}

/* hero */
.hero{padding:0;min-height:92vh;display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);letter-spacing:-.03em}
.hero h1 .rot{color:var(--accent);display:inline-block;min-height:1.05em}
.caret{display:inline-block;width:3px;height:.85em;background:var(--accent);margin-left:6px;animation:blink .8s step-end infinite}
@keyframes blink{50%{opacity:0}}
.hero p.sub{margin-top:1.4rem;color:var(--muted);font-size:1.08rem;max-width:46ch}
.hero-visual{position:relative}
.hero-visual img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.hero-chip{position:absolute;bottom:20px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;
  background:rgba(11,13,15,.8);backdrop-filter:blur(12px);border:1px solid var(--line);
  border-radius:12px;padding:14px 18px;font-size:.85rem}
.hero-chip b{color:var(--accent);font-variant-numeric:tabular-nums}
.hero-chip span{color:var(--muted)}

.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}

/* marquee - one per page */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.1rem 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:3rem;animation:slide 28s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{color:var(--muted);font-size:.9rem;display:flex;align-items:center;gap:3rem}
.marquee-track i{color:var(--accent);font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:2rem;transition:border-color .3s,transform .5s var(--ease)}
.stat:hover{border-color:rgba(55,224,160,.4);transform:translateY(-4px)}
.stat b{font-size:2.6rem;letter-spacing:-.02em;display:block;color:var(--accent);font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:.9rem}

/* services bento */
.svc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;margin-top:3rem}
.svc{border:1px solid var(--line);border-radius:var(--r);padding:2.4rem;background:var(--bg2);position:relative;overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s}
.svc:hover{border-color:rgba(55,224,160,.45)}
.svc.hero-cell{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end}
.svc.hero-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;transition:opacity .5s,transform 1.2s var(--ease)}
.svc.hero-cell:hover img{opacity:.4;transform:scale(1.04)}
.svc.hero-cell .svc-body{position:relative}
.svc h3{font-size:1.35rem;margin-bottom:.7rem}
.svc p{color:var(--muted);font-size:.95rem}
.svc .tag{display:inline-block;margin-top:1.4rem;font-size:.8rem;color:var(--accent);font-weight:600}
.svc .num{color:var(--muted);font-size:.85rem;position:absolute;top:2rem;right:2.2rem;opacity:.6}

/* process */
.steps{margin-top:3rem;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{border-top:2px solid var(--line);padding-top:1.4rem;transition:border-color .4s}
.step:hover{border-color:var(--accent)}
.step .n{color:var(--accent);font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}
.step h3{font-size:1.05rem;margin:.7rem 0 .45rem}
.step p{color:var(--muted);font-size:.9rem}

/* categories */
.cats{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.6rem}
.cat{border:1px solid var(--line);border-radius:999px;padding:.6rem 1.2rem;font-size:.9rem;color:var(--muted);
  transition:all .35s var(--ease);cursor:default}
.cat:hover{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

/* cta */
.cta-section{text-align:center;padding:8rem 0}
.cta-section h2{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.03em}
.cta-section p{color:var(--muted);margin:1.2rem auto 0;max-width:44ch}
.cta-section .btn{margin-top:2.4rem}

/* page head */
.page-head{padding:5.5rem 0 3.5rem}
.page-head h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-top:.6rem}

/* pricing tiers: two-column, right column = price + CTA */
.tier{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);margin-top:2rem;
  display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;padding:2.6rem 2.8rem;
  transition:transform .5s var(--ease),border-color .4s}
.tier:hover{transform:translateY(-4px)}
.tier.hot{border-color:var(--accent)}
.tier .tier-body h2{font-size:1.7rem;margin-top:.6rem}
.tier .tier-body p{color:var(--muted);margin-top:.8rem;max-width:52ch}
.tier .tier-body ul{list-style:none;margin-top:1.6rem;max-width:46ch}
.tier .tier-body li{color:var(--muted);font-size:.93rem;padding:.55rem 0;border-bottom:1px solid var(--line);display:flex;gap:10px}
.tier .tier-body li:last-child{border-bottom:none}
.tier .tier-body li::before{content:"\2192";color:var(--accent);font-weight:600}
.tier .tier-side{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.4rem}
.tier .price{font-size:2.5rem;letter-spacing:-.02em;color:var(--fg)}
.tier .price small{font-size:.85rem;color:var(--muted)}
.tier .price b{color:var(--accent);font-weight:600}
.tier .tier-side .btn{margin-top:1.2rem}
.tier .form-note{font-size:.8rem;color:var(--muted)}

/* detail rows */
.detail-row{display:grid;grid-template-columns:220px 1fr;gap:2rem;padding:2rem 0}
.detail-row h3{font-size:1.15rem}
.detail-row .what{color:var(--muted);font-size:.95rem;max-width:60ch}
.detail-row .what strong{color:var(--fg)}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;margin-top:2.5rem}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.4rem}
input,textarea,select{width:100%;background:var(--bg2);color:var(--fg);border:1px solid var(--line);
  border-radius:10px;padding:.8rem 1rem;font:inherit;font-size:.95rem;transition:border-color .3s,box-shadow .3s}
input::placeholder,textarea::placeholder{color:#6b7472}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(55,224,160,.15)}
.field{margin-bottom:1.2rem}
.form-note{font-size:.8rem;color:var(--muted);margin-top:.9rem}
.contact-info h3{font-size:1.1rem;margin-bottom:1rem}
.contact-info p{color:var(--muted);font-size:.95rem;margin-top:.8rem}
.contact-info a{color:var(--fg);border-bottom:1px solid var(--accent)}

/* footer */
footer{padding:2.8rem 0 3.6rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer a:hover{color:var(--fg)}

/* scroll reveal - hidden state only applies when JS is running (html.js) */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}

/* hero entrance */
.rise{opacity:0;transform:translateY(30px);animation:rise .9s var(--ease) forwards}
.rise-2{animation-delay:.12s}.rise-3{animation-delay:.24s}.rise-4{animation-delay:.36s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}


/* flagship music section */
.flag-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;margin-top:3.2rem;align-items:center}
.flag-copy h3{font-size:1.5rem;margin-bottom:1rem}
.flag-copy p{color:var(--muted);font-size:1rem;max-width:52ch}
.flag-solo{grid-template-columns:1fr}
.flag-solo .flag-copy h3,.flag-solo .flag-copy p{max-width:60ch}
.flag-list{list-style:none;margin-top:2rem;border-top:1px solid var(--line)}
.flag-list li{display:flex;align-items:baseline;gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.flag-list b{font-size:1.7rem;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums;min-width:5.5ch}
.flag-list span{color:var(--muted);font-size:.9rem}
.flag-visual{position:relative}
.flag-visual img{border-radius:var(--r);width:100%;aspect-ratio:5/4;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.flag-stack{position:absolute;right:-14px;top:2rem;display:flex;flex-direction:column;gap:10px;width:250px}
.flag-card{display:flex;align-items:center;gap:12px;background:rgba(11,13,15,.85);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  transform:translateX(24px);opacity:0;transition:transform .8s var(--ease),opacity .8s}
.in .flag-card{transform:none;opacity:1}
.in .flag-card:nth-child(2){transition-delay:.25s}
.in .flag-card:nth-child(3){transition-delay:.5s}
.flag-card b{display:block;font-size:.85rem}
.flag-card span{font-size:.78rem;color:var(--muted)}
.fc-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* campaign flow: connected horizontal steps */
.flow{display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.flow::before{content:"";position:absolute;top:11px;left:12.5%;right:12.5%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent);opacity:.35}
.flow-step{padding:0 1.4rem;position:relative}
.flow-step .n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.72rem;position:relative;z-index:1}
.flow-step h3{font-size:1rem;margin:.9rem 0 .35rem}
.flow-step p{color:var(--muted);font-size:.88rem}


/* engine index: neutral 3-up cards */
.engine-index{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:3rem}
.engine-card{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);padding:2.2rem;
  display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .4s}
.engine-card:hover{transform:translateY(-4px);border-color:rgba(55,224,160,.45)}
.engine-card .num{font-size:.85rem;color:var(--muted)}
.engine-card h3{font-size:1.25rem;margin:.8rem 0 .6rem}
.engine-card p{color:var(--muted);font-size:.92rem;flex:1}
.engine-card .tag{margin-top:1.4rem;font-size:.82rem;color:var(--accent);font-weight:600}

/* mirrored flagship variant */
.flag-flip .flag-copy{order:2}
.flag-flip .flag-visual{order:1}

/* live case study card (IG growth) */
.case-card-live{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:2.4rem;
  height:100%;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.case-card-live::before{content:"";position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(55,224,160,.12),transparent 70%)}
.case-card-live h4{font-size:1.5rem;margin-top:.9rem;letter-spacing:-.01em}
.case-card-live p{color:var(--muted);font-size:.95rem;margin-top:.6rem;max-width:44ch}
.cc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2rem;border-top:1px solid var(--line);padding-top:1.6rem}
.cc-stats b{display:block;font-size:2.2rem;color:var(--accent);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cc-stats span{font-size:.75rem;color:var(--muted)}

/* case study grid (Disruption Network proof) */
.proof{margin-top:4.5rem}
.proof-head{max-width:60ch}
.case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:2.6rem}
.case-card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:2rem;
  transition:border-color .4s,transform .5s var(--ease)}
.case-card:hover{border-color:rgba(55,224,160,.45);transform:translateY(-4px)}
.case-card h4{font-size:1.3rem;letter-spacing:-.01em}
.case-card .cc-stats{margin-top:1.5rem;padding-top:1.3rem;gap:12px}
.case-card .cc-stats b{font-size:1.45rem}
.case-note{color:var(--muted);font-size:.9rem;margin-top:1.1rem}
.case-note b{color:var(--fg);font-weight:600}

/* snap card */
.snap-card .badge-demo{display:flex;align-items:center;gap:16px;padding:1.1rem 0;border-bottom:1px solid var(--line)}
.snap-card .badge-demo:last-child{border-bottom:none}
.badge-glyph{width:44px;height:44px;border-radius:12px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;flex:none}
.badge-demo b{display:block;font-size:1rem}
.badge-demo span{font-size:.82rem;color:var(--muted)}

@media (max-width:900px){
  .flag-grid{grid-template-columns:1fr;gap:2.5rem}
  .engine-index{grid-template-columns:1fr}
  .flag-flip .flag-copy,.flag-flip .flag-visual{order:initial}
  .flag-stack{right:8px;top:1rem}
  .flow{grid-template-columns:repeat(2,1fr);row-gap:2rem}
  .flow::before{display:none}
  .case-grid{grid-template-columns:1fr}
}

@media (max-width:900px){
  .hero-grid,.svc-grid,.contact-grid{grid-template-columns:1fr}
  .tier{grid-template-columns:1fr;gap:1.5rem;padding:2rem}
  .steps{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:1fr}
  .hero{min-height:auto;padding:5rem 0}
  .detail-row{grid-template-columns:1fr;gap:.4rem}
  section{padding:4.5rem 0}
  .nav{gap:14px;font-size:.82rem}
}