/* ============== VARIÁVEIS GERAIS ============== */
:root{
  --radius: 24px;
  --pad: clamp(16px, 2.5vmin, 28px);
  --blur: 6px;
  --speed: 420ms;

  /* Paleta */
  --bg0: #000002;
  --bg1: #0e0e11;
  --navy: #00031e;
  --ink: #fbfbfe;
  --muted: #c8c9cb;
  --mid: #8c8d90;

  /* Vidro */
  --glass-bg: linear-gradient(180deg, rgba(0,3,30,.52), rgba(0,0,0,.34));
  --glass-brd: rgba(200,201,203,.12);

  /* Layout */
  --footer-h: 56px;
  --header-h: 64px;

  /* Largura container + respiro entre seções */
  --container-w: min(1150px, 92vw);
  --section-gap: clamp(40px, 6vmin, 72px);

  /* Slider (serviços) */
  --svc-h: 360px;
  --svc-gap: 14px;
  --svc-radius: 18px;
  --svc-duration: 420ms;
  --svc-ease: cubic-bezier(.2,.8,.2,1);
}

/* ===========================================================
   BASE
   =========================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--ink);
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  overflow:auto;
  background: var(--bg0);
  background-image:
    radial-gradient(1000px 600px at 10% -10%, rgba(0, 7, 30, 0.35) 0%, transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(102,102,104,0.18) 0%, transparent 60%),
    linear-gradient(to bottom, transparent 0%, rgba(0,3,30,.55) 75%, rgba(0,3,30,.9) 100%);
}
body::before{
  content:"";
  position:fixed; inset:0;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  pointer-events:none; z-index:0;
}

/* ===========================================================
   HEADER
   =========================================================== */
header.main-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:1000;
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom:1px solid rgba(200,201,203,.16);
}
.nav-links{display:flex; gap:18px}
.nav-links a{
  color:var(--ink); text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.02em; position:relative; transition:color .25s ease;
}
.nav-links a:hover{color:var(--muted)}
.nav-links a.active{color:var(--muted)}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--navy), var(--muted)); border-radius:2px;
}
.logo{height:28px; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* Language switch */
.lang{
  display:flex; align-items:center; gap:8px;
  background:rgba(0,3,30,.36);
  border:1px solid rgba(200,201,203,.12);
  border-radius:999px; padding:6px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lang button{
  appearance:none; border:0; background:transparent; padding:6px; border-radius:999px;
  cursor:pointer; display:grid; place-items:center; transition:transform .2s ease, background .2s ease;
}
.lang button.active{ background:rgba(255,255,255,.08); }
.lang button:hover{ transform:translateY(-1px); }
.flag{ width:22px; height:22px; border-radius:999px; overflow:hidden; display:block; }
.flag svg{ display:block; width:22px; height:22px; }

/* ===========================================================
   LAYOUT DAS PÁGINAS
   =========================================================== */
#pages{ position:relative; width:100%; z-index:1; }
#pages .inner{ position:static; height:auto; }
.page{
  min-height:100dvh;
  position:relative;
  scroll-margin-top: var(--header-h);
}

/* ===========================================================
   HOME (Split)
   =========================================================== */
.wrap{
  position:relative; min-height:100dvh; display:flex; gap:var(--pad);
  padding:var(--pad); isolation:isolate;
  padding-top:calc(var(--header-h) + var(--pad));
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
.panel{
  flex:1; position:relative; border-radius:28px; overflow:hidden; cursor:pointer;
  display:grid; place-items:center;
  transition:transform .32s ease, filter .32s ease, box-shadow .32s ease, opacity .32s ease;
}
.panel::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; filter:contrast(1) saturate(1.05); opacity:1; transition:transform .32s ease, opacity .32s ease; z-index:1; }
.panel::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,3,30,.62)); z-index:2; }
.left::before{ background-image:url('https://media.discordapp.net/attachments/1052006515948654602/1412635510442168373/Giantsite4.png?ex=68b902d7&is=68b7b157&hm=28dadd0cc0ac3d401ed6a5a34d351c9833d2d9bb0e257d54c7f0b7611fce4fbf&=&format=webp&quality=lossless&width=1376&height=860'); }
.right::before{ background-image:url('https://media.discordapp.net/attachments/1052006515948654602/1412635441726754927/Giantsite3.png?ex=68b902c6&is=68b7b146&hm=0c59690931473efe342fb2dd34231865720cc8d8b3bce89ef9fad5b4873b167a&=&format=webp&quality=lossless&width=1376&height=860'); }

