/* ============================================================
   Digital Fracture — clean stylesheet
   Full background image · uniform width · no borders.
   Section text sits over the image; CARDS are white frosted glass.
   ============================================================ */
   
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --maxw:1440px;
  --gutter:clamp(20px,5vw,40px);
  --bg:#16130f;
  --text:#F3ECDD;          /* light text over the image */
  --muted:#D8CFBE;         /* light secondary over the image */
  --ink:#0c0a07;           /* near-black text on white glass cards */
  --ink-muted:#3c362c;     /* darker secondary on white glass */
  --ink-head:#3c362c;      /* headings = muted black (matches body) */
  --ember:#FF5A1F;
  --line:rgba(236,228,212,.14);
  --shadow:0 1px 18px rgba(0,0,0,.6);   /* text legibility over image */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink-muted);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
/* full-page world background across the whole page */
/* image lives in a var so a page only has to override one value */
body{--page-bg:url("../img/page-background/bg-16-9/webp/the-junk-yard.webp")}
/* fill the whole viewport — edge to edge, no bars (crops to fit on off-ratio screens) */
body::before{content:"";position:fixed;inset:0;z-index:-2;background:#181410 var(--page-bg) center/cover no-repeat}
/* small pure-CSS fade-in (no JS — does NOT depend on main.js, so it can't break on a deploy mismatch) */
@keyframes df-bg{from{opacity:0}to{opacity:1}}
body::before{animation:df-bg 2.5s ease both}
/* the gentle opacity fade is kept even under reduced-motion (it's not the kind of motion that
   setting targets) — this is why phones with "Reduce Motion" on still get the fade */
/* per-page world backgrounds (override the default per page via a body class) */
body.bg-junkyard{--page-bg:url("../img/page-background/bg-16-9/webp/the-junk-yard.webp")}
/* animated atmosphere is rendered on a canvas, per area — see js/main.js */
.fx-canvas{position:fixed;inset:0;z-index:-1;pointer-events:none}
body.bg-forge{--page-bg:url("../img/page-background/bg-16-9/webp/the forge.webp")}
body.bg-workbench{--page-bg:url("../img/page-background/bg-16-9/webp/the-work-bench.webp")}
body.bg-beacon{--page-bg:url("../img/page-background/bg-16-9/webp/the-beacon.webp")}
body.bg-engine-room{--page-bg:url("../img/page-background/bg-16-9/webp/the-engine-room.webp")}
body.bg-signal-shack{--page-bg:url("../img/page-background/bg-16-9/webp/the-signal-shack.webp")}
body.bg-gateway{--page-bg:url("../img/page-background/bg-16-9/webp/the-gateway.webp")}
body.bg-404{--page-bg:url("../img/404/webp/404-16-9/404-nao-bot.webp")}
/* ultrawide (≥2:1): swap to the purpose-cropped 21:9 set so the world fills the screen with a
   chosen crop (not a centre-chopped 16:9). Browser downloads only the matching set. */
@media (min-aspect-ratio:2/1){
  body{--page-bg:url("../img/page-background/bg-21-9/webp/the-junk-yard.webp")}
  body.bg-junkyard{--page-bg:url("../img/page-background/bg-21-9/webp/the-junk-yard.webp")}
  body.bg-forge{--page-bg:url("../img/page-background/bg-21-9/webp/the-forge.webp")}
  body.bg-workbench{--page-bg:url("../img/page-background/bg-21-9/webp/the-work-bench.webp")}
  body.bg-beacon{--page-bg:url("../img/page-background/bg-21-9/webp/the-beacon.webp")}
  body.bg-engine-room{--page-bg:url("../img/page-background/bg-21-9/webp/the-engine-room.webp")}
  body.bg-signal-shack{--page-bg:url("../img/page-background/bg-21-9/webp/the-signal-shack.webp")}
  body.bg-gateway{--page-bg:url("../img/page-background/bg-21-9/webp/the-gateway.webp")}
  body.bg-404{--page-bg:url("../img/404/webp/404-21-9/404-nao-bot.webp")}
}
h1,h2,h3,h4,h5{font-family:"Space Grotesk",sans-serif;line-height:1.08;letter-spacing:-.02em;font-weight:700}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---- sections: vertical rhythm only, no panel ---- */
main > section{padding-block:clamp(48px,7vw,92px)}
/* section intro text sits over the image → light + shadow */
main > section > .container > .eyebrow{margin-bottom:18px}
main > section > .container > h2,
main > section > .container > .lead,
main > section > .container > .prose{text-shadow:var(--shadow)}

/* ---- shared bits ---- */
.eyebrow{font-family:"Space Grotesk";font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ember)}
.lead{color:var(--ink-muted);font-size:18px;max-width:68ch;margin-top:10px}
section h2{font-size:clamp(28px,4.2vw,46px);margin-bottom:6px;color:var(--text)}
.prose{font-size:18px;line-height:1.65;color:var(--ink-muted);max-width:70ch}

