/* Base + Theme */
:root{
  --bg: #0f0a1f;                  /* deep violet/indigo */
  --bg-2: #140f2b;
  --text: #f7f6fb;
  --muted: #cfc7e8;
  --primary: #7c3aed;             /* purple 600 */
  --primary-2: #a78bfa;           /* purple 300 */
  --accent: #22d3ee;              /* cyan accent */
  --accent-2: #f472b6;            /* pink accent */
  --card: #1b1536;
  --tint: rgba(124, 58, 237, 0.12);
  --ok: #10b981;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,.25), transparent 60%),
              radial-gradient(900px 500px at -10% 20%, rgba(244,114,182,.18), transparent 55%),
              linear-gradient(180deg, var(--bg), var(--bg-2));
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: Lexend, Inter, system-ui, sans-serif; line-height: 1.15; margin: 0 0 .6rem }
h1 { font-size: clamp(2.2rem, 4vw + .5rem, 4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.2rem) }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; }
.lead { font-size: clamp(1.05rem, .7vw + .9rem, 1.25rem); color: var(--muted); }

a { color: var(--primary-2); text-decoration-color: color-mix(in oklab, var(--primary) 70%, white 30%); }
a:hover { text-decoration-thickness: .14rem; }

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

/* Accessibility helpers */
.visually-hidden{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }
.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:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem; }

/* Header */
.site-header{
  position:sticky; top:0; z-index: 30;
  backdrop-filter: saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(15,10,31,.8), rgba(20,15,43,.3));
  border-bottom: 1px solid rgba(167,139,250,.18);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
}
.brand{
  display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none;
}
.brand-mark{
  display:inline-grid; place-items:center;
  width:2.2rem; height:2.2rem; border-radius:.6rem;
  background: conic-gradient(from 210deg, var(--primary), var(--accent), var(--accent-2), var(--primary));
  box-shadow: var(--shadow);
  font-weight:800;
}
.brand-text{ font-weight:700; letter-spacing:.2px; }
.brand-text strong{ color: var(--primary-2); }

.primary-nav{ display:flex; gap:1rem; align-items:center; }
.primary-nav a{ color:var(--text); opacity:.9; text-decoration:none; padding:.55rem .8rem; border-radius:.6rem; }
.primary-nav a:hover{ background:rgba(124,58,237,.18); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.1rem; border-radius:.9rem;
  text-decoration:none; font-weight:700; letter-spacing:.2px;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  will-change: transform;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn--primary{
  background: linear-gradient(135deg, var(--primary), color-mix(in oklab, var(--primary) 70%, var(--accent-2) 30%));
  color:white; box-shadow: var(--shadow);
}
.btn--primary:hover{ filter: brightness(1.06); }
.btn--alt{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: var(--text);
}
.btn--alt:hover{ background: rgba(255,255,255,.12); }
.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.16);
}

/* Hero */
.hero{ position:relative; padding: clamp(3rem, 7vw, 6rem) 0; overflow: clip; }
.hero__grid{
  display:grid; gap: clamp(2rem, 3vw, 3rem);
  grid-template-columns: 1.2fr .9fr;
}
.hero__text .underline{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  border-bottom: .25rem solid color-mix(in oklab, var(--primary) 70%, white 30%);
}
.cta-row{ display:flex; gap:.8rem; margin:1.1rem 0 1.2rem; flex-wrap: wrap; }
.trust-bullets{ display:flex; gap:1rem; padding:0; margin:1rem 0 0; list-style:none; color:var(--muted); flex-wrap: wrap;}
.trust-bullets li{ background: rgba(255,255,255,.06); padding:.4rem .7rem; border-radius:999px; border:1px solid rgba(255,255,255,.1); }

.hero__card{
  display:grid; gap:1rem; align-content:start;
}
.stat-card{
  background: linear-gradient(180deg, rgba(167,139,250,.15), rgba(34,211,238,.08));
  border: 1px solid rgba(167,139,250,.25);
  border-radius: 1rem; padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.stat-number{ font-family: Lexend, Inter, sans-serif; font-weight:800; font-size: 2rem; }
.stat-label{ color: var(--muted); }
.spark{ filter: drop-shadow(0 6px 12px rgba(255,255,255,.3)); }

.hero__bg{
  position:absolute; inset: -40vmax -30vmax -20vmax -30vmax; z-index:-1;
  background:
    radial-gradient(40vmax 40vmax at 80% 10%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(35vmax 30vmax at 10% 20%, rgba(34,211,238,.18), transparent 60%),
    radial-gradient(35vmax 35vmax at 40% 70%, rgba(244,114,182,.2), transparent 60%);
  filter: blur(20px) saturate(120%);
}

/* Sections */
.section{ padding: clamp(2.5rem, 6vw, 4rem) 0; }
.section--tinted{ background: linear-gradient(180deg, rgba(167,139,250,.06), transparent); border-top:1px solid rgba(167,139,250,.15); border-bottom:1px solid rgba(167,139,250,.15); }
.split{ display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:start; }

.pill-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.pill-list li{ padding:.55rem .8rem; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius: 999px; }

.cards{ display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr); }
.card{
  background: var(--card); padding:1.1rem 1.1rem 1.2rem; border-radius:1rem;
  border:1px solid rgba(167,139,250,.22);
  box-shadow: var(--shadow);
}
.tick{ padding-left:1.1rem; margin:.6rem 0 0; }
.tick li{ margin:.35rem 0; }

/* Portfolio */
.logo-pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 0; }
.logo-pill{
  border-radius: 999px;
  padding:.6rem .9rem;
  background: radial-gradient(120% 150% at 20% 30%, rgba(124,58,237,.5), rgba(34,211,238,.24));
  border:1px solid rgba(167,139,250,.35);
  box-shadow: var(--shadow);
  font-weight:700; letter-spacing:.2px;
}
.muted{ color: var(--muted); }

/* CTA */
.section--cta{
  background:
    linear-gradient(180deg, rgba(124,58,237,.18), rgba(124,58,237,.08)),
    linear-gradient(180deg, rgba(20,15,43,.5), rgba(20,15,43,.3));
  border-top:1px solid rgba(167,139,250,.25);
}
.cta{
  display:grid; gap:1.2rem; grid-template-columns: 1fr 1fr; align-items:start;
}
.contact-form{
  display:grid; gap:.7rem; align-content:start;
}
input, textarea{
  width:100%; border:1px solid rgba(167,139,250,.35);
  background: rgba(12,10,24,.6);
  color: var(--text);
  padding:.8rem .9rem; border-radius:.7rem;
}
input::placeholder, textarea::placeholder{ color: #bfb6db; }

/* Footer */
.site-footer{ border-top:1px solid rgba(167,139,250,.18); padding: 1.2rem 0; background: rgba(0,0,0,.2); }
.footer-grid{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-nav a{ color: var(--muted); text-decoration:none; margin-left:.6rem; }
.footer-nav a:hover{ color: var(--text); }

/* Responsiveness */
@media (max-width: 950px){
  .hero__grid{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .cta{ grid-template-columns: 1fr; }
  .primary-nav{ gap:.4rem; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}