/* Homepage foundation: tokens, type, buttons, layout, header and footer. */
@font-face{font-family:"Manrope Variable";src:url("fonts/manrope-variable.woff2") format("woff2");font-weight:200 800;font-display:swap}

:root{
  --bg:#E9E9DF;--paper:#FFFFFA;--card:#F7F7ED;--hover:#F3F3E8;
  --ink:#242424;--ink-2:#33372F;--ink-3:#3D4139;--muted:#51554C;--muted-2:#6B6F68;
  --line:#EFEFE3;--line-2:#EAEADF;--line-3:#E1E1D5;--line-4:#DCDCD0;
  --green:#0F3026;--green-2:#174536;--cta:#00FF9B;--mint:#E6EFE9;
  --red:#C8462F;--hot:#A33A22;--hot-bg:#FCEAE4;--blue:#2E47B0;--blue-bg:#EEF1FB;
  --radius-xl:28px;--radius-lg:24px;--radius-md:20px;--frame:10px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font:"Manrope Variable","Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-padding-top:106px}
body{margin:0;background:var(--bg);font-family:var(--font);-webkit-font-smoothing:antialiased;color:var(--ink)}
img,svg{display:block}
a{color:inherit;text-decoration:none}
a:hover{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
.dark :focus-visible{outline-color:var(--cta)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon-sheet{position:absolute;width:0;height:0;overflow:hidden}
.fill{flex:1;min-width:0}

/* layout */
.rz{display:flex;flex-direction:column;gap:10px;max-width:1600px;margin-inline:auto;padding:var(--frame)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding-inline:clamp(20px,4vw,52px)}
.sec{padding-block:clamp(64px,8vw,112px)}
.sec-flush{padding-top:0}
.stack-lg{display:flex;flex-direction:column;gap:clamp(36px,4vw,56px)}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:760px}
.sec-head.center{align-items:center;text-align:center;align-self:center}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr));gap:clamp(40px,5vw,80px);align-items:center}
.txt{display:flex;flex-direction:column;gap:18px}
.anchor{scroll-margin-top:100px}
@media (min-width:900px){.rev>.txt{order:2}}

/* surfaces */
.panel{border-radius:var(--radius-xl);background:var(--paper);box-shadow:0 1px 2px rgba(15,48,38,.06),0 12px 40px rgba(15,48,38,.06)}
.dark{position:relative;overflow:hidden;border-radius:var(--radius-xl);background:var(--green);color:var(--paper)}
.dark>.wrap{position:relative}
.dots{position:absolute;width:820px;height:720px;pointer-events:none;background:radial-gradient(circle,var(--cta) 2.2px,transparent 2.7px) 0 0/34px 34px}
.dots-tr{top:0;right:0;-webkit-mask-image:radial-gradient(760px at 100% 0,rgba(0,0,0,.32),rgba(0,0,0,.1) 55%,transparent);mask-image:radial-gradient(760px at 100% 0,rgba(0,0,0,.32),rgba(0,0,0,.1) 55%,transparent)}
.dots-bl{left:0;bottom:0;-webkit-mask-image:radial-gradient(760px at 0 100%,rgba(0,0,0,.26),rgba(0,0,0,.08) 55%,transparent);mask-image:radial-gradient(760px at 0 100%,rgba(0,0,0,.26),rgba(0,0,0,.08) 55%,transparent)}
.dots-br{right:0;bottom:0;-webkit-mask-image:radial-gradient(760px at 100% 100%,rgba(0,0,0,.28),rgba(0,0,0,.08) 55%,transparent);mask-image:radial-gradient(760px at 100% 100%,rgba(0,0,0,.28),rgba(0,0,0,.08) 55%,transparent)}

