/* ============================================================================
   LawPucho — theme.css  ·  v6  ·  full redesign + motion
   Modern neutral system with an indigo accent and a real motion layer.
   Loaded after /app.css and the Tailwind CDN, so !important wins over both.
   Motion respects prefers-reduced-motion at the bottom of the file.
   ========================================================================== */

:root{
  /* palette */
  --ink:#09090b; --ink-2:#18181b; --ink-soft:#52525b; --ink-mute:#71717a;
  --bg:#ffffff; --bg-2:#fafafa; --bg-3:#f4f4f5;
  --line:#e4e4e7; --line-2:#f1f1f3;
  --acc:#4f46e5; --acc-2:#6366f1; --acc-3:#8b5cf6; --acc-4:#06b6d4;
  --acc-soft:#eef2ff; --acc-line:#c7d2fe;
  --ok:#059669; --warn:#d97706;
  /* type */
  --head:'Inter Tight','Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
  /* geometry */
  --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  /* elevation */
  --e1:0 1px 2px rgba(9,9,11,.05),0 1px 3px rgba(9,9,11,.04);
  --e2:0 4px 12px -2px rgba(9,9,11,.08),0 2px 6px -2px rgba(9,9,11,.05);
  --e3:0 18px 40px -18px rgba(9,9,11,.22);
  --e4:0 30px 70px -30px rgba(49,46,129,.45);
  /* motion */
  --t-fast:.15s; --t:.25s; --t-slow:.5s;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* layout */
  --wrap:1200px; --hdr:64px;
}

/* ------------------------------------------------------------------ base -- */
html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%}
body{
  font-family:var(--body)!important; background:var(--bg)!important; color:var(--ink)!important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,.lp-serif{font-family:var(--head)!important; color:var(--ink); letter-spacing:-.022em; line-height:1.15}
h1{font-weight:700} h2{font-weight:650} h3{font-weight:600} h4,h5{font-weight:600}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
::selection{background:var(--acc); color:#fff}
:focus-visible{outline:2px solid var(--acc); outline-offset:2px; border-radius:4px}
body::-webkit-scrollbar{width:11px}
body::-webkit-scrollbar-track{background:var(--bg-2)}
body::-webkit-scrollbar-thumb{background:#d4d4d8; border-radius:8px; border:3px solid var(--bg-2)}
body::-webkit-scrollbar-thumb:hover{background:#a1a1aa}

.lp-wrap{max-width:var(--wrap); margin:0 auto; padding-left:20px; padding-right:20px}
@media(min-width:1024px){.lp-wrap{padding-left:32px; padding-right:32px}}

/* ------------------------------------------------------- announcement ---- */
.lp-topbar{
  background:linear-gradient(90deg,#09090b 0%,#1e1b4b 50%,#09090b 100%);
  background-size:200% 100%; color:#a1a1aa; font-size:12.5px;
  border-bottom:1px solid #27272a; overflow:hidden;
  animation:lpPan 14s var(--ease) infinite;
}
.lp-topbar .lp-wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:36px}
.lp-topbar b{color:#fff; font-weight:600}
.lp-topbar .lp-gold{color:#a5b4fc}
.lp-topbar a{color:#a1a1aa; transition:color var(--t-fast)}
.lp-topbar a:hover{color:#fff}
.lp-tb-items{display:flex; align-items:center; gap:22px}
.lp-tb-dot{width:6px; height:6px; border-radius:50%; background:#22c55e; display:inline-block; position:relative}
.lp-tb-dot::after{content:""; position:absolute; inset:-4px; border-radius:50%; background:rgba(34,197,94,.35); animation:lpPing 2s var(--ease) infinite}

/* ------------------------------------------------------------- header ---- */
.lp-hdr{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), box-shadow var(--t), background var(--t), height var(--t);
}
.lp-hdr.is-stuck{border-bottom-color:var(--line); box-shadow:0 1px 2px rgba(9,9,11,.06); background:rgba(255,255,255,.95)}
.lp-hdr-in{display:flex; align-items:center; gap:14px; height:var(--hdr); transition:height var(--t)}
.lp-hdr.is-stuck .lp-hdr-in{height:58px}
.lp-brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; transition:transform var(--t) var(--ease-out)}
.lp-brand:hover{transform:translateY(-1px)}
.lp-mark{
  height:34px; width:34px; border-radius:10px; display:grid; place-items:center;
  background:linear-gradient(140deg,#18181b,#09090b); color:#fff; font-size:14px;
  box-shadow:var(--e1); position:relative; overflow:hidden; flex:0 0 auto;
}
.lp-mark i{position:relative; z-index:1}
.lp-mark::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(99,102,241,.75) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .6s var(--ease-out);
}
.lp-brand:hover .lp-mark::after{transform:translateX(120%)}
.lp-wordmark{font-family:var(--head); font-size:19px; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ink)}
.lp-wordmark em{font-style:normal; color:var(--acc)}
.lp-brand-sub{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-mute); font-weight:600; margin-top:3px}

.lp-nav{display:flex; align-items:center; gap:2px; margin-left:6px}
.lp-navlink{
  position:relative; color:var(--ink-soft)!important; font-size:14px; font-weight:500;
  padding:8px 12px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:6px;
  transition:color var(--t-fast), background var(--t-fast);
}
.lp-navlink::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px; border-radius:2px;
  background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--ease-out);
}
.lp-navlink:hover{color:var(--ink)!important; background:var(--bg-2)}
.lp-navlink:hover::after{transform:scaleX(1)}
.lp-navlink .lp-caret{font-size:9px; transition:transform var(--t) var(--ease-out); color:var(--ink-mute)}
.lp-navitem{position:relative}
.lp-navitem:hover .lp-caret{transform:rotate(180deg)}
.lp-navitem:hover .lp-navlink{color:var(--ink)!important; background:var(--bg-2)}
.lp-navitem:hover .lp-navlink::after{transform:scaleX(1)}

/* mega menu */
.lp-mega{
  position:absolute; top:calc(100% + 10px); left:0; z-index:95;
  min-width:640px; padding:18px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--e3);
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985); transform-origin:top left;
  transition:opacity var(--t) var(--ease-out), transform var(--t) var(--ease-out), visibility var(--t);
}
.lp-navitem:hover .lp-mega,.lp-navitem:focus-within .lp-mega{opacity:1; visibility:visible; transform:translateY(0) scale(1)}
.lp-mega-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 18px}
.lp-mega-col h4{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-mute); margin:6px 10px 8px}
.lp-mega a{
  display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm);
  font-size:13.5px; color:var(--ink-soft); font-weight:500;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.lp-mega a:hover{background:var(--acc-soft); color:var(--acc); transform:translateX(3px)}
