:root {
  --black: #060810;
  --dark: #0a0e1a;
  --card: #0f1523;
  --border: rgba(255,255,255,0.09);
  --cyan: #00ffcc;
  --cyan-dim: rgba(0,255,204,0.13);
  --white: #f2f2f8;
  --muted: rgba(242,242,248,0.58);
  --accent2: #9b6bff;
  --accent3: #ff6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--black);
  color: var(--white);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}
body::before{
  content:'';
  position:fixed; inset:0;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
  pointer-events:none; z-index:1000;
}
a{color:inherit}
img{max-width:100%;display:block}
nav{
  position:sticky; top:0; z-index:500;
  padding:20px 60px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(5,5,8,.82);
  backdrop-filter: blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:20px;
  letter-spacing:-.03em;text-decoration:none;
}
.nav-logo span{
  background: linear-gradient(135deg,var(--cyan) 0%,var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-links{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.nav-link{
  font-size:13px;font-weight:400;letter-spacing:.04em;color:var(--muted);
  text-decoration:none;transition:color .2s;
}
.nav-link:hover,.nav-link.active{color:var(--white)}
.nav-cta{
  padding:10px 22px;background:transparent;border:1px solid var(--cyan);color:var(--cyan);
  font-family:'Space Mono', monospace;font-size:12px;letter-spacing:.08em;text-decoration:none;border-radius:4px;
  transition:all .2s;
}
.nav-cta:hover{background:var(--cyan);color:var(--black)}
.nav-hamburger{
  display:none;background:none;border:none;cursor:pointer;
  padding:6px;width:38px;height:38px;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;
}
.nav-hamburger span{
  display:block;width:22px;height:2px;background:var(--white);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.mobile-nav{
  display:none;position:fixed;inset:0;z-index:490;
  background:rgba(5,5,8,.97);backdrop-filter:blur(12px);
  flex-direction:column;align-items:center;justify-content:center;gap:28px;
  opacity:0;transition:opacity .25s ease;
}
.mobile-nav.open{display:flex;opacity:1}
.mobile-nav a{
  font-family:'Syne',sans-serif;font-size:28px;font-weight:700;letter-spacing:-.02em;
  color:var(--white);text-decoration:none;transition:color .2s;
}
.mobile-nav a:hover{color:var(--cyan)}
.mobile-nav .mobile-cta{
  margin-top:12px;padding:14px 36px;
  border:1px solid var(--cyan);color:var(--cyan);
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;
  border-radius:4px;text-decoration:none;transition:all .2s;
}
.mobile-nav .mobile-cta:hover{background:var(--cyan);color:var(--black)}
.page-hero{
  padding:110px 60px 70px;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
  background:
    radial-gradient(circle at 20% 20%, rgba(0,255,204,.10), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(155,107,255,.12), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.01), transparent 40%);
}
.page-hero.small{padding:90px 60px 60px}
.hero-grid-bg{
  position:absolute; inset:0;
  background-image:
      linear-gradient(rgba(0,255,204,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,255,204,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%);
}
.hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid rgba(0,245,196,.3);background:rgba(0,245,196,.05);
  padding:7px 16px;border-radius:100px;font-family:'Space Mono',monospace;
  font-size:11px;color:var(--cyan);letter-spacing:.08em;margin-bottom:24px;
}
.eyebrow .dot{width:6px;height:6px;background:var(--accent3);border-radius:50%}
.hero-title,.section-title{
  font-family:'Syne', sans-serif;font-weight:800;
  font-size:clamp(40px,7vw,88px);line-height:.96;letter-spacing:-.04em;
}
.hero-title .accent, .section-title .accent{
  background: linear-gradient(135deg, var(--cyan) 0%, #00d4ff 50%, var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub,.section-sub{font-size:18px;color:var(--muted);line-height:1.7;max-width:700px;margin-top:22px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border-radius:8px; padding:16px 30px;
  font-family:'Syne', sans-serif; font-weight:700; font-size:14px;
}
.btn-primary{
  background: linear-gradient(135deg, var(--cyan) 0%, #00d4ff 100%);
  color: var(--black); box-shadow:0 0 40px rgba(0,255,204,.32);
}
.btn-secondary{
  border:1px solid var(--border); color:var(--white); background:rgba(255,255,255,.02);
}
.btn-secondary:hover{border-color:rgba(255,255,255,.28)}
.section{max-width:1280px;margin:0 auto;padding:90px 60px}
.section-tag{
  font-family:'Space Mono', monospace;font-size:11px;letter-spacing:.2em;color:var(--cyan);
  text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px;
}
.section-tag::before{
  content:'';width:28px;height:2px;background:linear-gradient(90deg,var(--cyan),var(--accent2));border-radius:2px;
}
/* width overridden below for scroll animation */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:18px; padding:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.card h3{
  font-family:'Syne',sans-serif;font-size:26px;letter-spacing:-.02em;margin-bottom:12px
}
.card p{color:var(--muted);line-height:1.7;font-size:15px}
.kicker{
  font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.15em;
  color:var(--accent3); text-transform:uppercase; margin-bottom:18px;
}
.list{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.list li{
  list-style:none; color:rgba(242,242,248,.78); font-size:14px; line-height:1.6;
  position:relative; padding-left:18px;
}
.list li::before{content:'→';position:absolute;left:0;color:var(--cyan)}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.metric{
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px
}
.metric strong{
  display:block;font-family:'Syne',sans-serif;font-size:38px;letter-spacing:-.03em;margin-bottom:6px
}
.metric span{display:block;color:var(--muted);font-size:13px;line-height:1.5}
.problem-list,.flow-list{display:flex;flex-direction:column;gap:14px}
.problem-item,.flow-item,.stat-item{
  background:var(--card);border:1px solid var(--border);border-radius:14px;padding:22px
}
.problem-item h4,.flow-item h4,.stat-item h4{
  font-family:'Syne',sans-serif;font-size:20px;margin-bottom:8px
}
.problem-item p,.flow-item p,.stat-item p{color:var(--muted);line-height:1.65;font-size:14px}
.mock{
  min-height:100%; background:linear-gradient(180deg,#0c1220,#0a0f1a); position:relative; overflow:hidden
}
.mock::before{
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 75% 20%, rgba(0,255,204,.1), transparent 35%);
}
.terminal{
  font-family:'Space Mono',monospace;font-size:13px;line-height:1.9;color:rgba(242,242,248,.7)
}
.terminal .ok{color:#51cf66}.terminal .warn{color:#ff6b6b}.terminal .hi{color:var(--cyan)}
.band{background:var(--dark);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cta-band{
  text-align:center; padding:100px 60px;
  background:
    radial-gradient(circle at 50% 30%, rgba(0,255,204,.08), transparent 35%),
    radial-gradient(circle at 50% 30%, rgba(155,107,255,.06), transparent 55%);
}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{font-style:italic;color:rgba(242,242,248,.78);line-height:1.75}
.quote-author{margin-top:18px;font-family:'Space Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.form-wrap{
  background:var(--card);border:1px solid var(--border);border-radius:20px;padding:36px
}
form{display:flex;flex-direction:column;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{
  display:block;font-family:'Space Mono', monospace;font-size:10px;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;margin-bottom:8px
}
input,select,textarea{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);
  border-radius:10px;padding:14px 16px;color:var(--white);font-family:'DM Sans',sans-serif;font-size:15px
}
select option{background:#0f0f18;color:var(--white)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(0,245,196,.5)}
footer{
  border-top:1px solid var(--border);padding:36px 60px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--dark)
}
.footer-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:16px}
.footer-logo span{
  background: linear-gradient(135deg, var(--cyan), var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-link{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-decoration:none
}
.footer-link:hover{color:var(--cyan)}
.footer-meta{font-family:'Space Mono',monospace;font-size:11px;color:rgba(242,242,248,.28)}
@media (max-width: 980px){
  nav,.page-hero,.section,.cta-band,footer{padding-left:26px;padding-right:26px}
  .nav-links{display:none}
  .nav-cta{display:none}
  .nav-hamburger{display:flex}
  .grid-2,.grid-3,.metric-grid,.testimonials,.form-row{grid-template-columns:1fr}
  .hero-title,.section-title{font-size:clamp(34px,10vw,64px)}
}

/* ═══════════════════════════════════════════
   VISUAL UPGRADE 2026
   ═══════════════════════════════════════════ */

/* --- Keyframes --- */
@keyframes orb-drift-1{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(32px,-22px) scale(1.06)}
}
@keyframes orb-drift-2{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(-26px,20px) scale(1.09)}
}
@keyframes orb-drift-3{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(18px,26px) scale(1.05)}
}
@keyframes grid-pulse{
  0%,100%{opacity:1}
  50%{opacity:.42}
}
@keyframes scan-line{
  0%{top:-4%;opacity:0}
  3%{opacity:.9}
  97%{opacity:.9}
  100%{top:104%;opacity:0}
}
@keyframes btn-shimmer{
  0%{transform:translateX(-180%) skewX(-20deg)}
  100%{transform:translateX(320%) skewX(-20deg)}
}
@keyframes btn-pulse-ring{
  0%,100%{box-shadow:0 0 40px rgba(0,255,204,.32),0 0 0 0 rgba(0,255,204,0)}
  50%{box-shadow:0 0 40px rgba(0,255,204,.32),0 0 0 9px rgba(0,255,204,.09)}
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes tag-line{
  from{width:0}
  to{width:28px}
}
@keyframes term-in{
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes cursor-blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

/* --- Hero orbs --- */
.hero-orb{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
}
.hero-orb-1{
  width:520px;height:520px;top:-120px;left:-60px;
  background:radial-gradient(circle,rgba(0,255,204,.16) 0%,transparent 65%);
  filter:blur(60px);
  animation:orb-drift-1 10s ease-in-out infinite alternate;
}
.hero-orb-2{
  width:420px;height:420px;top:-80px;right:-40px;
  background:radial-gradient(circle,rgba(155,107,255,.18) 0%,transparent 65%);
  filter:blur(70px);
  animation:orb-drift-2 12s ease-in-out infinite alternate;
}
.hero-orb-3{
  width:280px;height:280px;bottom:-40px;left:45%;
  background:radial-gradient(circle,rgba(255,80,80,.18) 0%,transparent 65%);
  filter:blur(50px);
  animation:orb-drift-3 8s 1s ease-in-out infinite alternate;
}

/* --- Hero grid pulse & scan line --- */
.hero-grid-bg{animation:grid-pulse 4s ease-in-out infinite}
.hero-scan{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,255,204,.2),transparent);
  top:-4%;pointer-events:none;z-index:2;
  animation:scan-line 6s linear infinite;
}

/* --- Card hover --- */
.card{
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  position:relative;overflow:hidden;
}
.card::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,transparent 35%,rgba(0,255,204,.055) 50%,transparent 65%);
  opacity:0;transition:opacity .3s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(0,255,204,.35);
  box-shadow:0 28px 70px rgba(0,0,0,.28),0 0 32px rgba(0,255,204,.1);
}
.card:hover::after{opacity:1}

/* --- Button shimmer & breathing pulse --- */
.btn-primary{
  position:relative;overflow:hidden;
  animation:btn-pulse-ring 3s ease-in-out infinite;
  transition:transform .2s ease;
}
.btn-primary::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:45%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-200%) skewX(-20deg);pointer-events:none;
}
.btn-primary:hover::after{animation:btn-shimmer .55s ease forwards}
.btn-primary:hover{transform:translateY(-1px)}

/* --- Nav link underline --- */
.nav-link{position:relative}
.nav-link::after{
  content:'';position:absolute;bottom:-4px;left:0;
  width:0;height:2px;background:var(--cyan);border-radius:2px;
  transition:width .25s ease;
}
.nav-link:hover::after,.nav-link.active::after{width:100%}
nav.scrolled{
  backdrop-filter:blur(32px) saturate(180%);
  border-bottom-color:rgba(0,255,204,.14);
  box-shadow:0 1px 24px rgba(0,255,204,.06);
}

/* --- Section tag line animation (override static width) --- */
.section-tag::before{width:0}
.section-tag.tag-visible::before{animation:tag-line .4s .1s ease forwards}

/* --- Scroll fade-up base --- */
.scroll-hidden{opacity:0;transform:translateY(18px)}
.scroll-visible{animation:fade-up 1s cubic-bezier(.22,.61,.36,1) forwards}

/* --- Terminal typewriter --- */
.terminal > div{
  opacity:0;
  animation:term-in .3s ease forwards;
}
.terminal > div:nth-child(1){animation-delay:.15s}
.terminal > div:nth-child(2){animation-delay:.45s}
.terminal > div:nth-child(3){animation-delay:.75s}
.terminal > div:nth-child(4){animation-delay:1.05s}
.terminal > div:nth-child(5){animation-delay:1.35s}
.terminal > div:nth-child(6){animation-delay:1.65s}
.terminal-cursor{
  display:inline-block;width:8px;height:13px;
  background:var(--cyan);vertical-align:middle;margin-left:3px;
  border-radius:1px;opacity:0;
  animation:cursor-blink 1s step-end infinite;
  animation-delay:2.1s;
}

/* --- Footer top glow --- */
footer{box-shadow:inset 0 1px 0 rgba(0,255,204,.08),0 -1px 30px rgba(0,255,204,.04)}

/* --- Reduced motion fallback --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .scroll-hidden{opacity:1;transform:none}
}

/* --- Photo showcase --- */
.photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.photo-card{
  margin:0;
}
.photo-wrap{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:var(--card);
}
.photo-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s ease, filter .65s ease;
  filter:brightness(.82) saturate(.85);
}
.photo-wrap::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6) 100%);
  pointer-events:none;
  z-index:1;
}
.photo-card:hover .photo-wrap img{
  transform:scale(1.06);
  filter:brightness(.92) saturate(1.05);
}
.photo-card figcaption{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.photo-card figcaption strong{
  font-family:'Syne',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--white);
  letter-spacing:-.02em;
}
.photo-card figcaption span{
  font-size:.875rem;
  color:var(--muted);
  line-height:1.65;
}
@media(max-width:860px){
  .photo-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════
   TRUCKING APP DEMO — Operations Dashboard
   ═══════════════════════════════════════════ */

.demo-metrics{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:44px;
  margin-bottom:0;
}
.demo-metric{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:22px 20px;
}
.demo-metric strong{
  display:block;
  font-family:'Syne',sans-serif;
  font-size:28px;
  letter-spacing:-.03em;
  margin-bottom:6px;
  color:var(--cyan);
}
.demo-metric span{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

/* App shell chrome */
.demo-shell{
  background:#07101d;
  border:1px solid rgba(0,255,204,.14);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 50px 120px rgba(0,0,0,.55),0 0 0 1px rgba(0,255,204,.06);
  margin-top:32px;
}
.demo-titlebar{
  background:#0c1526;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:12px 20px;
  display:flex;
  align-items:center;
  gap:16px;
}
.demo-dots{display:flex;gap:6px}
.demo-dots span{width:10px;height:10px;border-radius:50%}
.demo-dots span:nth-child(1){background:#ff5f57}
.demo-dots span:nth-child(2){background:#febc2e}
.demo-dots span:nth-child(3){background:#28c840}
.demo-url{
  font-family:'Space Mono',monospace;
  font-size:11px;
  color:rgba(242,242,248,.3);
  letter-spacing:.04em;
}

/* Sidebar + main layout */
.demo-layout{
  display:grid;
  grid-template-columns:200px 1fr;
  min-height:480px;
}
.demo-sidebar{
  background:#09111f;
  border-right:1px solid rgba(255,255,255,.06);
  padding:20px 0;
}
.demo-nav-item{
  padding:10px 20px;
  font-size:13px;
  color:rgba(242,242,248,.4);
  cursor:default;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'DM Sans',sans-serif;
  border-left:2px solid transparent;
}
.demo-nav-active{
  color:var(--cyan);
  background:rgba(0,255,204,.07);
  border-left-color:var(--cyan);
}
.demo-nav-sep{
  height:1px;
  background:rgba(255,255,255,.06);
  margin:10px 0;
}
.demo-badge{
  margin-left:auto;
  background:var(--accent3);
  color:#fff;
  font-size:10px;
  font-family:'Space Mono',monospace;
  padding:2px 6px;
  border-radius:999px;
  font-weight:700;
}

/* Main content */
.demo-main{
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:20px;
  overflow:hidden;
}

/* Pipeline columns */
.demo-pipeline{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.demo-column{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  padding:14px;
}
.demo-col-header{
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(242,242,248,.4);
  margin-bottom:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.demo-count{
  background:rgba(255,255,255,.1);
  font-size:10px;
  padding:2px 7px;
  border-radius:999px;
  color:var(--white);
}
.demo-load-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:7px;
  padding:9px 11px;
  font-size:11px;
  color:rgba(242,242,248,.65);
  margin-bottom:8px;
  font-family:'Space Mono',monospace;
  line-height:1.5;
}
.demo-load-card:last-child{margin-bottom:0}
.demo-load-hot{
  border-color:rgba(0,255,204,.32);
  color:var(--cyan);
  background:rgba(0,255,204,.05);
}
.demo-load-booked{
  border-color:rgba(40,200,80,.25);
  color:rgba(80,220,100,.9);
  background:rgba(40,200,80,.04);
}
.demo-load-dead{
  opacity:.35;
}

/* Broker table */
.demo-table-wrap{
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  overflow:hidden;
}
.demo-table-header{
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(242,242,248,.4);
}
.demo-table{
  width:100%;
  border-collapse:collapse;
}
.demo-table th{
  text-align:left;
  padding:10px 16px;
  font-family:'Space Mono',monospace;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(242,242,248,.3);
  font-weight:400;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.demo-table td{
  padding:10px 16px;
  color:rgba(242,242,248,.72);
  border-bottom:1px solid rgba(255,255,255,.04);
  font-family:'DM Sans',sans-serif;
  font-size:13px;
}
.demo-table tbody tr:last-child td{border-bottom:none}
.demo-table .demo-green{color:#4cd97a;font-family:'Space Mono',monospace;font-size:11px}
.demo-table .demo-warn{color:#f0c040;font-family:'Space Mono',monospace;font-size:11px}
.demo-table .demo-dead{color:rgba(242,242,248,.3);font-family:'Space Mono',monospace;font-size:11px}

@media(max-width:980px){
  .demo-metrics{grid-template-columns:repeat(2,1fr)}
  .demo-layout{grid-template-columns:1fr}
  .demo-sidebar{display:none}
  .demo-pipeline{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .demo-pipeline{grid-template-columns:1fr}
  .demo-metrics{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════
   PAGE VARIANTS — Per-page hero differentiation
   ═══════════════════════════════════════════ */

/* Upward scan (Systems) */
@keyframes scan-line-rev{
  0%{top:104%;opacity:0}
  3%{opacity:.85}
  97%{opacity:.85}
  100%{top:-4%;opacity:0}
}

/* Horizontal left-to-right scan (Work) */
@keyframes scan-line-vert{
  0%{transform:translateX(-4vw);opacity:0}
  3%{opacity:.85}
  97%{opacity:.85}
  100%{transform:translateX(100vw);opacity:0}
}

/* Softer fade for about */
@keyframes fade-up-calm{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ---- SYSTEMS: right side energy, upward scan ---- */
.page-systems .hero-orb-1{
  left:auto;right:-50px;top:-80px;
  background:radial-gradient(circle,rgba(0,255,204,.14) 0%,transparent 65%);
  animation:orb-drift-2 10s ease-in-out infinite alternate;
}
.page-systems .hero-orb-2{
  right:auto;left:-50px;top:30px;
  background:radial-gradient(circle,rgba(155,107,255,.2) 0%,transparent 65%);
  animation:orb-drift-1 12s ease-in-out infinite alternate;
}
.page-systems .hero-orb-3{
  bottom:-40px;left:28%;right:auto;
}
.page-systems .hero-scan{
  animation:scan-line-rev 7s linear infinite;
}
.page-systems .hero-grid-bg{
  transform:scaleX(-1);
}

/* ---- WORK: diagonal energy, horizontal scan ---- */
.page-work .hero-orb-1{
  top:auto;bottom:-40px;left:-30px;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(0,255,204,.12) 0%,transparent 65%);
  animation:orb-drift-3 11s ease-in-out infinite alternate;
}
.page-work .hero-orb-2{
  top:-60px;right:22%;left:auto;
  background:radial-gradient(circle,rgba(155,107,255,.16) 0%,transparent 65%);
}
.page-work .hero-orb-3{
  top:-10px;right:-30px;left:auto;bottom:auto;
  width:320px;height:320px;
  background:radial-gradient(circle,rgba(0,200,255,.14) 0%,transparent 65%);
  animation:orb-drift-1 9s ease-in-out infinite alternate;
}
.page-work .hero-scan{
  top:0;bottom:0;left:0;right:auto;
  height:100%;width:2px;
  background:linear-gradient(180deg,transparent,rgba(0,255,204,.2),transparent);
  animation:scan-line-vert 8s linear infinite;
}

/* ---- ABOUT: calm, dim, no scan ---- */
.page-about .hero-orb-1{
  opacity:.45;
  animation-duration:20s;
  background:radial-gradient(circle,rgba(155,107,255,.12) 0%,transparent 65%);
}
.page-about .hero-orb-2{
  opacity:.35;
  animation-duration:24s;
}
.page-about .hero-orb-3{display:none}
.page-about .hero-scan{display:none}
.page-about .hero-grid-bg{opacity:.5}
.page-about .scroll-visible{animation:fade-up-calm .7s ease forwards}

/* ---- CONTACT: single centered focus ---- */
.page-contact .hero-orb-1{display:none}
.page-contact .hero-orb-2{
  width:640px;height:640px;
  top:-180px;
  left:calc(50% - 320px);right:auto;
  background:radial-gradient(circle,rgba(0,255,204,.11) 0%,rgba(155,107,255,.07) 45%,transparent 65%);
  animation:orb-drift-3 14s ease-in-out infinite alternate;
}
.page-contact .hero-orb-3{display:none}
.page-contact .hero-scan{animation-duration:4s;opacity:.55}

/* ═══════════════════════════════════════════
   CHAOS PANEL — Systems Problem Section
   ═══════════════════════════════════════════ */

.prob-grid{align-items:center;gap:40px}

.chaos-panel{
  border:1px solid rgba(255,80,80,.2);
  border-radius:18px;
  padding:28px;
  position:relative;
  background:rgba(255,50,50,.025);
  box-shadow:0 20px 60px rgba(0,0,0,.2), 18px 0 40px -18px rgba(0,255,204,.1);
}
.chaos-header{
  display:flex;align-items:center;gap:10px;
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,107,107,.65);margin-bottom:20px;
}
.chaos-pulse{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent3);flex-shrink:0;
  animation:leak-pulse 1.6s ease-in-out infinite;
}
@keyframes leak-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.3;transform:scale(.6)}
}
.chaos-row{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--card);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:13px 15px;margin-bottom:10px;
  animation:float-chaos 5s ease-in-out infinite alternate;
}
.chaos-row:last-of-type{margin-bottom:0}
.chaos-row:nth-child(2){animation-delay:0s;animation-duration:4.5s}
.chaos-row:nth-child(3){animation-delay:.7s;animation-duration:5.5s}
.chaos-row:nth-child(4){animation-delay:1.4s;animation-duration:4.8s}
.chaos-row:nth-child(5){animation-delay:.35s;animation-duration:5.2s}
.chaos-row:nth-child(6){animation-delay:1.1s;animation-duration:4.2s}
@keyframes float-chaos{
  from{transform:translateY(0)}
  to{transform:translateY(-3px)}
}
.ctag{
  flex-shrink:0;font-family:'Space Mono',monospace;
  font-size:9px;letter-spacing:.14em;font-weight:700;
  padding:3px 8px;border-radius:4px;margin-top:1px;text-transform:uppercase;
}
.ctag-red{
  color:rgba(255,107,107,.9);
  background:rgba(255,80,80,.12);
  border:1px solid rgba(255,80,80,.25);
}
.ctag-yellow{
  color:rgba(240,200,60,.9);
  background:rgba(240,180,0,.08);
  border:1px solid rgba(240,180,0,.22);
}
.crow-body{display:flex;flex-direction:column;gap:3px;flex:1}
.crow-body strong{font-size:13px;font-family:'Syne',sans-serif;font-weight:600;line-height:1.3}
.crow-body span{font-size:12px;color:var(--muted);line-height:1.4}
.crow-count{
  flex-shrink:0;font-family:'Space Mono',monospace;
  font-size:11px;color:rgba(255,107,107,.75);align-self:center;
}
.chaos-footer{
  display:flex;align-items:center;gap:9px;margin-top:18px;
  font-family:'Space Mono',monospace;font-size:10px;
  color:rgba(255,107,107,.5);letter-spacing:.1em;
}
.chaos-dot-pulse{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent3);flex-shrink:0;
  animation:leak-pulse 2s ease-in-out infinite;
}

/* Fix card */
.prob-fix-card{
  border-color:rgba(0,255,204,.2);
  box-shadow:0 20px 60px rgba(0,0,0,.22),-18px 0 40px -18px rgba(0,255,204,.12);
  align-self:center;
}
.prob-fix-card p{color:var(--muted);font-size:15px;line-height:1.75}
.prob-fix-card p+p{margin-top:12px}
.prob-fix-items{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.prob-fix-item{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(242,242,248,.8)}
.pfi-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);flex-shrink:0;
  box-shadow:0 0 6px rgba(0,255,204,.5);
}

/* ── Contact page: direct info ── */
.contact-direct{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.contact-direct-item{
  padding:15px 20px;background:var(--card);
  border:1px solid var(--border);border-radius:12px;
}
.cdi-label{
  display:block;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}
.cdi-value{
  font-family:'Syne',sans-serif;font-size:18px;font-weight:700;
  color:var(--white);text-decoration:none;letter-spacing:-.01em;
}
a.cdi-value:hover{color:var(--cyan)}

/* ── About page: personal marker ── */
.about-marker{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px;margin-top:28px;
  background:rgba(155,107,255,.05);
  border:1px solid rgba(155,107,255,.15);border-radius:12px;
}
.about-marker-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent2);flex-shrink:0;margin-top:6px;
  box-shadow:0 0 10px rgba(155,107,255,.5);
}
.about-marker p{font-size:14px;color:rgba(242,242,248,.68);line-height:1.65}

@media(max-width:980px){
  .prob-grid{gap:24px}
  .page-contact .hero-orb-2{left:calc(50% - 200px);width:400px;height:400px}
}

/* ═══════════════════════════════════════════
   WHAT YOU GET — Featured + panel layout
   ═══════════════════════════════════════════ */

.what-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.what-featured{
  padding:36px;
}
.what-featured::before{
  content:'';
  position:absolute;
  top:0;left:20%;right:20%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,255,204,.28),transparent);
}
.what-panel{
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 26px;
  position:relative;
  overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.what-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(135deg,transparent 35%,rgba(0,255,204,.055) 50%,transparent 65%);
  opacity:0;transition:opacity .3s ease;
}
.what-panel:hover{
  transform:translateY(-4px);
  border-color:rgba(0,255,204,.35);
  box-shadow:0 28px 70px rgba(0,0,0,.28),0 0 32px rgba(0,255,204,.1);
}
.what-panel:hover::after{opacity:1}
.what-num{
  font-family:'Space Mono',monospace;
  font-size:22px;
  font-weight:700;
  color:rgba(0,255,204,.22);
  line-height:1;
  flex-shrink:0;
  width:38px;
  margin-top:3px;
}
.what-panel h4{
  font-family:'Syne',sans-serif;
  font-size:18px;
  letter-spacing:-.01em;
  margin-bottom:8px;
}
.what-panel p{
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
@media(max-width:980px){
  .what-grid{grid-template-columns:1fr}
}