/* =============================================================
   ShipCube Core — shipcubecore.com
   Theme 1 · POWER GRID — dark industrial graphite + strategic amber
   Aesthetic: Power → Infrastructure → Connectivity → Data Centers
   Contents:
   1. Design tokens (light/dark)      6. Hero
   2. Base / reset + grid backdrop    7. Section bands & components
   3. Layout helpers                  8. Roadmap / phases
   4. Reveal animations               9. Contact / footer
   5. Header / nav / mobile menu     10. Responsive
   ============================================================= */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  /* Power Grid palette */
  --bg-primary:#080B0F; --bg-secondary:#10151B; --bg-elevated:#171D24;
  --amber-primary:#F5A623; --amber-bright:#FFBF3F; --amber-deep:#B9781A;
  --green:#43C08A; --red:#E5674F;

  --font-display:'Archivo',Arial,sans-serif;
  --font-body:'IBM Plex Sans',Arial,sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;
  --maxw:1180px;

  /* semantic — DARK (default / primary Power Grid experience) */
  --bg:var(--bg-primary); --bg2:var(--bg-secondary); --bg3:var(--bg-elevated);
  --fg:#F4F6F8; --fg-muted:#9DA8B3; --fg-dim:#68727E;
  --accent:var(--amber-primary); --accent-bright:var(--amber-bright);
  --accent-text:var(--amber-primary);          /* amber reads well on graphite */
  --cta-bg:var(--amber-primary); --cta-fg:#0A0D11;
  --border:rgba(245,166,35,.18);
  --border-soft:rgba(245,166,35,.10);
  --grid-line:rgba(245,166,35,.055);
  --header-bg:rgba(8,11,15,.72);
  --shadow-cta:rgba(245,166,35,.28);
  --glow:rgba(245,166,35,.10);
  --feature-bg:#0B0F14;
}
html[data-theme="light"]{
  /* warm off-white Power Grid light mode */
  --bg:#FAF7F1; --bg2:#F2ECE1; --bg3:#EAE2D3;
  --fg:#1A1D21; --fg-muted:#5C6470; --fg-dim:#8A8F98;
  --accent-text:#B9781A;                        /* deeper amber for AA on light */
  --cta-bg:var(--amber-primary); --cta-fg:#1A1206;
  --border:rgba(180,120,20,.22);
  --border-soft:rgba(180,120,20,.12);
  --grid-line:rgba(180,120,20,.06);
  --header-bg:rgba(250,247,241,.78);
  --shadow-cta:rgba(180,120,20,.24);
  --glow:rgba(245,166,35,.08);
  --feature-bg:#12100B;                          /* keep feature bands dark & cinematic */
}

/* ---------- 2. BASE / RESET + GRID BACKDROP ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  position:relative;
  background:var(--bg); color:var(--fg); font-family:var(--font-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .3s ease; overflow-x:hidden;
}
/* faint technical grid across the whole page (fixed, non-interactive) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 55%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 0%, #000 55%, transparent 100%);
}
body > *{position:relative; z-index:1;}
.mono{font-family:var(--font-mono);}
a{color:inherit;}
img,svg{display:block;max-width:100%;}
strong,b{font-weight:700;}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

.skip-link{
  position:absolute; left:16px; top:-48px; z-index:200;
  background:var(--accent); color:#0A0D11; font-family:var(--font-mono);
  font-size:13px; padding:9px 16px; border-radius:4px; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{top:12px;}

/* ---------- 3. LAYOUT HELPERS ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media(max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- 4. REVEAL ANIMATIONS ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,.8,.3,1), transform .8s cubic-bezier(.16,.8,.3,1);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal-stagger > *{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal-stagger.in > *{opacity:1; transform:translateY(0);}
.reveal-stagger.in > *:nth-child(1){transition-delay:.02s;}
.reveal-stagger.in > *:nth-child(2){transition-delay:.08s;}
.reveal-stagger.in > *:nth-child(3){transition-delay:.14s;}
.reveal-stagger.in > *:nth-child(4){transition-delay:.2s;}
.reveal-stagger.in > *:nth-child(5){transition-delay:.26s;}
.reveal-stagger.in > *:nth-child(6){transition-delay:.32s;}
.reveal-stagger.in > *:nth-child(7){transition-delay:.38s;}
@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger>*{opacity:1!important; transform:none!important; transition:none!important;}
  html{scroll-behavior:auto;}
  *{scroll-behavior:auto!important; animation:none!important;}
}

/* ---------- TYPE ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-text); margin-bottom:16px; display:inline-flex; align-items:center; gap:9px;
}
/* small power-node before the eyebrow label */
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
}
h2.h{
  font-family:var(--font-display); font-weight:850;
  font-size:clamp(30px,4.2vw,46px); line-height:1.02; letter-spacing:-.02em; color:var(--fg); margin-bottom:12px;
}
.dek{color:var(--fg-muted); font-size:16px; max-width:60ch;}

