:root{
  --font-heading: 'Josefin Sans', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bg: #0b0b12;
  --bg-2: #12121b;
  --text: #f2f5f8;
  --muted: #b8c0cc;
  /* Accent palette aligned with the logo */
  /* Logo-aligned palette (soft periwinkle → lavender → pink-lavender) */
  --purple:   #9aa5ff;      /* periwinkle / bluish lavender */
  --lavender: #c7b9ff;      /* light lavender (body of the logo) */
  --pink:     #e6c6ff;      /* pink-leaning lavender */
  --accent-start: var(--purple);
  --accent-mid:   var(--lavender);
  --accent-end:   var(--pink);
  /* Neon glow fallback colors */
  --glow-1: rgba(199,185,255,.45);  /* lavender glow */
  --glow-2: rgba(154,165,255,.35);  /* periwinkle glow */
  --focus: #ff8bd1;
  --maxw: 1280px;
  --radius: 16px;
  --shadow-lg: 0 20px 50px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px rgba(0,0,0,.35);
}

/* Reset-ish */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family: var(--font-body);
  background: var(--bg);
  color:var(--text);
  line-height:1.6;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

/* Layout helpers */
.container{ max-width: var(--maxw); margin-inline:auto; padding: clamp(16px, 2vw, 24px); }
.center{ text-align:center; }
.stack{ display:grid; gap: clamp(14px, 2vw, 18px); }
.section{ padding: clamp(48px, 7vw, 96px) 0; }

/* Neon gradient utilities */
.neon-text, .h2{
  background: linear-gradient(90deg, var(--accent-start) 0%, var(--accent-mid) 45%, var(--accent-end) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 10px rgba(154,165,255,.28), 0 0 14px rgba(199,185,255,.28), 0 0 18px rgba(230,198,255,.24);
}

.btn{
  --padx: clamp(18px, 3vw, 28px);
  --pady: clamp(10px, 1.8vw, 14px);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding: var(--pady) var(--padx);
  font-weight: 700; letter-spacing: .3px; border: 0; border-radius: 999px; cursor:pointer;
  background: linear-gradient(135deg, var(--accent-start), var(--accent-end));
  color: #0b0b12; /* dark text for light gradient */
  box-shadow: 0 10px 30px rgba(154,165,255,.28), 0 6px 18px rgba(199,185,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.03); background: linear-gradient(135deg, var(--accent-end), var(--accent-start)); box-shadow: 0 16px 40px rgba(154,165,255,.36), 0 8px 24px rgba(199,185,255,.32); }
.btn:active{ transform: translateY(0); }

/* Typography */
h1, h2, h3, h4, h5, h6{ font-family: var(--font-heading); }
h1{
  font-size: clamp(40px, 8vw, 80px);
  line-height: .95; margin: 0 0 .6rem 0; font-weight: 900; letter-spacing: .3px;
}
.subtitle{ font-size: clamp(16px, 2.2vw, 21px); color: var(--muted); margin: 0 0 1.2rem 0; }
.eyebrow{ color: var(--muted); text-transform: uppercase; font-size: .8rem; letter-spacing: .18em; }
.h2{ font-size: clamp(28px, 4.5vw, 44px); line-height:1.1; margin:.2rem 0 1rem; font-weight:800; }
.lead{ font-size: clamp(18px, 2.2vw, 20px); color: var(--muted); }

/* Generic card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: clamp(18px, 2.5vw, 26px);
}

/* Steps component */
.steps{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 12px; }
.step{ position:relative; padding:20px; border-radius: 14px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); overflow:hidden; isolation:isolate; }
.step b{ display:block; font-size:1.1rem; margin-bottom:.35rem; position:relative; z-index:1; }
.step .step-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.24; filter:saturate(1.1) contrast(1.05); z-index:0; pointer-events:none; }
.step::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)); z-index:0; }
.step b, .step p{ position:relative; z-index:1; }

/* Footer */
footer{
  padding: 28px 0 48px; color: var(--muted); border-top: 1px solid rgba(255,255,255,.08);
  background: transparent;
}
.footer-inner{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; }

/* Appear animations */
@keyframes floatIn {
  from { opacity:0; transform: translateY(16px) scale(.98); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.reveal{ opacity:0; transform: translateY(16px); }
.reveal.in{ animation: floatIn .8s cubic-bezier(.2,.8,.2,1) forwards; }
.delay-1{ animation-delay: .08s; } .delay-2{ animation-delay: .16s; } .delay-3{ animation-delay: .24s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .gallery img{ transition: none; }
  .reveal{ opacity:1; transform:none; animation:none; }
}