:root{
  /* MyPocket-like light landing tone (inspired) */
  --bg: #f7f7fb;
  --text: #111827;
  --muted: #1f2937;
  --muted2: #374151;
  --card: rgba(255,255,255,.92);
  --card2: rgba(255,255,255,.98);
  --border: rgba(17,24,39,.12);
  --shadow: 0 18px 60px rgba(17,24,39,.12);
  --shadow2: 0 10px 26px rgba(17,24,39,.10);

  /* pastel + CTA */
  --pink1:#ff6aa2;
  --pink2:#ff8ac6;
  --lav1:#b388ff;
  --lav2:#8bb2ff;
  --mint:#7ef0c5;
  --sky:#8fd3ff;
  --accent: var(--pink1);
  --accent2: var(--pink2);
  --success:#22c55e;
  --warn:#fbbf24;
  --danger:#fb7185;
  --radius: 18px;
  --radius2: 16px;
  --container: 1120px;
  --header-h: 76px;

  /* typography + spacing (high-end scale) */
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 14px;
  --fs-4: 16px;
  --fs-5: 18px;
  --fs-6: 20px;
  --fs-7: 24px;
  --fs-8: 32px;
  --fs-9: 44px;

  --lh-tight: 1.18;
  --lh: 1.6;
  --lh-loose: 1.78;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
}

/* keep dark-mode minimal (not a focus in MyPocket reference) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020;
    --text:#f9fafb;
    --muted:#cbd5e1;
    --muted2:#94a3b8;
    --card: rgba(255,255,255,.08);
    --card2: rgba(255,255,255,.10);
    --border: rgba(255,255,255,.14);
    --shadow: 0 18px 60px rgba(0,0,0,.55);
    --shadow2: 0 10px 26px rgba(0,0,0,.30);
    --accent: #ff8ac6;
    --accent2: #b388ff;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family:"Pretendard Variable", Pretendard, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:var(--fs-4);
  line-height:var(--lh);
  letter-spacing:-.25px;
  color:var(--text);
  background:
    radial-gradient(1200px 650px at 10% 15%, rgba(255,138,198,.45), transparent 60%),
    radial-gradient(1200px 650px at 50% 20%, rgba(126,240,197,.42), transparent 62%),
    radial-gradient(1200px 650px at 88% 18%, rgba(143,211,255,.45), transparent 60%),
    linear-gradient(135deg, #ffe6ee 0%, #eafff6 35%, #eaf2ff 100%),
    var(--bg);
}

/* remove texture overlay for cleaner landing */

a{color:inherit}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.container > *{position:relative}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.small{font-size:13.5px}

h1,h2,h3{margin:0}
p{margin:0}
ul{margin:0}

section[id]{scroll-margin-top: calc(var(--header-h) + 18px)}

/* subtle rhythm */
.section__head{margin:0 0 var(--s-4)}
.section__title{font-size:var(--fs-7); letter-spacing:-.7px; line-height:var(--lh-tight)}
.section__desc{margin-top:var(--s-2); color:var(--muted2); line-height:var(--lh-loose)}

:where(a, button, input, [tabindex]):focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent2), transparent 70%),
    0 0 0 6px color-mix(in oklab, var(--accent), transparent 82%);
  border-radius: 14px;
}

::selection{
  background: color-mix(in oklab, var(--accent2), transparent 70%);
}
.srOnly{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-999px; top:-999px;
  background:var(--text); color:var(--bg);
  padding:10px 12px; border-radius:10px; z-index:9999;
}
.skip:focus{left:16px; top:16px}

.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(14px);
  background: color-mix(in oklab, var(--card2), transparent 18%);
  border-bottom:1px solid var(--border);
  transition: box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.topbar.is-scrolled{
  background: color-mix(in oklab, var(--card2), transparent 6%);
  box-shadow: 0 18px 50px rgba(17,24,39,.12);
  border-bottom-color: var(--border);
}
@media (prefers-color-scheme: dark){
  .topbar.is-scrolled{box-shadow: 0 16px 46px rgba(0,0,0,.45)}
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
  min-height: var(--header-h);
}
.topbar__actions{display:flex; align-items:center; gap:10px}
.btn--sm{padding:10px 12px; border-radius: 14px; font-size:14px}
.iconBtn{
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius: 14px;
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.iconBtn svg{width:22px; height:22px}
.iconBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
  border-color: color-mix(in oklab, var(--accent2), var(--border) 74%);
}
@media (prefers-color-scheme: dark){
  .iconBtn:hover{box-shadow: 0 14px 34px rgba(0,0,0,.38)}
}
.brand{display:flex; align-items:center; gap:12px; min-width:260px; text-decoration:none}
.brand__mark{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--pink1), var(--lav1));
  box-shadow: var(--shadow2);
  font-weight:900;
  color:white;
}
.brand__text{display:flex; flex-direction:column; line-height:1.15}
.brand__title{font-weight:900; letter-spacing:-.55px}
.brand__subtitle{font-size:12.5px; color:var(--muted2); margin-top:3px}
.topnav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.topnav__link{
  text-decoration:none;
  padding:9px 11px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--muted2);
  font-weight:800;
  letter-spacing:-.2px;
}
.topnav__link:hover{border-color:var(--border); color:var(--text); background:var(--card)}