.content{ position:relative; z-index:3; text-align:center; padding:clamp(12px,2vmin,24px); max-width:78%; }
.kicker{ font-size:clamp(10px,1.2vmin,12px); letter-spacing:.24em; text-transform:uppercase; opacity:.8 }
.title{ font-family:Montserrat, system-ui; font-weight:900; line-height:.9; margin:.35em 0; letter-spacing:.02em; font-size:clamp(36px,8vmin,88px); }
.sub{ opacity:.86; font-size:clamp(12px,1.8vmin,16px) }

.cta{
  margin-top:18px; display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:18px;
  border:1px solid rgba(200,201,203,.18);
  background: linear-gradient(180deg, var(--navy), var(--bg1));
  color: var(--ink); font-weight:600; text-decoration:none;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(0,3,30,.35);
  transition:transform .32s ease, background .32s ease, border-color .32s ease;
}
.cta svg{width:18px; height:18px}
.cta:hover{ transform:translateY(-2px); border-color: rgba(200,201,203,.28); background: linear-gradient(180deg, #01042c, #0b0b10); }

.panel:hover{ filter:none; opacity:1; transform:scale(1.02); box-shadow:0 8px 40px rgba(0,10,40,.28); }
.panel:hover::before{ transform:scale(1.04) }
#split[data-active="left"] .right{ filter:blur(var(--blur)) brightness(.64); opacity:.78; transform:none }
#split[data-active="right"] .left{ filter:blur(var(--blur)) brightness(.64); opacity:.78; transform:none }
.panel:focus-visible{ outline:3px solid rgba(125,211,252,.18); outline-offset:2px }
.badge{
  position:absolute; top:14px; left:14px; z-index:4;
  padding:6px 10px; border-radius:999px;
  background:rgba(0,3,30,.36);
  border:1px solid rgba(200,201,203,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.95; color: var(--muted);
}
.deco{ position:absolute; inset:auto 0 0 0; height:6px; background:linear-gradient(90deg, var(--navy), rgba(11,11,16,.8), var(--muted)); filter:blur(.2px); opacity:.95; z-index:4 }

/* ===========================================================
   SERVIÇOS (SLIDER) — BLOCO ÚNICO
   =========================================================== */

/* Seção com a mesma largura do “Sobre nós” */
.svc-section{
  width: var(--container-w);
  margin: clamp(8%, 6vmin, 56px) auto var(--section-gap);
}
.svc-head{
  display:flex;
  flex-direction: column;   /* empilha título e subtítulo */
  align-items: flex-start;  /* alinha à esquerda */
  gap: 6px;
  margin-bottom: 18px;
}
.svc-title{
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu;
  font-weight:900; letter-spacing:.2px; font-size: clamp(22px, 3.4vw, 36px);
  margin: 0; 
}
.svc-sub{ margin: 0; max-width: 65ch; opacity: .85; }

/* Slider */
.svc-slider{
  display:flex; gap:var(--svc-gap); height:var(--svc-h);
}
.svc-panel{
  position:relative; flex:1 1 0%;
  overflow:hidden; border-radius:var(--svc-radius);
  border:1px solid rgba(255,255,255,.06);
  background: rgba(17,23,36,.6);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  isolation:isolate; cursor:pointer;
  transition: flex-basis var(--svc-duration) var(--svc-ease),
             flex-grow var(--svc-duration) var(--svc-ease),
             filter var(--svc-duration) var(--svc-ease);
}
.svc-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(.95) contrast(1.05) brightness(.9);
  transition: transform var(--svc-duration) var(--svc-ease),
              filter var(--svc-duration) var(--svc-ease);
}
.svc-panel::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,12,22,0) 0%, rgba(8,12,22,.35) 35%, rgba(8,12,22,.75) 100%);
  z-index:1;
}