/* Power-line section separator: thin amber gradient with a centre node */
section.band{padding:92px 0; border-top:1px solid transparent; position:relative;}
section.band::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
}
section.band .head{margin-bottom:42px;}
@media(max-width:640px){ section.band{padding:62px 0;} }

/* ---------- 5. HEADER / NAV ---------- */
header.site{position:sticky; top:0; z-index:60; background:var(--header-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border-soft); transition:border-color .3s, background .3s;}
header.site.scrolled{border-bottom-color:var(--border); box-shadow:0 6px 24px rgba(0,0,0,.28);}
header.site .bar{display:flex; align-items:center; justify-content:space-between; height:72px; gap:18px;}

.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--fg);}
.brand-mark{width:34px; height:34px; flex:none; filter:drop-shadow(0 0 6px var(--glow));}
.brand-lockup{display:flex; flex-direction:column; line-height:1;}
.brand-name{font-family:var(--font-display); font-weight:850; font-size:18px; letter-spacing:-.01em;}
.brand-name b{color:var(--accent-text); font-weight:850;}
.brand-tag{font-family:var(--font-mono); font-weight:500; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); margin-top:4px;}
@media(max-width:520px){ .brand-tag{display:none;} }

.nav-actions{display:flex; align-items:center; gap:18px;}
nav.dots{display:flex; align-items:center; gap:22px;}
nav.dots a{position:relative; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted); text-decoration:none; padding:6px 0; transition:color .2s;}
nav.dots a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--accent); transition:right .25s ease; box-shadow:0 0 6px var(--accent);}
nav.dots a:hover,nav.dots a[aria-current="true"]{color:var(--accent-text);}
nav.dots a:hover::after,nav.dots a[aria-current="true"]::after{right:0;}

.theme-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--border); background:transparent; color:var(--fg); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, transform .2s, border-color .2s, box-shadow .2s;}
.theme-btn:hover{background:var(--accent); color:#0A0D11; transform:translateY(-1px); border-color:var(--accent); box-shadow:0 0 16px var(--shadow-cta);}
.theme-btn svg{width:17px;height:17px;}

.menu-btn{display:none; width:38px;height:38px; border:1px solid var(--border); border-radius:9px; background:transparent; color:var(--fg); cursor:pointer; align-items:center; justify-content:center;}
.menu-btn svg{width:20px;height:20px;}

.mobile-nav{display:none; border-top:1px solid var(--border-soft); background:var(--bg2);}
.mobile-nav a{display:block; font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-muted); text-decoration:none; padding:15px 32px; border-bottom:1px solid var(--border-soft); transition:color .2s, background .2s, padding-left .2s;}
.mobile-nav a:hover,.mobile-nav a:focus-visible{color:var(--accent-text); background:var(--bg3); padding-left:38px;}
@media(max-width:640px){ .mobile-nav a{padding:15px 20px;} .mobile-nav a:hover{padding-left:26px;} }

@media(max-width:900px){
  nav.dots{display:none;}
  .menu-btn{display:flex;}
  header.site.open .mobile-nav{display:block;}
}

/* ---------- 6. HERO ---------- */
.hero{padding:84px 0 66px; position:relative; overflow:hidden;}
/* cinematic amber illumination */
.hero::before{
  content:""; position:absolute; top:-34%; right:-8%; width:62%; height:150%;
  background:radial-gradient(circle, var(--accent) 0%, transparent 66%); opacity:.12; pointer-events:none;
}
/* denser technical grid + transmission feel behind hero */
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent 75%);
}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; position:relative;}
.hero h1{
  font-family:var(--font-display); font-weight:900; font-size:clamp(38px,5.6vw,70px); line-height:.97;
  letter-spacing:-.03em; color:var(--fg); margin-bottom:24px;
}
.hero h1 .hl{color:var(--accent-text); text-shadow:0 0 30px var(--glow);}
.hero .lede{font-size:17px; color:var(--fg-muted); max-width:50ch; margin-bottom:28px; line-height:1.6;}

