/* graro — site institucional. Identidade v1.0: verde #0E2A22, marfim #F4F0E6, ouro #C4A464; Jost (títulos) e Manrope (texto). */
:root{
  --v950:#0B211B;--v900:#0E2A22;--v800:#15392E;--v700:#1F4D3F;--v500:#3A7560;
  --salvia:#C8D5CB;--marfim:#F4F0E6;--ouro:#C4A464;--ouro7:#7A5F2A;
  --ink:#F4F0E6;--muted:#a9bcb1;--line:rgba(200,213,203,.14);--glass:rgba(21,57,46,.55);
  --titulos:'Jost','Helvetica Neue',Arial,sans-serif;--texto:'Manrope','Helvetica Neue',Arial,sans-serif;
  --max:1240px;--r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--v950)}
body{margin:0;background:var(--v950);color:var(--ink);font:16px/1.6 var(--texto);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
::selection{background:var(--ouro);color:var(--v950)}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.hidden{display:none!important}

/* Tipografia */
h1,h2,h3,.display{font-family:var(--titulos);font-weight:300;letter-spacing:-.01em;line-height:1.02;margin:0}
.display{font-size:clamp(52px,9.5vw,148px)}
h2{font-size:clamp(38px,5.6vw,80px)}
h3{font-size:clamp(22px,2.2vw,30px);font-weight:400;line-height:1.15}
.lead{font-size:clamp(17px,1.6vw,21px);color:var(--salvia);max-width:640px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--texto);letter-spacing:.28em;text-transform:uppercase;color:var(--ouro)}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--ouro)}
.dot{color:var(--ouro)}
.gold{color:var(--ouro)}
.muted{color:var(--muted)}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:transparent;border-radius:999px;padding:14px 24px;font:600 15px/1 var(--texto);text-decoration:none;transition:background .25s,border-color .25s,color .25s,transform .25s}
.btn:hover{border-color:var(--ouro);transform:translateY(-2px)}
.btn.primary{background:var(--ouro);border-color:var(--ouro);color:var(--v950)}
.btn.primary:hover{background:#d4b679}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}

/* Cabeçalho (sem backdrop-filter: o menu do telemóvel é irmão do cabeçalho) */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.top.scrolled{background:rgba(11,33,27,.92);border-color:var(--line)}
.top .bar{display:flex;align-items:center;gap:28px;height:78px}
.logo{display:inline-flex;align-items:flex-end;gap:10px;text-decoration:none}
.logo svg{width:96px;height:auto}
.logo span{font:400 15px/1 var(--titulos);color:var(--salvia);padding-bottom:5px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font:500 14.5px/1 var(--texto);text-decoration:none;color:var(--salvia);position:relative;padding:6px 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--ouro);transition:right .3s}
.nav a:hover,.nav a.on{color:var(--marfim)}
.nav a:hover::after,.nav a.on::after{right:0}
.top .btn{padding:11px 18px;font-size:14px}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;position:relative}
.burger span{position:absolute;left:14px;right:14px;height:1.5px;background:var(--marfim);transition:transform .3s,top .3s}
.burger span:first-child{top:18px}.burger span:last-child{top:26px}
.menu-open .burger span:first-child{top:22px;transform:rotate(45deg)}
.menu-open .burger span:last-child{top:22px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:49;background:var(--v950);padding:110px 24px 40px;display:flex;flex-direction:column;gap:6px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.menu-open .mmenu{opacity:1;visibility:visible}
.mmenu a{font:300 40px/1.25 var(--titulos);text-decoration:none;color:var(--marfim);border-bottom:1px solid var(--line);padding:10px 0}
.mmenu .btn{margin-top:22px;justify-content:center;font-size:16px}
@media(max-width:960px){.nav,.top .bar>.btn{display:none}.burger{display:block}}

/* Hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:140px 0 70px;overflow:hidden}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,transparent 0,rgba(11,33,27,.35) 55%,var(--v950) 100%);pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero .display{margin:22px 0 26px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.scroll-hint{position:absolute;right:max(20px,calc((100vw - var(--max))/2));bottom:70px;z-index:2;writing-mode:vertical-rl;font:600 11px/1 var(--texto);letter-spacing:.3em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:12px}
.scroll-hint::after{content:"";width:1px;height:60px;background:linear-gradient(var(--ouro),transparent);animation:drip 2.2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.page-hero{min-height:78vh}
.mono-hero{position:absolute;z-index:1;right:max(-6vw,calc((100vw - var(--max))/2 - 6vw));top:54%;width:min(56vw,740px);transform:translateY(-46%);color:rgba(244,240,230,.16);pointer-events:none}
.mono-hero .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s cubic-bezier(.6,0,.2,1) .3s forwards}
.mono-hero .draw.d{animation-delay:1.2s}
.mono-hero .pt{fill:var(--ouro);opacity:0;transform-box:fill-box;transform-origin:center;animation:pop .9s cubic-bezier(.2,1.6,.4,1) 2.9s forwards,glowpt 3.5s ease-in-out 3.8s infinite}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes glowpt{0%,100%{filter:drop-shadow(0 0 2px rgba(196,164,100,.6))}50%{filter:drop-shadow(0 0 9px rgba(196,164,100,1))}}
@media(max-width:860px){.mono-hero{width:120vw;right:-40vw;top:34%;color:rgba(244,240,230,.08)}}
@media(max-width:700px){.scroll-hint{display:none}.hero{padding-bottom:50px}}

/* Faixa em movimento */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--v900)}
.marquee .track{display:flex;gap:56px;width:max-content;animation:slide 32s linear infinite}
.marquee span{font:300 clamp(28px,4vw,52px)/1 var(--titulos);white-space:nowrap;color:var(--salvia)}
.marquee span b{font-weight:300;color:var(--ouro)}
@keyframes slide{to{transform:translateX(-50%)}}