.btn{display:inline-block;font-family:"Space Grotesk";font-weight:500;font-size:15px;padding:14px 24px;border-radius:8px;transition:transform .2s ease}
.btn--primary{background:var(--ember);color:#1a0c04}
.btn--ghost{color:var(--text);background:rgba(20,16,12,.42);backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%)}
.btn:hover{transform:translateY(-2px)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.link{color:var(--ember);font-family:"Space Grotesk";font-weight:500;font-size:15px}
.link:hover{opacity:.75}

/* ============================================================ NAV (translucent, off-black text, orange hover) */
.site-nav{position:sticky;top:0;z-index:100}
.site-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.24));backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%)}
.site-nav .container{display:flex;align-items:center;gap:28px;padding-block:16px}
.brand{display:inline-flex;align-items:center;gap:9px;font-family:"Space Grotesk";font-weight:700;font-size:18px;color:#191510}
.brand-bot{height:30px;width:auto;display:block}
.brand span{color:var(--ember)}
.menu{display:flex;gap:24px;margin-left:auto;flex-wrap:wrap}
.menu a{font-size:15px;color:#191510}
.menu a:hover{color:var(--ember)}
/* desktop dropdowns */
.nav-group{position:relative;display:flex;align-items:center}
.nav-top{font-size:15px;color:#191510;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav-top:hover{color:var(--ember)}
.nav-group > .nav-top::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.65}
.nav-group::after{content:"";position:absolute;top:100%;left:0;right:0;height:18px;display:none}
.nav-group:hover::after,.nav-group:focus-within::after{display:block}
.nav-drop{position:absolute;top:calc(100% + 14px);left:0;z-index:120;min-width:212px;display:none;flex-direction:column;padding:8px 0;border-radius:16px;background:rgba(22,17,12,.5);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.nav-group:hover .nav-drop,.nav-group:focus-within .nav-drop{display:flex}
.nav-drop a{color:var(--text)}
.nav-drop a:hover{color:var(--ember)}
.nav-drop a{padding:10px 18px;font-size:15px;white-space:nowrap}
.nav-cta{font-family:"Space Grotesk";font-weight:500;font-size:14px;background:var(--ember);color:#1a0c04;padding:10px 18px;border-radius:6px}
.nav-toggle{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:10px}
.nav-toggle span{display:block;width:22px;height:2px;background:#191510;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.site-nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
.site-nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:760px){
  .nav-toggle{display:flex}
  .brand{margin-right:auto}
  .nav-cta{display:none}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:6px 0;background:rgba(18,14,10,.72);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%)}
  .site-nav.nav-open .menu{display:flex}
  .menu a{padding:13px var(--gutter);font-size:16px;color:var(--muted)}
  .menu a:hover{color:var(--ember)}
  .menu .nav-group{flex-direction:column;align-items:stretch;width:100%}
  .menu .nav-top{padding:13px var(--gutter);font-weight:600;color:var(--ember);background:transparent;-webkit-tap-highlight-color:transparent}
  .menu .nav-top:hover{color:var(--ember)}
  .menu .nav-group > .nav-top::after{display:none}
  .menu .nav-drop{position:static;display:flex;margin:0;padding:0 0 6px;background:none;box-shadow:none;border-radius:0;min-width:0}
  .menu .nav-drop a{padding:10px var(--gutter) 10px calc(var(--gutter) + 18px);font-size:15px;color:var(--muted)}
  .menu .nav-drop a:hover{color:var(--ember)}
}

/* ============================================================ HERO (text over image) */
.hero{position:relative;overflow:hidden;padding-block:clamp(70px,11vw,150px)}
.hero .container{position:relative;min-height:clamp(360px,52vh,540px);display:flex;flex-direction:column;justify-content:center}
/* the bot stands in the world (page background), doing its idle animation */
.hero-robot{flex:0 0 auto;align-self:center;height:clamp(360px,40vw,620px);width:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 16px 28px rgba(0,0,0,.4));animation:robot-idle 5.5s ease-in-out infinite}
.hero .container > :not(.hero-robot){position:relative;z-index:1}
@keyframes robot-idle{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(-1.5deg)}}
@media(prefers-reduced-motion:reduce){.hero-robot{animation:none}}
/* left-side bot variant + mirrored hero (panel shifts right so the left bot has room) */
.hero--mirror .panel{flex-direction:row-reverse}
@media(max-width:760px){.hero .panel,.hero--mirror .panel{flex-direction:column;align-items:flex-start;justify-content:flex-start;min-height:auto}.hero-robot{align-self:center;height:clamp(170px,42vw,240px)}}
.hero .tag{font-family:"Space Grotesk";font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin-bottom:20px;text-shadow:var(--shadow)}
.hero h1{font-size:clamp(40px,7vw,84px);letter-spacing:-.035em;margin-bottom:22px;max-width:18ch;text-shadow:var(--shadow)}
.hero h1 span{color:var(--ember)}
.hero .desc{font-size:18px;color:var(--ink-muted);max-width:60ch}

