/* ============ THEME TOKENS ============ */
:root {
    --bg: #F4EEE7;
    --bg-soft: #E8DCD0;
    --surface: #FFFCF7;
    --surface-2: #F8F2EA;

    --ink: #30232C;
    --ink-2: #74616A;
    --ink-3: #A49498;

    --line: rgba(48, 35, 44, .13);
    --line-2: rgba(48, 35, 44, .06);

    --indigo: #A34F68;
    --indigo-t: rgba(163, 79, 104, .11);

    --mint: #557C55;
    --mint-t: rgba(85, 124, 85, .12);

    --rose: #D46F54;
    --rose-t: rgba(212, 111, 84, .11);

    --amber: #C18A35;
    --amber-t: rgba(193, 138, 53, .13);

    --violet: #80628D;
    --violet-t: rgba(128, 98, 141, .11);

    --sky: #478C89;
    --sky-t: rgba(71, 140, 137, .11);

    --shadow-s: 0 2px 8px rgba(48, 35, 44, .05);
    --shadow-m: 0 12px 34px rgba(48, 35, 44, .09);
    --shadow-l: 0 26px 70px rgba(48, 35, 44, .13);

    --rad: 26px;
    --rad-s: 16px;
    --rad-p: 999px;
}

html[data-theme="dark"] {
    --bg: #19151C;
    --bg-soft: #28202B;
    --surface: #302632;
    --surface-2: #3A2E3B;

    --ink: #F8F0E9;
    --ink-2: #C9B8BC;
    --ink-3: #A08D98;

    --line: rgba(248, 240, 233, .13);
    --line-2: rgba(248, 240, 233, .06);

    --indigo: #E18BA4;
    --indigo-t: rgba(225, 139, 164, .16);

    --mint: #A3C58C;
    --mint-t: rgba(163, 197, 140, .14);

    --rose: #F09579;
    --rose-t: rgba(240, 149, 121, .14);

    --amber: #E9BD70;
    --amber-t: rgba(233, 189, 112, .14);

    --violet: #C5A1D2;
    --violet-t: rgba(197, 161, 210, .14);

    --sky: #83C6BC;
    --sky-t: rgba(131, 198, 188, .14);

    --shadow-s: 0 2px 10px rgba(0, 0, 0, .28);
    --shadow-m: 0 14px 38px rgba(0, 0, 0, .40);
    --shadow-l: 0 28px 70px rgba(0, 0, 0, .55);
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { scroll-behavior: smooth }
body {
    font-family: 'Manrope', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
    transition: background .45s ease, color .45s ease;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1; }

h1, h2, h3, h4, h5 { font-weight: 800; letter-spacing: -.03em; line-height: 1.12 }
a { color: inherit }
::selection { background: var(--indigo); color: #fff }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto }

/* ============ PRELOADER ============ */
#pre {
    position: fixed; inset: 0; background: var(--bg); z-index: 9999;
    display: grid; place-items: center; transition: opacity .6s, visibility .6s
}
#pre.gone { opacity: 0; visibility: hidden }
.pl-ring {
    width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--line);
    border-top-color: var(--indigo); animation: spin .8s linear infinite
}
@keyframes spin { to { transform: rotate(360deg) } }
.pl-txt {
    margin-top: 16px; font-size: 12px; letter-spacing: .28em;
    text-transform: uppercase; color: var(--ink-3); text-align: center
}

/* ============ PROGRESS ============ */
#bar {
    position: fixed; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--indigo), var(--mint), var(--rose));
    z-index: 998; transition: width .12s
}

