/* ═══════════════════════════════════════════════════════════════════════════
   PowerTech · folha de estilo do portal (direcção "vidro")
   Partilhada por index.html e solucoes.html.
   Sistema AuthKit — tela de meia-noite, grelha de blueprint, superfícies de
   vidro fosco, arestas por sombra interna em vez de traço, pílulas de 999px,
   cartões de 16px, ritmo de 120px — com a NOSSA paleta: o #05070D do site,
   a escada de texto #F4F7FB → #C7D2E0 → #8FA0B8 → #5B6B82, e o azul de marca
   #4F8EF7 no lugar do violeta como único acento cromático.
   Tema único e assumido. O comportamento vive no main.js, que esta direcção
   reaproveita sem alterações — os ids do menu, do reveal e do formulário de
   contacto são os mesmos da versão anterior do portal (guardada em
   index-classico.html, que continua a usar styles.css).
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --canvas:#05070D;        /* tela — o preto azulado que o site já usa */
  --plate:#101829;         /* placa elevada */
  --ice:#F4F7FB;           /* títulos */
  --frost:#C7D2E0;         /* corpo */
  --mist:#8FA0B8;          /* corpo esbatido */
  --veil:#5B6B82;          /* copy de apoio */
  --blue:#4F8EF7;          /* acção — o único cromático */
  --blue-soft:#7FAAF5;

  --edge:rgba(199,210,224,.12);      /* aresta universal, sempre por dentro */
  --edge-soft:rgba(199,210,224,.06);
  --glass:rgba(182,208,247,.03);     /* vidro quase invisível */
  --wash:rgba(182,208,247,.06);      /* enchimento das pílulas */
  --wash-2:rgba(182,208,247,.12);
  --line:rgba(199,210,224,.05);      /* grelha de blueprint */

  --skywash:linear-gradient(180deg,#F4F7FB 0%,#8FB6F6 100%);
  --skywash-soft:linear-gradient(180deg,#F4F7FB 0%,#B9CDEE 100%);

  --card:rgba(199,210,224,.12) 0 1px 1px 0 inset,
         rgba(199,210,224,.05) 0 24px 48px 0 inset,
         rgba(5,7,13,.7) 0 24px 32px 0;
  --modal:rgba(216,236,248,.2) 0 1px 1px 0 inset,
          rgba(127,170,245,.06) 0 24px 48px 0 inset,
          rgba(0,0,0,.3) 0 16px 32px 0;
  --hair:rgba(199,210,224,.12) 0 0 0 1px inset;

  --page:1200px; --gap:120px;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Space Grotesk','Inter',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  position:relative; background:var(--canvas); color:var(--frost);
  font-family:var(--sans); font-size:16px; line-height:1.5; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Grelha de blueprint — atmosfera de fundo, esbatida nas bordas */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 88%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 35%,transparent 88%);
}
body > *{position:relative; z-index:1;}

