/* ============================================================
   Home Style Concepts — SOFT CLAY DESIGN SYSTEM
   ============================================================ */
:root {
    --base: #EDF4F1;
    --base-2: #D8E7E0;
    --surface: #F8FCFA;
    --surface-2: #FFFFFF;
    --ink: #1D302A;
    --ink-2: #526B60;
    --ink-3: #8BA096;
    --indigo: #347A68;
    --indigo-2: #245B4D;
    --coral: #D77C68;
    --mint: #72AA91;
    --sun: #D9B45B;
    --sky: #6D9EAD;
    --line: rgba(29, 48, 42, .12);
    --clay: 8px 8px 20px rgba(48, 88, 72, .16), -8px -8px 20px rgba(255, 255, 255, .92);
    --clay-sm: 4px 4px 12px rgba(48, 88, 72, .12), -4px -4px 12px rgba(255, 255, 255, .88);
    --clay-lg: 16px 16px 40px rgba(48, 88, 72, .2), -12px -12px 32px rgba(255, 255, 255, .94);
    --clay-in: inset 5px 5px 12px rgba(48, 88, 72, .18), inset -5px -5px 12px rgba(255, 255, 255, .9);
    --clay-press: inset 3px 3px 8px rgba(48, 88, 72, .22), inset -3px -3px 8px rgba(255, 255, 255, .86);
    --disp: 'Outfit', sans-serif;
    --body: 'DM Sans', sans-serif;
    --ease: cubic-bezier(.25, .8, .25, 1);
    --pop: cubic-bezier(.34, 1.5, .64, 1);
    --rail: 250px;
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }

body {
    font-family: var(--body);
    background: var(--base);
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.65;
}

::selection { background: var(--indigo); color: #fff }
::-webkit-scrollbar { width: 10px }
::-webkit-scrollbar-track { background: var(--base-2) }
::-webkit-scrollbar-thumb { background: #C9C5E4; border-radius: 20px }
::-webkit-scrollbar-thumb:hover { background: var(--indigo) }

:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 3px;
    border-radius: 8px;
}

h1, h2, h3, h4, h5 {
    font-family: var(--disp);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
}

a { text-decoration: none; color: inherit }
img { max-width: 100% }

.skip-link {
    position: fixed; top: -100px; left: 16px; z-index: 6000;
    background: var(--indigo); color: #fff;
    padding: 11px 22px; border-radius: 14px;
    font-weight: 700; transition: top .3s;
}
.skip-link:focus { top: 14px }

/* ---------- Layout shell ---------- */
.shell { padding-left: var(--rail) }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 34px }
.sec { padding: 104px 0; position: relative }

@media(max-width:1100px) {
    .shell { padding-left: 0 }
    .sec { padding: 76px 0 }
    .wrap { padding: 0 22px }
}

/* ---------- Type utils ---------- */
.kicker {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--surface); border-radius: 100px;
    padding: 8px 18px 8px 10px; box-shadow: var(--clay-sm);
    font-family: var(--disp); font-weight: 600;
    font-size: .74rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-2);
}
.kicker .dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--indigo); color: #fff;
    display: grid; place-items: center;
    font-size: .62rem; font-weight: 700;
}
.kicker.coral .dot { background: var(--coral) }
.kicker.mint .dot { background: var(--mint) }
.kicker.sun .dot { background: var(--sun) }

.h-sec { font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 600 }
.h-sec b { font-weight: 700; color: var(--indigo) }

.p-lead { font-size: 1rem; line-height: 1.8; color: var(--ink-2); max-width: 620px }

/* ---------- Buttons ---------- */
.btn-c {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 10px; cursor: pointer; border: none;
    font-family: var(--disp); font-weight: 600; font-size: .92rem;
    background: var(--indigo); color: #fff;
    border-radius: 100px; padding: 15px 30px;
    box-shadow: 6px 6px 16px rgba(108, 92, 231, .35), -4px -4px 12px rgba(255, 255, 255, .6);
    transition: transform .3s var(--pop), box-shadow .3s, background .3s;
}
.btn-c:hover {
    transform: translateY(-3px); background: var(--indigo-2);
    box-shadow: 8px 10px 22px rgba(108, 92, 231, .42), -4px -4px 12px rgba(255, 255, 255, .6);
    color: #fff;
}
.btn-c:active { transform: translateY(0); box-shadow: var(--clay-press) }
.btn-c.soft { background: var(--surface); color: var(--ink); box-shadow: var(--clay) }
.btn-c.soft:hover { background: var(--surface-2); color: var(--indigo); box-shadow: var(--clay-lg) }
.btn-c.coral {
    background: var(--coral);
    box-shadow: 6px 6px 16px rgba(255, 122, 107, .35), -4px -4px 12px rgba(255, 255, 255, .6);
}
.btn-c.coral:hover { background: #F1665A }
.btn-c i { transition: transform .3s var(--pop) }
.btn-c:hover i { transform: translateX(4px) }

.link-c {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--disp); font-weight: 600; font-size: .86rem;
    color: var(--indigo); background: none; border: none;
    padding: 0; cursor: pointer; transition: gap .3s;
}
.link-c:hover { gap: 14px }

