/* +8 — em construção · v0.1 */
@font-face{font-family:"Archivo";src:url(/assets/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(/assets/fonts/space-grotesk-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --y:#EA4335; --ink:#100404; --ink-2:#0A0202; --gray:#FFFFFF; --paper:#FEF9F9;
  --mute:#B7ACAC; --line:rgba(254,249,249,.14); --line-ink:rgba(16,4,4,.18);
  --display:"Archivo",Impact,"Arial Narrow",sans-serif;
  --sans:"Space Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:17px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--y);color:var(--ink)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.y{color:var(--y)}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut);background:linear-gradient(to bottom,rgba(10,2,2,.85),rgba(10,2,2,0));pointer-events:none}
.bar>*{pointer-events:auto}
.bar .logo{width:64px;height:auto}
.bar .status{display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;background:var(--y);border-radius:50%;box-shadow:0 0 0 0 rgba(234,67,53,.7);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(234,67,53,.6)}70%{box-shadow:0 0 0 10px rgba(234,67,53,0)}100%{box-shadow:0 0 0 0 rgba(234,67,53,0)}}
.lang{text-decoration:none;border:1px solid var(--line);padding:7px 10px;transition:.2s}
.lang:hover{background:var(--y);color:var(--ink);border-color:var(--y)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end}
.layer{position:absolute;left:-4%;right:-4%;top:-4%;bottom:-4%;will-change:transform;pointer-events:none}
.layer img{width:100%;height:100%;object-fit:cover}
.l-bg img{object-position:62% 50%}
.l-mist{top:34%;bottom:auto;height:38%;opacity:.28;mix-blend-mode:screen}
.l-mist .mist{position:absolute;inset:0;width:200%;background:url(/assets/img/mist.webp) repeat-x 0 50%/50% 100%;animation:drift 90s linear infinite}
@keyframes drift{to{transform:translateX(-50%)}}
.l-fg{top:auto;bottom:-6%;height:62%}
.l-fg img{object-fit:cover;object-position:50% 100%}
.l-drone{left:auto;right:6%;top:13%;bottom:auto;width:min(34vw,520px)}
.l-drone img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:hover 7s ease-in-out infinite}
@keyframes hover{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-14px) rotate(1deg)}}
.shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:
  linear-gradient(90deg,rgba(10,2,2,.92) 0%,rgba(10,2,2,.62) 38%,rgba(10,2,2,0) 70%),
  linear-gradient(0deg,rgba(10,2,2,.95) 0%,rgba(10,2,2,0) 42%)}
.grid{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100% / 12) 25%;mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.25) 70%)}
.cross{position:absolute;z-index:4;width:22px;height:22px;pointer-events:none;opacity:.8}
.cross::before,.cross::after{content:"";position:absolute;background:var(--paper)}
.cross::before{left:50%;top:0;width:1px;height:100%}
.cross::after{top:50%;left:0;height:1px;width:100%}
.scan{position:absolute;top:0;bottom:0;z-index:4;width:1px;background:var(--y);box-shadow:0 0 18px 2px rgba(234,67,53,.55);left:0;animation:scan 11s cubic-bezier(.6,0,.4,1) infinite;opacity:0;pointer-events:none}
.scan span{position:absolute;top:84px;left:10px;white-space:nowrap;color:var(--y)}
@keyframes scan{0%{left:100%;opacity:0}8%{opacity:.9}55%{opacity:.9}62%{left:0;opacity:0}100%{left:0;opacity:0}}

.hero-in{position:relative;z-index:5;width:100%;padding:120px var(--gut) clamp(40px,7vh,84px)}
.axes{display:flex;flex-wrap:wrap;gap:8px 28px;margin-bottom:22px}
.axes b{color:var(--y);font-weight:700}
.axes span{color:var(--mute)}
h1{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-.005em;font-size:clamp(3.4rem,10.4vw,10.5rem);max-width:10.5ch}
h1 em{font-style:normal;color:var(--y)}
.lede{margin-top:26px;max-width:36rem;font-size:clamp(1.02rem,1.35vw,1.2rem);color:var(--gray)}
.lede strong{color:var(--paper);font-weight:500}
.hero-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:34px}