h1,h2,h3,h4{color:var(--ice); font-weight:500; text-wrap:balance;}
h1,h2{font-family:var(--display); letter-spacing:normal;}
h3,h4{font-family:var(--sans); letter-spacing:-.01em;}
p{max-width:64ch;}
a{color:inherit; text-decoration:none;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:8px;}
::selection{background:rgba(79,142,247,.35); color:#fff;}
img{max-width:100%;}

.container{max-width:var(--page); margin:0 auto; padding:0 24px;}
.section{padding:var(--gap) 0;}

/* ── Sobretítulo com linhas que desvanecem ─────────────────────────────── */
.eyebrow{display:flex; align-items:center; gap:20px; justify-content:center;
  font-family:var(--mono); font-size:14px; font-weight:400; letter-spacing:.1em;
  text-transform:uppercase; color:var(--frost); font-feature-settings:'tnum' 1;}
.eyebrow::before,.eyebrow::after{content:""; height:1px; flex:1; max-width:200px;}
.eyebrow::before{background:linear-gradient(90deg,transparent,var(--edge));}
.eyebrow::after{background:linear-gradient(90deg,var(--edge),transparent);}

/* ── Botões ─────────────────────────────────────────────────────────────── */
.pill{display:inline-flex; align-items:center; gap:9px; border-radius:999px;
  padding:11px 22px; font-size:14px; font-weight:500; letter-spacing:-.01em;
  border:0; cursor:pointer; font-family:var(--sans);
  background:var(--wash); color:#fff; box-shadow:var(--hair); transition:background .2s;}
.pill:hover{background:var(--wash-2);}
.pill.outline{background:transparent; color:var(--frost);}
.pill.outline:hover{background:var(--wash);}
.pill.action{background:var(--blue); color:#fff;
  box-shadow:rgba(255,255,255,.18) 0 1px 0 0 inset, rgba(79,142,247,.35) 0 8px 24px -8px;}
.pill.action:hover{background:#5F9AF8;}
.pill svg{flex:none; transition:transform .18s ease;}
.pill:hover svg{transform:translateX(3px);}

/* ── Navegação ──────────────────────────────────────────────────────────── */
.navbar{position:sticky; top:0; z-index:100; background:rgba(5,7,13,.72);
  backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
  transition:box-shadow .3s;}
.navbar.scrolled{box-shadow:0 1px 0 0 var(--edge-soft);}
.nav-inner{max-width:var(--page); margin:0 auto; padding:0 24px; height:68px;
  display:flex; align-items:center; gap:20px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-img{width:24px; height:auto; flex:none;}
.logo-text{font-size:16px; font-weight:500; color:var(--ice); letter-spacing:-.01em; line-height:1.15;}
.logo-sub-text{font-size:11px; color:var(--veil); line-height:1.2;}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:auto;}
.nav-links a{padding:9px 15px; font-size:14px; color:var(--frost); border-radius:999px;}
.nav-links a:hover,.nav-links a.active{background:var(--wash); color:#fff;}
.nav-links a.nav-cta{margin-left:8px; background:var(--wash); color:#fff;
  box-shadow:var(--hair); font-weight:500;}
.nav-links a.nav-cta:hover{background:var(--wash-2);}
.hamburger{display:none; margin-left:auto; width:38px; height:38px; border:0;
  border-radius:999px; background:var(--wash); box-shadow:var(--hair); cursor:pointer;
  padding:12px 11px; flex-direction:column; justify-content:space-between;}
.hamburger span{display:block; height:1.5px; background:var(--frost); border-radius:2px;
  transition:transform .25s, opacity .2s;}
.hamburger.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
@media (max-width:880px){
  .hamburger{display:flex;}
  .nav-links{position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch;
    gap:4px; margin:0; padding:16px 20px 24px; background:rgba(5,7,13,.98);
    box-shadow:0 1px 0 0 var(--edge-soft); display:none;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 16px; font-size:15px; border-radius:12px;}
  .nav-links a.nav-cta{margin:8px 0 0; justify-content:center; text-align:center;}
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative; padding:104px 0 0; text-align:center;}
/* Halo de holofote no topo — a única iluminação ambiente */
.hero::before{
  content:""; position:absolute; inset:-200px 0 auto 0; height:760px; z-index:-1;
  pointer-events:none;
  background:conic-gradient(at 50% 0%, transparent 44%, rgba(124,145,182,.28) 49%,
             rgba(124,145,182,.45) 50%, rgba(124,145,182,.28) 51%, transparent 56%);
  -webkit-mask-image:radial-gradient(70% 62% at 50% 6%,#000 0%,transparent 78%);
  mask-image:radial-gradient(70% 62% at 50% 6%,#000 0%,transparent 78%);
}
.hero .eyebrow{margin-bottom:36px;}
.wordmark{font-family:var(--display); font-weight:500;
  font-size:clamp(54px,11.5vw,132px); line-height:1.04; letter-spacing:-.015em;
  background:var(--skywash); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  margin-bottom:28px; padding-bottom:.06em;}
.hero .claim{font-family:var(--display); font-weight:400; font-size:clamp(19px,2.6vw,24px);
  line-height:1.3; color:var(--ice); max-width:24ch; margin:0 auto 18px;}
.hero .lede{font-size:16px; line-height:1.6; color:var(--mist); max-width:54ch;
  margin:0 auto 36px;}
.hero-actions{display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap;}

/* ── Leque de placas de vidro (os quatro passos) ────────────────────────── */
/* Leque: a inclinação faz o arco, o espaçamento evita que se cortem */
.fan{display:flex; align-items:stretch; justify-content:center; gap:20px;
  margin-top:88px; padding:40px 0 52px;}
.plate{flex:none; width:236px; text-align:left;
  display:flex; flex-direction:column;
  background:rgba(5,7,13,.94); border-radius:16px; padding:24px;
  box-shadow:var(--modal); transition:transform .35s cubic-bezier(.2,.8,.3,1);}
.plate .n{font-family:var(--mono); font-size:13px; color:var(--blue); letter-spacing:.06em;}
.plate h3{font-size:17px; margin:14px 0 8px;}
.plate p{font-size:14px; line-height:1.5; color:var(--mist); max-width:none;}
.fan .plate.p1{transform:translateY(26px) rotate(-7deg);}
.fan .plate.p2{transform:translateY(-2px) rotate(-3deg);}
.fan .plate.p3{transform:translateY(-2px) rotate(3deg);}
.fan .plate.p4{transform:translateY(26px) rotate(7deg);}
.fan:hover .plate.p1{transform:translateY(18px) rotate(-6deg);}
.fan:hover .plate.p4{transform:translateY(18px) rotate(6deg);}
@media (max-width:1040px){
  .fan{flex-wrap:wrap; gap:14px; margin-top:64px; padding:0 0 8px;}
  .plate{flex:1 1 240px; width:auto;}
  .fan .plate.p1,.fan .plate.p2,.fan .plate.p3,.fan .plate.p4{transform:none;}
  .fan:hover .plate.p1,.fan:hover .plate.p4{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .fan .plate.p1,.fan .plate.p2,.fan .plate.p3,.fan .plate.p4,
  .fan:hover .plate.p1,.fan:hover .plate.p4{transform:none;}
}

/* ── Números, em pastilhas ──────────────────────────────────────────────── */
.stats{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:72px;}
.stat{display:inline-flex; align-items:baseline; gap:8px; border-radius:6px;
  padding:7px 13px; background:var(--wash); box-shadow:var(--hair);}
.stat b{font-size:14px; font-weight:600; color:var(--ice); font-variant-numeric:tabular-nums;}
.stat span{font-size:13px; color:var(--mist);}

/* ── Fila de ícones circulares ──────────────────────────────────────────── */
.icons{display:flex; align-items:flex-start; justify-content:center; gap:0;
  flex-wrap:wrap; margin-top:56px;}
.ic{flex:1 1 150px; max-width:190px; display:flex; flex-direction:column;
  align-items:center; text-align:center; position:relative; padding:0 8px;}
.ic .tile{width:60px; height:60px; border-radius:9999px; background:var(--wash);
  box-shadow:var(--hair); display:flex; align-items:center; justify-content:center;
  color:var(--frost); position:relative; z-index:2;}
.ic .lb{margin-top:16px; font-size:14px; color:var(--frost); letter-spacing:-.01em;}
.ic .ds{margin-top:5px; font-size:13px; line-height:1.45; color:var(--veil);}
/* linha fina a ligar os círculos */
.ic::before{content:""; position:absolute; top:30px; left:-50%; width:100%; height:1px;
  background:var(--edge); z-index:1;}
.ic:first-child::before{display:none;}
@media (max-width:760px){ .ic::before{display:none;} .ic{flex:1 1 130px; margin-bottom:28px;} }

/* ── Cartões de vidro ───────────────────────────────────────────────────── */
.glass{background:var(--glass); border-radius:16px; padding:24px; box-shadow:var(--card);}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px;
  margin-top:56px;}
.glass h3{font-size:18px; margin-bottom:10px;}
.glass p{font-size:15px; line-height:1.6; color:var(--mist); max-width:none;}

/* ── Cabeçalho de secção ────────────────────────────────────────────────── */
.head{text-align:center; max-width:680px; margin:0 auto;}
.head .eyebrow{margin-bottom:28px;}
.head h2{font-size:clamp(30px,5vw,44px); line-height:1.16;
  background:var(--skywash-soft); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; padding-bottom:.05em;}
.head p{font-size:17px; line-height:1.6; color:var(--frost); max-width:60ch;
  margin:18px auto 0;}

/* ── Banda da plataforma ────────────────────────────────────────────────── */
.platform{margin-top:56px; border-radius:16px; padding:44px 40px; text-align:center;
  background:var(--glass); box-shadow:var(--card);}
.platform .big{font-family:var(--display); font-weight:500; font-size:clamp(40px,7vw,64px);
  line-height:1; background:var(--skywash); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  padding-bottom:.06em;}
.platform .sub{font-size:15px; color:var(--mist); margin-top:6px;}
.platform p{font-size:16px; line-height:1.6; color:var(--frost); max-width:56ch;
  margin:22px auto 28px;}
.tags{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:30px;}
.tag{border-radius:6px; padding:5px 10px; font-size:12px; font-weight:500; color:var(--frost);
  background:var(--wash-2); box-shadow:var(--hair);}

/* ── Contacto: o cartão-modal do sistema ────────────────────────────────── */
.contact{max-width:560px; margin:56px auto 0; border-radius:16px; padding:32px;
  background:rgba(5,7,13,.97); box-shadow:var(--modal);}
.contact .ttl{font-family:var(--display); font-weight:500; font-size:24px; color:var(--ice);
  text-align:center;}
.contact .sb{font-size:14px; color:var(--mist); text-align:center; margin:8px 0 26px;}
.row2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;}
@media (max-width:520px){ .row2{grid-template-columns:1fr;} }
.fg{margin-bottom:12px;}
.fg label{display:block; font-size:13px; color:var(--mist); margin-bottom:7px;}
.fg input,.fg select,.fg textarea{width:100%; background:rgba(199,210,224,.06);
  border:0; box-shadow:var(--hair); color:#fff; border-radius:6px; padding:11px 12px;
  font-size:14px; font-family:var(--sans); line-height:1.4; letter-spacing:-.01em;}
.fg textarea{resize:vertical; min-height:104px;}
.fg input::placeholder,.fg textarea::placeholder{color:rgba(199,210,224,.55);}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;
  box-shadow:rgba(199,210,224,.24) 0 0 0 1px inset;}
.fg select{appearance:none; cursor:pointer; color:var(--frost);
  background-image:linear-gradient(45deg,transparent 50%,#8FA0B8 50%),
                   linear-gradient(135deg,#8FA0B8 50%,transparent 50%);
  background-position:calc(100% - 17px) 19px, calc(100% - 12px) 19px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;}
.fg select option{background:#101829; color:var(--frost);}
.btn-send{width:100%; background:var(--blue); color:#fff; border:0; border-radius:999px;
  padding:13px 24px; font-size:14px; font-weight:500; font-family:var(--sans);
  letter-spacing:-.01em; cursor:pointer; margin-top:6px;
  box-shadow:rgba(255,255,255,.18) 0 1px 0 0 inset, rgba(79,142,247,.35) 0 8px 24px -8px;}
.btn-send:hover{background:#5F9AF8;}
.btn-send:disabled{opacity:.6; cursor:default;}
.form-note{margin-top:14px; font-size:13px; color:var(--veil); text-align:center;}
.form-note.success{color:#2DD4BF;} .form-note.error{color:#F87171;}
.meta{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; margin-top:32px;
  font-size:13px; color:var(--veil);}
.meta span{display:inline-flex; align-items:center; gap:7px;}
.meta svg{color:var(--mist); flex:none;}

/* ── Rodapé ─────────────────────────────────────────────────────────────── */
.footer{margin-top:var(--gap); padding:56px 0 0; box-shadow:0 -1px 0 0 var(--edge-soft);}
.footer-inner{display:grid; grid-template-columns:minmax(0,1.8fr) repeat(2,minmax(0,1fr));
  gap:40px 32px;}
@media (max-width:720px){ .footer-inner{grid-template-columns:1fr;} }
.footer-brand p{font-size:14px; line-height:1.6; color:var(--veil); margin-top:16px; max-width:40ch;}
.ft-col{display:flex; flex-direction:column; gap:10px;}
.ft-col strong{font-size:13px; font-weight:500; color:var(--ice); margin-bottom:4px;}
.ft-col a{font-size:14px; color:var(--veil);}
.ft-col a:hover{color:var(--frost);}
.footer-bottom{margin-top:48px; padding:22px 0 36px; box-shadow:0 -1px 0 0 var(--edge-soft);}
.footer-bottom .container{display:flex; gap:10px 24px; flex-wrap:wrap;}
.footer-bottom span{font-family:var(--mono); font-size:12px; color:var(--veil);}

/* ── Revelação (a mesma classe que o main.js liga) ──────────────────────── */
.rv{opacity:0; transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1; transform:none;}
.rv.d1{transition-delay:.08s} .rv.d2{transition-delay:.16s} .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .rv{opacity:1; transform:none; transition:none;}
}

/* ═══ Catálogo de soluções (solucoes.html) ══════════════════════════════════ */
.sol-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  gap:16px; margin-top:56px;}
.sol-card{display:flex; flex-direction:column; background:var(--glass);
  border-radius:16px; padding:24px; box-shadow:var(--card);
  transition:box-shadow .25s, transform .25s;}
.sol-card:hover{transform:translateY(-3px);
  box-shadow:rgba(199,210,224,.2) 0 1px 1px 0 inset,
             rgba(127,170,245,.08) 0 24px 48px 0 inset,
             rgba(5,7,13,.7) 0 24px 32px 0;}
.sol-card .tile{width:48px; height:48px; border-radius:9999px; background:var(--wash);
  box-shadow:var(--hair); display:flex; align-items:center; justify-content:center;
  color:var(--frost); margin-bottom:20px;}
.sol-card:hover .tile{color:var(--blue);}
.sol-card h3{font-size:18px; margin-bottom:10px;}
.sol-card p{font-size:14px; line-height:1.6; color:var(--mist); max-width:none; flex:1;}
.sol-card .foot{display:flex; align-items:center; gap:12px; margin-top:20px;}
.sol-card .go{margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--frost);}
.sol-card .go svg{transition:transform .18s ease;}
.sol-card:hover .go{color:#fff;}
.sol-card:hover .go svg{transform:translateX(3px);}

/* Título da página de catálogo — grande, mas não é o wordmark */
.page-title{font-family:var(--display); font-weight:500;
  font-size:clamp(40px,7.5vw,76px); line-height:1.06; letter-spacing:-.01em;
  background:var(--skywash); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  margin-bottom:24px; padding-bottom:.05em;}