:root{
  --bg:#0f172a;           /* slate-900 */
  --panel:#0b1224;        /* dark panel */
  --text:#e5e7eb;         /* gray-200 */
  --muted:#94a3b8;        /* slate-400 */
  --primary:#22d3ee;      /* cyan-400 */
  --primary-2:#06b6d4;    /* cyan-500 */
  --accent:#a78bfa;       /* violet-400 */
  --ring:#334155;         /* slate-700 */
  --success:#34d399;      /* emerald-400 */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, #1f2937, transparent),
              radial-gradient(800px 400px at 120% 10%, #111827, transparent),
              var(--bg);
  min-height:100vh;
  display:flex; flex-direction:column;
}

.container{width:min(1100px, 92vw); margin-inline:auto}

header{
  position:sticky; top:0; z-index:40;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  border-bottom:1px solid var(--ring);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; padding:14px 0;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.3px;
}
.brand-badge{
  width:28px; height:28px; border-radius:8px;
  background: conic-gradient(from 180deg at 50% 50%, var(--primary), var(--accent), var(--primary));
  box-shadow:0 0 20px color-mix(in oklab, var(--primary), transparent 70%);
}
nav a{
  color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:600;
}
nav a:hover{ color:var(--text); background: #111827 }
nav a[aria-current="page"]{ color:var(--bg); background:linear-gradient(90deg, var(--primary), var(--accent)); }

.hero{
  padding: clamp(48px, 8vw, 96px) 0;
}
.grid{
  display:grid; gap:22px;
}
.grid-2{ grid-template-columns: 1fr; }
@media (min-width: 840px){ .grid-2{ grid-template-columns: 1.1fr .9fr; }}

h1{ font-size: clamp(28px, 4vw, 48px); line-height:1.1; margin:0 0 14px 0; }
h2{ font-size: clamp(22px, 2.6vw, 32px); margin:20px 0 8px 0 }
h3{ font-size: clamp(18px, 2vw, 22px); margin:16px 0 6px 0 }
p.lead{ color:var(--muted); font-size: clamp(16px, 2.2vw, 20px)}

.card{
  background: color-mix(in oklab, var(--panel) 85%, transparent);
  border:1px solid var(--ring);
  border-radius:18px; padding:18px; box-shadow:0 10px 30px #00000030;
}
.kicker{ color:var(--primary); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }

ul.feature-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px }
.feature{ display:flex; gap:12px; align-items:flex-start }
.feature .dot{
  width:10px; height:10px; border-radius:50%; margin-top:9px;
  background: radial-gradient(circle at 30% 30%, var(--primary), var(--accent));
  box-shadow:0 0 12px color-mix(in oklab, var(--primary), transparent 60%);
}
a.button{
  display:inline-block; text-decoration:none; color:var(--bg); font-weight:800;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  padding:10px 16px; border-radius:12px; border:0; box-shadow:0 8px 24px #00000030;
}
a.button:hover{ filter:saturate(115%) brightness(1.06) }

.section{ padding:36px 0 }
.section + .section{ padding-top:0 }

.badges{ display:flex; gap:10px; flex-wrap:wrap }
.badge{
  padding:6px 10px; border-radius:999px; font-weight:600; border:1px dashed var(--ring); color:var(--muted);
}

footer{
  margin-top:auto; border-top:1px solid var(--ring);
  background: color-mix(in oklab, var(--bg) 85%, transparent);
}
.footer-inner{
  padding:24px 0; font-size:14px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.footer-inner a{ color:var(--text); text-decoration:none }
.footer-inner a:hover{ text-decoration:underline }
code.inline{ background:#0b1326; padding:.14rem .35rem; border-radius:6px; border:1px solid var(--ring) }
form .row{ display:grid; grid-template-columns:1fr; gap:12px }
@media (min-width: 760px){ form .row{ grid-template-columns:1fr 1fr } }
label{ display:block; font-weight:600; margin-bottom:6px }
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--ring);
  background:#0a1022; color:var(--text);
}
textarea{ min-height:150px; resize:vertical }
input:focus, textarea:focus{ outline:2px solid var(--primary-2); border-color:var(--primary-2) }
.notice{ font-size:14px; color:var(--muted) }

/* --- Mobile Responsiveness Patch (non-destructive) --- */

/* Make header logo responsive even if inline width is set */
header .brand img{
  max-width: min(60vw, 260px) !important;
  width: auto !important;
  height: auto !important;
}

/* Allow the header row to wrap and center nav on small screens */
.nav{ flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 680px){
  nav[aria-label="Primary"]{
    width:100%;
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap: wrap;
  }
  nav a{ padding:8px 10px; font-size:14px; }
}

/* Prevent images from causing horizontal scrollbars */
img, svg, video{ max-width:100%; height:auto; }

/* Keep badge icons added on Services page neat and responsive */
.badges img{
  width: clamp(80px, 26vw, 140px) !important;
  height: auto !important;
  display:inline-block;
  vertical-align: middle;
}
/* Neutralize negative margins from inline styles so content doesn't overlap */
.badges div[style*="margin-bottom"]{ margin-bottom: 0 !important; }
.badges div[style*="margin-top"]{ margin-top: 12px !important; }

/* Slightly tighter cards on very small screens */
@media (max-width: 480px){
  .card{ padding:16px; }
  .hero{ padding: 40px 0; }
}

/* Footer stacks nicely on phones */
@media (max-width: 680px){
  .footer-inner{ flex-direction:column; text-align:center; }
}

/* Improve text wrapping so long strings (emails, URLs) don't overflow */
.container{ overflow-wrap:anywhere; word-break:break-word; }

/* iOS Safari: avoid input zoom-on-focus */
input, textarea{ font-size:16px; }
/* Center the logo on small screens */
@media (max-width: 680px){
  /* let the header wrap on mobile */
  header .nav{
    display:flex;
    flex-wrap:wrap;
    row-gap:8px;
  }

  /* make the brand row full-width and center its contents */
  header .brand{
    flex: 1 0 100%;
    display:flex;            /* in case it's not already */
    justify-content:center;  /* centers the logo */
    text-align:center;
  }

  /* center the actual <img> even if it has inline widths/floats */
  header .brand img{
    display:block;
    margin:0 auto;                  /* centers the image */
    float:none !important;          /* neutralize floats */
    height:auto;
    max-width: min(60vw, 240px);    /* keep it nicely sized on phones */
    width:auto !important;          /* ignore any inline width */
  }

  /* optional: center the nav row beneath the logo on mobile */
  header nav{
    flex: 1 0 100%;
    display:flex;
    justify-content:center;
    gap:10px;
  }
}