/* ==========================================================================
   Obsidian Sentinel — Wizowl Solutions design system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1&display=swap');

:root{
  /* --- surfaces & text (from DESIGN.md) --- */
  --surface: #121318;
  --surface-dim: #0d0e13;
  --surface-container-lowest: #0d0e13;
  --surface-container-low: #1a1b20;
  --surface-container: #1e1f24;
  --surface-container-high: #282a2f;
  --surface-container-highest: #33353a;
  --on-surface: #e2e2e8;
  --on-surface-variant: #c4c6d2;
  --outline: #8e909c;
  --outline-variant: #434751;

  /* --- brand --- */
  --primary: #afc6ff;
  --on-primary: #002d6d;
  --primary-container: #3b5ea5;
  --on-primary-container: #cedbff;
  --secondary: #ffb4a4;
  --on-secondary: #561f14;
  --secondary-container: #a15a4b;
  --tertiary: #ffb866;
  --on-tertiary-container: #ffd4a7;

  /* --- neomorphic shadow tones --- */
  --neo-hl: #1c2540;      /* highlight, top-left light source */
  --neo-sh: #05070d;      /* deep shadow, bottom-right */

  /* --- radius scale (DESIGN.md: 24px primary, 12px small, full for pills) --- */
  --r-lg: 24px;
  --r-sm: 12px;
  --r-full: 9999px;

  /* --- spacing --- */
  --gutter: 24px;
  --margin-desktop: 64px;
  --container-max: 1280px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
.material-symbols-outlined{
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
  font-size: 22px; line-height:1;
}

/* --- layout helpers --- */
.wrap{ max-width: var(--container-max); margin: 0 auto; padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); }
.section{ padding: 96px 0; }
.section-tight{ padding: 64px 0; }
@media (max-width: 900px){
  .wrap{ padding-left: 20px; padding-right: 20px; }
  .section{ padding: 64px 0; }
}

/* --- typography --- */
.eyebrow{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--primary); }
h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-0.01em; color:var(--on-surface); }
.display{ font-size: 52px; line-height: 1.05; letter-spacing:-0.02em; font-weight:800; }
.headline-xl{ font-size:40px; line-height:1.15; letter-spacing:-0.02em; font-weight:700; }
.headline-lg{ font-size:32px; line-height:1.2; letter-spacing:-0.01em; font-weight:700; }
.headline-sm{ font-size:20px; line-height:1.35; font-weight:700; }
.body-lg{ font-size:18px; line-height:1.6; color: var(--on-surface-variant); }
.body-md{ font-size:16px; line-height:1.6; color: var(--on-surface-variant); }
.body-sm{ font-size:14px; line-height:1.55; color: var(--on-surface-variant); }
.label-caps{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width: 900px){
  .display{ font-size:36px; }
  .headline-xl{ font-size:28px; }
  .headline-lg{ font-size:24px; }
}

/* ==========================================================================
   Neomorphism — dual shadow technique
   ========================================================================== */
.neo-raised{
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: -10px -10px 20px var(--neo-hl), 10px 10px 20px var(--neo-sh);
}
.neo-raised-sm{
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: -6px -6px 12px var(--neo-hl), 6px 6px 12px var(--neo-sh);
}
.neo-inset{
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: inset -6px -6px 12px var(--neo-hl), inset 6px 6px 12px var(--neo-sh);
}
.neo-inset-sm{
  background: var(--surface);
  border-radius: var(--r-sm);
  box-shadow: inset -3px -3px 6px var(--neo-hl), inset 3px 3px 6px var(--neo-sh);
}
.neo-float{
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: -20px -20px 40px var(--neo-hl), 20px 20px 40px var(--neo-sh);
}
.neo-circle{ border-radius: var(--r-full); }

