/* ─── RESET & BASE ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      background: var(--bg, #0A100E);
      color: var(--text, #ededed);
      font-family: 'Rubik', sans-serif;
      font-weight: 400;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }

    /* ─── CUSTOM CURSOR — tech crosshair ──────────────────── */
    .cursor-dot {
      width: 4px; height: 4px;
      background: var(--accent);
      border-radius: 50%;
      position: fixed; top: 0; left: 0;
      pointer-events: none; z-index: 9999;
      transform: translate(-50%, -50%);
      transition: transform 0.1s ease, opacity 0.2s;
      box-shadow: 0 0 6px var(--accent), 0 0 12px rgba(21,171,152,0.4);
    }
    .cursor-ring {
      width: 28px; height: 28px;
      border: 1px solid rgba(21,171,152,0.55);
      border-radius: 2px; /* square, not circle — feels more tech */
      position: fixed; top: 0; left: 0;
      pointer-events: none; z-index: 9998;
      transform: translate(-50%, -50%) rotate(45deg);
      transition: left 0.14s ease, top 0.14s ease, width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.25s;
    }
    /* corner tick marks on the ring */
    .cursor-ring::before,
    .cursor-ring::after {
      content: '';
      position: absolute;
      background: var(--accent);
    }
    .cursor-ring::before {
      width: 5px; height: 1px;
      top: -1px; left: -1px;
    }
    .cursor-ring::after {
      width: 1px; height: 5px;
      top: -1px; left: -1px;
    }
    .cursor-ring.hovered {
      width: 44px; height: 44px;
      border-color: var(--accent);
      opacity: 0.8;
    }

    /* ─── CSS VARIABLES ────────────────────────────────────── */
    :root {
      --bg:       #141414;
      --bg2:      #141414;
      --bg3:      #111820;
      --accent:   #0fd1b7;
      --accent2:  #D8B856;
      --text:     #ededed;
      --muted:    #6b7280;
      --border:   rgba(255,255,255,0.07);
      --font-h:   'Montserrat', sans-serif;
      --font-b:   'Rubik', sans-serif;
    }

    /* ─── GRAIN + SCANLINE OVERLAY ─────────────────────────── */
    body::after {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 900; opacity: 0.5;
    }
    /* Global scanline layer — subtle CRT terminal feel */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.025) 3px,
        rgba(0,0,0,0.025) 4px
      );
      pointer-events: none; z-index: 899;
    }

    /* ─── SCROLLBAR ────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

    /* ─── NAV ──────────────────────────────────────────────── */
    nav {
      position: fixed; top: 0; left: 0; width: 100%;
      z-index: 500;
      padding: 1.5rem 4rem;
      display: flex; align-items: center; justify-content: space-between;
      transition: background 0.4s ease, padding 0.4s ease;
    }
    nav.scrolled {
      background: rgba(10,16,14,0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 1rem 4rem;
      border-bottom: 1px solid var(--border);
    }
    .nav-logo {
      font-family: var(--font-h);
      font-weight: 800;
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      position: relative;
    }
    .nav-sub{
        position: absolute;
        width: 100%;
        overflow:visible;
        bottom: -0.575rem;
        right: 0;
        text-align: right;
        font-size: 0.85rem;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
    .nav-logo img{
        margin: 0 5px;
        height: 32px;
        width: 32px;
        transition: transform .3s ease;
        will-change: transform;
    }
    .logo-spin{
    animation: logoSpin 900ms cubic-bezier(.4,0,.2,1);
    }

    @keyframes logoSpin{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
    }
    cc{
        font-family:'Montserrat';
      letter-spacing: -0.075em;
      font-size: 2.15rem;
    will-change: color;
    transition:
        all 900ms ease
    }
    solucoes{
        font-family: 'Rubik';
        text-transform: uppercase;
      letter-spacing: -0.025em;
        font-weight: 500;
        margin-left: 0.05em;
    }
    .smoke-word{
        position: relative;
  display:inline-block;
  will-change: opacity, transform, filter;
  transition:
    opacity 900ms ease,
    transform 900ms ease,
    filter 900ms ease;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

.nav-sub .hero-dot{
  will-change: opacity, transform, filter;
  transition:
    opacity 900ms ease,
    transform 900ms ease,
    filter 900ms ease;
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
}

/* Saindo: evapora */
.smoke-word.is-out,.nav-sub .hero-dot.is-out{
  opacity: 0;
  transform: translateY(-10px) scale(1.02);
  filter: blur(8px);
}

/* Entrando: fumaça chegando */
.smoke-word.is-in,.nav-sub .hero-dot.is-in{
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  filter: blur(10px);
}

    .nav-links {
      display: flex; gap: 2.5rem;
      list-style: none;
      align-items: center;
      justify-content: center;
      width: 30%;
    }
    .nav-links a {
      font-size: 0.82rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--text); }
    .nav-cta {
      background: var(--accent);
      color: var(--bg);
      font-family: var(--font-h);
      font-weight: 700;
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.7rem 1.6rem;
      border-radius: 2px;
      transition: opacity 0.2s, transform 0.2s;
    }
    .nav-cta:hover { opacity: 0.85; transform: translateY(-1px); }

    /* ─── HERO ─────────────────────────────────────────────── */
    #hero {
      position: relative;
      height: 100vh; min-height: 700px;
      display: flex; flex-direction: column;
      align-items: flex-start; justify-content: center;
      padding: 0 4rem 0rem;
      overflow: hidden;
    }

    /* ── TECH HERO BACKGROUND ─────────────────────────────────── */

    /* Base deep dark with radial glow from top-right (like a data center heatmap) */
    .hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 75% 20%, rgba(10, 15, 15, 0.13) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 20% 80%, rgba(0, 0, 0, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse 100% 80% at 50% 50%, var(--bg) 0%, var(--bg) 100%);
    }

    /* Animated perspective grid — the "floor" of a tech world */
    .hero-bg::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(21,171,152,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,171,152,0.07) 1px, transparent 1px);
      background-size: 60px 60px;
      background-position: center center;
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0.8) 60%, transparent 100%);
      animation: gridDrift 20s linear infinite;
    }
    @keyframes gridDrift {
      from { background-position: center 0px; }
      to   { background-position: center 60px; }
    }

    /* Circuit trace lines — SVG circuit board pattern */
    .hero-bg::after {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(21,171,152,0.09)' stroke-width='1'%3E%3Cpath d='M20 20 h40 v20 h60 v-20 h40'/%3E%3Cpath d='M20 60 h20 v40 h-20'/%3E%3Cpath d='M60 80 h80 v40 h-80 z'/%3E%3Cpath d='M140 60 h20 v40 h-20'/%3E%3Cpath d='M20 140 h40 v20 h100 v-20 h20'/%3E%3Ccircle cx='20' cy='20' r='3' fill='rgba(21,171,152,0.15)'/%3E%3Ccircle cx='180' cy='20' r='3' fill='rgba(21,171,152,0.15)'/%3E%3Ccircle cx='60' cy='60' r='2' fill='rgba(21,171,152,0.2)'/%3E%3Ccircle cx='140' cy='60' r='2' fill='rgba(21,171,152,0.2)'/%3E%3Ccircle cx='100' cy='100' r='4' fill='rgba(21,171,152,0.12)'/%3E%3Ccircle cx='20' cy='140' r='3' fill='rgba(21,171,152,0.15)'/%3E%3Ccircle cx='180' cy='140' r='3' fill='rgba(21,171,152,0.15)'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 200px 200px;
      opacity: 0.5;
      pointer-events: none;
    }

    /* Floating data-node particles — pure CSS */
    #hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        radial-gradient(circle 1.5px at 15% 25%, rgba(21,171,152,0.7) 0%, transparent 100%),
        radial-gradient(circle 1px at 72% 18%, rgba(21,171,152,0.5) 0%, transparent 100%),
        radial-gradient(circle 2px at 88% 55%, rgba(216,184,86,0.4) 0%, transparent 100%),
        radial-gradient(circle 1px at 35% 70%, rgba(21,171,152,0.4) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 55% 38%, rgba(21,171,152,0.6) 0%, transparent 100%),
        radial-gradient(circle 1px at 92% 80%, rgba(216,184,86,0.3) 0%, transparent 100%),
        radial-gradient(circle 1px at 8% 88%, rgba(21,171,152,0.4) 0%, transparent 100%),
        radial-gradient(circle 2px at 63% 72%, rgba(21,171,152,0.3) 0%, transparent 100%),
        radial-gradient(circle 1px at 42% 12%, rgba(21,171,152,0.5) 0%, transparent 100%),
        radial-gradient(circle 1.5px at 78% 42%, rgba(216,184,86,0.4) 0%, transparent 100%);
      animation: nodeFloat 8s ease-in-out infinite alternate;
      pointer-events: none; z-index: 1;
    }
    @keyframes nodeFloat {
      from { transform: translateY(0px); opacity: 0.6; }
      to   { transform: translateY(-12px); opacity: 1; }
    }

    /* Binary / hex data stream — scrolling text background */
    #hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='400' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='20' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.04)'%3E01001101 10110010 01101001%3C/text%3E%3Ctext x='10' y='40' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.03)'%3EFF2E 9A14 0C3B 7F81%3C/text%3E%3Ctext x='10' y='60' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.04)'%3E10110100 01001011 11000110%3C/text%3E%3Ctext x='10' y='80' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.025)'%3E3D9F A102 CC5E 0084%3C/text%3E%3Ctext x='10' y='100' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.04)'%3E01110011 00101100 10010111%3C/text%3E%3Ctext x='10' y='120' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.03)'%3EB4E1 22AF 91D0 5C3F%3C/text%3E%3Ctext x='10' y='140' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.035)'%3E11001010 01110001 00111011%3C/text%3E%3Ctext x='10' y='160' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.025)'%3E0F6A 88B3 41CE 7D92%3C/text%3E%3Ctext x='10' y='180' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.04)'%3E00110101 11010000 01011101%3C/text%3E%3Ctext x='10' y='200' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.03)'%3EE73C 5F09 2B8D A640%3C/text%3E%3Ctext x='10' y='220' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.035)'%3E10001110 01100101 11101000%3C/text%3E%3Ctext x='10' y='240' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.025)'%3E6C17 D4F8 0A5B 93E2%3C/text%3E%3Ctext x='10' y='260' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.04)'%3E01010110 11000011 00101001%3C/text%3E%3Ctext x='10' y='280' font-family='monospace' font-size='9' fill='rgba(21,171,152,0.03)'%3EC8A5 19F6 74B0 2E4D%3C/text%3E%3C/svg%3E");
      background-size: 400px 300px;
      opacity: 1;
      pointer-events: none; z-index: 1;
      animation: dataScroll 30s linear infinite;
    }
    @keyframes dataScroll {
      from { background-position: 0 0; }
      to   { background-position: 0 1300px; }
    }

    /* Overlay gradient — keeps text readable, focuses attention on content */
    .hero-overlay {
      position: absolute; inset: 0; z-index: 2;
      background:
        linear-gradient(to bottom, rgba(10,16,14,0.2) 0%, rgba(10,16,14,0.0) 30%, rgba(21,171,152,0.05) 70%, var(--bg2)100%),
        linear-gradient(to right, rgba(21,171,152,0.05) 0%, rgba(27, 27, 27, 0.2) 55%, rgba(21,171,152,0.05) 80%);
    }

    /* Scan line effect — reinforces the CRT/terminal aesthetic */
    .hero-scanlines {
      position: absolute; inset: 0; z-index: 3;
      background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.06) 3px,
        rgba(0,0,0,0.06) 4px
      );
      pointer-events: none;
    }

    .hero-content {
      position: relative; z-index: 2;
      max-width: 900px;
    }
    .gold{
        color: var(--accent2);
    }
    .teal{
        color: var(--accent);
    }
    .hero-eyebrow {
      display: flex; align-items: center; gap: 0.75rem;
      margin-bottom: 1.5rem;
      opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.4s forwards;
    }
    .hero-eyebrow-dot {
      width: 6px; height: 6px;
      background: var(--accent); border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50% { opacity:0.5; transform:scale(1.4); }
    }
    .hero-eyebrow span {
      font-size: 0.75rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      font-weight: 500;
    }
    .hero-heading {
      font-family: var(--font-h);
      font-weight: 800;
      font-size: clamp(3.2rem, 7.5vw, 7rem);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin-bottom: 1rem;
      opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.6s forwards;
    }
    .hero-heading .accent { color: var(--accent); }
    .hero-heading .outline {
      color: var(--accent);
    }
    .hero-heading .hero-dot,.nav-logo .hero-dot{
        color: var(--accent2);
    }
    .hero-tagline-row {
      display: flex; align-items: baseline; gap: 0.4em;
      margin-bottom: 2rem;
      opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 0.85s forwards;
    }
    .hero-tagline-prefix {
      font-size: clamp(1.2rem, 3vw, 2.2rem);
      font-weight: 300;
      color: rgba(237,237,237,0.55);
      letter-spacing: 0.01em;
    }
    .hero-typed {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: clamp(1.2rem, 3vw, 2.2rem);
      color: var(--accent);
      letter-spacing: -0.01em;
    }
    .cursor-text {
      display: inline-block;
      width: 2px; height: 1em;
      background: var(--accent);
      margin-left: 3px;
      vertical-align: middle;
      animation: blink 1s step-start infinite;
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

    .hero-sub {
      max-width: 480px;
      font-size: 1.1rem;
      line-height: 1.7;
      color: rgba(237,237,237,0.9);
      margin-bottom: 2.5rem;
      opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 1.0s forwards;
    }

    .hero-actions {
      display: flex; align-items: center; gap: 1.5rem;
      opacity: 0; animation: fadeUp 0.9s cubic-bezier(0.22,1,0.36,1) 1.15s forwards;
    }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: var(--accent);
      color: var(--bg);
      font-family: var(--font-h);
      font-weight: 700;
      font-size: 0.85rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 1rem 2rem;
      border-radius: 2px;
      transition: opacity 0.2s, transform 0.2s;
    }
    .btn-primary:hover { opacity: 0.88; transform: translateY(-2px); }
    .btn-primary svg { flex-shrink:0; }
    .btn-ghost {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(237,237,237,0.6);
      border-bottom: 1px solid rgba(237,237,237,0.2);
      padding-bottom: 2px;
      transition: color 0.2s, border-color 0.2s;
    }
    .btn-ghost:hover { color: var(--text); border-color: var(--text); }

    /* Scroll indicator */
    .hero-scroll {
      position: absolute; bottom: 2.5rem; right: 4rem;
      display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
      opacity: 0; animation: fadeIn 1s ease 1.6s forwards;
      z-index: 2;
    }
    .hero-scroll span {
      font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--muted); writing-mode: vertical-rl;
    }
    .scroll-line {
      width: 1px; height: 50px;
      background: linear-gradient(to bottom, var(--accent), transparent);
      animation: scrollDrop 2s ease-in-out infinite;
    }
    @keyframes scrollDrop {
      0%,100%{ opacity:0.3; transform:scaleY(0.5) translateY(-10px); }
      50%    { opacity:1;   transform:scaleY(1)   translateY(0); }
    }

    /* Stats bar */
    .hero-stats {
      position: absolute; bottom: 0; left: 0; right: 0;
      display: flex;
      border-top: 1px solid var(--border);
      z-index: 2;
      opacity: 0; animation: fadeIn 1s ease 1.4s forwards;
    }
    .hero-stat {
      flex: 1;
      padding: 1.5rem 4rem;
      border-right: 1px solid var(--border);
      background: rgba(10,16,14,0.7);
      backdrop-filter: blur(10px);
    }
    .hero-stat:last-child { border-right: none; }
    .hero-stat-num {
      font-family: var(--font-h);
      font-weight: 800;
      font-size: 2rem;
      letter-spacing: -0.03em;
      color: var(--accent);
      line-height: 1;
    }
    .hero-stat-num i, .hero-stat-num span{
      color: var(--accent2)
    }
    .hero-stat-num i{
      margin: 0 3px;
    }
    .hero-stat-label {
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-top: 0.25rem;
    }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(30px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes fadeIn {
      to { opacity:1; }
    }

    /* ─── SECTION COMMONS ──────────────────────────────────── */
    section { padding: 7rem 14rem; }
    .section-tag {
      display: inline-flex; align-items: center; gap: 0.6rem;
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 1.5rem;
    }
    .section-tag::before {
      content: '';
      width: 24px; height: 1px;
      background: var(--accent);
    }
    .section-heading {
      font-family: var(--font-h);
      font-weight: 800;
      font-size: clamp(2.2rem, 4.5vw, 4rem);
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin-bottom: 1.5rem;
    }
    .section-heading .dim { color: var(--muted); }
    .section-body {
      font-size: 1rem;
      line-height: 1.75;
      color: rgba(237,237,237,0.6);
    }

    /* Reveal on scroll */
    .reveal {
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
    }
    .reveal.visible {
      opacity: 1; transform: translateY(0);
    }

    /* ─── SERVICES ─────────────────────────────────────────── */
    #servicos {
      position: relative;
    }
    #servicos::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(21,171,152,0.04)' stroke-width='0.75'%3E%3Crect x='10' y='10' width='20' height='20' rx='1'/%3E%3Crect x='50' y='10' width='20' height='20' rx='1'/%3E%3Crect x='10' y='50' width='20' height='20' rx='1'/%3E%3Crect x='50' y='50' width='20' height='20' rx='1'/%3E%3Cline x1='30' y1='20' x2='50' y2='20'/%3E%3Cline x1='20' y1='30' x2='20' y2='50'/%3E%3Cline x1='60' y1='30' x2='60' y2='50'/%3E%3Cline x1='30' y1='60' x2='50' y2='60'/%3E%3Ccircle cx='40' cy='40' r='2' fill='rgba(21,171,152,0.06)'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 80px 80px;
      pointer-events: none; z-index: 0;
    }
    #servicos > * { position: relative; z-index: 1; }
    .services-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5px;
      margin-top: 4rem;
      border: 1.5px solid var(--border);
    }
    .service-card {
      background: var(--bg2);
      padding: 2.5rem;
      border-right: 1.5px solid var(--border);
      border-bottom: 1.5px solid var(--border);
      position: relative;
      overflow: hidden;
      transition: background 0.3s;
    }
    .service-card::before {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 100%; height: 2px;
      background: var(--accent);
      transform: scaleX(0); transform-origin: left;
      transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
    }
    .service-card:hover::before { transform: scaleX(1); }
    .service-card:hover { background: var(--bg3); box-shadow: 0 0 40px rgba(21,171,152,0.04) inset; }
    /* glowing bottom edge on hover */
    .service-card::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
      background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(21,171,152,0) 0%, transparent 100%);
      transition: background 0.5s; pointer-events: none;
    }
    .service-card:hover::after {
      background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(21,171,152,0.08) 0%, transparent 100%);
    }
    .service-icon {
      width: 44px; height: 44px;
      margin-bottom: 1.5rem;
      color: var(--accent);
    }
    .service-num {
      position: absolute; top: 2rem; right: 2rem;
      font-family: var(--font-h);
      font-weight: 800;
      font-size: 0.72rem;
      color: var(--border);
      letter-spacing: 0.1em;
    }
    .service-title {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: 1.25rem;
      letter-spacing: -0.02em;
      margin-bottom: 0.75rem;
    }
    .service-desc {
      font-size: 0.9rem;
      line-height: 1.7;
      color: rgba(237,237,237,0.55);
    }
    .service-tags {
      display: flex; flex-wrap: wrap; gap: 0.4rem;
      margin-top: 1.5rem;
    }
    .service-tag {
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      border: 1px solid var(--border);
      padding: 0.25rem 0.6rem;
      border-radius: 2px;
    }

    /* ─── ABOUT ────────────────────────────────────────────── */
    #sobre {
      background: var(--bg);
      position: relative;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6rem;
      align-items: center;
    }
    .about-img-wrap {
      position: relative;
    }
    .about-img {
      width: 100%;
      aspect-ratio: 4/5;
      object-fit: cover;
      border-radius: 2px;
      filter: grayscale(30%);
    }
    .about-img-tag {
      position: absolute; bottom: -1.5rem; right: -1.5rem;
      background: var(--accent);
      color: var(--bg);
      font-family: var(--font-h);
      font-weight: 700;
      font-size: 0.75rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 1rem 1.5rem;
    }
    .about-line {
      width: 48px; height: 2px;
      background: var(--accent);
      margin: 2rem 0;
    }
    .about-list {
      list-style: none;
      margin-top: 1.5rem;
      display: flex; flex-direction: column; gap: 0.75rem;
    }
    .about-list li {
      display: flex; align-items: center; gap: 0.75rem;
      font-size: 0.9rem;
      color: rgba(237,237,237,0.7);
    }
    .about-list li::before {
      content: '';
      width: 6px; height: 6px;
      background: var(--accent);
      border-radius: 50%;
      flex-shrink: 0;
    }

    #sobre::after {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(21,171,152,0.035)' stroke-width='0.75'%3E%3Ccircle cx='60' cy='60' r='30'/%3E%3Ccircle cx='60' cy='60' r='20'/%3E%3Ccircle cx='60' cy='60' r='10'/%3E%3Cline x1='0' y1='60' x2='120' y2='60'/%3E%3Cline x1='60' y1='0' x2='60' y2='120'/%3E%3Cline x1='17' y1='17' x2='103' y2='103'/%3E%3Cline x1='103' y1='17' x2='17' y2='103'/%3E%3Ccircle cx='60' cy='60' r='2' fill='rgba(21,171,152,0.08)'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 120px 120px;
      pointer-events: none; z-index: 0;
      opacity: 0.6;
    }
    #sobre > * { position: relative; z-index: 1; }

    /* ─── PORTFOLIO ────────────────────────────────────────── */
    #portfolio {
      background: var(--bg2);
      position: relative;
    }
    #portfolio::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(21,171,152,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,171,152,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none; z-index: 0;
    }
    #portfolio > * { position: relative; z-index: 1; }
    .portfolio-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 3rem;
    }
    .cases-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 1.5px;
    }
    .case-card {
      position: relative;
      overflow: hidden;
      border-radius: 2px;
      cursor: pointer;
    }
    .case-card:nth-child(1) { grid-column: span 7; }
    .case-card:nth-child(2) { grid-column: span 5; }
    .case-card:nth-child(3) { grid-column: span 4; }
    .case-card:nth-child(4) { grid-column: span 4; }
    .case-card:nth-child(5) { grid-column: span 4; }
    .case-img {
      width: 100%;
      aspect-ratio: 16/10;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), filter 0.4s;
      filter: grayscale(40%) brightness(0.8);
    }
    .case-card:hover .case-img {
      transform: scale(1.06);
      filter: grayscale(0%) brightness(1);
    }
    .case-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(10,16,14,0.9) 0%, transparent 60%);
      display: flex; flex-direction: column;
      justify-content: flex-end;
      padding: 1.75rem;
      opacity: 0; transition: opacity 0.3s;
    }
    .case-card:hover .case-overlay { opacity: 1; }
    .case-cat {
      font-size: 0.65rem; letter-spacing: 0.18em;
      text-transform: uppercase; color: var(--accent);
      margin-bottom: 0.4rem;
    }
    .case-title {
      font-family: var(--font-h);
      font-weight: 700; font-size: 1.1rem;
      letter-spacing: -0.02em;
    }
    /* always-visible label on non-hover */
    .case-label {
      position: absolute; bottom: 1rem; left: 1.5rem;
      font-family: var(--font-h);
      font-size: 0.85rem; font-weight: 600;
      color: rgba(237,237,237,0.7);
      transition: opacity 0.3s;
    }
    .case-card:hover .case-label { opacity: 0; }

    /* ─── TESTIMONIALS ─────────────────────────────────────── */
    #depoimentos {
      background: var(--bg);
      overflow: hidden;
      position: relative;
    }
    #depoimentos::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cpolygon points='30,5 55,20 55,40 30,55 5,40 5,20' stroke='rgba(21,171,152,0.04)' stroke-width='0.75'/%3E%3Cpolygon points='30,15 45,22.5 45,37.5 30,45 15,37.5 15,22.5' stroke='rgba(21,171,152,0.03)' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='30' r='2' fill='rgba(21,171,152,0.05)'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 60px 60px;
      pointer-events: none; z-index: 0;
    }
    #depoimentos > * { position: relative; z-index: 1; }
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5px;
      margin-top: 3.5rem;
    }
    .testi-card {
      background: var(--bg3);
      padding: 2.5rem;
      position: relative;
      transition: background 0.3s, box-shadow 0.3s;
      overflow: hidden;
    }
    .testi-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(to right, transparent, rgba(21,171,152,0.4), transparent);
      opacity: 0; transition: opacity 0.3s;
    }
    .testi-card:hover { background: #111f1c; box-shadow: 0 -2px 20px rgba(21,171,152,0.04); }
    .testi-card:hover::before { opacity: 1; }
    .testi-quote {
      font-size: 3rem;
      line-height: 1;
      color: var(--accent);
      font-family: var(--font-h);
      font-weight: 800;
      margin-bottom: 1rem;
      opacity: 0.6;
    }
    .testi-text {
      font-size: 0.95rem;
      line-height: 1.75;
      color: rgba(237,237,237,0.7);
      margin-bottom: 2rem;
    }
    .testi-author {
      display: flex; align-items: center; gap: 1rem;
    }
    .testi-avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--bg2);
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid var(--border);
    }
    .testi-avatar img { width:100%; height:100%; object-fit:cover; }
    .testi-name {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: 0.9rem;
    }
    .testi-role {
      font-size: 0.75rem;
      color: var(--muted);
      margin-top: 0.15rem;
    }

    /* ─── CTA SECTION ──────────────────────────────────────── */
    #contato {
      background: var(--accent);
      padding: 6rem 4rem;
      display: flex; align-items: center; justify-content: space-between;
      gap: 3rem;
      position: relative;
      overflow: hidden;
    }
    #contato::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='rgba(10,16,14,0.08)' stroke-width='0.75'%3E%3Cpath d='M10 10 h20 v10 h40 v-10 h20'/%3E%3Cpath d='M10 50 h10 v20 h-10'/%3E%3Cpath d='M80 50 h10 v20 h-10'/%3E%3Cpath d='M30 50 h40 v20 h-40 z'/%3E%3Cpath d='M10 90 h35 v-20 h10 v20 h35'/%3E%3Ccircle cx='50' cy='10' r='3' fill='rgba(10,16,14,0.07)'/%3E%3Ccircle cx='10' cy='50' r='2' fill='rgba(10,16,14,0.06)'/%3E%3Ccircle cx='90' cy='50' r='2' fill='rgba(10,16,14,0.06)'/%3E%3Ccircle cx='50' cy='90' r='3' fill='rgba(10,16,14,0.07)'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 100px 100px;
      pointer-events: none;
    }
    #contato > * { position: relative; z-index: 1; }
    .cta-heading {
      font-family: var(--font-h);
      font-weight: 800;
      font-size: clamp(2rem, 4vw, 3.5rem);
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: var(--bg);
      max-width: 600px;
    }
    .cta-heading span { opacity: 0.45; }
    .btn-dark {
      display: inline-flex; align-items: center; gap: 0.6rem;
      background: var(--bg);
      color: var(--accent);
      font-family: var(--font-h);
      font-weight: 700;
      font-size: 0.9rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 1.1rem 2.2rem;
      border-radius: 2px;
      white-space: nowrap;
      transition: transform 0.2s, opacity 0.2s;
      flex-shrink: 0;
    }
    .btn-dark:hover { transform: translateY(-2px); opacity: 0.88; }

    /* ─── FOOTER ───────────────────────────────────────────── */
    footer {
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: 3rem 4rem;
      display: flex; align-items: center; justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    footer::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(21,171,152,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21,171,152,0.025) 1px, transparent 1px);
      background-size: 30px 30px;
      pointer-events: none;
    }
    footer > * { position: relative; z-index: 1; }
    .footer-logo {
      font-family: var(--font-h);
      font-weight: 800;
      font-size: 1.1rem;
      letter-spacing: -0.02em;
    }
    .footer-logo span { color: var(--accent); }
    .footer-copy {
      font-size: 0.78rem;
      color: var(--muted);
    }
    .footer-links {
      display: flex; gap: 2rem; list-style: none;
    }
    .footer-links a {
      font-size: 0.78rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.2s;
    }
    .footer-links a:hover { color: var(--text); }

    /* ─── RESPONSIVE ───────────────────────────────────────── */
    @media (max-width: 900px) {
      nav { padding: 1.25rem 2rem; }
      nav.scrolled { padding: 0.875rem 2rem; }
      .nav-links, .nav-cta { display: none; }
      #hero { padding: 6rem 2rem 0; height: auto;}
      .hero-stats { display: none; }
      section { padding: 5rem 2rem; }
      #sobre { grid-template-columns: 1fr; gap: 3rem; }
      .about-img-wrap { order: -1; }
      .cases-grid { grid-template-columns: 1fr; }
      .case-card:nth-child(n) { grid-column: span 1; }
      .testi-grid { grid-template-columns: 1fr; }
      #contato { flex-direction: column; text-align: center; align-items: center; }
      footer { flex-direction: column; gap: 1.5rem; text-align: center; }
      .hero-scroll { display: none; }
    }

    /* ─────────────────────────────────────────
   Página de Planos (nova página, mesmo design)
   ───────────────────────────────────────── */