/* ---------- Reveal ---------- */
html.js .rv {
    opacity: 0; transform: translateY(26px) scale(.985);
    transition: opacity .7s var(--ease), transform .7s var(--pop);
    transition-delay: var(--d, 0s);
}
html.js .rv.in { opacity: 1; transform: none }

/* ============================================================
   SIDEBAR RAIL
   ============================================================ */
.rail {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--rail); z-index: 1500;
    background: var(--base); display: flex; flex-direction: column;
    padding: 26px 20px; box-shadow: 14px 0 34px rgba(120, 115, 180, .14);
}
.rail-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 6px 8px 22px;
}
.rail-brand .mark {
    width: 44px; height: 44px; border-radius: 16px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--indigo); color: #fff; font-size: 1.25rem;
    box-shadow: 5px 5px 14px rgba(108, 92, 231, .4), -3px -3px 10px rgba(255, 255, 255, .7);
}
.rail-brand .nm {
    font-family: var(--disp); font-weight: 700; font-size: 1.16rem;
    letter-spacing: -.02em; line-height: 1;
}
.rail-brand .nm small {
    display: block; font-family: var(--body);
    font-size: .6rem; font-weight: 500; letter-spacing: .2em;
    text-transform: uppercase; color: var(--ink-3); margin-top: 5px;
}
.rail-nav {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 3px;
    flex: 1; overflow-y: auto;
}
.rail-nav::-webkit-scrollbar { width: 0 }
.rail-nav a {
    display: flex; align-items: center; gap: 13px;
    padding: 11px 14px; border-radius: 14px;
    font-family: var(--disp); font-weight: 500; font-size: .9rem;
    color: var(--ink-2);
    transition: color .3s, box-shadow .3s, background .3s, transform .3s var(--pop);
}
.rail-nav a i { font-size: 1rem; width: 20px; text-align: center; color: var(--ink-3); transition: color .3s }
.rail-nav a:hover { color: var(--ink); transform: translateX(4px) }
.rail-nav a:hover i { color: var(--indigo) }
.rail-nav a.active {
    background: var(--surface); color: var(--indigo);
    font-weight: 600; box-shadow: var(--clay-sm);
}
.rail-nav a.active i { color: var(--indigo) }
.rail-foot { padding-top: 18px }
.rail-foot .btn-c { width: 100%; padding: 13px 20px; font-size: .86rem }
.rail-foot .ph {
    display: flex; align-items: center; gap: 11px;
    margin-top: 14px; padding: 12px 14px; border-radius: 16px;
    background: var(--surface); box-shadow: var(--clay-sm);
}
.rail-foot .ph i { color: var(--mint); font-size: 1.05rem }
.rail-foot .ph span { font-size: .78rem; color: var(--ink-2); line-height: 1.35 }
.rail-foot .ph b { display: block; font-family: var(--disp); font-size: .9rem; color: var(--ink); font-weight: 700 }

/* mobile top bar */
.mbar {
    display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
    padding: 12px 18px; background: rgba(237, 235, 247, .9);
    backdrop-filter: blur(12px);
    align-items: center; justify-content: space-between;
}
.mbar.solid { box-shadow: 0 10px 26px rgba(120, 115, 180, .16) }
.mbar-btn {
    width: 44px; height: 44px; border-radius: 14px; border: none;
    background: var(--surface); color: var(--ink); box-shadow: var(--clay-sm);
    font-size: 1.2rem; display: grid; place-items: center; cursor: pointer;
}
@media(max-width:1100px) {
    .rail { display: none }
    .mbar { display: flex }
}
.offcanvas { background: var(--base); width: min(320px, 88vw) !important }
.offcanvas .rail-nav { gap: 4px }
.offcanvas .rail-nav a { font-size: 1rem; padding: 13px 16px }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 120px 0 90px; position: relative; overflow: hidden }
@media(max-width:1100px) { .hero { padding-top: 110px } }

.hero::before, .hero::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(60px); pointer-events: none; opacity: .5;
}
.hero::before {
    width: 420px; height: 420px; background: rgba(108, 92, 231, .22);
    top: -120px; right: -60px;
}
.hero::after {
    width: 360px; height: 360px; background: rgba(255, 122, 107, .18);
    bottom: -140px; left: -100px;
}
.hero-grid {
    display: grid; grid-template-columns: 1.02fr .98fr;
    gap: 52px; align-items: center; position: relative; z-index: 2;
}
.hero h1 {
    font-size: clamp(2.3rem, 4vw, 3rem); font-weight: 600;
    margin: 22px 0 20px; letter-spacing: -.03em;
}
.hero h1 b { font-weight: 700; color: var(--indigo) }
.hero .sub { font-size: 1.04rem; line-height: 1.8; color: var(--ink-2); max-width: 500px }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px }
.hbadge {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--surface); border-radius: 100px;
    padding: 10px 18px; box-shadow: var(--clay-sm);
    font-size: .83rem; font-weight: 500; color: var(--ink-2);
}
.hbadge i { color: var(--mint) }