/* ============ NAV ============ */
#nav {
    position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 990;
    width: min(1120px, calc(100% - 28px));
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: var(--rad-p);
    padding: 9px 10px 9px 20px; display: flex; align-items: center; justify-content: space-between;
    gap: 14px; transition: .4s; box-shadow: var(--shadow-s)
}
#nav.pin { box-shadow: var(--shadow-m); top: 8px }
.brand {
    display: flex; align-items: center; gap: 9px; text-decoration: none;
    font-weight: 800; font-size: 19px; letter-spacing: -.03em
}
.brand .bdot {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--indigo), var(--rose));
    display: grid; place-items: center; font-size: 12px; color: #fff
}
.nlinks { display: flex; gap: 2px }
.nlinks a {
    text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    padding: 8px 13px; border-radius: var(--rad-p); transition: .22s
}
.nlinks a:hover, .nlinks a.on { color: var(--indigo); background: var(--indigo-t) }
.nav-right { display: flex; align-items: center; gap: 8px }
.tgl {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink); cursor: pointer;
    display: grid; place-items: center; font-size: 15px; transition: .3s
}
.tgl:hover { background: var(--indigo-t); border-color: var(--indigo); transform: rotate(20deg) }
.ncta {
    text-decoration: none; background: var(--ink); color: var(--bg); font-size: 13.5px;
    font-weight: 700; padding: 10px 20px; border-radius: var(--rad-p);
    transition: .28s; white-space: nowrap
}
.ncta:hover {
    background: var(--indigo); color: #fff; transform: translateY(-1px);
    box-shadow: 0 8px 22px var(--indigo-t)
}
.burg {
    display: none; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface-2);
    color: var(--ink); cursor: pointer; font-size: 16px
}
.mobm {
    display: none; position: fixed; top: 74px; left: 14px; right: 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
    z-index: 989; padding: 10px; box-shadow: var(--shadow-l)
}
.mobm.open { display: block }
.mobm a {
    display: block; padding: 13px 16px; text-decoration: none; font-weight: 700;
    border-radius: 14px; color: var(--ink)
}
.mobm a:hover { background: var(--indigo-t); color: var(--indigo) }
@media(max-width:940px) {
    .nlinks, .ncta { display: none }
    .burg { display: grid; place-items: center }
}

/* ============ REVEAL ANIMATION SYSTEM ============ */
.rv {
    opacity: 0; transform: translateY(26px); filter: blur(6px);
    transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s
}
.rv.in { opacity: 1; transform: none; filter: blur(0) }
.rv[data-d="1"] { transition-delay: .08s }
.rv[data-d="2"] { transition-delay: .16s }
.rv[data-d="3"] { transition-delay: .24s }
.rv[data-d="4"] { transition-delay: .32s }
.rv[data-d="5"] { transition-delay: .4s }