/* clock */
.clock{display:flex;align-items:stretch;border:1px solid var(--line);background:rgba(10,2,2,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.clock>div{padding:12px 16px}
.clock .t{font-family:var(--mono);font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;letter-spacing:.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.clock .c{color:var(--mute)}
.clock .diff{display:flex;align-items:center;background:var(--y);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:14px}
.clock .bj .t{color:var(--y)}

/* form */
.wl{display:flex;flex-wrap:wrap;gap:0;max-width:560px;width:100%}
.wl .f{display:flex;width:100%;border:1px solid var(--paper);background:rgba(10,2,2,.6)}
.wl input[type=email]{flex:1;min-width:0;background:transparent;border:0;color:var(--paper);font:inherit;font-size:16px;padding:16px 16px;outline:none}
.wl input::placeholder{color:#8F8484}
.wl button{border:0;background:var(--y);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:0 20px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background .2s}
.wl button:hover{background:var(--paper)}
.wl button[disabled]{opacity:.6;cursor:wait}
.wl .opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;width:100%}
.wl .opts label{cursor:pointer}
.wl .opts input{position:absolute;opacity:0;pointer-events:none}
.wl .opts span{display:inline-block;border:1px solid var(--line);padding:6px 10px;color:var(--mute);transition:.15s}
.wl .opts input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.wl .opts input:focus-visible+span{outline:2px solid var(--y);outline-offset:2px}
.wl .fine{margin-top:10px;color:#9C9191;font-size:13px;width:100%}
.wl .msg{margin-top:10px;width:100%;font-family:var(--mono);font-size:13px;min-height:1.2em}
.wl .msg.ok{color:var(--y)} .wl .msg.err{color:#FF8A7A}
.wl .hp{position:absolute;left:-9999px}
.wl input:focus-visible,.wl button:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.wl.done .f,.wl.done .opts{display:none}

/* ticker */
.ticker{background:var(--y);color:var(--ink);overflow:hidden;border-block:1px solid var(--ink);position:relative;z-index:6}
.ticker .track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker ul{display:flex;list-style:none}
.ticker li{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1;padding:14px 0;display:flex;align-items:center;white-space:nowrap}
.ticker li::after{content:"+";font-family:var(--mono);font-weight:700;font-size:.7em;margin:0 .8em}
@keyframes tick{to{transform:translateX(-50%)}}

/* sections */
section{position:relative}
.paper{background:var(--paper);color:var(--ink)}
.wrap{padding:clamp(72px,11vw,150px) var(--gut)}
.kicker{display:flex;justify-content:space-between;align-items:center;border-top:1px solid currentColor;padding-top:12px;margin-bottom:clamp(36px,6vw,72px)}
.big{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;line-height:.88;font-size:clamp(2.6rem,7vw,6.4rem);max-width:14ch}
.big mark{background:var(--y);color:var(--ink);padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(48px,7vw,96px);border-top:1px solid var(--line-ink)}
.steps li{list-style:none;padding:22px 22px 8px 0;border-right:1px solid var(--line-ink);margin-right:22px}
.steps li:last-child{border-right:0}
.steps .n{font-family:var(--mono);font-weight:700;font-size:13px;display:inline-block;background:var(--ink);color:var(--y);padding:3px 7px;margin-bottom:18px}
.steps h3{font-family:var(--display);font-stretch:75%;font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1;margin-bottom:10px}
.steps p{font-size:15.5px;color:#4A3D3D}

/* factory */
.factory{min-height:92vh;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.factory .layer img{object-position:70% 50%}
.factory .l-robot{left:auto;right:-4%;top:auto;bottom:-10%;width:min(40vw,560px);height:auto;z-index:2}
.factory .l-robot img{height:auto;object-fit:contain;filter:drop-shadow(-30px 20px 50px rgba(0,0,0,.6))}
.factory .shade{background:linear-gradient(90deg,rgba(10,2,2,.95) 0%,rgba(10,2,2,.7) 40%,rgba(10,2,2,0) 75%),linear-gradient(0deg,rgba(10,2,2,.9),rgba(10,2,2,0) 50%)}
.factory .wrap{position:relative;z-index:5;width:100%}
.axes2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);max-width:900px;margin-top:40px}
.axes2 article{border-top:2px solid var(--y);padding-top:16px}
.axes2 .tag{color:var(--y);margin-bottom:10px;display:block}
.axes2 h3{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(2rem,3.6vw,3.2rem);line-height:.9;margin-bottom:12px}
.axes2 p{color:var(--gray);max-width:30rem}

/* verticals */
.verts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px dashed var(--line-ink);border-left:1px dashed var(--line-ink)}
.verts li{list-style:none;border-right:1px dashed var(--line-ink);border-bottom:1px dashed var(--line-ink);padding:28px 24px 26px;display:flex;flex-direction:column;gap:18px;min-height:180px;position:relative}
.verts svg{width:44px;height:44px;stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.verts h3{font-family:var(--display);font-stretch:75%;font-weight:800;text-transform:uppercase;font-size:1.45rem;line-height:1}
.verts p{font-size:14.5px;color:#4A3D3D;margin-top:6px}
.verts .agro{background:var(--y)}
.verts .agro .flag{position:absolute;top:14px;right:14px;background:var(--ink);color:var(--y);padding:3px 7px}

.who{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.who ul{list-style:none;border-top:1px solid var(--line-ink)}
.who li{border-bottom:1px solid var(--line-ink);padding:14px 0;display:flex;justify-content:space-between;gap:16px;font-size:1.05rem}
.who li .mono{color:#6C5E5E}

/* cta */
.cta{background:var(--y);color:var(--ink)}
.cta .big{max-width:16ch}
.cta .wl{margin-top:40px}
.cta .wl .f{border-color:var(--ink);background:var(--paper)}
.cta .wl input[type=email]{color:var(--ink)}
.cta .wl button{background:var(--ink);color:var(--y)}
.cta .wl button:hover{background:#000}
.cta .wl .opts span{border-color:rgba(16,4,4,.35);color:var(--ink)}
.cta .wl .opts input:checked+span{background:var(--ink);color:var(--y)}
.cta .wl .fine{color:#5A4545}
.cta .wl .msg.ok{color:var(--ink)} .cta .wl .msg.err{color:var(--ink);font-weight:700}
.cta-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end}
.cta .mark{width:100%;max-width:420px;justify-self:end}

footer{padding:28px var(--gut) 36px;display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center;color:var(--mute);border-top:1px solid var(--line)}
footer a{text-decoration:none;border-bottom:1px solid var(--line)}
footer a:hover{color:var(--y);border-color:var(--y)}
footer .logo{width:48px}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.hero .rv{transition-delay:var(--d,0s)}

@media (max-width:960px){
  .steps{grid-template-columns:1fr 1fr}
  .steps li:nth-child(2){border-right:0}
  .verts{grid-template-columns:1fr 1fr}
  .who,.cta-grid{grid-template-columns:1fr}
  .cta .mark{justify-self:start;max-width:220px}
}
@media (max-width:640px){
  body{font-size:16px}
  .bar .status .mono.long{display:none}
  .hero{align-items:flex-end}
  .l-bg img{object-position:50% 50%}
  .l-drone{width:66vw;right:-10%;top:7%}
  .l-fg{height:34%}
  .l-bg img{object-position:50% 30%}
  .shade{background:linear-gradient(0deg,rgba(10,2,2,.96) 0%,rgba(10,2,2,.78) 40%,rgba(10,2,2,.25) 62%,rgba(10,2,2,0) 78%)}
  .cross{display:none}
  .hero-in{padding-top:30vh}
  .axes{gap:4px 16px;margin-bottom:16px}
  h1{font-size:clamp(3rem,15vw,4.6rem)}
  .clock>div{padding:10px 12px}
  .wl button{padding:0 14px}
  .steps,.verts,.axes2{grid-template-columns:1fr}
  .steps li{border-right:0;margin-right:0;border-bottom:1px solid var(--line-ink)}
  .factory .l-robot{width:70vw;right:-18%;bottom:auto;top:4%;opacity:.55}
  .grid{background-size:calc(100% / 4) 20%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}