.neo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--surface);
  color: var(--primary);
  font-weight:700; font-size:15px;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 16px 32px;
  cursor: pointer;
  box-shadow: -8px -8px 16px var(--neo-hl), 8px 8px 16px var(--neo-sh);
  transition: box-shadow .15s ease, transform .1s ease;
}
.neo-btn:hover{ color:#c9d8ff; }
.neo-btn:active{
  box-shadow: inset -4px -4px 8px var(--neo-hl), inset 4px 4px 8px var(--neo-sh);
  transform: scale(0.98);
}
.neo-btn.ghost{ color: var(--on-surface-variant); }
.neo-btn.primary{ border-color: var(--primary-container); color:#dfe8ff; }
.neo-btn.sm{ padding:10px 18px; border-radius: var(--r-sm); font-size:14px; }

.chip{
  display:inline-flex; align-items:center; padding:8px 18px; border-radius: var(--r-full);
  background: var(--surface); font-size:14px; font-weight:500; color: var(--on-surface);
  box-shadow: inset -3px -3px 6px var(--neo-hl), inset 3px 3px 6px var(--neo-sh);
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 50;
  background: rgba(18,19,24,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 16px var(--margin-desktop); max-width: var(--container-max); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-weight:800; color:var(--primary); padding:9px; }
.brand-mark img{ width:100%; height:100%; object-fit:contain; }
.brand-name{ font-weight:700; font-size:16px; letter-spacing:-0.01em; }
.nav-links{ display:flex; gap:8px; align-items:center; }
.nav-link{ padding:10px 16px; border-radius: var(--r-sm); font-size:14px; font-weight:500; color: var(--on-surface-variant); transition: box-shadow .15s, color .15s; }
.nav-link:hover{ color: var(--primary); box-shadow: inset -3px -3px 6px var(--neo-hl), inset 3px 3px 6px var(--neo-sh); }
.nav-link.current{ color: var(--primary); font-weight:700; box-shadow: inset -3px -3px 6px var(--neo-hl), inset 3px 3px 6px var(--neo-sh); }
.nav-cta{ display:none; }
@media (min-width: 900px){ .nav-cta{ display:inline-flex; } }
.nav-links{ display:none; }
@media (min-width: 900px){ .nav-links{ display:flex; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ border-top: 1px solid rgba(255,255,255,0.05); margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gutter); padding: 64px 0 40px; }
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer h4{ color: var(--primary); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; }
.footer li{ margin-bottom:10px; }
.footer a{ color: var(--on-surface-variant); font-size:14px; }
.footer a:hover{ color: var(--primary); }
.footer-bottom{ text-align:center; padding:20px 0; border-top:1px solid rgba(255,255,255,0.05); font-size:12px; letter-spacing:.04em; color: var(--on-surface-variant); }

/* ==========================================================================
   Reusable card/grid patterns
   ========================================================================== */
.grid{ display:grid; gap: var(--gutter); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.grid-6{ grid-template-columns: repeat(6,1fr); }
@media (max-width: 1000px){ .grid-3,.grid-4{ grid-template-columns: repeat(2,1fr);} .grid-6{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr;} .grid-6{ grid-template-columns: repeat(2,1fr);} }

.icon-well{
  width:52px; height:52px; border-radius: var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color: var(--primary); flex-shrink:0;
}
/* Accent rotation — pulls the palette away from an all-blue look */
.icon-well.c-secondary{ color: var(--secondary); }
.icon-well.c-tertiary{ color: var(--tertiary); }
.eyebrow.c-secondary{ color: var(--secondary); }
.eyebrow.c-tertiary{ color: var(--tertiary); }
.chip.c-secondary{ color: var(--secondary); }
.chip.c-tertiary{ color: var(--tertiary); }
.step-num.c-secondary{ color: var(--secondary); }
.step-num.c-tertiary{ color: var(--tertiary); }
.accent-bar{ width:36px; height:4px; border-radius:2px; margin-bottom:14px; }
.accent-bar.primary{ background: var(--primary); }
.accent-bar.secondary{ background: var(--secondary); }
.accent-bar.tertiary{ background: var(--tertiary); }
.card{ padding: 32px; }
.card h3{ margin-bottom:8px; }
.card p{ margin:0; }

.list-check{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.list-check li{ display:flex; align-items:flex-start; gap:10px; font-size:15px; color: var(--on-surface-variant); }
.list-check .material-symbols-outlined{ color: var(--primary); font-size:18px; margin-top:2px; }

.pill-row{ display:flex; flex-wrap:wrap; gap:10px; }

.hero{
  padding: 168px 0 96px;
  display:flex; align-items:center; gap:64px;
}
@media (max-width: 900px){ .hero{ flex-direction:column; align-items:flex-start; padding-top:140px; } }
.hero-copy{ flex:1.1; }
.hero-visual{ flex:1; }
.cta-row{ display:flex; flex-wrap:wrap; gap:16px; margin-top:32px; }

.quote-block{ padding:32px; font-style:italic; font-size:17px; color: var(--on-surface); }

.step-num{
  width:40px; height:40px; border-radius: var(--r-full);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; color: var(--primary); position:absolute; top:-20px; left:50%; transform:translateX(-50%);
}
.step-card{ position:relative; padding: 44px 16px 24px; text-align:center; }

.section-head{ max-width: 640px; margin: 0 auto 48px; text-align:center; }
.section-head.left{ margin: 0 0 48px; text-align:left; }