/* type */
.h2{margin:0;font-size:clamp(34px,4.4vw,56px);line-height:1.02;font-weight:800;letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.h2.on-dark{color:var(--paper)}
.h2 .dim,.hero-title .dim{color:rgba(255,255,250,.52)}
.h2-sm{margin:0;font-size:clamp(28px,3vw,40px);line-height:1.08;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.h3{margin:0;font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.h4{margin:0;font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.lead{margin:0;font-size:clamp(16px,1.4vw,18px);line-height:1.6;font-weight:500;color:var(--muted);max-width:580px;text-wrap:pretty}
.lead.dk{color:rgba(255,255,250,.8)}
.dim-lt{color:var(--muted-2)}
.p{margin:0;font-size:15px;line-height:1.55;font-weight:500;color:var(--muted);text-wrap:pretty}
.kick{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:var(--mint);color:var(--green);font-size:13px;font-weight:800;align-self:flex-start;white-space:nowrap}
.sec-head.center .kick{align-self:center}
.kick i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block}
.kick.dk{background:rgba(0,255,155,.14);color:var(--cta)}
.lk{font-weight:800;color:var(--green);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:rgba(15,48,38,.3);transition:text-decoration-color .15s}
.lk:hover{color:var(--green);text-decoration-color:var(--green)}

/* buttons */
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row.center{justify-content:center;margin-top:6px}
.btn-row-sm{align-items:center;gap:12px 18px;margin-top:8px}
.note{font-size:14px;font-weight:700;color:var(--muted-2)}
.bp,.bm,.bg,.bs,.bl{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;white-space:nowrap;transition:background .15s,transform .2s var(--ease-out),box-shadow .2s}
.bp{height:48px;padding:0 22px;background:var(--green);color:var(--paper);font-size:15px;font-weight:800}
.bp:hover{background:var(--green-2);color:var(--paper)}
.bp svg{color:var(--cta);transition:transform .2s var(--ease-out)}
.bp:hover svg,.bm:hover svg{transform:translateX(3px)}
.bm{height:54px;padding:0 26px;background:var(--cta);color:var(--green);font-size:16px;font-weight:800}
.bm svg{transition:transform .2s var(--ease-out)}
.bm:hover{color:var(--green);transform:translateY(-1px)}
.bm-sm{height:48px;padding:0 18px;font-size:15px}
.bg{height:54px;padding:0 24px;color:var(--paper);box-shadow:inset 0 0 0 1.5px rgba(255,255,250,.28);font-size:16px;font-weight:700}
.bg:hover{color:var(--paper);background:rgba(255,255,250,.08)}
.bl{height:44px;padding:0 16px;font-size:14.5px;font-weight:700;color:var(--ink-3)}
.bl:hover{background:var(--hover);color:var(--ink)}
.bs{height:48px;padding:0 22px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-4);color:var(--ink);font-size:15px;font-weight:800}
.bs:hover{background:var(--hover);color:var(--ink)}

/* Header starts on the page frame, the same edge as the hero card, not the viewport. Once it turns to glass the background grows up to the viewport while the links stay put. */
.hdr{position:fixed;top:var(--frame);left:0;right:0;z-index:30;color:var(--paper);transition:background-color .3s,color .3s,box-shadow .3s}
.hdr.is-scrolled,.hdr:has(.is-open){top:0;padding-top:var(--frame);background:rgba(255,255,250,.86);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);color:var(--ink);box-shadow:0 1px 0 rgba(15,48,38,.1)}
.hdr-nav{position:relative;display:flex;align-items:center;gap:8px;max-width:1320px;height:72px;margin-inline:auto;padding-inline:clamp(20px,4vw,52px)}
.hdr-logo{flex:none;display:inline-grid;align-items:center;min-height:44px;margin-right:12px}
.hdr-logo img{grid-area:1/1;display:block;width:97px;height:auto;aspect-ratio:934/239;transition:opacity .3s}
.hdr-logo .logo-ink{opacity:0}
.hdr.is-scrolled .hdr-logo .logo-ink,.hdr:has(.is-open) .hdr-logo .logo-ink{opacity:1}
.hdr.is-scrolled .hdr-logo .logo-paper,.hdr:has(.is-open) .hdr-logo .logo-paper{opacity:0}
.hdr-menu{display:flex;align-items:center;gap:8px;flex:1}
.navlinks{display:flex;align-items:center;gap:2px;margin:0 auto;padding:0;list-style:none}
.navl{position:relative;min-height:44px;padding:0 14px;display:inline-flex;align-items:center;font-size:14.5px;font-weight:600;white-space:nowrap;opacity:.78;transition:opacity .15s}
.navl::after{content:"";position:absolute;left:14px;right:14px;bottom:9px;height:1.5px;background:currentColor;transform-origin:left;transform:scaleX(var(--nav-progress,0));opacity:0;transition:opacity .2s}
.navl.is-current{opacity:1}
.navl.is-current::after{opacity:.55}
.hdr-menu-foot{display:flex;align-items:center;gap:4px}
.hdr-fill{display:none}
.hdr .bl{padding:0 12px;font-weight:600;color:inherit}
.lang{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:700}
.lang a{display:inline-grid;place-items:center;min-width:32px;min-height:32px;border-radius:8px;opacity:.6;transition:opacity .15s}
.lang a[aria-current="true"]{opacity:1}
.hdr-nav>.bp{height:44px;padding:0 18px;font-size:14.5px;background:var(--paper);color:var(--green);transition:background .3s,color .3s,transform .2s var(--ease-out)}
.hdr-nav>.bp svg{color:currentColor}
.hdr.is-scrolled .hdr-nav>.bp,.hdr:has(.is-open) .hdr-nav>.bp{background:var(--green);color:var(--paper)}
.hdr.is-scrolled .hdr-nav>.bp svg,.hdr:has(.is-open) .hdr-nav>.bp svg{color:var(--cta)}
.hdr-nav>.bp:active{transform:scale(.97)}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;position:relative;flex:none}
.menu-btn span{position:absolute;left:13px;right:13px;height:1.5px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease-out)}
.menu-btn span:first-child{top:18px}.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (hover:hover) and (pointer:fine){
  .navl:hover,.lang a:hover{opacity:1}
  .hdr .bl:hover{background:rgba(127,127,127,.12);color:inherit}
  .hdr.is-scrolled .hdr-nav>.bp:hover,.hdr:has(.is-open) .hdr-nav>.bp:hover{background:var(--green-2)}
  .hdr:not(.is-scrolled):not(:has(.is-open)) .hdr-nav>.bp:hover{background:var(--mint);color:var(--green)}
}
/* The home hero is a light scene, so before the page scrolls the header keeps dark ink instead of the white used over the other pages' dark openers. */
[data-page="home"] .hdr{color:var(--ink)}
[data-page="home"] .hdr .hdr-logo .logo-ink{opacity:1}
[data-page="home"] .hdr .hdr-logo .logo-paper{opacity:0}
[data-page="home"] .hdr-nav>.bp{background:var(--green);color:var(--paper)}
[data-page="home"] .hdr-nav>.bp svg{color:var(--cta)}
@media (hover:hover) and (pointer:fine){
  [data-page="home"] .hdr:not(.is-scrolled):not(:has(.is-open)) .hdr-nav>.bp:hover{background:var(--green-2);color:var(--paper)}
}
/* The fixed header leaves the flow. Its bar ends 72px below the frame, and the opening section keeps 12px of clearance under that. */
.rz>.dark:first-child{padding-top:84px}

