:root {
  --bg: #f7f3ff;
  --surface: #ffffff;
  --surface-2: #f1e8ff;
  --text: #241f3d;
  --muted: #615a78;
  --line: rgba(75, 49, 129, 0.12);
  --purple-900: #352b56;
  --purple-800: #4a2ca1;
  --purple-700: #6f3fe0;
  --purple-600: #8453ea;
  --purple-500: #a978f5;
  --purple-400: #c9a7ff;
  --shadow: 0 18px 50px rgba(56, 31, 112, 0.14);
  --radius: 24px;
  --radius-sm: 16px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top right, rgba(201,167,255,.35), transparent 28%),
    linear-gradient(180deg, #fcfbff 0%, var(--bg) 100%);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.container { width: min(calc(100% - 2rem), var(--container)); margin-inline: auto; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 82px; gap: 1rem;
}
.brand { display:flex; align-items:center; gap: .85rem; min-width: 0; }
.brand-mark { width: 58px; height: 58px; object-fit: contain; }
.brand-name { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; }
.brand-tag { color: var(--muted); font-size: .85rem; }
.site-nav { display:flex; align-items:center; gap: 1.1rem; }
.site-nav a { color: var(--muted); font-weight: 600; }
.site-nav a:hover { color: var(--text); }
.nav-cta {
  padding: .85rem 1rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
  color:#fff !important;
  box-shadow: var(--shadow);
}
.menu-toggle {
  display:none; background:none; border:none; padding:0; width:44px; height:44px; cursor:pointer;
}
.menu-toggle span { display:block; height:2px; background:var(--text); margin:7px 0; border-radius: 999px; }

