/* Vision AI Solutions — shared styles */
:root{
  --bg:#0c0a18; --bg-soft:#110e21; --surface:#17132c; --surface-2:#1d1838;
  --border:#2a2450; --violet:#6f5cf0; --violet-bright:#8b7bff; --lavender:#b7aaff;
  --text:#f3f1fb; --text-dim:#a39cc4; --text-faint:#6f6890;
  --success:#5fd9a3; --radius:16px; --maxw:1120px;
}

/* RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { max-width:100%; overflow-x:hidden; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(700px circle at 85% -5%,rgba(111,92,240,0.22),transparent 60%),
    radial-gradient(600px circle at -10% 30%,rgba(139,123,255,0.12),transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,h4 {
  font-family:'Outfit','Inter',sans-serif;
  font-weight:600; letter-spacing:-0.02em; line-height:1.15; color:var(--text);
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; height:auto; }

/* LAYOUT */
.wrap {
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 20px;
}

/* BACKGROUND */
body {
  background-image:
    radial-gradient(700px circle at 85% -5%,rgba(111,92,240,0.22),transparent 60%),
    radial-gradient(600px circle at -10% 30%,rgba(139,123,255,0.12),transparent 60%);
  background-attachment:fixed;
}

/* NAV */
.site-nav {
  position:sticky; top:0; z-index:50;
  background:rgba(12,10,24,0.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-nav .wrap {
  display:flex; align-items:center; justify-content:space-between; height:74px;
}
.brand {
  display:flex; align-items:center; gap:10px;
  font-family:'Outfit',sans-serif; font-weight:700; font-size:18px;
  flex-shrink:0;
}
.nav-links {
  display:flex; align-items:center; gap:28px;
}
.nav-links a { font-size:14.5px; color:var(--text-dim); transition:color .15s; }
.nav-links a:hover { color:var(--text); }
.nav-cta {
  background:var(--violet); color:#fff !important;
  padding:10px 20px; border-radius:999px;
  font-weight:600; font-size:14px;
  transition:background .15s,transform .15s;
  display:inline-block; white-space:nowrap;
}
.nav-cta:hover { background:var(--violet-bright); transform:translateY(-1px); }
.nav-toggle { display:none; }

@media(max-width:760px){
  .nav-links {
    position:fixed; top:74px; left:0; right:0;
    background:var(--bg-soft);
    border-bottom:1px solid var(--border);
    flex-direction:column; align-items:flex-start;
    padding:20px 20px 28px; gap:18px;
    opacity:0; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s,transform .18s;
  }
  .nav-links.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-toggle {
    display:flex; flex-direction:column; gap:5px;
    background:none; border:none; cursor:pointer; padding:6px;
    flex-shrink:0;
  }
  .nav-toggle span { width:22px; height:2px; background:var(--text); display:block; }
}

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:999px;
  font-weight:600; font-size:15px; cursor:pointer; border:none;
  transition:transform .15s,background .15s,box-shadow .15s;
  text-align:center; white-space:nowrap;
}
.btn-primary {
  background:var(--violet); color:#fff;
  box-shadow:0 8px 24px -8px rgba(111,92,240,0.6);
}
.btn-primary:hover { background:var(--violet-bright); transform:translateY(-2px); }
.btn-ghost {
  background:transparent; color:var(--text);
  border:1px solid var(--border);
}
.btn-ghost:hover { border-color:var(--violet-bright); color:var(--lavender); }
.btn-block { width:100%; }

/* SECTIONS */
section { padding:80px 0; position:relative; }
.eyebrow {
  text-transform:uppercase; letter-spacing:0.14em;
  font-size:12px; font-weight:700; color:var(--violet-bright); margin-bottom:14px;
}
.section-head { max-width:640px; margin-bottom:48px; }
.section-head h2 { font-size:clamp(26px,3.6vw,40px); margin-bottom:12px; }
.section-head p { color:var(--text-dim); font-size:16px; }

/* CARDS */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}

/* GRIDS — mobile first, all single column */
.grid-2, .grid-3, .grid-4, .grid-2-1 {
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media(min-width:600px){
  .grid-2 { grid-template-columns:1fr 1fr; }
  .grid-4 { grid-template-columns:1fr 1fr; }
  .grid-3 { grid-template-columns:1fr 1fr; }
}
@media(min-width:900px){
  .grid-2   { grid-template-columns:1fr 1fr; }
  .grid-3   { grid-template-columns:repeat(3,1fr); }
  .grid-4   { grid-template-columns:repeat(4,1fr); }
  .grid-2-1 { grid-template-columns:1.1fr 0.9fr; gap:48px; align-items:center; }
}

/* HERO */
.hero-section { padding:56px 0 48px; }
@media(min-width:640px){ .hero-section { padding:90px 0 70px; } }

/* FORMS */
.field { margin-bottom:20px; }
.field label { display:block; font-size:13.5px; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
.field input, .field select, .field textarea {
  width:100%; background:var(--surface-2); border:1px solid var(--border);
  border-radius:10px; padding:13px 15px; color:var(--text);
  font-family:inherit; font-size:15px; transition:border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--violet-bright);
}
.field textarea { resize:vertical; min-height:110px; }
.field-row { display:grid; grid-template-columns:1fr; gap:0; }
@media(min-width:540px){ .field-row { grid-template-columns:1fr 1fr; gap:18px; } }
.form-card { padding:clamp(20px,5vw,36px); }
.form-success {
  display:none; background:rgba(95,217,163,0.1);
  border:1px solid rgba(95,217,163,0.35); color:var(--success);
  padding:16px 18px; border-radius:10px; font-size:14.5px; margin-top:18px;
}

/* PAGE HERO */
.page-hero { padding:56px 0 40px; text-align:center; }
.page-hero h1 { font-size:clamp(28px,4.5vw,48px); margin-bottom:14px; }
.page-hero p { color:var(--text-dim); font-size:16px; max-width:540px; margin:0 auto; }

/* FOOTER */
.site-footer {
  border-top:1px solid rgba(255,255,255,0.06);
  padding:48px 0 36px; color:var(--text-faint); font-size:14px;
}
.footer-inner {
  display:flex; flex-direction:column;
  align-items:flex-start; gap:14px;
}
.footer-links { display:flex; flex-wrap:wrap; gap:20px; }
.footer-links a:hover { color:var(--text-dim); }
@media(min-width:640px){
  .footer-inner { flex-direction:row; justify-content:space-between; align-items:center; }
}

/* UTILITY */
.center { text-align:center; }
.muted  { color:var(--text-dim); }