.status-row{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:32px;}
.chip{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:6px; border:1px solid var(--border-soft); background:var(--bg2); transition:border-color .2s;}
.chip:hover{border-color:var(--border);}
.chip .dot{width:7px;height:7px;border-radius:50%; flex:none;}
.chip.ok{color:var(--green);} .chip.ok .dot{background:var(--green); box-shadow:0 0 6px var(--green);}
.chip.open{color:var(--accent-text);} .chip.open .dot{background:var(--accent); box-shadow:0 0 7px var(--accent); animation:nodePulse 2.8s ease-in-out infinite;}
@keyframes nodePulse{0%,100%{opacity:1;} 50%{opacity:.45;}}

.cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.btn{position:relative; font-family:var(--font-body); font-weight:700; font-size:15px; padding:16px 27px; border-radius:5px; text-decoration:none; display:inline-flex; align-items:center; gap:9px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s, color .18s, background .18s; border:1.5px solid transparent; cursor:pointer;}
.btn-primary{background:var(--cta-bg); color:var(--cta-fg); box-shadow:0 0 0 rgba(245,166,35,0);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px var(--shadow-cta);}
.btn-ghost{color:var(--fg); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent-text); box-shadow:0 0 18px var(--glow);}

/* network diagram */
.net-box{position:relative;}
.net-box svg{width:100%; overflow:visible; filter:drop-shadow(0 0 12px var(--glow));}
.flow{stroke-dasharray:5 6; animation:flow 2.6s linear infinite;}
@keyframes flow{to{stroke-dashoffset:-44;}}
.ping{transform-origin:center; animation:ping 2.6s ease-out infinite;}
@keyframes ping{0%{transform:scale(.5);opacity:.9;} 70%{transform:scale(2.6);opacity:0;} 100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .flow,.ping,.chip.open .dot{animation:none;} }

/* ---------- 7. BAND VARIANTS & COMPONENTS ---------- */
/* feature band = deep cinematic graphite panel with amber grid + edge lines */
.band-feature{background:var(--feature-bg); color:#F4F6F8; border-top:none; overflow:hidden;}
.band-feature::before{background:linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.5;}
.band-feature::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(rgba(245,166,35,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,166,35,.05) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse 90% 90% at 20% 10%, #000, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 20% 10%, #000, transparent 70%);
}
.band-feature .wrap{position:relative; z-index:1;}
.band-feature .eyebrow{color:var(--accent-bright);}
.band-feature h2.h{color:#F4F6F8;}
.band-feature .dek{color:rgba(244,246,248,.74);}

/* card surface helper (shared look for boards / grids / callouts) */
.board,.two-col,.fact-grid{border:1px solid var(--border-soft); border-radius:8px; overflow:hidden; background:var(--border-soft);}
.board{display:grid; grid-template-columns:1fr 1fr; gap:1px;}
.board .col{background:var(--bg2); padding:28px 30px; transition:background .25s;}
.board .col:hover{background:var(--bg3);}
.board .col h3{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; display:flex; align-items:center; gap:9px; margin-bottom:18px;}
.board .col.yes h3{color:var(--green);} .board .col.no h3{color:var(--accent-text);}
.board .col h3 .sq{width:9px;height:9px;border-radius:2px;flex:none;}
.board .col.yes h3 .sq{background:var(--green); box-shadow:0 0 6px var(--green);} .board .col.no h3 .sq{background:var(--accent); box-shadow:0 0 6px var(--accent);}
.board ul{list-style:none;}
.board li{position:relative; padding:11px 0 11px 24px; font-size:14.5px; border-bottom:1px dashed var(--border-soft);}
.board li:last-child{border-bottom:none;}
.board li::before{position:absolute; left:0; top:12px; font-family:var(--font-mono); font-size:12px;}
.board .col.yes li::before{content:"✓"; color:var(--green);}
.board .col.no li::before{content:"–"; color:var(--accent-text);}

/* stat grid */
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.stat{position:relative; padding-left:16px;}
.stat::before{content:""; position:absolute; left:0; top:2px; bottom:6px; width:2px; background:linear-gradient(var(--accent), transparent);}
.stat .num{font-family:var(--font-display); font-weight:900; font-size:clamp(24px,2.6vw,34px); letter-spacing:-.02em; display:block; line-height:1;}
.stat .lbl{font-size:12.5px; margin-top:9px; opacity:.74; line-height:1.45;}

.callout{background:var(--bg2); border:1px solid var(--border-soft); border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:22px 26px; font-size:15px; max-width:78ch; transition:border-color .25s, box-shadow .25s, transform .25s;}
.callout:hover{border-left-color:var(--accent-bright); box-shadow:0 0 22px var(--glow); transform:translateY(-2px);}
.callout b{color:var(--accent-text);}
.band-feature .callout{background:rgba(244,246,248,.05); border-color:rgba(245,166,35,.16); border-left-color:var(--accent);}
.band-feature .callout b{color:var(--accent-bright);}

/* two col */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1px;}
.two-col > div{background:var(--bg2); padding:26px 28px; transition:background .25s;}
.two-col > div:hover{background:var(--bg3);}
.two-col h4{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text); margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.two-col h4::before{content:""; width:14px; height:1.5px; background:var(--accent); box-shadow:0 0 6px var(--accent);}
.two-col ul{list-style:none; font-size:14.5px;}
.two-col li{padding:8px 0; border-bottom:1px dashed var(--border-soft);}
.two-col li:last-child{border-bottom:none;}

/* fact grid */
.fact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px;}
.fact{background:var(--bg2); padding:22px 24px; transition:background .25s;}
.fact:hover{background:var(--bg3);}
.fact .k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent-text); margin-bottom:7px;}
.fact .v{font-size:14.5px; line-height:1.5;}