.topnav__link:active{transform: translateY(1px)}

.topnav__link.is-active{
  border-color: color-mix(in oklab, var(--accent2), var(--border) 70%);
  background: color-mix(in oklab, var(--accent2), transparent 92%);
  color: var(--text);
}

@media (max-width: 900px){
  .topnav{display:none}
}
@media (min-width: 901px){
  #menuBtn{display:none}
}

/* mobile drawer */
.scrim{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(6px);
  z-index:70;
}
.drawer{
  position:fixed;
  top:12px; right:12px; bottom:12px;
  width:min(360px, calc(100vw - 24px));
  background: linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(15,23,42,.18);
  z-index:71;
  padding:16px;
}
@media (prefers-color-scheme: dark){
  .drawer{box-shadow: 0 30px 90px rgba(0,0,0,.55)}
}
.drawer__head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.drawer__title{font-weight:950; letter-spacing:-.6px}
.drawer__nav{margin-top:14px; display:grid; gap:10px}
.drawer__link{
  padding:12px 12px;
  border-radius: 16px;
  border:1px solid var(--border);
  background: var(--card);
  text-decoration:none;
  font-weight:900;
  color: var(--text);
}
.drawer__link:hover{border-color: color-mix(in oklab, var(--accent2), var(--border) 74%)}

/* cleanup: legacy components not used anymore */
.hero__meta,
.pill,
.pill__k,
.pill__v,
.tabs,
.tabs__bar,
.tab,
.tabs__panel,
.steps,
.callouts,
.callout,
.note{display:none !important}

.hero{padding:56px 0 22px}
.hero__inner{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:24px;
  align-items:start;
}
.hero__copy{max-width: 680px}
@media (max-width: 900px){
  .hero__inner{grid-template-columns:1fr}
  .brand{min-width:auto}
}
.hero__title{
  margin:0;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06;
  letter-spacing:-1.2px;
}
@media (max-width: 560px){
  .hero__title{font-size:38px}
}
.hero__lead{margin-top:var(--s-3); font-size:var(--fs-5); line-height:var(--lh-loose); color:var(--muted)}
.hero__lead b{color: var(--text)}
.heroPseudoTitle{
  font-size: calc(var(--fs-5) * 2);
  line-height: 1.12;
  font-weight: 950;
  letter-spacing: -1px;
  color: var(--text);
  margin-top: 10px;
}
.heroPseudoTitle__sub{
  display:block;
  text-align:center;
  color: var(--pink1);
  text-shadow: 0 10px 30px rgba(255,106,162,.28);
}
.kicker{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:var(--s-3); color:var(--muted2); font-weight:700}
.dot{width:10px; height:10px; border-radius:999px; background:linear-gradient(135deg,var(--accent),var(--accent2))}
.badge{
  margin-left:auto;
  display:inline-flex; align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background: color-mix(in oklab, var(--accent2), transparent 88%);
  border:1px solid color-mix(in oklab, var(--accent2), transparent 68%);
  color: var(--text);
  font-weight:800;
  font-size:12.5px;
}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0}
.chip{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  font-size:13px;
}
.chip__k{font-weight:950; color: var(--text)}
.chip__v{color:var(--muted2)}
.chip--single{
  min-width: 180px;
  justify-content: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 14px 34px rgba(17,24,39,.14),
    0 0 0 1px rgba(255,255,255,.62) inset,
    0 0 0 1px color-mix(in oklab, var(--accent2), transparent 68%),
    0 0 18px color-mix(in oklab, var(--pink1), transparent 30%),
    0 0 34px color-mix(in oklab, var(--lav1), transparent 52%),
    0 0 58px color-mix(in oklab, var(--sky), transparent 72%);
  border-color: color-mix(in oklab, var(--accent2), rgba(17,24,39,.22) 35%);
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
  animation:
    chipFloat 2.0s cubic-bezier(.2,.8,.2,1) infinite,
    chipNeon 1.35s ease-in-out infinite;
}

.chip--single:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--pink1), transparent 80%),
      color-mix(in oklab, var(--lav1), transparent 84%),
      color-mix(in oklab, var(--sky), transparent 86%));
  opacity:1;
  filter: blur(14px);
  z-index:0;
  pointer-events:none;
  transform: translateZ(0);
}

.chip--single:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(240px 90px at 20% 10%, rgba(255,106,162,.18), transparent 55%),
    linear-gradient(115deg,
      transparent 0%,
      rgba(255,255,255,.0) 32%,
      rgba(255,255,255,.35) 42%,
      rgba(255,255,255,.95) 50%,
      rgba(255,255,255,.35) 58%,
      rgba(255,255,255,.0) 68%,
      transparent 100%);
  opacity:1;
  mix-blend-mode: screen;
  transform: translateX(-120%) skewX(-18deg);
  animation: chipShimmer 2.2s cubic-bezier(.2,.7,.2,1) infinite;
  pointer-events:none;
  z-index:1;
}

