/* ============================================================
   SPECTRAL SYSTEMS
   Two-temperature system: cold fog (the dark) + warm lantern (the value).
   ============================================================ */
:root{
  --ink:      #101113;   /* base darkness — matches logo canvas */
  --ink-2:    #0D1116;   /* raised surface */
  --fog:      #161C24;   /* card / border fog */
  --fog-line: #232C37;   /* hairlines */
  --ghost:    #7C8B9A;   /* muted cool text */
  --vapor:    #A9B6C2;   /* secondary text */
  --parchment:#ECE3D2;   /* primary text, candle-warm white */
  --lantern:  #F2B24C;   /* THE accent — the glow */
  --ember:    #FFD98A;   /* hot core */
  --spectral: #5E8C8E;   /* faint cold cyan, used sparingly */
  --maxw: 1160px;
  --radius: 14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--parchment);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ambient fog: a very slow cold drift, low opacity, behind everything */
body::before{
  content:"";
  position:fixed; inset:-20%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(94,140,142,.06), transparent 70%),
    radial-gradient(50% 60% at 85% 90%, rgba(94,140,142,.05), transparent 70%);
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px; position:relative; z-index:1}

h1,h2,h3{font-family:"Cormorant",Georgia,serif; font-weight:500; line-height:1.08; margin:0}
.mono{font-family:"IBM Plex Mono",monospace}

/* ---- eyebrow label (the "systems" voice) ---- */
.eyebrow{
  font-family:"IBM Plex Mono",monospace;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--lantern); font-weight:400; opacity:.9;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--lantern); opacity:.6}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom, rgba(16,17,19,.85), rgba(16,17,19,.55));
  border-bottom:1px solid transparent;
  transition:border-color .3s ease;
}
header.scrolled{border-bottom-color:var(--fog-line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none; color:var(--parchment)}
.brand .mark{width:32px; height:32px; flex:none; object-fit:contain}
.brand .name{font-family:"Cormorant",serif; font-size:23px; font-weight:600; letter-spacing:.01em}
.brand .name em{font-style:normal; color:var(--lantern)}
.nav-links{display:flex; align-items:center; gap:30px}
.nav-links a{
  color:var(--vapor); text-decoration:none; font-size:14.5px; font-weight:400;
  letter-spacing:.01em; cursor:pointer; transition:color .2s;
}
.nav-links a:hover, .nav-links a.on{color:var(--parchment)}
.btn{
  font-family:"IBM Plex Sans",sans-serif; font-weight:500; font-size:14.5px;
  border:none; cursor:pointer; border-radius:999px; padding:11px 22px;
  text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  transition:transform .18s ease, box-shadow .25s ease;
}
.btn-primary{
  background:var(--lantern); color:#20160A;
  box-shadow:0 0 0 rgba(242,178,76,0);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 8px 30px rgba(242,178,76,.28)}
.btn-ghost{background:transparent; color:var(--parchment); border:1px solid var(--fog-line)}
.btn-ghost:hover{border-color:var(--lantern); color:var(--lantern)}
.btn-secondary{background:transparent; color:var(--vapor); border:1px solid var(--fog-line); font-weight:400}
.btn-secondary:hover{border-color:var(--lantern); color:var(--lantern)}
.sms-link{display:none}
@media (max-width:720px){
  .sms-link{display:inline-flex; width:100%; justify-content:center; margin-bottom:20px}
}
.nav-toggle{display:none; background:none; border:none; color:var(--parchment); cursor:pointer}

@keyframes fadeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* ============================================================
   HERO — the signature
   ============================================================ */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden}
.hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; width:100%}
.hero h1{font-size:clamp(44px, 6vw, 82px); letter-spacing:-.01em; margin:22px 0 0}
.hero h1 .glow{color:var(--lantern); position:relative}
.hero p.lead{font-size:19px; color:var(--vapor); max-width:30ch; margin:26px 0 34px; font-weight:300}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-note{margin-top:26px; font-size:13px; color:var(--ghost)}

