/* ========== Kabware — OpenAI-style dark design ========== */
/* === Theme override: force via [data-theme] === */
:root[data-theme="dark"]{
  --bg: #0b0b0f; --bg-elev:#0f1115; --text:#E6E6E9; --muted:#9AA0A6;
  --brand:#10b981; --accent:#60a5fa; --border:rgba(255,255,255,0.08);
  --ring: rgba(16,185,129,.45); --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg:#ffffff; --bg-elev:#f7f7fb; --text:#0f172a; --muted:#475569;
  --brand:#0F766E; --accent:#1d4ed8; --border:rgba(0,0,0,0.08);
  --ring: rgba(15,118,110,.25); --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Toggle button styles */
.theme-toggle{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); border-radius:999px; padding:8px 12px;
  background: transparent; color: var(--muted); cursor:pointer;
  font: inherit; line-height:1; transition: border-color .2s, color .2s, transform .15s, box-shadow .15s;
}
.theme-toggle:hover{ color:var(--text); transform: translateY(-1px); box-shadow: var(--shadow); }
.theme-toggle svg{ width:18px; height:18px; display:block }


/* Light/Dark tokens */
:root{
  --bg: #0b0b0f;
  --bg-elev: #0f1115;
  --text: #E6E6E9;
  --muted: #9AA0A6;
  --brand: #10b981;      /* teal/emerald accent */
  --accent: #60a5fa;     /* soft blue secondary */
  --border: rgba(255,255,255,0.08);
  --ring: rgba(16,185,129,.45);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg: #ffffff;
    --bg-elev: #f7f7fb;
    --text: #0f172a;
    --muted: #475569;
    --brand: #0F766E;
    --accent:#1d4ed8;
    --border: rgba(0,0,0,0.08);
    --ring: rgba(15,118,110,.25);
    --shadow: 0 10px 30px rgba(0,0,0,.08);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(99,102,241,.15), transparent 60%),
              radial-gradient(1000px 500px at 80% 0%, rgba(16,185,129,.12), transparent 55%),
              var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.container{max-width:1120px;margin:0 auto;padding:0 20px}

/* Subtle grid overlay (OpenAI-esque) */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(900px 600px at 50% 10%, rgba(0,0,0,.8), transparent 85%);
}

/* Header (glassy, sticky) */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-weight:600;letter-spacing:.2px}
.brand img{filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));}
.nav a{margin-left:18px;text-decoration:none;color:var(--muted);transition:color .2s}
.nav a:hover{color:var(--text)}

/* Hero */
.hero{padding:72px 0 48px;text-align:center}
.hero h1{
  margin:0; line-height:1.05;
  font-size: clamp(36px, 5.4vw, 64px);
  letter-spacing:-.02em;
  background: linear-gradient(180deg, #fff, #b9c0d0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{margin:14px auto 0;max-width:760px;color:var(--muted);font-size:18px}

/* Buttons */
.cta-row{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block; border:1px solid var(--border); border-radius:999px;
  padding:12px 18px; text-decoration:none; font-weight:600; letter-spacing:.2px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s, background .2s;
  background: linear-gradient(180deg, color-mix(in oklab, var(--bg) 96%, transparent), color-mix(in oklab, var(--bg) 92%, transparent));
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.btn-primary{
  background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 36%, transparent), color-mix(in oklab, var(--brand) 22%, transparent));
  border-color: color-mix(in oklab, var(--brand) 40%, var(--border));
  color:#fff;
}
.btn-outline{color:var(--text); background:transparent}

/* Cards (glass) */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:28px}
.card{
  position:relative; padding:16px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--bg-elev) 82%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, var(--shadow);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  backdrop-filter: blur(6px);
}
.card:hover{transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand) 25%, var(--border))}
.card .muted{color:var(--muted)}

/* Sections / typography */
.section-pad{padding:44px 0}
.lead{color:var(--muted);font-size:18px}
.list{padding-left:18px}
.card-img{border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; background: #0c0f14}
.service-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px}
@media (max-width: 920px){ .service-grid{grid-template-columns:1fr} }