.chip--single > *{position:relative; z-index:2}
.chip--single .chip__k{
  position:relative;
  text-shadow:
    0 0 10px color-mix(in oklab, var(--sky), transparent 55%),
    0 0 18px color-mix(in oklab, var(--lav1), transparent 62%);
}
.chip--single b{
  display:inline-block;
  min-width: 2ch;
  text-align:center;
  color:#111827;
  text-shadow: 0 10px 30px rgba(0,0,0,.08);
}

@keyframes chipFloat{
  0%{
    transform: translateY(0);
    box-shadow:
      0 14px 34px rgba(17,24,39,.14),
      0 0 0 1px rgba(255,255,255,.62) inset,
      0 0 0 1px color-mix(in oklab, var(--accent2), transparent 68%),
      0 0 18px color-mix(in oklab, var(--pink1), transparent 30%),
      0 0 34px color-mix(in oklab, var(--lav1), transparent 52%),
      0 0 58px color-mix(in oklab, var(--sky), transparent 72%);
    filter: saturate(1.16) brightness(1.05);
  }
  50%{
    transform: translateY(-1px);
    box-shadow:
      0 26px 70px rgba(17,24,39,.18),
      0 0 0 1px rgba(255,255,255,.74) inset,
      0 0 0 1px color-mix(in oklab, var(--accent2), transparent 55%),
      0 0 26px color-mix(in oklab, var(--pink1), transparent 16%),
      0 0 50px color-mix(in oklab, var(--lav1), transparent 34%),
      0 0 78px color-mix(in oklab, var(--sky), transparent 60%),
      0 0 110px color-mix(in oklab, var(--mint), transparent 72%);
    filter: saturate(1.28) brightness(1.08);
  }
  100%{
    transform: translateY(0);
    box-shadow:
      0 14px 34px rgba(17,24,39,.14),
      0 0 0 1px rgba(255,255,255,.62) inset,
      0 0 0 1px color-mix(in oklab, var(--accent2), transparent 68%),
      0 0 18px color-mix(in oklab, var(--pink1), transparent 30%),
      0 0 34px color-mix(in oklab, var(--lav1), transparent 52%),
      0 0 58px color-mix(in oklab, var(--sky), transparent 72%);
    filter: saturate(1.16) brightness(1.05);
  }
}

@keyframes chipNeon{
  0%, 100%{filter: saturate(1.16) brightness(1.05)}
  50%{filter: saturate(1.34) brightness(1.10)}
}

@keyframes chipShimmer{
  0%{transform: translateX(-120%) skewX(-18deg); opacity:0}
  12%{opacity:.95}
  45%{transform: translateX(120%) skewX(-18deg); opacity:.95}
  70%{opacity:0}
  100%{transform: translateX(120%) skewX(-18deg); opacity:0}
}

.chip--single.is-bump{
  animation: chipBump .36s cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes chipBump{
  0%{transform: translateY(0) scale(1)}
  40%{transform: translateY(-2px) scale(1.02)}
  100%{transform: translateY(0) scale(1)}
}

.chip--single:hover{
  transform: translateY(-4px);
  box-shadow:
    0 34px 90px rgba(17,24,39,.22),
    0 0 0 1px rgba(255,255,255,.80) inset,
    0 0 0 1px color-mix(in oklab, var(--accent2), transparent 45%),
    0 0 34px color-mix(in oklab, var(--pink1), transparent 10%),
    0 0 70px color-mix(in oklab, var(--lav1), transparent 18%),
    0 0 110px color-mix(in oklab, var(--sky), transparent 55%);
  border-color: color-mix(in oklab, var(--accent2), rgba(17,24,39,.18) 25%);
}
.chip--single:active{
  transform: translateY(0);
  box-shadow:
    0 14px 34px rgba(17,24,39,.16),
    0 0 0 1px rgba(255,255,255,.60) inset;
}

@media (prefers-reduced-motion: reduce){
  .chip--single,
  .chip--single:after{animation:none}
  .chip--single{filter:none}
}

/* inline CTR buttons (reuse fixed bottom bar colors) */
.ctaInlineBar{
  margin-top: 14px;
  display:flex;
  gap:10px;
  width: 100%;
  max-width: 720px;
}
.ctaInlineBar a{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size: clamp(18px, 1.2vw + 12px, 24px);
  font-weight:900;
  height:96px;
  padding:0 16px;
  border-radius:14px;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
  transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, filter .22s ease;
  white-space:normal;
  text-align:center;
  line-height:1.15;
}
.ctaInlineBar a:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,.0) 38%,
    rgba(255,255,255,.65) 48%,
    rgba(255,255,255,.0) 58%,
    transparent 100%);
  transform: translateX(-130%) skewX(-18deg);
  opacity:.0;
  mix-blend-mode: screen;
  pointer-events:none;
}
.ctaInlineBar a:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(15,23,42,.14);
  filter: saturate(1.05) brightness(1.02);
}
.ctaInlineBar a:hover:before{
  opacity:.95;
  animation: ctaShimmer 1.1s cubic-bezier(.2,.7,.2,1) 1;
}
.ctaInlineBar a:active{
  transform: translateY(0);
  box-shadow: 0 10px 26px rgba(15,23,42,.12);
  filter: saturate(1) brightness(1);
}