/* ============ HERO ============ */
#hero { padding: 150px 0 90px; position: relative; overflow: hidden }
.orb {
    position: absolute; border-radius: 50%; filter: blur(90px);
    opacity: .5; pointer-events: none; z-index: 0
}
.orb.a {
    width: 460px; height: 460px; background: var(--indigo-t);
    top: -120px; left: -120px; animation: drift 16s ease-in-out infinite alternate
}
.orb.b {
    width: 400px; height: 400px; background: var(--rose-t);
    bottom: -140px; right: -90px; animation: drift 20s ease-in-out infinite alternate-reverse
}
@keyframes drift { to { transform: translate(50px, -40px) scale(1.12) } }
.hero-g {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
    align-items: center; position: relative; z-index: 2
}
.chip {
    display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--rad-p); padding: 7px 15px;
    font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    box-shadow: var(--shadow-s); margin-bottom: 22px
}
.chip i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
    animation: pulse 1.8s ease-in-out infinite
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1) }
    50% { opacity: .35; transform: scale(1.5) }
}
.hero-h1 { font-size: clamp(42px, 4.6vw, 58px); letter-spacing: -.045em; margin-bottom: 18px }
.hero-h1 span {
    background: linear-gradient(115deg, var(--indigo), var(--rose) 55%, var(--amber));
    -webkit-background-clip: text; background-clip: text; color: transparent
}
.hero-p { font-size: 17px; color: var(--ink-2); max-width: 470px; margin-bottom: 26px }
.finder { position: relative; max-width: 480px; margin-bottom: 14px }
.finder-box {
    display: flex; align-items: center; gap: 10px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--rad-p); padding: 6px 6px 6px 18px;
    box-shadow: var(--shadow-m); transition: .3s
}
.finder-box:focus-within {
    border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-t), var(--shadow-m)
}
.finder-box i.bi { color: var(--ink-3); font-size: 16px }
.finder-box input {
    flex: 1; border: 0; background: transparent; outline: 0; font-family: inherit;
    font-size: 14.5px; color: var(--ink); padding: 11px 0; font-weight: 500
}
.finder-box input::placeholder { color: var(--ink-3) }
.finder-btn {
    border: 0; background: var(--indigo); color: #fff; border-radius: var(--rad-p);
    padding: 11px 20px; font-family: inherit; font-weight: 700; font-size: 13.5px;
    cursor: pointer; transition: .25s; white-space: nowrap
}
.finder-btn:hover { background: var(--ink); transform: translateY(-1px) }
.sug {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
    box-shadow: var(--shadow-l); padding: 8px; max-height: 290px;
    overflow: auto; z-index: 40; display: none
}
.sug.show { display: block; animation: sugIn .28s ease }
@keyframes sugIn { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }
.sug button {
    width: 100%; display: flex; align-items: center; gap: 11px; background: transparent;
    border: 0; text-align: left; padding: 11px 13px; border-radius: 14px;
    cursor: pointer; color: var(--ink); font-family: inherit; transition: .18s
}
.sug button:hover { background: var(--indigo-t) }
.sug button .se { font-size: 18px }
.sug button .sn { font-weight: 700; font-size: 13.5px }
.sug button .sc { font-size: 11px; color: var(--ink-3); margin-left: auto; font-weight: 600 }
.sug .empty { padding: 18px; text-align: center; color: var(--ink-3); font-size: 13px }
.hero-hint { font-size: 12.5px; color: var(--ink-3); margin-bottom: 26px }
.hero-quick { display: flex; flex-wrap: wrap; gap: 8px }
.qk {
    border: 1px solid var(--line); background: var(--surface); border-radius: var(--rad-p);
    padding: 8px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-2);
    cursor: pointer; font-family: inherit; transition: .25s
}
.qk:hover {
    color: var(--indigo); border-color: var(--indigo); background: var(--indigo-t);
    transform: translateY(-2px)
}
.scene { position: relative; display: grid; place-items: center }
.scene svg { width: 100%; max-width: 440px; height: auto; overflow: visible }
.bar-g rect { transform-origin: bottom; animation: grow 1.5s cubic-bezier(.2, .8, .2, 1) both }
@keyframes grow { from { transform: scaleY(0) } to { transform: scaleY(1) } }
.spark { animation: twk 2.6s ease-in-out infinite }
@keyframes twk {
    0%, 100% { opacity: .25; transform: scale(.85) }
    50% { opacity: 1; transform: scale(1.15) }
}
.dash { stroke-dasharray: 6 8; animation: dashm 12s linear infinite }
@keyframes dashm { to { stroke-dashoffset: -140 } }
.ring-r { transform-origin: center; animation: slowspin 26s linear infinite }
@keyframes slowspin { to { transform: rotate(360deg) } }
.fl {
    position: absolute; background: var(--surface); border: 1px solid var(--line);
    border-radius: 18px; padding: 10px 14px; box-shadow: var(--shadow-m);
    display: flex; align-items: center; gap: 9px; font-size: 12.5px;
    font-weight: 700; animation: bob 5s ease-in-out infinite
}
.fl small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-3) }
.fl.f1 { top: 2%; left: -4%; animation-delay: -.6s }
.fl.f2 { bottom: 16%; right: -6%; animation-delay: -2.2s }
.fl.f3 { bottom: -2%; left: 8%; animation-delay: -3.6s }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@media(max-width:940px) {
    .hero-g { grid-template-columns: 1fr; gap: 48px }
    .scene { order: -1 }
    .fl.f1 { left: 0 }
    .fl.f2 { right: 0 }
}
@media(max-width:520px) { .fl { display: none } }

