:root { --ink:#0b1020; --paper:#f7f7f3; --lime:#c6f36b; --muted:#5e6472; --line:#dfe1d9; --display:'Manrope',sans-serif; --mono:'DM Mono',monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--display); } a { color:inherit; text-decoration:none; } .container { width:min(1120px, calc(100% - 48px)); margin:auto; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:20px; top:20px; z-index:10; padding:12px; background:white; }
.site-header { position:absolute; width:100%; z-index:2; } .nav { min-height:86px; display:flex; align-items:center; justify-content:space-between; } .brand { font-size:1.08rem; font-weight:800; letter-spacing:-.08em; } .brand span { color:#4f8c35; } .nav-links { display:flex; gap:29px; align-items:center; font-size:.88rem; font-weight:600; } .nav-links>a:not(.button):hover, .text-link:hover { color:#4f8c35; }
.button { display:inline-flex; gap:18px; align-items:center; justify-content:center; background:var(--ink); color:#fff; padding:16px 22px; border-radius:3px; font-weight:700; font-size:.92rem; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); background:#25314c; } .button-small { padding:11px 17px; font-size:.82rem; } .button-light { background:var(--lime); color:var(--ink); white-space:nowrap; } .button-light:hover { background:#dcff9d; } .button-disabled { cursor:default; opacity:.86; }
.hero { min-height:760px; padding:170px 0 88px; overflow:hidden; background:radial-gradient(circle at 78% 34%,#e7f5ce 0,transparent 28%),var(--paper); } .hero-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; } .eyebrow { color:#4f8c35; font:500 .72rem var(--mono); letter-spacing:.06em; margin:0 0 19px; } h1,h2,h3,p { margin-top:0; } h1 { max-width:700px; margin-bottom:25px; letter-spacing:-.07em; font-size:clamp(3rem,6.1vw,5.6rem); line-height:.96; } h1 em { font-weight:400; font-style:normal; color:#4f8c35; } .hero-copy { max-width:570px; color:var(--muted); font-size:1.08rem; line-height:1.7; } .hero-actions { display:flex; align-items:center; gap:27px; margin-top:37px; } .text-link { font-size:.88rem; font-weight:700; } .text-link span { padding-left:7px; }
.hero-visual { position:relative; min-height:410px; } .orb { position:absolute; width:235px; height:235px; top:93px; left:105px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 29px rgba(198,243,107,.23),0 0 0 58px rgba(198,243,107,.11); } .signal { position:absolute; border-radius:50%; border:1px solid #cbd6bb; } .signal-one { width:396px; height:396px; top:10px; left:25px; } .signal-two { width:300px; height:300px; top:58px; left:73px; border-style:dashed; } .system-card { position:absolute; z-index:1; width:166px; padding:15px; border:1px solid rgba(11,16,32,.12); border-radius:5px; background:rgba(255,255,255,.84); box-shadow:0 14px 30px rgba(11,16,32,.08); backdrop-filter:blur(8px); } .system-card span { float:right; color:#77915d; font:500 .65rem var(--mono); } .system-card strong,.system-card small { display:block; } .system-card strong { margin:20px 0 3px; font-size:.9rem; } .system-card small { color:var(--muted); font-size:.68rem; } .card-one { top:15px; right:7px; } .card-two { bottom:18px; left:0; } .card-three { right:24px; bottom:76px; }
.section { padding:120px 0; } .intro { background:#fff; } .section-heading { display:flex; justify-content:space-between; gap:50px; align-items:end; margin-bottom:54px; } h2 { max-width:620px; margin-bottom:0; font-size:clamp(2.2rem,4vw,3.9rem); line-height:1.05; letter-spacing:-.06em; } .section-heading>p { max-width:370px; color:var(--muted); line-height:1.65; margin-bottom:4px; } .service-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .service-card { min-height:250px; padding:27px 29px 20px 0; border-right:1px solid var(--line); } .service-card:not(:first-child) { padding-left:29px; } .service-card:last-child { border:none; } .service-card>p:first-child { color:#4f8c35; font:500 .75rem var(--mono); } .service-card h3 { font-size:1.18rem; letter-spacing:-.03em; margin:55px 0 13px; } .service-card>p:last-child { color:var(--muted); font-size:.9rem; line-height:1.65; }
.process { background:var(--ink); color:#fff; } .process .eyebrow { color:var(--lime); } .process-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; } .steps { list-style:none; padding:0; margin:0; } .steps li { display:grid; grid-template-columns:80px 1fr; padding:0 0 28px; margin-bottom:28px; border-bottom:1px solid #283148; } .steps span { color:var(--lime); font:500 .75rem var(--mono); } .steps h3 { margin:0 0 9px; font-size:1.15rem; } .steps p { max-width:430px; color:#aeb6c8; line-height:1.6; font-size:.9rem; }
.contact { padding:0; background:#fff; } .contact-panel { display:flex; justify-content:space-between; align-items:center; gap:40px; padding:95px 0; } .contact-panel h2 { max-width:700px; margin:0 0 18px; } .contact-panel div>p:last-child { color:var(--muted); margin:0; } .footer { color:#c3cbdc; background:var(--ink); padding:26px 0; font-size:.76rem; } .footer>div { display:flex; gap:25px; align-items:center; } .footer p:last-child { margin-left:auto; } .footer p { margin:0; } .footer .brand { color:#fff; }
.menu-button { display:none; border:0; background:transparent; width:43px; padding:10px 0; } .menu-button span:not(.sr-only) { display:block; height:2px; background:var(--ink); margin:5px; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:760px) { .container { width:min(100% - 40px, 1120px); } .nav { min-height:73px; } .menu-button { display:block; } .nav-links { display:none; position:absolute; top:72px; left:20px; right:20px; padding:19px; background:#fff; border:1px solid var(--line); box-shadow:0 10px 30px #0b102022; flex-direction:column; align-items:stretch; gap:18px; } .nav-links.is-open { display:flex; } .nav-links .button { text-align:center; } .hero { min-height:auto; padding:135px 0 55px; } .hero-grid,.process-grid { grid-template-columns:1fr; gap:42px; } .hero-visual { min-height:335px; transform:scale(.84); transform-origin:top left; width:119%; margin-bottom:-41px; } .hero-actions { align-items:stretch; flex-direction:column; gap:20px; } .section { padding:75px 0; } .section-heading { display:block; margin-bottom:35px; } .section-heading h2 { margin-bottom:19px; } .service-grid { grid-template-columns:1fr; } .service-card,.service-card:not(:first-child) { min-height:auto; padding:24px 0; border-right:0; border-bottom:1px solid var(--line); } .service-card h3 { margin:25px 0 10px; } .process-grid { gap:47px; } .contact-panel { align-items:flex-start; flex-direction:column; padding:72px 0; } .footer>div { flex-wrap:wrap; gap:13px 20px; } .footer p:last-child { margin-left:0; width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }