:root{
  /* 🎨 Theme colors (change these to switch the whole look) */
  --bg:#090017cb;
  --msg-b: #000000;
  --msg-b1: #161616;
  --ink:#ffffff;
  --muted:#c0c0c0;
  --brand:#8b2300;
  --accent:#4db6ff;
  --danger:#ff6b6b;

  /* Derived surfaces (all depend on --bg for consistency) */
  --panel: color-mix(in oklab, var(--bg) 90%, #ffffff 10%);
  --panel-2: color-mix(in oklab, var(--bg) 95%, #000000 5%);
  --line:1px solid color-mix(in oklab, var(--ink), var(--bg) 85%);

  /* Layout / effects */
  --radius:14px;
  --radius-lg:22px;
  --grid:1100px;
  --shadow:0 10px 24px rgba(0,0,0,.25);

  /* 🔠 Font scale (standardized) */
  --fs-base: 14px;
  --fs-sm: 0.8rem;
  --fs-xs: 0.75rem;
  --fs-badge: 0.65rem;
  --fs-h1: clamp(15px, 3.2vw, 38px);
  --fs-h2: clamp(20px, 2.2vw, 26px);
  --fs-h3: clamp(16px, 2vw, 22px);
  --fs-1rem: 0.8rem;
}

html, body { height:100%; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg, color-mix(in oklab, var(--bg), #000 10%), var(--bg));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
  display:flex; flex-direction:column;
}
main{ flex:1; }

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--grid);margin-inline:auto;padding:28px 20px}
.container-footer{max-width:100%;margin-inline:auto;padding:28px 20px}
.narrow-down{max-width:var(--grid);margin-inline:auto;}
hr{border:none;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);margin:24px 0}

/* Full-bleed utility */
.full-bleed{ width:100vw; margin-left:50%; transform:translateX(-50%); }