/* ============ VALUE STRIP ============ */
.strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
    margin-top: 70px; position: relative; z-index: 2
}
.strip .sv {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad-s);
    padding: 18px 20px; display: flex; align-items: center; gap: 12px; transition: .3s
}
.strip .sv:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: var(--indigo) }
.strip .sv b { display: block; font-size: 14px }
.strip .sv span { font-size: 12px; color: var(--ink-3) }
.strip .sv .e { font-size: 22px }
@media(max-width:860px) { .strip { grid-template-columns: 1fr 1fr } }
@media(max-width:520px) { .strip { grid-template-columns: 1fr } }

/* ============ SECTIONS ============ */
.sec { padding: 104px 0; position: relative }
.kicker {
    display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px;
    font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
    color: var(--indigo); margin-bottom: 14px
}
.kicker::before { content: ''; width: 18px; height: 2px; background: var(--indigo); border-radius: 2px }
.h2 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; margin-bottom: 14px }
.lead { font-size: 16.5px; color: var(--ink-2); max-width: 520px }

/* ============ SERVICES ============ */
#services { background: var(--bg-soft) }
.svc-top {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 26px
}
.svc-search {
    display: flex; align-items: center; gap: 9px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--rad-p); padding: 10px 18px;
    min-width: 250px; box-shadow: var(--shadow-s)
}
.svc-search input {
    border: 0; background: transparent; outline: 0; font-family: inherit;
    font-size: 14px; color: var(--ink); width: 100%
}
.svc-search i { color: var(--ink-3) }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px }
.fbtn {
    border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    border-radius: var(--rad-p); padding: 9px 16px; font-family: inherit;
    font-size: 13px; font-weight: 700; cursor: pointer; transition: .25s;
    display: inline-flex; align-items: center; gap: 7px
}
.fbtn:hover { transform: translateY(-2px); box-shadow: var(--shadow-s) }
.fbtn.on { background: var(--ink); border-color: var(--ink); color: var(--bg) }
.fbtn .cnt { font-size: 10.5px; opacity: .6; font-weight: 800 }
.result-line { font-size: 13px; color: var(--ink-3); margin-bottom: 22px; font-weight: 600 }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.scard {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad);
    padding: 26px; display: flex; flex-direction: column; gap: 12px;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s, border-color .3s, opacity .35s;
    position: relative; overflow: hidden
}
.scard::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
    transition: .4s; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--tint), transparent 62%)
}
.scard:hover::after { opacity: 1 }
.scard:hover { transform: translateY(-7px); box-shadow: var(--shadow-l); border-color: var(--acc) }
.scard.hide { display: none }
.scard.pop { animation: pop .5s cubic-bezier(.2, .8, .2, 1) both }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } }
.sc-top { display: flex; align-items: center; gap: 12px }
.sc-em {
    width: 48px; height: 48px; border-radius: 16px; background: var(--tint);
    display: grid; place-items: center; font-size: 22px; flex-shrink: 0
}
.sc-cat {
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--acc)
}
.scard h4 { font-size: 17.5px; letter-spacing: -.02em; margin: 0 }
.scard p { font-size: 13.5px; color: var(--ink-2); line-height: 1.72; flex: 1; margin: 0 }
.apply {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
    font-weight: 800; color: var(--acc); text-decoration: none;
    transition: gap .25s; margin-top: 2px; width: fit-content
}
.apply:hover { gap: 11px }
.no-res { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--ink-3) }
.no-res .nr-e { font-size: 42px; display: block; margin-bottom: 12px }
@media(max-width:940px) { .svc-grid { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:640px) { .svc-grid { grid-template-columns: 1fr } }

/* ============ ABOUT ============ */
.ab-g { display: grid; grid-template-columns: .95fr 1.05fr; gap: 56px; align-items: center }
.ab-note {
    font-size: clamp(21px, 2.4vw, 29px); font-weight: 700;
    letter-spacing: -.03em; line-height: 1.35; margin: 16px 0 20px
}
.ab-note em { font-style: normal; color: var(--indigo) }
.pillars { display: grid; gap: 12px }
.pil {
    display: grid; grid-template-columns: 52px 1fr; gap: 16px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--rad-s); padding: 22px; transition: .35s
}
.pil:hover { transform: translateX(7px); box-shadow: var(--shadow-m); border-color: var(--indigo) }
.pil .pe {
    width: 48px; height: 48px; border-radius: 15px; display: grid;
    place-items: center; font-size: 21px; background: var(--indigo-t)
}
.pil:nth-child(2) .pe { background: var(--mint-t) }
.pil:nth-child(3) .pe { background: var(--amber-t) }
.pil h4 { font-size: 17px; margin-bottom: 5px }
.pil p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.7 }
@media(max-width:940px) { .ab-g { grid-template-columns: 1fr; gap: 36px } }

