/* ===== DCS Sprint — upgrade layer (Oct 2026) =====
   Loaded after each page's inline styles. Content stays in the HTML;
   this file only handles width, brand lockup, colour depth and motion. */

:root{
  --gold:#D9B44A;--gold-deep:#B48A24;--gold-hi:#F3DC8E;--gold-soft:rgba(217,180,74,.13);
  --champ:#EBD7A0;--glow:rgba(217,180,74,.22);
  --gutter:clamp(20px,4.2vw,80px);
  --maxw:1640px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- full-width layout ---------- */
.wrap{max-width:var(--maxw) !important;padding-left:var(--gutter) !important;padding-right:var(--gutter) !important}
nav .wrap{padding-top:16px !important;padding-bottom:16px !important}
@media(min-width:1500px){
  html{font-size:17px}
  .hero h1{font-size:clamp(64px,5.6vw,112px) !important}
  .h2{font-size:clamp(44px,3.9vw,74px) !important;max-width:20ch}
  .sectlede{font-size:19.5px;max-width:60ch}
  .pagehero h1{font-size:clamp(56px,4.8vw,92px) !important;max-width:22ch}
  .pagehero p{font-size:20px;max-width:64ch}
  .step{padding:44px 40px}.card{padding:42px 38px}
  .card h3{font-size:34px}
  .feat-c{padding:28px 26px}.feat-c h4{font-size:17.5px}.feat-c p{font-size:14px}
  section.band{padding:140px 0}
  .featgrid{gap:18px}.steps,.svc,.cases,.freerow{gap:24px}
  .chk24{max-width:1240px !important}
}
@media(min-width:1180px){.grid.three{grid-template-columns:repeat(3,1fr)}}

/* ---------- brand lockup: mark + DCS / Sprint / DCS AI Technologies ---------- */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .mark{width:40px;height:40px;flex:none;filter:drop-shadow(0 4px 14px rgba(217,180,74,.28));transition:transform .5s var(--ease)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.brand .lock{display:flex;flex-direction:column;line-height:1}
.brand .lock b{font-size:17px;font-weight:800;letter-spacing:.06em;color:#fff}
.brand .lock .prod{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:21px;line-height:.95;color:var(--gold);margin-top:1px}
.brand .lock .sub{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:4px}
footer .brand .mark{width:46px;height:46px}

/* ---------- ambient depth ---------- */
body{background:#0A0C12}
body:before{content:"";position:fixed;inset:-20vh -10vw;z-index:-1;pointer-events:none;
  background:
    radial-gradient(42vw 36vw at 12% 4%,rgba(217,180,74,.10),transparent 60%),
    radial-gradient(38vw 32vw at 92% 30%,rgba(196,120,70,.07),transparent 62%),
    radial-gradient(46vw 38vw at 40% 100%,rgba(217,180,74,.06),transparent 60%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-3vw,2vh,0) scale(1.06)}}
body:after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero,.pagehero{background:transparent !important}
.hero:after,.pagehero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%)}
.pagehero{position:relative;overflow:hidden}
.pagehero>.wrap{position:relative;z-index:2}
section.band[style*="bg-soft"],.arsenal{background:linear-gradient(180deg,rgba(255,255,255,.012),rgba(255,255,255,.028)) !important}
section.band,.statement,.cta-band,.strip{position:relative}
section.band+section.band:before,.statement:before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(70%,900px);height:1px;background:linear-gradient(90deg,transparent,rgba(217,180,74,.45),transparent)}

/* scroll progress */
.sp-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:130;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));box-shadow:0 0 12px var(--glow)}

