:root {
  --ink: #24143d;
  --ink-soft: #5b4b71;
  --plum: #3b126c;
  --violet: #6f25a8;
  --magenta: #d93e98;
  --rose: #ffedf7;
  --cream: #fff8f3;
  --white: #ffffff;
  --silver: #eeeaf4;
  --shadow: 0 24px 70px rgba(36, 20, 61, 0.16);
  --radius: 28px;
  --max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #fff 0%, #fff8fc 42%, #fff 100%);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.section-pad { padding: 92px 0; }
.section-pad.compact { padding: 34px 0; }
.skip-link { position: absolute; left: -999px; top: 10px; background: var(--ink); color: white; padding: 8px 12px; z-index: 50; }
.skip-link:focus { left: 10px; }
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(111, 37, 168, 0.1);
}
.nav-wrap { display: flex; align-items: center; gap: 24px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; }
.brand img { width: 46px; height: 46px; object-fit: contain; }
.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 0.95rem; color: var(--ink-soft); }
.nav a:hover { color: var(--plum); }
.nav-call { background: var(--ink); color: white; padding: 11px 16px; border-radius: 999px; font-weight: 700; box-shadow: 0 12px 25px rgba(36,20,61,.16); }
.menu-toggle { display: none; border: 0; background: var(--rose); border-radius: 12px; font-size: 1.5rem; padding: 8px 12px; }
.hero { position: relative; overflow: hidden; background: radial-gradient(circle at 15% 10%, rgba(217,62,152,.18), transparent 35%), radial-gradient(circle at 90% 25%, rgba(111,37,168,.14), transparent 40%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 54px; }
.eyebrow { color: var(--magenta); font-weight: 850; text-transform: uppercase; letter-spacing: .11em; font-size: .8rem; margin: 0 0 12px; }
h1, h2, h3 { line-height: 1.08; margin: 0; }
h1 { font-size: clamp(2.55rem, 6vw, 5.7rem); letter-spacing: -.07em; max-width: 780px; }
h2 { font-size: clamp(2rem, 4vw, 3.75rem); letter-spacing: -.05em; }
h3 { font-size: 1.35rem; letter-spacing: -.03em; }
.lead { font-size: clamp(1.08rem, 2vw, 1.32rem); color: var(--ink-soft); max-width: 650px; margin: 22px 0 0; }
.hero-actions, .payment-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 20px; border-radius: 999px; font-weight: 850; border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { color: white; background: linear-gradient(135deg, var(--plum), var(--magenta)); box-shadow: 0 16px 36px rgba(217, 62, 152, .25); }
.btn-secondary { color: var(--plum); background: white; border-color: rgba(111,37,168,.18); box-shadow: 0 12px 28px rgba(36,20,61,.08); }
.trust-strip { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.trust-strip span { padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.76); color: var(--ink-soft); border: 1px solid rgba(111,37,168,.11); font-weight: 700; }
.hero-card { position: relative; background: rgba(255,255,255,.68); border: 1px solid rgba(111,37,168,.13); border-radius: 36px; padding: 24px; box-shadow: var(--shadow); }
.hero-logo { width: min(430px, 90%); margin: -28px auto 10px; filter: drop-shadow(0 18px 28px rgba(36,20,61,.18)); }
.photo-frame { overflow: hidden; border-radius: 28px; min-height: 330px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.photo-frame img, .career-photo img { width: 100%; height: 100%; object-fit: cover; }
.intro-band { background: var(--ink); color: white; }
.three-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mini-card { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; padding: 22px; display: grid; gap: 8px; }
.mini-card strong { font-size: 1.08rem; }
.mini-card span { color: rgba(255,255,255,.75); }
.split-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.align-start { align-items: start; }
.section-heading p:not(.eyebrow) { color: var(--ink-soft); font-size: 1.08rem; max-width: 700px; }
.center { text-align: center; margin: 0 auto 42px; }
.center p { margin-left: auto; margin-right: auto; }
.about-panel, .payment-card, .form-card, .qr-card { background: white; border: 1px solid rgba(111,37,168,.12); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.check-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
.check-list li { position: relative; padding-left: 30px; color: var(--ink-soft); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--plum), var(--magenta)); font-size: .78rem; font-weight: 900; }
.services-section { background: linear-gradient(180deg, var(--cream), white); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { background: white; border: 1px solid rgba(111,37,168,.11); border-radius: 26px; padding: 26px; box-shadow: 0 15px 38px rgba(36,20,61,.07); min-height: 230px; }
.service-card .icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 18px; background: var(--rose); font-size: 1.65rem; margin-bottom: 20px; }
.service-card p, .step p, .payment-card p { color: var(--ink-soft); }
.how-section { background: radial-gradient(circle at 50% 30%, rgba(217,62,152,.10), transparent 35%); }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.step { background: rgba(255,255,255,.82); border: 1px solid rgba(111,37,168,.11); border-radius: 24px; padding: 24px; box-shadow: 0 14px 34px rgba(36,20,61,.07); }
.step span { display: inline-flex; color: var(--magenta); font-weight: 900; margin-bottom: 14px; }
.payment-section { background: var(--ink); color: white; }
.payment-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.payment-section .section-heading p:not(.eyebrow), .payment-section .fine-print, .payment-section .check-list li { color: rgba(255,255,255,.76); }
.payment-card { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }
.fine-print { font-size: .85rem; color: var(--ink-soft); margin-top: 14px; }
.careers-section { background: linear-gradient(180deg, white, #fff6fb); }
.career-photo { margin-top: 24px; border-radius: 28px; overflow: hidden; height: 360px; box-shadow: var(--shadow); }
.form-card { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-card label { display: grid; gap: 7px; color: var(--ink-soft); font-weight: 700; font-size: .92rem; }
.form-card input, .form-card select, .form-card textarea { width: 100%; border: 1px solid rgba(91,75,113,.2); border-radius: 14px; padding: 12px 13px; font: inherit; color: var(--ink); background: #fff; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: 3px solid rgba(217,62,152,.2); border-color: var(--magenta); }
.full { grid-column: 1 / -1; }
fieldset { border: 1px solid rgba(111,37,168,.13); border-radius: 20px; padding: 18px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
legend { padding: 0 8px; font-weight: 900; color: var(--plum); }
fieldset label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 9px; }
input[type="checkbox"] { width: auto; accent-color: var(--magenta); }
.checkbox-line { display: flex !important; align-items: flex-start !important; }
.form-submit { border: 0; width: fit-content; }
.form-note { margin: 0; color: var(--ink-soft); }
.qr-section { background: var(--cream); }
.qr-grid { display: grid; grid-template-columns: 1fr 220px 220px; gap: 22px; align-items: stretch; }
.qr-card { text-align: center; display: grid; justify-items: center; gap: 8px; }
.fake-qr { width: 130px; height: 130px; border-radius: 16px; display: grid; place-items: center; color: var(--plum); font-weight: 900; background: conic-gradient(from 90deg, #fff 0 25%, var(--rose) 0 50%, #fff 0 75%, var(--silver) 0); border: 8px solid white; box-shadow: inset 0 0 0 1px rgba(36,20,61,.12); }
.contact-section { background: white; }
.contact-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 36px; align-items: start; }
.contact-details { display: grid; gap: 10px; margin-top: 22px; }
.contact-details a, .contact-details span { background: var(--rose); border-radius: 16px; padding: 13px 16px; font-weight: 800; color: var(--plum); }
.site-footer { background: #170c29; color: white; padding: 54px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.2fr .9fr .7fr; gap: 36px; }
.site-footer img { width: 260px; margin-bottom: 12px; }
.site-footer a, .site-footer span { display: block; color: rgba(255,255,255,.78); margin: 7px 0; }
.footer-bottom { margin-top: 34px; padding: 18px; text-align: center; color: rgba(255,255,255,.58); border-top: 1px solid rgba(255,255,255,.1); }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .12s; }
.delay-2 { transition-delay: .22s; }
@media (max-width: 980px) {
  .nav, .nav-call { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .nav.open { display: grid; position: absolute; top: 78px; left: 20px; right: 20px; background: white; padding: 18px; border-radius: 22px; box-shadow: var(--shadow); }
  .hero-grid, .split-grid, .payment-grid, .contact-grid { grid-template-columns: 1fr; }
  .three-cards, .service-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .qr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { width: min(100% - 26px, var(--max)); }
  .section-pad { padding: 68px 0; }
  .hero-card { padding: 14px; }
  .steps, .form-grid, fieldset, .footer-grid { grid-template-columns: 1fr; }
  h1 { font-size: 2.65rem; }
  .brand span { display: none; }
  .form-submit { width: 100%; }
}