/* Conteúdo (sem pill, centralizado) */
.svc-content{
  position:absolute; inset:16px; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:16px; gap:12px;
}
.svc-h1{
  font-family: Montserrat, Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu;
  font-weight:900; color:#fff;
  font-size: clamp(20px, 2.8vw, 32px);
  line-height:1.1; margin:0; text-wrap:balance; word-break:normal; hyphens:auto;
}
.svc-desc{
  margin:0; color: rgba(255,255,255,.92); max-width: 80ch;
}

/* ===== Serviços – tema de gradientes (opcional) ===== */
.theme-gradients .svc-bg{
  /* some a imagem, usa gradiente */
  background-image: none !important;
  /* base escura em comum com o site */
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(124,132,255,.18) 0%, transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(0, 180, 255, .14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,12,22,.6), rgba(8,12,22,.85));
  filter: none;               /* tira filtros de foto */
  transform: none;            /* evita “zoom” de imagem */
}

/* variações por card (cores sutis diferentes) */
.theme-gradients .svc-panel:nth-child(1) .svc-bg{
  background:
    radial-gradient(120% 100% at 90% 0%, rgba(139,92,246,.22) 0%, transparent 55%),
    radial-gradient(110% 120% at 0% 100%, rgba(56,189,248,.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,12,22,.62), rgba(8,12,22,.9));
}
.theme-gradients .svc-panel:nth-child(2) .svc-bg{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(99,102,241,.22) 0%, transparent 55%),
    radial-gradient(110% 120% at 100% 100%, rgba(45,212,191,.16) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,12,22,.62), rgba(8,12,22,.9));
}
.theme-gradients .svc-panel:nth-child(3) .svc-bg{
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(59,130,246,.22) 0%, transparent 55%),
    radial-gradient(110% 120% at 0% 100%, rgba(253,186,116,.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,12,22,.62), rgba(8,12,22,.9));
}
.theme-gradients .svc-panel:nth-child(4) .svc-bg{
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(236,72,153,.22) 0%, transparent 55%),
    radial-gradient(110% 120% at 100% 100%, rgba(45,212,191,.14) 0%, transparent 60%),
    linear-gradient(180deg, rgba(8,12,22,.62), rgba(8,12,22,.9));
}

/* leve “ruído” para dar textura (opcional) */
.theme-gradients .svc-panel::before{
  background:
    radial-gradient(180% 140% at 50% 0%, rgba(255,255,255,.06) 0%, transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 2px, transparent 2px 10px);
  opacity:.9; /* mantém o overlay do card */
}

/* mantém os mesmos estados de hover */
.theme-gradients .svc-slider:hover .svc-panel .svc-bg{ transform:none; filter:none; }
.theme-gradients .svc-slider:hover .svc-panel:hover .svc-bg{ transform:none; filter:none; }

/* legibilidade (já que não há foto por trás) */
.theme-gradients .svc-h1{ text-shadow: 0 8px 40px rgba(0,0,0,.5); }
.theme-gradients .svc-desc{ color: rgba(255,255,255,.95); }