.lp-mega a i{width:15px; text-align:center; color:var(--ink-mute); transition:color var(--t-fast)}
.lp-mega a:hover i{color:var(--acc)}
.lp-mega-foot{margin-top:14px; padding-top:14px; border-top:1px solid var(--line-2); display:flex; flex-wrap:wrap; gap:8px}
.lp-mega-foot a{background:var(--bg-2); border-radius:var(--r-full); padding:5px 12px; font-size:12.5px}
.lp-mega-foot a:hover{transform:none}

/* search */
.lp-searchbox{flex:1 1 auto; max-width:460px; margin:0 8px; position:relative}
.lp-searchbox input{
  width:100%; height:40px; padding:0 40px 0 38px; font-size:14px; font-family:var(--body);
  background:var(--bg-2)!important; border:1px solid var(--line)!important; border-radius:var(--r-full)!important;
  color:var(--ink)!important; transition:border-color var(--t), background var(--t), box-shadow var(--t), max-width var(--t);
}
.lp-searchbox input::placeholder{color:var(--ink-mute)!important}
.lp-searchbox input:focus{
  background:#fff!important; border-color:var(--acc)!important;
  box-shadow:0 0 0 4px rgba(79,70,229,.13)!important; outline:none
}
.lp-searchbox .lp-si{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ink-mute); font-size:13px; pointer-events:none}
.lp-searchbox .lp-sk{
  position:absolute; right:7px; top:50%; transform:translateY(-50%); font-size:10.5px; font-weight:600;
  color:var(--ink-mute); background:#fff; border:1px solid var(--line); border-radius:5px; padding:2px 6px; pointer-events:none
}
.lp-sdrop{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:96;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e3);
  max-height:70vh; overflow:auto; animation:lpFadeDown .18s var(--ease-out) both;
}
.lp-srow{display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13.5px; color:var(--ink-soft); cursor:pointer}
.lp-srow:hover,.lp-srow.is-active{background:var(--acc-soft); color:var(--acc)}
.lp-srow i{color:var(--ink-mute); width:14px; text-align:center}
.lp-srow.is-active i{color:var(--acc)}
.lp-slbl{padding:10px 14px 5px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute); font-weight:700}

