/*
Theme Name: Sparklift
Theme URI: https://sparklift.io
Author: Sparklifters Inc.
Author URI: https://sparklift.io
Description: Custom single-page theme for Sparklift — modular AI data center pods. Dark industrial aesthetic with blueprint grid and spark-orange accent.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sparklift
*/

:root{
  --ink:#10151C; --panel:#171E28; --panel2:#1D2634;
  --line:#2C3A4C; --ice:#D9E3F0; --muted:#8296AD;
  --spark:#FF8A3C; --spark2:#FFC46B;
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--ice);
  font-family:'Archivo',-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono',monospace}

/* ---------- shared type ---------- */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:clamp(11px,1vw,13px);
  letter-spacing:.28em;color:var(--spark);text-transform:uppercase;margin-bottom:20px;display:block}
h1{font-weight:800;font-size:clamp(38px,5.6vw,84px);line-height:1.02;letter-spacing:-.02em;color:#fff}
h2{font-weight:800;font-size:clamp(28px,3.4vw,52px);line-height:1.05;letter-spacing:-.015em;color:#fff}
.sub{font-size:clamp(15px,1.25vw,19px);color:var(--muted);line-height:1.6;font-weight:400}
.accent{color:var(--spark)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 7vw}
section.block{position:relative;padding:14vh 0;border-bottom:1px solid rgba(44,58,76,.4)}
section.block:last-of-type{border-bottom:none}
.grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.45;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 20%,black 0%,transparent 70%);
  mask-image:radial-gradient(ellipse at 30% 20%,black 0%,transparent 70%)}
.block > .wrap{position:relative;z-index:2}

/* entrance animation — pure CSS so content is NEVER left hidden by JS
   timing (LiteSpeed can defer scripts). Elements always end visible. */
@keyframes sl-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.r{animation:sl-rise .7s ease both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.26s}
.d4{animation-delay:.36s}.d5{animation-delay:.46s}.d6{animation-delay:.56s}
@media (prefers-reduced-motion:reduce){.r{animation:none}}

/* blueprint draw-in. Sparkline is in the hero (above the fold) so it draws
   on load. The schematic is visible by default and re-draws when scrolled
   into view — if JS is deferred it simply shows already drawn (never blank). */
@keyframes sl-draw{to{stroke-dashoffset:0}}
.sparkline path{stroke-dasharray:1200;stroke-dashoffset:1200;animation:sl-draw 1.9s ease .5s forwards}
.schematic .draw{stroke-dasharray:1600;stroke-dashoffset:0}
.schematic.in .draw{animation:sl-draw-in 1.7s ease}
@keyframes sl-draw-in{from{stroke-dashoffset:1600}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .sparkline path{animation:none;stroke-dashoffset:0}
  .schematic.in .draw{animation:none}
}

/* ---------- top nav ---------- */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 7vw;transition:background .3s,border-color .3s,padding .3s;
  border-bottom:1px solid transparent}
.site-nav.scrolled{background:rgba(16,21,28,.82);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);padding:12px 7vw}
.nav-logo{display:flex;align-items:center;gap:12px}
.bolt{width:38px;height:38px;border:2px solid var(--spark);display:flex;align-items:center;
  justify-content:center;transform:rotate(45deg);flex:0 0 auto}
.bolt svg{transform:rotate(-45deg)}
.nav-logo .name{font-weight:800;font-size:16px;letter-spacing:.28em;color:#fff}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--ice)}
.nav-cta{background:var(--spark);color:var(--ink)!important;font-weight:700;
  padding:10px 20px;letter-spacing:.04em!important;text-transform:none!important;
  font-family:'Archivo',sans-serif!important;font-size:13px!important;transition:background .2s}
.nav-cta:hover{background:var(--spark2)}
.nav-toggle{display:none;background:none;border:0;color:var(--ice);cursor:pointer;padding:6px}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:12vh;overflow:hidden}
/* halftone-vibe shader backdrop + legibility veil */
.sl-shader{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.sl-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(16,21,28,.94),rgba(16,21,28,.6) 42%,rgba(16,21,28,.12) 100%),
    linear-gradient(0deg,rgba(16,21,28,.9),rgba(16,21,28,0) 42%)}