.plans-hero{
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding-top: 6.5rem; /* espaço por causa da nav fixa */
}

.plans-hero-quick{
  margin-top: 1.6rem;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.plans-ghost{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  background: rgba(255,255,255,0.03);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.plans-ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
}

.plans-section{
  padding: 5rem 14vw;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.plans-grid{
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.plan-card{
  background: #0c1513;
  padding: 1.6rem 1.5rem;
  min-height: 310px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .25s ease, background .25s ease;
}
.plan-card:hover{
  transform: translateY(-2px);
  background: #101f1c;
}

.plan-head{
  margin-bottom: 1rem;
  display: grid;
  gap: .3rem;
}
.plan-title{
  font-family: var(--font-h);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
}
.plan-price{
  font-family: var(--font-h);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  font-size: 1.35rem;
}
.plan-small{
  font-size: .9rem;
  color: rgba(237,237,237,0.65);
  font-weight: 700;
  margin-left: .2rem;
}
.plan-sub{
  color: rgba(237,237,237,0.60);
  font-size: .92rem;
}

.plan-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
  color: rgba(237,237,237,0.78);
  line-height: 1.55;
}
.plan-list li{
  position: relative;
  padding-left: 1.1rem;
}
.plan-list li::before{
  content:'';
  position:absolute;
  left:0; top:.55em;
  width:6px; height:6px;
  background: var(--accent2);
  opacity:.65;
  border-radius: 1px;
}

.plan-foot{
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: rgba(237,237,237,0.60);
  font-size: .9rem;
}

.is-featured{
  background: #0d1a18;
}
.is-featured::before{
  content:'';
  position:absolute; inset:0;
  border: 1px solid rgba(21,171,152,0.35);
  pointer-events:none;
}
.plan-badge{
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: .78rem;
  padding: 6px 10px;
  background: rgba(21,171,152,0.12);
  border: 1px solid rgba(21,171,152,0.22);
  color: rgba(237,237,237,0.90);
}

.explain-grid{
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
.explain-card{
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  padding: 1.4rem 1.2rem;
}
.explain-card h3{
  margin: 0 0 .6rem 0;
  font-family: var(--font-h);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.explain-card p{
  margin: 0 0 1rem 0;
  color: rgba(237,237,237,0.65);
  line-height: 1.7;
}
.explain-card ul{
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(237,237,237,0.72);
  line-height: 1.8;
}

.plans-contact{
  margin-top: 1.6rem;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 980px){
  .plans-grid{ grid-template-columns: 1fr; }
  .explain-grid{ grid-template-columns: 1fr; }
  .plan-card{ min-height: unset; }
}