/* the lantern scene */
.scene{position:relative; height:520px; display:flex; align-items:center; justify-content:center}
.lantern-glow{
  position:absolute; width:460px; height:460px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,217,138,.42) 0%, rgba(242,178,76,.18) 28%, rgba(242,178,76,0) 62%);
  filter:blur(4px);
  animation:flicker 6s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{opacity:.9; transform:scale(1)}
  45%{opacity:1; transform:scale(1.04)}
  70%{opacity:.85; transform:scale(.99)}
}
.scene svg{position:relative; z-index:2; width:100%; height:100%; overflow:visible}
.hero-art{position:relative; z-index:2; max-width:100%; max-height:100%; -webkit-mask-image:radial-gradient(86% 90% at 50% 48%, #000 74%, transparent 100%); mask-image:radial-gradient(86% 90% at 50% 48%, #000 74%, transparent 100%)}

/* faint circuitry that brightens near the light */
.mech line, .mech circle, .mech rect{stroke:var(--spectral); opacity:.16}
.mech .lit{stroke:var(--lantern); opacity:.55}

/* ============================================================
   SECTIONS
   ============================================================ */
section.band{padding:110px 0; position:relative}
.band-tight{padding:78px 0}
.section-head{max-width:60ch; margin-bottom:52px}
.section-head h1, .section-head h2{font-size:clamp(32px,4vw,52px); margin:16px 0 0; letter-spacing:-.01em}
.section-head p{color:var(--vapor); font-size:17.5px; margin:18px 0 0; max-width:52ch}

.reveal{opacity:1; transform:none}
html.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease}
html.js .reveal.seen{opacity:1; transform:none}

/* problem band */
.thesis{
  border-top:1px solid var(--fog-line); border-bottom:1px solid var(--fog-line);
  background:linear-gradient(180deg, rgba(22,28,36,.4), transparent);
}
.thesis .wrap{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.thesis h2{font-size:clamp(30px,3.6vw,46px)}
.thesis .big{font-family:"Cormorant",serif; font-style:italic; color:var(--lantern); font-size:clamp(30px,3.6vw,46px)}
.thesis ul{list-style:none; padding:0; margin:0; display:grid; gap:18px}
.thesis li{display:flex; gap:14px; align-items:flex-start; color:var(--vapor); font-size:16px}
.thesis li b{color:var(--parchment); font-weight:500}
.dot{width:7px; height:7px; border-radius:50%; background:var(--lantern); margin-top:10px; flex:none; box-shadow:0 0 12px rgba(242,178,76,.6)}

/* services grid */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:var(--ink-2); border:1px solid var(--fog-line); border-radius:var(--radius);
  padding:30px 28px; transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  position:relative; overflow:hidden;
}
.card::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s ease; pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%, rgba(242,178,76,.10), transparent 55%);
}
.card:hover{border-color:rgba(242,178,76,.4); transform:translateY(-3px); box-shadow:0 18px 44px rgba(0,0,0,.45)}
.card:hover::after{opacity:1}
.card .ico{color:var(--lantern); margin-bottom:18px; display:block}
.card h3{font-size:26px; margin-bottom:10px}
.card p{color:var(--vapor); font-size:15px; margin:0 0 16px}
.fit{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.04em; color:var(--ghost)}
.fit b{color:var(--spectral); font-weight:500}
.card .fit{border-top:1px solid var(--fog-line); padding-top:14px}

/* process (a real sequence — numbering earns its place here) */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--fog-line); border-radius:var(--radius); overflow:hidden}
.step{padding:34px 30px; border-right:1px solid var(--fog-line)}
.step:last-child{border-right:none}
.step .num{font-family:"IBM Plex Mono",monospace; color:var(--lantern); font-size:13px; letter-spacing:.2em}
.step h3{font-size:24px; margin:16px 0 10px}
.step p{color:var(--vapor); font-size:15px; margin:0}

/* CTA band */
.cta-band{text-align:center; padding:120px 0}
.cta-band h2{font-size:clamp(36px,5vw,64px)}
.cta-band p{color:var(--vapor); font-size:18px; margin:18px auto 34px; max-width:46ch}

/* ---- results module: HIDDEN until real data exists ----
   To turn it on: delete the style="display:none" below and replace
   the placeholder numbers/quotes with real ones. Do NOT show zeros. */
.results{display:none}
.metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:22px}
.metric{background:var(--ink-2); border:1px solid var(--fog-line); border-radius:var(--radius); padding:34px 30px; text-align:center}
.metric .n{font-family:"Cormorant",serif; font-size:56px; color:var(--lantern); line-height:1}
.metric .l{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--ghost); text-transform:uppercase; margin-top:8px}