/* Inputs */
input,textarea{
  width:100%; padding:12px 14px; font-size:16px; color:var(--text);
  background: color-mix(in oklab, var(--bg-elev) 88%, transparent);
  border:1px solid var(--border); border-radius: var(--radius);
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus,textarea:focus{border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring)}
textarea{min-height:140px;resize:vertical}
form.form{display:grid;gap:12px}
.muted{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:64px; background: color-mix(in oklab, var(--bg) 90%, transparent)}
.site-footer .container{display:flex;align-items:center;justify-content:space-between;padding:26px 0}
.footer-links a{margin-left:16px;color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}

/* Global link style: remove underlines, keep good focus */
a {
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: none;
}
a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Optional: a subtle hover for links that aren't buttons */
a:not(.btn):hover {
  color: var(--text);
  opacity: .9;
}

.card { position:relative; transition:transform .2s, box-shadow .2s, border-color .2s; }
.card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand) 25%, var(--border)); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.card a { position:absolute; inset:0; border-radius:inherit; }

.hero h1 {
  font-size: clamp(32px, 6vw, 64px);
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #fff, #b9c0d0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero p { color: #B7BDC7; max-width: 720px; margin-inline:auto; line-height:1.55 }

.hero {
  position: relative;
  overflow: clip; /* prevents image bleed */
}
.hero-media {
  position: absolute; inset: 0; z-index: -1;
}
.hero-media img, .hero-media source, .hero-media picture {
  display: block; width: 100%; height: 100%;
}
.hero-media img {
  object-fit: cover;
  object-position: 50% 35%; /* tweak for your focal point */
  filter: none;
}
/* overlay + gradient for readability */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(16,185,129,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55) 40%, rgba(0,0,0,.65));
  pointer-events: none;
}
@media (max-width: 800px){
  .hero-media img { object-position: 50% 25%; } /* lift subject for mobile */
}

/* Full-bleed hero */
.hero-bleed {
  margin: 0;           /* no gaps above/below */
}

.hero-bleed .hero-media {
  width: 100%;
}

.hero-bleed .hero-media img {
  display: block;      /* remove inline gap */
  width: 100%;         /* edge-to-edge */
  height: clamp(320px, 45vw, 680px);  /* responsive height */
  object-fit: cover;   /* crop to fill, no distortion */
}

/* Text section beneath the hero image */
.hero-content {
  text-align: center;
  padding: 40px 0;
}

/* (Optional) reduce top padding if header is sticky and you want tighter spacing */
.site-header + main .hero-bleed { margin-top: 0; }


/* Reset any legacy .hero styles that might add overlays/backgrounds */
.hero,
.hero::before,
.hero::after {
  background: none !important;
  position: static !important;
  box-shadow: none !important;
}

/* Full-bleed hero image */
.hero-bleed {
  margin: 0;
}
.hero-bleed img {
  display: block;           /* remove inline gap */
  width: 100%;              /* edge-to-edge */
  height: clamp(320px, 45vw, 720px);  /* responsive height */
  object-fit: cover;        /* crop without distortion */
}

/* Content that follows the image */
.hero-content {
  text-align: center;
  padding: 40px 0;
}

/* Centered footer */
.site-footer {
  border-top: 1px solid #2c2c2c;
}
.site-footer .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;     /* stack if more items later */
  align-items: center;        /* horizontal centering */
  justify-content: center;    /* vertical centering */
  gap: 8px;
  text-align: center;         /* center text */
}
.site-footer p { margin: 0; }

/* Dark mode variables override */
:root {
  color-scheme: light dark;
}
[data-theme="dark"] body { background:#0b0f1a; color:#e5e7eb; }
[data-theme="dark"] .muted { color:#94a3b8; }

[data-theme="dark"] .site-header,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .card,
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background:#111827;
  border-color:#1f2937;
  color:#e5e7eb;
}
[data-theme="dark"] .nav a { color:#e5e7eb; }
[data-theme="dark"] .btn-outline { background:transparent; color:#e5e7eb; border-color:#334155; }

/* Toggle button */
.theme-toggle{
  margin-left:12px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  cursor:pointer;
}
[data-theme="dark"] .theme-toggle{
  background:#0b1220;
  border-color:#334155;
  color:#e5e7eb;
}