/* nav */
nav.scrolled{background:rgba(10,12,18,.72) !important;backdrop-filter:blur(18px) saturate(1.4) !important;-webkit-backdrop-filter:blur(18px) saturate(1.4)}
.navlinks a:not(.cta){position:relative}
.navlinks a:not(.cta):after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.navlinks a:not(.cta):hover:after,.navlinks a.active:after{transform:scaleX(1)}
.navlinks a:not(.cta):hover,.navlinks a.active{color:#fff !important}

/* headings: gold gradient accents */
.serif,.h2 .serif,.hero h1 .serif,.ac{background:linear-gradient(100deg,var(--gold-hi),var(--gold) 55%,var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent !important}
.statement .blue{background:linear-gradient(100deg,#fff,var(--champ));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{border:1px solid rgba(235,215,160,.18)}

/* buttons */
.btn-pri,.navlinks .cta,.fab-quote,.mobnav a.cta{background:linear-gradient(135deg,var(--gold-hi),var(--gold) 45%,var(--gold-deep)) !important;color:#0A0C12 !important;position:relative;overflow:hidden}
.btn-pri:before,.navlinks .cta:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-pri:hover:before,.navlinks .cta:hover:before{left:120%}
.btn-sec:hover{border-color:var(--gold) !important;color:var(--gold) !important}

/* ---------- cards: spotlight + glow border ---------- */
.step,.card,.feat-c,.case,.freeitem,.tcard,.chk24>*,.pcard,.tier,.plan,.faq-item,details{--mx:50%;--my:50%}
.step,.card:not(.feat),.feat-c,.case,.chk24>*{background:radial-gradient(520px circle at var(--mx) var(--my),rgba(217,180,74,.09),transparent 42%),linear-gradient(180deg,#151925,#11141D) !important}
.step,.card,.feat-c,.case,.freeitem,.tcard{border-color:rgba(255,255,255,.07) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.step:hover,.card:hover,.feat-c:hover,.case:hover,.freeitem:hover,.tcard:hover{border-color:rgba(217,180,74,.42) !important;box-shadow:0 30px 70px -20px rgba(0,0,0,.7),0 0 0 1px rgba(217,180,74,.12),0 0 60px -20px var(--glow) !important}
.card.feat{background:linear-gradient(165deg,#2A2414 0%,#16140F 55%,#12141B 100%) !important;border:1px solid transparent !important;
  background-clip:padding-box !important;isolation:isolate}
.card.feat:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),rgba(217,180,74,.15),var(--gold-hi),rgba(217,180,74,.15) 30%,rgba(217,180,74,.15) 70%,var(--gold),rgba(217,180,74,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinb 6s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes spinb{to{--ang:360deg}}
.step .num{background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.feat-c .tag,.case .ctag{box-shadow:0 0 0 1px rgba(52,211,153,.18)}
.feat-c .tag:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#34D399;margin-right:6px;vertical-align:1px;animation:blink 2s infinite}
@keyframes blink{50%{opacity:.25}}

/* hero */
.hero-card{position:relative;transform-style:preserve-3d;transition:transform .6s var(--ease);border-color:rgba(217,180,74,.25) !important;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.04),0 0 90px -30px var(--glow) !important}
.hero-grid>div:last-child{position:relative}
.hero-grid>div:last-child:before{content:"";position:absolute;inset:-18%;z-index:-1;background:radial-gradient(closest-side,rgba(217,180,74,.20),transparent);filter:blur(20px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{opacity:.55;transform:scale(.92)}}
.hc-foot .val{text-shadow:0 0 22px rgba(217,180,74,.55)}
.heronums>div{position:relative;padding-left:18px}
.heronums>div:before{content:"";position:absolute;left:0;top:6px;bottom:4px;width:1px;background:linear-gradient(var(--gold),transparent)}
.strip{background:rgba(255,255,255,.015) !important;border-color:rgba(255,255,255,.06) !important}

/* free section */
.free{background:radial-gradient(60% 80% at 50% 0%,rgba(217,180,74,.10),transparent 70%),#08090E !important}
.freeitem{background:rgba(255,255,255,.03) !important;backdrop-filter:blur(10px)}
.freeitem.hero-it{background:linear-gradient(150deg,rgba(217,180,74,.22),rgba(217,180,74,.04)) !important}

/* statement + CTA */
.statement{background:radial-gradient(50% 70% at 50% 50%,rgba(217,180,74,.08),transparent 70%),#07080D !important;overflow:hidden}
.cta-band{background:radial-gradient(60% 90% at 50% 100%,rgba(217,180,74,.16),transparent 70%) !important;overflow:hidden}
footer{background:#06070B !important}

/* ---------- reveal (pages without their own) ---------- */
.px{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.px.in{opacity:1;transform:none}

/* ---------- template frames (templates + work pages) ---------- */
.framewrap{background:
    radial-gradient(70% 90% at 50% 0%,rgba(217,180,74,.16),transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg,#14161F,#0C0E14) !important;padding:34px 34px 0 !important;perspective:1400px}
.framewrap.darkwrap,.framewrap.mobilewrap{background:
    radial-gradient(70% 90% at 50% 0%,rgba(196,120,70,.14),transparent 70%),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(180deg,#121319,#0A0B10) !important}
.browser,.stage{border-radius:14px 14px 0 0 !important;border-color:rgba(255,255,255,.1) !important;
  box-shadow:0 -1px 0 rgba(255,255,255,.08),0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.4) !important;
  transform-origin:50% 100%;transition:transform .7s var(--ease),box-shadow .7s var(--ease) !important}
.tcard:hover .browser,.tcard:hover .stage{transform:translateY(-6px) rotateX(4deg) !important;box-shadow:0 -1px 0 rgba(255,255,255,.1),0 50px 90px -20px rgba(0,0,0,.85),0 0 60px -10px var(--glow) !important}
.bbar{background:#101219 !important;border-bottom-color:rgba(255,255,255,.07) !important}
.bbar .url{background:#1A1D27 !important;color:#A3A8B5 !important}
.site iframe.pv-run,.sc-view iframe.pv-run{transition:transform 6s cubic-bezier(.45,0,.2,1) !important}
.site iframe.pv-back,.sc-view iframe.pv-back{transition:transform .9s var(--ease) !important}
.tcard .meta{background:linear-gradient(180deg,rgba(255,255,255,.015),transparent)}
.tcard .view{color:var(--gold) !important}
.catpill.web{background:rgba(235,215,160,.12) !important;color:var(--champ) !important}
.livebadge{background:rgba(16,185,129,.16) !important;color:#5EEAB0 !important;border:1px solid rgba(52,211,153,.35);backdrop-filter:blur(6px);box-shadow:none !important}
.livebadge:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#34D399;margin-right:6px;vertical-align:1px;animation:blink 1.6s infinite}
.pagecount{background:rgba(10,12,18,.7) !important;border:1px solid rgba(255,255,255,.1)}
.phoneframe{box-shadow:0 30px 60px -10px rgba(0,0,0,.7),0 0 0 1px #2a2c36,0 0 50px -15px var(--glow) !important}
.fbtn{background:rgba(255,255,255,.03) !important;border-color:rgba(255,255,255,.1) !important}
.fbtn.on{background:linear-gradient(135deg,var(--gold-hi),var(--gold)) !important;color:#0A0C12 !important;border-color:transparent !important}

/* ---------- homepage showcase ---------- */
.showcase{padding:120px 0 110px;position:relative;overflow:hidden}
.showcase .sc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:54px}
.showcase .sc-head .btn{flex:none}
.sc-row{position:relative;margin-top:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sc-track{display:flex;gap:26px;overflow-x:auto;scrollbar-width:none;padding:24px var(--gutter) 40px;cursor:grab}
.sc-track::-webkit-scrollbar{display:none}
.sc-track.drag{cursor:grabbing}
.sc-item{flex:none;width:clamp(290px,30vw,540px);text-decoration:none;color:inherit;perspective:1200px}
.sc-frame{border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.1);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.5);transform-origin:50% 100%;transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.sc-item:hover .sc-frame{transform:translateY(-10px) rotateX(5deg);box-shadow:0 60px 100px -24px rgba(0,0,0,.9),0 0 70px -10px var(--glow)}
.sc-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#101219;border-bottom:1px solid rgba(255,255,255,.07)}
.sc-bar i{width:9px;height:9px;border-radius:50%;display:block}
.sc-bar i:nth-child(1){background:#ff5f57}.sc-bar i:nth-child(2){background:#febc2e}.sc-bar i:nth-child(3){background:#28c840}
.sc-bar span{margin-left:10px;flex:1;background:#1A1D27;border-radius:5px;font:500 10px 'JetBrains Mono',monospace;color:#A3A8B5;padding:4px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-view{position:relative;aspect-ratio:16/10;overflow:hidden;background:#f4f4f5}
.sc-view iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none}
.sc-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 4px 0}
.sc-meta b{font-size:16px;font-weight:800;color:#fff;letter-spacing:-.01em}
.sc-meta small{font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.sc-label{display:flex;align-items:center;gap:12px;font:600 11.5px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 var(--gutter);max-width:var(--maxw);margin:0 auto}
.sc-label:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)}

@media(max-width:560px){
  .brand .mark{width:34px;height:34px}
  .brand .lock b{font-size:15px}.brand .lock .prod{font-size:18px}.brand .lock .sub{font-size:7.5px}
  .framewrap{padding:22px 18px 0 !important}
  .showcase{padding:80px 0 70px}
}
@media(prefers-reduced-motion:reduce){
  body:before,.card.feat:before,.hero-grid>div:last-child:before{animation:none}
  .px{opacity:1;transform:none}
}

/* hero is a flex row: let its wrap use the full width */
.hero>.wrap{width:100%}
@media(min-width:1500px){.hero-grid{grid-template-columns:1.05fr .95fr !important;gap:90px !important}.hc-body{min-height:290px}.hc-line{font-size:15px}}
.showcase .h2{max-width:none}