/* health check widget */
.hc {
    background: var(--surface); border-radius: 34px;
    padding: 28px 26px; box-shadow: var(--clay-lg); position: relative;
}
.hc-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px }
.hc-ring { position: relative; width: 92px; height: 92px; flex: 0 0 auto }
.hc-ring svg { transform: rotate(-90deg); width: 92px; height: 92px }
.hc-ring .bg-c { fill: none; stroke: var(--base-2); stroke-width: 9 }
.hc-ring .fg-c {
    fill: none; stroke: var(--indigo); stroke-width: 9;
    stroke-linecap: round; stroke-dasharray: 239; stroke-dashoffset: 239;
    transition: stroke-dashoffset .7s var(--ease), stroke .4s;
}
.hc-ring .val {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-family: var(--disp); font-weight: 700; font-size: 1.35rem;
}
.hc-top h3 { font-size: 1.1rem; margin-bottom: 4px }
.hc-top p { font-size: .8rem; color: var(--ink-3); margin: 0; line-height: 1.5 }
.hc-label {
    font-family: var(--disp); font-weight: 600; font-size: .7rem;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 11px; display: block;
}
.hc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px }
.hcchip {
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; border: none; background: var(--surface);
    color: var(--ink-2); border-radius: 100px;
    padding: 9px 15px; font-family: var(--body); font-weight: 500; font-size: .8rem;
    box-shadow: var(--clay-sm); transition: all .28s var(--pop);
}
.hcchip:hover { transform: translateY(-2px); color: var(--ink) }
.hcchip.on {
    background: var(--indigo); color: #fff;
    box-shadow: var(--clay-press), 4px 4px 12px rgba(108, 92, 231, .3);
}
.hcchip .em { font-size: .92rem }
.hc-out {
    background: var(--base); border-radius: 20px; padding: 16px 18px;
    box-shadow: var(--clay-in); min-height: 104px;
}
.hc-out .empty { font-size: .83rem; color: var(--ink-3); margin: 0; line-height: 1.6 }
.hc-item {
    display: flex; align-items: center; gap: 10px;
    font-size: .84rem; color: var(--ink); padding: 5px 0; font-weight: 500;
    animation: slideIn .4s var(--pop) backwards;
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px) }
    to { opacity: 1; transform: none }
}
.hc-item i { color: var(--mint); font-size: .9rem }
.hc .btn-c { width: 100%; margin-top: 16px }
@media(max-width:991px) { .hero-grid { grid-template-columns: 1fr; gap: 44px } }

/* ============================================================
   PILL STRIP
   ============================================================ */
