/* ==========================================================================

Credit Wealth Avenue — midnight cobalt system

========================================================================== */

:root{

--bg:#EEF2F7; --bg-2:#DFE6EF; --card:#FFFFFF; --card-2:#F6F8FB;

--ink:#17202D; --ink-2:#465366; --mut:#778396; --line:#D5DDE7; --line-2:#C1CBD8;

--coral:#D9574F; --teal:#087E8B; --indigo:#4C4FE8; --butter:#D79B32;

--coral-soft:#F7DFDC; --teal-soft:#DDF1F2; --indigo-soft:#E3E3FC; --butter-soft:#F7EBD2;

--r-s:18px; --r-m:26px; --r-l:36px; --r-xl:48px; --r-p:999px;

--sh-1:0 3px 10px -4px rgba(23,32,45,.09), 0 20px 44px -26px rgba(23,32,45,.18);

--sh-2:0 32px 70px -34px rgba(23,32,45,.28);

--sh-c:0 24px 55px -28px rgba(217,87,79,.32);

--sh-t:0 24px 55px -28px rgba(8,126,139,.30);

--sh-i:0 24px 55px -28px rgba(76,79,232,.30);

--snap:cubic-bezier(.22,1,.36,1); --pop:cubic-bezier(.34,1.5,.64,1);

--maxw:1240px; --sec:132px; --gap:28px;

}

