/* ============================================================
   Home Upgrade Expert — SOFT CLAY DESIGN SYSTEM
   Shared stylesheet for all pages
============================================================ */
:root {
  --base: #EDF3F2;
  --base-2: #DCE8E6;
  --surface: #F5F9F7;
  --surface-2: #FFFFFF;

  --ink: #192F35;
  --ink-2: #48646B;
  --ink-3: #8CA2A5;

  --indigo: #176B72;
  --indigo-2: #104D55;

  --coral: #D86B43;
  --mint: #8BAF83;
  --sun: #E7BB55;
  --sky: #91BBD0;

  --line: rgba(25, 47, 53, .12);

  /* Coastal mineral clay shadows */
  --clay:
    8px 8px 20px rgba(39, 77, 79, .14),
    -8px -8px 20px rgba(255, 255, 255, .92);

  --clay-sm:
    4px 4px 12px rgba(39, 77, 79, .11),
    -4px -4px 12px rgba(255, 255, 255, .88);

  --clay-lg:
    16px 16px 40px rgba(39, 77, 79, .18),
    -12px -12px 32px rgba(255, 255, 255, .95);

  --clay-in:
    inset 5px 5px 12px rgba(39, 77, 79, .14),
    inset -5px -5px 12px rgba(255, 255, 255, .92);

  --clay-press:
    inset 3px 3px 8px rgba(39, 77, 79, .18),
    inset -3px -3px 8px rgba(255, 255, 255, .88);

  --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 } }

/* ============================================================
   PAGE HERO (inner pages)
============================================================ */
.page-hero { padding: 96px 0 34px; position: relative; overflow: hidden }
.page-hero::before, .page-hero::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(60px); pointer-events: none; opacity: .5
}
.page-hero::before { width: 420px; height: 420px; background: rgba(108, 92, 231, .22); top: -140px; right: -70px }
.page-hero::after { width: 320px; height: 320px; background: rgba(255, 122, 107, .16); bottom: -160px; left: -90px }
.page-hero h1 {
  font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 600;
  margin: 22px 0 14px; letter-spacing: -.03em
}
.page-hero h1 b { font-weight: 700; color: var(--indigo) }
.page-hero .sub { font-size: 1.02rem; line-height: 1.8; color: var(--ink-2); max-width: 620px; margin: 0 }
.crumb {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: 100px; padding: 9px 18px;
  box-shadow: var(--clay-sm); font-family: var(--disp); font-weight: 600;
  font-size: .78rem; color: var(--ink-2); transition: all .3s var(--pop);
}
.crumb:hover { color: var(--indigo); transform: translateX(-3px); box-shadow: var(--clay) }
@media(max-width:1100px) { .page-hero { padding-top: 124px } }

/* ============================================================
   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 — basket picker
============================================================ */
.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
============================================================ */
.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;
  display: inline-block;
}
.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 } }

/* solo centered card (unsubscribe page etc.) */
.solo-card {
  background: var(--surface); border-radius: 32px; padding: 42px;
  box-shadow: var(--clay-lg); max-width: 600px; margin: 0 auto;
}
.solo-card h2 { font-size: 1.5rem; margin-bottom: 6px }
.solo-card .sb {
  font-family: var(--disp); font-weight: 600; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--indigo); margin-bottom: 24px
}
@media(max-width:600px) { .solo-card { padding: 30px 22px } }

/* ============================================================
   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 }
.c-row p a { color: var(--indigo); font-weight: 500 }
.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 }
}

/* ============================================================
   LEGAL DOCUMENT PAGES (privacy / terms)
============================================================ */
.legal-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 34px }
.legal-meta span {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: 100px; padding: 9px 18px;
  box-shadow: var(--clay-sm); font-size: .78rem; font-weight: 500; color: var(--ink-2)
}
.legal-meta i { color: var(--indigo) }
.legal-doc { background: var(--surface); border-radius: 30px; padding: 46px; box-shadow: var(--clay) }
.legal-doc .intro {
  font-size: 1rem; line-height: 1.9; color: var(--ink-2);
  padding-bottom: 20px; margin-bottom: 10px; border-bottom: 1px solid var(--line)
}
.legal-doc h3 {
  font-size: 1.02rem; font-weight: 700; color: var(--indigo);
  margin: 30px 0 9px
}
.legal-doc p { font-size: .9rem; line-height: 1.85; color: var(--ink-2); margin: 0 }
.legal-end { text-align: center; margin-top: 36px }
@media(max-width:600px) { .legal-doc { padding: 30px 22px } }

/* ============================================================
   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 button, .foot-bot a {
  background: none; border: none; color: var(--ink-2);
  font-family: var(--body); font-size: .78rem; font-weight: 500;
  cursor: pointer; padding: 0; transition: color .3s; text-decoration: none
}
.foot-bot button:hover, .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) }

/* ============================================================
   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 h5, .modal-body h6 {
  font-family: var(--disp); font-size: .94rem; font-weight: 700;
  color: var(--indigo); margin: 22px 0 9px
}
.modal-body h5:first-child, .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 }
}