/* spec table */
table.spec{width:100%; border-collapse:collapse; font-size:13.8px;}
table.spec td{padding:11px 4px; border-bottom:1px dashed var(--border-soft); vertical-align:top;}
table.spec tr:last-child td{border-bottom:none;}
table.spec td.k{font-weight:600; white-space:nowrap; color:var(--accent-text); width:1%; padding-right:20px;}

/* expandable */
details.expand{border:1px solid var(--border-soft); border-radius:8px; background:var(--bg2); margin-top:16px; transition:border-color .25s;}
details.expand[open]{border-color:var(--border);}
details.expand summary{list-style:none; cursor:pointer; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-text);}
details.expand summary::-webkit-details-marker{display:none;}
details.expand summary:hover{color:var(--accent-bright);}
details.expand summary .chev{transition:transform .25s ease;}
details.expand[open] summary .chev{transform:rotate(90deg);}
details.expand .inner{padding:2px 22px 20px;}

/* ---------- 8. PHASES ---------- */
.phase-list{display:flex; flex-direction:column;}
.phase{display:grid; grid-template-columns:120px 1fr; gap:26px; padding:28px 0; border-bottom:1px solid var(--border-soft); align-items:baseline; transition:background .25s; margin:0 -16px; padding-left:16px; padding-right:16px; border-radius:6px;}
.phase:hover{background:var(--bg2);}
.phase:last-child{border-bottom:none;}
.phase .pn{font-family:var(--font-display); font-weight:900; font-size:clamp(40px,5vw,64px); line-height:1; color:var(--accent-text); opacity:.92; text-shadow:0 0 20px var(--glow);}
.band-feature .phase{border-bottom-color:rgba(245,166,35,.12);}
.band-feature .phase:hover{background:rgba(244,246,248,.04);}
.band-feature .phase .pn{color:var(--accent-bright); opacity:.5;}
.phase .pt{font-weight:700; font-size:18px; margin-bottom:6px;}
.phase .pd{font-size:14.5px; opacity:.8; max-width:60ch;}

/* why grid */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}

/* ---------- 9. CONTACT / FOOTER ---------- */
.contact-cta{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;}
footer.site{padding:48px 0; border-top:1px solid var(--border-soft); background:var(--bg); position:relative;}
footer.site::before{content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent);}
footer.site .fgrid{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px;}
.footer-contact{font-family:var(--font-mono); font-size:12px; color:var(--fg-muted); line-height:1.8;}
.footer-contact a{transition:color .2s;}
.footer-contact a:hover{color:var(--accent-text);}
.conf-note{font-size:11.5px; color:var(--fg-dim); max-width:70ch; margin-top:24px; padding-top:18px; border-top:1px solid var(--border-soft);}

/* ---------- 10. RESPONSIVE ---------- */
@media(max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
@media(max-width:780px){
  .stat-grid{grid-template-columns:repeat(2,1fr); row-gap:26px;}
  .fact-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  .board,.two-col{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .phase{grid-template-columns:1fr; gap:6px; margin:0; padding-left:0; padding-right:0;}
  .phase:hover{background:transparent;}
  .phase .pn{font-size:34px;}
}
@media(max-width:520px){ .fact-grid{grid-template-columns:1fr;} }