/* ===========================================================
   ATTO — Soluções em TI, Redes e Telefonia
   Design tokens
   - "atto" = 10^-18s: identidade em torno de velocidade/precisão
   =========================================================== */

:root{
  /* Palette */
  --ink:        #0a0e14;   /* fundo profundo */
  --ink-2:      #11161f;   /* superfície elevada */
  --ink-3:      #1a212d;   /* cartões */
  --line:       #232c3a;   /* linhas/hairlines */
  --fog:        #8b97a8;   /* texto secundário */
  --paper:      #eef2f7;   /* texto principal */
  --white:      #ffffff;
  --volt:       #2e6bff;   /* azul-elétrico (acento) */
  --volt-2:     #5b8cff;
  --glow:       rgba(46,107,255,.35);

  /* Light surfaces (páginas internas claras) */
  --bg-light:   #f4f6fa;
  --card-light: #ffffff;
  --ink-on-light:#0a0e14;
  --fog-on-light:#5b6776;

  /* Type */
  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body:    "Inter", "Segoe UI", system-ui, sans-serif;
  --mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  /* Scale */
  --step--1: clamp(.78rem,.74rem + .2vw,.86rem);
  --step-0:  clamp(.98rem,.94rem + .25vw,1.06rem);
  --step-1:  clamp(1.2rem,1.1rem + .6vw,1.5rem);
  --step-2:  clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
  --step-3:  clamp(2.2rem,1.6rem + 3vw,4rem);
  --step-4:  clamp(3rem,2rem + 5vw,6.5rem);

  --wrap: 1180px;
  --gap: clamp(1rem,3vw,2rem);
  --radius: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* fix accidental token typos */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--body);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--paper);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

h1,h2,h3,h4{ font-family:var(--display); line-height:1.05; font-weight:600; letter-spacing:-.02em; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }

.accent{ color:var(--volt); }
.muted{ color:var(--fog); }

/* eyebrow technical label */
.eyebrow{
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--volt-2);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
}
.eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--volt);
  display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  --pad-y:.85rem; --pad-x:1.4rem;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:var(--pad-y) var(--pad-x);
  font-family:var(--mono);
  font-size:var(--step--1);
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:999px;
  border:1px solid transparent;
  transition:transform .25s var(--ease), background .25s, box-shadow .25s, color .25s;
}
.btn-primary{ background:var(--volt); color:#fff; box-shadow:0 8px 30px -8px var(--glow); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -8px var(--glow); }
.btn-ghost{ border-color:var(--line); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--volt); color:var(--volt-2); transform:translateY(-2px); }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }

/* =====================================================
   HEADER
   ===================================================== */
.topbar{
  background:var(--ink-2);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:var(--step--1);
  color:var(--fog);
}
.topbar .wrap{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.5rem 0; flex-wrap:wrap; }
.topbar a:hover{ color:var(--volt-2); }
.topbar .socials{ display:flex; gap:1rem; }

.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,14,20,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.6rem 0;
}
.brand img{ height:83px; width:auto; }
.brand .logo--mono{ filter:brightness(0) invert(1); }
.brand{ display:flex; align-items:center; gap:.7rem; }

.nav{ display:flex; align-items:center; gap:.3rem; }
.nav > ul{ display:flex; list-style:none; align-items:center; gap:.2rem; }
.nav a{
  display:block; padding:.6rem .85rem;
  font-size:var(--step--1); letter-spacing:.02em;
  color:var(--paper); border-radius:8px;
  transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--volt-2); background:var(--ink-3); }
.nav .has-sub{ position:relative; }
.nav .sub{
  position:absolute; top:100%; left:0;
  min-width:230px; list-style:none;
  background:var(--ink-2); border:1px solid var(--line);
  border-radius:12px; padding:.4rem;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.22s var(--ease);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.7);
}
.nav .has-sub:hover .sub{ opacity:1; visibility:visible; transform:translateY(4px); }
.nav .sub a{ font-family:var(--mono); font-size:var(--step--1); }

.header-cta{ display:flex; align-items:center; gap:1rem; }
.header-phone{ font-family:var(--mono); color:var(--paper); white-space:nowrap; }
.header-phone:hover{ color:var(--volt-2); }

.burger{ display:none; background:none; border:0; color:var(--paper); padding:.4rem; }
.burger svg{ width:28px; height:28px; }

/* =====================================================
   HERO
   ===================================================== */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(4rem,9vw,8rem) 0 clamp(3rem,7vw,6rem);
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(46,107,255,.18), transparent 60%),
    radial-gradient(600px 400px at 0% 110%, rgba(91,140,255,.12), transparent 55%),
    var(--ink);
}
/* faint measurement grid */
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 70% 30%, #000 0%, transparent 70%);
  opacity:.5; pointer-events:none;
}
.hero .wrap{ position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:center; }
.hero h1{ font-size:var(--step-4); margin:.8rem 0 1.2rem; }
.hero p.lead{ color:var(--fog); font-size:var(--step-1); max-width:46ch; margin-bottom:2rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* hero side readout — the "signature": an attosecond readout */
.readout{
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg,var(--ink-2),var(--ink-3));
  padding:1.6rem; font-family:var(--mono);
}
.readout .row{ display:flex; justify-content:space-between; align-items:baseline; padding:.7rem 0; border-bottom:1px dashed var(--line); }
.readout .row:last-child{ border-bottom:0; }
.readout .k{ color:var(--fog); font-size:var(--step--1); letter-spacing:.05em; }
.readout .v{ color:var(--volt-2); font-size:var(--step-1); }
.readout .tick{ color:var(--volt); }