.hero-meta{margin-top:44px;display:flex;gap:3.5vw;flex-wrap:wrap}
.meta-item{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.14em;color:var(--muted)}
.meta-item b{color:var(--ice);font-weight:500}
.hero-logo{display:flex;align-items:center;gap:14px;margin-bottom:5vh}
.hero-logo .name{font-weight:800;font-size:20px;letter-spacing:.32em;color:#fff}
.hero-logo .inc{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.2em;color:var(--muted)}
.hero .sub{max-width:44ch;margin-top:28px}
.sparkline{position:absolute;right:2vw;top:14vh;width:32vw;height:64vh;pointer-events:none;z-index:1;opacity:.9}
.hero-actions{margin-top:40px;display:flex;gap:18px;flex-wrap:wrap}
.btn{display:inline-block;font-weight:700;font-size:15px;padding:16px 30px;letter-spacing:.02em;transition:all .2s}
.btn-primary{background:var(--spark);color:var(--ink)}
.btn-primary:hover{background:var(--spark2)}
.btn-ghost{border:1px solid var(--line);color:var(--ice)}
.btn-ghost:hover{border-color:var(--spark);color:#fff}

/* ---------- product / schematic ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:4vw;align-items:center;margin-top:5vh}
.schematic{width:100%;height:auto}
.speclist{display:flex;flex-direction:column;gap:3vh}
.spec{border-left:1px solid var(--line);padding-left:22px}
.spec .k{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.22em;color:var(--muted);
  text-transform:uppercase;margin-bottom:6px}
.spec .v{font-weight:800;font-size:clamp(20px,2vw,30px);color:#fff;line-height:1.1}
.spec .v span{color:var(--spark)}
.spec .n{font-size:clamp(13px,1vw,15px);color:var(--muted);margin-top:8px;line-height:1.55}

/* ---------- partners ---------- */
.partner-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6vw;margin-top:5vh}
.pcard{background:var(--panel);border:1px solid var(--line);padding:4vh 1.8vw;text-align:center;transition:border-color .3s}
.pcard:hover{border-color:var(--spark)}
.pcard .pname{font-weight:800;font-size:clamp(18px,1.7vw,26px);color:#fff;letter-spacing:.04em}
.pcard .prole{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;
  color:var(--muted);margin-top:12px;text-transform:uppercase;line-height:1.6}
.integr{margin-top:5vh;display:flex;align-items:center;gap:2vw}
.integr .arrow{flex:0 0 auto;color:var(--spark);font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:.2em}
.integr-box{flex:1;border:1px solid var(--spark);padding:4vh 2.4vw;background:linear-gradient(180deg,rgba(255,138,60,.08),transparent)}
.integr-box .t{font-weight:800;font-size:clamp(18px,1.8vw,26px);color:#fff}
.integr-box .s{color:var(--muted);font-size:clamp(14px,1.05vw,16px);margin-top:10px;line-height:1.55}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6vw;margin-top:6vh;position:relative}
.step{background:var(--panel);border:1px solid var(--line);padding:4vh 1.6vw;position:relative}
.step .num{font-family:'IBM Plex Mono',monospace;color:var(--spark);font-size:12px;letter-spacing:.2em}
.step .t{font-weight:800;font-size:clamp(16px,1.5vw,22px);color:#fff;margin:1.8vh 0 1.2vh}
.step .s{color:var(--muted);font-size:clamp(13px,.98vw,15px);line-height:1.55}
.step::after{content:'→';position:absolute;right:-1.35vw;top:50%;transform:translateY(-50%);
  color:var(--spark);font-size:18px;z-index:2}
.step:last-child::after{display:none}
.punch{margin-top:6vh;font-weight:800;font-size:clamp(20px,2.2vw,34px);color:#fff;max-width:34ch}
.punch span{color:var(--spark)}

/* ---------- digital twin ---------- */
.twin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6vw;margin-top:5vh}
.tcard{background:var(--panel);border:1px solid var(--line);padding:3.4vh 2vw;display:flex;gap:1.4vw;align-items:flex-start;transition:border-color .3s}
.tcard:hover{border-color:var(--spark)}
.tick{flex:0 0 auto;width:34px;height:34px;border:1px solid var(--spark);display:flex;
  align-items:center;justify-content:center;color:var(--spark);font-family:'IBM Plex Mono',monospace;font-size:14px}
.tcard .t{font-weight:800;font-size:clamp(15px,1.4vw,21px);color:#fff;margin-bottom:8px}
.tcard .s{color:var(--muted);font-size:clamp(13px,1vw,15px);line-height:1.55}

/* ---------- offers ---------- */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;margin-top:5vh}
.ocard{background:var(--panel);border:1px solid var(--line);padding:4.4vh 1.8vw;
  display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.ocard:hover{border-color:var(--spark);transform:translateY(-4px)}
.ocard .ot{font-weight:800;font-size:clamp(17px,1.6vw,24px);color:#fff;margin-bottom:1.6vh}
.ocard .os{color:var(--muted);font-size:clamp(13px,1vw,15px);line-height:1.6}
.ocard .tag{margin-top:auto;padding-top:2.8vh;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.18em;color:var(--spark);text-transform:uppercase}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5vw;margin-top:5vh;align-items:start}
.contact-copy .sub{margin-top:24px;max-width:44ch}
.contact-details{margin-top:40px;font-family:'IBM Plex Mono',monospace;font-size:14px;
  letter-spacing:.06em;color:var(--muted);line-height:2.2}
.contact-details a{color:var(--ice);border-bottom:1px solid var(--line);transition:border-color .2s}
.contact-details a:hover{border-color:var(--spark)}
.contact-details .lbl{color:var(--spark);display:inline-block;width:70px}
.form{background:var(--panel);border:1px solid var(--line);padding:5vh 2.4vw}
.form .field{margin-bottom:22px}
.form label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.form input,.form textarea{width:100%;background:var(--ink);border:1px solid var(--line);
  color:var(--ice);font-family:'Archivo',sans-serif;font-size:15px;padding:14px 16px;
  transition:border-color .2s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--spark)}
.form textarea{resize:vertical;min-height:130px}
.form button{width:100%;background:var(--spark);color:var(--ink);font-weight:800;
  font-size:16px;padding:16px;border:0;cursor:pointer;letter-spacing:.02em;transition:background .2s}
.form button:hover{background:var(--spark2)}
.form-note{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);
  margin-top:16px;letter-spacing:.06em;line-height:1.6}
.alert{padding:14px 18px;margin-bottom:24px;font-size:14px;border:1px solid}
.alert-ok{border-color:var(--spark);background:rgba(255,138,60,.08);color:var(--spark2)}
.alert-err{border-color:#c0392b;background:rgba(192,57,43,.1);color:#e57368}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.site-footer{padding:6vh 7vw;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.12em;color:var(--muted)}
.site-footer .fbrand{color:var(--ice);font-weight:800;letter-spacing:.24em}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-links{position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:flex-start;
    gap:2px;background:var(--ink);padding:88px 7vw 32px;transform:translateY(-120%);
    transition:transform .35s ease;border-bottom:1px solid var(--line);height:auto}
  .nav-links.open{transform:none}
  .nav-links a{font-size:16px;padding:15px 0;width:100%}
  .nav-cta{display:inline-block;width:auto;margin-top:14px;padding:14px 24px!important}
  .nav-toggle{display:block;z-index:70}
  .split,.contact-grid{grid-template-columns:1fr;gap:6vh}
  .partner-row,.offers{grid-template-columns:1fr 1fr}
  .steps,.twin-grid{grid-template-columns:1fr}
  .step::after{display:none}
  .integr{flex-direction:column;align-items:stretch;gap:16px}
  .sparkline{display:none}
  .hero{min-height:auto;padding-top:16vh;padding-bottom:9vh}
  .hero .sub{max-width:100%}
  section.block{padding:10vh 0}
}
@media (max-width:560px){
  .partner-row,.offers{grid-template-columns:1fr}
  .hero-logo .name{font-size:17px}
  .hero-meta{gap:14px}
  .hero-actions{gap:12px}
  .hero-actions .btn{width:100%;text-align:center}
  .spec{padding-left:16px}
  .contact-details{font-size:13px;line-height:2.4}
  .contact-details .lbl{width:auto;min-width:54px}
  .form{padding:4vh 6vw}
  .wrap{padding:0 6vw}
  .site-footer{flex-direction:column;align-items:flex-start;gap:12px;padding:7vh 6vw}
}