/* ============================================================
   SERVICES PAGE detail
   ============================================================ */
.svc-detail{display:grid; gap:16px}
.svc-row{
  display:grid; grid-template-columns:.9fr 1.4fr .9fr; gap:30px;
  background:var(--ink-2); border:1px solid var(--fog-line); border-radius:var(--radius); padding:34px;
  align-items:start; text-decoration:none; color:inherit;
  transition:background .25s ease, border-color .25s ease;
}
.svc-row h3{font-size:30px; margin-bottom:8px; color:var(--parchment)}
.svc-row .k{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.2em; color:var(--lantern); text-transform:uppercase}
.svc-row p{color:var(--vapor); font-size:15.5px; margin:0}
.svc-row .out{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.svc-row .out li{font-size:14px; color:var(--vapor); display:flex; gap:10px; align-items:flex-start}
.svc-row .out li::before{content:"→"; color:var(--lantern)}

/* additional-services list: lighter than the six cards — no cards, no borders, no icons */
.more-services{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:36px 30px; margin-top:8px}
.more-services h3{margin:0 0 14px}
.more-services ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.more-services li{color:var(--vapor); font-size:14.5px; line-height:1.5}

/* ============================================================
   BLOG
   ============================================================ */
.posts{display:grid; gap:2px; border:1px solid var(--fog-line); border-radius:var(--radius); overflow:hidden}
.post{
  display:grid; grid-template-columns:150px 1fr; gap:30px; padding:34px 34px;
  background:var(--ink-2); cursor:pointer; border:1px solid transparent;
  text-decoration:none; color:inherit;
  transition:background .25s ease, border-color .25s ease;
}
.post:visited, .svc-row:visited{color:inherit}
.post:hover, .svc-row:hover{background:#12171E; border-color:rgba(242,178,76,.4)}
.post:focus-visible, .svc-row:focus-visible{outline:2px solid var(--lantern); outline-offset:-2px}
.post .meta{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ghost); letter-spacing:.05em}
.post .meta .tag{color:var(--lantern); display:block; margin-top:8px}
.post h2{font-size:28px; margin-bottom:10px; color:var(--parchment)}
.post p{color:var(--vapor); font-size:15.5px; margin:0}
.post-body{max-width:70ch; font-size:17px; color:var(--vapor)}
.post-body h2{color:var(--parchment); font-size:30px; margin:38px 0 14px}
.post-body p{margin:0 0 20px}
.back{background:none; border:none; color:var(--lantern); font-family:"IBM Plex Mono",monospace; font-size:13px; cursor:pointer; padding:0; margin-bottom:30px; letter-spacing:.05em; text-decoration:none; display:inline-block}
.back:visited{color:var(--lantern)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:800px}
.q{border-bottom:1px solid var(--fog-line)}
.q button{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--parchment); font-family:"Cormorant",serif; font-size:25px; font-weight:500;
  padding:26px 40px 26px 0; position:relative; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.q button .plus{color:var(--lantern); font-family:"IBM Plex Sans"; font-size:24px; font-weight:300; transition:transform .3s ease; flex:none}
.q.open button .plus{transform:rotate(45deg)}
.q .a{max-height:0; overflow:hidden; transition:max-height .35s ease}
.q .a p{color:var(--vapor); font-size:16px; padding:0 0 26px; margin:0; max-width:64ch}
.q.open .a{max-height:340px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:60px; align-items:start}
.contact-aside h1, .contact-aside h2{font-size:clamp(34px,4vw,52px)}
.contact-aside p{color:var(--vapor); font-size:17px; margin:20px 0}
.contact-aside .direct{font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--lantern); margin-top:8px}
form.cf{display:grid; gap:18px; background:var(--ink-2); border:1px solid var(--fog-line); border-radius:var(--radius); padding:36px}
.field{display:grid; gap:8px}
.field label{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.1em; color:var(--ghost); text-transform:uppercase}
.field input, .field textarea, .field select{
  background:var(--ink); border:1px solid var(--fog-line); border-radius:10px;
  color:var(--parchment); font-family:"IBM Plex Sans"; font-size:15px; padding:13px 15px; width:100%;
  transition:border-color .2s ease; font-weight:300;
}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--lantern)}
.field textarea{min-height:120px; resize:vertical}
.form-msg{font-size:14px; padding:12px 0 0; display:none}
.form-msg.show{display:block}
.form-msg.ok{color:var(--spectral)}
.form-msg.err{color:#E08A6A}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--fog-line); padding:56px 0 40px; margin-top:40px}
.foot{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap}
.foot .brand .name{font-size:20px}
.foot-links{display:flex; gap:26px}
.foot-links a{color:var(--ghost); font-size:14px; text-decoration:none; cursor:pointer}
.foot-links a:hover{color:var(--parchment)}
.foot-legal{color:var(--ghost); font-size:12.5px; font-family:"IBM Plex Mono",monospace; width:100%; margin-top:26px; padding-top:24px; border-top:1px solid var(--fog-line)}

/* ============================================================
   CHAT WIDGET
   ============================================================ */
.chat-fab{
  position:fixed; bottom:26px; right:26px; z-index:80;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:var(--lantern); color:#20160A;
  box-shadow:0 10px 40px rgba(242,178,76,.35);
  display:none; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
.chat-on .chat-fab{display:flex}
.chat-fab:hover{transform:scale(1.06)}
.chat-panel{
  position:fixed; bottom:98px; right:26px; z-index:80;
  width:370px; max-width:calc(100vw - 40px); height:520px; max-height:calc(100vh - 140px);
  background:var(--ink-2); border:1px solid var(--fog-line); border-radius:18px;
  display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.chat-on .chat-panel.open{display:flex; animation:fadeUp .3s ease both}
.chat-head{padding:18px 20px; border-bottom:1px solid var(--fog-line); display:flex; align-items:center; gap:12px}
.chat-head .mark{width:24px; height:24px; object-fit:contain}
.chat-head .t{font-family:"Cormorant",serif; font-size:19px; font-weight:600}
.chat-head .s{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--spectral); letter-spacing:.05em}
.chat-log{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px}
.msg{max-width:82%; font-size:14.5px; line-height:1.5; padding:11px 14px; border-radius:14px}
.msg.bot{background:var(--fog); color:var(--parchment); align-self:flex-start; border-bottom-left-radius:4px}
.msg.me{background:var(--lantern); color:#20160A; align-self:flex-end; border-bottom-right-radius:4px}
.msg.typing{color:var(--ghost); font-style:italic}
.chat-input{display:flex; gap:8px; padding:14px; border-top:1px solid var(--fog-line)}
.chat-input input{flex:1; background:var(--ink); border:1px solid var(--fog-line); border-radius:999px; color:var(--parchment); padding:11px 16px; font-family:"IBM Plex Sans"; font-size:14px}
.chat-input input:focus{outline:none; border-color:var(--lantern)}
.chat-input button{background:var(--lantern); color:#20160A; border:none; border-radius:50%; width:40px; height:40px; cursor:pointer; flex:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav-links{
    position:fixed; top:70px; left:0; right:0; background:var(--ink-2);
    flex-direction:column; gap:0; padding:0; border-bottom:1px solid var(--fog-line);
    transform:translateY(-120%); transition:transform .3s ease; z-index:40;
  }
  .nav-links.show{transform:none}
  .nav-links a{padding:18px 28px; width:100%; border-bottom:1px solid var(--fog-line)}
  .nav-links .btn{margin:16px 28px; width:calc(100% - 56px); justify-content:center}
  .nav-toggle{display:block}
  .hero-inner, .thesis .wrap, .contact-grid{grid-template-columns:1fr; gap:36px}
  .scene{height:380px; order:-1}
  .grid, .steps, .metrics{grid-template-columns:1fr}
  .step{border-right:none; border-bottom:1px solid var(--fog-line)}
  .step:last-child{border-bottom:none}
  .svc-row{grid-template-columns:1fr; gap:18px}
  .post{grid-template-columns:1fr; gap:10px}
  section.band{padding:70px 0}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto}
  html.js .reveal, .reveal{opacity:1 !important; transform:none !important}
}
:focus-visible{outline:2px solid var(--lantern); outline-offset:3px; border-radius:4px}