/* Alvitech — estilos do site */

/* Base */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* Tema e layout */
  :root{
    --bg: #0a0e16;
    --bg-2: #0d1220;
    --panel: #10151f;
    --panel-2: #131a27;
    --border: #212a3a;
    --border-soft: #1a2130;
    --text: #e7ebf2;
    --text-dim: #9aa4b8;
    --text-faint: #5f6a80;
    --red: #e5384d;
    --red-2: #ff5a6e;
    --blue: #3a7bf0;
    --blue-2: #6fa0ff;
    --card-grad: linear-gradient(160deg, #121826 0%, #0c1019 100%);
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      radial-gradient(1100px 620px at 88% -8%, rgba(229,56,77,0.16), transparent 60%),
      radial-gradient(900px 560px at 6% 8%, rgba(58,123,240,0.14), transparent 55%),
      var(--bg);
    color: var(--text);
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    padding-inline: 0;
  }
  h1,h2,h3{ font-family:"Sora","IBM Plex Sans",sans-serif; letter-spacing:-0.01em; text-wrap:balance; margin:0; }
  p{ margin:0; }
  .mono{ font-family:"IBM Plex Mono", ui-monospace, monospace; }
  .wrap{ max-width:1180px; margin:0 auto; padding-inline: 24px; }
  a{ color:inherit; }

  /* subtle circuit backdrop */
  .grid-veil{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 78%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 78%);
    pointer-events:none;
  }

  /* ---------- NAV ---------- */
  header.nav{
    position:sticky; top:0; z-index:40;
    background: rgba(9,12,19,0.82);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border-soft);
  }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:12px; gap:16px; }
  .brand{ display:flex; align-items:center; gap:10px; }
  .brand img{ height:40px; width:auto; display:block; border-radius:6px; }
  nav.links{ display:flex; gap:28px; font-size:14px; color:var(--text-dim); }
  nav.links a{ text-decoration:none; transition:color .15s ease; }
  nav.links a:hover{ color:var(--text); }
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 20px; border-radius:8px; font-size:14px; font-weight:600;
    text-decoration:none; border:1px solid transparent; cursor:pointer;
    white-space:nowrap;
  }
  .btn-primary{ background: linear-gradient(135deg, var(--red), #c22436); color:#fff; box-shadow: 0 8px 22px -8px rgba(229,56,77,0.55); }
  .btn-primary:hover{ background: linear-gradient(135deg, var(--red-2), var(--red)); }
  .btn-ghost{ background:transparent; border-color: var(--border); color: var(--text); }
  .btn-ghost:hover{ border-color: var(--blue-2); color: var(--blue-2); }
  .btn-sm{ padding:9px 16px; font-size:13px; }

  /* ---------- HERO ---------- */
  section.hero{ position:relative; overflow:hidden; padding-block: 76px 84px; border-bottom:1px solid var(--border-soft); }
  .hero-grid{ position:relative; display:grid; grid-template-columns: 1.08fr 0.92fr; gap:56px; align-items:center; }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color: var(--red-2); margin-bottom:18px; }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--red-2); box-shadow:0 0 0 4px rgba(229,56,77,0.18); }
  .hero h1{ font-size: clamp(2.1rem, 4vw, 3.35rem); line-height:1.08; font-weight:700; }
  .hero h1 .accent{ background: linear-gradient(100deg, var(--red-2), var(--blue-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.lead{ margin-top:20px; font-size:17px; line-height:1.65; color: var(--text-dim); max-width:52ch; }
  .hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
  .hero-stats{ display:flex; gap:28px; margin-top:46px; flex-wrap:wrap; }
  .stat b{ display:block; font-family:"Sora",sans-serif; font-size:22px; color:var(--text); }
  .stat span{ font-size:12.5px; color:var(--text-faint); }

  .hero-art{ position:relative; display:flex; align-items:center; justify-content:center; }
  .shield-wrap{ position:relative; width:340px; max-width:100%; aspect-ratio:1/1; }
  .shield-wrap svg{ width:100%; height:100%; display:block; filter: drop-shadow(0 20px 45px rgba(0,0,0,0.55)); }
  .ring{ position:absolute; inset:-26px; border-radius:50%; border:1px dashed rgba(111,160,255,0.28); animation: spin 26s linear infinite; }
  .ring.r2{ inset:-54px; border-color: rgba(229,56,77,0.22); animation-duration: 34s; animation-direction: reverse; }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .ring{ animation:none; } }
  .chip{
    position:absolute; display:flex; align-items:center; gap:8px;
    background: rgba(16,21,31,0.92); border:1px solid var(--border);
    padding:9px 13px; border-radius:9px; font-size:12.5px; color:var(--text-dim);
    box-shadow: 0 12px 24px -10px rgba(0,0,0,0.6);
  }
  .chip .led{ width:7px; height:7px; border-radius:50%; }
  .chip-1{ top:6%; left:-6%; } .chip-1 .led{ background: var(--blue-2); box-shadow:0 0 8px var(--blue-2); }
  .chip-2{ bottom:10%; right:-9%; } .chip-2 .led{ background: var(--red-2); box-shadow:0 0 8px var(--red-2); }
  .chip-3{ bottom:-4%; left:12%; } .chip-3 .led{ background:#3ddc84; box-shadow:0 0 8px #3ddc84; }

  /* ---------- SECTION HEADS ---------- */
  .section{ padding-block: 88px; }
  .section-head{ max-width:640px; margin-bottom:52px; }
  .section-head .eyebrow{ margin-bottom:14px; }
  .section-head h2{ font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight:700; }
  .section-head p{ margin-top:14px; color:var(--text-dim); font-size:15.5px; line-height:1.65; }

  /* ---------- SERVICES ---------- */
  .services-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
  .svc-card{
    background: var(--card-grad); border:1px solid var(--border); border-radius:16px;
    padding:30px 30px 26px; position:relative; overflow:hidden;
    transition: border-color .2s ease, transform .2s ease;
  }
  .svc-card:hover{ transform: translateY(-3px); }
  .svc-card::before{
    content:""; position:absolute; inset:0; opacity:0; transition:opacity .25s ease;
    background: radial-gradient(320px 140px at 0% 0%, rgba(229,56,77,0.10), transparent 60%);
  }
  .svc-card:hover::before{ opacity:1; }
  .svc-card.blue:hover{ border-color: rgba(111,160,255,0.45); }
  .svc-card.red:hover{ border-color: rgba(255,90,110,0.45); }
  .svc-top{ display:flex; align-items:flex-start; gap:16px; margin-bottom:18px; position:relative; }
  .svc-icon{
    flex:0 0 auto; width:50px; height:50px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border);
  }
  .svc-icon.red{ background: rgba(229,56,77,0.10); color: var(--red-2); }
  .svc-icon.blue{ background: rgba(58,123,240,0.12); color: var(--blue-2); }
  .svc-card h3{ font-size:18px; font-weight:700; line-height:1.3; padding-top:6px; }
  .svc-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; position:relative; }
  .svc-card li{ display:flex; gap:10px; font-size:14.5px; color:var(--text-dim); line-height:1.5; }
  .svc-card li svg{ flex:0 0 auto; margin-top:3px; }
  .svc-card.red li svg{ color: var(--red-2); }
  .svc-card.blue li svg{ color: var(--blue-2); }

  /* ---------- ABOUT ---------- */
  .about{ background: var(--bg-2); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
  .about-grid{ display:grid; grid-template-columns: 1.05fr 0.95fr; gap:52px; align-items:start; }
  .about-grid .section-head{ margin-bottom:0; }
  .about-grid .section-head p{ margin-top:16px; }
  .about-grid .section-head p + p{ margin-top:12px; }
  .about-feats{ display:flex; flex-direction:column; gap:14px; }
  .about-feat{
    display:flex; gap:16px; align-items:flex-start;
    padding:20px 22px; border:1px solid var(--border); border-radius:14px; background:var(--panel);
  }
  .about-feat .ico{
    flex:0 0 auto; width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background: rgba(58,123,240,0.12); color: var(--blue-2); border:1px solid var(--border);
  }
  .about-feat:nth-child(2) .ico{ background: rgba(229,56,77,0.10); color: var(--red-2); }
  .about-feat h4{ font-family:"Sora",sans-serif; font-size:15.5px; font-weight:600; }
  .about-feat p{ margin-top:6px; font-size:13.5px; color:var(--text-dim); line-height:1.55; }

  /* ---------- WHY ---------- */
  .why{ background: var(--bg-2); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
  .why-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:20px; }
  .why-item{ padding:26px 22px; border:1px solid var(--border); border-radius:14px; background:var(--panel); }
  .why-item .num{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--text-faint); letter-spacing:0.08em; }
  .why-item h4{ font-family:"Sora",sans-serif; font-size:16px; margin-top:10px; font-weight:600; }
  .why-item p{ margin-top:8px; font-size:13.5px; color:var(--text-dim); line-height:1.55; }

  /* ---------- CTA / CONTACT ---------- */
  .cta{
    position:relative; overflow:hidden; border-radius:22px;
    background: linear-gradient(135deg, #14101a 0%, #0c1019 55%, #101827 100%);
    border:1px solid var(--border);
    padding: 54px 48px;
    display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:center;
  }
  .cta::after{
    content:""; position:absolute; right:-120px; top:-120px; width:340px; height:340px; border-radius:50%;
    background: radial-gradient(circle, rgba(229,56,77,0.28), transparent 70%);
  }
  .cta h2{ font-size: clamp(1.5rem,2.4vw,2.05rem); font-weight:700; position:relative; }
  .cta p{ margin-top:14px; color:var(--text-dim); font-size:15.5px; max-width:46ch; position:relative; }
  .contact-card{ position:relative; background: var(--panel); border:1px solid var(--border); border-radius:16px; padding:26px; display:flex; flex-direction:column; gap:18px; }
  .contact-row{ display:flex; align-items:center; gap:14px; }
  .contact-ico{ width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
  .contact-ico.wa{ background: rgba(58,123,240,0.14); color:var(--blue-2); }
  .contact-ico.em{ background: rgba(229,56,77,0.12); color:var(--red-2); }
  .contact-txt .label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-faint); }
  .contact-txt .value{ font-size:15px; font-weight:600; margin-top:2px; }
  .contact-card .btn{ width:100%; margin-top:4px; }

  /* ---------- FOOTER ---------- */
  footer{ border-top:1px solid var(--border-soft); padding-block:36px; }
  .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .footer-brand{ display:flex; align-items:center; gap:10px; color:var(--text-faint); font-size:13.5px; }
  .footer-brand img{ height:26px; width:auto; border-radius:5px; }
  .footer-links{ display:flex; gap:22px; font-size:13.5px; color:var(--text-faint); }
  .footer-links a{ text-decoration:none; }
  .footer-links a:hover{ color: var(--text-dim); }

  @media (max-width: 900px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-art{ order:-1; margin-bottom:8px; }
    .about-grid{ grid-template-columns:1fr; }
    .services-grid{ grid-template-columns:1fr; }
    .why-grid{ grid-template-columns:repeat(2,1fr); }
    .cta{ grid-template-columns:1fr; padding:36px 26px; }
    nav.links{ display:none; }
  }
  @media (max-width:520px){
    .why-grid{ grid-template-columns:1fr; }
    .hero-stats{ gap:20px; }
    .section{ padding-block:64px; }
  }