/* Interações (desktop) */
.svc-slider:hover .svc-panel{ flex:0 0 0%; filter: grayscale(.2) brightness(.85); }
.svc-slider:hover .svc-panel:hover{ flex:1 1 100%; filter:none; z-index:5; }
.svc-slider:hover .svc-panel .svc-bg{ transform: scale(1.03); }
.svc-slider:hover .svc-panel:hover .svc-bg{ transform: scale(1.08); filter:none; }
.svc-slider:hover .svc-panel:hover .svc-content{ gap:14px; }
.svc-slider:hover .svc-panel:hover .svc-h1{ font-size: clamp(28px, 5vw, 56px); }

/* Acessibilidade (teclado) */
.svc-panel:focus-visible{ outline:3px solid #7aa2ff; outline-offset:2px; }
.svc-slider:has(.svc-panel:focus-visible) .svc-panel{ flex:0 0 0%; }
.svc-slider:has(.svc-panel:focus-visible) .svc-panel:focus-visible{ flex:1 1 100%; z-index:5; }

/* Imagens (trocar por assets reais .webp se quiser) */
.svc-g1 { background-image: url('https://neilpatel.com/wp-content/uploads/2019/09/codigos-html-para-paginas-web-1-1200x675.webp'); }
.svc-g2 { background-image: url('https://i.imgur.com/G9nD2E2.png'); }
.svc-g3 { background-image: url('https://sdmntpreastus.oaiusercontent.com/files/00000000-435c-61f9-90ac-dc846186e18f/raw?se=2025-08-29T06%3A48%3A44Z&sp=r&sv=2024-08-04&sr=b&scid=7e9dead5-1745-55d4-8667-6bd42a9e4d53&skoid=02b7f7b5-29f8-416a-aeb6-99464748559d&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2025-08-28T21%3A17%3A01Z&ske=2025-08-29T21%3A17%3A01Z&sks=b&skv=2024-08-04&sig=IclNNF26fmasYO9TMOYV%2Bxygs85aejzvsX5zrzczhQk%3D'); }
.svc-g4 { background-image: url('https://sdmntpreastus.oaiusercontent.com/files/00000000-576c-61f9-8e92-9db761c8116b/raw?se=2025-08-29T06%3A50%3A53Z&sp=r&sv=2024-08-04&sr=b&scid=1a382f0d-20cd-5a4c-a440-bda985a3e3df&skoid=02b7f7b5-29f8-416a-aeb6-99464748559d&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2025-08-28T21%3A14%3A06Z&ske=2025-08-29T21%3A14%3A06Z&sks=b&skv=2024-08-04&sig=Gj/Rj6hj80coakO6JHc31ubADM6R4e8DGUGWP4PVy7Q%3D'); }
.svc-g5 { background-image: url('https://images.unsplash.com/photo-1557800636-894a64c1696f?q=80&w=1200&auto=format&fit=crop'); }

/* Mobile: grid 2×2 e SEM expansão */
@media (max-width: 560px){
  .svc-desc {
    display: none !important;
  }
  .svc-content {
    grid-template-rows: 1fr auto 2fr; /* só espaço + título + espaço */
    gap: 0;
  }
  .svc-slider{
    display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:minmax(200px, auto);
    gap:14px; height:auto;
  }
  .svc-panel{ flex:unset !important; height:220px; }
  .svc-content{ padding:14px !important; gap:8px; }
  .svc-h1 {
    white-space: nowrap;     /* impede quebra de linha */
    text-overflow: ellipsis; /* se passar muito, corta com "..." */
    overflow: hidden;
    font-size: clamp(16px, 5vw, 22px); /* fonte ajustável conforme largura */
  }

  /* mata expansão por hover */
  .svc-slider:hover .svc-panel,
  .svc-slider:hover .svc-panel:hover,
  .has-active .svc-panel,
  .has-active .svc-panel.is-active{
    flex:unset !important; transform:none !important; filter:none !important;
  }
}

/* Âncoras não ficarem sob o header fixo */
#servicos, #sobre { scroll-margin-top: var(--header-h); }

/* ===========================================================
   SOBRE NÓS
   =========================================================== */
.about{
  min-height:70dvh;
  display:grid;
  place-items:center;
  padding-top: calc(var(--header-h) + 2vmin);
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  position: relative;
  overflow: hidden;
}
.about::before{
  content:"";
  position:absolute; inset:-12% -18% -12% -18%;
  background-image:
    radial-gradient(1200px 460px at -10% 115%, rgba(0,12,60,.55) 0%, transparent 65%),
    radial-gradient(1200px 460px at 112% -8%, rgba(160,160,170,.22) 0%, transparent 62%),
    repeating-linear-gradient( 14deg, rgba(255,255,255,.06) 0 2px, transparent 2px 26px ),
    repeating-linear-gradient(-14deg, rgba(255,255,255,.035) 0 2px, transparent 2px 30px );
  background-size: 120% 120%;
  filter: contrast(1.06) saturate(1.04);
  opacity:.32;
  z-index:0;
  animation: bgMesh 45s linear infinite;
}
.about::after{
  content:"";
  position:absolute; inset:-8% -10% -8% -10%;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNjAwIDkwMCc+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9J2cnIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScxJz4KICAgICAgPHN0b3Agb2Zmc2V0PScwJScgIHN0b3AtY29sb3I9JyMwMDBhM2MnIHN0b3Atb3BhY2l0eT0nMC44NScvPgogICAgICA8c3RvcCBvZmZzZXQ9JzEwMCUnIHN0b3AtY29sb3I9JyM4ZjkzYTYnIHN0b3Atb3BhY2l0eT0nMC41NScvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPGcgZmlsbD0nbm9uZScgc3Ryb2tlPSd1cmwoI2cpJyBzdHJva2Utd2lkdGg9JzEuNic+CiAgICA8cGF0aCBkPSdNLTEwMCw3ODAgQzMwMCw2MjAgNTIwLDYyMCA5MDAsNzgwIEMxMjIwLDkxMCAxNDUwLDkwMCAxNzIwLDc2MCcgb3BhY2l0eT0nMC41NScvPgogICAgPHBhdGggZD0nTS0xMjAsNzAwIEMyNDAsNTQwIDU2MCw1NDAgOTQwLDcwMCBDMTI2MCw4NDAgMTQ4MCw4MzAgMTc0MCw2OTAnIG9wYWNpdHk9JzAuNDUnLz4KICAgIDxwYXRoIGQ9J00tMTQwLDYyMCBDMjEwLDQ3MCA2MDAsNDcwIDk4MCw2MjAgQzEzMDAsNzYwIDE1MjAsNzUwIDE3NjAsNjEwJyBvcGFjaXR5PScwLjM4Jy8+CiAgICA8cGF0aCBkPSdNLTE2MCw1NDAgQzE4MCw0MDAgNjQwLDQwMCAxMDIwLDU0MCBDMTM0MCw2ODAgMTU2MCw2NzAgMTc4MCw1MzAnIG9wYWNpdHk9JzAuMzInLz4KICAgIDxwYXRoIGQ9J00tMTgwLDQ2MCBDMTUwLDMzMCA2ODAsMzMwIDEwNjAsNDYwIEMxMzgwLDYwMCAxNjAwLDU5MCAxODAwLDQ1MCcgb3BhY2l0eT0nMC4yNicvPgogIDwvZz4KPC9zdmc+");
  background-repeat:no-repeat; background-size: cover; background-position: 0% 50%;
  mix-blend-mode: screen; opacity:.55; z-index:0;
  animation: bgLines 36s linear infinite alternate;
}
.about-wrap{
  position: relative; z-index: 1;
  width: var(--container-w);                /* alinhado com o slider */
  display:flex; flex-direction:column; gap: clamp(10px, 2vmin, 18px);
}
.about-hero{ display:flex; align-items:center; gap:10px; }
.about-hero h2{
  font-family: Montserrat, system-ui; font-weight:900;
  font-size: clamp(22px, 4.4vmin, 36px); margin:0;
  filter: drop-shadow(0 10px 30px rgba(0,3,30,.5));
}
.about-hero .chip{ width:16px; height:16px; border-radius:6px; background: linear-gradient(135deg, rgba(255,255,255,.35), transparent 60%); box-shadow: 0 6px 24px rgba(255,255,255,.08); }

.stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1.8vmin, 14px); }
.metric{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:16px;
  background: var(--glass-bg);
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  position:relative; overflow:hidden;
}
.metric::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  padding:1px; background:linear-gradient(135deg, rgba(251,251,254,.25), rgba(200,201,203,.08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.metric .icon{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.0));
  border:1px solid rgba(200,201,203,.12);
}
.metric .num{
  font-family: Montserrat, system-ui; font-weight:900;
  font-size: clamp(18px, 4.4vmin, 28px);
  line-height:1;
  background: linear-gradient(180deg, rgba(251,251,254,.98), rgba(200,201,203,.55));
  -webkit-background-clip: text; background-clip: text; color:transparent;
  text-shadow: 0 6px 24px rgba(0,3,30,.45);
}
.metric .label{ font-size:11px; letter-spacing:.08em; color:var(--mid); margin-top:2px; }
.metric .col{display:flex; flex-direction:column}

