/* ============================================================
   BECOMING — becomingbuilding.com
   1. Fontes (Geist auto-hospedada)  2. Reset  3. Tokens
   4. Base do site  5. Refinamentos e interatividade
   ============================================================ */

/* ---------- 1. FONTES ---------- */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-ff2310f5.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-875ccdd4.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-52306abf.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-001175b1.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/geist-98bbbccb.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Fallback';src:local("Arial");ascent-override:95.94%;descent-override:28.16%;line-gap-override:0%;size-adjust:104.76%}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;border:0 solid}
html{-webkit-text-size-adjust:100%;line-height:1.5;scroll-behavior:smooth;scroll-padding-top:82px}
body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,ol,ul,pre,hr{margin:0}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
ol,ul,menu{list-style:none;padding:0}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
img,svg,video,canvas{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
button{font:inherit;color:inherit;margin:0;padding:0;background:none;cursor:pointer}

/* ---------- 3. TOKENS ---------- */
:root{
  --black:#050505;--white:#f7f7f5;--line:#292929;--light-line:#d9d9d6;
  --font-sans:'Geist','Geist Fallback',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.55s;
  --header-h:82px;
}

/* ---------- 4. BASE ---------- */
body{margin:0;background:var(--white);color:var(--black);font-family:var(--font-sans);overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:#111;color:#fff}

/* foco visivel e consistente */
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hero :focus-visible,.capabilities :focus-visible,.system :focus-visible,.contact :focus-visible{outline-color:#fff}

/* pular para o conteudo */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#050505;color:#fff;padding:14px 20px;font-size:12px}
.skip-link:focus{left:0}

/* barra de progresso da leitura */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:#050505;z-index:60;will-change:transform}

/* --- header --- */
.site-header{height:var(--header-h);padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d5d5d5;background:rgba(247,247,245,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:50;transition:transform .45s var(--ease),box-shadow .3s,height .3s}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-stuck{box-shadow:0 1px 24px rgba(0,0,0,.07)}
.wordmark{font-size:19px;font-weight:800;letter-spacing:-.055em;display:inline-flex;align-items:baseline}
.wordmark span{color:#777;transition:color .3s,transform .3s}
.wordmark:hover span{color:#050505;transform:translateY(-2px)}
.site-header nav{display:flex;gap:34px;font-size:12px}
.site-header nav a,.footer-links a{position:relative}
.site-header nav a:after,.footer-links a:after{content:"";position:absolute;height:1px;left:0;right:100%;bottom:-5px;background:currentColor;transition:right .25s var(--ease)}
.site-header nav a:hover:after,.footer-links a:hover:after,.site-header nav a[aria-current="true"]:after{right:0}
.site-header nav a{color:#666;transition:color .25s}
.site-header nav a:hover,.site-header nav a[aria-current="true"]{color:#050505}
.header-cta{font-size:12px;font-weight:650;background:#050505;color:#fff;padding:13px 17px;display:inline-flex;align-items:center;position:relative;overflow:hidden;transition:color .3s}
.header-cta>*{position:relative;z-index:1}
.header-cta span{margin-left:15px;transition:transform .35s var(--ease)}
.header-cta:before{content:"";position:absolute;inset:0;background:#fff;transform:translateY(101%);transition:transform .4s var(--ease)}
.header-cta:hover{color:#050505}
.header-cta:hover:before{transform:translateY(0)}
.header-cta:hover span{transform:translate(4px,-4px)}

/* --- botao e painel do menu mobile --- */
.menu-toggle{display:none;width:42px;height:42px;position:relative;z-index:120;flex:none}
.menu-toggle i{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .25s}
.menu-toggle i:nth-child(1){top:16px}
.menu-toggle i:nth-child(2){bottom:16px}
/* o header cria contexto de empilhamento (z-index:50); com o menu aberto ele
   precisa ficar acima do overlay para o botao de fechar continuar clicavel */
body.menu-open .site-header{z-index:120;background:transparent;border-bottom-color:transparent;backdrop-filter:none}
body.menu-open .wordmark{color:#fff}
body.menu-open .header-cta{opacity:0;pointer-events:none}
body.menu-open .menu-toggle{color:#fff}
body.menu-open .menu-toggle i:nth-child(1){transform:translateY(4.75px) rotate(45deg)}
body.menu-open .menu-toggle i:nth-child(2){transform:translateY(-4.75px) rotate(-45deg)}
/* revelacao por transform: o Safari tem bug conhecido animando clip-path em
   elemento position:fixed, e o menu abria vazio. transform e solido em todos. */
.mobile-nav{position:fixed;inset:0;background:#050505;color:#fff;z-index:110;display:flex;flex-direction:column;justify-content:center;padding:0 7vw;gap:6px;transform:translateY(-100%);visibility:hidden;transition:transform .55s var(--ease),visibility 0s linear .55s}
body.menu-open .mobile-nav{transform:translateY(0);visibility:visible;transition:transform .55s var(--ease),visibility 0s}
.mobile-nav a{font-size:clamp(34px,9vw,58px);letter-spacing:-.05em;font-weight:560;line-height:1.18;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
body.menu-open .mobile-nav a{opacity:1;transform:none}
body.menu-open .mobile-nav a:nth-child(1){transition-delay:.16s}
body.menu-open .mobile-nav a:nth-child(2){transition-delay:.22s}
body.menu-open .mobile-nav a:nth-child(3){transition-delay:.28s}
body.menu-open .mobile-nav a:nth-child(4){transition-delay:.34s}
body.menu-open .mobile-nav a:nth-child(5){transition-delay:.4s}
.mobile-nav a span{color:#666;font-size:11px;letter-spacing:.14em;margin-right:16px;vertical-align:middle}
.mobile-nav-foot{position:absolute;left:7vw;right:7vw;bottom:44px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#777;border-top:1px solid #262626;padding-top:20px}
body.menu-open{overflow:hidden}

/* --- hero --- */
.hero{background:var(--black);color:#fff;min-height:calc(100svh - var(--header-h));padding:38px 4vw 48px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.hero-meta,.contact-meta{display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.14em;font-size:9px;color:#aaa;position:relative;z-index:2}
.hero h1{font-size:clamp(68px,10.7vw,174px);line-height:.82;letter-spacing:-.078em;font-weight:590;margin:8vh 0;position:relative;z-index:2}
.hero h1 em,.contact h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #fff}
.hero-bottom{display:flex;align-items:end;justify-content:space-between;position:relative;z-index:2;gap:30px}
.hero-bottom p{max-width:610px;font-size:17px;line-height:1.65;color:#bbb;margin:0}
.round-link{width:58px;height:58px;border:1px solid #666;border-radius:50%;display:grid;place-items:center;font-size:19px;transition:.35s var(--ease);flex:none}
.round-link:hover{background:#fff;color:#000;transform:rotate(-45deg) scale(1.06);border-color:#fff}
.hero-orbit{position:absolute;width:min(40vw,560px);aspect-ratio:1;border:1px solid #333;border-radius:50%;right:6vw;top:18%;display:grid;place-items:center;animation:float 7s ease-in-out infinite;will-change:transform}
.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border:1px solid #252525;border-radius:50%}
.hero-orbit:before{inset:12%}
.hero-orbit:after{inset:29%}
.hero-orbit>span{font-size:clamp(100px,17vw,260px);font-weight:800;letter-spacing:-.1em;color:#101010}
.hero-orbit i{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;right:13%;top:19%;box-shadow:0 0 28px #fff;animation:pulse 2.5s ease-in-out infinite}
/* brilho que segue o ponteiro no hero */
.hero:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;pointer-events:none;left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.055),transparent 68%);opacity:0;transition:opacity .5s;z-index:1}
.hero:hover:before{opacity:1}
/* entrada das linhas do titulo */
/* a mascara corta o que passa do box: o descendente do 'g' e a tinta do ultimo
   glifo (o letter-spacing negativo encurta o avanco). O padding da o espaco e a
   margem negativa devolve a medida, entao o layout nao muda. */
.line-mask{display:block;overflow:hidden;padding:0 .18em .3em 0;margin:0 -.18em -.3em 0}
.line-mask>span{display:block}
.js .line-mask>span{transform:translateY(105%);transition:transform 1.05s var(--ease-out)}
.is-ready .line-mask>span{transform:none}
.is-ready .line-mask:nth-child(2)>span{transition-delay:.1s}
.js .hero-meta,.js .hero-bottom,.js .hero-orbit{opacity:0;transition:opacity .9s var(--ease) .45s}
.is-ready .hero-meta,.is-ready .hero-bottom,.is-ready .hero-orbit{opacity:1}

/* --- ticker --- */
.ticker{overflow:hidden;border-bottom:1px solid #d2d2d0;background:#fff}
.ticker>div{display:flex;align-items:center;width:max-content;gap:35px;padding:21px 0;animation:ticker 35s linear infinite}
.ticker:hover>div{animation-play-state:paused}
.ticker span{font-size:11px;letter-spacing:.16em}
.ticker b{font-weight:400;color:#777}

/* --- secoes --- */
.section{padding:125px 4vw}
.section-index{font-size:9px;letter-spacing:.17em;color:#777;padding-top:9px}
.section-index.light{color:#888}

.company{display:grid;grid-template-columns:1fr 3fr;gap:4vw}
.company h2,.section-top h2,.model h2,.principles h2{font-size:clamp(48px,6.4vw,96px);font-weight:560;line-height:.94;letter-spacing:-.062em;margin:0}
.company h2 span,.system-copy h2 span{color:#999}
.company-columns{display:grid;grid-template-columns:1fr 1fr;gap:7vw;margin-top:70px;max-width:970px}
.company-columns p,.section-top p,.model-intro>p,.principles-copy>p,.system-copy p{font-size:15px;line-height:1.75;color:#666;margin:0}

/* --- capacidades --- */
.capabilities{background:#090909;color:#fff}
.section-top{display:grid;grid-template-columns:1fr 3fr;gap:4vw;margin-bottom:75px}
.section-top>div:last-child{display:flex;align-items:end;justify-content:space-between;gap:6vw}
.section-top p{color:#999;max-width:370px}
.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);border-left:1px solid var(--line);border-top:1px solid var(--line)}
.capability-card{min-height:390px;padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;transition:background .45s var(--ease),color .45s var(--ease);position:relative;overflow:hidden;isolation:isolate}
/* holofote que segue o cursor */
.capability-card:before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;left:var(--cx,50%);top:var(--cy,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.09),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none;z-index:-1}
.capability-card:hover:before{opacity:1}
.capability-card:hover{background:#fff;color:#050505}
.card-head{display:flex;justify-content:space-between;font-size:10px;color:#777}
.card-head span:last-child{font-size:18px;transition:transform .35s var(--ease)}
.capability-card h3{font-size:clamp(27px,2.8vw,42px);line-height:1;letter-spacing:-.045em;font-weight:540;margin:75px 0 22px;transition:transform .45s var(--ease)}
.capability-card:hover h3{transform:translateX(6px)}
.capability-card p{font-size:13px;line-height:1.65;color:#999;max-width:370px;transition:color .45s}
.capability-card:hover p{color:#555}
.tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:7px}
.tags span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;border:1px solid #383838;padding:7px 9px;transition:border-color .45s}
.capability-card:hover .tags span{border-color:#bbb}

/* --- modelo --- */
.model{display:grid;grid-template-columns:1fr 1.25fr;gap:10vw}
.model-intro h2,.principles-copy h2{margin:38px 0}
.model-intro>p{max-width:480px}
.model-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--light-line)}
.model-list li{display:grid;grid-template-columns:45px 120px 1fr 22px;gap:22px;padding:29px 0;border-bottom:1px solid var(--light-line);align-items:start;transition:padding .35s var(--ease);position:relative}
.model-list li:after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:#050505;transition:width .5s var(--ease)}
.model-list li:hover:after{width:100%}
.model-list li:hover{padding-left:12px}
.model-list li>span{font-size:9px;color:#888;padding-top:6px;transition:color .3s}
.model-list li:hover>span{color:#050505}
.model-list h3{font-size:22px;margin:0;font-weight:570}
.model-list p{font-size:13px;line-height:1.6;color:#666;margin:3px 0 0}
.model-list i{font-style:normal;color:#777;transition:transform .35s var(--ease),color .3s}
.model-list li:hover i{transform:translateX(5px);color:#050505}

/* --- sistema operacional --- */
.system{background:#111;color:#fff;min-height:800px;display:grid;grid-template-columns:.8fr 1.5fr 1fr;gap:4vw;align-items:center;overflow:hidden}
.system-stage{position:relative;width:min(48vw,650px);aspect-ratio:1;display:grid;place-items:center}
.system-ring{position:absolute;border:1px solid #3a3a3a;border-radius:50%;animation:spin 30s linear infinite}
.system-ring.outer{inset:0}
.system-ring.middle{inset:20%;animation-direction:reverse;animation-duration:22s}
.ring-label{position:absolute;background:#111;color:#aaa;text-transform:uppercase;letter-spacing:.13em;font-size:8px;padding:5px}
.label-a{left:8%;top:11%}.label-b{right:3%;bottom:22%}.label-c{right:-2%;top:20%}.label-d{left:-2%;bottom:20%}
.system-core{width:27%;aspect-ratio:1;border-radius:50%;background:#fff;color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2}
.system-core:after{content:"";position:absolute;inset:-14%;border-radius:50%;border:1px solid rgba(255,255,255,.16);animation:halo 3.4s ease-out infinite}
.system-core strong{font-size:clamp(55px,8vw,110px);line-height:.8;letter-spacing:-.1em}
.system-core span{font-size:7px;letter-spacing:.18em;margin-top:12px}
.system-copy h2{font-size:clamp(58px,7vw,105px);line-height:.83;letter-spacing:-.07em;font-weight:550;margin:0 0 45px}
.system-copy p{color:#999;max-width:400px}

/* --- principios --- */
.principles{display:grid;grid-template-columns:1fr 1.25fr;gap:10vw}
.principles-copy>p{max-width:510px}
.principle-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--light-line);border-left:1px solid var(--light-line)}
.principle-grid article{min-height:260px;padding:25px;border-right:1px solid var(--light-line);border-bottom:1px solid var(--light-line);transition:background .4s var(--ease)}
.principle-grid article:hover{background:#efefec}
.principle-grid article>span{font-size:9px;color:#888}
.principle-grid h3{font-size:20px;margin:50px 0 14px}
.principle-grid p{font-size:13px;color:#666;line-height:1.65}

/* --- contato --- */
.contact{padding:55px 4vw 75px;background:#050505;color:#fff}
.contact h2{font-size:clamp(65px,10vw,155px);line-height:.83;letter-spacing:-.075em;font-weight:570;margin:100px 0}
.contact-bottom{display:flex;justify-content:space-between;align-items:end;border-top:1px solid #333;padding-top:28px;gap:30px}
.contact-bottom p{font-size:14px;line-height:1.7;color:#aaa;max-width:480px;margin:0}
.contact-bottom a.mail-link{background:#fff;color:#000;min-width:260px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:650;transition:background .25s,transform .25s var(--ease)}
.contact-bottom a.mail-link:hover{background:#d7d7d7;transform:translateY(-2px)}

/* --- rodape --- */
footer{background:#fff;padding:75px 4vw 30px;display:grid;grid-template-columns:1.4fr 1fr .6fr;gap:5vw}
.footer-wordmark{font-size:clamp(30px,4vw,58px)}
footer>p{font-size:13px;color:#777}
.footer-links{display:flex;flex-direction:column;align-items:flex-start;gap:14px;font-size:12px}
.footer-bottom{grid-column:1/-1;border-top:1px solid var(--light-line);margin-top:65px;padding-top:25px;display:flex;justify-content:space-between;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#777}

/* ---------- 5. REVELACAO AO ROLAR ---------- */
.js [data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}
.js [data-reveal-group]>*{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
[data-reveal-group].is-visible>*{opacity:1;transform:none}
[data-reveal-group].is-visible>*:nth-child(1){transition-delay:.04s}
[data-reveal-group].is-visible>*:nth-child(2){transition-delay:.1s}
[data-reveal-group].is-visible>*:nth-child(3){transition-delay:.16s}
[data-reveal-group].is-visible>*:nth-child(4){transition-delay:.22s}
[data-reveal-group].is-visible>*:nth-child(5){transition-delay:.28s}
[data-reveal-group].is-visible>*:nth-child(6){transition-delay:.34s}

/* ---------- ANIMACOES ---------- */
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes float{50%{transform:translateY(-12px)}}
@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes halo{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.3);opacity:0}}

/* ---------- RESPONSIVO ---------- */
@media(max-width:950px){
  .site-header nav{display:none}
  .menu-toggle{display:block}
  .header-cta{margin-left:auto;margin-right:20px}
  .section{padding:90px 5vw}
  .company,.section-top,.model,.principles{grid-template-columns:1fr}
  .company,.model,.principles{gap:55px}
  .section-top{gap:35px}
  .capability-grid{grid-template-columns:1fr 1fr}
  .system{grid-template-columns:1fr 1fr}
  .system>.section-index{grid-column:1/-1}
  .system-stage{width:55vw}
  .company-columns{margin-top:50px}
}
@media(max-width:620px){
  :root{--header-h:70px}
  .site-header{padding:0 5vw}
  .header-cta{display:none}
  .hero{padding:25px 5vw 32px}
  .hero-meta span:last-child{display:none}
  .hero h1{font-size:18vw;line-height:.87;margin:7vh 0}
  .hero-bottom{align-items:flex-start;gap:20px}
  .hero-bottom p{font-size:14px;max-width:285px}
  .round-link{width:48px;height:48px}
  /* o orbe volta para o lado, como no desktop; so o ponto e reposicionado
     para dentro da tela, sobre o anel */
  .hero-orbit{width:90vw;right:-40vw;top:20%}
  .hero-orbit i{right:50%;top:-1.8%}
  .ticker>div{gap:26px}
  .section{padding:75px 5vw}
  .company h2,.section-top h2,.model h2,.principles h2{font-size:14vw}
  .company-columns{grid-template-columns:1fr;gap:22px;margin-top:40px}
  .section-top>div:last-child{display:block}
  .section-top p{margin-top:25px}
  .capability-grid{grid-template-columns:1fr}
  .capability-card{min-height:330px;padding:24px}
  .capability-card h3{margin-top:55px}
  .model-list{margin-top:10px}
  .model-list li{grid-template-columns:35px 78px 1fr}
  .model-list li i{display:none}
  .model-list p{grid-column:2/-1}
  .system{grid-template-columns:1fr;min-height:auto;gap:45px}
  .system-stage{width:90vw;left:-2vw}
  .system-copy h2{font-size:19vw}
  .principle-grid{grid-template-columns:1fr}
  .principle-grid article{min-height:220px}
  .contact{padding:40px 5vw 55px}
  .contact-meta span:last-child{display:none}
  .contact h2{font-size:18vw;margin:80px 0}
  .contact-bottom{display:block}
  .contact-bottom p{margin-bottom:28px}
  .contact-bottom a.mail-link{min-width:0;width:100%}
  footer{grid-template-columns:1fr;padding:55px 5vw 25px}
  .footer-links{margin-top:20px}
  .footer-bottom{margin-top:35px;flex-direction:column;gap:12px}
  .footer-bottom a{margin-top:8px}
}

/* ---------- MARCAS GRAFICAS ---------- */
.arrow-mark{width:16px;height:16px;display:inline-block;position:relative;border:0;flex:none}
.arrow-mark:before{content:"";position:absolute;width:10px;height:10px;right:0;top:0;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.arrow-mark:after{content:"";position:absolute;width:19px;height:1.5px;background:currentColor;left:1px;bottom:1px;transform:rotate(-45deg);transform-origin:left center}
.spark-mark{width:14px;height:14px;display:block;flex:none;background:linear-gradient(#111,#111) center/100% 1px no-repeat,linear-gradient(90deg,#111,#111) center/1px 100% no-repeat,linear-gradient(45deg,transparent 46%,#111 47% 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,#111 47% 53%,transparent 54%)}
@media(max-width:620px){.hero-meta span:last-child{display:inline}.card-head .arrow-mark{display:inline-block}}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticker>div,.hero-orbit,.hero-orbit i,.system-ring,.system-core:after{animation:none}
  .capability-card,.model-list li,.round-link,.site-header,.header-cta:before{transition:none}
  .js [data-reveal],.js [data-reveal-group]>*{opacity:1!important;transform:none!important;transition:none}
  .js .line-mask>span{transform:none}
  .js .hero-meta,.js .hero-bottom,.js .hero-orbit{opacity:1}
  .mobile-nav{transition:none}
  .mobile-nav a{opacity:1;transform:none;transition:none}
}

/* ---------- 404 ---------- */
.notfound{min-height:100svh;background:var(--black);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 6vw;gap:26px}
.notfound h1{font-size:clamp(80px,17vw,240px);line-height:.8;letter-spacing:-.08em;font-weight:590}
.notfound p{color:#999;font-size:16px;max-width:440px}
.notfound a{align-self:flex-start;border:1px solid #555;padding:16px 24px;font-size:12px;display:inline-flex;gap:16px;align-items:center;transition:.3s var(--ease)}
.notfound a:hover{background:#fff;color:#000;border-color:#fff}