/* ============================================================ CARDS = white frosted glass + black text */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,32px);margin-top:48px}
.cell{background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.24));backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-radius:16px;padding:clamp(24px,3vw,34px);color:var(--ink)}
.cell h3{font-size:21px;margin-bottom:10px;color:var(--ink-head)}
.cell h4{font-size:19px;margin-bottom:8px;color:var(--ink-head)}
.cell p{font-size:18px;color:var(--ink-muted);margin-bottom:14px}
/* feature lists inside panels/cards */
.cell ul,.panel ul{list-style:none;margin:14px 0}
.cell li,.panel li{position:relative;padding-left:22px;margin-bottom:8px;color:var(--ink-muted)}
.cell li::before,.panel li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--ember)}
.panel li{margin-bottom:12px;line-height:1.55}
.panel > h3{margin-top:26px;margin-bottom:8px}
.panel li strong{color:var(--ink-head);font-weight:600}
/* pricing */
.price{font-family:"Space Grotesk";font-weight:700;font-size:24px;color:var(--ink-head);margin:6px 0 4px}
/* ---- forms ---- */
.contact-form{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-family:"Space Grotesk";font-weight:500;font-size:14px;color:var(--ink-head)}
.form-group input,.form-group select,.form-group textarea{font-family:inherit;font-size:16px;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.25);background:rgba(255,255,255,.16);color:var(--ink);min-height:48px}
.form-group select option{color:#111}
.form-group textarea{min-height:150px;resize:vertical}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:2px solid var(--ember);outline-offset:2px;border-color:var(--ember)}
.submit-btn{align-self:flex-start;font-family:"Space Grotesk";font-weight:500;font-size:15px;padding:14px 30px;border:0;border-radius:8px;background:var(--ember);color:#1a0c04;cursor:pointer;transition:transform .2s ease}
.submit-btn:hover{transform:translateY(-2px)}
.submit-btn:disabled{opacity:.6;cursor:default}
.form-status{font-size:14px;color:var(--ink-muted)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.toast-container{position:fixed;bottom:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:10px;background:rgba(20,16,12,.92);color:var(--text);max-width:360px;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}
.toast.show{opacity:1;transform:none}
.toast.hide{opacity:0}
.toast-success{border-left:3px solid #2ecc71}
.toast-error{border-left:3px solid #e74c3c}
.toast-close{margin-left:auto;background:none;border:0;color:inherit;font-size:18px;cursor:pointer}
/* ---- FAQ accordion ---- */
.faq-cat{font-family:"Space Grotesk";font-weight:700;font-size:20px;color:var(--ink-head);margin:30px 0 6px}
.faq-cat:first-child{margin-top:0}
.faq-item{border-bottom:1px solid rgba(0,0,0,.12)}
.faq-item summary{cursor:pointer;list-style:none;padding:16px 0;font-family:"Space Grotesk";font-weight:500;font-size:17px;color:var(--ink-head);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:24px;line-height:1;color:var(--ember);flex:none}
.faq-item[open] summary::after{content:"\2013"}
.faq-answer{padding:0 0 18px;color:var(--ink-muted)}
.faq-answer p{margin-bottom:10px}
.faq-answer a{color:var(--ember)}
@media(max-width:820px){.grid-3{grid-template-columns:1fr;gap:20px}}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,32px);margin-top:48px}
@media(max-width:820px){.grid-2{grid-template-columns:1fr;gap:20px}}

/* ============================================================ GLASS TEXT PANELS (frosted, dark text) */
.panel{
  background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.24));
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border-radius:16px;padding:clamp(26px,3.4vw,44px);color:var(--ink)
}
.panel h1,.panel h2,.panel h3,.panel h4,
.studio .container h2,.how .container h2,.cta .container h2{color:var(--ink-head);text-shadow:none}
.panel .lead,.panel .desc,.panel .prose,
.studio .prose,.how .prose,.cta .lead{color:var(--ink-muted);text-shadow:none}
.panel .tag{color:var(--ember)}
.numbers .stat .num{color:var(--ink-muted);text-shadow:none}
.numbers .stat .label{color:var(--ink-muted);text-shadow:none}
.hero .panel{max-width:none;min-height:clamp(360px,40vh,440px);display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,56px)}
.hero .hero-text{flex:0 1 auto;max-width:60ch}
/* card sections: heading sits over the world, cards stay independent (no glass bar) */
.services .panel,.featured .panel{background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none;padding:0}
.services .panel > h2,.featured .panel > h2{color:var(--text);display:inline-block;background:rgba(20,16,12,.42);backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);padding:.35em .7em;border-radius:14px;text-shadow:none}
/* keep these glass headers static so the blur doesn't pop */
html.js .services .panel > h2.r,html.js .featured .panel > h2.r{opacity:1;transform:none;transition:none}
.services .panel > .lead,.featured .panel > .lead{display:none}
/* fill the wide prose panels: heading on top, body in two columns */
.panel .prose{max-width:none}

