:root { --forest-950:#0c2722; --forest-900:#12352c; --forest-800:#1c4a3d; --forest-700:#2c6352; --sage-200:#dfe6d8; --sage-100:#eef1e7; --cream:#f8f6ee; --clay:#d66e46; --sun:#e7bf69; --ink:#17211d; --muted:#5a675f; --line:rgb(23 33 29 / 14%); --shell:min(1160px,calc(100% - 48px)); --display:"Palatino Linotype","Book Antiqua",Georgia,serif; --body:Bahnschrift,Aptos,"Segoe UI",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:90px; } body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--body); } a { color:inherit; } button,input,select { font:inherit; } button { cursor:pointer; } .shell { width:var(--shell); margin-inline:auto; } .section { padding:112px 0; } .sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:100; top:12px; left:12px; transform:translateY(-150%); padding:12px 18px; color:var(--cream); background:var(--forest-900); border-radius:8px; } .skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:10; top:0; width:100%; color:var(--cream); } .nav-shell { display:flex; align-items:center; justify-content:space-between; min-height:90px; } .brand { display:inline-flex; align-items:center; width:59px; height:59px; overflow:hidden; } .brand img { width:100%; height:auto; object-fit:contain; transform:scale(2.25); } .site-nav { display:flex; align-items:center; gap:29px; font-size:.88rem; font-weight:700; } .site-nav a { text-decoration:none; opacity:.82; transition:opacity 160ms ease,color 160ms ease; } .site-nav a:hover,.site-nav a:focus-visible { color:var(--sun); opacity:1; } .site-nav .nav-login { padding:11px 15px; opacity:1; color:var(--forest-950); background:var(--cream); border-radius:999px; } .menu-toggle { display:none; border:0; color:var(--cream); background:transparent; }
.hero { position:relative; min-height:min(780px,100vh); overflow:hidden; padding-top:144px; color:var(--cream); background:var(--forest-950); } .hero::before { position:absolute; inset:0; content:""; opacity:.75; background:radial-gradient(circle at 78% 25%,rgb(231 191 105 / 24%),transparent 21rem),linear-gradient(115deg,transparent 0 47%,rgb(223 230 216 / 7%) 47.1% 47.35%,transparent 47.4%); } .hero-layout { position:relative; display:grid; grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr); align-items:center; min-height:600px; gap:64px; } .hero-copy { max-width:650px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:var(--sun); font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .eyebrow span { width:27px; height:2px; background:currentColor; } .eyebrow-dark { color:var(--clay); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--display); font-weight:400; } h1 { max-width:10.6ch; margin-bottom:27px; font-size:clamp(3.25rem,6.4vw,5.9rem); line-height:.95; letter-spacing:-.058em; } .hero-lead { max-width:560px; margin-bottom:34px; color:rgb(248 246 238 / 78%); font-size:1.1rem; line-height:1.7; }
.hero-actions { display:flex; align-items:center; gap:28px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:51px; padding:14px 20px; border:1px solid transparent; border-radius:7px; font-weight:800; text-decoration:none; transition:transform 160ms ease,background 160ms ease; } .button:hover { transform:translateY(-2px); } .button-primary { color:var(--forest-950); background:var(--sun); } .button-primary:hover { background:#f0cd83; } .text-link { display:inline-flex; align-items:center; gap:8px; color:var(--cream); font-size:.92rem; font-weight:800; text-decoration:none; } .text-link span { color:var(--sun); } .hero-proof { display:flex; flex-wrap:wrap; gap:10px 19px; margin-top:58px; color:rgb(248 246 238 / 62%); font-size:.75rem; font-weight:700; } .hero-proof span::before { display:inline-block; width:5px; height:5px; margin:0 8px 2px 0; content:""; background:var(--sun); border-radius:50%; }
.hero-visual { position:relative; min-height:489px; overflow:hidden; border:1px solid rgb(223 230 216 / 17%); border-radius:28px 28px 0 0; background:linear-gradient(165deg,rgb(44 99 82 / 75%),rgb(18 53 44 / 30%)); } .sun-orbit { position:absolute; top:-116px; right:-75px; width:315px; height:315px; border:1px solid rgb(231 191 105 / 44%); border-radius:50%; box-shadow:0 0 0 47px rgb(231 191 105 / 7%),0 0 0 94px rgb(231 191 105 / 4%); } .field-lines { position:absolute; right:-44px; bottom:-20px; left:-46px; height:205px; transform:perspective(220px) rotateX(56deg); transform-origin:bottom; background:repeating-linear-gradient(90deg,transparent 0 47px,rgb(223 230 216 / 24%) 48px 49px,transparent 50px 96px),repeating-linear-gradient(0deg,transparent 0 30px,rgb(223 230 216 / 12%) 31px 32px,transparent 33px 60px); }
.metric-card { position:absolute; z-index:1; border:1px solid rgb(248 246 238 / 16%); backdrop-filter:blur(12px); box-shadow:0 20px 45px rgb(2 20 15 / 20%); } .metric-card p { margin-bottom:11px; color:rgb(248 246 238 / 63%); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .metric-card strong { display:block; font-family:var(--display); font-size:1.7rem; font-weight:400; line-height:1.04; } .metric-card-main { top:96px; left:42px; width:min(315px,calc(100% - 84px)); padding:24px; background:rgb(12 39 34 / 65%); border-radius:15px; } .metric-card-main em { color:var(--sun); font-style:normal; } .metric-bars { display:flex; align-items:end; height:70px; gap:8px; margin-top:26px; } .metric-bars i { display:block; flex:1; height:34%; background:var(--sun); border-radius:2px 2px 0 0; } .metric-bars i:nth-child(2) { height:62%; opacity:.76; } .metric-bars i:nth-child(3) { height:45%; opacity:.56; } .metric-bars i:nth-child(4) { height:88%; } .metric-bars i:nth-child(5) { height:72%; opacity:.7; } .metric-card-small { right:31px; bottom:102px; width:191px; padding:18px; background:rgb(231 191 105 / 92%); border-color:var(--sun); border-radius:12px; color:var(--forest-950); } .metric-card-small p { color:rgb(12 39 34 / 68%); font-size:.62rem; } .metric-card-small strong { font-size:1.25rem; } .metric-icon { position:absolute; top:17px; right:17px; font-size:1.4rem; } .field-marker { position:absolute; z-index:2; width:10px; height:10px; border:2px solid var(--sun); border-radius:50%; box-shadow:0 0 0 7px rgb(231 191 105 / 11%); } .marker-one { right:114px; bottom:58px; } .marker-two { right:242px; bottom:134px; }
.signal-band { color:var(--cream); background:var(--clay); } .signal-grid { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:34px; padding:30px 0; } .signal-grid p { max-width:380px; margin:0; font-size:.95rem; line-height:1.45; } .signal-grid p:last-child { justify-self:end; } .signal-grid span { font-family:var(--display); font-size:2.2rem; letter-spacing:-.08em; }
.section-heading { display:grid; grid-template-columns:.75fr 1.25fr; gap:40px; margin-bottom:61px; } .section-heading h2,.audience-intro h2,.contact-copy h2 { max-width:13ch; margin-bottom:16px; font-size:clamp(2.65rem,4.3vw,4.4rem); line-height:.99; letter-spacing:-.055em; } .section-heading > div > p { max-width:545px; margin-bottom:0; color:var(--muted); font-size:1.02rem; line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:1.07fr .93fr .93fr; grid-auto-rows:minmax(270px,auto); gap:16px; } .feature-card { position:relative; min-height:287px; padding:28px; overflow:hidden; background:#edf0e6; border-radius:11px; } .feature-card-wide { grid-column:span 2; background:var(--sage-200); } .feature-card-tall { grid-row:span 2; min-height:573px; color:var(--cream); background:var(--forest-800); } .feature-card-accent { color:var(--forest-950); background:var(--sun); } .feature-number { margin-bottom:29px; color:var(--clay); font-size:.72rem; font-weight:800; letter-spacing:.08em; } .feature-card-tall .feature-number { color:var(--sun); } .feature-card h3 { max-width:12ch; margin-bottom:12px; font-size:1.82rem; line-height:1; letter-spacing:-.04em; } .feature-card > p:not(.feature-number) { max-width:315px; margin-bottom:0; color:var(--muted); font-size:.92rem; line-height:1.6; } .feature-card-tall > p:not(.feature-number) { color:rgb(248 246 238 / 72%); } .card-icon { position:absolute; top:29px; right:29px; width:47px; height:47px; } .icon-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:5px; } .icon-grid i { background:var(--forest-700); } .icon-pulse { display:flex; align-items:end; gap:5px; } .icon-pulse i { flex:1; height:45%; background:var(--sun); } .icon-pulse i:nth-child(2) { height:100%; } .icon-pulse i:nth-child(3) { height:70%; } .icon-layers i { position:absolute; width:29px; height:29px; border:2px solid var(--forest-700); transform:rotate(45deg); } .icon-layers i:nth-child(1) { top:0; left:9px; } .icon-layers i:nth-child(2) { top:10px; left:9px; opacity:.7; } .icon-layers i:nth-child(3) { top:20px; left:9px; opacity:.4; } .icon-shield { display:grid; place-items:center; color:var(--clay); font-size:3rem; } .mini-map { position:absolute; right:0; bottom:0; width:44%; height:48%; opacity:.85; background:repeating-linear-gradient(60deg,transparent 0 16px,rgb(44 99 82 / 35%) 17px 18px,transparent 19px 34px); } .mini-map span { position:absolute; width:9px; height:9px; background:var(--clay); border-radius:50%; } .mini-map span:nth-child(1) { top:22%; left:31%; } .mini-map span:nth-child(2) { top:63%; left:64%; } .mini-map span:nth-child(3) { top:42%; left:77%; } .mini-map span:nth-child(4) { top:71%; left:19%; }
.audience-section { color:var(--cream); background:var(--forest-900); } .audience-layout { display:grid; grid-template-columns:.92fr 1.08fr; gap:82px; align-items:start; } .audience-intro > p:not(.eyebrow) { max-width:443px; color:rgb(248 246 238 / 72%); line-height:1.7; } .audience-list { border-top:1px solid rgb(248 246 238 / 20%); } .audience-item { display:grid; grid-template-columns:52px 1fr; gap:21px; padding:27px 0; border-bottom:1px solid rgb(248 246 238 / 20%); } .audience-item > span { color:var(--sun); font-size:.75rem; font-weight:800; } .audience-item h3 { margin-bottom:8px; font-size:1.62rem; letter-spacing:-.038em; } .audience-item p { max-width:470px; margin-bottom:0; color:rgb(248 246 238 / 65%); line-height:1.62; }
.process-section { position:relative; overflow:hidden; color:var(--cream); background:#0f3028; } .process-section::after { position:absolute; right:-190px; bottom:-260px; width:680px; height:680px; content:""; border:1px solid rgb(231 191 105 / 24%); border-radius:50%; box-shadow:0 0 0 90px rgb(231 191 105 / 3%),0 0 0 180px rgb(231 191 105 / 2%); } .process-section .shell { position:relative; z-index:1; } .section-heading-light > div > p { color:rgb(248 246 238 / 67%); } .process-list { display:grid; grid-template-columns:repeat(3,1fr); gap:31px; padding:0; margin:0; list-style:none; } .process-list li { position:relative; padding-top:31px; border-top:1px solid rgb(248 246 238 / 31%); } .process-list span { display:block; margin-bottom:43px; color:var(--sun); font-size:.74rem; font-weight:800; } .process-list h3 { margin-bottom:12px; font-size:1.8rem; letter-spacing:-.04em; } .process-list p { max-width:300px; margin:0; color:rgb(248 246 238 / 68%); line-height:1.65; }
.contact-section { background:var(--sage-100); } .contact-layout { display:grid; grid-template-columns:.89fr 1.11fr; gap:82px; align-items:start; } .contact-copy { padding-top:31px; } .contact-copy > p:not(.eyebrow) { max-width:443px; color:var(--muted); line-height:1.72; } .contact-note { display:flex; gap:14px; max-width:390px; margin-top:39px; padding-top:20px; border-top:1px solid var(--line); } .contact-note span { color:var(--clay); } .contact-note p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.5; } .lead-form { padding:33px; background:var(--cream); border:1px solid rgb(23 33 29 / 9%); border-radius:12px; box-shadow:0 24px 60px rgb(18 53 44 / 10%); } .form-heading { display:flex; align-items:baseline; justify-content:space-between; gap:15px; padding-bottom:25px; margin-bottom:25px; border-bottom:1px solid var(--line); } .form-heading p { margin:0; font-family:var(--display); font-size:1.72rem; letter-spacing:-.04em; } .form-heading span { color:var(--muted); font-size:.72rem; } .form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; } .form-field { display:grid; gap:7px; } .form-field-full { grid-column:1 / -1; } .form-field label { font-size:.8rem; font-weight:800; } .form-field input,.form-field select { width:100%; min-height:47px; padding:11px 12px; color:var(--ink); background:#fffef9; border:1px solid rgb(23 33 29 / 20%); border-radius:5px; outline:0; } .form-field input:focus,.form-field select:focus { border-color:var(--forest-700); box-shadow:0 0 0 3px rgb(44 99 82 / 14%); } .honeypot { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; } .form-privacy { margin:20px 0; color:var(--muted); font-size:.73rem; line-height:1.5; } .form-privacy a { color:var(--forest-700); } .recaptcha-wrap { margin:0 0 16px; } .form-status { min-height:1.4em; margin:0 0 13px; font-size:.86rem; font-weight:700; } .form-status[data-state="error"] { color:#aa3e27; } .form-status[data-state="success"] { color:var(--forest-700); } .button-submit { width:100%; border:0; } .button-submit:disabled { cursor:wait; opacity:.7; transform:none; }
.site-footer { color:rgb(248 246 238 / 80%); background:var(--forest-950); } .footer-top { display:grid; grid-template-columns:100px minmax(0,1fr) auto; align-items:center; gap:34px; padding:53px 0; } .footer-brand { width:79px; height:79px; } .footer-top > p { max-width:365px; margin:0; line-height:1.6; } .footer-contact { color:var(--sun); font-weight:800; text-decoration:none; } .footer-bottom { display:flex; justify-content:space-between; gap:20px; padding:22px 0; border-top:1px solid rgb(248 246 238 / 16%); color:rgb(248 246 238 / 53%); font-size:.76rem; } .footer-bottom p { margin:0; } .footer-bottom nav { display:flex; flex-wrap:wrap; justify-content:end; gap:19px; } .footer-bottom a { text-decoration:none; } .footer-bottom a:hover { color:var(--sun); }
.reveal { animation:rise 650ms both cubic-bezier(.2,.7,.2,1); } .reveal-delay { animation-delay:120ms; } @keyframes rise { from { opacity:0; transform:translateY(19px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } }
@media (max-width:800px) { :root { --shell:min(100% - 34px,620px); } .section { padding:78px 0; } .nav-shell { min-height:77px; } .brand { width:53px; height:53px; } .menu-toggle { display:grid; gap:6px; width:42px; height:42px; place-content:center; } .menu-toggle span:not(.sr-only) { display:block; width:22px; height:2px; background:currentColor; } .site-nav { position:absolute; top:69px; right:17px; left:17px; display:none; align-items:stretch; gap:0; padding:13px; color:var(--forest-950); background:var(--cream); border-radius:9px; box-shadow:0 18px 32px rgb(0 0 0 / 22%); } .site-nav[data-open="true"] { display:grid; } .site-nav a { padding:13px; opacity:1; } .site-nav .nav-login { color:var(--cream); background:var(--forest-900); text-align:center; } .hero { min-height:auto; padding-top:126px; } .hero-layout,.audience-layout,.contact-layout { grid-template-columns:1fr; gap:51px; } .hero-layout { min-height:0; } .hero-visual { min-height:420px; } .metric-card-main { left:24px; } .metric-card-small { right:17px; } .section-heading { grid-template-columns:1fr; gap:0; margin-bottom:42px; } .section-heading .eyebrow { margin-bottom:17px; } .feature-grid { grid-template-columns:1fr; } .feature-card-wide,.feature-card-tall { grid-column:auto; grid-row:auto; min-height:300px; } .signal-grid { grid-template-columns:1fr; gap:11px; padding:22px 0; } .signal-grid span { display:none; } .signal-grid p:last-child { justify-self:start; } .process-list { grid-template-columns:1fr; gap:29px; } .process-list span { margin-bottom:21px; } .contact-copy { padding-top:0; } .footer-top { grid-template-columns:1fr; gap:18px; } .footer-top .footer-brand { margin-bottom:3px; } .footer-bottom { flex-direction:column; } .footer-bottom nav { justify-content:start; } }
@media (max-width:480px) { :root { --shell:min(100% - 28px,620px); } .hero-actions { align-items:flex-start; flex-direction:column; gap:19px; } .hero-proof { display:grid; gap:10px; margin-top:39px; } .hero-visual { min-height:360px; } .metric-card-main { top:48px; width:calc(100% - 48px); } .metric-card-small { bottom:48px; } .field-marker,.marker-two { display:none; } .form-grid { grid-template-columns:1fr; } .form-field-full { grid-column:auto; } .lead-form { padding:23px 19px; } .form-heading { display:block; } .form-heading span { display:block; margin-top:8px; } .section-heading h2,.audience-intro h2,.contact-copy h2 { font-size:2.62rem; } .feature-card { padding:24px; } .footer-bottom nav { display:grid; gap:12px; } }