@keyframes ctaShimmer{
  0%{transform: translateX(-130%) skewX(-18deg)}
  100%{transform: translateX(130%) skewX(-18deg)}
}

@media (prefers-reduced-motion: reduce){
  .ctaInlineBar a{transition:none}
  .ctaInlineBar a:before{display:none}
}
@media (max-width: 520px){
  .ctaInlineBar{width:100%}
  .ctaInlineBar a{padding:0 12px}
}
.heroNote{margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.heroNote__pill{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: var(--card);
  font-weight:900;
  letter-spacing:-.25px;
}
.heroNote__pill b{
  color: var(--text);
  font-weight:950;
}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 0}
.btn{
  appearance:none;
  border:1px solid var(--border);
  background: var(--card);
  color:var(--text);
  padding:11px 15px;
  border-radius: 16px;
  cursor:pointer;
  font-weight:800;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover{filter:brightness(.98)}
.btn:hover{box-shadow: 0 10px 24px rgba(15,23,42,.10)}
.btn:active{transform: translateY(1px)}
@media (prefers-color-scheme: dark){
  .btn:hover{box-shadow: 0 10px 24px rgba(0,0,0,.32)}
}
.btn--primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--pink1), var(--pink2));
  color:#fff;
  box-shadow: 0 16px 44px rgba(255,106,162,.28);
}
.btn--primary:hover{filter:saturate(1.05) brightness(1.03)}
.btn--soft{
  border-color: var(--border);
  background: color-mix(in oklab, white, transparent 4%);
}
.btn--ghost{background:transparent}
.btn--tiny{padding:8px 10px; border-radius:12px; font-size:13px}
.btn--full{width:100%}

.card{
  border:1px solid var(--border);
  background: var(--card);
  border-radius: 22px;
  padding:20px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: #d1d5db;
  box-shadow: 0 20px 60px rgba(15,23,42,.12);
}
@media (prefers-color-scheme: dark){
  .card:hover{box-shadow: 0 28px 90px rgba(0,0,0,.55)}
}
.card--glass{
  background: var(--card);
}
.card__head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px}
.card__title{font-size:16.5px; font-weight:900; letter-spacing:-.4px}
.card__desc{font-size:13.5px; color:var(--muted2); margin-top:3px}
.checklist{margin:10px 0 0; padding:0 0 0 18px; color:var(--text); line-height:1.8}
.checklist li{color: color-mix(in oklab, var(--text), var(--muted2) 22%)}
.checklist b{color:var(--text)}
.checklist li + li{margin-top:6px}
.divider{height:1px; background: var(--border); margin:14px 0}
.mini{display:flex; gap:10px; align-items:flex-start}
.mini__k{font-weight:900; color: var(--muted2); min-width:44px}
.mini__v{flex:1}

/* hero right card (high-end) */
.heroCard{padding:18px}
.heroCard__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px}
.heroSeal{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius: 999px;
  font-weight:900;
  font-size:12.5px;
  color: color-mix(in oklab, var(--success), var(--text) 35%);
  background: color-mix(in oklab, var(--success), transparent 90%);
  border:1px solid color-mix(in oklab, var(--success), transparent 72%);
}
.heroStats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin:12px 0 10px;
}
.stat{
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--card2), var(--card));
  border-radius: 18px;
  padding:12px;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
@media (prefers-color-scheme: dark){
  .stat{box-shadow: 0 8px 22px rgba(0,0,0,.30)}
}
.stat__k{color:var(--muted2); font-size:12.5px; font-weight:800; letter-spacing:-.25px}
.stat__v{
  margin-top:8px;
  font-size:26px;
  font-weight:950;
  letter-spacing:-.9px;
  line-height:1;
  color: var(--text);
}
.stat__u{font-size:13px; font-weight:900; color:var(--muted2); margin-left:6px}

.checklist--tight{margin-top:10px}
.checklist--tight li{line-height:1.75}
.heroActions{margin-top:14px; display:flex; flex-direction:column; gap:10px}
.heroActions__row{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.heroFoot{margin-top:12px; font-size:13px; line-height:1.55}

@media (max-width: 900px){
  .heroActions__row{grid-template-columns:1fr}
}

.section{padding:30px 0; position:relative}
.section:before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-12px;
  height:1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--border), transparent 10%), transparent);
}
.section__head{margin:10px 0 14px}
.section__title{margin:0; font-size:26px; letter-spacing:-.55px}
.section__desc{margin:8px 0 0; color:var(--muted2); line-height:1.75}

.grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 860px){ .grid2{grid-template-columns:1fr} }

.grid2 > .card{
  display:flex;
  flex-direction:column;
}
.grid2 > .card .kv{margin-top:auto}

.rateRow{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:10px}
@media (max-width: 560px){ .rateRow{grid-template-columns:1fr} }
.rate{
  border:1px solid var(--border);
  border-radius: var(--radius2);
  padding:12px;
  background: var(--card2);
}
.rate__k{font-size:12.5px; color:var(--muted2); font-weight:700}
.rate__v{font-size:22px; font-weight:900; letter-spacing:-.6px; margin-top:6px}