.strip { padding: 0 0 22px }
.strip-inner {
    background: var(--surface); border-radius: 28px;
    padding: 22px 30px; box-shadow: var(--clay);
    display: flex; flex-wrap: wrap; gap: 18px 34px;
    justify-content: space-between; align-items: center;
}
.strip-item {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--disp); font-weight: 600; font-size: .9rem; color: var(--ink);
}
.strip-item .ic {
    width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1rem; flex: 0 0 auto;
}
.strip-item:nth-child(1) .ic { background: rgba(108, 92, 231, .14); color: var(--indigo) }
.strip-item:nth-child(2) .ic { background: rgba(47, 196, 155, .15); color: var(--mint) }
.strip-item:nth-child(3) .ic { background: rgba(255, 181, 71, .18); color: #D98D14 }
.strip-item:nth-child(4) .ic { background: rgba(255, 122, 107, .15); color: var(--coral) }
.strip-item:nth-child(5) .ic { background: rgba(76, 165, 245, .15); color: var(--sky) }

/* ============================================================
   ABOUT
   ============================================================ */
.about-stack {
    display: grid; grid-template-columns: 1.08fr .92fr;
    gap: 44px; margin-top: 44px; align-items: start;
}
.clay-card {
    background: var(--surface); border-radius: 30px;
    padding: 34px; box-shadow: var(--clay);
}
.about-main p { font-size: 1rem; line-height: 1.9; color: var(--ink-2); margin-bottom: 16px }
.about-main p:last-child { margin: 0 }
.about-main strong { color: var(--ink); font-weight: 700 }
.about-side { display: flex; flex-direction: column; gap: 20px }
.mv { border-radius: 26px; padding: 26px; box-shadow: var(--clay); transition: transform .35s var(--pop) }
.mv:hover { transform: translateY(-5px) }
.mv.a { background: linear-gradient(145deg, #F0EEFB, #E4E1F6) }
.mv.b { background: linear-gradient(145deg, #FFF1EE, #FFE4DE) }
.mv .em {
    width: 48px; height: 48px; border-radius: 15px;
    background: var(--surface-2); display: grid; place-items: center;
    font-size: 1.35rem; box-shadow: var(--clay-sm); margin-bottom: 14px;
}
.mv h3 { font-size: 1.1rem; margin-bottom: 8px }
.mv p { font-size: .88rem; line-height: 1.7; color: var(--ink-2); margin: 0 }
.vals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px }
.val {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--surface); border-radius: 100px;
    padding: 11px 19px; box-shadow: var(--clay-sm);
    font-family: var(--disp); font-weight: 500; font-size: .85rem;
    transition: all .3s var(--pop);
}
.val:hover { transform: translateY(-3px); box-shadow: var(--clay); color: var(--indigo) }
.pillars4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px }
.p4 {
    background: var(--surface); border-radius: 26px;
    padding: 26px 22px; box-shadow: var(--clay);
    transition: transform .35s var(--pop), box-shadow .35s;
}
.p4:hover { transform: translateY(-7px); box-shadow: var(--clay-lg) }
.p4 .em {
    width: 52px; height: 52px; border-radius: 17px;
    display: grid; place-items: center; font-size: 1.4rem;
    margin-bottom: 15px; box-shadow: var(--clay-sm);
    background: var(--surface-2);
}
.p4 h4 { font-size: .98rem; margin-bottom: 7px }
.p4 p { font-size: .82rem; line-height: 1.65; color: var(--ink-2); margin: 0 }
@media(max-width:991px) {
    .about-stack { grid-template-columns: 1fr }
    .pillars4 { grid-template-columns: 1fr 1fr }
}
@media(max-width:575px) { .pillars4 { grid-template-columns: 1fr } }

/* ============================================================
   SERVICES
   ============================================================ */
.svc-head {
    display: flex; flex-wrap: wrap; gap: 22px;
    justify-content: space-between; align-items: flex-end;
}
.basket {
    background: var(--surface); border-radius: 24px;
    padding: 18px 22px; box-shadow: var(--clay);
    display: flex; align-items: center; gap: 16px; min-width: 270px;
}
.basket .cnt {
    width: 52px; height: 52px; border-radius: 17px;
    background: var(--indigo); color: #fff;
    display: grid; place-items: center;
    font-family: var(--disp); font-weight: 700; font-size: 1.3rem;
    flex: 0 0 auto; position: relative;
    box-shadow: 4px 4px 12px rgba(108, 92, 231, .35);
    transition: transform .35s var(--pop);
}
.basket .cnt.bump { transform: scale(1.16) }
.basket .txt { flex: 1; line-height: 1.35 }
.basket .txt b { display: block; font-family: var(--disp); font-size: .92rem }
.basket .txt span { font-size: .76rem; color: var(--ink-3) }
.basket button {
    border: none; background: none; color: var(--indigo);
    font-family: var(--disp); font-weight: 600; font-size: .8rem;
    cursor: pointer; padding: 0; white-space: nowrap;
}
.basket button:disabled { color: var(--ink-3); cursor: not-allowed }
.svc-cats { display: flex; flex-wrap: wrap; gap: 9px; margin: 34px 0 26px }
.scat {
    border: none; background: var(--surface); color: var(--ink-2);
    border-radius: 100px; padding: 10px 20px;
    font-family: var(--disp); font-weight: 500; font-size: .84rem;
    box-shadow: var(--clay-sm); cursor: pointer;
    transition: all .28s var(--pop);
}
.scat:hover { transform: translateY(-2px); color: var(--ink) }
.scat.on { background: var(--ink); color: #fff; box-shadow: var(--clay-press) }
.svc-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px }
.svc {
    background: var(--surface); border-radius: 26px;
    padding: 24px 24px 22px; box-shadow: var(--clay);
    display: flex; gap: 18px; align-items: flex-start;
    position: relative; overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s, background .35s;
}
.svc:hover { transform: translateY(-5px); box-shadow: var(--clay-lg) }
.svc.picked { background: linear-gradient(145deg, #EFEDFC, #E6E2FA) }
.svc.hide { display: none }
.svc .icon {
    width: 56px; height: 56px; border-radius: 19px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 1.5rem;
    background: var(--surface-2); box-shadow: var(--clay-sm);
    transition: transform .35s var(--pop);
}
.svc:hover .icon { transform: rotate(-7deg) scale(1.05) }
.svc .body { flex: 1; min-width: 0 }
.svc .body h3 { font-size: 1.02rem; margin-bottom: 7px; padding-right: 40px }
.svc .body p { font-size: .83rem; line-height: 1.7; color: var(--ink-2); margin: 0 0 12px }
.svc .tags { display: flex; flex-wrap: wrap; gap: 6px }
.svc .tags span {
    font-size: .66rem; font-weight: 500; background: var(--base);
    border-radius: 100px; padding: 5px 11px;
    color: var(--ink-2); box-shadow: var(--clay-in);
}
.svc .add {
    position: absolute; top: 22px; right: 22px;
    width: 36px; height: 36px; border-radius: 12px; border: none;
    background: var(--base); color: var(--indigo); font-size: .95rem;
    cursor: pointer; box-shadow: var(--clay-sm);
    display: grid; place-items: center;
    transition: all .3s var(--pop);
}
.svc .add:hover { transform: scale(1.1) }
.svc.picked .add { background: var(--indigo); color: #fff; box-shadow: var(--clay-press) }
.svc .num {
    position: absolute; bottom: 16px; right: 22px;
    font-family: var(--disp); font-weight: 700; font-size: .72rem;
    color: var(--ink-3); letter-spacing: .1em;
}
@media(max-width:900px) { .svc-list { grid-template-columns: 1fr } }

/* ============================================================
   FOUR SOLUTION PANELS
   ============================================================ */
.sol { padding: 70px 0 }
.sol-card {
    border-radius: 36px; padding: 46px; box-shadow: var(--clay-lg);
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center;
}
.sol-card.a { background: linear-gradient(145deg, #F1EFFC, #E5E1F7) }
.sol-card.b { background: linear-gradient(145deg, #EAF6F2, #DDEFE9) }
.sol-card.c { background: linear-gradient(145deg, #FFF3E9, #FCE8D8) }
.sol-card.d { background: linear-gradient(145deg, #FFF0EE, #FBE2DE) }
.sol-card.flip .sc-left { order: 2 }
.sc-badge {
    display: inline-flex; align-items: center; gap: 11px;
    background: var(--surface); border-radius: 100px;
    padding: 9px 20px 9px 9px; box-shadow: var(--clay-sm);
    margin-bottom: 18px;
    font-family: var(--disp); font-weight: 600; font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.sc-badge .em {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-2); display: grid; place-items: center;
    font-size: .95rem; box-shadow: var(--clay-sm);
}
.sc-left h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 16px; font-weight: 600 }
.sc-left p { font-size: .98rem; line-height: 1.85; color: var(--ink-2); margin-bottom: 26px; max-width: 470px }
.sc-list { display: flex; flex-direction: column; gap: 12px }
.sc-row {
    display: flex; align-items: center; gap: 15px;
    background: var(--surface); border-radius: 18px;
    padding: 16px 20px; box-shadow: var(--clay-sm);
    font-size: .88rem; font-weight: 500;
    transition: transform .3s var(--pop), box-shadow .3s;
}
.sc-row:hover { transform: translateX(7px); box-shadow: var(--clay) }
.sc-row .tick {
    width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: .85rem;
    background: var(--base); color: var(--indigo); box-shadow: var(--clay-in);
}
.sol-card.b .sc-row .tick { color: var(--mint) }
.sol-card.c .sc-row .tick { color: #D98D14 }
.sol-card.d .sc-row .tick { color: var(--coral) }
@media(max-width:991px) {
    .sol-card { grid-template-columns: 1fr; padding: 34px 26px; gap: 32px }
    .sol-card.flip .sc-left { order: 0 }
}

/* ============================================================
   WHY
   ============================================================ */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px }
.why-c {
    background: var(--surface); border-radius: 28px;
    padding: 30px 26px; box-shadow: var(--clay);
    position: relative;
    transition: transform .4s var(--pop), box-shadow .4s;
}
.why-c:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: var(--clay-lg) }
.why-c .em {
    width: 58px; height: 58px; border-radius: 19px;
    display: grid; place-items: center; font-size: 1.5rem;
    margin-bottom: 17px; background: var(--surface-2); box-shadow: var(--clay-sm);
}
.why-c h3 { font-size: 1.05rem; margin-bottom: 9px }
.why-c p { font-size: .85rem; line-height: 1.7; color: var(--ink-2); margin: 0 }
.why-c .n {
    position: absolute; top: 26px; right: 26px;
    font-family: var(--disp); font-weight: 700; font-size: 1.6rem;
    color: rgba(40, 39, 64, .07);
}
.promise {
    margin-top: 26px; background: var(--ink); border-radius: 30px;
    padding: 40px 44px; color: #fff;
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    box-shadow: var(--clay-lg);
}
.promise .em {
    width: 64px; height: 64px; border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    display: grid; place-items: center; font-size: 1.8rem; flex: 0 0 auto;
}
.promise h3 { color: #fff; font-size: 1.35rem; margin-bottom: 6px }
.promise p { color: rgba(255, 255, 255, .68); margin: 0; font-size: .92rem; line-height: 1.7; max-width: 560px }
@media(max-width:991px) { .why-grid { grid-template-columns: 1fr 1fr } }
@media(max-width:600px) {
    .why-grid { grid-template-columns: 1fr }
    .promise { padding: 30px 24px }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.t-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 40px; margin-top: 44px; align-items: start }
.t-people { display: flex; flex-direction: column; gap: 10px }
.t-person {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: none; border-radius: 20px;
    padding: 12px 14px; box-shadow: var(--clay-sm);
    cursor: pointer; text-align: left; width: 100%;
    transition: all .32s var(--pop);
}
.t-person:hover { transform: translateX(5px) }
.t-person.on { box-shadow: var(--clay-press); background: var(--base-2) }
.t-person .av {
    width: 42px; height: 42px; border-radius: 14px; flex: 0 0 auto;
    display: grid; place-items: center; color: #fff;
    font-family: var(--disp); font-weight: 700; font-size: .82rem;
}
.t-person .nm { font-family: var(--disp); font-weight: 600; font-size: .85rem; line-height: 1.2 }
.t-person .lc { font-size: .7rem; color: var(--ink-3) }
.t-person.on .nm { color: var(--indigo) }
.t-panel {
    background: var(--surface); border-radius: 32px;
    padding: 44px 42px; box-shadow: var(--clay-lg);
    position: relative; min-height: 290px;
}
.t-panel .qm {
    position: absolute; top: 26px; right: 36px;
    font-family: var(--disp); font-weight: 700; font-size: 5rem;
    line-height: 1; color: rgba(108, 92, 231, .1);
}
.t-quote { display: none }
.t-quote.on { display: block; animation: fadeQ .5s var(--ease) }
@keyframes fadeQ {
    from { opacity: 0; transform: translateY(14px) }
    to { opacity: 1; transform: none }
}
.t-stars { color: var(--sun); letter-spacing: 3px; font-size: .95rem; margin-bottom: 16px }
.t-quote p { font-size: 1.02rem; line-height: 1.85; color: var(--ink); margin-bottom: 22px; position: relative; z-index: 1 }
.t-meta { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line) }
.t-meta .av {
    width: 48px; height: 48px; border-radius: 16px;
    display: grid; place-items: center; color: #fff;
    font-family: var(--disp); font-weight: 700; font-size: .9rem;
}
.t-meta b { font-family: var(--disp); font-size: .95rem; display: block }
.t-meta span { font-size: .78rem; color: var(--ink-3) }
@media(max-width:900px) {
    .t-wrap { grid-template-columns: 1fr }
    .t-people { flex-direction: row; overflow-x: auto; padding-bottom: 6px }
    .t-person { min-width: 190px }
    .t-panel { padding: 32px 24px }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; align-items: start }
.faq-i {
    background: var(--surface); border-radius: 22px;
    box-shadow: var(--clay); overflow: hidden; transition: box-shadow .3s;
}
.faq-i.open { box-shadow: var(--clay-lg) }
.faq-q {
    width: 100%; display: flex; align-items: center; gap: 14px;
    background: none; border: none; cursor: pointer;
    padding: 19px 22px; text-align: left;
    font-family: var(--disp); font-weight: 600; font-size: .93rem; color: var(--ink);
}
.faq-q .qn {
    width: 32px; height: 32px; border-radius: 11px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--base); color: var(--indigo);
    font-size: .74rem; font-weight: 700; box-shadow: var(--clay-in);
}
.faq-q .qt { flex: 1 }
.faq-q .qi {
    width: 30px; height: 30px; border-radius: 10px; flex: 0 0 auto;
    display: grid; place-items: center;
    background: var(--base); color: var(--ink-2);
    font-size: .78rem; box-shadow: var(--clay-sm);
    transition: all .4s var(--pop);
}
.faq-i.open .qi { transform: rotate(135deg); background: var(--indigo); color: #fff }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease) }
.faq-i.open .faq-a { grid-template-rows: 1fr }
.faq-a > div { overflow: hidden }
.faq-a p { font-size: .86rem; line-height: 1.8; color: var(--ink-2); margin: 0; padding: 0 22px 22px 68px }
@media(max-width:800px) {
    .faq-cols { grid-template-columns: 1fr }
    .faq-a p { padding-left: 22px }
}

/* ============================================================
   NEWSLETTER / FORMS
   ============================================================ */
.news-card {
    border-radius: 36px; padding: 46px; box-shadow: var(--clay-lg);
    background: linear-gradient(145deg, #F2F0FD, #E6E2F8);
    display: grid; grid-template-columns: .92fr 1.08fr;
    gap: 44px; align-items: center;
}
.news-l .em {
    width: 62px; height: 62px; border-radius: 20px;
    background: var(--surface); display: grid; place-items: center;
    font-size: 1.7rem; box-shadow: var(--clay-sm); margin-bottom: 18px;
}
.news-l h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); margin-bottom: 13px; font-weight: 600 }
.news-l p { font-size: .93rem; line-height: 1.8; color: var(--ink-2); margin: 0 }
.news-perks { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px }
.news-perks span {
    font-size: .7rem; font-weight: 500; background: var(--surface);
    border-radius: 100px; padding: 8px 15px;
    box-shadow: var(--clay-sm); color: var(--ink-2);
}
.fld { margin-bottom: 16px }
.fld label {
    display: block; font-family: var(--disp); font-weight: 600;
    font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px;
}
.fld input, .fld select, .fld textarea {
    width: 100%; background: var(--base); border: none;
    border-radius: 16px; padding: 14px 18px;
    font-family: var(--body); font-size: .92rem; color: var(--ink);
    box-shadow: var(--clay-in); transition: box-shadow .3s;
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--ink-3) }
.fld input:focus, .fld select:focus, .fld textarea:focus {
    outline: none; box-shadow: var(--clay-in), 0 0 0 3px rgba(108, 92, 231, .22);
}
.fld textarea { resize: vertical; min-height: 112px }
.chk { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 20px }
.chk input {
    width: 18px; height: 18px; accent-color: var(--indigo);
    margin-top: 3px; flex: 0 0 auto;
}
.chk label { font-size: .8rem; color: var(--ink-2); line-height: 1.6 }
.unsub {
    background: none; border: none; cursor: pointer;
    font-family: var(--disp); font-weight: 600; font-size: .78rem;
    color: var(--ink-3); text-decoration: underline; text-underline-offset: 5px;
    padding: 0; margin-top: 15px; transition: color .3s;
}
.unsub:hover { color: var(--indigo) }
.note {
    display: none; margin-top: 15px;
    font-family: var(--disp); font-weight: 600; font-size: .84rem;
    color: var(--mint); align-items: center; gap: 9px;
}
.note.show { display: flex; animation: slideIn .45s var(--pop) }
.done-box { text-align: center; padding: 26px 10px }
.done-box .big {
    width: 80px; height: 80px; border-radius: 26px;
    background: var(--surface); display: grid; place-items: center;
    font-size: 2.2rem; margin: 0 auto 16px;
    box-shadow: var(--clay); animation: popIn .55s var(--pop);
}
@keyframes popIn {
    from { opacity: 0; transform: scale(.5) }
    to { opacity: 1; transform: none }
}
@media(max-width:991px) {
    .news-card { grid-template-columns: 1fr; padding: 34px 26px }
}

/* ============================================================
   CONTACT
   ============================================================ */
.c-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 38px; margin-top: 44px; align-items: start }
.c-list { display: flex; flex-direction: column; gap: 14px }
.c-row {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--surface); border-radius: 22px;
    padding: 20px 22px; box-shadow: var(--clay);
    transition: transform .3s var(--pop), box-shadow .3s;
}
.c-row:hover { transform: translateY(-4px); box-shadow: var(--clay-lg) }
.c-row .ic {
    width: 46px; height: 46px; border-radius: 15px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 1.15rem;
    background: var(--base); box-shadow: var(--clay-in); color: var(--indigo);
}
.c-row h5 { font-size: .93rem; margin-bottom: 5px }
.c-row p { font-size: .84rem; color: var(--ink-2); margin: 0; line-height: 1.65 }
.map-box {
    margin-top: 14px; border-radius: 26px; overflow: hidden;
    box-shadow: var(--clay); background: var(--surface); padding: 10px;
}
.map-box iframe {
    width: 100%; height: 210px; border: 0;
    display: block; border-radius: 18px;
    filter: saturate(.85) contrast(.96);
}
.c-form { background: var(--surface); border-radius: 32px; padding: 40px 38px; box-shadow: var(--clay-lg) }
.c-form h3 { font-size: 1.35rem; margin-bottom: 5px }
.c-form .sb {
    font-family: var(--disp); font-weight: 600; font-size: .72rem;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--indigo); margin-bottom: 26px;
}
.fg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px }
.fg .full { grid-column: 1/-1 }
.c-form .btn-c { width: 100%; margin-top: 14px }
@media(max-width:991px) {
    .c-grid { grid-template-columns: 1fr }
    .c-form { padding: 32px 24px }
    .fg { grid-template-columns: 1fr }
}

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--base-2); padding: 70px 0 0; margin-top: 20px }
.foot-cta {
    background: var(--surface); border-radius: 34px;
    padding: 44px; box-shadow: var(--clay-lg);
    text-align: center; margin-bottom: 56px;
}
.foot-cta .em { font-size: 2.1rem; display: block; margin-bottom: 12px }
.foot-cta h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 10px; font-weight: 600 }
.foot-cta p { color: var(--ink-2); max-width: 520px; margin: 0 auto 24px; font-size: .94rem }
.foot-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px }
.foot h5 {
    font-family: var(--disp); font-size: .72rem; font-weight: 700;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink-3); margin-bottom: 20px;
}
.foot .blurb { font-size: .87rem; line-height: 1.8; color: var(--ink-2); margin: 16px 0 20px; max-width: 290px }
.foot .fl {
    display: block; font-size: .87rem; color: var(--ink-2);
    padding: 6px 0; transition: color .3s, transform .3s var(--pop);
}
.foot .fl:hover { color: var(--indigo); transform: translateX(6px) }
.foot .fc { display: flex; gap: 12px; padding: 7px 0; font-size: .85rem; color: var(--ink-2); line-height: 1.6 }
.foot .fc i { color: var(--indigo); margin-top: 3px }
.socials { display: flex; gap: 10px }
.socials a {
    width: 42px; height: 42px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1rem;
    background: var(--surface); color: var(--ink-2);
    box-shadow: var(--clay-sm); transition: all .3s var(--pop);
}
.socials a:hover { transform: translateY(-4px); color: var(--indigo); box-shadow: var(--clay) }
.foot-bot {
    margin-top: 50px; padding: 24px 0;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: space-between; align-items: center;
    font-size: .78rem; color: var(--ink-3);
}
.foot-bot a {
    color: var(--ink-2); font-family: var(--body);
    font-size: .78rem; font-weight: 500;
    transition: color .3s;
}
.foot-bot a:hover { color: var(--indigo) }
@media(max-width:991px) { .foot-cols { grid-template-columns: 1fr 1fr } }
@media(max-width:575px) { .foot-cols { grid-template-columns: 1fr } }