[data-theme="dark"]{

--bg:#090E17; --bg-2:#101827; --card:#151F30; --card-2:#1A2638;

--ink:#F1F5FA; --ink-2:#C7D1DE; --mut:#8C99AA; --line:#293647; --line-2:#37475A;

--coral:#F0796E; --teal:#45C2CF; --indigo:#8587FF; --butter:#E3B75B;

--coral-soft:#3C2425; --teal-soft:#153338; --indigo-soft:#27284B; --butter-soft:#382E1A;

--sh-1:0 3px 10px -4px rgba(0,0,0,.55), 0 22px 48px -28px rgba(0,0,0,.84);

--sh-2:0 34px 74px -36px rgba(0,0,0,.94);

--sh-c:0 24px 55px -28px rgba(240,121,110,.25);

--sh-t:0 24px 55px -28px rgba(69,194,207,.24);

--sh-i:0 24px 55px -28px rgba(133,135,255,.27);

}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{
margin:0;background:var(--bg);color:var(--ink);
font-family:'Outfit',system-ui,-apple-system,sans-serif;
font-size:17px;line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased;
transition:background-color .5s ease,color .5s ease;
}
h1,h2,h3,h4,h5{font-family:'Outfit',sans-serif;color:var(--ink);line-height:1.08;margin:0;font-weight:700;letter-spacing:-.028em}
h1{font-size:clamp(2.4rem,5.8vw,4.4rem);font-weight:800;letter-spacing:-.04em}
h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800}
h3{font-size:1.42rem}
h4{font-size:1.06rem;font-weight:700}
p{margin:0 0 1rem;color:var(--ink-2)}
a{text-decoration:none;color:inherit}
::selection{background:var(--coral);color:#fff}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%}
.sect{padding:var(--sec) 0;position:relative}
.sect-sm{padding:74px 0}
.mut{color:var(--mut)}
.lead{font-size:1.08rem;color:var(--mut);max-width:64ch}
.lb{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mut)}
.soft-c{color:var(--coral)}.soft-t{color:var(--teal)}.soft-i{color:var(--indigo)}
.gr{background:linear-gradient(100deg,var(--coral),var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent}
.gr2{background:linear-gradient(100deg,var(--teal),var(--indigo));-webkit-background-clip:text;background-clip:text;color:transparent}
.blob-bg{position:absolute;border-radius:50%;filter:blur(6px);z-index:0;pointer-events:none}
.drift{animation:drift 22s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(26px,-22px) scale(1.07)}}
.bob{animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* ============ pills & buttons ============ */
.pill{
display:inline-flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
border-radius:var(--r-p);padding:8px 15px;font-size:.82rem;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-1)
}
.pill .dot{width:9px;height:9px;border-radius:50%;background:var(--coral)}
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;font-family:inherit;
font-weight:700;font-size:.94rem;border-radius:var(--r-p);padding:14px 25px;background:var(--card);color:var(--ink);
box-shadow:var(--sh-1);transition:transform .4s var(--pop),box-shadow .4s var(--snap),background .3s,color .3s
}
.btn:hover{transform:translateY(-3px) scale(1.015);box-shadow:var(--sh-2);color:var(--ink)}
.btn-coral{background:linear-gradient(115deg,var(--coral),#FF7F63);color:#fff;box-shadow:var(--sh-c)}
.btn-coral:hover{color:#fff;box-shadow:0 30px 60px -26px rgba(255,90,118,.75)}
.btn-indigo{background:linear-gradient(115deg,var(--indigo),#7C7BF7);color:#fff;box-shadow:var(--sh-i)}
.btn-indigo:hover{color:#fff}
[data-theme="dark"] .btn-indigo{color:#0B1120}
.btn-teal{background:linear-gradient(115deg,var(--teal),#38CFB6);color:#fff;box-shadow:var(--sh-t)}
.btn-teal:hover{color:#fff}
[data-theme="dark"] .btn-teal{color:#0B1120}
.btn-sm{padding:9px 17px;font-size:.85rem}
.mini{
display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:.8rem;
border-radius:var(--r-p);padding:9px 15px;background:var(--coral-soft);color:var(--coral);transition:.35s var(--snap)
}
.mini:hover{background:var(--coral);color:#fff;gap:11px}
.mini.i2{background:var(--indigo-soft);color:var(--indigo)}
.mini.i2:hover{background:var(--indigo);color:#fff}
.mini.t2{background:var(--teal-soft);color:var(--teal)}
.mini.t2:hover{background:var(--teal);color:#fff}
[data-theme="dark"] .mini:hover,[data-theme="dark"] .mini.i2:hover,[data-theme="dark"] .mini.t2:hover{color:#0B1120}
.ulink{font-weight:700;font-size:.88rem;color:var(--ink);transition:.3s;border-bottom:2px solid var(--coral-soft)}
.ulink:hover{color:var(--coral);border-color:var(--coral)}
/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(20px) scale(.97);transition:opacity .7s var(--snap),transform .8s var(--pop);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.rv-l{transform:translateX(-24px) scale(.98)}.rv-r{transform:translateX(24px) scale(.98)}.rv-z{transform:scale(.93)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none} .drift,.bob{animation:none}}
svg.sd path,svg.sd circle,svg.sd line,svg.sd polyline,svg.sd rect{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 1.9s var(--snap)}
svg.sd.in path,svg.sd.in circle,svg.sd.in line,svg.sd.in polyline,svg.sd.in rect{stroke-dashoffset:0}
/* ============ curtain ============ */
#curtain{position:fixed;inset:0;z-index:7000;background:var(--bg);display:grid;place-items:center;transition:opacity .7s var(--snap),visibility .7s}
#curtain.done{opacity:0;visibility:hidden}
.cbub{width:80px;height:80px;border-radius:50%;background:linear-gradient(130deg,var(--coral),var(--indigo));margin:0 auto 18px;animation:bob 1.6s ease-in-out infinite;box-shadow:var(--sh-c)}
#curtain .n{font-weight:800;font-size:1.5rem;letter-spacing:-.03em}
/* ============ header ============ */
header.top{position:fixed;top:14px;left:0;right:0;z-index:900;display:flex;justify-content:center;padding:0 16px}
.navbar{
width:100%;max-width:var(--maxw);background:var(--card);border:1px solid var(--line);border-radius:var(--r-p);
box-shadow:var(--sh-1);padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;
transition:box-shadow .4s var(--snap),padding .4s var(--snap)
}
.navbar.stuck{box-shadow:var(--sh-2);padding:7px 14px}
.brand{display:flex;align-items:center;gap:11px}
.bm{width:40px;height:40px;border-radius:14px;background:linear-gradient(130deg,var(--coral),var(--indigo));display:grid;place-items:center;color:#fff;font-size:1.05rem;box-shadow:var(--sh-c)}
.bn{font-weight:800;font-size:1.12rem;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.bs{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--mut)}
.nv{display:flex;align-items:center;gap:2px;background:var(--card-2);border-radius:var(--r-p);padding:4px}
.nv a{padding:8px 14px;border-radius:var(--r-p);font-size:.88rem;font-weight:600;color:var(--mut);transition:.3s}
.nv a:hover{color:var(--ink)}
.nv a.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.tg{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-p);padding:7px 12px;font-family:inherit;font-weight:700;font-size:.8rem;cursor:pointer;transition:.35s var(--pop)}
.tg:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
.tg .tk{width:34px;height:20px;border-radius:var(--r-p);background:var(--line-2);position:relative;transition:.35s var(--snap)}
.tg .tk i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.35s var(--pop);display:grid;place-items:center;font-size:.5rem;color:#111A2E}
[data-theme="dark"] .tg .tk{background:var(--indigo)}
[data-theme="dark"] .tg .tk i{transform:translateX(14px)}
.bg2{width:44px;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
#prog{position:fixed;top:0;left:0;height:4px;width:0;z-index:950;background:linear-gradient(90deg,var(--coral),var(--butter),var(--teal),var(--indigo));border-radius:0 4px 4px 0}
.sheet{position:fixed;inset:0;z-index:1400;display:none}
.sheet.open{display:block}
.sheet .b{position:absolute;inset:0;background:rgba(17,26,46,.45);backdrop-filter:blur(6px)}
.sheet .p{position:absolute;left:14px;right:14px;top:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2);padding:22px;animation:shIn .45s var(--pop)}
@keyframes shIn{from{opacity:0;transform:translateY(-16px) scale(.97)}to{opacity:1;transform:none}}
.sheet a.sl{display:block;padding:13px 8px;border-radius:var(--r-s);font-weight:600;color:var(--ink)}
.sheet a.sl:hover{background:var(--card-2)}
/* ============ HERO ============ */
.hero{padding:118px 0 0;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
@media(max-width:1023px){.hero-grid{grid-template-columns:1fr;gap:34px}}
.hero h1{margin:18px 0 16px}
.quickrow{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.qbtn{
border:1px solid var(--line);background:var(--card);border-radius:var(--r-p);padding:10px 16px;font-family:inherit;
font-weight:600;font-size:.86rem;color:var(--ink-2);cursor:pointer;box-shadow:var(--sh-1);transition:.4s var(--pop)
}
.qbtn:hover{transform:translateY(-4px) scale(1.03);color:var(--ink);box-shadow:var(--sh-2)}
/* planner console */
.console{margin-top:30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-1)}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.seg{display:flex;gap:5px;background:var(--card-2);border-radius:var(--r-p);padding:5px;flex-wrap:wrap}
.seg button{border:0;background:transparent;font-family:inherit;font-weight:700;font-size:.83rem;color:var(--mut);padding:8px 14px;border-radius:var(--r-p);cursor:pointer;transition:.3s var(--snap)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}
.seg button.on[data-k="home"]{color:var(--coral)}.seg button.on[data-k="personal"]{color:var(--indigo)}
.seg button.on[data-k="business"]{color:var(--teal)}.seg button.on[data-k="auto"]{color:#C08A00}
.sld{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:var(--bg-2);outline:none}
.sld::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--card);border:6px solid var(--coral);cursor:pointer;box-shadow:0 4px 12px rgba(17,26,46,.18)}
.sld::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);border:6px solid var(--coral);cursor:pointer}
.sld.i::-webkit-slider-thumb{border-color:var(--indigo)} .sld.i::-moz-range-thumb{border-color:var(--indigo)}
.sld.t::-webkit-slider-thumb{border-color:var(--teal)} .sld.t::-moz-range-thumb{border-color:var(--teal)}
.srow{display:flex;justify-content:space-between;align-items:baseline;font-size:.86rem;font-weight:600;color:var(--mut);margin-bottom:8px}
.srow b{color:var(--ink);font-weight:800;font-size:1rem}
.readouts{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;margin-top:18px}
@media(max-width:600px){.readouts{grid-template-columns:1fr 1fr}}
.ro{background:var(--card-2);border-radius:var(--r-m);padding:14px 16px}
.ro .k{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.ro .v{font-weight:800;font-size:1.55rem;letter-spacing:-.03em;line-height:1.15}
.ro.big{background:linear-gradient(130deg,var(--coral),#FF8168);color:#fff;grid-column:span 1}
.ro.big .k{color:rgba(255,255,255,.85)} .ro.big .v{color:#fff}
@media(max-width:600px){.ro.big{grid-column:span 2}}
.partnerlist{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.pl{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card-2);border-radius:var(--r-p);padding:10px 16px;font-size:.86rem;font-weight:600;animation:plIn .4s var(--pop)}
@keyframes plIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.pl .r{font-weight:800;color:var(--ink)}
/* orbit wheel */
.orbitwrap{position:relative;aspect-ratio:1;max-width:470px;margin:0 auto;width:100%}
.orbitsvg{position:absolute;inset:0;width:100%;height:100%}
.wheel{position:absolute;inset:0;transition:transform .9s var(--snap)}
.node{
position:absolute;transform:translate(-50%,-50%) rotate(var(--rot,0deg));width:66px;height:66px;border-radius:50%;
border:1px solid var(--line);background:var(--card);display:grid;place-items:center;font-size:1.35rem;cursor:pointer;box-shadow:var(--sh-1);
transition:transform .5s var(--pop),box-shadow .4s,background .35s
}
.node:hover{transform:translate(-50%,-50%) scale(1.13) rotate(var(--rot,0deg));box-shadow:var(--sh-2)}
.node.on{background:var(--card);box-shadow:0 0 0 5px var(--coral-soft),var(--sh-c)}
.node span{position:absolute;bottom:-22px;font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.hub{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;
background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);display:grid;place-items:center;text-align:center;padding:14px
}
.hub .e{font-size:2rem;line-height:1}
.hub .t{font-weight:800;font-size:.92rem;letter-spacing:-.02em;margin-top:2px}
.hub .m{font-size:.7rem;color:var(--mut);font-weight:600}
.orbctrl{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-p);padding:6px;box-shadow:var(--sh-1)}
.orbctrl button{width:36px;height:36px;border-radius:50%;border:0;background:var(--card-2);color:var(--ink);cursor:pointer;font-size:.9rem;transition:.3s var(--pop)}
.orbctrl button:hover{background:var(--coral);color:#fff;transform:scale(1.08)}
.chipf{
position:absolute;background:var(--card);border:1px solid var(--line);border-radius:var(--r-p);padding:9px 14px;
font-size:.8rem;font-weight:700;box-shadow:var(--sh-1);display:flex;align-items:center;gap:8px;white-space:nowrap
}
/* ============ strip ============ */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--card-2);padding:16px 0;overflow:hidden}
.mq{display:flex;gap:40px;width:max-content;animation:mq 36s linear infinite}
.mq b{display:inline-flex;align-items:center;gap:9px;font-size:.83rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
/* ============ section head ============ */
.sh{margin-bottom:42px}
.sh .num{font-weight:800;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;color:var(--coral)}
.sh h2{margin:12px 0 12px}
.mark{background:linear-gradient(transparent 60%,var(--butter-soft) 60%);border-radius:6px;padding:0 .12em}
/* ============ WORKBENCH ============ */
.wb{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
@media(max-width:991px){.wb{grid-template-columns:1fr}}
.tabs{position:sticky;top:104px;display:flex;flex-direction:column;gap:10px}
@media(max-width:991px){.tabs{position:static;flex-direction:row;flex-wrap:wrap}}
.tab{
display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-p);
padding:11px 16px;cursor:pointer;font-family:inherit;font-weight:700;font-size:.9rem;color:var(--ink-2);
box-shadow:var(--sh-1);transition:.4s var(--pop);text-align:left
}
.tab:hover{transform:translateX(5px)}
@media(max-width:991px){.tab:hover{transform:translateY(-3px)}}
.tab .te{width:34px;height:34px;border-radius:12px;background:var(--card-2);display:grid;place-items:center;font-size:1rem;flex:0 0 auto;transition:.35s}
.tab.on{background:var(--ink);color:var(--bg);box-shadow:var(--sh-2)}
[data-theme="dark"] .tab.on{color:#0B1120;background:var(--ink)}
.tab.on .te{background:rgba(255,255,255,.16)}
.tab .cnt{margin-left:auto;font-size:.7rem;font-weight:700;opacity:.65}
.panel{display:none}
.panel.on{display:block;animation:pIn .55s var(--pop)}
@keyframes pIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;box-shadow:var(--sh-1)}
@media(max-width:767px){.pcard{padding:18px;border-radius:var(--r-l)}}
.phead{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:24px}
.phead h3{display:flex;align-items:center;gap:12px;font-size:1.6rem}
.phead .pe{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:1.4rem;background:var(--coral-soft)}
.svt{font-weight:700;font-size:1.03rem;color:var(--ink);margin:0 0 6px;letter-spacing:-.015em}
.svd{font-size:.885rem;color:var(--mut);line-height:1.62;margin:0}
/* 1 · loans — pebble grid (unequal) */
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.pg{position:relative;overflow:hidden;border-radius:var(--r-l);padding:24px;background:var(--card-2);border:1px solid var(--line);transition:transform .5s var(--pop),box-shadow .5s var(--snap)}
.pg:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:var(--sh-2)}
.pg .pb{position:absolute;right:-46px;top:-46px;width:134px;height:134px;border-radius:50%;opacity:.8;transition:transform .6s var(--pop)}
.pg:hover .pb{transform:scale(1.18)}
.pg .em{position:relative;width:52px;height:52px;border-radius:18px;background:var(--card);display:grid;place-items:center;font-size:1.4rem;box-shadow:var(--sh-1)}
@media(max-width:991px){.pgrid{grid-template-columns:repeat(6,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:1fr}}
@media(max-width:991px){.pgrid > *{grid-column:span 6 !important}}
@media(max-width:640px){.pgrid > *{grid-column:1 / -1 !important}}
/* 2 · insurance — hanging canopy */
.canopy{position:relative;padding-top:10px}
.dome{display:block;margin:0 auto 6px;max-width:640px;width:100%}
.hang{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.hang{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.hang{grid-template-columns:1fr}}
.hcol{display:flex;flex-direction:column;align-items:center}
.hcol:nth-child(2){margin-top:34px}.hcol:nth-child(3){margin-top:16px}
.hcol:nth-child(5){margin-top:26px}.hcol:nth-child(6){margin-top:44px}
.hcol:nth-child(8){margin-top:20px}.hcol:nth-child(9){margin-top:38px}
.str{width:2px;background:var(--line-2);border-radius:2px}
.htag{width:100%;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;transition:transform .5s var(--pop),box-shadow .4s}
.hcol:hover .htag{transform:translateY(6px) rotate(1deg);box-shadow:var(--sh-2)}
.htag .he{width:44px;height:44px;border-radius:14px;background:var(--card);display:grid;place-items:center;font-size:1.15rem;box-shadow:var(--sh-1);margin-bottom:12px}
/* 3 · investments — vault doors */
.vrow{display:grid;grid-template-columns:220px 1fr;gap:30px;align-items:center;padding:26px 0;border-top:1px solid var(--line)}
.vrow:first-child{border-top:0;padding-top:4px}
.vrow:last-child{padding-bottom:4px}
@media(max-width:860px){.vrow{grid-template-columns:1fr;gap:18px}}
.vault{width:220px;height:220px;position:relative;margin:0 auto}
.vault svg{width:100%;height:100%;overflow:visible}
.vring{transform-origin:110px 110px;animation:spin 34s linear infinite}
.vring.r2{animation-duration:22s;animation-direction:reverse}
.vrow:hover .vring{animation-duration:7s}
@keyframes spin{to{transform:rotate(360deg)}}
/* 4 · wealth — S-curve road */
.road{position:relative}
.roadsvg{position:absolute;left:50%;transform:translateX(-50%);top:0;width:520px;max-width:100%;height:100%;pointer-events:none}
.stops{display:flex;flex-direction:column;gap:26px;position:relative}
.stop{display:grid;grid-template-columns:1fr 76px 1fr;gap:20px;align-items:center}
.stop .sbox{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;transition:.5s var(--pop)}
.stop:hover .sbox{transform:scale(1.02);box-shadow:var(--sh-2)}
@media(max-width:860px){
.stop{grid-template-columns:56px 1fr;gap:14px}
.stop .sbox{grid-column:2/3}
.stop > div:empty{display:none}
.stop .coin{grid-column:1/2;grid-row:1/2}
}
.coin{width:76px;height:76px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:1.2rem;box-shadow:var(--sh-1);z-index:2}
.stop.right .sbox{order:3}.stop.right .coin{order:2}
@media(max-width:860px){.stop.right .sbox{order:2}.stop.right .coin{order:1}}
/* 5 · payments — receipt + terminal */
.pay{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
@media(max-width:900px){.pay{grid-template-columns:1fr}}
.roll{position:relative}
.rollhead{height:34px;border-radius:var(--r-p);background:linear-gradient(180deg,var(--card-2),var(--line));border:1px solid var(--line);margin:0 18px}
.receipt{background:var(--card-2);border-radius:var(--r-m);border:1px solid var(--line);padding:24px;margin-top:-6px;box-shadow:var(--sh-1);position:relative;overflow:hidden}
.receipt::before,.receipt::after{content:'';position:absolute;left:0;right:0;height:12px;background:radial-gradient(circle at 6px 6px,var(--bg) 6px,transparent 6px);background-size:14px 14px}
.receipt::before{top:-1px}.receipt::after{bottom:-1px}
.rline{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line-2)}
.rline:last-child{border-bottom:0}
.rline .re{width:40px;height:40px;border-radius:13px;background:var(--card);display:grid;place-items:center;font-size:1.05rem;box-shadow:var(--sh-1)}
.term{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;box-shadow:var(--sh-1)}
.term .screen{background:var(--ink);border-radius:var(--r-m);padding:16px;color:#EAF0FA;text-align:center}
[data-theme="dark"] .term .screen{background:#050A15}
.term .screen .amt{font-weight:800;font-size:1.9rem;letter-spacing:-.03em;line-height:1.1;transition:.3s}
.term .screen .st{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.7;font-weight:700}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.keypad button{border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);padding:13px 0;font-family:inherit;font-weight:700;font-size:1rem;color:var(--ink);cursor:pointer;transition:.25s var(--pop)}
.keypad button:hover{background:var(--indigo-soft);transform:translateY(-2px)}
.tapring{width:96px;height:96px;border-radius:50%;margin:14px auto 0;border:2px dashed var(--line-2);display:grid;place-items:center;font-size:1.6rem;position:relative}
.tapring.on{animation:ping 1.1s ease-out infinite;border-color:var(--teal)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(15,181,165,.4)}100%{box-shadow:0 0 0 26px rgba(15,181,165,0)}}
/* 6 · debt — arc gauges */
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.gauges{grid-template-columns:1fr}}
.gauge{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px;text-align:center;transition:.5s var(--pop)}
.gauge:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.gauge svg{width:100%;max-width:220px;height:auto;margin:0 auto}
.gauge .needle{transform-origin:110px 110px;transition:transform .9s var(--snap)}
.cap{margin-top:22px;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px}
.caprow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.capout{font-weight:800;font-size:1.9rem;letter-spacing:-.03em}
/* 7 · home — isometric */
.iso{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:center}
@media(max-width:991px){.iso{grid-template-columns:1fr}}
.isosvg{width:100%;height:auto}
.zonepoly{transition:opacity .5s var(--snap),transform .6s var(--pop);transform-origin:center;cursor:pointer}
.zonepoly.on{opacity:1}
.zcard{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;margin-bottom:12px;cursor:pointer;transition:.45s var(--pop)}
.zcard:hover{transform:translateX(5px)}
.zcard.on{background:var(--card);box-shadow:var(--sh-2);border-color:transparent}
/* 8 · auto — garage bays */
.bays{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.bays{grid-template-columns:1fr}}
.bay{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;transition:.5s var(--pop)}
.bay:hover{transform:translateY(-8px);box-shadow:var(--sh-2)}
.shutter{height:46px;background:repeating-linear-gradient(45deg,var(--line-2) 0 6px,transparent 6px 14px);border-bottom:1px solid var(--line);position:relative;transition:height .6s var(--snap)}
.bay:hover .shutter{height:64px}
.bay.open .shutter{height:18px}
.bayin{padding:22px}
.bay .be{width:52px;height:52px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:1.3rem;box-shadow:var(--sh-1);margin-bottom:12px}
/* ============ BENEFITS — skyline pillars ============ */
.sky{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:end;min-height:470px}
@media(max-width:1100px){.sky{grid-template-columns:repeat(3,1fr);min-height:auto}}
@media(max-width:640px){.sky{grid-template-columns:1fr 1fr}}
.pillar{
background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;box-shadow:var(--sh-1);
display:flex;flex-direction:column;justify-content:flex-end;transition:transform .55s var(--pop),box-shadow .45s;position:relative;overflow:hidden
}
.pillar:hover{transform:translateY(-14px)}
.pillar .pe2{font-size:1.8rem;line-height:1}
.h1p{min-height:230px}.h2p{min-height:300px}.h3p{min-height:265px}.h4p{min-height:340px}.h5p{min-height:285px}.h6p{min-height:315px}
@media(max-width:1100px){.h1p,.h2p,.h3p,.h4p,.h5p,.h6p{min-height:auto}}
.pillar .cap2{position:relative}
.pillar::after{content:'';position:absolute;inset:auto -20px -40px -20px;height:110px;border-radius:50%;opacity:.55}
/* ============ PROCESS — dotted path stations ============ */
.procwrap{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px 26px 26px;box-shadow:var(--sh-1)}
.procpath{width:100%;height:130px;display:block}
.stations{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.stations{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.stations{grid-template-columns:1fr}}
.station{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;transition:.5s var(--pop);opacity:.62}
.station.on{opacity:1;transform:translateY(-6px);box-shadow:var(--sh-2);background:var(--card)}
.station .sn{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-weight:800;box-shadow:var(--sh-1);margin-bottom:12px}
.station.on .sn{background:linear-gradient(130deg,var(--coral),var(--indigo));color:#fff}
/* ============ ABOUT ============ */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
@media(max-width:991px){.about{grid-template-columns:1fr}}
.bigcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:34px;box-shadow:var(--sh-1)}
.stmt{font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:700;letter-spacing:-.025em;line-height:1.35;color:var(--ink)}
.vals{display:flex;flex-direction:column;gap:14px}
.val{display:grid;grid-template-columns:56px 1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;box-shadow:var(--sh-1);transition:.5s var(--pop)}
.val:hover{transform:translateX(6px)}
.val .ve{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:1.3rem}
/* ============ TESTIMONIALS — floating pebbles ============ */
.floatwall{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.floatwall{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.floatwall{grid-template-columns:1fr}}
.tp{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;box-shadow:var(--sh-1);position:relative}
.tp:nth-child(1){transform:rotate(-1.1deg)}.tp:nth-child(2){transform:rotate(.9deg);margin-top:26px}
.tp:nth-child(3){transform:rotate(-.5deg)}.tp:nth-child(4){transform:rotate(1.2deg);margin-top:18px}
.tp:nth-child(5){transform:rotate(-.8deg)}.tp:nth-child(6){transform:rotate(.6deg);margin-top:24px}
.tp:hover{animation:bob 3.4s ease-in-out infinite;z-index:4}
.tp .stars{color:var(--butter);letter-spacing:2px;font-size:.86rem}
.avc{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;background:var(--card-2);box-shadow:var(--sh-1)}
.bigquote{background:linear-gradient(130deg,var(--indigo),#7A6BF5);color:#fff;border-radius:var(--r-xl);padding:34px;box-shadow:var(--sh-i);position:relative;overflow:hidden}
.bigquote h3,.bigquote p{color:#fff}
[data-theme="dark"] .bigquote h3,[data-theme="dark"] .bigquote p{color:#0B1120}
.bigquote .qm{position:absolute;right:22px;top:2px;font-size:6rem;font-weight:800;opacity:.22;line-height:1}
/* ============ FAQ ============ */
.qwrap{display:flex;flex-direction:column;gap:12px}
.qitem{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);overflow:hidden;transition:.5s var(--pop)}
.qitem.open{box-shadow:var(--sh-2)}
.qhead{width:100%;display:grid;grid-template-columns:52px 1fr 40px;gap:16px;align-items:center;background:transparent;border:0;padding:18px 22px;cursor:pointer;font-family:inherit;text-align:left}
@media(max-width:600px){.qhead{grid-template-columns:42px 1fr 32px;gap:12px;padding:15px}}
.qhead .qn{width:44px;height:44px;border-radius:15px;background:var(--card-2);display:grid;place-items:center;font-weight:800;color:var(--mut);transition:.4s var(--pop)}
.qitem.open .qn{background:linear-gradient(130deg,var(--coral),var(--indigo));color:#fff}
.qhead .qt{font-weight:700;font-size:1.02rem;color:var(--ink);letter-spacing:-.018em}
.qhead .qc{width:36px;height:36px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;color:var(--mut);transition:.45s var(--pop)}
.qitem.open .qc{transform:rotate(180deg);background:var(--indigo-soft);color:var(--indigo)}
.qbody{max-height:0;overflow:hidden;transition:max-height .55s var(--snap)}
.qitem.open .qbody{max-height:320px}
.qbody p{padding:0 24px 22px 90px;font-size:.93rem;color:var(--mut);margin:0}
@media(max-width:600px){.qbody p{padding:0 18px 18px 18px}}
/* ============ NEWSLETTER ============ */
.nlc{background:linear-gradient(130deg,var(--coral),#FF8A5C 45%,var(--indigo));border-radius:var(--r-xl);padding:44px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-c)}
.nlc h2,.nlc p{color:#fff}
.nlc .ball{position:absolute;border-radius:50%;background:rgba(255,255,255,.16);animation:bob 7s ease-in-out infinite}
.inp{
width:100%;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:var(--r-s);
padding:13px 16px;font-family:inherit;font-size:.95rem;transition:.3s
}
.inp:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 5px var(--coral-soft)}
.inp.bad{border-color:#E63C55;box-shadow:0 0 0 5px rgba(230,60,85,.14)}
.nlc .inp{border-color:transparent}
.flabel{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:7px;display:block}
.form-check-input{width:1.2em;height:1.2em;border-radius:6px;border:1px solid var(--line-2);background:var(--card)}
.form-check-input:checked{background-color:var(--coral);border-color:var(--coral)}
select.inp option{color:#111A2E}
.succ{background:var(--card);border-radius:var(--r-l);padding:26px;text-align:center;color:var(--ink);animation:pIn .5s var(--pop)}
.succ .t{font-size:2.4rem}
/* ============ CONTACT ============ */
.cwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start}
@media(max-width:991px){.cwrap{grid-template-columns:1fr}}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;box-shadow:var(--sh-1)}
.ictile{display:grid;grid-template-columns:56px 1fr;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;box-shadow:var(--sh-1);margin-bottom:14px;transition:.5s var(--pop)}
.ictile:hover{transform:translateY(-5px) scale(1.01)}
.ictile .ie{width:52px;height:52px;border-radius:18px;display:grid;place-items:center;font-size:1.3rem}
.map{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1)}
.map svg{width:100%;height:auto;display:block}
/* ============ CTA ============ */
.cta{background:linear-gradient(130deg,var(--indigo),#6E5BF0 50%,var(--teal));border-radius:var(--r-xl);padding:58px 34px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-i)}
.cta h2,.cta p{color:#fff}
.cta .ring{position:absolute;border:2px dashed rgba(255,255,255,.35);border-radius:50%}
/* ============ FOOTER ============ */
footer{background:var(--card-2);border-top:1px solid var(--line);padding-top:64px;position:relative;overflow:hidden;margin-top:20px}
.fl{display:block;color:var(--mut);font-size:.9rem;font-weight:600;padding:5px 0;transition:.3s}
.fl:hover{color:var(--coral);transform:translateX(4px)}
.soc{width:40px;height:40px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);box-shadow:var(--sh-1);transition:.4s var(--pop)}
.soc:hover{transform:translateY(-4px) scale(1.06);color:var(--coral)}
.wm{font-weight:800;font-size:clamp(2.6rem,13vw,9rem);letter-spacing:-.05em;line-height:.8;text-align:center;background:linear-gradient(180deg,var(--line),transparent);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;pointer-events:none}
/* ============ modal / toast / fab ============ */
.modal-content{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--card);color:var(--ink);box-shadow:var(--sh-2)}
.modal-header,.modal-footer{border-color:var(--line)}
.modal-body{max-height:62vh;overflow-y:auto;color:var(--mut);font-size:.94rem}
.modal-body h6{color:var(--ink);font-weight:700;margin-top:16px;letter-spacing:-.015em}
.btn-close{filter:none}[data-theme="dark"] .btn-close{filter:invert(1) grayscale(1)}
#toasts{position:fixed;top:18px;right:18px;z-index:3000;display:flex;flex-direction:column;gap:12px;max-width:340px}
.ts{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--sh-2);animation:tIn .5s var(--pop)}
.ts.o{border-left:6px solid var(--teal)}.ts.w{border-left:6px solid var(--butter)}.ts.e{border-left:6px solid var(--coral)}
@keyframes tIn{from{opacity:0;transform:translateX(26px) scale(.96)}to{opacity:1;transform:none}}
.spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;display:inline-block;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.totop{position:fixed;right:18px;bottom:18px;z-index:860;width:50px;height:50px;border-radius:50%;border:0;background:var(--card);color:var(--ink);box-shadow:var(--sh-2);cursor:pointer;opacity:0;pointer-events:none;transition:.45s var(--pop)}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{background:var(--coral);color:#fff}
.livebar{display:inline-flex;align-items:center;gap:9px;font-size:.8rem;font-weight:700;color:var(--mut)}
.livebar .p{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-soft);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ==========================================================================
   SUBPAGE ADDITIONS (page headers, legal documents)
   ========================================================================== */
.pagehead{padding:158px 0 0;position:relative;overflow:hidden}
.pagehead h1{margin:16px 0 14px}
.crumb{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;color:var(--mut)}
.crumb a{transition:.3s}
.crumb a:hover{color:var(--coral)}
.sect.no-top{padding-top:28px}
.doc{max-width:880px}
.doc h6{color:var(--ink);font-weight:700;margin-top:26px;margin-bottom:8px;letter-spacing:-.015em;font-size:1.02rem}
.doc p{color:var(--mut);font-size:.95rem;line-height:1.7;margin-bottom:.85rem}
.doc .first-h{margin-top:0}
.doc-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}