.hero { padding: clamp(3rem, 7vw, 6rem) 0 2.5rem; }
.hero-grid {
  display:grid; grid-template-columns: 1.08fr .92fr; gap: 2rem; align-items:center;
}
.eyebrow, .section-kicker {
  display:inline-block; font-size:.82rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em;
  color: var(--purple-700); margin-bottom: 1rem;
}
.section-kicker.light { color: #eadcff; }
.hero h1, .section h2, .cta-band h2 {
  margin:0; line-height:1.02; letter-spacing:-.04em;
}
.hero h1 { font-size: clamp(2.4rem, 5vw, 4.75rem); max-width: 11ch; }
.hero-text {
  color: var(--muted); font-size: 1.08rem; line-height: 1.7; max-width: 62ch; margin: 1.25rem 0 1.6rem;
}
.hero-actions { display:flex; flex-wrap:wrap; gap: .85rem; margin-bottom: 1.4rem; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height: 52px; padding: 0 1.25rem; border-radius: 999px; font-weight: 700;
  border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--purple-800), var(--purple-500)); color:#fff; box-shadow: var(--shadow);
}
.btn-secondary {
  background:#fff; color:var(--text); border-color: var(--line);
}
.btn-light { background:#fff; color: var(--purple-800); }
.quick-points {
  list-style:none; padding:0; margin:0; display:grid; gap:.7rem;
}
.quick-points li {
  position:relative; padding-left: 1.4rem; color: var(--text); font-weight: 600;
}
.quick-points li::before {
  content:""; position:absolute; left:0; top:.55rem; width:.6rem; height:.6rem; border-radius:50%;
  background: linear-gradient(135deg, var(--purple-700), var(--purple-400));
}
.hero-visual { position:relative; min-height: 500px; }
.visual-card {
  background:#fff; border:1px solid var(--line); border-radius: 28px; overflow:hidden; box-shadow: var(--shadow);
}
.large-card { width: 100%; }
.large-card img { aspect-ratio: 3 / 2; object-fit: cover; }
.floating-card {
  position:absolute; width: 58%; right: -1rem; bottom: -2rem;
}
.floating-card img { aspect-ratio: 1.52 / 1; object-fit: cover; }

.trust-bar { padding: 0 0 2rem; }
.trust-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.trust-grid > div {
  background: rgba(255,255,255,.8); border:1px solid var(--line); border-radius: 22px; padding: 1.15rem 1.2rem;
}
.trust-grid strong { display:block; margin-bottom:.35rem; }
.trust-grid span { color:var(--muted); line-height:1.6; }

.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section-tint { background: linear-gradient(180deg, rgba(169,120,245,.09), rgba(169,120,245,.03)); }
.two-column { display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items:center; }
.two-column.reversed { grid-template-columns: .95fr 1.05fr; }
.section h2 { font-size: clamp(2rem, 4vw, 3.3rem); margin-bottom: 1rem; }
.section p { color: var(--muted); line-height: 1.75; }
.content-card, .service-card, .contact-card, .form-shell {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.soft-card { padding: 1.6rem; }
.check-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.85rem; }
.check-list li {
  position:relative; padding-left:1.8rem; color: var(--text); font-weight: 600;
}
.check-list li::before {
  content:"✓"; position:absolute; left:0; top:0; color: var(--purple-700); font-weight: 800;
}
.section-heading { max-width: 60ch; margin-bottom: 2rem; }
.card-grid.three-up { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.service-card { padding: 1.35rem; }
.icon-badge {
  width: 46px; height: 46px; border-radius: 14px; display:grid; place-items:center; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(132,83,234,.18), rgba(201,167,255,.28)); color: var(--purple-800); font-size:1.15rem;
}
.service-card h3 { margin:0 0 .45rem; }
.service-card p { margin:0; }
.image-card { padding: .75rem; overflow:hidden; }
.image-card img { border-radius: 18px; }
.benefit-list { display:grid; gap: 1rem; margin-top: 1.2rem; }
.benefit-list > div {
  background: rgba(255,255,255,.72); border:1px solid var(--line); border-radius: 20px; padding: 1rem 1.1rem;
}
.benefit-list h3 { margin:.1rem 0 .35rem; }
.benefit-list p { margin:0; }

.cta-band {
  background: linear-gradient(135deg, var(--purple-900), var(--purple-700) 55%, var(--purple-500)); color:#fff;
}
.cta-band-inner {
  display:flex; align-items:center; justify-content:space-between; gap: 1.5rem;
}
.cta-band p { color: rgba(255,255,255,.82); max-width: 58ch; }

.contact-grid { display:grid; grid-template-columns: .95fr 1.05fr; gap: 2rem; align-items:start; }
.contact-card { padding:1.3rem; margin-top: 1.4rem; }
.contact-card ol { margin: .8rem 0 0 1.1rem; color: var(--muted); line-height: 1.8; }
.form-shell { padding: .9rem; }
.lead-form { padding: 1rem; }
.lead-form h3 { margin: .2rem 0 .4rem; font-size: 1.7rem; }
.lead-form p { margin-top:0; }
.lead-form label { display:block; margin-top: 1rem; }
.lead-form span { display:block; font-weight:700; margin-bottom: .45rem; }
.lead-form input {
  width:100%; min-height: 56px; border-radius: 16px; border:1px solid rgba(75,49,129,.15);
  padding: 0 1rem; font: inherit; background: #fff;
}
.lead-form input:focus {
  outline: 3px solid rgba(132,83,234,.18); border-color: var(--purple-600);
}
.form-submit { width:100%; margin-top: 1.15rem; }
.form-note { font-size: .9rem; color: var(--muted); margin-top: .9rem !important; }

.site-footer { border-top: 1px solid var(--line); padding: 1.25rem 0 2rem; }
.footer-inner { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.footer-inner p { margin:.35rem 0 0; color:var(--muted); }
.footer-meta { color:var(--muted); font-weight:600; }

@media (max-width: 980px) {
  .hero-grid, .two-column, .contact-grid, .two-column.reversed, .cta-band-inner, .trust-grid, .card-grid.three-up {
    grid-template-columns: 1fr;
  }
  .hero-visual { min-height: auto; }
  .floating-card { position: static; width: 100%; margin-top: 1rem; }
}

@media (max-width: 820px) {
  .menu-toggle { display:block; }
  .site-nav {
    position:absolute; top:82px; left:0; right:0; background: rgba(255,255,255,.98); border-bottom:1px solid var(--line);
    flex-direction:column; align-items:flex-start; padding: 1rem; display:none;
  }
  .site-nav.open { display:flex; }
  .brand-name { font-size: 1rem; }
  .brand-tag { font-size: .78rem; }
}

@media (max-width: 620px) {
  .container { width: min(calc(100% - 1.2rem), var(--container)); }
  .header-inner { min-height: 74px; }
  .site-nav { top:74px; }
  .brand-mark { width: 48px; height: 48px; }
  .hero { padding-top: 2rem; }
  .hero h1 { max-width: 12ch; }
  .btn { width: 100%; }
  .hero-actions { display:grid; grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items:flex-start; }
}