:root { --ink:#142136; --muted:#56647a; --line:#dce3eb; --canvas:#f7f9fc; --surface:#fff; --green:#127a52; --green-dark:#0b5e3f; --green-pale:#e7f6ef; --orange:#dd5b2c; --orange-dark:#b5441d; --orange-pale:#fff0e9; --navy:#142136; --radius:18px; --shadow:0 16px 35px rgba(20,33,54,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--canvas); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid #f5bd4f; outline-offset:3px; }
button { font:inherit; }
.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; }
.skip-link { position:absolute; top:-50px; left:1rem; z-index:30; padding:.6rem .85rem; border-radius:8px; color:#fff; background:var(--navy); }
.skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(220,227,235,.9); background:rgba(255,255,255,.94); backdrop-filter:blur(12px); }
.nav-shell { display:flex; min-height:72px; max-width:1160px; align-items:center; justify-content:space-between; gap:1.25rem; padding:0 1.25rem; margin:0 auto; }
.brand { display:inline-flex; align-items:center; gap:.58rem; font-size:1.23rem; font-weight:800; letter-spacing:.06em; text-decoration:none; }
.brand-mark { position:relative; display:inline-block; width:31px; height:31px; border:4px solid var(--green); border-radius:50%; }
.brand-mark::after { position:absolute; right:-8px; bottom:-6px; width:14px; height:14px; border:4px solid var(--orange); border-radius:50%; content:""; background:#fff; }
.site-menu { display:flex; align-items:center; gap:1.1rem; }
.site-menu a { color:#344158; font-size:.94rem; font-weight:650; text-decoration:none; }
.site-menu a:hover, .site-menu a[aria-current="page"] { color:var(--green); }
.nav-menu-button { display:none; padding:.45rem; border:0; color:var(--ink); background:transparent; cursor:pointer; }
.nav-menu-button svg { display:block; width:25px; height:25px; }
.container { width:min(100% - 2.5rem,1160px); margin:0 auto; }
.eyebrow { margin:0 0 .8rem; color:var(--green); font-size:.78rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow.demand { color:var(--orange); }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:800px; margin-bottom:1.1rem; font-size:clamp(2.35rem,5vw,4.75rem); line-height:1.03; letter-spacing:-.055em; }
h2 { margin-bottom:.75rem; font-size:clamp(1.75rem,3.2vw,2.7rem); line-height:1.12; letter-spacing:-.04em; }
h3 { margin-bottom:.45rem; font-size:1.1rem; line-height:1.3; }
.lede { max-width:650px; margin-bottom:1.75rem; color:var(--muted); font-size:clamp(1.07rem,1.9vw,1.23rem); }
.section { padding:clamp(3.75rem,8vw,6.5rem) 0; }
.section-tight { padding:3.25rem 0; }
.section-head { max-width:660px; margin-bottom:2.35rem; }
.section-head p { margin-bottom:0; color:var(--muted); }
.hero { position:relative; overflow:hidden; padding:clamp(4.25rem,9vw,7.6rem) 0 clamp(4rem,8vw,6.2rem); background:linear-gradient(135deg,#f8fbff 0%,#eff7f3 72%,#fff8f4 100%); }
.hero::before,.hero::after { position:absolute; border-radius:50%; content:""; pointer-events:none; }
.hero::before { top:-150px; right:-90px; width:330px; height:330px; background:rgba(18,122,82,.09); }
.hero::after { right:10%; bottom:-190px; width:265px; height:265px; background:rgba(221,91,44,.1); }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .85fr; align-items:center; gap:clamp(2.5rem,7vw,6.5rem); }
.hero-copy .wordmark { margin:0 0 1.3rem; color:var(--ink); font-size:.87rem; font-weight:800; letter-spacing:.16em; }
.hero-copy h1 strong { color:var(--green); }
.hero-copy h1 .accent-demand { color:var(--orange); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; gap:.5rem; padding:.78rem 1.05rem; border:1px solid transparent; border-radius:10px; font-weight:800; line-height:1.2; text-align:center; text-decoration:none; cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,33,54,.16); }
.button-supply { color:#fff; background:var(--green); }
.button-supply:hover { background:var(--green-dark); }
.button-demand { color:#fff; background:var(--orange); }
.button-demand:hover { background:var(--orange-dark); }
.button-ghost { border-color:#bfcad8; color:var(--ink); background:rgba(255,255,255,.75); }
.button-ghost:hover { border-color:var(--ink); background:#fff; }
.button.is-disabled { opacity:.72; cursor:help; }
.hero-visual { position:relative; min-height:355px; }
.connection-board { position:absolute; inset:0; overflow:hidden; border:1px solid rgba(20,33,54,.1); border-radius:24px; background:linear-gradient(145deg,#17273f,#1f3956); box-shadow:0 28px 55px rgba(20,33,54,.18); }
.connection-board::before { position:absolute; inset:17% -30% auto; height:2px; transform:rotate(-18deg); content:""; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); }
.connection-board::after { position:absolute; top:24%; right:20%; width:120px; height:120px; border:1px solid rgba(255,255,255,.25); border-radius:50%; content:""; }
.visual-label { position:absolute; z-index:1; display:flex; align-items:center; gap:.65rem; padding:.9rem 1rem; border:1px solid rgba(255,255,255,.21); border-radius:13px; color:#fff; background:rgba(255,255,255,.11); box-shadow:0 12px 22px rgba(0,0,0,.12); backdrop-filter:blur(8px); }
.visual-label small { display:block; color:#c8d2df; font-size:.72rem; }
.visual-label strong { display:block; font-size:.98rem; }
.visual-icon { display:grid; width:34px; height:34px; place-items:center; border-radius:10px; font-weight:900; }
.visual-label.supply { top:18%; left:9%; }
.visual-label.supply .visual-icon { color:#063c28; background:#94e4bd; }
.visual-label.demand { right:8%; bottom:18%; }
.visual-label.demand .visual-icon { color:#6e2007; background:#ffc19e; }
.visual-node { position:absolute; z-index:2; top:44%; left:47%; display:grid; width:64px; height:64px; place-items:center; border:4px solid #fff; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--green),var(--orange)); box-shadow:0 0 0 10px rgba(255,255,255,.14); font-size:.79rem; font-weight:900; letter-spacing:.04em; }
.microcopy { margin:1rem 0 0; color:#68758a; font-size:.88rem; }
.form-language-picker { display:inline-flex; flex-wrap:wrap; align-items:center; gap:.65rem; max-width:700px; margin:0 0 1.25rem; padding:.78rem .9rem; border:1px solid #cbd6e2; border-radius:13px; color:#344158; background:rgba(255,255,255,.75); }
.form-language-label { margin:0; font-size:.88rem; font-weight:800; }
.form-language-options { display:flex; flex-wrap:wrap; gap:.45rem; }
.language-choice { min-height:36px; padding:.36rem .65rem; border:1px solid #bfcad8; border-radius:8px; color:#344158; background:#fff; font-size:.84rem; font-weight:750; cursor:pointer; }
.language-choice:hover { border-color:var(--green); color:var(--green-dark); }
.language-choice[aria-pressed="true"] { border-color:var(--green); color:#fff; background:var(--green); }
.demand-hero .language-choice:hover { border-color:var(--orange); color:var(--orange-dark); }
.demand-hero .language-choice[aria-pressed="true"] { border-color:var(--orange); background:var(--orange); }
.form-language-status { width:100%; margin:0; color:var(--muted); font-size:.81rem; }
.benefit-band { padding:1.25rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; }
.benefit-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding:0; margin:0; list-style:none; }
.benefit-list li { display:flex; align-items:center; gap:.7rem; color:#3f4e64; font-weight:700; }
.check { display:grid; flex:0 0 auto; width:25px; height:25px; place-items:center; border-radius:50%; color:var(--green-dark); background:var(--green-pale); font-size:.85rem; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; counter-reset:steps; }
.step { padding:1.4rem 1.1rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:0 8px 20px rgba(20,33,54,.035); }
.step::before { display:grid; width:31px; height:31px; place-items:center; margin-bottom:1rem; border-radius:8px; color:#fff; content:counter(steps); counter-increment:steps; background:var(--navy); font-size:.82rem; font-weight:800; }
.step p,.card p { margin-bottom:0; color:var(--muted); font-size:.96rem; }
.audience-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.audience-card { position:relative; overflow:hidden; padding:clamp(1.7rem,4vw,2.5rem); border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }
.audience-card::after { position:absolute; top:-92px; right:-92px; width:170px; height:170px; border-radius:50%; content:""; }
.audience-card.supply::after { background:var(--green-pale); }
.audience-card.demand::after { background:var(--orange-pale); }
.card-kicker { position:relative; z-index:1; display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1rem; font-size:.8rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.supply .card-kicker { color:var(--green); }
.demand .card-kicker { color:var(--orange); }
.audience-card h2,.audience-card p { position:relative; z-index:1; max-width:460px; }
.audience-card p { color:var(--muted); }
.feature-list { position:relative; z-index:1; display:grid; gap:.6rem; padding:0; margin:1.3rem 0 1.7rem; list-style:none; }
.feature-list li { display:flex; gap:.55rem; color:#3d4a60; }
.feature-list li::before { flex:0 0 auto; content:"✓"; color:var(--green); font-weight:900; }
.demand .feature-list li::before { color:var(--orange); }
.safe-section { color:#fff; background:var(--navy); }
.safe-section h2 { color:#fff; }
.safe-section .section-head p { color:#c5cfdb; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.trust-item { padding:1.2rem; border:1px solid rgba(255,255,255,.16); border-radius:13px; background:rgba(255,255,255,.05); }
.trust-item svg { width:25px; height:25px; margin-bottom:.7rem; color:#b6e8ce; }
.trust-item h3 { margin-bottom:.3rem; font-size:1rem; }
.trust-item p { margin-bottom:0; color:#c5cfdb; font-size:.89rem; }
.cta-banner { display:grid; grid-template-columns:1fr auto; align-items:center; gap:2rem; padding:clamp(1.6rem,4vw,2.7rem); border-radius:20px; background:linear-gradient(100deg,#e9f7f0,#fff7f1); }
.cta-banner h2 { margin-bottom:.4rem; font-size:clamp(1.5rem,3vw,2.2rem); }
.cta-banner p { max-width:680px; margin-bottom:0; color:var(--muted); }
.page-hero { padding:clamp(3.7rem,8vw,6rem) 0; background:linear-gradient(135deg,#fbfcfe,#edf7f2); }
.page-hero.demand-hero { background:linear-gradient(135deg,#fffdfb,#fff0e9); }
.page-hero .lede { max-width:690px; }
.icon-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.icon-card { padding:1.25rem 1rem; border:1px solid var(--line); border-radius:14px; background:#fff; text-align:center; }
.icon-card svg { width:29px; height:29px; margin-bottom:.65rem; color:var(--green); }
.demand-grid .icon-card svg { color:var(--orange); }
.icon-card p { margin:0; color:#405066; font-size:.9rem; font-weight:750; }
.info-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.info-card { padding:1.45rem; border:1px solid var(--line); border-radius:14px; background:#fff; }
.info-card .mini-icon { display:grid; width:36px; height:36px; place-items:center; margin-bottom:1rem; border-radius:9px; color:var(--green-dark); background:var(--green-pale); font-weight:900; }
.demand-grid .mini-icon { color:var(--orange-dark); background:var(--orange-pale); }
.callout { padding:1.3rem 1.4rem; border-left:4px solid var(--green); border-radius:0 12px 12px 0; color:#244537; background:var(--green-pale); }
.callout.demand-callout { border-color:var(--orange); color:#61351e; background:var(--orange-pale); }
.callout p { margin:0; }
.section-offset { margin-top:1.5rem; }
.prose { max-width:780px; }
.prose h2 { margin-top:2.5rem; font-size:clamp(1.45rem,2.7vw,2rem); }
.prose h3 { margin-top:1.8rem; }
.prose p,.prose li { color:#435168; }
.prose ul { padding-left:1.25rem; }
.prose a { color:var(--green-dark); font-weight:700; }
.contact-panel { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr); gap:1.5rem; padding:clamp(1.5rem,5vw,3rem); border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.contact-details { display:grid; align-content:start; gap:1rem; padding:1.5rem; border-radius:15px; color:#fff; background:var(--navy); }
.contact-details p { margin:0; color:#c5cfdb; }
.contact-details a { color:#fff; font-weight:750; }
.faq { display:grid; gap:.8rem; }
.faq details { padding:1rem 1.15rem; border:1px solid var(--line); border-radius:11px; background:#fff; }
.faq summary { cursor:pointer; color:#2b3a51; font-weight:800; }
.faq p { margin:.7rem 0 0; color:var(--muted); }
.site-footer { padding:3.5rem 0 1.25rem; color:#e1e8f0; background:#0e192a; }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3,.75fr); gap:2rem; padding-bottom:2.3rem; }
.footer-brand p { max-width:350px; color:#aebaca; font-size:.92rem; }
.footer-title { margin:.25rem 0 .8rem; color:#fff; font-size:.85rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.footer-links { display:grid; gap:.45rem; }
.footer-links a { color:#b7c2d1; font-size:.92rem; text-decoration:none; }
.footer-links a:hover { color:#fff; text-decoration:underline; }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; padding-top:1.2rem; border-top:1px solid rgba(255,255,255,.13); color:#9dacbe; font-size:.82rem; }
.site-notice { position:fixed; right:1.2rem; bottom:1.2rem; z-index:50; max-width:350px; padding:.9rem 1rem; border-radius:10px; color:#fff; background:#1d2d43; box-shadow:0 12px 26px rgba(20,33,54,.28); font-size:.9rem; }
.site-notice[hidden] { display:none; }
@media (max-width:830px) { .nav-menu-button { display:block; } .site-menu { position:absolute; top:72px; right:0; left:0; display:none; align-items:stretch; gap:0; padding:.5rem 1.25rem 1rem; border-bottom:1px solid var(--line); background:#fff; box-shadow:0 12px 18px rgba(20,33,54,.08); } .site-menu.is-open { display:grid; } .site-menu a { padding:.72rem .2rem; } .hero-grid { grid-template-columns:1fr; } .hero-visual { width:100%; max-width:540px; min-height:315px; } .steps { grid-template-columns:repeat(2,1fr); } .trust-grid { grid-template-columns:repeat(2,1fr); } .icon-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:620px) { .nav-shell { min-height:64px; } .site-menu { top:64px; } .container { width:min(100% - 2rem,1160px); } .hero-actions,.hero-actions .button { width:100%; } .benefit-list,.audience-grid,.info-grid,.contact-panel,.footer-grid { grid-template-columns:1fr; } .benefit-list { gap:.6rem; } .steps,.trust-grid { grid-template-columns:1fr; } .cta-banner { grid-template-columns:1fr; gap:1.2rem; } .cta-banner .button { width:100%; } .icon-grid { grid-template-columns:repeat(2,1fr); } .footer-bottom { flex-direction:column; } .hero-visual { min-height:280px; } .visual-label.supply { top:12%; left:6%; } .visual-label.demand { right:5%; bottom:12%; } }