/* ============ BENEFITS ============ */
#benefits { background: var(--bg-soft) }
.zz { display: grid; gap: 12px; margin-top: 14px }
.zrow {
    display: grid; grid-template-columns: 88px 1fr; gap: 22px; align-items: center;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--rad); padding: 26px 28px; transition: .4s
}
.zrow:nth-child(even) { grid-template-columns: 1fr 88px }
.zrow:nth-child(even) .zico { order: 2 }
.zrow:hover { box-shadow: var(--shadow-m); border-color: var(--acc); transform: scale(1.012) }
.zico {
    width: 80px; height: 80px; border-radius: 24px; display: grid;
    place-items: center; font-size: 32px; background: var(--tint)
}
.zrow h4 { font-size: 20px; margin-bottom: 6px }
.zrow p { font-size: 14px; color: var(--ink-2); margin: 0; max-width: 760px; line-height: 1.72 }
@media(max-width:700px) {
    .zrow, .zrow:nth-child(even) { grid-template-columns: 1fr; gap: 14px }
    .zrow:nth-child(even) .zico { order: 0 }
}

/* ============ PROCESS ============ */
.steps {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative
}
.steps::before {
    content: ''; position: absolute; top: 34px; left: 10%; right: 10%; height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px)
}
.stp { text-align: center; position: relative; z-index: 1 }
.stp .sn {
    width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 16px;
    display: grid; place-items: center; font-size: 26px; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--shadow-s); transition: .4s
}
.stp:hover .sn {
    transform: translateY(-6px) scale(1.06); border-color: var(--indigo); box-shadow: var(--shadow-m)
}
.stp b {
    display: block; font-size: 11px; letter-spacing: .15em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px
}
.stp h4 { font-size: 18px; margin-bottom: 7px }
.stp p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.7 }
@media(max-width:860px) {
    .steps { grid-template-columns: 1fr 1fr }
    .steps::before { display: none }
}
@media(max-width:520px) { .steps { grid-template-columns: 1fr } }

/* ============ TESTIMONIALS ============ */
#stories { background: var(--bg-soft) }
.tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.tcard {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad);
    padding: 28px; display: flex; flex-direction: column; transition: .4s
}
.tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-l) }
.tcard .st { color: var(--amber); font-size: 13px; letter-spacing: 3px; margin-bottom: 12px }
.tcard p { font-size: 14.5px; color: var(--ink-2); flex: 1; line-height: 1.75 }
.tw {
    display: flex; align-items: center; gap: 12px; margin-top: 20px;
    padding-top: 16px; border-top: 1px solid var(--line-2)
}
.tav {
    width: 42px; height: 42px; border-radius: 50%; display: grid;
    place-items: center; font-weight: 800; font-size: 14px; color: #fff
}
.tw strong { font-size: 13.5px; display: block }
.tw span { font-size: 11.5px; color: var(--ink-3) }
@media(max-width:940px) { .tg { grid-template-columns: 1fr } }