/* buttons */
.lp-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body);
  font-weight:600; font-size:14px; padding:10px 18px; border-radius:var(--r-sm); border:1px solid transparent;
  cursor:pointer; transition:transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
  white-space:nowrap; min-height:42px;
}
.lp-btn:active{transform:translateY(1px)}
.lp-btn-primary,.lp-btn-gold{background:var(--acc); color:#fff!important; box-shadow:0 1px 2px rgba(9,9,11,.14)}
.lp-btn-primary:hover,.lp-btn-gold:hover{background:#4338ca; transform:translateY(-1px); box-shadow:0 6px 16px -6px rgba(79,70,229,.5)}
.lp-btn-ghost{background:#fff; color:var(--ink)!important; border-color:var(--line)}
.lp-btn-ghost:hover{background:var(--bg-2); border-color:#d4d4d8; transform:translateY(-1px)}
.lp-btn-dark{background:var(--ink); color:#fff!important}
.lp-btn-dark:hover{background:#27272a; transform:translateY(-1px)}
.lp-btn-lg{padding:13px 24px; font-size:15px; min-height:48px; border-radius:var(--r-md)}
.lp-btn-block{width:100%}
.lp-panel .lp-btn-ghost{background:rgba(255,255,255,.06); color:#fff!important; border-color:rgba(255,255,255,.22)}
.lp-panel .lp-btn-ghost:hover{background:rgba(255,255,255,.14)}

.lp-cta{display:inline-flex; align-items:center; gap:7px; background:var(--acc); color:#fff!important;
  font-weight:600; font-size:13.5px; padding:8px 14px; border-radius:var(--r-sm); flex:0 0 auto;
  transition:background var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
  box-shadow:0 1px 2px rgba(9,9,11,.12)}
.lp-cta:hover{background:#4338ca; transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(79,70,229,.6)}

.lp-burger{height:40px; width:40px; display:none; place-items:center; border-radius:var(--r-sm);
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink); cursor:pointer; flex:0 0 auto}
.lp-burger:hover{background:#ececee}
.lp-burger span{display:block; width:16px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform var(--t) var(--ease-out), opacity var(--t)}
.lp-burger span+span{margin-top:4px}
.lp-burger.is-open span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.lp-burger.is-open span:nth-child(2){opacity:0}
.lp-burger.is-open span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

/* mobile drawer */
.lp-drawer{
  position:fixed; inset:0; z-index:120; background:rgba(9,9,11,.42);
  opacity:0; visibility:hidden; transition:opacity var(--t) var(--ease), visibility var(--t);
  backdrop-filter:blur(2px)
}
.lp-drawer.is-open{opacity:1; visibility:visible}
.lp-drawer-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(88vw,380px); background:#fff;
  box-shadow:-24px 0 60px -30px rgba(9,9,11,.5); overflow-y:auto;
  transform:translateX(100%); transition:transform var(--t-slow) var(--ease-out);
  display:flex; flex-direction:column
}
.lp-drawer.is-open .lp-drawer-panel{transform:translateX(0)}
.lp-drawer.is-left .lp-drawer-panel{left:0; right:auto; width:min(94vw,560px); transform:translateX(-100%)}
.lp-drawer.is-left.is-open .lp-drawer-panel{transform:translateX(0)}
.lp-drawer-hd{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line-2)}
.lp-drawer-bd{padding:10px 12px 24px; flex:1}
.lp-drawer-bd a{padding:12px 12px; border-radius:var(--r-sm); color:var(--ink-soft); font-weight:500; font-size:14.5px; display:flex; align-items:center; gap:10px; transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out)}
.lp-drawer-bd a:hover{background:var(--bg-2); color:var(--ink); transform:translateX(3px)}
.lp-drawer-sec{padding:14px 12px 6px; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-mute); font-weight:700}
.lp-drawer-ft{padding:16px 18px; border-top:1px solid var(--line-2); display:grid; gap:9px}
body.lp-locked{overflow:hidden}

/* progress bar (question pages) */
.lp-prog{position:fixed; top:0; left:0; height:2.5px; width:0; z-index:130;
  background:linear-gradient(90deg,var(--acc),var(--acc-3),var(--acc-4)); transition:width .1s linear}

/* ---------------------------------------------------------- surfaces ---- */
.lp-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--e1);
  transition:transform var(--t) var(--ease-out), box-shadow var(--t), border-color var(--t)}
.lp-card-h:hover{transform:translateY(-3px); box-shadow:var(--e3); border-color:#d4d4d8}
.lp-panel{position:relative; background:#09090b; color:#fafafa; border:1px solid #27272a;
  border-radius:var(--r-xl); overflow:hidden}
.lp-panel::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 70% at 12% 0%,rgba(99,102,241,.28),transparent 62%)}
.lp-panel h1,.lp-panel h2,.lp-panel h3{color:#fff}
.lp-panel p{color:#a1a1aa}
.lp-chip{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600;
  padding:6px 12px; border-radius:var(--r-full); background:var(--bg-2); border:1px solid var(--line); color:var(--ink-soft)}
.lp-chip:hover{background:var(--acc-soft); border-color:var(--acc-line); color:var(--acc); transform:translateY(-1px)}
.lp-chip.is-on{background:var(--acc); border-color:var(--acc); color:#fff}
.lp-eyebrow{font-family:var(--body); font-size:11.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--acc); display:inline-flex; align-items:center; gap:7px}
.lp-panel .lp-eyebrow{color:#a5b4fc}
.lp-em{font-style:normal; color:var(--acc)}
.lp-panel .lp-em{color:#a5b4fc}
.lp-sec-title{position:relative; padding-bottom:14px}
.lp-sec-title h2,.lp-sec-title h3{font-size:clamp(22px,2.6vw,34px)}
.lp-sec-title::after{content:""; position:absolute; left:0; bottom:0; width:44px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--acc),var(--acc-4))}
.lp-sec-title.center{text-align:center}
.lp-sec-title.center::after{left:50%; transform:translateX(-50%)}

/* --------------------------------------------------------------- hero ---- */
.lp-hero{position:relative; overflow:hidden; background:#09090b; color:#fff; isolation:isolate}
.lp-hero::after{content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 78%)}
.lp-blob{position:absolute; border-radius:50%; filter:blur(72px); z-index:-1; pointer-events:none; will-change:transform}
.lp-blob-a{width:520px; height:520px; top:-180px; left:-120px; background:rgba(79,70,229,.42); animation:lpFloat 18s var(--ease) infinite}
.lp-blob-b{width:440px; height:440px; bottom:-200px; right:-80px; background:rgba(6,182,212,.26); animation:lpFloat 22s var(--ease) infinite reverse}
.lp-blob-c{width:320px; height:320px; top:22%; right:26%; background:rgba(139,92,246,.22); animation:lpDrift 26s var(--ease) infinite}
.lp-hero-in{position:relative; z-index:2; padding:76px 0 84px}
@media(min-width:1024px){.lp-hero-in{padding:96px 0 104px}}
.lp-hero h1{color:#fff; font-size:clamp(32px,5.2vw,60px); font-weight:700; letter-spacing:-.03em; line-height:1.06}
.lp-hero p.lp-sub{color:#a1a1aa; font-size:clamp(15px,1.7vw,18.5px); max-width:60ch; margin-top:20px}
.lp-grad-text{background:linear-gradient(100deg,#a5b4fc,#67e8f9 45%,#c4b5fd); -webkit-background-clip:text;
  background-clip:text; color:transparent; background-size:200% 100%; animation:lpPan 8s var(--ease) infinite}
.lp-hero-search{position:relative; display:flex; gap:8px; margin-top:30px; max-width:660px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); padding:8px; border-radius:var(--r-lg);
  backdrop-filter:blur(10px)}
.lp-hero-search input{flex:1; height:48px; background:transparent!important; border:0!important; color:#fff!important;
  padding:0 16px; font-size:15.5px; font-family:var(--body)}
.lp-hero-search input::placeholder{color:#71717a!important}
.lp-hero-search input:focus{outline:none!important; box-shadow:none!important}
.lp-hero-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; align-items:center}
.lp-hero-tags .lp-tag{font-size:12.5px; color:#d4d4d8; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13); border-radius:var(--r-full); padding:6px 13px;
  transition:background var(--t-fast), transform var(--t-fast) var(--ease-out), color var(--t-fast)}
.lp-hero-tags .lp-tag:hover{background:rgba(255,255,255,.16); color:#fff; transform:translateY(-2px)}
.lp-hero-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:44px;
  border-top:1px solid rgba(255,255,255,.1); padding-top:26px}
@media(min-width:768px){.lp-hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-stat b{display:block; font-family:var(--head); font-size:clamp(24px,3vw,34px); font-weight:700; color:#fff; letter-spacing:-.03em}
.lp-stat span{display:block; font-size:12.5px; color:#71717a; margin-top:5px; letter-spacing:.02em}

/* ----------------------------------------------------------- sections ---- */
.lp-sec{padding:64px 0}
@media(min-width:1024px){.lp-sec{padding:86px 0}}
.lp-sec-alt{background:var(--bg-2); border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2)}
.lp-grid{display:grid; gap:18px}
.lp-g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.lp-g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.lp-g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* category / city cards */
.lp-cat{position:relative; display:block; padding:20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform var(--t) var(--ease-out), box-shadow var(--t), border-color var(--t)}
.lp-cat::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc);
  transform:scaleY(0); transform-origin:top; transition:transform var(--t) var(--ease-out)}
.lp-cat:hover{transform:translateY(-4px); box-shadow:var(--e3); border-color:var(--acc-line)}
.lp-cat:hover::before{transform:scaleY(1)}
.lp-cat-ic{width:42px; height:42px; border-radius:var(--r-md); display:grid; place-items:center;
  background:var(--acc-soft); color:var(--acc); font-size:16px; margin-bottom:13px;
  transition:transform var(--t) var(--ease-out), background var(--t)}
.lp-cat:hover .lp-cat-ic{transform:scale(1.08) rotate(-4deg); background:var(--acc); color:#fff}
.lp-cat h3{font-size:16px; margin-bottom:6px}
.lp-cat p{font-size:13px; color:var(--ink-mute); line-height:1.5}
.lp-cat .lp-cat-n{margin-top:12px; font-size:12px; color:var(--acc); font-weight:600; display:inline-flex; align-items:center; gap:6px}
.lp-cat .lp-cat-n i{transition:transform var(--t) var(--ease-out)}
.lp-cat:hover .lp-cat-n i{transform:translateX(4px)}

/* question rows */
.lp-qrow{display:block; padding:17px 20px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); transition:transform var(--t) var(--ease-out), box-shadow var(--t), border-color var(--t), background var(--t)}
.lp-qrow+.lp-qrow{margin-top:10px}
.lp-qrow:hover{transform:translateX(4px); border-color:var(--acc-line); box-shadow:var(--e2); background:#fff}
.lp-qrow h3{font-size:15.5px; font-weight:600; margin-bottom:7px; transition:color var(--t-fast)}
.lp-qrow:hover h3{color:var(--acc)}
.lp-qrow .lp-qmeta{display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:12.5px; color:var(--ink-mute)}
.lp-qrow .lp-qmeta i{font-size:11px; margin-right:5px; color:var(--acc)}

/* steps */
.lp-step{position:relative; padding:22px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform var(--t) var(--ease-out), box-shadow var(--t)}
.lp-step:hover{transform:translateY(-4px); box-shadow:var(--e3)}
.lp-step-n{width:34px; height:34px; border-radius:var(--r-full); display:grid; place-items:center;
  background:var(--ink); color:#fff; font-weight:700; font-size:14px; font-family:var(--head); margin-bottom:14px}
.lp-step h3{font-size:16px; margin-bottom:7px}
.lp-step p{font-size:13.5px; color:var(--ink-mute); line-height:1.6}

/* CTA band */
.lp-band{position:relative; overflow:hidden; background:#09090b; color:#fff; border-radius:var(--r-xl); padding:48px 32px; text-align:center}
.lp-band::before{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 120% at 50% 0%,rgba(99,102,241,.35),transparent 65%)}
.lp-band h2{color:#fff; font-size:clamp(22px,3vw,34px); position:relative}
.lp-band p{color:#a1a1aa; position:relative; margin-top:12px}
.lp-band .lp-band-btns{position:relative; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px}

/* -------------------------------------------------------------- footer ---- */
.lp-footer{background:#09090b; color:#a1a1aa; border-top:1px solid #27272a; position:relative; overflow:hidden}
.lp-footer::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 80% at 8% 0%,rgba(79,70,229,.18),transparent 60%)}
.lp-footer .lp-wrap{position:relative}
.lp-footer h2,.lp-footer h3,.lp-footer h4{color:#fff}
.lp-footer a{color:#a1a1aa!important; transition:color var(--t-fast), transform var(--t-fast) var(--ease-out)}
.lp-footer a:hover{color:#fff!important; transform:translateX(3px)}
.lp-footer .lp-mark{background:#27272a}
.lp-footer .lp-wordmark{color:#fff}
.lp-fcols{display:grid; gap:34px; padding:60px 0 34px}
@media(min-width:768px){.lp-fcols{grid-template-columns:1.6fr 1fr 1fr 1.1fr}}
.lp-fbot{border-top:1px solid #27272a; padding:22px 0; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:12.5px}
.lp-fsoc{display:flex; gap:9px}
.lp-fsoc a{width:36px; height:36px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:#18181b; border:1px solid #27272a; color:#a1a1aa!important;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out)}
.lp-fsoc a:hover{background:var(--acc); color:#fff!important; transform:translateY(-3px)}
.lp-flink{display:block; padding:5px 0; font-size:13.5px}
.lp-totop{position:fixed; right:20px; bottom:20px; z-index:100; width:44px; height:44px; border-radius:var(--r-full);
  display:grid; place-items:center; background:var(--ink); color:#fff; border:0; cursor:pointer;
  box-shadow:var(--e3); opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity var(--t), visibility var(--t), transform var(--t) var(--ease-out), background var(--t-fast)}
.lp-totop.is-on{opacity:1; visibility:visible; transform:translateY(0)}
.lp-totop:hover{background:var(--acc); transform:translateY(-3px)}

/* ======================= interior content (question / category) ========== */
.bg-white.rounded-2xl,.bg-white.rounded-xl{border-color:var(--line)!important; border-radius:var(--r-lg)!important; box-shadow:var(--e1)!important}
[class~="bg-[#0F172A]/5"]{background:var(--bg-2)!important; border-left:3px solid var(--acc)!important; border-radius:var(--r-lg)!important}
h2[class*="uppercase"],h3[class*="uppercase"],h4[class*="uppercase"]{font-family:var(--body)!important; letter-spacing:.08em; font-weight:700}
.prose{max-width:74ch}
.prose h2{margin-top:1.7em; letter-spacing:-.02em; scroll-margin-top:96px}
.prose h3{margin-top:1.3em}
.prose p,.prose li{line-height:1.78; color:var(--ink-soft)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.42em 0}
.prose blockquote{border-left:3px solid var(--acc); background:var(--bg-2); padding:.85em 1.15em; border-radius:0 var(--r-md) var(--r-md) 0; color:var(--ink-soft)}
.prose table{font-size:.92em; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; width:100%}
.prose th{background:var(--bg-2); color:var(--ink); text-align:left; font-weight:600}
.prose td,.prose th{border-color:var(--line)!important; padding:.55em .75em}
.prose code{background:var(--bg-3); border:1px solid var(--line); border-radius:5px; padding:.1em .35em; font-size:.9em}
.prose hr{border:0; border-top:1px solid var(--line)}
.prose a{color:var(--acc); text-decoration:underline; text-decoration-color:var(--acc-line); text-underline-offset:2px}
.prose a:hover{color:#4338ca; text-decoration-color:var(--acc)}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--acc)!important; box-shadow:0 0 0 4px rgba(79,70,229,.14)!important}
::placeholder{color:var(--ink-mute)}
[itemtype*="BreadcrumbList"]{font-size:12.5px; color:var(--ink-mute)}
.lp-toc a{display:block; padding:6px 11px; font-size:13px; color:var(--ink-soft); border-left:2px solid var(--line);
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast), padding var(--t-fast)}
.lp-toc a:hover{color:var(--acc); border-left-color:var(--acc); background:var(--acc-soft); padding-left:14px}
.lp-toc a.is-on{color:var(--acc); border-left-color:var(--acc); font-weight:600}

/* ------------------------------------------------------------- reveal ---- */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
[data-reveal].is-in{opacity:1; transform:none}
[data-reveal="left"]{transform:translateX(-26px)}
[data-reveal="right"]{transform:translateX(26px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="left"].is-in,[data-reveal="right"].is-in,[data-reveal="scale"].is-in{transform:none}
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s}
.d4{transition-delay:.24s} .d5{transition-delay:.30s} .d6{transition-delay:.36s}

/* ------------------------------------------------------------ keyframes -- */
@keyframes lpFadeDown{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
@keyframes lpFadeUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}
@keyframes lpFade{from{opacity:0} to{opacity:1}}
@keyframes lpPan{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
@keyframes lpFloat{0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(38px,26px) scale(1.08)}}
@keyframes lpDrift{0%,100%{transform:translate(0,0)} 33%{transform:translate(-30px,22px)} 66%{transform:translate(24px,-18px)}}
@keyframes lpPing{0%{transform:scale(.7); opacity:.8} 70%,100%{transform:scale(1.9); opacity:0}}
@keyframes lpShimmer{0%{background-position:-160% 0} 100%{background-position:260% 0}}
.lp-in{animation:lpFadeUp .6s var(--ease-out) both}
.lp-in-1{animation-delay:.08s} .lp-in-2{animation-delay:.16s} .lp-in-3{animation-delay:.24s}
.lp-in-4{animation-delay:.32s} .lp-in-5{animation-delay:.40s}

/* ---------------------------------------------------------- responsive -- */
@media(max-width:1023px){
  .lp-nav,.lp-searchbox{display:none}
  .lp-burger{display:grid}
  .lp-hero-in{padding:56px 0 62px}
  .lp-hero-search{flex-direction:column; padding:10px}
  .lp-hero-search input{height:44px; padding:0 14px}
}
@media(max-width:640px){
  .lp-wordmark{font-size:17px}
  .lp-brand-sub{display:none}
  .lp-tb-items span:nth-child(n+3){display:none}
  .lp-sec{padding:48px 0}
  .lp-footer .lp-wrap,.lp-wrap{padding-left:16px; padding-right:16px}
}

/* ------------------------------------------------------------- a11y ----- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important; transform:none!important}
}

/* ==========================================================================
   OLD-PALETTE REMAP
   The interior templates (question / category / city / search / faq / 404)
   still carry midnight-navy and antique-brass utility classes. Exact-token
   (~=) matching rewrites them to the new ink + indigo system without touching
   the markup. Substring (*=) is used only where every variant means the same
   thing (the amber tints).
   ========================================================================== */
[class~="bg-[#0F172A]"]{background-color:var(--ink)!important}
[class~="text-[#0F172A]"]{color:var(--ink)!important}
[class~="border-[#0F172A]"]{border-color:var(--ink)!important}
[class~="from-[#0F172A]"]{--tw-gradient-from:var(--ink) var(--tw-gradient-from-position,0%)!important;
  background-image:linear-gradient(160deg,#18181b,#09090b)!important}
[class~="to-[#1E293B]"],[class~="to-[#1e293b]"]{--tw-gradient-to:#18181b var(--tw-gradient-to-position,100%)!important}
[class~="via-[#0F172A]"]{--tw-gradient-via:#18181b!important}

[class~="bg-[#F59E0B]"]{background-color:var(--acc)!important}
[class~="text-[#F59E0B]"]{color:var(--acc)!important}
[class~="border-[#F59E0B]"]{border-color:var(--acc)!important}
[class*="bg-[#F59E0B]/"]{background-color:rgba(79,70,229,.12)!important}
[class*="border-[#F59E0B]/"]{border-color:rgba(79,70,229,.3)!important}
[class~="ring-[#F59E0B]"]{--tw-ring-color:var(--acc)!important}

[class~="hover:bg-[#F59E0B]"]:hover{background-color:var(--acc)!important; color:#fff!important}
[class~="hover:bg-[#F59E0B]/5"]:hover{background-color:rgba(79,70,229,.06)!important}
[class~="hover:bg-[#F59E0B]/10"]:hover{background-color:rgba(79,70,229,.12)!important}
[class~="hover:bg-[#F59E0B]/20"]:hover{background-color:rgba(79,70,229,.2)!important}
[class~="hover:text-[#F59E0B]"]:hover{color:var(--acc)!important}
[class~="hover:text-[#0F172A]"]:hover{color:var(--ink)!important}
[class~="hover:border-[#F59E0B]"]:hover{border-color:var(--acc)!important}
[class~="hover:border-[#F59E0B]/20"]:hover{border-color:rgba(79,70,229,.35)!important}
[class~="hover:bg-[#0F172A]"]:hover{background-color:var(--ink)!important; color:#fff!important}
[class~="focus:ring-[#F59E0B]"]:focus{--tw-ring-color:var(--acc)!important}
[class~="focus:border-[#F59E0B]"]:focus{border-color:var(--acc)!important}
[class~="focus:bg-white"]:focus{background-color:#fff!important}
.group:hover [class~="group-hover:text-[#F59E0B]"]{color:var(--acc)!important}
.group:hover [class~="group-hover:text-[#0F172A]"]{color:var(--ink)!important}

/* legacy helper classes carried by the interior templates */
.lp-gold{color:var(--acc)!important}
.gold-glow:focus{box-shadow:0 0 0 4px rgba(79,70,229,.14)!important; border-color:var(--acc)!important}
.search-dropdown{animation:lpFadeDown .16s var(--ease-out) both}
.animate-spin{animation:lpSpin 1s linear infinite!important}
@keyframes lpSpin{to{transform:rotate(360deg)}}
.animate-in{animation:lpFadeUp .42s var(--ease-out) both}
.line-clamp-1{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}

/* ==========================================================================
   EXTRA MOTION  (v7)
   ========================================================================== */

/* rotating hero word */
.lp-rot{display:inline-block; transition:opacity .28s var(--ease-out), transform .28s var(--ease-out)}
.lp-rot-out{opacity:0; transform:translateY(-9px)}

/* shine sweep across solid buttons */
.lp-btn-primary,.lp-btn-gold,.lp-cta{position:relative; overflow:hidden}
.lp-btn-primary::after,.lp-btn-gold::after{
  content:""; position:absolute; top:0; bottom:0; left:-45%; width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg); pointer-events:none;
  transition:left .6s var(--ease-out);
}
.lp-btn-primary:hover::after,.lp-btn-gold:hover::after{left:125%}

/* infinite marquee strip */
.lp-marquee{position:relative; overflow:hidden; background:#fff;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0}
.lp-marquee::before,.lp-marquee::after{content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none}
.lp-marquee::before{left:0; background:linear-gradient(90deg,#fff,transparent)}
.lp-marquee::after{right:0; background:linear-gradient(270deg,#fff,transparent)}
.lp-mq-track{display:flex; gap:10px; width:max-content; animation:lpMarquee 36s linear infinite; padding-left:10px}
.lp-marquee:hover .lp-mq-track{animation-play-state:paused}
.lp-mq-item{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:13px; font-weight:500; color:var(--ink-soft);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-full); padding:7px 14px}
.lp-mq-item i{color:var(--acc); font-size:11px}
@keyframes lpMarquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* smooth accordions */
details.lp-acc summary{list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:12px; transition:color var(--t-fast)}
details.lp-acc summary::-webkit-details-marker{display:none}
details.lp-acc summary::after{content:"+"; font-weight:600; color:var(--acc); font-size:18px; line-height:1;
  transition:transform .26s var(--ease-out)}
details.lp-acc[open] summary::after{transform:rotate(45deg)}
details.lp-acc:hover summary{color:var(--acc)}
details.lp-acc > div, details.lp-acc > p{overflow:hidden}

/* 3D tilt target */
.lp-cat,.lp-step{transform-style:preserve-3d; will-change:transform}

/* reveal variants used for column entrances */
[data-reveal="up-lg"]{transform:translateY(42px)}
[data-reveal="up-lg"].is-in{transform:none}

@media (prefers-reduced-motion: reduce){
  .lp-mq-track{animation:none; flex-wrap:wrap; width:auto}
  .lp-rot{transition:none}
}

/* ---------------------------------------------------------- v8 motion ---- */
/* Page-load cascade on the interior pages. They have no hero, so this is what
   gives a question / category / city page visible movement the moment it
   opens instead of only on scroll. Uses :has() so the homepage is excluded. */
@supports selector(:has(*)){
  main:not(:has(.lp-hero)) > div > *{
    animation:lpFadeUp .5s var(--ease-out) both;
  }
  main:not(:has(.lp-hero)) > div > .grid > *{
    animation:lpFadeUp .5s var(--ease-out) both;
  }
  main:not(:has(.lp-hero)) > div > .grid > *:nth-child(2){animation-delay:.08s}
  main:not(:has(.lp-hero)) > div > *:nth-child(2){animation-delay:.06s}
  main:not(:has(.lp-hero)) > div > *:nth-child(3){animation-delay:.12s}
}
@media (prefers-reduced-motion: reduce){
  main > div > *, main > div > .grid > *{animation:none!important}
}