.to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 1400;
    width: 52px; height: 52px; border-radius: 18px; border: none;
    background: var(--indigo); color: #fff; font-size: 1.05rem;
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 6px 6px 18px rgba(108, 92, 231, .4);
    opacity: 0; visibility: hidden; transform: translateY(16px);
    transition: all .4s var(--pop);
}
.to-top.show { opacity: 1; visibility: visible; transform: none }
.to-top:hover { transform: translateY(-4px) }

/* ============================================================
   STANDALONE PAGE (added for separate pages)
   ============================================================ */
.page-hero {
    padding: 150px 0 40px;
    position: relative;
    overflow: hidden;
}
.page-hero::before, .page-hero::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(60px); pointer-events: none; opacity: .4;
}
.page-hero::before {
    width: 360px; height: 360px; background: rgba(108, 92, 231, .18);
    top: -100px; right: -80px;
}
.page-hero::after {
    width: 280px; height: 280px; background: rgba(255, 122, 107, .14);
    bottom: -120px; left: -60px;
}
.page-hero .wrap { position: relative; z-index: 2 }
.page-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600; margin: 18px 0 16px;
    letter-spacing: -.02em;
}
.page-hero h1 b { color: var(--indigo); font-weight: 700 }
.page-hero p { font-size: 1.04rem; line-height: 1.8; color: var(--ink-2); max-width: 620px }
.breadcrumb {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--ink-3);
    margin-bottom: 18px;
    font-family: var(--disp); font-weight: 500;
}
.breadcrumb a { color: var(--indigo); transition: gap .3s }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px }
.breadcrumb .sep { color: var(--ink-3); opacity: .5 }

