:root{
  --ink:#0E1626;
  --ink-2:#131C31;
  --ink-3:#182238;
  --text:#E6DDC6;
  --muted:#8592A8;
  --amber:#E8A33D;
  --wire:#5FD3C4;
  --line: rgba(242,239,231,0.12);
  --radius: 10px;
  --maxw: 1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* BACKDROP: slow-spinning rays behind everything, and a wireframe globe
   in the corner. Fixed + z-index:0, so header/section/footer below need
   z-index:1 to stay above them (see "content sits above backdrop"). */
.interstellar{
  position:fixed; inset:-25%;
  z-index:0;
  pointer-events:none;
  background:repeating-conic-gradient(
    from 0deg,
    rgba(216,70,95,0.22) 0deg 2deg,
    transparent 2deg 9deg,
    rgba(255,120,140,0.14) 9deg 10.5deg,
    transparent 10.5deg 18deg
  );
  mask-image:radial-gradient(circle at 68% 42%, black 0%, black 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 68% 42%, black 0%, black 20%, transparent 80%);
  animation:interstellar-spin 110s linear infinite;
}
@keyframes interstellar-spin{
  0%{ transform:rotate(0deg) scale(1); }
  50%{ transform:rotate(180deg) scale(1.07); }
  100%{ transform:rotate(360deg) scale(1); }
}
.globe-field{
  position:fixed;
  right:-10%;
  bottom:-14%;
  width:min(52vw, 620px);
  height:min(52vw, 620px);
  z-index:0;
  pointer-events:none;
  opacity:0.16;
}
.globe-svg{width:100%; height:100%; display:block;}
.globe-spin{
  fill:none;
  stroke:var(--wire);
  stroke-width:1;
  transform-origin:280px 280px;
  animation:globe-rotate 200s linear infinite;
}
.globe-network{
  stroke:var(--wire);
  stroke-width:0.75;
  opacity:0.85;
}
.globe-network circle{
  fill:var(--wire);
  stroke:none;
}
@keyframes globe-rotate{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .interstellar, .globe-spin{animation:none;}
}

/* content sits above backdrop */
header, section, footer{position:relative; z-index:1;}
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'IBM Plex Sans', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  margin:0 0 0.5em;
  line-height:1.2;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:0.72rem;
  color:var(--wire);
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* BUTTONS */
.btn{
  display:inline-block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  letter-spacing:0.02em;
  text-decoration:none;
  padding:13px 24px;
  border-radius:6px;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--amber); color:var(--ink);}
.btn-primary:hover{background:#f0b458;}
.btn-ghost{border-color:var(--line); color:var(--text);}
.btn-ghost:hover{border-color:var(--wire); color:var(--wire);}

/* HEADER */
header{
  position:sticky; top:0; z-index:10;
  background:rgba(14,22,38,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:40px; height:40px; border-radius:8px;}
.brand-name{font-family:'Fraunces', serif; font-weight:900; font-size:1.25rem; display:block;}
.brand-tagline{color:var(--muted); font-size:0.78rem; display:block;}
.navlinks{display:flex; align-items:center; gap:28px;}
.navlinks a{
  text-decoration:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
}
.navlinks a:not(.btn):hover{color:var(--text);}
.navlinks a.btn{color:var(--ink);}
@media (max-width:640px){
  .navlinks a:not(.btn){display:none;}
  .brand-tagline{display:none;}
}

/* HERO */
.hero{padding:72px 0 64px; border-bottom:1px solid var(--line); overflow:hidden;}
.hero-inner{transform:translateX(-32px);}
@media (max-width:640px){ .hero-inner{transform:none;} }
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:88px;
  align-items:start;
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; row-gap:40px;}
  .hero-questions{margin-bottom:28px;}
}

.eyebrow{
  color:var(--wire);
  margin-bottom:20px;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--wire);
  box-shadow:0 0 0 3px rgba(95,211,196,0.18);
}
.hero h1{font-size:clamp(1.9rem, 4.4vw, 3.1rem); line-height:1.15;}
.hero h1 em{color:var(--amber); font-style:normal;}
.hero .lede{color:var(--muted); font-size:1.1rem; max-width:52ch; margin:0 0 28px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap;}
.hero-questions{
  display:flex; flex-direction:column; gap:10px;
  margin:0 0 91px;
}
.hero-questions span{
  font-family:'Space Grotesk', sans-serif;
  font-weight:600;
  font-size:clamp(1.05rem, 1.8vw, 1.3rem);
  line-height:1.3;
  color:var(--wire);
}