.kv{margin-top:10px; border:1px solid var(--border); border-radius: var(--radius2); overflow:hidden}
.kv__row{display:flex; gap:10px; padding:11px 12px; background:var(--card)}
.kv__row + .kv__row{border-top:1px solid var(--border)}
.kv__k{width:110px; color:var(--muted); font-weight:700}
.kv__v{flex:1}

@media (max-width: 560px){
  .kv__k{width:86px}
}

/* new sections (services / steps / reviews / table / CTA) */
.cards3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){ .cards3{grid-template-columns:1fr} }
.fCard{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:18px;
  background: linear-gradient(180deg, var(--card2), var(--card));
  box-shadow: var(--shadow2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.fCard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent2), var(--border) 70%);
  box-shadow: 0 20px 56px rgba(15,23,42,.12);
}
.fCard__icon{
  width:44px; height:44px;
  border-radius: 14px;
  display:grid; place-items:center;
  color: color-mix(in oklab, var(--accent), var(--text) 28%);
  background: color-mix(in oklab, var(--accent), transparent 90%);
  border: 1px solid color-mix(in oklab, var(--accent), transparent 75%);
}
.fCard__icon svg{width:22px; height:22px}
.fCard__icon--mint{
  color: color-mix(in oklab, var(--success), var(--text) 22%);
  background: color-mix(in oklab, var(--success), transparent 90%);
  border-color: color-mix(in oklab, var(--success), transparent 75%);
}
.fCard__icon--amber{
  color: color-mix(in oklab, var(--warn), var(--text) 22%);
  background: color-mix(in oklab, var(--warn), transparent 90%);
  border-color: color-mix(in oklab, var(--warn), transparent 75%);
}
.fCard__title{margin-top:12px; font-weight:950; letter-spacing:-.45px; font-size:16.5px}
.fCard__title{line-height:1.2}
.fCard__desc{margin-top:8px; color:var(--muted); line-height:1.75}
.fCard__desc{font-size:14.5px}

.steps3{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:14px;
}

/* plans */
.planGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){ .planGrid{grid-template-columns:1fr} }
.planCard{
  position:relative;
  border:1px solid var(--border);
  border-radius: 22px;
  background: var(--card);
  box-shadow: var(--shadow2);
  padding:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.planCard:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent2), var(--border) 72%);
  box-shadow: 0 24px 70px rgba(15,23,42,.12);
}
@media (prefers-color-scheme: dark){
  .planCard:hover{box-shadow: 0 24px 80px rgba(0,0,0,.55)}
}
.planCard:before{
  content:none;
}
.planCard > *{position:relative}
.planCard__tag{font-weight:950; color:var(--muted2); letter-spacing:-.3px}
.planCard__title{margin-top:10px; font-size:20px; font-weight:950; letter-spacing:-.8px; line-height:1.18}
.planCard__desc{margin-top:8px; color:var(--muted); line-height:1.7; font-size:14.5px}
.planPrice{
  margin-top:14px;
  padding:12px;
  border-radius: 18px;
  border:1px solid var(--border);
  background: var(--card);
  min-height: 66px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.planPrice__k{color:var(--muted2); font-weight:900; font-size:12.5px}
.planPrice__v{margin-top:6px; font-weight:950; letter-spacing:-.6px}
.planList{
  margin:14px 0 0;
  padding-left:18px;
  color:var(--muted);
  flex: 1 1 auto;
}
.planList li + li{margin-top:6px}

.planCard .btn{
  margin-top: 14px;
  width:100%;
}
.planCard .btn:last-child{margin-top:auto}
.planCard--best{
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 26px 80px rgba(17,24,39,.12);
}
.planBadge{
  position:absolute;
  top:14px; right:14px;
  padding:7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--lav1), var(--lav2));
  color:#fff;
  font-weight:950;
  letter-spacing:.6px;
  font-size:12px;
}