.about-card{
  border-radius:18px; background: var(--glass-bg);
  border:1px solid var(--glass-brd);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  padding: clamp(14px, 2.6vmin, 22px);
  position:relative; overflow:hidden;
}
.about-card::before{
  content:""; position:absolute; inset:-25% -5% auto -25%; height:180px;
  background:
    radial-gradient(500px 160px at left top, rgba(255,255,255,.06), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 10px);
  pointer-events:none;
}
.about-body{ display:flex; flex-direction:column; gap:12px; }
.about-body p{
  color: rgba(251,251,254,.9);
  font-size: clamp(13px,1.55vmin,15px);
  line-height: 1.6;
  margin: 0;
}

/* ===========================================================
   FOOTER
   =========================================================== */
footer{
  position: sticky; bottom: 0; left: 0; right: 0; z-index: 6;
  display:flex; justify-content:center; align-items:center; gap:12px;
  font-size:13px; color:var(--mid); height:var(--footer-h);
  padding-bottom: env(safe-area-inset-bottom);
  background:rgba(0,3,30,.36);
  border-top:1px solid rgba(200,201,203,.10);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
footer .meta{ background:transparent; padding:0; border-radius:0; border:0; }

/* ===========================================================
   MOBILE
   =========================================================== */
@media (max-width: 880px){
  .wrap{ flex-direction:column; padding:14px; gap:14px; padding-top:calc(var(--header-h) + 14px); }
  .panel{ min-height:48vh }
  #split[data-active] .panel{ filter:none; opacity:1 }
  .nav-links{ gap:14px }
  .nav-links a{ font-size:13px }
  .logo{ height:28px }
  .about-wrap{ width: var(--container-w); }  /* igual ao slider */
  .stats{ grid-template-columns:1fr; }
  .about-body{ columns:1; }
}

/* ===========================================================
   REVEAL/ANIMAÇÕES
   =========================================================== */
.reveal-up{ opacity:0; transform: translateY(18px); filter: blur(2px); }
.reveal-up.in{
  opacity:1; transform: none; filter: blur(0);
  transition: transform .6s cubic-bezier(.2,.65,.2,1),
              opacity .6s cubic-bezier(.2,.65,.2,1),
              filter .6s cubic-bezier(.2,.65,.2,1);
  transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1; transform:none; filter:none; }
}

@keyframes bgMesh{
  from{ background-position: 0 0, 100% 100%, 0 0, 100% 100%; }
  to  { background-position: 100% 100%, 0 0, 100% 100%, 0 0; }
}
@keyframes bgLines{
  from{ background-position: 0% 50%; }
  to  { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){
  .about::before, .about::after{ animation: none; }
}