:root{--bg:#03050a;--ink:#F2F5FA;--muted:#9AA7BE;--line:rgba(255,255,255,.14);--y:#FFD84D;--b:#4f7cff;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);overflow-x:hidden}
html,body{margin:0;color:var(--ink);font:400 1rem/1.55 "Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif}
body{min-height:100vh;overflow-x:hidden;position:relative}
a{color:inherit}
/* glowing arcs + top halo */
.fx{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx::before{content:"";position:absolute;left:50%;top:-38vh;width:140vw;height:62vh;transform:translateX(-50%);border-radius:50%;
 background:radial-gradient(ellipse at 50% 100%,rgba(79,124,255,.55),rgba(79,124,255,.12) 45%,transparent 70%);filter:blur(6px)}
.arc{position:absolute;top:8vh;width:62vw;height:96vh;border-radius:50%;border:2px solid rgba(160,190,255,.55);
 box-shadow:0 0 40px rgba(79,124,255,.55),inset 0 0 90px rgba(79,124,255,.28);
 -webkit-mask-image:linear-gradient(#000 25%,transparent 78%);mask-image:linear-gradient(#000 25%,transparent 78%)}
.arc.l{left:-46vw}.arc.r{right:-46vw}
.fx::after{content:"";position:absolute;inset:0;background:radial-gradient(560px 420px at 50% 34%,rgba(255,216,77,.13),transparent 65%),
 linear-gradient(transparent 78%,rgba(3,5,10,.7))}
.nav{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;max-width:1240px;margin:0 auto;padding:1.1rem 1.25rem}
.brand{display:flex;align-items:center;gap:.55rem;font:700 1.15rem/1 "Bricolage Grotesque",system-ui,sans-serif;text-decoration:none;letter-spacing:-.01em}
.mark{width:1.9rem;height:1.9rem;background:url(/logo.svg) center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(255,216,77,.5))}
.links{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:#c3ccdd}
.links a{text-decoration:none}.links a:hover{color:#fff}
.nav .pill{justify-self:end}
.pill{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.4rem;border-radius:999px;font:600 .9rem/1 inherit;text-decoration:none;border:1px solid var(--line);color:var(--ink);
 background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));transition:transform .15s,background .15s,box-shadow .15s}
.pill:hover{transform:translateY(-1px);box-shadow:0 0 26px rgba(79,124,255,.45)}
.pill.solid{background:linear-gradient(180deg,#1a2a52,#0e1a38);border-color:rgba(120,160,255,.45);box-shadow:0 0 30px rgba(79,124,255,.35)}
.pill.light{background:#fff;color:#0a0d14;border-color:#fff}.pill.light:hover{background:var(--y);border-color:var(--y);box-shadow:0 0 30px rgba(255,216,77,.5)}
.stage{position:relative;max-width:1240px;margin:0 auto;padding:0 1.25rem}
#scene{-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);position:absolute;left:0;top:-6vh;width:100%;height:56vh;pointer-events:none;z-index:1}
.no-webgl #scene{display:none}
.ghost{position:absolute;left:50%;top:29vh;transform:translateX(-50%);z-index:0;max-width:100vw;font:800 min(21.5vw,19rem)/.85 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.005em;text-transform:uppercase;white-space:nowrap;user-select:none;pointer-events:none;background:linear-gradient(180deg,rgba(165,195,255,.5) 0%,rgba(120,150,255,.26) 55%,rgba(110,140,255,.09) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(90,130,255,.5)) drop-shadow(0 0 56px rgba(90,130,255,.28))}
.hud{position:absolute;z-index:2;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#a9b6cc;padding:.2rem .1rem}
.hud b{display:block;font:700 1.35rem/1.1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:.02em;color:#fff;margin-top:.2rem}
.hud::after{content:"";position:absolute;border:0 dashed rgba(190,205,235,.45)}
.h1{left:2%;top:22vh}.h1::after{left:0;top:100%;height:9vh;border-left-width:1.5px;margin-top:.4rem}
.h2{right:2%;top:18vh;text-align:right}.h2::after{right:0;top:100%;height:12vh;border-right-width:1.5px;margin-top:.4rem}
.h3{right:2%;top:56vh;text-align:right}.h3::after{right:0;bottom:100%;height:5vh;border-right-width:1.5px;margin-bottom:.4rem}

.copy{position:relative;z-index:3;text-align:center;padding-top:54vh;max-width:46rem;margin:0 auto}
.tag{display:inline-block;padding:.4rem 1rem;border:1px solid var(--line);border-radius:999px;font-size:.78rem;color:#c8d1e2;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
h1{margin:1rem 0 0;font:600 clamp(2.4rem,6vw,4.6rem)/1.02 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.035em;text-shadow:0 0 40px rgba(79,124,255,.35)}
h1 em{font-style:normal;color:var(--y)}
.lead{max-width:34rem;margin:1.1rem auto 1.7rem;color:var(--muted);font-size:1rem}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.chips{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;list-style:none;max-width:60rem;margin:3.2rem auto 0;padding:0 1.25rem}
.chips a{display:inline-block;padding:.55rem 1.05rem;border:1px solid var(--line);border-radius:999px;font-size:.88rem;text-decoration:none;color:#c3ccdd;background:rgba(255,255,255,.04)}
.chips a:hover{color:#0a0d14;background:var(--y);border-color:var(--y)}
.foot{position:relative;z-index:3;max-width:1240px;margin:0 auto;padding:1.6rem 1.25rem 2.4rem;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;font-size:.85rem;color:var(--muted)}
.foot a{text-decoration:none}.foot a:hover{color:#fff}
@media (max-width:820px){
 .nav{grid-template-columns:1fr auto}.links{display:none}
 .hero-mark{top:0;width:min(260px,66vw)}
 /* mixed vh+px, not pure vh: on short phones (SE-size and shorter) pure vh collapses this
    gap to ~0; the fixed px floor guarantees clearance from the logo mark (capped ~211px
    tall) regardless of viewport height. Same fix as the desktop wide-but-short block above. */
 .ghost{top:calc(8vh + 235px)}
 /* the ghost wordmark's font-size grows with vw up to this breakpoint's 820px edge (no cap
    until ~885px viewport width), so .copy's clearance must grow with vw too, not just vh --
    otherwise wide-but-short-in-the-mobile-sense windows (e.g. 820x960) overlap. */
 .copy{padding-top:calc(18vw + 340px)}
 .hud{display:none}
 .arc{width:90vw}.arc.l{left:-72vw}.arc.r{right:-72vw}
}
/* wide-but-short desktop windows (windowed browser, laptop with chrome, ultrawide monitors):
   the hud stats and hero copy are positioned with vh offsets that assume a tall viewport, so on
   a short one they collide with each other and with the ghost wordmark. Fall back to the same
   compact treatment already used below 820px wide. */
@media (max-height:960px) and (min-width:821px){
 .hero-mark{top:0;width:min(220px,32vw)}
 /* fixed px, not vh: the logo above is a fixed ~220px wide (so a fixed ~180px tall) in this
    range regardless of viewport height, so its clearance below must be fixed too. The ghost
    wordmark's font-size is capped at 19rem (304px) once viewport width exceeds ~885px, giving
    a line box of ~258px (304 * .85 line-height) -- so it always runs from .ghost's top down to
    roughly top + 258px, whatever the viewport height. .copy must clear that. */
 .ghost{top:295px}
 .copy{padding-top:585px}
 .hud{display:none}
}

.navr{justify-self:end;display:flex;align-items:center;gap:.7rem}
.dir{position:relative;z-index:3;max-width:1240px;margin:3.6rem auto 0;padding:0 1.25rem}
.dir-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:1.3rem}
.dir h2{margin:0;font:700 clamp(1.7rem,3.4vw,2.4rem)/1.05 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em}
.dir-head p{margin:.4rem 0 0;color:var(--muted);font-size:.95rem}
.dir kbd{font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.2rem .42rem;border-radius:6px;background:rgba(255,255,255,.09);color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filters button{cursor:pointer;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#c3ccdd;font:500 .88rem/1 inherit}
.filters button:hover{border-color:rgba(255,216,77,.5);color:#fff}
.filters button[aria-pressed="true"]{background:var(--y);border-color:var(--y);color:#0a0d14;font-weight:600}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;grid-auto-flow:dense}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:1.1rem;min-height:178px;padding:1.25rem;border-radius:22px;text-decoration:none;overflow:hidden;
 border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:transform .18s,border-color .18s,box-shadow .18s}
.tile::after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(79,124,255,.28),transparent 70%);pointer-events:none}
.tile:hover{transform:translateY(-3px);border-color:rgba(255,216,77,.55);box-shadow:0 0 0 1px rgba(255,216,77,.25),0 24px 60px -22px rgba(255,216,77,.3)}
.tile:focus-visible{outline:3px solid #8DAAFF;outline-offset:3px}
.tile-top{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem}
.ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(255,216,77,.12);color:var(--y);border:1px solid rgba(255,216,77,.25)}
.cat{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#93a3c0}
.tile-body{position:relative;z-index:1}
.tile h3{margin:0;font:700 1.35rem/1.1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.tile p{margin:.5rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ex{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;padding:.4rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(3,5,10,.5);font:700 .92rem/1 "Bricolage Grotesque",system-ui,sans-serif;color:var(--y)}
.ex i{font:600 .62rem/1 "Instrument Sans",system-ui,sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#93a3c0}
.t-xl{grid-column:span 6;grid-row:span 2;min-height:370px}.t-xl h3{font-size:2rem}.t-xl p{font-size:1rem;-webkit-line-clamp:5}.t-xl .ex{font-size:1.4rem;padding:.6rem 1.1rem}
.t-xl::after{width:320px;height:320px;background:radial-gradient(circle,rgba(255,216,77,.22),transparent 70%)}
.t-l{grid-column:span 6}.t-m{grid-column:span 3}.t-s{grid-column:span 4}
.bento.flat .tile{grid-column:span 4;grid-row:auto;min-height:178px}
.bento.flat .t-xl h3{font-size:1.35rem}.bento.flat .t-xl p{font-size:.9rem}.bento.flat .t-xl .ex{font-size:.92rem;padding:.4rem .8rem}
.tile[hidden]{display:none}
@media (max-width:980px){.t-xl,.t-l,.t-m,.t-s,.bento.flat .tile{grid-column:span 6}.t-xl{grid-row:auto;min-height:220px}}
@media (max-width:620px){.t-xl,.t-l,.t-m,.t-s,.bento.flat .tile{grid-column:span 12}.tile{min-height:0}.filters{width:100%}.navr .pill{padding:.62rem 1rem}}

.hero-mark{position:absolute;left:50%;top:1.5vh;width:min(285px,60vw);z-index:2;transform:translateX(-50%);pointer-events:none}
.hero-mark::before{content:"";position:absolute;inset:-30%;background:radial-gradient(closest-side,rgba(255,176,0,.16),transparent 70%);z-index:-1}
.hero-mark .tilt{width:100%;aspect-ratio:1180/960;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
.hero-mark .art{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 14px rgba(255,190,20,.26))}
/* blades shift a little at different depths while the pointer moves (parallax, no 3D layers) */
.hero-mark .pl0{transform:translate(calc(var(--px,0) * 34px),calc(var(--py,0) * 22px))}
.hero-mark .pl1{transform:translate(calc(var(--px,0) * 18px),calc(var(--py,0) * 12px))}
.hero-mark .pl2{transform:translate(calc(var(--px,0) * 6px),calc(var(--py,0) * 4px))}
.brand .lk{color:#FFD84D}
.ghost .lk{background:linear-gradient(180deg,rgba(255,226,110,.95) 0%,rgba(255,216,77,.66) 55%,rgba(255,205,50,.3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(255,216,77,.35))}

/* entrance (about 1.6 s, plays once): bottom blade, middle, top, one light sweep, then the name and the tagline. Then everything rests. */
@keyframes rl-b{from{opacity:0;transform:translate(-170px,130px)}to{opacity:1;transform:translate(0,0)}}
@keyframes rl-fade{from{opacity:0}to{opacity:1}}
@keyframes rl-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes rl-sw{from{transform:translateX(0)}to{transform:translateX(1900px)}}
.hero-mark .bl2{animation:rl-b .7s cubic-bezier(.2,.8,.2,1) .1s both}
.hero-mark .bl1{animation:rl-b .7s cubic-bezier(.2,.8,.2,1) .4s both}
.hero-mark .bl0{animation:rl-b .7s cubic-bezier(.2,.8,.2,1) .7s both}
.hero-mark .fx{animation:rl-fade 1.2s ease .5s both}
.hero-mark .sw{animation:rl-sw 1s ease-in-out 1.35s both}
.ghost{animation:rl-fade 1.2s ease 1.6s both}
.tag{animation:rl-rise .8s ease 2s both}
@media (prefers-reduced-motion:reduce){.hero-mark .bl,.hero-mark .fx,.hero-mark .sw,.ghost,.tag{animation:none}.hero-mark .sw{display:none}.hero-mark .tilt{transform:none}}

/* Tools dropdown */
.links{position:relative}
.has-menu{position:static}
.menu-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;background:none;border:0;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit}
.menu-btn:hover,.menu-btn[aria-expanded="true"]{color:#fff}
.menu-btn svg{transition:transform .2s}.menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav{position:relative}
.mega{position:absolute;left:50%;top:calc(100% - .4rem);transform:translateX(-50%);width:min(960px,94vw);z-index:60;text-transform:none;letter-spacing:0;
 border-radius:22px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,#0f1a33,#09111f);box-shadow:0 0 0 1px rgba(79,124,255,.22),0 40px 90px -20px rgba(0,0,0,.9);padding:1.3rem 1.3rem 1rem;color:var(--ink);font-size:.95rem}
.mega[hidden]{display:none}
.mega-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
.mc h3{margin:0 0 .5rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#93a3c0;font-weight:600}
.mc ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.mc a{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem .5rem;border-radius:12px;text-decoration:none;color:inherit}
.mc a:hover,.mc a:focus-visible{background:rgba(255,216,77,.1)}
.mc .ico{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,216,77,.12);color:var(--y);border:1px solid rgba(255,216,77,.25)}
.mi{display:flex;flex-direction:column;min-width:0}.mi b{font-weight:600;color:#fff}.mi small{color:var(--muted);font-size:.78rem;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mega-all{display:inline-block;margin:.9rem .5rem 0;color:var(--y);text-decoration:none;font-weight:600}
/* trust row */
/* defers layout/paint cost for below-the-fold sections until they're about to scroll into
   view, cutting main-thread work before first paint on a DOM this size. "auto" remembers
   the real height after first layout, so the estimate below only matters for the very first
   paint (kept close to the real height, separately for mobile below, to avoid a CLS blip). */
.why{content-visibility:auto;contain-intrinsic-size:auto 350px}
.foot2{content-visibility:auto;contain-intrinsic-size:auto 650px}
.why{position:relative;z-index:3;max-width:1100px;margin:2.5rem auto 0;padding:0 1.25rem;text-align:center}
.why h2{margin:0 0 1.4rem;font:700 clamp(1.6rem,3.2vw,2.3rem)/1.1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em}
.why ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.why li{padding:1.3rem;border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.wi{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(255,216,77,.12);color:var(--y);border:1px solid rgba(255,216,77,.25);margin-bottom:.8rem}
.why b{display:block;font:700 1.15rem/1.2 "Bricolage Grotesque",system-ui,sans-serif;color:#fff}.why p{margin:.4rem 0 0;color:var(--muted);font-size:.92rem;line-height:1.5}
.why-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.6rem}
.why-cta kbd,.pill kbd{font:600 .72rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.2rem .42rem;border-radius:6px;background:rgba(255,255,255,.1);margin-left:.4rem}
.why-cta .pill{cursor:pointer;font-family:inherit}
/* footer columns */
.foot2{position:relative;z-index:3;max-width:1240px;margin:3.5rem auto 0;padding:2rem 1.25rem 2.4rem;border-top:1px solid var(--line)}
.fgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:1.6rem}
.fc h3{margin:0 0 .7rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#93a3c0;font-weight:600}
.fc ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.fc a{color:#c3ccdd;text-decoration:none;font-size:.92rem}.fc a:hover{color:#fff}
.fbrand p{margin:.6rem 0 0;color:var(--muted);font-size:.9rem}
.foot2 .brand{display:inline-flex}
.fine{margin:1.6rem 0 0;color:var(--muted);font-size:.82rem}
@media (max-width:980px){.mega-in{grid-template-columns:repeat(2,minmax(0,1fr))}.fgrid{grid-template-columns:repeat(3,1fr)}.fbrand{grid-column:1/-1}}
@media (max-width:820px){
 .links{display:block}.links > li:not(.has-menu){display:none}
 .mega{position:fixed;left:.6rem;right:.6rem;top:4.2rem;transform:none;width:auto;max-height:78vh;overflow-y:auto}
 .mega-in{grid-template-columns:1fr}
 .why ul{grid-template-columns:1fr}
 /* .why ul stacks to 1 column here, so the section is much taller than the desktop estimate */
 .why{contain-intrinsic-size:auto 800px}
 .foot2{contain-intrinsic-size:auto 900px}
}
@media (max-width:560px){.fgrid{grid-template-columns:1fr 1fr}}

/* tools directory on the home page: country tax pages and guides under the bento grid */
.dir-more{margin-top:2.2rem}
.dir-more h3{margin:0;font:700 1.05rem/1.2 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.01em;color:#fff}
.dir-more .chips{justify-content:flex-start;margin:.7rem 0 1.6rem;padding:0;max-width:none}
.dir-head p{max-width:46rem;line-height:1.6}