/* ============ FAQ ============ */
.faq-g { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start }
.fq {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 20px; overflow: hidden; transition: .3s
}
.fq:hover { border-color: var(--indigo) }
.fq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 18px 20px; cursor: pointer; font-weight: 700; font-size: 14.5px
}
.fq-i {
    width: 26px; height: 26px; border-radius: 50%; background: var(--indigo-t);
    color: var(--indigo); display: grid; place-items: center; flex-shrink: 0;
    transition: .35s; font-size: 15px
}
.fq.open .fq-i { transform: rotate(135deg); background: var(--indigo); color: #fff }
.fq-a {
    max-height: 0; overflow: hidden;
    transition: max-height .45s cubic-bezier(.2, .8, .2, 1)
}
.fq-a p {
    padding: 0 20px 20px; font-size: 13.5px; color: var(--ink-2);
    margin: 0; line-height: 1.75
}
@media(max-width:860px) { .faq-g { grid-template-columns: 1fr } }

/* ============ NEWSLETTER ============ */
.nl {
    background: var(--surface); border: 1px solid var(--line); border-radius: 34px;
    padding: 46px; box-shadow: var(--shadow-m); display: grid;
    grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
    position: relative; overflow: hidden
}
.nl::before {
    content: ''; position: absolute; width: 320px; height: 320px; border-radius: 50%;
    background: var(--rose-t); filter: blur(70px); top: -120px; right: -80px
}
.nl>* { position: relative; z-index: 1 }
.perk { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); margin-top: 9px }
.perk i { color: var(--mint) }
.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px }
.fld label {
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3)
}
.fld input, .fld select, .fld textarea {
    border: 1px solid var(--line); background: var(--surface-2); border-radius: 14px;
    padding: 12px 15px; font-family: inherit; font-size: 14px; color: var(--ink);
    outline: 0; transition: .25s; width: 100%
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
    border-color: var(--indigo); box-shadow: 0 0 0 4px var(--indigo-t)
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3) }
.fld textarea { min-height: 112px; resize: vertical }
.fld select option { background: var(--surface); color: var(--ink) }
.cbx {
    display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px;
    color: var(--ink-2); margin: 12px 0 16px; line-height: 1.55
}
.cbx input { accent-color: var(--indigo); margin-top: 2px; width: 15px; height: 15px }
.cbx a { color: var(--indigo); font-weight: 700; text-decoration: none }
.btn-full {
    width: 100%; border: 0; background: var(--indigo); color: #fff;
    border-radius: var(--rad-p); padding: 14px; font-family: inherit;
    font-weight: 800; font-size: 14.5px; cursor: pointer; transition: .28s
}
.btn-full:hover {
    background: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-m)
}
.btn-full:disabled { opacity: .7; cursor: wait }
.linkbtn {
    display: block; width: 100%; text-align: center; margin-top: 11px;
    font-size: 12px; color: var(--ink-3); background: none; border: 0;
    text-decoration: underline; cursor: pointer; font-family: inherit
}
@media(max-width:860px) {
    .nl { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px }
}

/* ============ CONTACT ============ */
#contact { background: var(--bg-soft) }
.cg { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start }
.cinfo { display: grid; gap: 12px; margin-top: 26px }
.crow {
    display: grid; grid-template-columns: 50px 1fr; gap: 15px; background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--rad-s); padding: 20px; transition: .35s
}
.crow:hover { transform: translateX(6px); border-color: var(--indigo); box-shadow: var(--shadow-s) }
.crow .ce {
    width: 46px; height: 46px; border-radius: 14px; background: var(--indigo-t);
    display: grid; place-items: center; font-size: 20px
}
.crow:nth-child(2) .ce { background: var(--mint-t) }
.crow:nth-child(3) .ce { background: var(--rose-t) }
.crow h5 { font-size: 14.5px; margin-bottom: 3px }
.crow p { font-size: 13px; color: var(--ink-2); margin: 0; line-height: 1.6 }
.cform {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--rad); padding: 32px; box-shadow: var(--shadow-s)
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media(max-width:940px) { .cg { grid-template-columns: 1fr; gap: 36px } }
@media(max-width:520px) { .two { grid-template-columns: 1fr } }