/* DASHBOARD MOCKUP */
.mock-window{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
}
.mock-bar{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px;
  background:var(--ink);
  border-bottom:1px solid var(--line);
}
.mock-bar .dot{width:8px; height:8px; border-radius:50%; background:var(--line);}
.mock-bar .dot:nth-child(1){background:#e8734d; opacity:.6;}
.mock-bar .dot:nth-child(2){background:var(--amber); opacity:.6;}
.mock-bar .dot:nth-child(3){background:var(--wire); opacity:.6;}
.mock-live{margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--wire); font-size:0.76rem;}
.pulse-dot{
  width:6px; height:6px; border-radius:50%; background:var(--wire);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(95,211,196,0.45);}
  70%{box-shadow:0 0 0 8px rgba(95,211,196,0);}
  100%{box-shadow:0 0 0 0 rgba(95,211,196,0);}
}
.hero-visual{min-width:460px;}
@media (max-width:900px){ .hero-visual{min-width:0;} }
.mock-body{padding:30px; display:flex; flex-direction:column; gap:24px;}
.mock-stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:13px;}
.mock-stat{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 13px; background:var(--ink); overflow:hidden;
  transition:opacity .35s ease;
}
.mock-stat .mono{color:var(--muted); display:block; margin-bottom:8px; font-size:0.68rem; line-height:1.25; min-height:2.4em;}
.mock-stat strong{display:block; font-family:'Space Grotesk', sans-serif; font-size:1.46rem; line-height:1.1; color:var(--amber); white-space:nowrap;}
.mock-stat-vs{display:block; color:var(--muted); font-size:0.72rem; margin-top:5px; white-space:nowrap;}
.mock-stat-delta{
  display:inline-block;
  margin-top:9px;
  padding:3px 9px;
  border-radius:20px;
  background:rgba(232,163,61,0.14);
  color:var(--amber);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
}
@media (max-width:520px){
  .mock-stat{padding:8px 6px;}
  .mock-stat .mono{font-size:0.5rem; margin-bottom:4px; min-height:2em;}
  .mock-stat strong{font-size:0.92rem;}
  .mock-stat-vs{font-size:0.54rem; margin-top:2px;}
  .mock-stat-delta{font-size:0.54rem; padding:1px 5px; margin-top:5px;}
}
.mock-chart{display:flex; align-items:flex-end; gap:8px; height:76px;}
.mock-chart span{
  flex:1;
  height:var(--h);
  background:linear-gradient(180deg, #B9713F, #9C3A46);
  opacity:0.9;
  border-radius:2px 2px 0 0;
  animation:rise .7s ease both;
}
.mock-chart span:nth-child(2){animation-delay:.05s;}
.mock-chart span:nth-child(3){animation-delay:.1s;}
.mock-chart span:nth-child(4){animation-delay:.15s;}
.mock-chart span:nth-child(5){animation-delay:.2s;}
.mock-chart span:nth-child(6){animation-delay:.25s;}
@keyframes rise{ from{transform:scaleY(0); transform-origin:bottom;} to{transform:scaleY(1); transform-origin:bottom;} }
@media (prefers-reduced-motion: reduce){
  .pulse-dot, .mock-chart span{animation:none;}
}

/* SECTION shared */
section{padding:72px 0; scroll-margin-top:76px;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head h2{font-size:clamp(1.7rem, 3.4vw, 2.3rem);}
.section-head p{color:var(--muted); font-size:1.05rem; margin:0;}
.services, .usecases{border-top:1px solid var(--line);}

/* CARD GRID */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.card{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.card img{width:100%; aspect-ratio:16/10; object-fit:contain; object-position:center; padding:14px; background:var(--ink-3);}
.card-body{padding:22px 24px 26px;}
.card-body h3{font-size:1.3rem; margin-bottom:10px;}
.card-body p{color:var(--muted); font-size:1rem; margin:0;}
.card-stat{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--wire);
  font-size:0.94rem;
}

/* PROCESS */
.process-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
}
.process-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  background:var(--ink-2);
}
.process-item .num{
  font-family:'IBM Plex Mono', monospace;
  color:var(--amber);
  font-size:0.85rem;
  display:block;
  margin-bottom:10px;
}
.process-item h3{font-size:1.2rem; margin-bottom:8px;}
.process-item p{color:var(--muted); font-size:0.98rem; margin:0;}

/* CONTACT */
.contact{border-top:1px solid var(--line);}
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr;} }
.contact-info h2{font-size:clamp(1.6rem,3.2vw,2.1rem);}
.contact-info p{color:var(--muted); font-size:1.05rem; margin:0 0 28px;}
.contact-details{display:flex; flex-direction:column; gap:16px;}
.contact-detail a{text-decoration:none; font-size:1.08rem;}
.contact-detail a:hover{color:var(--wire);}

form{
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .form-row{grid-template-columns:1fr;} }
.field{margin-bottom:18px;}
label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
  margin-bottom:8px;
}
input, textarea{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--text);
  font-family:inherit;
  font-size:0.95rem;
  padding:11px 13px;
}
input:focus, textarea:focus{border-color:var(--wire); outline:none;}
textarea{min-height:110px; resize:vertical;}
.submit-btn{
  width:100%;
  background:var(--amber);
  color:var(--ink);
  border:none;
  border-radius:6px;
  padding:14px;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  cursor:pointer;
}
.submit-btn:hover{background:#f0b458;}
.submit-btn:disabled{opacity:0.6; cursor:default;}
.form-status{margin-top:12px; font-size:0.88rem; min-height:1.2em;}
.form-status.ok{color:var(--wire);}
.form-status.err{color:#e08b8b;}

/* FOOTER */
footer{border-top:1px solid var(--line); padding:28px 0;}
.footer-inner{
  display:flex; flex-wrap:wrap; gap:14px 28px;
  align-items:center; justify-content:space-between;
  font-size:0.8rem; color:var(--muted);
}
.footer-links{display:flex; align-items:center; gap:20px;}
.footer-links a{
  text-decoration:none;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
}
.footer-links a:hover{color:var(--amber);}
.social-link{display:flex; color:var(--muted);}
.social-link:hover{color:var(--amber);}