.to-top{position:fixed;right:24px;bottom:24px;z-index:25;width:52px;height:52px;border-radius:999px;display:grid;place-items:center;background:var(--green);color:var(--cta);box-shadow:0 0 0 1px rgba(255,255,250,.22),0 10px 26px rgba(15,48,38,.24);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s var(--ease-out),visibility 0s .25s}
.to-top.is-shown{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top.is-shown:hover{transform:translateY(-2px)}
.to-top svg{rotate:-90deg}

@media (max-width:1060px){
  .hdr-fill{display:block;flex:1}
  .menu-btn{display:block}
  .hdr-menu{display:none;position:absolute;top:100%;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:0;padding:10px;border-radius:var(--radius-lg);background:var(--paper);color:var(--ink);box-shadow:0 0 0 1px rgba(15,48,38,.07),0 20px 50px rgba(15,48,38,.16)}
  .hdr-nav.is-open .hdr-menu{display:flex;animation:menu-in .28s var(--ease-out)}
  .navlinks{flex-direction:column;align-items:stretch;margin:0}
  .navl{width:100%;min-height:52px;font-size:17px;opacity:1;border-radius:14px}
  .navl::after{display:none}
  .hdr-menu-foot{justify-content:space-between;margin-top:6px;padding:10px 4px 2px;border-top:1px solid var(--line)}
}
@media (max-width:560px){.to-top{right:16px;bottom:16px;width:46px;height:46px}.hdr-nav{height:64px;padding-inline:16px}.hdr-logo{margin-right:0}.hdr-logo img{width:86px;height:auto}.hdr-nav>.bp{height:42px;padding:0 16px;font-size:14px}}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}

/* footer */
.ftr{display:flex;flex-direction:column;gap:40px;padding-top:clamp(40px,5vw,64px);padding-bottom:96px}
.ftr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:32px}
.ftr-col{display:flex;flex-direction:column;gap:6px}
.ftr-logo{width:140px;height:auto;aspect-ratio:934/239;margin-bottom:8px}
.fh{font-size:13px;font-weight:800;color:var(--ink);margin-bottom:4px}
.fl{font-size:14px;font-weight:600;color:var(--muted);line-height:1.5}
a.fl{align-self:flex-start;transition:color .15s}
a.fl:hover{color:var(--green)}
.ftr-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:22px;box-shadow:inset 0 1px 0 var(--line-4);font-size:13px;font-weight:600;color:var(--muted-2)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0s!important;animation:none!important}}