/* ============ CTA ============ */
.cta {
    border-radius: 34px; padding: 66px 40px; text-align: center;
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--indigo), var(--violet) 55%, var(--rose)); color: #fff
}
.cta::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(600px circle at 20% 0%, rgba(255, 255, 255, .18), transparent 60%)
}
.cta>* { position: relative; z-index: 1 }
.cta .ce2 { font-size: 44px; display: block; margin-bottom: 14px }
.cta h2 { font-size: clamp(28px, 4.2vw, 50px); letter-spacing: -.04em; margin-bottom: 14px }
.cta p { font-size: 16.5px; opacity: .85; max-width: 520px; margin: 0 auto 28px }
.cta-btn {
    display: inline-flex; align-items: center; gap: 9px; background: #fff;
    color: var(--indigo); text-decoration: none; font-weight: 800; padding: 15px 30px;
    border-radius: var(--rad-p); transition: .3s; font-size: 15px
}
.cta-btn:hover {
    transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); color: var(--indigo)
}

/* ============ FOOTER ============ */
footer { padding: 60px 0 28px; border-top: 1px solid var(--line) }
.fg { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 32px; padding-bottom: 36px }
.fbrand {
    display: flex; align-items: center; gap: 9px; font-weight: 800;
    font-size: 19px; margin-bottom: 12px
}
.fdesc {
    font-size: 13.5px; color: var(--ink-2); max-width: 250px;
    margin-bottom: 16px; line-height: 1.7
}
.fcol h6 {
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 14px; font-weight: 800
}
.fcol a {
    display: block; text-decoration: none; color: var(--ink-2); font-size: 13.5px;
    margin-bottom: 9px; transition: .22s; background: none; border: 0;
    padding: 0; font-family: inherit; cursor: pointer; text-align: left
}
.fcol a:hover { color: var(--indigo); transform: translateX(3px) }
.fb {
    border-top: 1px solid var(--line-2); padding-top: 20px; display: flex;
    justify-content: space-between; flex-wrap: wrap; gap: 10px;
    font-size: 12.5px; color: var(--ink-3)
}
.fb a {
    background: none; border: 0; color: var(--ink-2); cursor: pointer;
    font-family: inherit; font-size: 12.5px; margin-left: 16px;
    text-decoration: none; transition: .22s;
}
.fb a:hover { color: var(--indigo) }
@media(max-width:860px) {
    .fg { grid-template-columns: 1fr 1fr }
    .fg>div:first-child { grid-column: 1/-1 }
}

/* ============ MODALS + TOAST ============ */
.ov {
    position: fixed; inset: 0; background: rgba(10, 12, 20, .55);
    backdrop-filter: blur(8px); z-index: 1000; display: grid;
    place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: .32s
}
.ov.open { opacity: 1; visibility: visible }
.mbox {
    width: min(560px, 100%); max-height: 82vh; display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: 28px;
    overflow: hidden; transform: translateY(22px) scale(.97);
    transition: .4s cubic-bezier(.2, .8, .2, 1); box-shadow: var(--shadow-l)
}
.ov.open .mbox { transform: none }
.mhd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--line)
}
.mhd h4 { font-size: 19px; margin: 0 }
.mx {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink); cursor: pointer; font-size: 13px
}
.mx:hover { background: var(--rose-t); color: var(--rose); border-color: var(--rose) }
.mbd {
    padding: 22px 24px; overflow-y: auto; font-size: 13.5px;
    color: var(--ink-2); line-height: 1.78
}
.mbd h6 { font-size: 13.5px; color: var(--ink); margin: 16px 0 6px; font-weight: 800 }
#toasts { position: fixed; top: 84px; right: 18px; z-index: 1100; display: grid; gap: 10px }
.toast {
    background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--mint);
    border-radius: 16px; padding: 13px 17px; font-size: 13.5px; display: flex;
    gap: 10px; align-items: center; box-shadow: var(--shadow-l);
    animation: tin .45s cubic-bezier(.2, .8, .2, 1) both; max-width: 330px
}
@keyframes tin { from { transform: translateX(120%); opacity: 0 } to { transform: none; opacity: 1 } }