/* give each plan card a colored border like reference */
.planCard:nth-child(1){border-color: rgba(34,197,94,.45)}
.planCard:nth-child(3){border-color: rgba(168,85,247,.35)}
@media (max-width: 980px){
  .steps3{grid-template-columns:1fr; gap:10px}
  .stepArrow{display:none}
}
.step{display:flex; gap:12px; align-items:flex-start}
.step__body{min-width:0}
.step__num{
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color:white; font-weight:950;
  box-shadow: var(--shadow2);
  flex:0 0 auto;
}
.step__title{font-weight:950; letter-spacing:-.4px}
.step__desc{
  margin-top:6px;
  color:var(--muted);
  line-height:1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.step__desc{font-size:14.5px}
.stepArrow{color:var(--muted2); font-weight:900}

.reviewGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
@media (max-width: 1100px){ .reviewGrid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 620px){ .reviewGrid{grid-template-columns: 1fr} }
.review__head{display:flex; gap:10px; align-items:center}
.avatar{
  width:40px; height:40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: color-mix(in oklab, var(--accent), transparent 90%);
  border:1px solid color-mix(in oklab, var(--accent), transparent 75%);
}
.review__name{font-weight:950; letter-spacing:-.35px}
.review__date{font-size:13px; margin-top:2px}
.stars{margin-top:10px; font-weight:950; letter-spacing:1px; color: color-mix(in oklab, var(--warn), var(--text) 30%)}
.review__text{margin:10px 0 0; color:var(--muted); line-height:1.75}
.review__text{font-size:14.5px}

/* high-end mobile: horizontal snap carousel feel */
@media (max-width: 720px){
  .reviewGrid{
    display:grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82%, 1fr);
    overflow:auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviewGrid::-webkit-scrollbar{display:none}
  .reviewGrid > *{scroll-snap-align: start}
}

.tableCard{padding:14px 14px 16px}
.tableWrap{overflow:auto; border-radius: var(--radius2); border:1px solid var(--border); background:var(--card2)}
.tableWrap:focus{outline:none}
.tableWrap:focus-visible{
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent2), transparent 72%),
    0 0 0 6px color-mix(in oklab, var(--accent), transparent 84%);
}
.table{width:100%; border-collapse:separate; border-spacing:0; min-width:680px}
.table th, .table td{padding:12px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px}
.table td{color: var(--muted)}
.table tbody td:nth-child(1),
.table tbody td:nth-child(2),
.table tbody td:nth-child(3){color: var(--text); font-weight:700}
.table thead th{
  position:sticky; top:0;
  background: color-mix(in oklab, var(--card2), var(--bg) 6%);
  font-weight:950;
  letter-spacing:-.2px;
}
.table tbody tr:hover{background: color-mix(in oklab, var(--accent2), transparent 94%)}
.table tbody tr:nth-child(even){background: color-mix(in oklab, var(--bg), var(--card2) 55%)}
.pillStatus{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12.5px;
  border:1px solid var(--border);
}
.st--wait{background: color-mix(in oklab, var(--warn), transparent 88%); border-color: color-mix(in oklab, var(--warn), transparent 70%)}
.st--done{background: color-mix(in oklab, var(--success), transparent 88%); border-color: color-mix(in oklab, var(--success), transparent 70%)}
.st--talk{background: color-mix(in oklab, var(--accent), transparent 90%); border-color: color-mix(in oklab, var(--accent), transparent 72%)}

/* live board (new style, not a table) */
.liveCard{
  position:relative;
  padding:18px;
  overflow:hidden;
  background:
    radial-gradient(900px 260px at 12% 0%, color-mix(in oklab, var(--accent), transparent 88%), transparent 60%),
    radial-gradient(900px 260px at 88% 0%, color-mix(in oklab, var(--accent2), transparent 88%), transparent 60%),
    linear-gradient(180deg, var(--card2), var(--card));
  border-color: color-mix(in oklab, var(--accent2), var(--border) 72%);
}
.liveCard:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--pink1), transparent 35%),
    color-mix(in oklab, var(--lav1), transparent 55%),
    color-mix(in oklab, var(--sky), transparent 70%));
  filter: blur(18px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
.liveCard > *{position:relative; z-index:1}

.liveHead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.liveHead__left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.liveHead__title{
  font-weight:950;
  letter-spacing:.8px;
  font-size:12px;
  color: color-mix(in oklab, var(--accent2), var(--text) 35%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--accent2), transparent 68%);
  background: color-mix(in oklab, var(--accent2), transparent 92%);
}
.liveHead__meta{white-space:nowrap}
.liveDot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, color-mix(in oklab, var(--accent), #ff2bd6 40%) 55%, transparent 75%);
  box-shadow:
    0 0 10px color-mix(in oklab, var(--pink1), transparent 20%),
    0 0 18px color-mix(in oklab, var(--lav1), transparent 35%);
  animation: liveDotPulse 1.05s ease-in-out infinite;
}
@keyframes liveDotPulse{
  0%, 100%{transform: scale(1); filter: brightness(1)}
  50%{transform: scale(1.18); filter: brightness(1.25)}
}

.liveChips{display:flex; gap:8px; flex-wrap:wrap}
.liveChip{
  padding:9px 11px;
  border-radius: 999px;
  border:1px solid color-mix(in oklab, var(--border), transparent 0%);
  background: color-mix(in oklab, var(--card2), transparent 0%);
  font-weight:900;
  letter-spacing:-.25px;
  color: var(--muted2);
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.liveChip:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
  border-color: color-mix(in oklab, var(--accent2), var(--border) 55%);
  filter: saturate(1.05) brightness(1.02);
}
@media (prefers-color-scheme: dark){
  .liveChip:hover{box-shadow: 0 14px 34px rgba(0,0,0,.38)}
}
.liveChip.is-active{
  color: var(--text);
  border-color: color-mix(in oklab, var(--accent2), transparent 50%);
  background:
    radial-gradient(140px 40px at 20% 30%, color-mix(in oklab, var(--accent), transparent 76%), transparent 60%),
    radial-gradient(140px 40px at 80% 30%, color-mix(in oklab, var(--accent2), transparent 80%), transparent 60%),
    color-mix(in oklab, var(--accent2), transparent 92%);
}