/* hero rotating words */
.rotator{ display:inline-grid; }
.rotator > span{ grid-area:1/1; opacity:0; transform:translateY(.4em); animation:rot 9s infinite; }
.rotator > span:nth-child(1){ animation-delay:0s; }
.rotator > span:nth-child(2){ animation-delay:3s; }
.rotator > span:nth-child(3){ animation-delay:6s; }
@keyframes rot{
  0%,28%{ opacity:1; transform:translateY(0); }
  33%,100%{ opacity:0; transform:translateY(-.4em); }
}

/* =====================================================
   SECTION SHELL
   ===================================================== */
.section{ padding:clamp(3.5rem,8vw,7rem) 0; }
.section-head{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head h2{ margin:.6rem 0 1rem; }
.section.light{ background:var(--bg-light); color:var(--ink-on-light); }
.section.light .muted,.section.light p{ color:var(--fog-on-light); }
.section.light h2,.section.light h3{ color:var(--ink-on-light); }

/* =====================================================
   SERVICE CARDS
   ===================================================== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.card{
  position:relative; padding:1.8rem;
  background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s;
}
.section.light .card{ background:var(--card-light); border-color:#e4e9f1; box-shadow:0 1px 2px rgba(10,14,20,.04); }
.card:hover{ transform:translateY(-6px); border-color:var(--volt); }
.card .idx{ font-family:var(--mono); font-size:var(--step--1); color:var(--volt); letter-spacing:.1em; }
.card h3{ font-size:var(--step-1); margin:.8rem 0 .6rem; }
.card p{ color:var(--fog); font-size:var(--step-0); }
.section.light .card p{ color:var(--fog-on-light); }
.card .more{ display:inline-flex; gap:.4rem; margin-top:1.2rem; font-family:var(--mono); font-size:var(--step--1); color:var(--volt-2); letter-spacing:.06em; }
.card .more .arr{ transition:transform .25s var(--ease); }
.card:hover .more .arr{ transform:translateX(4px); }
.card .ico{ width:46px; height:46px; color:var(--volt); }

/* =====================================================
   STATS
   ===================================================== */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.5rem; }
.stat{ border-left:2px solid var(--volt); padding-left:1.2rem; }
.stat .num{ font-family:var(--display); font-size:var(--step-3); font-weight:600; letter-spacing:-.03em; }
.stat .lab{ font-family:var(--mono); font-size:var(--step--1); color:var(--fog); letter-spacing:.04em; margin-top:.3rem; }

/* split about */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.split img{ border-radius:var(--radius); border:1px solid var(--line); }

/* feature list with checkmarks */
.checklist{ list-style:none; display:grid; gap:.9rem; margin-top:1.5rem; }
.checklist li{ display:flex; gap:.8rem; align-items:flex-start; }
.checklist svg{ flex:none; width:22px; height:22px; color:var(--volt); margin-top:.15rem; }

/* =====================================================
   BLOG
   ===================================================== */
.posts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.4rem; }
.post{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .3s var(--ease), border-color .3s; }
.section.light .post{ background:var(--card-light); border-color:#e4e9f1; }
.post:hover{ transform:translateY(-6px); border-color:var(--volt); }
.post .thumb{ aspect-ratio:16/9; background:linear-gradient(135deg,var(--ink-2),var(--volt) 250%); display:grid; place-items:center; }
.post .thumb span{ font-family:var(--mono); color:var(--volt-2); letter-spacing:.2em; font-size:var(--step--1); }
.post .body{ padding:1.4rem; }
.post .tag{ font-family:var(--mono); font-size:var(--step--1); color:var(--volt); letter-spacing:.08em; text-transform:uppercase; }
.post h3{ font-size:var(--step-1); margin:.5rem 0 .6rem; }
.post p{ color:var(--fog); font-size:var(--step-0); }
.section.light .post p{ color:var(--fog-on-light); }

/* =====================================================
   CTA STRIP
   ===================================================== */
.cta-strip{
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(46,107,255,.25), transparent 60%),
    var(--ink-2);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(2rem,5vw,3.5rem);
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
}
.cta-strip h2{ font-size:var(--step-2); max-width:24ch; }

/* =====================================================
   FORMS
   ===================================================== */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field.full{ grid-column:1 / -1; }
.field label{ font-family:var(--mono); font-size:var(--step--1); letter-spacing:.06em; color:var(--fog); text-transform:uppercase; }
.field input,.field textarea,.field select{
  background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  padding:.85rem 1rem; color:var(--paper); font:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.section.light .field input,.section.light .field textarea,.section.light .field select{
  background:#fff; border-color:#dde3ec; color:var(--ink-on-light);
}
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--volt); box-shadow:0 0 0 3px var(--glow); }
.field textarea{ min-height:130px; resize:vertical; }

