/* =====================================================================
   No Limits — WEB DESIGN page · dark "Holo" skin
   Load order: styles.css → webdesign.css → home.css → THIS FILE (last).
   Restyles only — no ids or JS-read classes are renamed.
   ===================================================================== */

/* ---------- Page canvas: opaque navy so print/PDF/capture stay dark; the fixed holo backdrop layers on top ---------- */
body{background:var(--navy-0);color:var(--ink)}
main{position:relative;z-index:1;display:block}
.container{max-width:calc(var(--wrap) + 4px)}

/* ---------- Neutralise light-theme header leftovers on the canonical nav ---------- */
.nav a::after{display:none}
.nav .drop-trigger::after{display:none} /* old orange underline from styles.css */
.nav .has-drop::after{display:block;content:"";position:absolute;top:100%;left:0;width:100%;height:20px} /* keep the hover bridge */
.nav .drop-trigger.active{color:#fff;background:rgba(255,255,255,.06)}
.nav-drop a.active{color:#fff;background:rgba(255,255,255,.07)}

/* ---------- Typography: Space Grotesk for every display heading ---------- */
h1,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:#fff}
h2{color:#fff}
.section-head p{color:var(--ink-dim)}
.section-head p strong{color:#fff}

/* Slightly grander CTAs on this page */
.btn-lg{padding:15px 28px;font-size:16px}

/* =====================================================================
   HERO — transparent over the backdrop, holographic headline
   ===================================================================== */
.wd-hero{background:transparent;padding:clamp(4rem,8vw,6.8rem) 0 clamp(2.8rem,5vw,4.2rem)}
.wd-hero .hero-bg{display:none} /* the site backdrop already provides grid + aurora */
.wd-hero h1{font-weight:700;color:#fff}
.wd-hero h1 .grad-text{
  background:linear-gradient(100deg,#f2732f 0%,#f89b3e 22%,#ffffff 42%,#ffd9a8 58%,#f89b3e 78%,#f2732f 100%);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(242,115,47,.35));
  animation:holoText 7s linear infinite;
}
.wd-hero p{color:var(--ink-dim)}

/* =====================================================================
   PROOF band — three holo chips beside the claim
   ===================================================================== */
.wd-proof{background:transparent;padding:clamp(2.2rem,4vw,3.2rem) 0 clamp(2.6rem,4vw,3.6rem)}
.wd-proof-copy h2{color:#fff}
.wd-proof-copy p{color:var(--ink-dim)}
.wd-proof-card{padding:1.05rem 1.35rem}
.wd-proof-card strong{font-family:var(--font-display);color:#fff}
.wd-proof-card span{color:var(--ink-dim)}

/* =====================================================================
   SHOWCASE — dark glass browser frames with expensive hover physics
   ===================================================================== */
.wd-showcase{background:transparent}
.wd-showcase .section-head p{color:var(--ink-dim)}

.wd-card{border-radius:18px}
.wd-frame{
  position:relative;isolation:isolate;border-radius:16px;
  border:1px solid transparent;
  background:
    linear-gradient(165deg,rgba(13,34,72,.94),rgba(5,17,40,.97)) padding-box,
    var(--holo-border) border-box;
  box-shadow:0 24px 55px -26px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s cubic-bezier(.2,.7,.2,1);
}
.wd-card:hover .wd-frame,.wd-card:focus-visible .wd-frame{
  transform:translateY(-10px) scale(1.02);
  box-shadow:
    0 36px 80px -26px rgba(0,0,0,.9),
    0 0 0 1px rgba(248,155,62,.42),
    0 0 46px -8px rgba(242,115,47,.48),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.wd-card:focus-visible{outline:none}
/* one-shot foil sweep across the frame on hover */
.wd-frame::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.15) 49%,rgba(86,224,255,.10) 55%,transparent 66%);
  transform:translateX(-135%) skewX(-8deg);
  transition:transform .95s cubic-bezier(.3,.6,.2,1);
}
.wd-card:hover .wd-frame::after,.wd-card:focus-visible .wd-frame::after{transform:translateX(135%) skewX(-8deg)}
.wd-bar{position:relative;z-index:2;background:rgba(6,18,42,.94);border-bottom:1px solid rgba(120,160,255,.14)}
.wd-url{background:rgba(255,255,255,.07)}
.wd-shot{position:relative;z-index:1;transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .45s ease}
.wd-card:hover .wd-shot{transform:scale(1.035);filter:brightness(1.06) saturate(1.06)}
.wd-meta h3{font-family:var(--font-display)}
.wd-meta p{color:var(--ink-dim)}
.wd-tags span{background:rgba(8,26,58,.75);border:1px solid rgba(120,160,255,.22);color:var(--ink-dim)}
.wd-open{color:var(--o2)}
.wd-card:hover .wd-open{color:#ffd9a8}

/* =====================================================================
   WHAT'S INCLUDED — holo feature tiles
   ===================================================================== */
.wd-included{background:transparent}
.wd-feature{padding:1.25rem 1.3rem}
.wd-feature .fi{box-shadow:0 10px 26px -10px rgba(242,115,47,.65),inset 0 1px 0 rgba(255,255,255,.35)}
.wd-feature strong{font-family:var(--font-display);color:#fff}
.wd-feature span{color:var(--ink-dim)}

/* =====================================================================
   PROCESS — four holo steps
   ===================================================================== */
.wd-process{background:transparent}
.wd-step{padding:1.4rem 1.35rem}
.wd-step h4{color:#fff;font-size:1.02rem}
.wd-step p{color:var(--ink-dim)}
.wd-step .num{filter:drop-shadow(0 0 14px rgba(242,115,47,.4))}

/* =====================================================================
   CTA band — from flat orange slab to a holo glass panel
   ===================================================================== */
.cta-band{background:transparent;padding:14px 22px 40px;overflow:visible}
.cta-band::after{display:none}
.cta-band .cta-inner{
  text-align:left;
  padding:clamp(2.2rem,4.5vw,3.2rem) clamp(1.4rem,4vw,3rem);
}
.cta-inner h2{color:#fff}
.cta-inner p{color:var(--ink-dim)}
.cta-band .btn-primary{
  background:linear-gradient(135deg,#f2732f,#f89b3e);color:#fff;
  box-shadow:0 12px 30px -10px rgba(242,115,47,.7),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -3px 8px rgba(120,40,0,.35);
}
.cta-band .btn-primary:hover{
  background:linear-gradient(135deg,#f2732f,#f89b3e);
  box-shadow:0 16px 40px -10px rgba(242,115,47,.85),inset 0 1px 0 rgba(255,255,255,.5);
}
.cta-band .btn-ghost{color:var(--ink);border-color:transparent}
.cta-band .btn-ghost:hover{
  color:#fff;border-color:transparent;
  background:linear-gradient(160deg,#0a2450,#061a3c) padding-box,var(--holo-border) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 24px -6px rgba(86,224,255,.4);
}

/* =====================================================================
   Reveal stagger for this page's grids
   ===================================================================== */
.wd-proof-cards .reveal.in:nth-child(2),.wd-grid .reveal.in:nth-child(2),
.wd-feature-grid .reveal.in:nth-child(2),.wd-steps .reveal.in:nth-child(2){transition-delay:.08s}
.wd-proof-cards .reveal.in:nth-child(3),.wd-grid .reveal.in:nth-child(3),
.wd-feature-grid .reveal.in:nth-child(3),.wd-steps .reveal.in:nth-child(3){transition-delay:.16s}
.wd-grid .reveal.in:nth-child(4),.wd-feature-grid .reveal.in:nth-child(4),
.wd-steps .reveal.in:nth-child(4){transition-delay:.24s}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:960px){
  .wd-proof-inner{gap:1.6rem}
}
@media (max-width:560px){
  .wd-hero-actions .btn{flex:1 1 auto;justify-content:center}
  .wd-proof-cards{width:100%}
  .wd-proof-card{flex:1 1 100%}
  .cta-band{padding:8px 16px 30px}
}

/* Reduced motion: home.css already freezes animations; keep sweeps hidden */
@media (prefers-reduced-motion:reduce){
  .wd-frame::after{display:none}
}