.liveBoard{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 760px){
  .liveBoard{grid-template-columns: 1fr}
}
.liveItem{
  position:relative;
  display:grid;
  grid-template-columns: 8px 1fr;
  border:1px solid color-mix(in oklab, var(--border), transparent 0%);
  border-radius: 20px;
  background:
    radial-gradient(240px 100px at 18% 0%, rgba(255,255,255,.18), transparent 62%),
    linear-gradient(180deg, var(--card2), var(--card));
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (prefers-color-scheme: dark){
  .liveItem{box-shadow: 0 10px 26px rgba(0,0,0,.30)}
}
.liveItem:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent2), var(--border) 62%);
  box-shadow: 0 22px 56px rgba(15,23,42,.12);
}
@media (prefers-color-scheme: dark){
  .liveItem:hover{box-shadow: 0 18px 56px rgba(0,0,0,.40)}
}
.liveRail{background: color-mix(in oklab, var(--border), transparent 0%)}
.liveItem--done .liveRail{background: var(--success)}
.liveItem--talk .liveRail{background: linear-gradient(180deg, #111827, color-mix(in oklab, var(--accent2), #111827 70%))}
.liveItem--wait .liveRail{background: var(--warn)}

.liveMain{padding:13px 14px}
.liveTop{display:flex; align-items:center; justify-content:space-between; gap:10px}
.liveType{
  font-weight:950;
  letter-spacing:-.45px;
  font-size:14px;
}
.liveStatus{
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: var(--card);
  font-weight:950;
  font-size:12.5px;
  color: var(--muted2);
}
.liveItem--done .liveStatus{background: color-mix(in oklab, var(--success), transparent 88%); border-color: color-mix(in oklab, var(--success), transparent 70%); color: color-mix(in oklab, var(--success), var(--text) 35%)}
.liveItem--talk .liveStatus{background: color-mix(in oklab, var(--accent), transparent 90%); border-color: color-mix(in oklab, var(--accent), transparent 70%); color: color-mix(in oklab, var(--accent), var(--text) 35%)}
.liveItem--wait .liveStatus{background: color-mix(in oklab, var(--warn), transparent 88%); border-color: color-mix(in oklab, var(--warn), transparent 70%); color: color-mix(in oklab, var(--warn), var(--text) 35%)}

.liveMid{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:10px}
.liveName{font-weight:950; letter-spacing:-.45px; color: var(--text)}
.liveAmount{
  font-weight:950;
  letter-spacing:-.6px;
  color: var(--text);
}
.liveBot{margin-top:10px; display:flex; align-items:center; gap:8px}

.ctaBand{padding:0 0 18px}
.ctaBand__inner{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:
      radial-gradient(700px 220px at 15% 0%, color-mix(in oklab, var(--accent), transparent 86%), transparent 60%),
      radial-gradient(700px 220px at 85% 0%, color-mix(in oklab, var(--accent2), transparent 86%), transparent 60%),
      linear-gradient(180deg, var(--card2), var(--card));
  padding:18px;
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  box-shadow: var(--shadow2);
}
@media (max-width: 860px){
  .ctaBand__inner{flex-direction:column; align-items:flex-start}
}
.ctaBand__title{font-weight:950; letter-spacing:-.55px; font-size:18px}
.ctaBand__desc{margin-top:6px; color:var(--muted); line-height:1.7}
.ctaBand__actions{display:flex; gap:10px; flex-wrap:wrap}

.proSection{padding:34px 0}
.proGrid{
  display:grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .75fr);
  gap:14px;
  align-items:start;
}
.proGrid--reverse{grid-template-columns: minmax(0, .75fr) minmax(0, 1.55fr)}
.proGrid--reverse .proCard{grid-column:2}
.proGrid--reverse .proSide{grid-column:1}
@media (max-width: 980px){
  .proGrid,
  .proGrid--reverse{grid-template-columns: 1fr}
  .proGrid--reverse .proCard,
  .proGrid--reverse .proSide{grid-column:auto}
}

.proCard{
  position:relative;
  border:1px solid color-mix(in oklab, var(--accent2), var(--border) 72%);
  background:
    radial-gradient(900px 260px at 10% 0%, color-mix(in oklab, var(--accent), transparent 90%), transparent 60%),
    radial-gradient(900px 260px at 90% 0%, color-mix(in oklab, var(--accent2), transparent 90%), transparent 60%),
    linear-gradient(180deg, var(--card2), var(--card));
  border-radius: 24px;
  padding:20px;
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
  overflow:hidden;
}
@media (prefers-color-scheme: dark){
  .proCard{box-shadow: 0 18px 70px rgba(0,0,0,.45)}
}
.proCard:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--pink1), transparent 38%),
    color-mix(in oklab, var(--lav1), transparent 56%),
    color-mix(in oklab, var(--sky), transparent 75%));
  filter: blur(18px);
  opacity:.45;
  pointer-events:none;
}
.proCard > *{position:relative}
.proCard__title{
  margin:0;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.6px;
  line-height:1.25;
}
.proText{
  margin-top:10px;
  color: color-mix(in oklab, var(--text), var(--muted2) 18%);
  line-height:1.9;
  font-size:15px;
  word-break: keep-all;
  overflow-wrap:anywhere;
}
.proList{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.proList__item{
  padding:12px 12px;
  border-radius: 18px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--card2), var(--bg) 6%);
  box-shadow: 0 10px 26px rgba(15,23,42,.06);
  line-height:1.6;
  color: color-mix(in oklab, var(--text), var(--muted2) 14%);
  font-size:14.5px;
}
.proList__item b{
  font-weight:950;
  letter-spacing:-.25px;
  margin-right:6px;
  color: var(--text);
}
.proSide{display:grid; gap:14px}
.proSide__card{
  border:1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--card2), var(--card));
  padding:16px;
  box-shadow: var(--shadow2);
}
.proSide__card--glow{
  border-color: color-mix(in oklab, var(--accent2), var(--border) 55%);
  background:
    radial-gradient(420px 160px at 20% 0%, color-mix(in oklab, var(--accent), transparent 84%), transparent 60%),
    radial-gradient(420px 160px at 80% 0%, color-mix(in oklab, var(--accent2), transparent 86%), transparent 60%),
    linear-gradient(180deg, var(--card2), var(--card));
}
.proSide__k{
  font-weight:950;
  letter-spacing:.6px;
  font-size:12px;
  color: color-mix(in oklab, var(--accent2), var(--text) 35%);
}
.proSide__v{
  margin-top:6px;
  font-weight:950;
  letter-spacing:-.55px;
  font-size:15.5px;
  line-height:1.25;
}