/* contact info cards */
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; }
.info{ border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; background:var(--ink-3); }
.section.light .info{ background:var(--card-light); border-color:#e4e9f1; }
.info h4{ font-family:var(--mono); font-size:var(--step--1); letter-spacing:.1em; text-transform:uppercase; color:var(--volt-2); margin-bottom:.8rem; }
.info p,.info a{ color:var(--fog); }
.section.light .info p,.section.light .info a{ color:var(--fog-on-light); }
.info a:hover{ color:var(--volt); }

/* =====================================================
   PAGE HEADER (internal)
   ===================================================== */
.page-hero{
  padding:clamp(3.5rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem);
  background:
    radial-gradient(800px 400px at 90% -20%, rgba(46,107,255,.16), transparent 60%),
    var(--ink);
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px; opacity:.25; pointer-events:none;
}
.page-hero .wrap{ position:relative; }
.page-hero h1{ font-size:var(--step-3); margin:.8rem 0 1rem; max-width:18ch; }
.page-hero p{ color:var(--fog); max-width:60ch; font-size:var(--step-1); }
.crumbs{ font-family:var(--mono); font-size:var(--step--1); color:var(--fog); letter-spacing:.06em; }
.crumbs a:hover{ color:var(--volt-2); }
.crumbs span{ color:var(--volt); }

/* prose */
.prose{ max-width:70ch; }
.prose p{ margin-bottom:1.2rem; color:var(--fog); }
.prose h2{ font-size:var(--step-2); margin:2.5rem 0 1rem; }
.prose h3{ font-size:var(--step-1); margin:2rem 0 .8rem; color:var(--paper); }
.section.light .prose p{ color:var(--fog-on-light); }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{ background:var(--ink-2); border-top:1px solid var(--line); padding:clamp(3rem,6vw,5rem) 0 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; }
.foot-brand img{ height:94px; width:auto; margin-bottom:1.2rem; }
.foot-brand .logo--mono{ filter:brightness(0) invert(1); }
.foot-brand p{ color:var(--fog); font-size:var(--step--1); max-width:34ch; }
.foot-col h4{ font-family:var(--mono); font-size:var(--step--1); letter-spacing:.12em; text-transform:uppercase; color:var(--volt-2); margin-bottom:1.1rem; }
.foot-col ul{ list-style:none; display:grid; gap:.6rem; }
.foot-col a{ color:var(--fog); font-size:var(--step-0); }
.foot-col a:hover{ color:var(--volt); }
.foot-social{ display:flex; gap:.8rem; margin-top:1.2rem; }
.foot-social a{ width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; color:var(--fog); transition:.2s; }
.foot-social a:hover{ border-color:var(--volt); color:var(--volt); transform:translateY(-2px); }
.foot-social svg{ width:18px; height:18px; }
.foot-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--mono); font-size:var(--step--1); color:var(--fog); }

/* =====================================================
   REVEAL ANIMATION
   ===================================================== */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .readout{ order:-1; }
  .split{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .form-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .topbar{ display:none; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    background:var(--ink-2); border-left:1px solid var(--line);
    flex-direction:column; align-items:stretch;
    padding:5rem 1.2rem 2rem; transform:translateX(100%);
    transition:transform .35s var(--ease); z-index:60; overflow-y:auto;
  }
  .nav.open{ transform:none; }
  .nav > ul{ flex-direction:column; align-items:stretch; gap:.2rem; }
  .nav .sub{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; background:transparent; padding-left:1rem; }
  .nav .has-sub:hover .sub{ transform:none; }
  .burger{ display:block; z-index:61; }
  .header-phone{ display:none; }
  .foot-grid{ grid-template-columns:1fr; }
  .cta-strip{ flex-direction:column; align-items:flex-start; }
  .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; transition:.3s; z-index:55; }
  .nav-backdrop.show{ opacity:1; visibility:visible; }
}

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

/* ===== Mensagens do formulário (PHP) ===== */
.form-note{
  border-radius:10px; padding:.9rem 1.1rem; margin-bottom:1.2rem;
  font-family:var(--mono); font-size:var(--step--1); line-height:1.5;
}
.form-note.ok{ background:rgba(46,107,255,.12); border:1px solid var(--volt); color:var(--volt-2); }
.form-note.err{ background:rgba(255,80,80,.1); border:1px solid #ff5050; color:#ff8a8a; }
.section.light .form-note.ok{ color:#1c47b8; }

/* ===== Imagens de conteúdo ===== */
.hero-side{ display:flex; flex-direction:column; gap:1rem; }
.hero-img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
}
.section-img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--line);
}
/* posts agora usam <img> dentro do thumb */
.post .thumb{ aspect-ratio:16/9; background:var(--ink-2); overflow:hidden; }
.post .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.post:hover .thumb img{ transform:scale(1.05); }