/* legal/document page */
.doc {
    background: var(--surface);
    border-radius: 32px;
    padding: 48px 52px;
    box-shadow: var(--clay-lg);
    margin-bottom: 60px;
}
.doc h2 {
    font-size: 1.4rem; margin-bottom: 8px;
    color: var(--ink);
}
.doc .doc-sub {
    font-family: var(--disp); font-size: .72rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--indigo); margin-bottom: 30px;
    display: block;
}
.doc h5 {
    font-family: var(--disp); font-size: 1.02rem; font-weight: 700;
    color: var(--indigo); margin: 28px 0 10px;
    letter-spacing: -.01em;
}
.doc p { font-size: .94rem; line-height: 1.85; color: var(--ink-2); margin-bottom: 14px }
.doc > p:first-of-type { font-size: 1rem; color: var(--ink) }
@media(max-width:800px) {
    .doc { padding: 32px 26px }
}

/* standalone form card */
.form-card {
    background: var(--surface);
    border-radius: 36px;
    padding: 48px;
    box-shadow: var(--clay-lg);
    max-width: 620px;
    margin: 0 auto;
}
.form-card h3 {
    font-size: 1.5rem; margin-bottom: 8px;
}
.form-card .sb {
    font-family: var(--disp); font-weight: 600; font-size: .72rem;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--indigo); margin-bottom: 28px;
}
@media(max-width:575px) {
    .form-card { padding: 32px 24px }
}