/* Secções */
section{position:relative}
.sec{padding:clamp(80px,12vw,160px) 0}
.sec-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:60px}
.sec-head p{margin:0}
@media(max-width:860px){.sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}}
.alt{background:var(--v900)}
.pattern{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64'%3E%3Crect x='29' y='29' width='6' height='6' fill='%2315392E'/%3E%3C/svg%3E")}

/* Revelar ao rolar */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* Frentes (cartões grandes) */
.fronts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.front{position:relative;min-height:420px;border-radius:var(--r);overflow:hidden;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;background:var(--v800);border:1px solid var(--line);isolation:isolate;transition:transform .5s,border-color .5s}
.front:hover{transform:translateY(-6px);border-color:rgba(196,164,100,.5)}
.front .bg{position:absolute;inset:0;z-index:-1;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.front:hover .bg{transform:scale(1.06)}
.front .num{position:absolute;top:28px;left:34px;font:300 15px/1 var(--titulos);color:var(--muted)}
.front .go{position:absolute;top:24px;right:24px;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,transform .3s}
.front:hover .go{background:var(--ouro);color:var(--v950);transform:rotate(-45deg)}
.front h3{font:300 clamp(34px,3.6vw,52px)/1 var(--titulos)}
.front p{color:var(--salvia);margin:12px 0 0;max-width:430px}
@media(max-width:860px){.fronts{grid-template-columns:1fr}.front{min-height:340px;padding:26px}.front .num{left:26px}}

/* Números */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat{background:var(--v950);padding:34px 28px}
.stat strong{display:block;font:300 clamp(44px,5vw,72px)/1 var(--titulos);color:var(--marfim)}
.stat span{display:block;margin-top:10px;color:var(--muted);font-size:14px}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Grelha de cartões */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);padding:28px;transition:transform .35s,border-color .35s,background .35s;overflow:hidden}
.card::before{content:"";position:absolute;inset:-1px;background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%),rgba(196,164,100,.16),transparent 45%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover{transform:translateY(-4px);border-color:rgba(196,164,100,.35)}
.card:hover::before{opacity:1}
.card .ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:rgba(196,164,100,.12);color:var(--ouro);margin-bottom:22px}
.card .ic svg{width:26px;height:26px}
.card h3{font-size:24px;margin-bottom:10px}
.card p{margin:0;color:var(--salvia);font-size:15px}
.card .more{margin-top:18px;display:inline-flex;gap:8px;align-items:center;font:600 13px/1 var(--texto);color:var(--ouro);background:none;border:0;padding:0}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.cards{grid-template-columns:1fr}}
svg.s{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* Carrossel */
.carousel{position:relative}
.car-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
.car-track::-webkit-scrollbar{display:none}
.car-track>*{scroll-snap-align:start;flex:0 0 auto}
.car-nav{display:flex;align-items:center;gap:10px;margin-top:26px}
.car-nav button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:transparent;transition:background .25s,border-color .25s}
.car-nav button:hover{border-color:var(--ouro);background:rgba(196,164,100,.1)}
.car-bar{flex:1;height:1px;background:var(--line);position:relative;margin-left:12px}
.car-bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--ouro);width:20%;transition:left .3s,width .3s}

