/* self-hosted fonts (no third-party requests) */
@font-face{font-family:'Noto Sans';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/noto-sans-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Noto Sans';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/noto-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Belleza';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/belleza-latin-400-normal.woff2) format('woff2')}
/* ONE text size shared by Home description, Services and Strategy */
:root{--desc:clamp(18px,3.4vw,38px)}
@media(min-width:900px){:root{--desc:clamp(15px,1.4vw,24px)}}
:root{--green:#64D247;--lime:#7EF08F;--gold:#e0a911;--logo-gold:#BF9003;--foot:56px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#000;color:#fff;font:400 16px/1.7 'Noto Sans',Arial,sans-serif;overflow-x:hidden}
a{color:var(--lime);text-decoration:none}
img{max-width:100%;display:block}

/* ---------- header + slide-in menu ---------- */
header{position:fixed;inset:0 0 auto 0;height:50px;z-index:9999;display:flex;align-items:center;justify-content:space-between;padding:0 50px}
header img{height:34px}
#burger{background:none;border:0;cursor:pointer;width:34px;height:34px;display:grid;place-content:center;gap:5px}
#burger i{display:block;width:24px;height:2px;background:rgb(243,8,42)}
nav{position:fixed;top:0;right:0;bottom:0;width:300px;background:rgb(15,1,1);z-index:10023;padding:70px 30px;transform:translateX(100%);transition:transform .4s}
nav.open{transform:none}
nav a{display:block;font-size:14px;padding:10px 0;color:rgb(146,99,224);border-bottom:2px solid transparent;width:max-content}
nav a:hover,nav a.on{color:rgb(125,230,6);border-color:rgb(68,238,8)}
nav .sub{padding-left:18px}
nav .sub a{font-size:11px;color:#bbb}
#veil{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10011;opacity:0;pointer-events:none;transition:opacity .4s}
#veil.open{opacity:1;pointer-events:auto}

/* ---------- pages ---------- */
.view{display:none;min-height:calc(100vh - var(--foot));min-height:calc(100svh - var(--foot));position:relative;overflow:hidden;align-items:center;justify-content:center;padding:110px 20px 90px}
.view.on{display:flex}
.bg,.ov{position:absolute;inset:0;background-size:cover;background-position:center}
.ov{background:#000}
.fixed{background-attachment:fixed}
.in{position:relative;z-index:2;width:100%}

/* entrance animations (same four Elementor used) */
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.a{opacity:0}
.view.on .a{animation:var(--n) 2s both;animation-delay:var(--d,0ms)}
.rule{height:1px;background:var(--c,var(--green));width:100%;margin:15px 0}

/* Home */
#home .vid{width:100%;height:100%;object-fit:cover}
#home .ov{background:#212224;opacity:.15;mix-blend-mode:multiply}
#home .in{max-width:none;text-align:center}
#home h1{font:italic 100 var(--desc)/1.7 'Noto Sans',sans-serif;text-shadow:0 0 45px rgba(0,0,0,.3)}
@media(min-width:900px){#home h1{white-space:nowrap}}
#home .rule{--c:var(--lime);max-width:900px;margin:30px auto}
.btn{display:inline-block;font:100 11px/1 Arial,sans-serif;letter-spacing:.6px;padding:10px 12px;color:#000;background:#2BA63D;border:2px solid var(--lime);transition:.3s}
.btn:hover{background:#044912;border-color:#E50A0A;color:#fff;transform:scale(.94)}

/* Services: slideshow + flip boxes */
#services .bg{opacity:0;transition:opacity 2.5s}
#services .bg.cur{opacity:1}
#services .in{max-width:1025px;display:grid;grid-template-columns:1fr 1fr;gap:20px 30px}
.flip{perspective:1000px;height:calc(var(--desc)*1.9*9 + 80px);cursor:pointer}   /* tall enough for the longest tile (9 lines) at any text size */
.flip>div{position:relative;width:100%;height:100%;transition:transform .8s;transform-style:preserve-3d}
.flip:hover>div,.flip.on>div{transform:rotateY(180deg)}
.flip section{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;padding:25px 30px}
.flip .f{background:rgba(0,0,0,.15);font-size:var(--desc);line-height:1.5}
.flip .b{background:rgba(53,82,108,.43);transform:rotateY(180deg);font:100 var(--desc)/1.9 Arial,sans-serif;letter-spacing:.2px}
.flip.r{text-align:right}
.flip.l{text-align:left}
#services .col>.rule{margin:20px 0}

/* Strategy */
#strategy{padding:0;align-items:flex-start}
#strategy .ov{opacity:.2}
/* Strategy: intro text centred in the top third; "Strategy" block centred in the lower half */
#strategy .in{max-width:none;height:calc(100vh - var(--foot));height:calc(100svh - var(--foot));padding:0 20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:33.34% 16.66% 1fr}
#strategy .in>div:first-child{grid-row:1;align-self:center;justify-self:center;width:min(1000px,100%);text-align:center}
#strategy .in>.mid{grid-row:3;align-self:center;justify-self:center;width:min(700px,100%)}
#strategy p{font-size:var(--desc);line-height:1.7;margin-bottom:12px}
#strategy .mid{text-align:center}
#strategy h2{font:200 var(--desc)/1.3 'Noto Sans',sans-serif}
#strategy .list p{font-weight:500;line-height:1.4}

/* Investors */
#investors .bg{background:radial-gradient(ellipse at 50% 40%,#16301c 0,#05080a 70%)}
#investors .btn{font-size:12px;background:#ACA117;border-color:#097A1D}

/* Contact */
#contact .bg{background-image:url(images/keyboard.webp)}
#contact .ov{opacity:.35}
#contact .in{max-width:640px}
#contact h1{font:100 29px/1.3 'Belleza',sans-serif}
.card{border:1px solid var(--green);padding:28px;transition:background .4s;background:rgba(196,129,11,0)}
.card:hover{background:rgba(35,178,10,.48)}
label{display:block;font-size:14px;margin:12px 0 4px}
input,textarea{width:100%;font:inherit;padding:10px;border:1px solid #bbb;background:rgba(255,255,255,.92);color:#222}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
textarea{height:130px;resize:vertical}
form .btn{margin-top:18px;font:400 14px Arial;padding:12px 26px;cursor:pointer}

/* Disclaimer / Access denied */
#disclaimer .in{max-width:900px;font-size:15px;color:#ddd}
#denied .in{text-align:center;font:100 17px Arial,sans-serif;color:rgba(201,169,28,.73)}

/* footer: bottom line of every page, centred, logo gold, same size as the Contact form's "Message" label (14px) */
footer{height:var(--foot);display:flex;align-items:center;justify-content:center;background:#000;text-align:center;font-size:14px;line-height:1.7;color:var(--logo-gold)}

@media(max-width:800px){
 header{padding:0 16px}
 .fixed,#home .bg,#contact .bg{background-attachment:scroll}
 #services .in,#strategy .in{grid-template-columns:1fr}
 #strategy .in{height:auto;min-height:calc(100svh - var(--foot));grid-template-rows:auto;gap:36px;padding:90px 20px 50px;align-content:start}
 #strategy .in>div:first-child,#strategy .in>.mid{grid-row:auto}
 .row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.view.on .a{animation:none;opacity:1}.flip>div,#services .bg{transition:none}}

/* helpers (replace former inline styles so the CSP needs no 'unsafe-inline') */
.tc{text-align:center}.o4{opacity:.4}.o25{opacity:.25}
.sv-bg{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:-1}
/* contact form */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#ts{margin-top:16px;min-height:65px}
#send:disabled{opacity:.5;cursor:not-allowed}
#status{margin-top:14px;min-height:1.7em}
#status.err{color:#ffb4b4}