:root{
  --bg: #0b0f14;
  --bg-elev: #111826;
  --card: #121a27;
  --text: #e6edf7;
  --muted: #9fb0c6;
  --ink: #dbe7ff;
  --accent: #2dd4bf;
  --accent-2: #60a5fa;
  --success: #16a34a;
  --warn: #f59e0b;
  --danger: #ef4444;
  --border: #263246;
  --shadow: 0 1px 0 rgba(255,255,255,0.02), 0 8px 24px rgba(0,0,0,0.35);
  --radius: 12px;
  --space: 12px;
  --space-lg: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: radial-gradient(1000px 500px at 10% -10%, #142033, transparent), var(--bg);
}

.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:8px; top:8px; width:auto; height:auto; background:#fff; color:#000; padding:6px 10px; z-index:999}

.fc-header, .fc-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 20px; background: var(--bg-elev); border-bottom:1px solid var(--border);
}
.fc-footer{border-top:1px solid var(--border); border-bottom:none}

.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:700; letter-spacing:.3px}
.header-actions{display:flex; align-items:center; gap:16px}
.toggle{display:flex; align-items:center; gap:8px; font-size:14px}
.muted{color:var(--muted)}

/* Base hero spacing */
.hero{display:flex; align-items:center; justify-content:space-between; gap:20px; padding: 0 20px; background: transparent}

/* Hero with image and overlay */
.hero-with-image{
  position:relative; isolation:isolate; min-height: 360px; border-radius: 14px; overflow:hidden;
  padding: clamp(16px, 5vw, 36px);
  display:grid; align-items:end;
  background: none;
  margin: 12px 20px 0;
}
.hero-with-image .hero-media{position:absolute; inset:0; z-index:-2;}
.hero-with-image .hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center;
  filter: saturate(1.05) contrast(1.02);
}
.hero-with-image .hero-overlay{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 70% at 10% 5%, rgba(9,13,22,.75), rgba(9,13,22,.1) 60%, transparent 100%),
    linear-gradient(180deg, rgba(9,13,22,.65), rgba(9,13,22,.35) 30%, rgba(9,13,22,.65) 100%);
  backdrop-filter: blur(2px);
}
.hero-with-image .hero-content{max-width: 920px; color: var(--ink);}
.hero-with-image h1{font-size: clamp(24px, 4vw, 40px); margin: 0 0 6px;}
.hero-with-image p{font-size: clamp(14px, 2vw, 18px); color: var(--text); opacity:.92; margin:0 0 14px;}
.hero-cta{display:flex; gap:10px; flex-wrap:wrap}
.btn.cta-primary{
  background: linear-gradient(180deg, #22d3ee, #14b8a6);
  color:#001015; border:0; padding:10px 14px; font-weight:700; border-radius:8px;
}
.btn.cta-secondary{
  background: transparent; border:1px solid rgba(255,255,255,.35);
  color:#e6f6ff; padding:10px 14px; border-radius:8px;
}
.trust-row{display:flex; align-items:center; gap:8px; margin-top:10px; color:#d7e7ff; opacity:.85}
.trust-row .dot{opacity:.6}

/* Layout grid */
.grid{display:grid; gap:18px; padding: 16px 20px; grid-template-columns: repeat(3, minmax(0, 1fr));}
@media (max-width: 1100px){ .grid{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 760px){ .grid{grid-template-columns: 1fr;} }

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  position: relative;
}
.col-span-2{grid-column: span 2}
.card-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; border:1px solid var(--border); color:var(--muted)}
.pill.danger{color:#fecaca; border-color:#7f1d1d; background:rgba(239,68,68,.08)}
.pill.neutral{color:#c7d2fe; border-color:#3730a3; background:rgba(99,102,241,.08)}

/* Decorative illustration slab for cards */
.card.illustrated{
  background:
    radial-gradient(600px 200px at 110% -10%, rgba(45,212,191,.08), transparent),
    var(--card);
}
.card .card-illus{
  inline-size: 100%; block-size: 80px; margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(96,165,250,.15), rgba(45,212,191,.15));
  border:1px solid var(--border); border-radius:10px;
}

.forecast{display:grid; gap:10px}
.forecast canvas{width:100%; height:auto; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04)); border-radius:10px; border:1px dashed var(--border)}
.forecast-stats{display:flex; gap:20px; color:var(--muted)}

.whatif .controls{display:grid; gap:10px; grid-template-columns: repeat(3, minmax(0, 1fr));}
@media (max-width: 760px){ .whatif .controls{grid-template-columns: 1fr;} }
label{display:flex; flex-direction:column; gap:6px; font-size:14px}
input[type="range"], input[type="number"]{width:100%}

.stack{display:flex; flex-direction:column; gap:10px}
.insight{border:1px solid var(--border); border-radius:10px; padding:10px; background: #0e1726;}
.insight .title{display:flex; align-items:center; justify-content:space-between; gap:12px}
.badge{font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid var(--border)}
.badge.high{color:#bbf7d0; background: rgba(22,163,74,.12); border-color:#14532d}
.badge.med{color:#fde68a; background: rgba(245,158,11,.12); border-color:#7c2d12}
.badge.low{color:#fecaca; background: rgba(239,68,68,.12); border-color:#7f1d1d}
.insight .actions{display:flex; gap:8px}
.btn{border:1px solid var(--border); background:transparent; color:var(--ink); border-radius:8px; padding:6px 10px; cursor:pointer}
.btn.primary{background: linear-gradient(180deg, #1f6feb, #1d4ed8); border:0; color:#e6f0ff}
.btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}

.explain{margin-top:8px; display:none; border-top:1px dashed var(--border); padding-top:8px; color:var(--muted); font-size:14px}
.explain.open{display:block}

.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:8px}
table{width:100%; border-collapse:collapse; font-size:14px}
th,td{padding:10px; border-bottom:1px solid var(--border)}
tbody tr:hover{background:rgba(255,255,255,0.03)}

.progress{height:10px; background:#0a1220; border:1px solid var(--border); border-radius:999px; position:relative; overflow:hidden;}
.progress > span{position:absolute; left:0; top:0; bottom:0; background: linear-gradient(90deg, #10b981, #22d3ee)}

.toast{
  position:fixed; right:16px; bottom:16px; padding:10px 12px; background:#0b1322; color:#e6f0ff;
  border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); opacity:0; transform:translateY(8px);
  transition: all .25s ease;
  z-index: 9998; /* Stay above content but below chatbot widget */
}
.toast.show{opacity:1; transform:translateY(0)}

/* Optional: nudge Zapier widget above toast if needed */
zapier-interfaces-chatbot-embed{z-index:9999; position:relative}