/* Dispositivos (mockups do sistema) */
.devices{position:relative;height:clamp(420px,52vw,680px);perspective:1800px}
.laptop{position:absolute;left:0;right:12%;top:0;transform:rotateY(10deg) rotateX(4deg);transform-origin:left center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.devices:hover .laptop{transform:rotateY(4deg) rotateX(2deg)}
.screen{background:#f6f7f9;border-radius:14px;overflow:hidden;border:10px solid #101f1a;box-shadow:0 50px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);aspect-ratio:16/10}
.laptop .base{height:16px;margin:0 -5%;background:linear-gradient(#24342e,#0c1814);border-radius:0 0 18px 18px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.phone{position:absolute;right:0;bottom:0;width:min(32%,240px);transform:rotateY(-14deg) rotateZ(2deg);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.devices:hover .phone{transform:rotateY(-6deg)}
.phone .screen{aspect-ratio:9/19;border-width:8px;border-radius:30px}
@media(max-width:700px){.laptop{right:0;transform:none}.phone{width:38%;right:-4px;bottom:-30px;transform:none}.devices{height:auto;padding-bottom:40px}.laptop{position:relative}}

/* Interface fictícia dentro dos ecrãs */
.ui{display:grid;grid-template-columns:18% 1fr;height:100%;font:500 clamp(5px,.72vw,10px)/1.35 var(--texto);color:#1d2939}
.ui .side{background:var(--v900);color:var(--salvia);padding:8% 10%;display:flex;flex-direction:column;gap:6%}
.ui .side b{display:block;color:var(--marfim);font:400 1.6em/1 var(--titulos);margin-bottom:12%}
.ui .side i{font-style:normal;padding:5% 7%;border-radius:5px}
.ui .side i.on{background:rgba(196,164,100,.18);color:var(--marfim)}
.ui .main{padding:3% 3.5%;display:flex;flex-direction:column;gap:3%;overflow:hidden}
.ui .row{display:flex;gap:2.4%}
.ui .k{flex:1;background:#fff;border:1px solid #e6e8ec;border-radius:7px;padding:3% 4%}
.ui .k small{display:block;color:#667085;font-size:.85em}
.ui .k strong{display:block;font:500 1.9em/1.15 var(--titulos);color:var(--v900);margin-top:4%}
.ui .k em{font-style:normal;color:#12b76a;font-size:.85em}
.ui .panel{background:#fff;border:1px solid #e6e8ec;border-radius:7px;padding:3% 3.5%;flex:1;min-height:0}
.ui .panel h4{margin:0 0 3%;font:600 1.05em/1 var(--texto)}
.ui .bars{display:flex;align-items:flex-end;gap:3%;height:72%}
.ui .bars span{flex:1;background:linear-gradient(var(--v500),var(--v900));border-radius:3px 3px 0 0;transform-origin:bottom;animation:grow 1.6s cubic-bezier(.2,.7,.2,1) both}
.ui .bars span.g{background:linear-gradient(#d9bd84,var(--ouro))}
@keyframes grow{from{transform:scaleY(0)}}
.ui table{width:100%;border-collapse:collapse}
.ui td{padding:2.2% 1%;border-bottom:1px solid #eef0f3;white-space:nowrap}
.ui .tag{display:inline-block;padding:1px 6px;border-radius:99px;font-size:.85em;background:#ecfdf3;color:#067647}
.ui .tag.w{background:#fffaeb;color:#b54708}
.ui .tag.b{background:#eff8ff;color:#175cd3}
.ui .kan{display:flex;gap:2.4%;height:100%}
.ui .kan>div{flex:1;background:#f2f4f7;border-radius:7px;padding:3%;display:flex;flex-direction:column;gap:5%}
.ui .kan p{margin:0;background:#fff;border-radius:5px;padding:7% 8%;box-shadow:0 1px 2px rgba(16,24,40,.06)}
.ui .kan h5{margin:0 0 3%;font-size:1em;color:#475467}
.pui{height:100%;background:#f6f7f9;font:500 clamp(6px,.9vw,11px)/1.35 var(--texto);color:#1d2939;display:flex;flex-direction:column}
.pui .ph{background:var(--v900);color:var(--marfim);padding:16% 9% 8%;font:400 1.4em/1.1 var(--titulos)}
.pui .ph small{display:block;color:var(--salvia);font:500 .7em/1.4 var(--texto);margin-top:4px}
.pui .pl{padding:7%;display:flex;flex-direction:column;gap:6px}
.pui .pl div{background:#fff;border-radius:9px;padding:8% 9%;border:1px solid #eaecf0}
.pui .pl b{display:block;font-weight:700}
.pui .pl span{color:#667085;font-size:.9em}

/* Réplica do aspeto real do graro sistemas (manager): fundo #f5f6f8, cartões brancos r14, Inter, separadores amarelos #fbbf24 */
.sys{--b:#f5f6f8;--k:#0f172a;--m:#64748b;--l:#e6e8ec;--y:#fbbf24;display:grid;grid-template-columns:17.5% 1fr;height:100%;background:var(--b);color:var(--k);font:400 clamp(4px,.86vw,10.4px)/1.35 Inter,'Segoe UI',Roboto,Arial,sans-serif;letter-spacing:-.005em;text-align:left}
.sys .sb{background:#f5f6f8;border-right:1px solid var(--l);padding:1.1em .9em;display:flex;flex-direction:column;gap:.35em;overflow:hidden}
.sys .brand{display:flex;align-items:center;gap:.7em;margin-bottom:1.1em}
.sys .brand i{flex:0 0 3.2em;height:3.2em;border-radius:.5em;background:#0b0f14;display:grid;place-items:center;color:#fff;font:800 1em/1 Inter,Arial;font-style:normal}
.sys .brand b{display:block;font-weight:700;font-size:1.05em}
.sys .brand small{display:block;color:var(--m);font-size:.72em;letter-spacing:.08em;text-transform:uppercase}
.sys .it{display:flex;align-items:center;gap:.65em;padding:.55em .6em;border-radius:.6em;color:#344054;font-weight:600;font-size:.98em;border:1px solid transparent;white-space:nowrap}
.sys .it::before{content:"";flex:0 0 1.25em;height:1.25em;border-radius:.3em;background:#e4e7ec}
.sys .it::after{content:"⌄";margin-left:auto;color:#98a2b3;font-size:.9em}
.sys .it.on{background:#fff;border-color:var(--l);box-shadow:0 1px 2px rgba(15,23,42,.05);color:var(--k)}
.sys .it.on::before{background:#0f172a}
.sys .mn{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.sys .tb{display:flex;align-items:center;gap:.6em;height:4.6em;padding:0 1.6em;background:#fff;border-bottom:1px solid var(--l);flex:0 0 auto}
.sys .tb strong{font-weight:720;font-size:1.05em;display:block}
.sys .tb small{color:var(--m);font-size:.8em}
.sys .tb .r{margin-left:auto;display:flex;gap:.45em}
.sys .tb .r span{border:1px solid var(--l);border-radius:.55em;padding:.45em .8em;font-weight:600;font-size:.82em;color:#344054;background:#fff;white-space:nowrap}
.sys .tb .r .ok{color:#067647;background:#ecfdf3;border-color:#abefc6}
.sys .tb .r .out{color:#b42318;border-color:#fecdca}
.sys .ctx{display:flex;gap:.3em;padding:0 1.4em;background:#fff;border-bottom:1px solid var(--l);flex:0 0 auto}
.sys .ctx span{padding:.9em .8em .75em;font-weight:650;font-size:.86em;color:var(--m);border-bottom:2px solid transparent}
.sys .ctx span.on{color:var(--k);border-bottom-color:var(--k)}
.sys .ct{padding:1.4em 1.8em;display:flex;flex-direction:column;gap:1.1em;min-height:0;overflow:hidden;flex:1}
.sys .cd{background:#fff;border:1px solid var(--l);border-radius:1.25em;padding:1.2em 1.4em;box-shadow:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.03);min-width:0}
.sys .cd h4{margin:0 0 .25em;font-size:1.25em;font-weight:750}
.sys .cd p.sub{margin:0 0 1em;color:var(--m);font-size:.9em}
.sys .cap{font-size:.74em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#475467;margin:0 0 .7em}
.sys .g{display:grid;gap:1em}
.sys .g4{grid-template-columns:repeat(4,1fr)}.sys .g3{grid-template-columns:repeat(3,1fr)}.sys .g2{grid-template-columns:1.6fr 1fr}
.sys .kp{background:#fff;border:1px solid #e5e7eb;border-radius:1.25em;padding:1.1em 1.2em}
.sys .kp span{display:block;color:#6b7280;font-size:1.05em}
.sys .kp strong{display:block;font-size:1.9em;font-weight:800;margin-top:.15em;letter-spacing:-.02em}
.sys .kp em{font-style:normal;font-size:.9em;color:#067647;font-weight:600}
.sys .kp em.neg{color:#b42318}
.sys .pills{display:flex;gap:.5em;flex-wrap:wrap;margin-bottom:1.1em}
.sys .pills span{background:#f2f5f8;color:#344054;border-radius:999px;padding:.75em 1.3em;font-weight:800;font-size:1em}
.sys .pills span.on{background:var(--y);color:#111827;font-weight:900}
.sys .fl{display:grid;grid-template-columns:repeat(4,1fr);gap:.9em 1em}
.sys .fl label{display:flex;flex-direction:column;gap:.35em;font-weight:700;font-size:.92em;color:#344054}
.sys .fl i{font-style:normal;border:1px solid #d0d5dd;border-radius:.7em;padding:.75em .9em;font-weight:500;color:var(--k);background:#fff}
.sys .fl i.ph{color:#98a2b3}
.sys table{width:100%;border-collapse:collapse;font-size:1em}
.sys th{text-align:left;font-size:.78em;letter-spacing:.08em;text-transform:uppercase;color:#667085;font-weight:700;padding:.6em .7em;border-bottom:1px solid var(--l);background:#f9fafb}
.sys td{padding:.75em .7em;border-bottom:1px solid #f0f2f5;white-space:nowrap}
.sys td b{font-weight:650}
.sys .th{display:inline-block;width:3.6em;height:2.5em;border-radius:.45em;vertical-align:middle;margin-right:.7em;background:linear-gradient(135deg,#cbd5e1,#64748b)}
.sys .bd{display:inline-block;border-radius:999px;padding:.25em .8em;font-weight:700;font-size:.85em}
.sys .bd.gr{background:#ecfdf3;color:#067647}.sys .bd.am{background:#fffaeb;color:#b54708}.sys .bd.bl{background:#eff8ff;color:#175cd3}.sys .bd.gy{background:#f2f4f7;color:#344054}
.sys .cd{display:flex;flex-direction:column}
.sys .chart{display:flex;align-items:flex-end;gap:3%;flex:1;min-height:6em}
.sys .chart span{flex:1;border-radius:.35em .35em 0 0;background:#0f172a;transform-origin:bottom;animation:grow 1.5s cubic-bezier(.2,.7,.2,1) both}
.sys .chart span.y{background:var(--y)}
.sys .chart span.l{background:#cbd5e1}
.sys .kb{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;flex:1;min-height:0}
.sys .kb>div{background:#eef1f5;border-radius:1em;padding:.9em;display:flex;flex-direction:column;gap:.7em}
.sys .kb h5{margin:0;font-size:.95em;font-weight:750;color:#475467;display:flex;justify-content:space-between}
.sys .kb p{margin:0;background:#fff;border:1px solid var(--l);border-radius:.8em;padding:.8em .9em;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.sys .kb p b{display:block;font-weight:700}
.sys .kb p small{color:var(--m)}
.sys .chips{display:flex;gap:.6em;flex-wrap:wrap}
.sys .chips span{border:1px solid var(--l);border-radius:.8em;padding:.6em .9em;background:#fff}
.sys .chips span b{display:block}
.sys .chips span small{color:var(--m)}
.sys .cal{display:grid;grid-template-columns:7.5em repeat(14,1fr);gap:.25em .2em;align-items:center;font-size:.92em}
.sys .cal i{height:1.7em;border-radius:.35em}
.sys .cal .a{background:#0f172a}.sys .cal .b{background:var(--y)}.sys .cal .c{background:#94a3b8}
.sys .cal .d{font-size:.8em;color:var(--m);text-align:center}
.sys .tt{font-size:.9em;color:var(--m)}
/* telemóvel com o mesmo aspeto */
.sysm{height:100%;background:#f5f6f8;font:400 clamp(6px,.95vw,11px)/1.35 Inter,Arial,sans-serif;color:#0f172a;display:flex;flex-direction:column}
.sysm .h{background:#0b0f14;color:#fff;padding:18% 8% 7%;display:flex;align-items:center;gap:.6em}
.sysm .h i{width:2.4em;height:2.4em;border-radius:.45em;background:#fff;color:#0b0f14;display:grid;place-items:center;font:800 .8em/1 Inter;font-style:normal}
.sysm .h b{display:block;font-size:1.05em}.sysm .h small{color:#cfd4dc;font-size:.75em}
.sysm .bd2{padding:7%;display:flex;flex-direction:column;gap:.6em}
.sysm .c{background:#fff;border:1px solid #e6e8ec;border-radius:.9em;padding:.8em .9em}
.sysm .c b{display:block;font-weight:700}.sysm .c span{color:#64748b;font-size:.9em}
.sysm .c .y{display:inline-block;margin-top:.4em;background:#fbbf24;border-radius:99px;padding:.2em .7em;font-weight:800;font-size:.85em}

/* Ecrãs em sequência (tipo vídeo) */
.reel{position:relative;max-width:1060px;margin:0 auto}

.reel-tabs{justify-content:center}
.reel+.reel-tabs+p{text-align:center}
.reel .screen{position:relative}
.reel .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.reel .slide.on{opacity:1}
.reel-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.reel-tabs button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:9px 16px;font-size:13.5px;color:var(--salvia);position:relative;overflow:hidden}
.reel-tabs button.on{color:var(--v950);border-color:var(--ouro)}
.reel-tabs button.on::before{content:"";position:absolute;inset:0;background:var(--ouro);z-index:-1;transform-origin:left;animation:fill var(--dur,5s) linear both}
.reel-tabs button{isolation:isolate}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cursor{position:absolute;width:18px;height:18px;z-index:5;pointer-events:none;transition:left 1.2s cubic-bezier(.5,0,.2,1),top 1.2s cubic-bezier(.5,0,.2,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* Split (imagem + texto) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.portrait{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--v800)}
.portrait img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.portrait.in img{transform:none}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,33,27,.85))}
.portrait .cap{position:absolute;left:24px;right:24px;bottom:22px;z-index:2}
.portrait .cap b{display:block;font:400 26px/1.1 var(--titulos)}
.portrait .cap span{color:var(--salvia);font-size:14px}
.ring{position:absolute;width:140px;height:140px;right:-30px;top:-30px;border:1px solid var(--ouro);border-radius:50%;opacity:.5;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Lista com marcas */
.list{list-style:none;margin:28px 0 0;padding:0}
.list li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--salvia)}
.list li::before{content:"";flex:0 0 8px;height:8px;margin-top:9px;background:var(--ouro)}
.list li b{color:var(--marfim);font-weight:600}

/* Portefólio (invest) */
.port{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.brand-card{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--v900);padding:30px;min-height:330px;display:flex;flex-direction:column;overflow:hidden;transition:transform .4s,border-color .4s}
.brand-card:hover{transform:translateY(-6px);border-color:rgba(196,164,100,.45)}
.brand-card .logo-box{height:120px;display:flex;align-items:center;justify-content:center;border-radius:16px;background:rgba(0,0,0,.25);margin-bottom:24px;padding:18px}
.brand-card .logo-box img{max-height:84px;width:auto;object-fit:contain}
.brand-card .sector{font:600 11px/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}
.brand-card h3{margin:10px 0 8px;font-size:28px}
.brand-card p{margin:0;color:var(--salvia);font-size:15px}
.brand-card.feature{grid-column:span 2;background:linear-gradient(135deg,var(--v800),var(--v900))}
.brand-card.wide{grid-column:1/-1;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,4vw,50px);align-items:center;padding:clamp(20px,3vw,34px);background:linear-gradient(120deg,var(--v800),var(--v900) 60%)}
.vs-media{border-radius:18px;overflow:hidden;background:#fff;aspect-ratio:650/450}
.vs-media img{width:100%;height:100%;object-fit:cover;object-position:right center;clip-path:inset(0 0 0 4.5%);transform:scale(1.05);transform-origin:right center;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.brand-card.wide:hover .vs-media img{transform:scale(1.1)}
.vs-logo{font-family:var(--texto);font-weight:500;letter-spacing:-.02em;margin-right:.15em}
.vs-logo b{font-weight:800;background:linear-gradient(90deg,#e5484d,#f5a524 45%,#30a46c);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-copy h3{font-size:clamp(30px,3.2vw,44px)}
.vs-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.vs-facts div{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(11,33,27,.35)}
.vs-facts strong{display:block;font:300 30px/1 var(--titulos);color:var(--marfim)}
.vs-facts span{display:block;margin-top:6px;font-size:12.5px;color:var(--muted)}
.vs-foot{display:flex;align-items:center;gap:14px;color:var(--salvia);font-size:13.5px}
.vs-foot img{height:44px;width:auto;background:#fff;border-radius:10px;padding:6px 8px}
@media(max-width:860px){.brand-card.wide{grid-template-columns:1fr}}
@media(max-width:980px){.port{grid-template-columns:repeat(2,1fr)}.brand-card.feature{grid-column:span 2}}
@media(max-width:620px){.port{grid-template-columns:1fr}.brand-card.feature{grid-column:auto}}

/* Órbita (hub) */
.orbit{position:relative;aspect-ratio:1;width:100%;max-width:560px;margin:0 auto}
.orbit .o{position:absolute;inset:0;border:1px solid var(--line);border-radius:50%}
.orbit .o2{inset:16%}.orbit .o3{inset:32%}
.orbit .core{position:absolute;inset:40%;border-radius:50%;background:var(--ouro);display:grid;place-items:center;color:var(--v950);font:400 clamp(16px,2vw,22px)/1 var(--titulos);box-shadow:0 0 80px rgba(196,164,100,.35)}
.orbit .spin{position:absolute;inset:0;animation:spin 40s linear infinite}
.orbit .spin.r{animation-direction:reverse;animation-duration:55s;inset:16%}
.orbit .node{position:absolute;transform:translate(-50%,-50%);background:var(--v800);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;white-space:nowrap;color:var(--marfim)}
.orbit .spin .node{animation:counter 40s linear infinite}
.orbit .spin.r .node{animation:counter-r 55s linear infinite}
@keyframes counter{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes counter-r{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.orbit .core{display:flex!important;align-items:center;justify-content:center}

/* Passos */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border-top:1px solid var(--line);padding-top:24px}
.step::before{counter-increment:s;content:"0" counter(s);font:300 44px/1 var(--titulos);color:var(--ouro);display:block;margin-bottom:16px}
.step h3{font-size:22px;margin-bottom:8px}
.step p{margin:0;color:var(--salvia);font-size:15px}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* Chamada final */
.cta{position:relative;border-radius:32px;overflow:hidden;padding:clamp(50px,8vw,110px) clamp(24px,6vw,90px);background:var(--v800);border:1px solid var(--line);text-align:center}
.cta canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.7}
.cta>*:not(canvas){position:relative}
.cta h2{margin:16px auto 18px;max-width:900px}
.cta .lead{margin:0 auto}
.cta .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:34px}

/* Formulário */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:flex;flex-direction:column;gap:7px;font:600 13px/1 var(--texto);color:var(--salvia)}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;background:rgba(11,33,27,.6);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--marfim);font:500 15px/1.4 var(--texto);outline:none;transition:border-color .2s,background .2s}
.form select option{background:var(--v900)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ouro);background:rgba(11,33,27,.85)}
.form textarea{min-height:120px;resize:vertical}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .chips{display:flex;flex-wrap:wrap;gap:8px}
.form .chips input{position:absolute;opacity:0;width:1px;height:1px}
.form .chips span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font:500 13.5px/1 var(--texto);color:var(--salvia);cursor:pointer;transition:all .2s}
.form .chips input:checked+span{background:var(--ouro);border-color:var(--ouro);color:var(--v950)}
.form .chips input:focus-visible+span{outline:2px solid var(--ouro);outline-offset:2px}
.form .send{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.form .msg{font-size:14px;color:var(--salvia)}
.form .msg.ok{color:#7ee2a8}.form .msg.err{color:#ffb4a8}
.form small.legal{grid-column:1/-1;color:var(--muted);font-size:12.5px}
@media(max-width:620px){.form{grid-template-columns:1fr}}

/* Popup */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,18,14,.78);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.modal.open{opacity:1;visibility:visible}
.modal .box{position:relative;width:min(760px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--v900);border:1px solid var(--line);border-radius:28px;padding:clamp(26px,4vw,46px);transform:translateY(30px) scale(.97);transition:transform .45s cubic-bezier(.2,.7,.2,1);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.modal.open .box{transform:none}
.modal .x{position:sticky;top:0;float:right;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--v900);font-size:20px;line-height:1;z-index:2}
.modal h2{font-size:clamp(32px,4vw,52px);margin:14px 0 12px}
.modal .lead{margin-bottom:26px}
.modal .mod-list{margin:20px 0 0}
@media(max-width:620px){.modal{padding:0;align-items:flex-end}.modal .box{border-radius:26px 26px 0 0;max-height:92vh}}

/* WhatsApp */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 34px rgba(0,0,0,.4);transition:transform .25s}
.wa:hover{transform:scale(1.07)}
.wa svg{width:28px;height:28px}
.wa::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #25d366;opacity:0;animation:pulse 2.6s infinite}
@keyframes pulse{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}

/* Rodapé */
.foot{border-top:1px solid var(--line);padding:70px 0 34px;background:var(--v950)}
.foot .grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
.foot h4{margin:0 0 14px;font:600 12px/1 var(--texto);letter-spacing:.2em;text-transform:uppercase;color:var(--ouro)}
.foot a{display:block;text-decoration:none;color:var(--salvia);padding:5px 0;font-size:15px}
.foot a:hover{color:var(--marfim)}
.foot .big{font:300 clamp(60px,14vw,200px)/.85 var(--titulos);color:var(--v800);margin-top:50px;letter-spacing:-.03em;user-select:none}
.foot .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:20px;color:var(--muted);font-size:13px}
@media(max-width:860px){.foot .grid{grid-template-columns:1fr 1fr}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Os ecrãs do sistema escalam com o tamanho do próprio ecrã (parecem sempre o mesmo sistema). */
.screen{container-type:inline-size}
@supports (font-size:1cqw){.sys{font-size:1.02cqw}.sysm{font-size:4.6cqw}}