/* ============================================================ STATS (over image) */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);margin-top:8px;text-align:center}
.stat .num{font-family:"Space Grotesk";font-weight:700;font-size:clamp(46px,6vw,76px);line-height:1;letter-spacing:-.03em;color:var(--text);text-shadow:var(--shadow)}
.stat .label{color:var(--muted);font-size:14px;margin-top:10px;text-shadow:var(--shadow)}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr;gap:32px}}

/* ============================================================ CTA */
.cta h2{font-size:clamp(30px,4.5vw,52px);margin-bottom:14px}
.cta .lead{margin-bottom:26px}
.cta .panel .lead{max-width:none}

/* ============================================================ FOOTER (white frosted glass, black text) */
.site-footer{margin:0;background:rgba(18,14,10,.72);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);color:var(--text)}
.site-footer .container{padding-block:clamp(40px,6vw,64px)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.footer-brand{display:inline-flex;align-items:center;gap:9px;font-family:"Space Grotesk";font-weight:700;font-size:18px;margin-bottom:12px;color:var(--text)}
.footer-brand span{color:var(--ember)}
.footer-tagline{color:var(--muted);font-size:15px;max-width:34ch}
.footer-social{display:flex;gap:18px;margin-top:18px}
.footer-social a{color:var(--muted);font-size:14px}
.footer-social a:hover{color:var(--ember)}
.footer-col h5{font-family:"Space Grotesk";font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);margin-bottom:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer-col a{color:var(--muted);font-size:15px}
.footer-col a:hover{color:var(--ember)}
.footer-bottom{margin-top:40px;padding-top:24px;color:var(--muted);font-size:14px}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--ember)}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* ---- scroll reveal (JS-gated; the .r class is added by main.js, so no-JS = content just shows) ---- */
html.js .r{opacity:0;transform:translateY(110px) scale(.90);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
html.js .r.in{opacity:1;transform:none}
/* glass cards stay static (blur never pops); their CONTENT reveals instead */
html.js .cell > *{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
html.js .cell.in > *{opacity:1;transform:none}

a:focus-visible,button:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html.js .r,html.js .cell > *{opacity:1!important;transform:none!important}}