/* --------
  Sable AI - styles.css
  Dark, minimal, responsive, accessible
--------- */
:root{
  --bg: #0b0f14;
  --panel: #10151d;
  --card: #111827;
  --line: #1f2937;
  --text: #e6e8eb;
  --muted: #a6adbb;
  --accent: #3b82f6; /* subtle blue accent */
  --accent-2: #818cf8;
  --success: #10b981;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.25);
  --container: 1120px;
  --header-h: 64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(59,130,246,0.08), transparent 60%),
              radial-gradient(800px 600px at -10% 30%, rgba(129,140,248,0.08), transparent 60%),
              var(--bg);
  color:var(--text);
  font: 16px/1.6 "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

img{max-width:100%; display:block}
a{color:var(--text); text-decoration:none}
a:hover{color:#fff; text-decoration:underline}
h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
h1{font-size: clamp(2rem, 4vw + 1rem, 3.2rem); letter-spacing:-.02em}
h2{font-size: clamp(1.5rem, 2.4vw + .6rem, 2.2rem)}
h3{font-size: 1.125rem}
.lead{font-size: clamp(1.05rem, 1.2vw + .7rem, 1.25rem); color:var(--muted)}

.container{max-width:var(--container); margin:0 auto; padding:0 1.2rem}
.section{padding: clamp(2rem, 5vw, 4.5rem) 0}
.section-head{margin-bottom:2rem}
.muted{color:var(--muted)}
.max-60{max-width:60ch}
.max-70{max-width:70ch}
.margin-top{margin-top:2rem}

main section[id]{scroll-margin-top: calc(var(--header-h) + 12px)}

@supports (padding-top: env(safe-area-inset-top)){
  .site-header{padding-top: env(safe-area-inset-top)}
  main section[id]{scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top) + 12px)}
}

/* Header */
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.5rem .75rem; border-radius:8px; z-index:1000}

.site-header{
  position:sticky; top:0; z-index:999;
  background: rgba(11,15,20, .75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:var(--header-h)}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:600}
.brand.small .brand-text{font-size:.95rem}
.brand img{filter: drop-shadow(0 2px 6px rgba(59,130,246,.35))}
.brand-text{letter-spacing:.2px}

.site-nav{display:flex; gap:1rem}
.nav-link{padding:.5rem .75rem; border-radius:10px}
.nav-link.active, .nav-link:hover{background:rgba(129,140,248,.12); text-decoration:none}

.nav-toggle{
  display:none; width:42px; height:42px; border:1px solid var(--line); background:transparent; border-radius:12px;
}
.nav-toggle .bar{display:block; width:22px; height:2px; background:#cbd5e1; margin:5px auto}

/* Mobile nav */
@media (max-width: 840px){
  :root{ --header-h: 56px; }
  .site-nav{position:absolute; right:1.2rem; top:var(--header-h); background:rgba(16,21,29,.98); border:1px solid var(--line); border-radius:12px; padding:.4rem; display:none; flex-direction:column; width:220px; box-shadow: var(--shadow-soft)}
  .site-nav.open{display:flex}
  .nav-toggle{display:inline-grid; place-items:center}
}

/* Hero */
.hero{padding-top: clamp(1rem, 3vw, 2rem)}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 3rem); align-items:center}
.hero-copy .cta-row{display:flex; gap:.8rem; margin:1.1rem 0 1.25rem}
.btn{display:inline-block; padding:.75rem 1rem; border-radius:12px; border:1px solid var(--line); font-weight:600}
.btn-primary{background: linear-gradient(120deg, var(--accent), var(--accent-2)); color:#fff; border:none; box-shadow: var(--shadow)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost:hover{border-color:#334155}

.value-cards{display:grid; grid-template-columns: repeat(3,1fr); gap:.8rem; margin-top:.8rem}
.value-card{background: linear-gradient(180deg, rgba(59,130,246,.09), rgba(2,6,23,.2)); border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
.value-card h3{margin:0 0 .25rem}

.hero-art{position:relative; height:340px}
.hero-art .orb{position:absolute; inset:0; margin:auto; width:280px; height:280px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.35), rgba(129,140,248,.18) 40%, transparent 70%); filter: blur(12px)}
.hero-art .mesh{position:absolute; inset:0; border-radius:var(--radius); border:1px dashed rgba(148,163,184,.25); transform: rotate(3deg)}

@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .hero-art{order:2; height:140px; margin-top:.5rem}
  .value-cards{grid-template-columns: 1fr}
}

/* Cards & grids */
.offerings-grid{display:grid; grid-template-columns: repeat(4,1fr); gap:1rem}
.card{background:linear-gradient(180deg, rgba(2,6,23,.6), rgba(17,24,39,.6)); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; box-shadow: var(--shadow-soft); transition: transform .2s ease}
.card:hover{transform: translateY(-2px)}
.card-badge{display:inline-block; font-size:.8rem; letter-spacing:.08em; color:#c7d2fe; background:rgba(99,102,241,.16); padding:.25rem .5rem; border-radius:999px; border:1px solid rgba(99,102,241,.2); margin-bottom:.6rem}

@media (max-width: 1100px){
  .offerings-grid{grid-template-columns: repeat(2,1fr)}
}
@media (max-width: 640px){
  .offerings-grid{grid-template-columns: 1fr}
}

.feature-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem}
.feature{display:flex; gap:.9rem; background: linear-gradient(180deg, rgba(2,6,23,.5), rgba(17,24,39,.5)); border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
.feature .icon{font-size:1.4rem; line-height:1}
@media (max-width: 800px){
  .feature-grid{grid-template-columns: 1fr}
}

.bullet-grid{
  display:grid; gap:.6rem; grid-template-columns: repeat(2, 1fr);
  background:linear-gradient(180deg, rgba(2,6,23,.45), rgba(17,24,39,.45));
  border:1px solid var(--line); border-radius:var(--radius); padding:1rem;
}
.bullet-grid li{margin-left:1.1rem}
@media (max-width: 800px){
  .bullet-grid{grid-template-columns: 1fr}
}

/* Logos */
.logo-grid{display:grid; grid-template-columns: repeat(6,1fr); gap:1rem}
.logo-card{
  display:grid; place-items:center; min-height:84px;
  color:#cbd5e1; background:linear-gradient(180deg, rgba(2,6,23,.5), rgba(17,24,39,.5));
  border:1px dashed rgba(148,163,184,.3);
  border-radius:var(--radius-sm);
}
@media (max-width: 1100px){
  .logo-grid{grid-template-columns: repeat(3,1fr)}
}
@media (max-width: 640px){
  .logo-grid{grid-template-columns: repeat(2,1fr)}
}

/* CTA Banner */
.cta-banner{
  margin-top:2rem; padding:1.2rem 1.2rem; border-radius:var(--radius);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background: linear-gradient(90deg, rgba(59,130,246,.08), rgba(2,6,23,.2));
}
@media (max-width: 720px){
  .cta-banner{flex-direction:column; align-items:flex-start}
}

/* Contact */
.contact-grid{display:grid; grid-template-columns: repeat(3,1fr); gap:1rem}
.contact-card{display:flex; gap:.9rem; background: linear-gradient(180deg, rgba(2,6,23,.5), rgba(17,24,39,.5)); border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
.contact-card .icon{font-size:1.4rem}
@media (max-width: 900px){
  .contact-grid{grid-template-columns: 1fr}
}

/* Footer */
.site-footer{
  border-top:1px solid var(--line);
  background: rgba(10,14,20,.8);
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:70px;
}
.footer-inner .right{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap; color:var(--muted)
}
.footer-inner a{color:#cbd5e1}