/* --- Full-page background rotator (behind content) --- */
.bg-rotator{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:#0b1020;
}
.bg-rotator::before{
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.35) 30%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.55));
  pointer-events:none;
}
.bg-slide{ position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
.bg-slide.active{ opacity:1; z-index:1; }
.bg-media{ position:absolute; inset:0; }
.bg-media img, .bg-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.bg-media video{ background:var(--bg); }

/* Lift page content above background */
body > *:not(.bg-rotator){ position:relative; z-index:3; }

/* Nav (0.8 translucent overlay) */
nav.site{
  position:sticky; top:0; z-index:5;
  background:var(--bg);
  border-bottom:var(--line);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav-wrap{display:flex;align-items:center;gap:16px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 10px #10a37f88}
nav .links{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
nav .links a{padding:10px 6px;color:#dfe6ff}
nav .links a:hover{color:var(--brand)}
nav .actions{display:flex;gap:10px}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: var(--line);
    background:linear-gradient(180deg,var(--panel), var(--panel-2));
    color:var(--ink);
    font-weight: 700;
    box-shadow: var(--shadow);
    font-size: var(--fs-1rem);
}

.btn.primary {
    background:linear-gradient(180deg,var(--brand),color-mix(in oklab,var(--brand),#000 12%));
    border-color: color-mix(in oklab, var(--brand), #000 18%);
    color: var(--link);
}

.btn.ghost {
    background: transparent
}

/* Standardized text helpers */
.small{font-size:var(--fs-sm)}
.muted{color:var(--muted)}
.text-xs{font-size:var(--fs-xs)}
.text-sm{font-size:var(--fs-sm)}
.text-base{font-size:var(--fs-1rem)}
.text-h3{font-size:var(--fs-h3)}

/* Cards, buttons, sidebar, etc. now use only variables */
.card{
  background:linear-gradient(180deg,var(--panel), var(--panel-2));
  border:var(--line);
  border-radius:var(--radius);
  padding:16px;
  opacity:0.90;
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
  opacity:0.98;
  border-color: color-mix(in oklab,var(--ink), var(--bg) 70%);
}
.card .title{ display:flex; align-items:center; gap:10px; margin:4px 0 6px; }

/* 🔷 Graphics support for cards (icons/images) */
.card .icon{
  width:44px; height:44px; flex:0 0 44px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:var(--line);
  display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.card .icon img{
  width:24px; height:24px; object-fit:contain; opacity:.95;
}
.card img{ width:50%; border-radius:10px; margin-bottom:10px; margin: 0 auto 10px; display: block; }

/* Optional media block when you want banner-style graphics */
.card .media{
  position:relative; overflow:hidden; border-radius:12px;
  border:var(--line); margin:-4px -4px 10px; /* bleed edges slightly */
  aspect-ratio: 16 / 9;
  background:#0b1330;
}
.card .media img, .card .media video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.05) contrast(1.02);
  opacity:.95;
}
.card:hover .media img, .card:hover .media video{
  transform: scale(1.01);
}

/* Sections & grids */
.section{padding:26px 0}
.section h2{font-size:var(--fs-h2);margin:0 0 10px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ✅ New: 4-column grid for Industry cards */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1200px){ .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* Hero text (intro over the rotating background) */
.hero{padding:72px 0 12px}
.hero h1{
  font-size:var(--fs-h1); line-height:1.08; margin:10px 0;
  background:linear-gradient(135deg,#fff,#cfe7ff);
  -webkit-background-clip:text; background-clip:text; color:transparent
}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  font-size:var(--fs-badge);
  padding:6px 10px; border:var(--line); border-radius:999px; background:rgba(255,255,255,.08)
}

/* Table & form */
.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.table th{font-size:var(--fs-xs);color:#c8d2ff;text-align:left;padding:10px}
.table td{background:linear-gradient(180deg,var(--panel),#0b1330);border:var(--line);padding:12px 10px}
.form{display:grid;gap:14px}
.input{display:grid;gap:6px}
.input label{font-size:var(--fs-sm);color:#cbd2ea}
.field, textarea.field{padding:12px 14px;border-radius:12px;background:#0a1030;border:var(--line);color:var(--ink);font-size:var(--fs-1rem)}
.field:focus, textarea.field:focus{outline:2px solid color-mix(in oklab, var(--brand), #000 12%);outline-offset:0}

/* Footer (0.8 translucent overlay; sticks at bottom via flex layout) */
.footer{
  width: 100vw;
  padding:36px 20px; border-top:var(--line); color:var(--muted);
  background:var(--bg); backdrop-filter:saturate(140%) blur(8px);
  font-size: var(--fs-sm);
}

/* App layout (dashboard) */
.app{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
.sidebar{background:linear-gradient(180deg,#0a1022,#0b1330);border-right:var(--line);padding:16px;position:sticky;top:0;height:100vh}
.sidebar .new{margin-bottom:12px}
.sidebar .nav{display:grid;gap:6px}
.sidebar a{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;border:var(--line);font-size:var(--fs-sm)}
.sidebar a:hover{background:#0f1740}
.content{padding:24px}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px}
.prompt{display:flex;gap:10px;border:var(--line);border-radius:12px;background:var(--msg-b1);padding:8px}
.prompt input{flex:1;background:transparent;border:none;color:var(--ink);outline:none;font-size:var(--fs-1rem)}
.prompt .send{background:var(--brand);border:none;border-radius:10px;padding:10px 12px;font-weight:700;color:#04140f;cursor:pointer}
.chat{display:grid;gap:12px}
.msg{display:flex;gap:10px}
.msg .who{flex:0 0 28px;height:28px;border-radius:50%;background:var(--brand)}
.msg .bubble{flex:1;background:var(--msg-b);border:var(--line);border-radius:12px;padding:12px;font-size:var(--fs-1rem)}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{background:#0a1030;border:var(--line);border-radius:12px;padding:12px}
.kpi .value{font-size:1.4rem;font-weight:800}
@media (max-width:1000px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto}}

/* ===== OPTIONAL: legacy content slider (kept for reuse) ===== */
.slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:var(--line);background:linear-gradient(180deg,#0c132a,#0a1022)}
.slide{display:none;padding:22px;min-height:260px;display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:center}
.slide.active{display:grid}
.slide h3{margin:0 0 8px; font-size:var(--fs-h3)}
.slide img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:var(--line)}
.slider .controls{position:absolute;inset:auto 0 8px 0;display:flex;justify-content:center;gap:8px}
.slider .dot{width:8px;height:8px;border-radius:50%;background:#5f6a89;border:var(--line)}
.slider .dot.active{background:var(--brand);box-shadow:0 0 10px #10a37f88}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .bg-slide{ transition:none }
}

.progress .bar{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),color-mix(in oklab,var(--brand),#000 20%));transition:width .6s ease;position:relative;overflow:hidden}
.progress .bar.is-animating::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);animation: shimmer 1.4s infinite linear}
@keyframes shimmer{to{transform:translateX(100%)}}
.hidden{display:none}
.btn[disabled]{opacity:.55; pointer-events:none}

@keyframes shimmer{ to { transform: translateX(100%); } }