:root { --ink:#34393b; --brand:#194896; --green:#96b23c; --action:#0065ff; --paper:#f2f2f2; --fog:#ccd2d8; --white:#fff; --line:rgba(52,57,59,.18); --mono:"DM Mono", monospace; --sans:"Noto Sans", sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
button, input { font:inherit; }
button { cursor:pointer; }
.site-shell { max-width:1440px; min-height:100vh; margin:auto; overflow:hidden; background:linear-gradient(120deg,rgba(25,72,150,.08),transparent 30%),var(--paper); }
.masthead, main, footer { padding-inline:clamp(24px,6vw,92px); }
.masthead { height:83px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { display:flex; gap:14px; align-items:center; color:inherit; text-decoration:none; }
.wordmark img { display:block; width:151px; height:53px; object-fit:contain; }
.hub-label { padding-left:14px; border-left:1px solid var(--line); color:var(--brand); font:500 12px/1 var(--mono); letter-spacing:1.6px; }
.environment, .eyebrow, .category-label, .preview-tag, .note-side { margin:0; font:500 10px/1.35 var(--mono); letter-spacing:1.15px; }
.environment { color:#627077; display:flex; align-items:center; gap:7px; } .environment span { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(150,178,60,.16); }
.hero { min-height:465px; position:relative; display:flex; align-items:center; justify-content:space-between; padding-block:74px 65px; border-bottom:1px solid var(--line); }
.eyebrow { color:var(--brand); margin-bottom:18px; }
h1 { margin:0; max-width:700px; color:var(--brand); font-size:clamp(54px,7vw,104px); letter-spacing:-.08em; line-height:.9; font-weight:800; } h1 em { font-weight:500; font-style:normal; color:var(--green); }
.hero-intro { width:min(390px,100%); margin:30px 0 0; color:#556167; font-size:16px; line-height:1.65; }
.hero-orbit { position:relative; width:240px; height:240px; margin-right:8%; border:1px solid rgba(16,40,39,.24); border-radius:50%; animation:turn 32s linear infinite; }
.hero-orbit::before,.hero-orbit::after { content:""; position:absolute; inset:28px; border:1px dashed rgba(16,40,39,.2); border-radius:50%; }.hero-orbit::after { inset:63px; border-style:solid; }
.orbit-core { position:absolute; inset:84px; display:grid; place-items:center; border-radius:50%; color:var(--white); background:var(--brand); font:500 28px var(--mono); animation:turn-back 32s linear infinite; }.orbit-dot { position:absolute; width:11px;height:11px;border-radius:50%; background:var(--action); }.dot-one{top:26px;left:44px}.dot-two{right:16px;bottom:68px;background:var(--green)}.dot-three{left:45px;bottom:14px;background:var(--brand)}
.directory { padding-block:60px 78px; }.directory-topline { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:32px; }.directory-count { margin:0; font-size:20px; letter-spacing:-.04em; font-weight:700; }
.search-box { width:min(320px,100%); padding:13px 0; display:flex; gap:10px; border-bottom:1px solid var(--brand); }.search-box svg { width:18px; fill:none; stroke:var(--brand); stroke-width:1.8; }.search-box input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:14px; }.search-box input::placeholder{color:#7b878d}
.filters { display:flex; gap:9px; flex-wrap:wrap; padding-bottom:31px; }.filter { border:1px solid var(--line); color:#5b686e; border-radius:999px; background:transparent; padding:8px 15px; font-size:12px; transition:.2s ease; }.filter:hover,.filter:focus-visible { border-color:var(--brand); color:var(--brand); }.filter.is-active { color:var(--white); border-color:var(--brand); background:var(--brand); font-weight:700; }
.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.tool-card { min-height:273px; padding:21px; display:flex; flex-direction:column; border:1px solid var(--line); background:rgba(255,255,255,.55); animation:reveal .45s both; animation-delay:var(--reveal-delay); transition:transform .25s ease,box-shadow .25s ease; }.tool-card:hover { transform:translateY(-4px); box-shadow:6px 7px 0 rgba(25,72,150,.12); }.tool-card-top { display:flex; justify-content:space-between; align-items:start; }.tool-icon { width:49px;height:49px;display:grid;place-items:center;border-radius:13px; }.tool-icon svg { width:26px;height:26px;fill:none;stroke:var(--brand);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round; }.icon-sales{background:#dce7fb}.icon-marketing{background:#e3edc3}.icon-admin{background:#e5e8ea}.icon-project{background:#dce7fb}.icon-technology{background:#d5e2ff}.icon-finance{background:#e6edca}.category-label { padding:5px 7px; color:#5c6c74; background:rgba(25,72,150,.07); }.tool-card-body { margin-top:auto; }.tool-card h2 { margin:0 0 10px;color:var(--brand);font-size:21px;letter-spacing:-.055em; }.tool-card p { margin:0; color:#5b676c;font-size:13px;line-height:1.6; }.preview-tag { margin-top:19px; color:#617125; }.launch-link { margin-top:18px; color:var(--brand); font:500 12px var(--mono); text-decoration:none; }.launch-link:hover { text-decoration:underline; }.launch-link span { color:var(--action); }
.empty-state { padding:65px 0; text-align:center; border-top:1px solid var(--line); }.empty-state p { margin:0 0 13px; }.empty-state button { border:0; border-bottom:1px solid var(--ink); background:none; color:var(--ink); padding:0 0 3px; }
.maintain-note { display:grid; grid-template-columns:55px minmax(0,1fr) 1px auto; align-items:center; gap:22px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.note-number { width:43px; height:43px; display:grid;place-items:center; border-radius:50%; background:var(--brand);color:var(--white); font:500 12px var(--mono); }.maintain-note .eyebrow{margin-bottom:8px}.maintain-note p:not(.eyebrow){margin:0; font-size:15px; font-weight:600;letter-spacing:-.02em}.note-rule { height:28px;background:var(--line); }.note-side { color:var(--brand); }
footer { display:flex; justify-content:space-between; padding-block:28px; color:#71817d; font:11px var(--mono); } footer p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes turn { to { transform:rotate(360deg) } } @keyframes turn-back { to { transform:rotate(-360deg) } } @keyframes reveal { from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
@media (max-width:760px){.masthead{height:70px}.wordmark img{width:118px;height:42px}.hub-label{font-size:9px;padding-left:9px}.environment{font-size:8px}.hero{min-height:480px;padding-block:62px 50px}.hero-orbit{position:absolute;width:164px;height:164px;right:-47px;bottom:49px;margin:0;opacity:.85}.hero-orbit::before{inset:20px}.hero-orbit::after{inset:43px}.orbit-core{inset:58px;font-size:20px}.directory-topline{align-items:start;flex-direction:column}.search-box{width:100%}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:225px}.maintain-note{grid-template-columns:43px 1fr;gap:15px}.note-rule,.note-side{display:none}footer{gap:20px;line-height:1.6}}