/* C.TECHWAVE — estilos da landing page */

  /* ============================================================
     DESIGN TOKENS
     ============================================================ */
  :root {
    /* --- Surfaces. Off-black, tinted toward the brand blue so the whole
           page sits in one temperature. Never pure #000. --- */
    --bg:        #05070d;
    --bg-elev:   #0a0e18;
    --line:      rgba(120, 170, 255, 0.11);  /* structural hairlines */
    --line-strong: rgba(120, 170, 255, 0.22);
    /* Interactive outlines sit brighter and neutral: a blue-tinted hairline
       at this alpha disappears on the near-black surface, and an outlined
       control that cannot be seen is not an affordance. */
    --control-border:       rgba(255, 255, 255, 0.28);
    --control-border-hover: rgba(255, 255, 255, 0.55);

    /* --- Brand blue ramp. One accent, locked page-wide.
           --primary is the only fill used behind white text: 4.83:1 (AA).
           Hover DARKENS (6.11:1) rather than lightening, because lightening
           this hue drops white text to 2.6:1 and fails contrast. --- */
    --primary:        #0066FF;
    --primary-hover:  #0057E0;
    --primary-active: #0049BF;
    --primary-light:  #00AAFF;  /* accents on dark only, never a fill */
    --primary-dark:   #003399;

    /* --- Text. Off-white, not #FFF, so the surface keeps depth. --- */
    --text-primary:   #F2F5FA;  /* 17.6:1 */
    --text-secondary: #93A1B8;  /*  7.5:1 */
    --text-tertiary:  #6B7A93;  /*  4.5:1 - micro-labels only */

    --glow-soft: rgba(0, 102, 255, 0.14);

    /* --- Elevation. Tinted to the background hue, never pure-black drop
           shadows and never neon halos. The inset line is the top highlight
           that gives an edge its physical read. --- */
    --shadow-sm:  0 1px 2px rgba(0, 4, 20, 0.5);
    --shadow-md:  0 8px 24px -8px rgba(0, 50, 150, 0.55);
    --shadow-lg:  0 18px 44px -14px rgba(0, 60, 180, 0.6);
    --edge-top:   inset 0 1px 0 rgba(255, 255, 255, 0.16);

    --font-display: 'Geist', 'Inter', system-ui, sans-serif;
    --font-body:    'Geist', 'Inter', system-ui, sans-serif;

    /* --- Spacing scale (4px base). Every margin and pad below snaps to
           one of these. No ad-hoc 1.35rem / 2.2rem values. --- */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
    --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
    --space-16: 4rem;

    /* --- Radius rule: interactive controls = --r-md, pills = --r-pill,
           surfaces = --r-lg, hairline details = --r-sm. Applied everywhere. --- */
    --r-sm: 4px;  --r-md: 10px;  --r-lg: 16px;  --r-pill: 999px;

    --nav-h: 72px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  }

  /* ============================================================
     RESET & BASE
     ============================================================ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    scroll-behavior: smooth;
    color-scheme: dark;          /* native scrollbars + controls match the page */
    scroll-padding-top: var(--nav-h);
  }

  body {
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

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

  /* Accessible focus ring - visible on keyboard nav */
  :focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  ::selection { background: var(--primary); color: #fff; }

  /* ============================================================
     PHASE 1 — INTRO (signature video + enter gate)
     ============================================================ */
  .intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    background: #000;            /* letterbox bars stay pure black */
    transition: opacity 0.8s var(--ease-out);
  }
  .intro.is-hidden { opacity: 0; pointer-events: none; }

  /* Signature video. No desktop (largura ~16:9) preenche a tela; no celular
     em pé mostra o vídeo INTEIRO com faixas pretas (sem cortar o nome). */
  .intro-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
  }
  @media (orientation: portrait) {
    .intro-video { object-fit: contain; }
  }

  /* Skip control */
  .intro-skip {
    position: absolute;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-pill);
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-weight: 500;
    font-size: 0.85rem;
    transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
                color 0.25s var(--ease), opacity 0.4s var(--ease);
  }
  .intro-skip:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
  }
  .intro-skip.is-gone { opacity: 0; pointer-events: none; }

  /* Enter gate: our C.TECHWAVE stays HIDDEN while the video plays (o nome não
     aparece no início) and fades in only at the end (or on skip), when it
     blinks and becomes clickable. The dark scrim hides the video's final frame
     so only our responsive name shows. */
  .intro-gate {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-8);
    background:
      radial-gradient(circle at 50% 50%, rgba(1, 5, 12, 0.96) 0%, rgba(1, 5, 12, 0.96) 42%, rgba(1, 6, 14, 0.82) 100%);
    opacity: 0;
    pointer-events: none;   /* invisível e não bloqueia o botão "Pular" */
    transition: opacity 0.7s var(--ease-out);
  }
  .intro-gate.is-open { opacity: 1; }
  /* The brand name (also the enter button once ready) */
  .enter-brand {
    background: none;
    border: none;
    padding: var(--space-3) var(--space-4);
    max-width: 94vw;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.75rem, 11vw, 5rem);
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--text-primary);
    white-space: nowrap;
    text-shadow: 0 0 40px rgba(0, 120, 255, 0.5), 0 2px 26px rgba(0, 0, 0, 0.7);
    cursor: default;
    pointer-events: none;   /* não clicável enquanto o vídeo roda */
    transition: transform 0.2s var(--ease);
  }
  .enter-brand .dot { color: var(--primary-light); }
  /* Only clickable + blinking once the gate is open (video ended or skipped) */
  .intro-gate.is-open .enter-brand {
    cursor: pointer;
    pointer-events: auto;
    animation: brandBlink 1.7s ease-in-out infinite;
  }
  .intro-gate.is-open .enter-brand:hover { transform: scale(1.03); animation-play-state: paused; }
  .intro-gate.is-open .enter-brand:active { transform: scale(0.99); }
  @keyframes brandBlink {
    0%, 100% { opacity: 1;    text-shadow: 0 0 44px rgba(0, 130, 255, 0.6), 0 2px 26px rgba(0, 0, 0, 0.7); }
    50%      { opacity: 0.5;  text-shadow: 0 0 16px rgba(0, 130, 255, 0.2), 0 2px 26px rgba(0, 0, 0, 0.7); }
  }

  /* ============================================================
     PHASE 3 — MAIN PAGE (hidden until reveal)
     ============================================================ */
  .main {
    opacity: 0;
    transition: opacity 1s ease;
  }
  .main.is-visible { opacity: 1; }

  /* ============================================================
     FULL-SCREEN WAVE BACKGROUND
     Fixed behind all content; the scrim carries text contrast.
     ============================================================ */
  .hero-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--bg);   /* shows before the poster paints */
  }
  .hero-bg__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 50%;
    /* Nudge the photo/video toward the brand temperature */
    filter: saturate(1.06) contrast(1.02);
  }
  /* Scrim: darkens the left (behind the copy), the top (under the nav) and
     the bottom, and adds a vignette, so white text stays >= WCAG AA over the
     brightest water while the barrel still reads on the right. */
  .hero-bg__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg,
        rgba(5, 7, 13, 0.94) 0%,
        rgba(5, 7, 13, 0.80) 30%,
        rgba(5, 7, 13, 0.42) 58%,
        rgba(5, 7, 13, 0.58) 100%),
      linear-gradient(180deg,
        rgba(5, 7, 13, 0.70) 0%,
        rgba(5, 7, 13, 0.05) 26%,
        rgba(5, 7, 13, 0.05) 60%,
        rgba(5, 7, 13, 0.82) 100%),
      radial-gradient(130% 120% at 62% 46%,
        transparent 42%, rgba(5, 7, 13, 0.55) 100%);
  }

  /* --- NAVBAR --- */
  .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(var(--space-5), 5vw, var(--space-12));
    background: rgba(5, 7, 13, 0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
  }
  .nav-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    transition: opacity 0.2s var(--ease);
  }
  .nav-logo:hover { opacity: 0.72; }
  .nav-logo .dot { color: var(--primary-light); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 2.4vw, var(--space-8));
    list-style: none;
  }
  /* Resting state is secondary, not full white: the nav should not compete
     with the hero headline for attention. Hover resolves to full contrast. */
  .nav-links a {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    position: relative;
    padding: var(--space-1) 0;
    transition: color 0.2s var(--ease);
  }
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 1.5px;
    border-radius: var(--r-pill);
    background: var(--primary-light);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s var(--ease-out);
  }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-links a:hover::after { transform: scaleX(1); }
  /* Underline retracts to the right on exit, so in and out are not identical */
  .nav-links a:not(:hover)::after { transform-origin: right; }

  /* Nav CTA: outlined at rest, fills with brand blue on hover.
     White on --primary is 4.83:1, so the filled state passes AA. */
  .nav-cta {
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--control-border);
    border-radius: var(--r-md);
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: background 0.26s var(--ease), border-color 0.26s var(--ease),
                box-shadow 0.26s var(--ease), transform 0.16s var(--ease);
  }
  .nav-cta:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-md), var(--edge-top);
    transform: translateY(-1px);
  }
  .nav-cta:active {
    background: var(--primary-active);
    border-color: var(--primary-active);
    transform: translateY(0) scale(0.985);
    box-shadow: var(--shadow-sm);
  }

  /* Hamburger (mobile only) */
  .nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 34px; height: 34px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
  }
  .nav-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--text-primary);
    border-radius: var(--r-pill);
    transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* --- HERO --- */
  /* Single column now: the wave is the full-screen background, the copy
     sits over it and is vertically centred in the viewport. */
  .hero {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* brand name sits toward the bottom */
    padding: calc(var(--nav-h) + var(--space-8)) clamp(var(--space-5), 5vw, var(--space-12)) clamp(var(--space-12), 12vh, 7rem);
    max-width: 1400px;
    margin: 0 auto;
  }
  .hero-copy { max-width: 40rem; }

  /* Hero reduced to the brand name only — the wave is the message */
  .hero-brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.75rem, 10vw, 7rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    white-space: nowrap;
    text-shadow: 0 2px 40px rgba(2, 10, 30, 0.6), 0 0 60px rgba(0, 120, 255, 0.28);
  }
  .hero-brand .dot { color: var(--primary-light); }

  /* Primary button (used by the nav CTA look-alikes and the lead submit) */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 3rem;
    padding: 0 var(--space-6);
    border-radius: var(--r-md);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: background 0.26s var(--ease), border-color 0.26s var(--ease),
                box-shadow 0.26s var(--ease), transform 0.16s var(--ease);
  }

  /* Primary. White on --primary = 4.83:1 (AA). Hover darkens instead of
     lightening: lightening this blue drops white text to 2.6:1 and fails. */
  .btn-primary {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
    box-shadow: var(--shadow-md), var(--edge-top);
  }
  .btn-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: var(--shadow-lg), var(--edge-top);
    transform: translateY(-2px);
  }
  .btn-primary:active {
    background: var(--primary-active);
    border-color: var(--primary-active);
    transform: translateY(0) scale(0.985);
    box-shadow: var(--shadow-sm);
  }
  .btn-primary .arrow {
    transition: transform 0.3s var(--ease-out);
    will-change: transform;
  }
  .btn-primary:hover .arrow { transform: translateX(3px); }

  /* ============================================================
     SECTIONS (below the hero) — solid, so they cover the fixed
     wave background as the page scrolls past the hero.
     ============================================================ */
  .section {
    position: relative;
    z-index: 1;
    /* Translucent veil: the fixed home video shows through every section while
       staying dim enough for text and cards to read. */
    background: rgba(3, 9, 19, 0.5);
    padding: clamp(4.5rem, 9vw, 8rem) clamp(var(--space-5), 5vw, var(--space-12));
  }
  .section-inner { position: relative; z-index: 2; max-width: 1400px; margin: 0 auto; }

  /* The home wave video is the fixed background for the WHOLE page, so the
     sections below the hero let it show through as you scroll.
     Legibility scrim behind the section heading (it sits over the video). */
  .section-head { position: relative; }
  .section-head::before {
    content: "";
    position: absolute;
    inset: -12% -6% -12% -6%;
    z-index: -1;
    background: radial-gradient(80% 120% at 0% 40%, rgba(3, 10, 22, 0.7), transparent 75%);
    pointer-events: none;
  }
  .section-head { max-width: 44rem; margin-bottom: clamp(var(--space-10), 5vw, var(--space-16)); }
  .section-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .section-head p {
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.65;
    max-width: 40rem;
    margin-top: var(--space-5);
    text-wrap: pretty;
  }

  /* Services bento: 5 cells, asymmetric rhythm (feature + 4) */
  .bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(var(--space-3), 1.4vw, var(--space-5));
  }
  .svc {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(var(--space-6), 2.4vw, var(--space-8));
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: transform 0.3s var(--ease-out), border-color 0.3s var(--ease);
  }
  .svc:hover { transform: translateY(-4px); border-color: var(--line-strong); }
  .svc::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(120% 80% at 50% -10%, rgba(0, 102, 255, 0.12), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
  }
  .svc:hover::after { opacity: 1; }

  .svc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem; height: 3rem;
    border-radius: var(--r-md);
    background: rgba(0, 102, 255, 0.12);
    border: 1px solid rgba(0, 102, 255, 0.28);
    color: var(--primary-light);
  }
  .svc-icon svg { width: 26px; height: 26px; }
  .svc h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    letter-spacing: -0.01em;
  }
  .svc p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 42ch;
  }

  /* Cell spans */
  .svc--feature { grid-column: span 3; grid-row: span 2; justify-content: space-between; }
  .svc--half    { grid-column: span 3; }
  .svc--third   { grid-column: span 2; }
  .svc--wide    { grid-column: span 4; }

  /* Feature card carries the brand tint (bento visual diversity) */
  .svc--feature {
    gap: var(--space-6);
    background:
      radial-gradient(115% 90% at 12% 0%, rgba(0, 102, 255, 0.20), transparent 55%),
      linear-gradient(160deg, rgba(0, 102, 255, 0.10), rgba(10, 14, 24, 0.35)),
      var(--bg-elev);
    border-color: rgba(0, 102, 255, 0.30);
  }
  .svc--feature .svc-body { display: flex; flex-direction: column; gap: var(--space-4); }
  .svc--feature .svc-icon { width: 3.5rem; height: 3.5rem; }
  .svc--feature .svc-icon svg { width: 30px; height: 30px; }
  .svc--feature h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .svc--feature p { font-size: 1.02rem; max-width: 44ch; }
  .svc-tag {
    align-self: flex-start;
    font-size: 0.68rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--primary-light);
    padding: 0.35rem 0.75rem;
    border-radius: var(--r-pill);
    background: var(--glow-soft);
    border: 1px solid rgba(0, 102, 255, 0.3);
  }

  /* Scroll reveal (IntersectionObserver adds .is-in). Stagger comes from the
     sibling position (no inline styles, so a strict CSP has nothing to allow). */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .reveal:nth-child(2) { transition-delay: 0.06s; }
  .reveal:nth-child(3) { transition-delay: 0.12s; }
  .reveal:nth-child(4) { transition-delay: 0.18s; }
  .reveal:nth-child(5) { transition-delay: 0.24s; }
  .reveal.is-in { opacity: 1; transform: none; }

  /* --- SOLUÇÕES: sticky title + solution rows --- */
  .sol-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(var(--space-8), 5vw, var(--space-16));
    align-items: start;
  }
  .sol-head { position: sticky; top: calc(var(--nav-h) + var(--space-8)); }
  .sol-head h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance;
  }
  .sol-head p {
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.65; max-width: 34rem; margin-top: var(--space-5); text-wrap: pretty;
  }
  .sol-list { list-style: none; }
  .sol-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-5);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--line);
  }
  .sol-item:last-child { border-bottom: 1px solid var(--line); }
  .sol-num {
    font-family: var(--font-display); font-weight: 700; font-size: 1rem;
    color: var(--primary-light); letter-spacing: 0.08em; padding-top: 0.3rem;
  }
  .sol-item h3 {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: -0.01em;
  }
  .sol-item p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-top: var(--space-2); max-width: 48ch; }

  /* --- CASES: horizontal scroll-snap cards --- */
  .cases-track {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--space-2) clamp(var(--space-5), 5vw, var(--space-12)) var(--space-5);
    margin: 0 calc(-1 * clamp(var(--space-5), 5vw, var(--space-12)));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cases-track::-webkit-scrollbar { display: none; }
  .case-card {
    scroll-snap-align: start;
    flex: 0 0 clamp(280px, 80vw, 380px);
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: clamp(var(--space-6), 2.4vw, var(--space-8));
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
  }
  .case-seg {
    align-self: flex-start;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--primary-light);
    padding: 0.3rem 0.7rem; border-radius: var(--r-pill);
    background: var(--glow-soft); border: 1px solid rgba(0, 102, 255, 0.3);
  }
  .case-card h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.6vw, 1.35rem); letter-spacing: -0.01em; }
  .case-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }
  .case-result {
    margin-top: auto; padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    color: var(--text-primary); font-weight: 600; font-size: 0.95rem;
  }

  /* --- SOBRE NÓS: editorial lead + values --- */
  .sobre-lead {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.18; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance;
  }
  .sobre-body {
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.7;
    max-width: 46rem; margin-top: var(--space-6); text-wrap: pretty;
  }
  .sobre-values {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(var(--space-6), 3vw, var(--space-10));
    margin-top: clamp(var(--space-10), 5vw, var(--space-16));
  }
  .value { padding-top: var(--space-5); border-top: 2px solid rgba(0, 102, 255, 0.4); }
  .value h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
  .value p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin-top: var(--space-2); }

  /* Tablet: bento collapses to 2 columns */
  @media (max-width: 1024px) and (min-width: 769px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .svc--feature { grid-column: span 2; grid-row: auto; }
    .svc--wide    { grid-column: span 2; }
    .svc--half, .svc--third { grid-column: span 1; }
  }

  /* ============================================================
     DEEP OCEAN — closing / contact section (over the fixed video)
     ============================================================ */
  .deep {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: clamp(4rem, 9vw, 7rem) clamp(var(--space-5), 5vw, var(--space-12)) 0;
    /* Transparent over the fixed video, with a soft darkening so the centred
       call-to-action and footer stay readable and the very bottom feels deep. */
    background: linear-gradient(180deg, rgba(3, 10, 22, 0.28) 0%, rgba(1, 6, 13, 0.62) 100%);
  }

  .deep-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
  .deep-cta {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-6);
    padding: var(--space-16) 0;
  }
  .deep-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(2.2rem, 6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
    text-shadow: 0 0 55px rgba(0, 90, 200, 0.45);
  }
  .deep-sub {
    color: var(--text-secondary);
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
    max-width: 44rem;
    text-wrap: pretty;
  }
  /* --- Lead form (over the video, so it lives in a readable panel) --- */
  .lead-form {
    width: 100%;
    max-width: 560px;
    margin-top: var(--space-2);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    text-align: left;
    padding: clamp(var(--space-6), 3vw, var(--space-8));
    background: rgba(6, 12, 24, 0.72);
    border: 1px solid rgba(120, 170, 255, 0.16);
    border-radius: var(--r-lg);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    box-shadow: var(--shadow-lg), var(--edge-top);
  }
  .field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
  .field--full { grid-column: 1 / -1; }
  .field label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
  }
  .field label .opt { color: var(--text-tertiary); font-weight: 400; }
  .lead-form input,
  .lead-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--control-border);
    border-radius: var(--r-md);
    padding: 0.7rem 0.85rem;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  }
  .lead-form textarea { resize: vertical; min-height: 3rem; }
  .lead-form input:hover,
  .lead-form textarea:hover { border-color: var(--control-border-hover); }
  .lead-form input:focus,
  .lead-form textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 0 0 3px rgba(0, 170, 255, 0.18);
  }
  .field.is-invalid input,
  .field.is-invalid textarea { border-color: #ff6b6b; }
  .field-error {
    font-size: 0.78rem;
    color: #ff8f8f;
    min-height: 0;
  }
  .hp {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .lead-submit { grid-column: 1 / -1; width: 100%; margin-top: var(--space-1); }
  .lead-submit[disabled] { opacity: 0.65; cursor: progress; }
  .lead-consent {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-tertiary);
  }
  .lead-status {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    min-height: 1.2em;
    margin: 0;
  }
  .lead-status.is-ok  { color: #6ee7a8; }
  .lead-status.is-err { color: #ff8f8f; }
  .lead-alt {
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s var(--ease);
  }
  .lead-alt:hover { color: var(--primary-light); }

  .deep-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    border-top: 1px solid rgba(120, 170, 255, 0.10);
  }
  .deep-footer .nav-logo { font-size: 1rem; }
  .deep-copy { color: var(--text-tertiary); font-size: 0.85rem; }

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 768px) {
    /* Navbar → hamburger */
    .nav-toggle { display: flex; }
    .nav-links {
      position: fixed;
      top: var(--nav-h);
      left: 0; right: 0;
      flex-direction: column;
      gap: 0;
      background: rgba(5, 7, 13, 0.97);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
      padding: var(--space-2) 0;
      transform: translateY(-140%);
      transition: transform 0.4s var(--ease-out);
    }
    .nav-links.is-open { transform: translateY(0); }
    .nav-links li { width: 100%; text-align: center; }
    .nav-links a { display: block; padding: var(--space-3) 0; }
    .nav-links a::after { display: none; }
    .nav-links .nav-cta { margin: var(--space-2) auto; display: inline-flex; }

    .hero {
      padding-top: calc(var(--nav-h) + var(--space-8));
    }
    .hero-copy { max-width: none; }
    /* Portrait phones: a touch more scrim so text stays readable over the
       brighter centre of the wave when the copy spans the full width. */
    .hero-bg__scrim {
      background:
        linear-gradient(180deg,
          rgba(5, 7, 13, 0.78) 0%,
          rgba(5, 7, 13, 0.42) 34%,
          rgba(5, 7, 13, 0.42) 56%,
          rgba(5, 7, 13, 0.88) 100%);
    }
    /* Services bento → single column */
    .bento { grid-template-columns: 1fr; }
    .svc--feature, .svc--wide, .svc--half, .svc--third {
      grid-column: auto; grid-row: auto;
    }
    /* Soluções → single column, title no longer sticky */
    .sol-grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .sol-head { position: static; }
    /* Sobre values → single column */
    .sobre-values { grid-template-columns: 1fr; }
    /* Lead form → single column */
    .lead-form { grid-template-columns: 1fr; }
    /* Deep-ocean footer stacks */
    .deep-footer { flex-direction: column; align-items: flex-start; }
  }

  /* ============================================================
     REDUCED MOTION
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
    /* Don't autoplay the intro video under reduced motion (JS opens the
       enter gate straight away instead). */
    .intro-video { display: none !important; }
  }