.mobileCta{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  display:none;
  gap:10px;
  padding:10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card2), transparent 6%);
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
  z-index:80;
}
@media (max-width: 720px){
  .mobileCta{display:flex}
  .mobileCta .btn{padding:10px 12px; border-radius: 999px}
}

.toolbar{padding:12px}
.toolbar{box-shadow: var(--shadow2)}
.toolbar__row{display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.search{flex:1; min-width:240px}
.search input{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background: var(--card2);
  color: var(--text);
  outline:none;
}
.search input:focus{border-color: color-mix(in oklab, var(--accent2), transparent 55%)}
.search input::placeholder{color: color-mix(in oklab, var(--muted2), transparent 25%)}
.toolbar__actions{display:flex; gap:8px}

.accordion{display:grid; gap:10px; margin-top:12px}
.accItem{
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  background: linear-gradient(180deg, var(--card2), var(--card));
}
.accItem{transition: border-color .18s ease, box-shadow .18s ease}
.accItem:hover{
  border-color: color-mix(in oklab, var(--accent2), var(--border) 72%);
  box-shadow: 0 18px 46px rgba(15,23,42,.08);
}
@media (prefers-color-scheme: dark){
  .accItem:hover{box-shadow: 0 18px 56px rgba(0,0,0,.36)}
}
.accBtn{
  width:100%;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  cursor:pointer;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  transition: background .18s ease;
}
.accBtn:hover{background: color-mix(in oklab, var(--accent2), transparent 96%)}
.accBtn__title{font-weight:900; letter-spacing:-.3px; font-size:15px}
.accBtn__meta{
  color:var(--muted2);
  font-size:12.5px;
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  background: var(--card2);
  white-space:nowrap;
  font-weight:800;
}
.accPanel{
  padding:0 14px 14px;
  color:var(--muted);
  line-height:1.85;
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
}
.accPanel p{margin:0}
.accItem.is-open .accPanel{
  opacity: 1;
  transform: translateY(0);
}
.accItem.is-open .accBtn__meta{
  border-color: color-mix(in oklab, var(--success), transparent 55%);
  background: color-mix(in oklab, var(--success), transparent 88%);
}
.accItem.is-hidden{display:none}

.accChevron{
  width:18px;
  height:18px;
  flex:0 0 auto;
  color: var(--muted2);
  transition: transform .18s ease;
  margin-left:auto;
}
.accItem.is-open .accChevron{transform: rotate(180deg)}

@media (prefers-reduced-motion: reduce){
  .btn, .card, .fCard, .accPanel, .accChevron{transition:none !important}
}

.footer{padding:28px 0 46px; border-top:1px solid var(--border); margin-top:24px}
.footer__inner{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}

.footer__grid{
  width:100%;
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap:16px;
  align-items:start;
}
@media (max-width: 860px){
  .footer__grid{grid-template-columns:1fr}
}
.footer__brand{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  line-height:1.6;
}
.footer__meta b{font-weight:950; color:var(--text)}
.footer__links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
@media (max-width: 860px){
  .footer__links{justify-content:flex-start}
}
.footerLink{
  text-decoration:none;
  font-weight:900;
  letter-spacing:-.25px;
  padding:9px 11px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--card2), transparent 0%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.footerLink:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent2), var(--border) 60%);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
}
@media (prefers-color-scheme: dark){
  .footerLink:hover{box-shadow: 0 14px 34px rgba(0,0,0,.38)}
}
.footer__keywords{
  margin-top:10px;
  color: color-mix(in oklab, var(--muted2), transparent 10%);
  line-height:1.7;
}
.footer__keywords b{font-weight:950}