/* ============================================================
   MODALS (kept for any inline modals)
   ============================================================ */
.modal-content {
    background: var(--base); border: none; border-radius: 30px;
    box-shadow: var(--clay-lg); overflow: hidden; color: var(--ink);
}
.modal-header {
    border-bottom: 1px solid var(--line);
    padding: 26px 32px 20px; align-items: flex-start;
}
.modal-title { font-family: var(--disp); font-size: 1.35rem; font-weight: 600 }
.modal-sub {
    font-family: var(--disp); font-size: .68rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--indigo); margin-top: 5px;
}
.modal-body { padding: 24px 32px 28px; max-height: 60vh; overflow-y: auto }
.modal-body h6 {
    font-family: var(--disp); font-size: .94rem; font-weight: 700;
    color: var(--indigo); margin: 22px 0 9px;
}
.modal-body h6:first-child { margin-top: 0 }
.modal-body p { font-size: .87rem; line-height: 1.8; color: var(--ink-2); margin-bottom: 10px }
.modal-body a { color: var(--indigo); font-weight: 700 }
.modal-foot {
    border-top: 1px solid var(--line);
    padding: 18px 32px; display: flex; justify-content: flex-end;
}
.modal.fade .modal-dialog {
    transform: translateY(34px) scale(.96);
    transition: transform .45s var(--pop);
}
.modal.show .modal-dialog { transform: none }

.was-validated input:invalid,
.was-validated select:invalid,
.was-validated textarea:invalid {
    box-shadow: var(--clay-in), 0 0 0 3px rgba(255, 122, 107, .4) !important;
}

@media(prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto }
    html.js .rv { opacity: 1; transform: none }
}