/* =====================================================================
   Backup & Cloud (services.html) — dark "Holo" skin
   Loads LAST: styles.css → services.css → home.css → THIS FILE.
   Overrides the old light look; never edits the originals.
   ===================================================================== */

/* ---------- Page shell ---------- */
body{background:var(--navy-0);color:var(--ink)}

/* Display type: home.css covers h2 — extend Space Grotesk to h1/h3/h4 */
h1,h3,h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;color:#fff}

/* Align old .container pages with the holo .wrap gutter */
.container{max-width:var(--wrap);padding:0 22px}

/* ---------- Old light-header leftovers (styles.css) neutralised ---------- */
.nav a::after,
.drop-trigger::after{display:none}
.drop-trigger.active{color:#fff;background:rgba(255,255,255,.06)}
.nav-drop a.active{background:rgba(242,115,47,.16);color:#fff}
.nav-drop a.active:hover{background:rgba(242,115,47,.24)}

/* ---------- Hero ---------- */
.svc-hero{background:transparent;color:var(--ink);padding:clamp(3.2rem,7vw,5.4rem) 0 clamp(2.4rem,5vw,3.6rem)}
.svc-hero .hero-bg{display:none} /* the fixed holo backdrop is the sky now */
.svc-hero h1{color:#fff;font-weight:700;letter-spacing:-.025em}
.svc-hero p{color:var(--ink-dim)}
.svc-hero-stats{margin-top:2.4rem;gap:1.2rem 2.6rem}
.svc-hero-stats div{position:relative;padding-left:14px}
.svc-hero-stats div::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,#f2732f,#f89b3e 60%,transparent);
  box-shadow:0 0 10px rgba(242,115,47,.45)}
.svc-hero-stats strong{font-family:var(--font-display);font-weight:700;
  background:linear-gradient(120deg,#f2732f,#f89b3e,#ffd9a8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(242,115,47,.25))}
.svc-hero-stats span{color:var(--ink-faint)}

/* ---------- Section shells go transparent (backdrop shows through) ---------- */
.services-section{background:transparent}
.svc-why{background:transparent}
.section-head p{color:var(--ink-dim)}

/* ---------- Service cards → holo glass ---------- */
/* Free the .holo foil layer from the old 3px top-bar ::before geometry */
.service-card::before,
.service-card:hover::before{height:100%;transform:none;transition:none}
.service-card{padding:2rem 1.8rem}
.service-card h3{font-size:1.3rem;color:#fff}
.service-card p{color:var(--ink-dim)}
.svc-pow{color:var(--ink-faint)}
.svc-pow b{color:var(--o2)}
.svc-icon{background:linear-gradient(160deg,rgba(242,115,47,.16),rgba(86,224,255,.08));
  border:1px solid rgba(248,155,62,.3);border-radius:16px;color:#ffd9a8;
  filter:drop-shadow(0 0 8px rgba(242,115,47,.25))}
.service-card:hover .svc-icon{background:linear-gradient(135deg,#f2732f,#f89b3e);border-color:transparent;color:#fff}
.svc-list li{color:var(--ink-dim)}
.svc-list li::before{box-shadow:0 0 8px rgba(242,115,47,.5)}
.svc-foot{border-top:1px solid rgba(120,160,255,.16)}

/* Orange price accents */
.svc-price .amt{
  background:linear-gradient(120deg,#f2732f,#f89b3e,#ffd9a8);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 0 12px rgba(242,115,47,.3))}
.svc-price.poa .amt{background:linear-gradient(120deg,#f2732f,#f89b3e,#ffd9a8);
  -webkit-background-clip:text;background-clip:text}
.svc-price .per{color:var(--ink-faint)}
.svc-annual{color:var(--ink-faint)}
.svc-freebadge{background:linear-gradient(120deg,rgba(242,115,47,.2),rgba(248,155,62,.1));
  color:#ffcf9e;border:1px solid rgba(248,155,62,.38)}

/* ---------- Why band tiles → holo glass ---------- */
.svc-why-item{padding:1.5rem 1.4rem}
.svc-why-item .wi{background:linear-gradient(160deg,rgba(242,115,47,.16),rgba(86,224,255,.08));
  border:1px solid rgba(248,155,62,.3);color:#ffd9a8}
.svc-why-item h4{color:#fff;font-size:1.05rem}
.svc-why-item p{color:var(--ink-dim)}

/* ---------- CTA band → holo panel ---------- */
.cta-band{background:transparent;color:var(--ink)}
.cta-band::after{display:none} /* white radial overlay from styles.css */
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  text-align:left;padding:clamp(2.4rem,4.5vw,3.4rem) clamp(1.5rem,4vw,3rem)}
.cta-inner h2{color:#fff}
.cta-inner p{color:var(--ink-dim);margin:12px 0 0} /* kill home.css margin:auto centring under the h2 */
.cta-actions{display:flex;gap:1rem;flex-wrap:wrap}
/* Restore holo primary/ghost buttons (styles.css painted them white on the old orange band) */
.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)}
.btn-lg{padding:15px 30px;font-size:16px}

/* ---------- Reveal stagger for this page's grids ---------- */
.card-grid .reveal.in:nth-child(2),.svc-why-grid .reveal.in:nth-child(2){transition-delay:.07s}
.card-grid .reveal.in:nth-child(3),.svc-why-grid .reveal.in:nth-child(3){transition-delay:.14s}
.card-grid .reveal.in:nth-child(4),.svc-why-grid .reveal.in:nth-child(4){transition-delay:.21s}
.card-grid .reveal.in:nth-child(5),.svc-why-grid .reveal.in:nth-child(5){transition-delay:.28s}
.card-grid .reveal.in:nth-child(6),.svc-why-grid .reveal.in:nth-child(6){transition-delay:.35s}

/* ---------- Responsive ---------- */
@media (max-width:760px){
  .cta-inner{flex-direction:column;align-items:flex-start}
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 auto}
}
@media (max-width:560px){
  .svc-hero-stats{gap:1rem 1.6rem}
}