/* ============ DESIGN TOKENS ============ */
    :root {
      --bg: #FAF9F6;
      --bg-warm: #F3F1EB;
      --panel: #FFFFFF;
      --ink: #17161A;
      --muted: #6B6A72;
      --line: rgba(23, 22, 26, 0.1);
      --coral: #F0522E;
      --coral-deep: #D63D1B;
      --font-display: 'Space Grotesk', sans-serif;
      --font-body: 'Inter', sans-serif;
      --radius: 18px;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --section-space: clamp(4rem, 7vw, 5.75rem);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }

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

    h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; }
    /* algarismos alinhados nos números */
    .num, .stat b, .counter { font-variant-numeric: lining-nums tabular-nums; }

    .container { width: min(1160px, 92%); margin-inline: auto; }
    section { padding: var(--section-space) 0; }
    section[id] { scroll-margin-top: 82px; }

    /* ============ SCROLL REVEAL ============ */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal[data-delay="1"] { transition-delay: 0.1s; }
    .reveal[data-delay="2"] { transition-delay: 0.2s; }
    .reveal[data-delay="3"] { transition-delay: 0.3s; }
    .reveal[data-delay="4"] { transition-delay: 0.4s; }

    @media (prefers-reduced-motion: reduce) {
      .reveal { opacity: 1; transform: none; transition: none; }
      * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    }

    /* ============ BUTTONS ============ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1rem;
      padding: 0.9rem 1.8rem;
      border-radius: 999px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.3s var(--ease);
    }
    .btn-primary { background: var(--ink); color: var(--bg); }
    .btn-primary:hover { background: var(--coral); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(240, 82, 46, 0.28); }
    .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
    .btn-ghost:hover { border-color: var(--ink); transform: translateY(-3px); }
    .btn .arrow { transition: transform 0.3s var(--ease); }
    .btn:hover .arrow { transform: translateX(4px); }
    .btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

    /* ============ NAV ============ */
    .nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      border-bottom: 1px solid transparent;
      transition: background 0.4s ease, border-color 0.4s ease;
    }
    .nav.scrolled {
      background: rgba(250, 249, 246, 0.82);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom-color: var(--line);
    }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 0; }
    .logo {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--ink);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      letter-spacing: -0.02em;
    }
    .logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); display: inline-block; }
    .nav-links { display: flex; gap: 2rem; list-style: none; align-items: center; }
    .nav-links a {
      color: var(--muted);
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
      position: relative;
      transition: color 0.25s ease;
    }
    .nav-links a::after {
      content: '';
      position: absolute;
      left: 0; bottom: -4px;
      width: 0; height: 2px;
      background: var(--coral);
      transition: width 0.3s var(--ease);
    }
    .nav-links a:hover { color: var(--ink); }
    .nav-links a:hover::after { width: 100%; }
    .nav-cta { display: flex; align-items: center; gap: 1rem; }
    .nav-cta .btn { padding: 0.6rem 1.3rem; font-size: 0.9rem; }
    .nav-reveal {
      opacity: 0;
      transform: translateY(-6px);
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s var(--ease);
    }
    .nav.scrolled .nav-reveal { opacity: 1; transform: translateY(0); pointer-events: auto; }
    @media (prefers-reduced-motion: reduce) {
      .nav-reveal { transition: opacity 0.2s ease; transform: none; }
    }

    .hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
    .hamburger span { width: 24px; height: 2px; background: var(--ink); transition: all 0.3s ease; }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 1100px) {
      .nav-links { gap: 1.15rem; }
    }
    @media (max-width: 820px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .nav-links.mobile-open {
        display: flex;
        position: fixed;
        top: 62px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: rgba(250,249,246,0.97);
        backdrop-filter: blur(16px);
        padding: 2rem;
        gap: 1.4rem;
        border-bottom: 1px solid var(--line);
      }
    }

    /* ============ HERO ============ */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding-top: 6rem;
      overflow: hidden;
    }
    .blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: 0.5;
      pointer-events: none;
      z-index: 0;
    }
    .blob-1 { width: 460px; height: 460px; background: #FFD9CE; top: -120px; right: -80px; animation: drift1 15s ease-in-out infinite alternate; }
    .blob-2 { width: 380px; height: 380px; background: #FFE7B8; bottom: -140px; left: -100px; animation: drift2 18s ease-in-out infinite alternate; }
    @keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-60px, 50px) scale(1.15); } }
    @keyframes drift2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(70px, -40px) scale(0.95); } }

    .hero-inner { position: relative; z-index: 1; max-width: 880px; }
    .availability {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.88rem;
      font-weight: 500;
      color: var(--ink);
      background: var(--panel);
      border: 1px solid var(--line);
      padding: 0.45rem 1rem;
      border-radius: 999px;
      margin-bottom: 1.8rem;
      box-shadow: 0 4px 14px rgba(23, 22, 26, 0.05);
    }
    .availability .pulse {
      width: 8px; height: 8px; border-radius: 50%; background: #23C552;
      box-shadow: 0 0 0 0 rgba(35, 197, 82, 0.6);
      animation: pulse 2s infinite;
    }
    @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(35,197,82,0.5);} 50% { box-shadow: 0 0 0 6px rgba(35,197,82,0);} }
    .hero h1 { font-size: clamp(2.7rem, 7.4vw, 5.35rem); margin-bottom: 1.5rem; max-width: 760px; }
    .hero h1 .accent { color: var(--coral); font-style: italic; }
    .hero p { color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.27rem); max-width: 610px; margin-bottom: 2rem; }
    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem 1.25rem;
      list-style: none;
      margin-top: 1.45rem;
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 600;
    }
    .hero-trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
    .hero-trust li::before { content: '✦'; color: var(--coral); font-size: 0.7rem; }

    /* ============ HERO — PARTICLE NETWORK CANVAS ============ */
    .hero-inner {
      max-width: none;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
      gap: clamp(2.5rem, 5vw, 5rem);
      align-items: center;
    }

    .hero-visual {
      position: relative;
      width: 100%;
      max-width: 500px;
      margin-inline: auto;
      aspect-ratio: 1;
    }

    #heroCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      cursor: crosshair;
    }

    @media (max-width: 880px) {
      .hero-inner { grid-template-columns: 1fr; gap: 2.6rem; }
      .hero-copy { max-width: 720px; }
      .hero-visual { max-width: 420px; }
    }
    @media (max-width: 640px) {
      .hero { min-height: auto; padding: 7.5rem 0 4.5rem; }
      .hero-inner { gap: 3.5rem; }
      .hero-visual { max-width: 320px; }
    }

    /* the flat browser card */
    .fb-browser {
      position: relative;
      width: 100%;
      border: 2px solid var(--ink);
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      /* THE signature offset shadow */
      box-shadow: 10px 10px 0 var(--coral);
      animation: fb-float 7s ease-in-out infinite;
      will-change: transform;
      transition: box-shadow 0.3s var(--ease);
    }
    .fb-browser:hover {
      box-shadow: 14px 14px 0 var(--coral);
    }
    @keyframes fb-float {
      0%, 100% { transform: translateY(0px) rotate(0deg); }
      33%       { transform: translateY(-8px) rotate(-0.4deg); }
      66%       { transform: translateY(-4px) rotate(0.3deg); }
    }

    /* chrome / title bar */
    .fb-chrome {
      height: 36px;
      background: #F2F0EB;
      border-bottom: 2px solid var(--ink);
      display: flex;
      align-items: center;
      padding: 0 14px;
      gap: 7px;
    }
    .fb-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      border: 1.5px solid rgba(0,0,0,0.15);
      flex-shrink: 0;
    }
    .fb-dot:nth-child(1) { background: #FF5F57; }
    .fb-dot:nth-child(2) { background: #FEBC2E; }
    .fb-dot:nth-child(3) { background: #28C840; }
    .fb-url {
      flex: 1;
      height: 22px;
      background: rgba(255,255,255,0.7);
      border: 1.5px solid rgba(0,0,0,0.12);
      border-radius: 6px;
      margin: 0 10px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      gap: 6px;
      font-size: 0.62rem;
      color: #888;
      font-family: var(--font-body);
    }
    .fb-url-dot {
      width: 7px; height: 7px;
      border: 1.5px solid currentColor;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* website body inside the browser */
    .fb-body {
      background: #0F0E14;
      position: relative;
      overflow: hidden;
    }

    /* --- mini site nav --- */
    .fb-site-nav {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      gap: 10px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .fb-site-logo {
      width: 32px; height: 8px;
      border-radius: 3px;
      background: rgba(255,255,255,0.9);
    }
    .fb-site-links {
      display: flex;
      gap: 8px;
      margin-left: auto;
    }
    .fb-site-link {
      width: 24px; height: 5px;
      border-radius: 2px;
      background: rgba(255,255,255,0.25);
    }
    .fb-site-cta {
      width: 40px; height: 18px;
      border-radius: 4px;
      background: var(--coral);
      margin-left: 8px;
    }

    /* --- mini site hero section --- */
    .fb-site-hero {
      padding: 24px 20px 20px;
      position: relative;
      overflow: hidden;
    }
    .fb-site-hero::before { /* soft coral glow top right */
      content: '';
      position: absolute;
      top: -30px; right: -30px;
      width: 140px; height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(240,82,46,0.35) 0%, transparent 70%);
      pointer-events: none;
    }
    .fb-eyebrow {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }
    .fb-eyebrow-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--coral);
    }
    .fb-eyebrow-line {
      width: 50px; height: 4px;
      border-radius: 2px;
      background: var(--coral);
      opacity: 0.7;
    }
    .fb-h1 { width: 88%; height: 14px; border-radius: 4px; background: rgba(255,255,255,0.92); margin-bottom: 8px; }
    .fb-h2 { width: 65%; height: 14px; border-radius: 4px; background: rgba(255,255,255,0.92); margin-bottom: 14px; }
    .fb-sub { width: 82%; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.3); margin-bottom: 5px; }
    .fb-sub2 { width: 60%; height: 5px; border-radius: 2px; background: rgba(255,255,255,0.3); margin-bottom: 16px; }
    .fb-actions { display: flex; gap: 8px; align-items: center; }
    .fb-btn-primary {
      width: 80px; height: 22px;
      border-radius: 5px;
      background: var(--coral);
    }
    .fb-btn-ghost {
      width: 64px; height: 22px;
      border-radius: 5px;
      border: 1.5px solid rgba(255,255,255,0.22);
    }

    /* shimmer line accent */
    .fb-shimmer {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--coral), rgba(240,82,46,0.5), transparent);
      background-size: 200% 100%;
      animation: shimmer-slide 2.4s linear infinite;
    }
    @keyframes shimmer-slide { to { background-position: -200% 0; } }

    /* --- metric cards row --- */
    .fb-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 12px 20px 16px;
      border-top: 1px solid rgba(255,255,255,0.06);
    }
    .fb-metric-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .fb-metric-label {
      width: 55%; height: 4px;
      border-radius: 2px;
      background: rgba(240,82,46,0.5);
    }
    .fb-metric-val {
      width: 40%; height: 8px;
      border-radius: 2px;
      background: rgba(255,255,255,0.8);
    }
    .fb-metric-sub {
      width: 70%; height: 3px;
      border-radius: 2px;
      background: rgba(255,255,255,0.2);
    }

    /* floating chips outside the browser */
    .fb-chip {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      padding: 0.45rem 0.75rem;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1.5px solid rgba(23,22,26,0.1);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(23,22,26,0.14);
      font-family: var(--font-display);
      font-size: 0.66rem;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      animation: fb-chip-float 5s ease-in-out infinite;
      z-index: 10;
    }
    .fb-chip-icon {
      width: 20px; height: 20px;
      border-radius: 5px;
      display: grid;
      place-items: center;
      font-size: 0.72rem;
      flex-shrink: 0;
    }
    /* position: top-left corner of the visual area */
    .fb-chip--a {
      top: -10px;
      left: -16px;
      animation-delay: 0s;
    }
    /* position: bottom-right (over the shadow area) */
    .fb-chip--b {
      bottom: 28px;
      right: -16px;
      animation-delay: -2.5s;
    }
    @keyframes fb-chip-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-9px); }
    }

    @media (max-width: 880px) {
      .hero-inner { grid-template-columns: 1fr; gap: 2.6rem; }
      .hero-copy { max-width: 720px; }
      .hero-visual { max-width: 440px; }
    }
    @media (max-width: 640px) {
      .hero { min-height: auto; padding: 7.5rem 0 4.5rem; }
      .hero-inner { gap: 3.5rem; }
      .hero-visual { max-width: 330px; padding: 0 10px 10px 0; }
      .fb-chip { font-size: 0.58rem; padding: 0.35rem 0.6rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .fb-browser { animation: none; }
      .fb-chip { animation: none; }
      .fb-shimmer { animation: none; }
    }

    /* stack scene — holds all 3 browsers */
    .stack-scene {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }

    /* individual browser card */
    .sb {
      position: absolute;
      border-radius: 10px;
      overflow: hidden;
      box-shadow:
        0 4px 0 rgba(0,0,0,0.06),
        0 16px 48px rgba(23,22,26,0.18),
        0 48px 80px rgba(23,22,26,0.10);
      will-change: transform;
      transition: box-shadow 0.4s ease;
      background: #fff;
    }
    .hero-visual:hover .sb {
      box-shadow:
        0 4px 0 rgba(0,0,0,0.07),
        0 24px 64px rgba(23,22,26,0.22),
        0 60px 100px rgba(23,22,26,0.14);
    }

    /* BACK browser — furthest away, left, blurred */
    .sb-1 {
      width: 68%; height: 60%;
      top: 18%; left: 0%;
      transform: rotateX(4deg) rotateY(14deg) rotateZ(-2deg) translateZ(-60px);
      filter: blur(0.6px);
      opacity: 0.80;
    }
    /* MIDDLE browser */
    .sb-2 {
      width: 72%; height: 64%;
      top: 8%; left: 12%;
      transform: rotateX(2deg) rotateY(4deg) rotateZ(-1deg) translateZ(-20px);
      opacity: 0.92;
    }
    /* FRONT browser — closest, right, sharp */
    .sb-3 {
      width: 74%; height: 66%;
      top: 0%; left: 24%;
      transform: rotateX(-2deg) rotateY(-6deg) rotateZ(1deg) translateZ(30px);
    }

    /* Chrome bar (traffic lights) */
    .sb-chrome {
      height: 28px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 6px;
      flex-shrink: 0;
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .sb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .sb-dot:nth-child(1) { background: #FF5F57; }
    .sb-dot:nth-child(2) { background: #FEBC2E; }
    .sb-dot:nth-child(3) { background: #28C840; }
    .sb-bar {
      flex: 1; height: 16px;
      background: rgba(0,0,0,0.05);
      border-radius: 4px;
      margin: 0 8px;
    }

    /* Body canvas of each mini-site */
    .sb-body {
      height: calc(100% - 28px);
      position: relative;
      overflow: hidden;
    }

    /* --- Site 1 (back): dark SaaS style --- */
    .sb-1 .sb-chrome { background: #1A1825; border-color: rgba(255,255,255,0.06); }
    .sb-1 .sb-bar { background: rgba(255,255,255,0.08); }
    .sb-1 .sb-body { background: #0F0E14; }
    .sb1-hero {
      padding: 14px 16px 10px;
      background: linear-gradient(135deg, #1A0A0F 0%, #0F0E14 60%);
      border-bottom: 1px solid rgba(240,82,46,0.15);
    }
    .sb1-eyebrow { width: 40%; height: 5px; border-radius: 3px; background: rgba(240,82,46,0.55); margin-bottom: 7px; }
    .sb1-h1-a { width: 85%; height: 8px; border-radius: 3px; background: rgba(255,255,255,0.85); margin-bottom: 5px; }
    .sb1-h1-b { width: 62%; height: 8px; border-radius: 3px; background: rgba(255,255,255,0.85); margin-bottom: 10px; }
    .sb1-p { width: 90%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.28); margin-bottom: 4px; }
    .sb1-p:nth-child(5) { width: 70%; }
    .sb1-btn { display: inline-block; margin-top: 8px; width: 38%; height: 16px; border-radius: 5px; background: var(--coral); }
    .sb1-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
      padding: 10px 16px;
    }
    .sb1-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 6px;
      height: 36px;
    }

    /* --- Site 2 (middle): clean editorial style --- */
    .sb-2 .sb-chrome { background: #F5F3EE; }
    .sb-2 .sb-bar { background: rgba(0,0,0,0.07); }
    .sb-2 .sb-body { background: #FAFAF8; }
    .sb2-nav {
      display: flex; align-items: center; padding: 8px 14px;
      border-bottom: 1px solid rgba(0,0,0,0.07);
      gap: 8px;
    }
    .sb2-logo { width: 28px; height: 7px; border-radius: 2px; background: #17161A; }
    .sb2-nav-links { display: flex; gap: 6px; margin-left: auto; }
    .sb2-nav-link { width: 20px; height: 5px; border-radius: 2px; background: rgba(0,0,0,0.2); }
    .sb2-hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      height: 60%;
    }
    .sb2-copy {
      padding: 14px;
      display: flex; flex-direction: column; gap: 6px; justify-content: center;
    }
    .sb2-tag { width: 30%; height: 5px; border-radius: 2px; background: rgba(240,82,46,0.45); }
    .sb2-h1-a { width: 90%; height: 7px; border-radius: 2px; background: #17161A; }
    .sb2-h1-b { width: 70%; height: 7px; border-radius: 2px; background: #17161A; }
    .sb2-sub { width: 85%; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.2); }
    .sb2-sub2 { width: 60%; height: 4px; border-radius: 2px; background: rgba(0,0,0,0.2); }
    .sb2-btn { width: 40%; height: 14px; border-radius: 4px; background: #17161A; margin-top: 4px; }
    .sb2-img {
      background: linear-gradient(135deg, #FFD9CE 0%, #FFB8A0 100%);
    }
    .sb2-img-overlay {
      width: 100%; height: 100%;
      background: repeating-linear-gradient(45deg, rgba(240,82,46,0.06) 0, rgba(240,82,46,0.06) 2px, transparent 2px, transparent 12px);
    }

    /* --- Site 3 (front): beauty / luxury style --- */
    .sb-3 .sb-chrome { background: #1C1812; border-color: rgba(255,255,255,0.05); }
    .sb-3 .sb-bar { background: rgba(255,255,255,0.07); }
    .sb-3 .sb-body { background: #1C1812; }
    .sb3-hero {
      position: relative;
      height: 55%;
      background: linear-gradient(160deg, #2A1F10 0%, #1C1812 70%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      overflow: hidden;
    }
    .sb3-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 0%, rgba(212,170,109,0.18) 0%, transparent 70%);
    }
    .sb3-eyebrow { width: 35%; height: 4px; border-radius: 2px; background: rgba(212,170,109,0.6); }
    .sb3-h1-a { width: 72%; height: 9px; border-radius: 3px; background: rgba(255,255,255,0.9); }
    .sb3-h1-b { width: 50%; height: 9px; border-radius: 3px; background: rgba(255,255,255,0.9); }
    .sb3-sub { width: 60%; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); }
    .sb3-btn { width: 32%; height: 14px; border-radius: 3px; background: rgba(212,170,109,0.75); margin-top: 4px; }
    .sb3-gallery {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      height: 45%;
    }
    .sb3-col {
      border-right: 1px solid rgba(255,255,255,0.05);
    }
    .sb3-col:nth-child(1) { background: linear-gradient(180deg, #2C2418 0%, #1C1812 100%); }
    .sb3-col:nth-child(2) { background: linear-gradient(180deg, #231D13 0%, #1C1812 100%); }
    .sb3-col:nth-child(3) { background: linear-gradient(180deg, #2A2218 0%, #1C1812 100%); border-right: none; }

    /* floating chips — light style for light bg */
    .st-chip {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 0.48rem;
      padding: 0.48rem 0.78rem;
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(23,22,26,0.1);
      border-radius: 10px;
      box-shadow: 0 8px 28px rgba(23,22,26,0.13);
      font-family: var(--font-display);
      font-size: 0.66rem;
      font-weight: 600;
      color: var(--ink);
      white-space: nowrap;
      animation: st-float 5s ease-in-out infinite;
      z-index: 20;
    }
    .st-chip .st-icon {
      width: 20px; height: 20px;
      border-radius: 5px;
      display: grid;
      place-items: center;
      font-size: 0.72rem;
      flex-shrink: 0;
    }
    .st-chip--a { bottom: 8%; left: -2%; animation-delay: 0s; }
    .st-chip--b { top: 6%; right: -2%; animation-delay: -2s; }
    @keyframes st-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @media (max-width: 880px) {
      .hero-inner { grid-template-columns: 1fr; gap: 2.6rem; }
      .hero-copy { max-width: 720px; }
      .hero-visual { max-width: 400px; }
    }
    @media (max-width: 640px) {
      .hero { min-height: auto; padding: 7.5rem 0 4.5rem; }
      .hero-inner { gap: 3.5rem; }
      .hero-visual { max-width: 320px; }
      .st-chip { font-size: 0.58rem; padding: 0.35rem 0.6rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .st-chip { animation: none; }
    }

    /* outer glow backdrop */
    .sphere-glow-bg {
      position: absolute;
      inset: 5%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(240,82,46,0.18) 0%, rgba(240,82,46,0.06) 45%, transparent 70%);
      filter: blur(18px);
      pointer-events: none;
      animation: glow-pulse 4s ease-in-out infinite alternate;
    }
    @keyframes glow-pulse {
      from { opacity: 0.7; transform: scale(0.96); }
      to   { opacity: 1;   transform: scale(1.04); }
    }

    /* perspective wrapper */
    .sphere-scene {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      perspective: 700px;
    }

    /* the spinning 3D group */
    .sphere-3d {
      width: 62%;
      aspect-ratio: 1;
      position: relative;
      transform-style: preserve-3d;
      animation: sphere-spin 28s linear infinite;
    }
    @keyframes sphere-spin { to { transform: rotateY(360deg) rotateX(12deg); } }

    /* each ring is a full-size circle rotated to a different longitude */
    .s-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px solid rgba(240,82,46,0.32);
      box-shadow: 0 0 8px rgba(240,82,46,0.08);
      transform-style: preserve-3d;
    }
    .s-ring:nth-child(1) { transform: rotateY(0deg); }
    .s-ring:nth-child(2) { transform: rotateY(30deg); }
    .s-ring:nth-child(3) { transform: rotateY(60deg); }
    .s-ring:nth-child(4) { transform: rotateY(90deg); }
    .s-ring:nth-child(5) { transform: rotateY(120deg); }
    .s-ring:nth-child(6) { transform: rotateY(150deg); }
    /* highlighted front ring */
    .s-ring--hot {
      border-color: rgba(240,82,46,0.75);
      box-shadow: 0 0 14px rgba(240,82,46,0.2);
    }

    /* latitude ellipses */
    .s-lat {
      position: absolute;
      left: 50%;
      top: 50%;
      transform-style: preserve-3d;
      border-radius: 50%;
      border: 1px solid rgba(240,82,46,0.22);
    }
    .s-lat--eq { /* equator — full width */
      width: 100%; height: 100%;
      margin-left: -50%; margin-top: -50%;
      transform: rotateX(90deg);
      border-color: rgba(240,82,46,0.38);
    }
    .s-lat--mid { /* mid latitude */
      width: 82%; height: 82%;
      margin-left: -41%; margin-top: -41%;
      transform: rotateX(90deg) translateY(-16%);
    }
    .s-lat--top { /* upper latitude */
      width: 45%; height: 45%;
      margin-left: -22.5%; margin-top: -22.5%;
      transform: rotateX(90deg) translateY(-44%);
    }

    /* glowing core orb */
    .sphere-core {
      position: absolute;
      inset: 50%;
      width: 22%;
      height: 22%;
      margin: -11% 0 0 -11%;
      border-radius: 50%;
      background: radial-gradient(circle, #FF7A5C 0%, var(--coral) 40%, rgba(240,82,46,0) 70%);
      box-shadow: 0 0 28px 8px rgba(240,82,46,0.45);
      animation: core-breathe 3s ease-in-out infinite alternate;
    }
    @keyframes core-breathe {
      from { box-shadow: 0 0 24px 6px rgba(240,82,46,0.38); transform: scale(0.92); }
      to   { box-shadow: 0 0 42px 14px rgba(240,82,46,0.55); transform: scale(1.08); }
    }

    /* pole nodes */
    .sphere-pole {
      position: absolute;
      left: 50%;
      width: 10px; height: 10px;
      margin-left: -5px;
      border-radius: 50%;
      background: var(--coral);
      box-shadow: 0 0 10px 3px rgba(240,82,46,0.5);
    }
    .sphere-pole--n { top: 1%; }
    .sphere-pole--s { bottom: 1%; }

    /* floating glassmorphism chips */
    .s-chip {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 0.85rem;
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      font-family: var(--font-display);
      font-size: 0.68rem;
      font-weight: 600;
      color: rgba(255,255,255,0.88);
      white-space: nowrap;
      animation: chip-drift 5s ease-in-out infinite;
      z-index: 10;
    }
    .s-chip .s-chip-icon {
      width: 22px; height: 22px;
      border-radius: 6px;
      display: grid;
      place-items: center;
      font-size: 0.8rem;
      flex-shrink: 0;
    }
    .s-chip--tl { top:  2%; left:  0%;  animation-delay: 0s; }
    .s-chip--tr { top: 18%; right: 0%;  animation-delay: -1.8s; }
    .s-chip--br { bottom: 12%; right: 0%; animation-delay: -3.4s; }
    .s-chip--bl { bottom: 24%; left:  0%; animation-delay: -2.1s; }
    @keyframes chip-drift {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-10px); }
    }

    @media (max-width: 880px) {
      .hero-inner { grid-template-columns: 1fr; gap: 2.6rem; }
      .hero-copy { max-width: 720px; }
      .hero-visual { max-width: 380px; }
      .s-chip--tl, .s-chip--bl { left:  3%; }
      .s-chip--tr, .s-chip--br { right: 3%; }
    }
    @media (max-width: 640px) {
      .hero { min-height: auto; padding: 7.5rem 0 4.5rem; }
      .hero-inner { gap: 3.5rem; }
      .hero-visual { max-width: 300px; }
      .s-chip { font-size: 0.6rem; padding: 0.38rem 0.65rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      .sphere-3d  { animation: none; }
      .sphere-core { animation: none; }
      .sphere-glow-bg { animation: none; }
      .s-chip { animation: none; }
    }

    /* ============ MID CTA ============ */
    .mid-cta {
      padding: 0 0 clamp(3rem, 6vw, 5rem);
      text-align: center;
    }
    .mid-cta p { color: var(--muted); margin-bottom: 1.2rem; font-size: 1.05rem; }

    /* ============ FAQ ============ */
    .faq-list { max-width: 720px; margin-inline: auto; display: grid; gap: 0.9rem; }
    .faq-item {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 0;
      transition: border-color 0.3s ease;
    }
    .faq-item[open] { border-color: var(--coral); }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.05rem;
      padding: 1.2rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: '+';
      font-size: 1.4rem;
      color: var(--coral);
      transition: transform 0.3s var(--ease);
      flex-shrink: 0;
    }
    .faq-item[open] summary::after { transform: rotate(45deg); }
    .faq-item p { color: var(--muted); padding: 0 1.5rem 1.3rem; font-size: 0.97rem; }

    /* ============ MARQUEE ============ */
    .marquee-wrap { padding: 1.6rem 0; border-block: 1px solid var(--line); background: var(--bg-warm); overflow: hidden; }
    .marquee {
      overflow: hidden;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    }
    .marquee-track { display: flex; gap: 3.5rem; width: max-content; animation: scroll 30s linear infinite; align-items: center; }
    .marquee-wrap:hover .marquee-track { animation-play-state: paused; }
    @keyframes scroll { to { transform: translateX(-50%); } }
    .marquee-track span {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 1.1rem;
      color: var(--muted);
      white-space: nowrap;
      display: inline-flex; align-items: center; gap: 3.5rem;
    }
    .marquee-track span::after { content: '✦'; color: var(--coral); font-size: 0.8rem; }

    /* ============ SECTION HEAD ============ */
    .section-head { max-width: 640px; margin-bottom: 3.5rem; }
    .section-head.center { text-align: center; margin-inline: auto; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: var(--font-display);
      font-size: 0.82rem; font-weight: 600;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--coral); margin-bottom: 1rem;
    }
    .eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--coral); display: inline-block; }
    .section-head h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 1rem; }
    .section-head p { color: var(--muted); font-size: 1.05rem; }

    /* ============ WORK / PROJECTS ============ */
    .work-carousel { position: relative; }
    .work-viewport { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; margin: 0 -0.2rem; padding: 0 0.2rem; }
    .work-viewport::-webkit-scrollbar { display: none; }
    .work-grid { display: flex; gap: 1.6rem; width: max-content; padding-bottom: 0.3rem; }
    .work-grid .project { flex: 0 0 auto; width: min(360px, 76vw); scroll-snap-align: start; }
    .work-arrow {
      position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
      width: 46px; height: 46px; border-radius: 50%;
      background: var(--panel); border: 1px solid var(--line);
      display: grid; place-items: center; cursor: pointer;
      box-shadow: 0 12px 28px rgba(23,22,26,0.14);
      color: var(--ink); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }
    .work-arrow svg { width: 20px; height: 20px; }
    .work-arrow:hover { background: var(--coral); color: #fff; }
    .work-arrow--prev { left: -22px; }
    .work-arrow--next { right: -22px; }
    @media (max-width: 900px) {
      .work-arrow { display: none; }
      .work-viewport { margin: 0 -6vw; padding: 0 6vw; }
    }
    .project {
      display: block;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      text-decoration: none;
      color: var(--ink);
      transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
    }
    .project:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(23, 22, 26, 0.12); }
    .project-preview {
      height: 220px;
      position: relative;
      overflow: hidden;
      display: grid;
      place-items: center;
    }
    /* prints reais dos sites nos cards */
    .project-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      transition: transform 0.55s var(--ease);
    }
    .project:hover .project-preview img { transform: scale(1.045); }
    /* mini mockup de navegador dentro do preview */
    .mock {
      width: 78%; height: 74%;
      border-radius: 10px 10px 0 0;
      background: #fff;
      box-shadow: 0 20px 40px rgba(0,0,0,0.18);
      transform: translateY(14px);
      transition: transform 0.5s var(--ease);
      overflow: hidden;
      border: 1px solid rgba(0,0,0,0.06);
    }
    .project:hover .mock { transform: translateY(6px); }
    .mock-bar { height: 22px; display: flex; align-items: center; gap: 5px; padding: 0 9px; background: #f1f1f1; }
    .mock-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d0d0d0; }
    .mock-body { padding: 14px; }
    .mock-line { height: 8px; border-radius: 4px; margin-bottom: 7px; }
    .project-info { padding: 1.6rem 1.8rem 1.9rem; }
    .project-info .tags { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
    .project-info .tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.22rem 0.7rem; }
    .project-info h3 { font-size: 1.4rem; margin-bottom: 0.4rem; }
    .project-info p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.9rem; }
    .project-metrics {
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--line);
    }
    .metric {
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      font-family: var(--font-display);
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--ink);
      background: var(--bg-warm);
      border-radius: 6px;
      padding: 0.26rem 0.6rem;
      white-space: nowrap;
    }
    .metric .metric-icon { color: var(--coral); font-style: normal; font-size: 0.75rem; }
    .project-info .view { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 500; font-size: 0.95rem; color: var(--coral); }
    .project:hover .view .arrow { transform: translateX(4px); }
    .view .arrow { transition: transform 0.3s var(--ease); }

    /* card "seu projeto aqui" */
    .project-next {
      border: 2px dashed var(--line);
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 3rem 2rem;
      min-height: 100%;
    }
    .project-next:hover { border-color: var(--coral); transform: translateY(-8px); box-shadow: none; }
    .project-next .plus { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-warm); display: grid; place-items: center; font-size: 1.8rem; color: var(--coral); margin-bottom: 1.2rem; transition: background 0.3s ease; }
    .project-next:hover .plus { background: var(--coral); color: #fff; }
    .project-next h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
    .project-next p { color: var(--muted); font-size: 0.95rem; }

    /* ============ SERVICES ============ */
    .services { background: var(--bg-warm); }
    .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
    .service {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 2.2rem;
      display: flex;
      gap: 1.4rem;
      transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
    }
    .service:hover { transform: translateY(-5px); box-shadow: 0 20px 44px rgba(23,22,26,0.08); }
    .service-icon {
      flex-shrink: 0;
      width: 52px; height: 52px;
      border-radius: 13px;
      background: #FFEDE7;
      display: grid; place-items: center;
      transition: background 0.35s ease, transform 0.35s var(--ease);
    }
    .service:hover .service-icon { background: var(--coral); transform: rotate(-6deg) scale(1.06); }
    .service-icon svg { width: 26px; height: 26px; stroke: var(--coral); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s ease; }
    .service:hover .service-icon svg { stroke: #fff; }
    .service h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
    .service p { color: var(--muted); font-size: 0.94rem; }

    /* ============ CLIENT PROMISE ============ */
    .promise-section {
      position: relative;
      overflow: hidden;
      background: var(--bg-warm);
    }
    .promise-section::before {
      content: '';
      position: absolute;
      width: 320px;
      height: 320px;
      top: -190px;
      right: -100px;
      border-radius: 50%;
      background: #FFD7CC;
      filter: blur(85px);
      pointer-events: none;
      opacity: 0.38;
    }
    .promise-section .container { position: relative; z-index: 1; }
    .promise-head { max-width: 720px; margin-bottom: 2.4rem; }
    .promise-head h2 { max-width: 680px; margin-bottom: 0.8rem; font-size: clamp(1.9rem, 3.8vw, 2.75rem); }
    .promise-head > p { max-width: 620px; color: var(--muted); font-size: 1rem; }
    .promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    .promise-card {
      --card-accent: var(--coral);
      --card-tint: #FFF1EC;
      position: relative;
      min-height: 220px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 1.5rem;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: rgba(255,255,255,0.88);
      color: var(--ink);
      transition: transform 0.4s var(--ease), box-shadow 0.4s ease;
    }
    .promise-card::before { content: ''; position: absolute; top: 0; left: 1.5rem; right: 1.5rem; height: 3px; border-radius: 0 0 4px 4px; background: var(--card-accent); }
    .promise-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(23,22,26,0.09); }
    .promise-card--ink { --card-accent: var(--ink); --card-tint: #EFEDF1; }
    .promise-card--sun { --card-accent: #D49A28; --card-tint: #FFF4D5; }
    .promise-card--light { --card-accent: #7A6A9A; --card-tint: #F0EBF7; }
    .promise-kicker {
      display: block;
      padding-right: 3.8rem;
      font-family: var(--font-display);
      font-size: 0.67rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--card-accent);
    }
    .promise-card h3 { margin-top: auto; margin-bottom: 0.55rem; font-size: clamp(1.15rem, 1.8vw, 1.35rem); }
    .promise-card p { color: var(--muted); font-size: 0.88rem; }
    .promise-art { position: absolute; top: 1.15rem; right: 1.3rem; display: grid; place-items: center; }

    .promise-art--focus {
      width: 44px;
      height: 44px;
      border: 1px solid var(--card-accent);
      border-radius: 50%;
      animation: promise-spin 14s linear infinite;
    }
    .promise-art--focus::before { content: ''; position: absolute; inset: 10px; border: 1px solid var(--card-accent); border-radius: 50%; opacity: 0.55; }
    .promise-art--focus::after { content: ''; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--card-accent); }
    .promise-art--focus i { width: 9px; height: 9px; border-radius: 50%; background: var(--card-accent); }
    @keyframes promise-spin { to { transform: rotate(360deg); } }

    .promise-art--time {
      display: flex;
      align-items: baseline;
      gap: 0.2rem;
      color: var(--card-accent);
    }
    .promise-art--time b { font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: -0.08em; }
    .promise-art--time small { font-family: var(--font-display); font-size: 0.45rem; font-weight: 700; letter-spacing: 0.1em; }

    .promise-art--reply {
      width: 48px;
      height: 35px;
      display: flex;
      gap: 4px;
      border: 1.5px solid var(--card-accent);
      border-radius: 11px;
      background: var(--card-tint);
    }
    .promise-art--reply::after { content: ''; position: absolute; right: 7px; bottom: -5px; width: 8px; height: 8px; border-right: 1.5px solid var(--card-accent); border-bottom: 1.5px solid var(--card-accent); background: var(--card-tint); transform: rotate(45deg); }
    .promise-art--reply i { width: 4px; height: 4px; border-radius: 50%; background: var(--card-accent); animation: typing-dot 1.5s ease-in-out infinite; }
    .promise-art--reply i:nth-child(2) { animation-delay: 0.18s; }
    .promise-art--reply i:nth-child(3) { animation-delay: 0.36s; }
    @keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-3px); opacity: 1; } }

    .promise-art--devices { width: 54px; height: 42px; }
    .device-screen { position: absolute; left: 0; top: 2px; width: 43px; height: 30px; border: 1.5px solid var(--card-accent); border-radius: 5px; background: var(--card-tint); }
    .device-screen::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 14px; height: 4px; transform: translateX(-50%); border-bottom: 1.5px solid var(--card-accent); border-inline: 1.5px solid var(--card-accent); }
    .device-phone { position: absolute; right: 0; bottom: 0; width: 17px; height: 31px; border: 1.5px solid var(--coral); border-radius: 5px; background: #fff; }
    .device-phone::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 1px; transform: translateX(-50%); border-radius: 2px; background: var(--coral); }

    @media (prefers-reduced-motion: reduce) {
      .promise-art--focus, .promise-art--reply i { animation: none; }
    }

    /* ============ CLIENT STORIES ============ */
    .client-stories {
      position: relative;
      overflow: hidden;
      background: var(--ink);
      color: var(--bg);
    }
    .client-stories::before {
      content: '';
      position: absolute;
      width: 420px;
      height: 420px;
      right: -180px;
      top: -240px;
      border-radius: 50%;
      background: rgba(240,82,46,0.24);
      filter: blur(90px);
      pointer-events: none;
    }
    .stories-heading {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
      margin-bottom: 2.4rem;
    }
    .stories-heading .section-head { margin-bottom: 0; }
    .client-stories .eyebrow { color: #FF7A5C; }
    .client-stories .eyebrow::before { background: #FF7A5C; }
    .client-stories h2 { color: var(--bg); }
    .client-stories .section-head p { color: rgba(250,249,246,0.62); }
    .stories-controls { display: flex; align-items: center; gap: 0.65rem; flex: 0 0 auto; }
    .stories-count {
      min-width: 4rem;
      color: rgba(250,249,246,0.6);
      font-family: var(--font-display);
      font-size: 0.8rem;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.08em;
      text-align: center;
    }
    .stories-arrow {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(250,249,246,0.22);
      border-radius: 50%;
      background: transparent;
      color: var(--bg);
      cursor: pointer;
      transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
    }
    .stories-arrow svg { width: 18px; height: 18px; }
    .stories-arrow:hover { color: var(--ink); background: var(--coral); border-color: var(--coral); transform: translateY(-2px); }
    .stories-arrow:focus-visible { outline: 2px solid #FF7A5C; outline-offset: 3px; }
    .stories-viewport { position: relative; z-index: 1; overflow: hidden; padding: 0.35rem; margin: -0.35rem; }
    .stories-track {
      display: flex;
      gap: 1.2rem;
      transition: transform 0.7s var(--ease);
      will-change: transform;
    }
    .story-card {
      flex: 0 0 calc((100% - 2.4rem) / 3);
      min-width: 0;
      min-height: 330px;
      display: flex;
      flex-direction: column;
      padding: clamp(1.55rem, 2.4vw, 2rem);
      border: 1px solid rgba(255,255,255,0.7);
      border-radius: var(--radius);
      background: #FFF9F5;
      color: var(--ink);
      box-shadow: 0 20px 54px rgba(0,0,0,0.18);
      transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
    }
    .story-card:nth-child(3n + 2) { background: #F3F0E9; }
    .story-card:nth-child(3n + 3) { background: #F7E9E4; }
    .story-card:hover { transform: translateY(-6px); box-shadow: 0 26px 62px rgba(0,0,0,0.25); }
    .story-mark {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      margin-bottom: 1.5rem;
      border-radius: 50%;
      background: var(--coral);
      color: #fff;
      font-family: Georgia, serif;
      font-size: 1.8rem;
      line-height: 1;
    }
    .story-card blockquote {
      font-family: var(--font-display);
      font-size: clamp(1.03rem, 1.5vw, 1.17rem);
      line-height: 1.48;
      letter-spacing: -0.015em;
    }
    .story-person { margin-top: auto; padding-top: 1.35rem; border-top: 1px solid rgba(23,22,26,0.12); }
    .story-person strong { display: block; margin-bottom: 0.15rem; font-family: var(--font-display); font-size: 0.95rem; }
    .story-person span { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }

    @media (max-width: 1050px) {
      .story-card { flex-basis: calc((100% - 1.2rem) / 2); }
    }
    @media (max-width: 700px) {
      .stories-heading { display: block; }
      .stories-controls { margin-top: 1.35rem; justify-content: flex-end; }
      .stories-viewport { margin-inline: 0; padding-inline: 0; }
      .story-card { flex-basis: 100%; min-height: 300px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .stories-track { transition: none; }
      .story-card:hover { transform: none; }
    }

    /* ============ ABOUT ============ */
    .about-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 3.5rem; align-items: center; }
    .about-photo {
      aspect-ratio: 4/5;
      border-radius: var(--radius);
      background: #e8e5e2;
      position: relative;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(28, 27, 34, 0.14);
    }
    .about-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 24%; }
    .about-photo::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(28,27,34,0.38), transparent 32%); pointer-events: none; }
    .about-photo::after { content: 'BRENDA SANTOS'; position: absolute; z-index: 2; left: 1.4rem; bottom: 1.4rem; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.86); }
    .about h2 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); margin-bottom: 1.4rem; }
    .about p { color: var(--muted); margin-bottom: 1.1rem; font-size: 1.05rem; }
    .about .sign { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--ink); margin-top: 1.4rem; }

    /* ============ CONTACT ============ */
    .contact-box {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: clamp(2.2rem, 5vw, 3.5rem);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      box-shadow: 0 30px 70px rgba(23,22,26,0.08);
    }
    .contact-intro h2 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); margin-bottom: 1rem; }
    .contact-intro p { color: var(--muted); margin-bottom: 1.8rem; }
    .contact-detail { display: flex; flex-direction: column; gap: 1.1rem; }
    .contact-detail a { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 500; display: inline-flex; align-items: center; gap: 0.6rem; transition: color 0.25s ease; }
    .contact-detail a:hover { color: var(--coral); }
    .contact-detail small { display: block; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-body); font-weight: 600; margin-bottom: 0.15rem; }

    .form-grid { display: grid; gap: 1rem; }
    label { font-size: 0.85rem; font-weight: 600; color: var(--ink); display: block; margin-bottom: 0.4rem; }
    input, textarea {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0.85rem 1rem;
      color: var(--ink);
      font-family: var(--font-body);
      font-size: 0.95rem;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    input:focus, textarea:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 3px rgba(240,82,46,0.12); }
    textarea { min-height: 120px; resize: vertical; }
    .form-success { display: none; background: #EAF7EE; border: 1px solid #A9DFBB; border-radius: 10px; padding: 0.9rem 1.1rem; color: #1E7B3C; font-size: 0.93rem; }
    .contact-box .btn-primary { justify-content: center; width: 100%; }

    /* ============ FOOTER ============ */
    footer { padding: 3rem 0 2.5rem; border-top: 1px solid var(--line); }
    .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
    .footer-inner .logo { font-size: 1.1rem; }
    .footer-social { display: flex; gap: 1.4rem; }
    .footer-social a { color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.25s ease; }
    .footer-social a:hover { color: var(--coral); }
    .footer-copy { color: var(--muted); font-size: 0.85rem; width: 100%; padding-top: 1.5rem; border-top: 1px solid var(--line); margin-top: 0.5rem; }

    /* ============ RESPONSIVE ============ */
    @media (max-width: 880px) {
      .hero-inner { grid-template-columns: 1fr; gap: 2.6rem; }
      .hero-copy { max-width: 720px; }
      .hero-visual { max-width: 430px; }
      .services-grid { grid-template-columns: 1fr; }
      .promise-grid { grid-template-columns: 1fr 1fr; }
      .about-grid { grid-template-columns: 1fr; gap: 2.4rem; }
      .about-photo { max-width: 320px; }
      .contact-box { grid-template-columns: 1fr; gap: 2.4rem; }
    }
    @media (max-width: 640px) {
      .hero { min-height: auto; padding: 7.5rem 0 4.5rem; }
      .hero-inner { gap: 3.5rem; }
      .hero-visual { max-width: 345px; }
      .orbit-core { width: 136px; height: 136px; gap: 0.65rem; }
      .core-window { width: 64px; height: 49px; }
      .core-window b { font-size: 1.25rem; }
      .core-label { font-size: 0.52rem; }
      .node-shell { min-width: 108px; gap: 0.5rem; padding: 0.52rem 0.58rem; }
      .node-icon { width: 29px; height: 29px; flex-basis: 29px; }
      .node-copy strong { font-size: 0.57rem; }
      .node-copy small { font-size: 0.44rem; }
      .orbit-node--right { right: -1%; }
      .orbit-node--left { left: -1%; }
      .promise-grid { grid-template-columns: 1fr; }
      .promise-card { min-height: 190px; }
      .nav-links, .nav-cta .btn-ghost { display: none; }
      .hamburger { display: flex; }
      .nav-links.mobile-open {
        display: flex; position: fixed; top: 62px; left: 0; right: 0;
        flex-direction: column; background: rgba(250,249,246,0.97);
        backdrop-filter: blur(16px); padding: 2rem; gap: 1.4rem;
        border-bottom: 1px solid var(--line);
      }
    }

    /* ============ HERO — DIGITAL PRESENCE ENGINE ============ */
    .hero {
      min-height: max(760px, 100svh);
      isolation: isolate;
      background:
        radial-gradient(circle at 69% 48%, rgba(240, 82, 46, 0.09), transparent 29%),
        linear-gradient(110deg, #FAF9F6 0%, #FAF9F6 49%, #F5F0E9 72%, #ECE4DB 100%);
    }

    .hero .blob { opacity: 0.28; }
    .hero .blob-1 { right: 8%; background: #FFBDAE; }
    .hero .blob-2 { background: #FFE2B2; }

    .hero-inner {
      display: block;
      width: min(1160px, 92%);
      max-width: none;
      margin-inline: auto;
      position: relative;
      z-index: 5;
    }

    .hero-copy {
      position: relative;
      z-index: 6;
      width: min(54%, 630px);
      max-width: 630px;
    }

    .hero h1 {
      max-width: 650px;
      font-size: clamp(3rem, 6vw, 5.25rem);
      text-wrap: balance;
    }

    .hero-cinema {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;
      perspective: 1500px;
    }

    .hero-cinema::before {
      content: '';
      position: absolute;
      inset: 0 auto 0 0;
      width: 58%;
      z-index: 4;
      background: linear-gradient(90deg, #FAF9F6 0%, rgba(250,249,246,0.98) 68%, rgba(250,249,246,0) 100%);
    }

    .cinema-darkfield {
      position: absolute;
      width: min(850px, 72vw);
      aspect-ratio: 1.08;
      top: 50%;
      right: -7%;
      transform: translateY(-50%);
      border-radius: 48%;
      background:
        radial-gradient(circle at 48% 48%, rgba(39,37,48,0.98) 0 31%, rgba(29,28,36,0.95) 45%, rgba(23,22,26,0.68) 61%, transparent 72%);
      filter: drop-shadow(0 35px 55px rgba(23,22,26,0.16));
    }

    .cinema-grid {
      position: absolute;
      inset: 0;
      opacity: 0.13;
      background-image:
        linear-gradient(rgba(255,255,255,0.24) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.24) 1px, transparent 1px);
      background-size: 46px 46px;
      transform: perspective(650px) rotateX(65deg) translateY(44%);
      transform-origin: center bottom;
      mask-image: radial-gradient(circle at 70% 58%, #000 0%, transparent 58%);
    }

    .cinema-glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(2px);
      mix-blend-mode: screen;
    }

    .cinema-glow--coral {
      width: 320px;
      height: 320px;
      right: 17%;
      top: 30%;
      background: radial-gradient(circle, rgba(240,82,46,0.34), rgba(240,82,46,0) 68%);
      animation: cinema-breathe 5.5s ease-in-out infinite;
    }

    .cinema-glow--pearl {
      width: 190px;
      height: 190px;
      right: 5%;
      top: 17%;
      background: radial-gradient(circle, rgba(255,241,222,0.24), rgba(255,255,255,0) 68%);
      animation: cinema-breathe 7s ease-in-out -2s infinite;
    }

    .engine-parallax {
      --parallax-x: 0px;
      --parallax-y: 0px;
      --tilt-x: 0deg;
      --tilt-y: 0deg;
      --scene-scale: 1;
      position: absolute;
      width: 600px;
      height: 570px;
      left: 72.5%;
      top: 52%;
      z-index: 3;
      transform-style: preserve-3d;
      transform: translate(-50%, -50%) translate3d(var(--parallax-x), var(--parallax-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--scene-scale));
      transition: transform 0.5s var(--ease);
      will-change: transform;
    }

    .engine-stage {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      animation: engine-float 7s ease-in-out infinite;
    }

    .engine-halo {
      position: absolute;
      width: 370px;
      height: 370px;
      left: 120px;
      top: 100px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 50%;
      transform: rotateX(68deg) rotateZ(-16deg);
      box-shadow: 0 0 50px rgba(240,82,46,0.13), inset 0 0 40px rgba(255,255,255,0.04);
      animation: halo-turn 14s linear infinite;
    }

    .engine-halo::before,
    .engine-halo::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(240,82,46,0.32);
    }

    .engine-halo::before { inset: 36px; }
    .engine-halo::after { inset: 83px; border-color: rgba(255,255,255,0.19); }

    .engine-dot {
      position: absolute;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #FF7A5C;
      box-shadow: 0 0 16px 5px rgba(240,82,46,0.52);
      animation: dot-pulse 2.8s ease-in-out infinite;
    }

    .engine-dot--one { left: 84px; top: 142px; }
    .engine-dot--two { right: 60px; top: 230px; animation-delay: -0.9s; background: #FFF7ED; }
    .engine-dot--three { left: 174px; bottom: 40px; animation-delay: -1.8s; }

    .website-frame {
      position: absolute;
      width: 470px;
      height: 326px;
      left: 58px;
      top: 114px;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.34);
      background: rgba(16,15,20,0.94);
      box-shadow:
        0 45px 80px rgba(0,0,0,0.38),
        0 0 0 1px rgba(255,255,255,0.05) inset,
        0 0 55px rgba(240,82,46,0.09);
      transform: rotateY(-8deg) rotateX(4deg) translateZ(5px);
      transform-style: preserve-3d;
      backdrop-filter: blur(18px);
    }

    .website-frame::after {
      content: '';
      position: absolute;
      top: -45%;
      bottom: -45%;
      width: 74px;
      left: -28%;
      z-index: 8;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
      transform: rotate(18deg);
      animation: frame-scan 6.5s ease-in-out infinite;
    }

    .website-chrome {
      height: 42px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 15px;
      color: rgba(255,255,255,0.42);
      border-bottom: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.035);
    }

    .website-chrome i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: rgba(255,255,255,0.24);
    }

    .website-address {
      width: 175px;
      height: 20px;
      margin-inline: auto;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-body);
      font-size: 0.53rem;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.44);
    }

    .website-body {
      position: relative;
      height: calc(100% - 42px);
      padding: 26px 28px;
      overflow: hidden;
      background:
        radial-gradient(circle at 82% 45%, rgba(240,82,46,0.32), transparent 28%),
        linear-gradient(135deg, #F8F4EE 0 54%, #EDE6DC 100%);
      color: var(--ink);
    }

    .mini-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;
      font-family: var(--font-display);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .mini-nav span:last-child {
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--ink);
      color: #fff;
      font-size: 0.48rem;
    }

    .mini-kicker {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.48rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--coral-deep);
    }

    .mini-kicker::before { content: ''; width: 20px; height: 1px; background: currentColor; }

    .website-body h3 {
      width: 255px;
      margin: 12px 0 13px;
      font-size: 2.18rem;
      line-height: 0.98;
      letter-spacing: -0.055em;
    }

    .website-body h3 em { color: var(--coral); font-weight: 600; }

    .mini-copy {
      width: 230px;
      font-size: 0.65rem;
      line-height: 1.5;
      color: #6B6663;
    }

    .mini-cta {
      display: inline-flex;
      margin-top: 17px;
      padding: 8px 13px;
      border-radius: 999px;
      background: var(--coral);
      color: #fff;
      font-family: var(--font-display);
      font-size: 0.55rem;
      font-weight: 700;
    }

    .mini-orb {
      position: absolute;
      width: 126px;
      height: 126px;
      right: 24px;
      top: 92px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 28%, #FFF8F1 0 6%, #FFB19D 17%, #F0522E 45%, #8E2512 71%, #24151A 100%);
      box-shadow: -18px 25px 44px rgba(106,36,23,0.25), inset -13px -18px 30px rgba(48,8,2,0.22);
      animation: orb-turn 5.5s ease-in-out infinite;
    }

    .mini-orb::before,
    .mini-orb::after {
      content: '';
      position: absolute;
      inset: 17px -17px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.57);
      transform: rotate(-28deg);
    }

    .mini-orb::after {
      inset: 34px -11px;
      border-color: rgba(23,22,26,0.28);
      transform: rotate(35deg);
    }

    .logic-layer {
      position: absolute;
      min-width: 152px;
      padding: 12px 14px;
      display: flex;
      align-items: center;
      gap: 11px;
      border: 1px solid rgba(255,255,255,0.24);
      border-radius: 14px;
      color: #fff;
      background: rgba(29,28,36,0.67);
      box-shadow: 0 17px 35px rgba(0,0,0,0.22);
      backdrop-filter: blur(16px);
      transform-style: preserve-3d;
    }

    .logic-layer b {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      border-radius: 9px;
      color: #17161A;
      background: #FF8063;
      font-size: 0.58rem;
    }

    .logic-layer span { display: block; font-family: var(--font-display); font-size: 0.73rem; font-weight: 600; }
    .logic-layer small { display: block; margin-top: 2px; color: rgba(255,255,255,0.48); font-size: 0.48rem; letter-spacing: 0.1em; text-transform: uppercase; }
    .logic-layer--message { left: 5px; top: 57px; animation: layer-message 7s ease-in-out infinite; }
    .logic-layer--identity { right: -6px; top: 94px; animation: layer-identity 7s ease-in-out -1.4s infinite; }
    .logic-layer--action { right: 35px; bottom: 38px; animation: layer-action 7s ease-in-out -2.8s infinite; }

    .mobile-frame {
      position: absolute;
      width: 102px;
      height: 184px;
      left: 33px;
      bottom: 29px;
      padding: 8px;
      border-radius: 23px;
      border: 1px solid rgba(255,255,255,0.35);
      background: rgba(16,15,20,0.96);
      box-shadow: 0 26px 46px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.05);
      transform: rotateY(13deg) rotateZ(-4deg) translateZ(58px);
      animation: mobile-float 6s ease-in-out -1s infinite;
    }

    .mobile-screen {
      position: relative;
      height: 100%;
      overflow: hidden;
      border-radius: 16px;
      padding: 26px 10px 10px;
      background: linear-gradient(150deg, #F9F5EE, #E8DED3);
    }

    .mobile-screen::before {
      content: '';
      position: absolute;
      top: 6px;
      left: 50%;
      width: 30px;
      height: 5px;
      border-radius: 999px;
      background: #1D1C24;
      transform: translateX(-50%);
    }

    .mobile-mark { width: 22px; height: 5px; border-radius: 2px; background: #17161A; }
    .mobile-title { width: 57px; height: 28px; margin-top: 20px; border-radius: 4px; background: linear-gradient(#17161A 0 7px, transparent 7px 11px, #17161A 11px 18px, transparent 18px 22px, #F0522E 22px); }
    .mobile-text { width: 48px; height: 18px; margin-top: 12px; opacity: 0.38; background: repeating-linear-gradient(to bottom, #17161A 0 2px, transparent 2px 6px); }
    .mobile-button { width: 42px; height: 14px; margin-top: 15px; border-radius: 999px; background: var(--coral); }

    .live-pill {
      position: absolute;
      right: 61px;
      top: 57px;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 999px;
      color: rgba(255,255,255,0.75);
      background: rgba(23,22,26,0.6);
      backdrop-filter: blur(12px);
      font-size: 0.56rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      animation: live-float 5s ease-in-out infinite;
    }

    .live-pill::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #4BE37B;
      box-shadow: 0 0 12px rgba(75,227,123,0.82);
    }

    @keyframes engine-float {
      0%, 100% { transform: translateY(0) rotateZ(0deg); }
      50% { transform: translateY(-12px) rotateZ(0.35deg); }
    }

    @keyframes halo-turn {
      from { transform: rotateX(68deg) rotateZ(-16deg); }
      to { transform: rotateX(68deg) rotateZ(344deg); }
    }

    @keyframes cinema-breathe {
      0%, 100% { opacity: 0.58; transform: scale(0.92); }
      50% { opacity: 1; transform: scale(1.12); }
    }

    @keyframes dot-pulse {
      0%, 100% { transform: scale(0.8); opacity: 0.55; }
      50% { transform: scale(1.35); opacity: 1; }
    }

    @keyframes frame-scan {
      0%, 18% { left: -28%; opacity: 0; }
      30% { opacity: 1; }
      56%, 100% { left: 122%; opacity: 0; }
    }

    @keyframes orb-turn {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-8px) rotate(7deg); }
    }

    @keyframes layer-message {
      0%, 100% { transform: translate3d(0,0,88px) rotateY(5deg); }
      50% { transform: translate3d(-8px,-10px,116px) rotateY(1deg); }
    }

    @keyframes layer-identity {
      0%, 100% { transform: translate3d(0,0,74px) rotateY(-7deg); }
      50% { transform: translate3d(10px,-8px,105px) rotateY(-2deg); }
    }

    @keyframes layer-action {
      0%, 100% { transform: translate3d(0,0,96px) rotateY(-3deg); }
      50% { transform: translate3d(7px,10px,123px) rotateY(2deg); }
    }

    @keyframes mobile-float {
      0%, 100% { transform: rotateY(13deg) rotateZ(-4deg) translate3d(0,0,58px); }
      50% { transform: rotateY(7deg) rotateZ(-1deg) translate3d(-4px,-11px,78px); }
    }

    @keyframes live-float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    @media (max-width: 1050px) {
      .hero-copy { width: min(57%, 585px); }
      .engine-parallax { left: 73.5%; --scene-scale: 0.84; }
      .cinema-darkfield { right: -15%; }
    }

    @media (max-width: 880px) {
      .hero {
        min-height: auto;
        display: block;
        padding: 8.5rem 0 30rem;
      }
      .hero-copy { width: 100%; max-width: 690px; }
      .hero h1 { max-width: 690px; }
      .hero-cinema { top: auto; height: 500px; }
      .hero-cinema::before {
        inset: 0;
        width: 100%;
        background: linear-gradient(180deg, #FAF9F6 0%, rgba(250,249,246,0.42) 17%, rgba(250,249,246,0) 48%);
      }
      .cinema-darkfield { width: 760px; right: 50%; top: 57%; transform: translate(50%, -50%); }
      .engine-parallax { left: 50%; top: 56%; --scene-scale: 0.78; }
      .cinema-grid { mask-image: radial-gradient(circle at 50% 62%, #000 0%, transparent 60%); }
    }

    @media (max-width: 560px) {
      .hero { padding: 7.5rem 0 24rem; }
      .hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
      .hero-cinema { height: 410px; }
      .engine-parallax { top: 55%; --scene-scale: 0.61; }
      .cinema-darkfield { width: 610px; }
      .logic-layer--identity { right: 28px; }
      .hero-trust { gap: 0.5rem 0.9rem; }
      .nav-inner { gap: 0.55rem; }
      .logo { white-space: nowrap; font-size: 1rem; }
      .nav-cta { gap: 0.5rem; }
      .nav-cta .btn { padding: 0.58rem 0.82rem; font-size: 0.76rem; white-space: nowrap; }
    }

    @media (prefers-reduced-motion: reduce) {
      .engine-stage, .engine-halo, .cinema-glow, .engine-dot, .website-frame::after,
      .mini-orb, .logic-layer, .mobile-frame, .live-pill { animation: none !important; }
      .engine-parallax { transform: translate(-50%, -50%) scale(var(--scene-scale)); }
    }

    /* ============ HERO — CINEMATIC VIDEO ============ */
    @media (min-width: 881px) {
      .hero {
        min-height: min(760px, 100svh);
        padding-bottom: 1rem;
      }

      .hero .hero-video {
        -webkit-mask-image: linear-gradient(
          180deg,
          transparent 0%,
          #000 16%,
          #000 84%,
          transparent 100%
        );
        mask-image: linear-gradient(
          180deg,
          transparent 0%,
          #000 16%,
          #000 84%,
          transparent 100%
        );
      }
    }

    .hero-video-stage {
      position: absolute;
      inset: 0;
      z-index: 2;
      overflow: hidden;
      pointer-events: none;
      background:
        radial-gradient(circle at 77% 48%, rgba(218,205,190,0.48), transparent 38%),
        #F3EFE9;
    }

    .hero-video-stage .cinema-darkfield,
    .hero-video-stage .cinema-glow,
    .hero-video-stage .engine-parallax { display: none; }

    .hero-video {
      position: absolute;
      top: 50%;
      right: 0;
      width: min(100%, 1280px);
      height: auto;
      aspect-ratio: 16 / 9;
      display: block;
      object-fit: contain;
      object-position: center center;
      transform: translateY(-50%);
      filter: saturate(0.96) contrast(1.03) brightness(1.01);
    }

    .hero-video-wash,
    .hero-video-vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .hero-video-wash {
      z-index: 2;
      background: linear-gradient(
        90deg,
        #FAF9F6 0%,
        rgba(250,249,246,0.99) 30%,
        rgba(250,249,246,0.9) 43%,
        rgba(250,249,246,0.28) 56%,
        rgba(250,249,246,0.04) 66%,
        rgba(250,249,246,0) 74%
      );
    }

    .hero-video-vignette {
      z-index: 3;
      background:
        linear-gradient(180deg, #FAF9F6 0%, rgba(250,249,246,0.94) 3%, rgba(250,249,246,0.56) 9%, rgba(250,249,246,0.14) 15%, transparent 21%, transparent 58%, rgba(250,249,246,0.3) 68%, rgba(250,249,246,0.86) 80%, #FAF9F6 88%, #FAF9F6 100%),
        radial-gradient(circle at 78% 50%, transparent 34%, rgba(250,249,246,0.08) 73%, rgba(250,249,246,0.34) 100%);
    }

    .marquee-wrap {
      margin-top: 1.5rem;
      padding-block: 1rem;
    }
    @media (max-width: 1050px) {
      .hero-video { object-position: 57% center; }
      .hero-video-wash {
        background: linear-gradient(
          90deg,
          #FAF9F6 0%,
          rgba(250,249,246,0.99) 35%,
          rgba(250,249,246,0.78) 53%,
          rgba(250,249,246,0.15) 75%,
          transparent 90%
        );
      }
    }

    @media (max-width: 880px) {
      .hero { padding: 8.5rem 0 calc(min(56.25vw, 430px) + 1.6rem); }
      .hero-video-stage {
        inset: auto 0 0;
        width: 100%;
        height: min(56.25vw, 430px);
        border-top: 1px solid rgba(23,22,26,0.08);
      }
      .hero-video {
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
        object-fit: cover;
        object-position: center;
      }
      .hero-video-wash {
        background: linear-gradient(180deg, #FAF9F6 0%, rgba(250,249,246,0.35) 17%, transparent 44%);
      }
      .hero-video-vignette {
        background: linear-gradient(180deg, rgba(250,249,246,0.22) 0%, transparent 20%, transparent 68%, rgba(250,249,246,0.68) 92%, #FAF9F6 100%);
      }
    }

    @media (max-width: 560px) {
      .hero { padding: 7.5rem 0 calc(56.25vw + 1.2rem); }
      .hero-video-stage { height: 56.25vw; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-video { display: none; }
      .hero-video-stage {
        background: #F3EFE9 url('../media/hero-code-to-site-clean-native-poster.jpg') center / cover no-repeat;
      }
    }