:root {
      --background: 0 0% 100%;
      --foreground: 220 30% 8%;
      --card: 0 0% 100%;
      --card-foreground: 220 30% 8%;
      --primary: 215 85% 46%;
      --primary-foreground: 0 0% 100%;
      --secondary: 210 20% 96%;
      --muted: 210 15% 92%;
      --muted-foreground: 220 12% 40%;
      --border: 214 18% 88%;
      --radius: 0.75rem;
      --purple: 215 85% 46%;
      --purple-light: 210 75% 62%;
      --surface: 210 22% 97%;
      --surface-hover: 210 18% 93%;

      --bg: hsl(var(--background));
      --fg: hsl(var(--foreground));
      --card-bg: hsl(var(--card));
      --accent: hsl(var(--primary));
      --accent-light: hsl(var(--purple-light));
      --border-color: hsl(var(--border));
      --muted-fg: hsl(var(--muted-foreground));
      --surface-bg: hsl(var(--surface));
    }

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

    body {
      background-color: var(--bg);
      color: var(--fg);
      font-family: 'DM Sans', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      letter-spacing: -0.01em;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 3px; }
    ::-webkit-scrollbar-track { background: var(--bg); }

    #portfolio, #contato, #servicos, #repertorio, #cta-mid {
      position: relative;
      overflow: hidden;
    }

    /* ── Layout ── */
    .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
    section { padding: 96px 0; }

    /* ── Typography ── */
    h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
    h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
    h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
    p { color: var(--muted-fg); line-height: 1.75; }

    .label {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }

    /* ── Image Placeholder ── */
    .img-placeholder {
      background: hsl(var(--surface));
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: var(--muted-fg);
      font-size: 0.8125rem;
      text-align: center;
      padding: 24px;
      position: relative;
      overflow: hidden;
    }
    .img-placeholder::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, hsl(var(--primary) / 0.05), transparent 60%);
      pointer-events: none;
    }
    .img-placeholder svg { opacity: 0.25; }
    .img-placeholder span { max-width: 220px; line-height: 1.5; position: relative; }

    /* ── Button border light ── */
    @property --border-angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    @keyframes border-spin {
      to { --border-angle: 360deg; }
    }

    /* ── Buttons ── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: var(--radius);
      font-family: 'DM Sans', sans-serif;
      font-size: 0.9375rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: all 0.2s ease;
      letter-spacing: -0.01em;
    }

    .btn-primary {
      background: hsl(var(--primary));
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: var(--radius);
      padding: 1.5px;
      background: conic-gradient(
        from var(--border-angle),
        transparent 60%,
        rgba(255,255,255,0.15) 72%,
        rgba(255,255,255,0.9) 80%,
        rgba(255,255,255,0.15) 88%,
        transparent 98%
      );
      animation: border-spin 3s linear infinite;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      pointer-events: none;
      z-index: 1;
    }
    .btn-primary::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -75%;
      width: 50%;
      height: 200%;
      background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
      transform: skewX(-20deg);
      transition: left 0s;
      pointer-events: none;
    }
    .btn-primary:hover::after {
      left: 125%;
      transition: left 0.5s ease;
    }
    .btn-primary:hover {
      background: hsl(var(--purple-light));
      box-shadow: 0 0 20px hsl(var(--primary) / 0.5), 0 0 40px hsl(var(--primary) / 0.2);
      transform: translateY(-1px);
    }

    .btn-outline {
      background: transparent;
      color: var(--fg);
      border: 1px solid var(--border-color);
    }
    .btn-outline:hover {
      background: hsl(var(--surface-hover));
      border-color: hsl(var(--primary) / 0.5);
    }

    /* ── Navbar ── */
    .navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 0 24px; height: 64px;
      display: flex; align-items: center;
      background: hsl(var(--background) / 0.85);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s;
    }
    .navbar.scrolled { border-bottom-color: var(--border-color); }
    .navbar-inner {
      max-width: 1100px; margin: 0 auto; width: 100%;
      display: flex; align-items: center; justify-content: space-between;
    }
    .logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--fg); text-decoration: none; display: flex; align-items: center; }
    .logo-img { height: 44px; width: auto; display: block; }
    .logo span { color: var(--accent); }
    .nav-links { display: flex; gap: 32px; list-style: none; }
    .nav-links a { color: var(--muted-fg); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color 0.2s; }
    .nav-links a:hover { color: var(--fg); }

    /* ── Hero ── */
    #hero { padding-top: 160px; padding-bottom: 96px; position: relative; overflow: hidden; }
    .hero-glow {
      position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
      width: 800px; height: 600px;
      background: radial-gradient(ellipse at center, hsl(var(--primary) / 0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 420px;
      gap: 56px;
      align-items: center;
      position: relative;
    }
    .hero-content h1 { margin-bottom: 24px; }
    .hero-content h1 .highlight { color: var(--accent); }
    .hero-subtitle { font-size: 1.125rem; color: var(--muted-fg); margin-bottom: 40px; line-height: 1.7; }
    .social-proof { display: flex; align-items: center; justify-content: flex-start; gap: 24px; flex-wrap: wrap; }
    .social-proof-item { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--muted-fg); }
    .social-proof-item .dot { width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--primary)); flex-shrink: 0; }

    /* ── Hero Form Card ── */
    .hero-form-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: calc(var(--radius) * 1.5);
      padding: 32px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .hero-form-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 6px;
    }
    .hero-form-sub {
      font-size: 0.875rem;
      color: rgba(255,255,255,0.6);
      line-height: 1.5;
    }
    .hero-form-card label { color: rgba(255,255,255,0.9); }
    .hero-form-card label .required { color: rgba(255,255,255,0.42); }
    .hero-form-card input {
      background: rgba(255,255,255,0.09);
      border-color: rgba(255,255,255,0.22);
      color: #fff;
    }
    .hero-form-card input::placeholder { color: rgba(255,255,255,0.32); }
    .hero-form-card input:focus {
      border-color: hsl(215 80% 72%);
      box-shadow: 0 0 0 3px rgba(100,160,240,0.18);
    }
    .hero-form-card .trust-note { color: rgba(255,255,255,0.5); font-size: 0.8125rem; display: flex; align-items: center; gap: 6px; }
    .hero-form-card .trust-note::before { content: '🔒'; font-size: 0.75rem; }

    /* ── Marquee ── */
    .marquee-section {
      background: hsl(var(--surface));
      border-top: 1px solid var(--border-color);
      border-bottom: 1px solid var(--border-color);
      height: 56px;
      overflow: hidden;
      position: relative;
    }
    .marquee-wrapper { display: flex; align-items: center; height: 100%; overflow: hidden; }
    .marquee-track {
      display: flex;
      align-items: center;
      width: max-content;
      animation: marquee 35s linear infinite;
    }
    .marquee-wrapper:hover .marquee-track { animation-play-state: paused; }
    @keyframes marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }
    .marquee-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      padding: 0 28px;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--muted-fg);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .marquee-item .mstar { color: hsl(var(--primary)); font-size: 0.625rem; }

    /* ── Fade-in ── */
    .fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .fade-up.visible { opacity: 1; transform: translateY(0); }
    .fade-up:nth-child(1) { transition-delay: 0s; }
    .fade-up:nth-child(2) { transition-delay: 0.1s; }
    .fade-up:nth-child(3) { transition-delay: 0.2s; }
    .fade-up:nth-child(4) { transition-delay: 0.3s; }
    .fade-up:nth-child(5) { transition-delay: 0.4s; }

    /* ── Section header ── */
    .section-header { margin-bottom: 56px; }
    .section-header h2 { margin-bottom: 16px; }
    .section-header p { max-width: 560px; font-size: 1.0625rem; }

    /* ── Serviços ── */
    #servicos { background: hsl(var(--surface)); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
    .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

    .service-card {
      background: var(--card-bg);
      border: 1px solid var(--border-color);
      border-radius: var(--radius);
      padding: 0;
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .service-card::before {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 55%;
      background: linear-gradient(to top, hsl(var(--primary) / 0.07), transparent);
      opacity: 0; transition: opacity 0.3s;
      pointer-events: none; z-index: 0;
    }
    .service-card:hover { border-color: hsl(var(--primary) / 0.5); box-shadow: 0 0 0 1px hsl(var(--primary) / 0.08), 0 8px 32px hsl(var(--primary) / 0.12); transform: translateY(-3px); }
    .service-card:hover::before { opacity: 1; }

    .service-card-img {
      height: 220px;
      overflow: hidden;
      border-radius: var(--radius) var(--radius) 0 0;
      background: #fff;
      padding: 14px;
      display: flex; align-items: center; justify-content: center;
    }
    .service-card-img img,
    .service-card-img svg,
    .service-card-img video {
      width: 100%; height: 100%; object-fit: cover; display: block;
      border-radius: 8px;
    }
    .service-card-img .img-placeholder {
      height: 100%; border-radius: 0; border: none;
      border-bottom: 1px solid var(--border-color);
    }
    .service-card-body { padding: 24px; position: relative; z-index: 1; }

    .service-icon {
      width: 44px; height: 44px;
      background: hsl(var(--primary) / 0.12);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
      transition: background 0.3s, box-shadow 0.3s;
    }
    .service-icon svg { width: 22px; height: 22px; color: hsl(var(--primary)); transition: filter 0.3s; }
    .service-card:hover .service-icon { background: hsl(var(--primary) / 0.2); box-shadow: 0 0 16px hsl(var(--primary) / 0.25); }
    .service-card:hover .service-icon svg { filter: drop-shadow(0 0 5px hsl(var(--primary) / 0.5)); }

    .service-card-body h3 { margin-bottom: 10px; font-size: 1.0625rem; }
    .service-card-body > p { font-size: 0.875rem; margin-bottom: 16px; }
    .service-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .service-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.8125rem; color: var(--muted-fg); line-height: 1.5; }
    .service-list li::before { content: '–'; color: hsl(var(--primary)); flex-shrink: 0; font-weight: 600; }

    /* ── Diferenciais ── */
    #diferenciais .reasons-grid {
      display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 8px;
    }
    .reason-card { grid-column: span 2; }
    .reasons-grid .reason-card:nth-child(4),
    .reasons-grid .reason-card:nth-child(5) { grid-column: span 3; }
    .reason-card {
      background: hsl(220 38% 10%); border: 1px solid hsl(215 28% 20%);
      border-radius: var(--radius); padding: 32px 28px;
      position: relative; overflow: hidden;
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, opacity 0.6s ease;
    }
    .reason-card::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--purple-light)));
      opacity: 0; transition: opacity 0.35s;
    }
    .reasons-grid .reason-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 0 1px hsl(var(--primary)/0.4);
      border-color: hsl(var(--primary)/0.3);
    }
    .reasons-grid .reason-card:hover::before { opacity: 1; }
    .reason-card-num {
      font-size: 6rem; font-weight: 900; line-height: 1;
      color: rgba(255,255,255,0.04);
      position: absolute; bottom: -12px; right: 16px;
      user-select: none; pointer-events: none;
    }
    .reason-card svg { flex-shrink: 0; }
    .reason-card h3 { font-size: 1.0625rem; font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 1.35; }
    .reason-card p { font-size: 0.875rem; line-height: 1.72; color: rgba(255,255,255,0.55); }
    .reason-card.fade-up { opacity: 0; }
    .reason-card.fade-up.visible { opacity: 1; }
    .reasons-grid .reason-card:nth-child(1).fade-up:not(.visible) { transition-delay: 0s; }
    .reasons-grid .reason-card:nth-child(2).fade-up:not(.visible) { transition-delay: 0.09s; }
    .reasons-grid .reason-card:nth-child(3).fade-up:not(.visible) { transition-delay: 0.18s; }
    .reasons-grid .reason-card:nth-child(4).fade-up:not(.visible) { transition-delay: 0.27s; }
    .reasons-grid .reason-card:nth-child(5).fade-up:not(.visible) { transition-delay: 0.36s; }

    /* ── Portfolio ── */
    #portfolio { background: hsl(var(--surface)); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
    /* ── Portfolio Carousel (game map) ── */
    .pf-stage {
      position: relative; height: 560px; overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .pf-slide {
      position: absolute; width: 380px; height: 500px;
      border-radius: var(--radius); overflow: hidden; cursor: pointer;
      transition: transform 0.55s cubic-bezier(0.4,0,0.2,1), opacity 0.55s ease, box-shadow 0.55s ease;
    }
    .pf-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
    .pf-slide[data-pos="0"] {
      transform: translateX(0) scale(1); opacity: 1; z-index: 10;
      box-shadow: 0 0 0 2px hsl(var(--primary)), 0 30px 80px rgba(0,0,0,0.55), 0 0 60px hsl(var(--primary)/0.3);
    }
    .pf-slide[data-pos="1"]  { transform: translateX(410px)  scale(0.78); opacity: 0.6; z-index: 5; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
    .pf-slide[data-pos="-1"] { transform: translateX(-410px) scale(0.78); opacity: 0.6; z-index: 5; box-shadow: 0 10px 40px rgba(0,0,0,0.4); }
    .pf-slide[data-pos="2"]  { transform: translateX(680px)  scale(0.6); opacity: 0.28; z-index: 2; box-shadow: none; }
    .pf-slide[data-pos="-2"] { transform: translateX(-680px) scale(0.6); opacity: 0.28; z-index: 2; box-shadow: none; }
    .pf-slide[data-pos="hide"] { opacity: 0; pointer-events: none; z-index: 0; transform: scale(0.4); }
    .pf-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 36px; }
    .pf-btn {
      width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
      background: hsl(var(--primary)/0.12); border: 1px solid hsl(var(--primary)/0.3);
      color: hsl(var(--primary)); font-size: 1.1rem;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.2s, border-color 0.2s;
    }
    .pf-btn:hover { background: hsl(var(--primary)/0.25); border-color: hsl(var(--primary)/0.6); }
    .pf-dots { display: flex; gap: 8px; align-items: center; }
    .pf-dot {
      width: 6px; height: 6px; border-radius: 50%; border: none; padding: 0;
      background: hsl(var(--primary)/0.25); cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }
    .pf-dot.active { background: hsl(var(--primary)); transform: scale(1.6); }

    /* ── Stats ── */
    #repertorio { background: hsl(var(--surface)); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 56px; }
    .stat-card {
      background: var(--card-bg); border: 1px solid var(--border-color);
      border-radius: var(--radius); padding: 32px 24px;
      text-align: center; position: relative; overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
      will-change: transform;
    }
    .stat-card::after {
      content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.6), transparent);
    }
    .stat-value { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em; color: var(--fg); line-height: 1; margin-bottom: 8px; }
    .stat-value .accent { color: var(--accent); }
    .stat-label { font-size: 0.8125rem; color: var(--muted-fg); font-weight: 500; }
    .repertoire-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .repertoire-item {
      display: flex; align-items: center; gap: 12px;
      padding: 16px 20px; background: var(--card-bg);
      border: 1px solid var(--border-color); border-radius: var(--radius);
      font-size: 0.9375rem; color: var(--muted-fg);
    }
    .repertoire-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary)); flex-shrink: 0; }

    /* ── CTA intermediário ── */
    .cta-block {
      background: linear-gradient(135deg, hsl(var(--primary) / 0.12), hsl(var(--purple-light) / 0.06));
      border: 1px solid hsl(var(--primary) / 0.25);
      border-radius: calc(var(--radius) * 2); padding: 64px 48px; text-align: center;
    }
    .cta-block blockquote {
      font-size: clamp(1.25rem, 2.5vw, 1.75rem); font-weight: 700;
      letter-spacing: -0.025em; line-height: 1.3; color: var(--fg);
      margin-bottom: 16px; max-width: 560px; margin-left: auto; margin-right: auto;
    }

    /* ── FAQ ── */
    #faq .section-header { text-align: center; }
    #faq .section-header p { margin-left: auto; margin-right: auto; }
    #faq .faq-list { margin-left: auto; margin-right: auto; }
    #contato .section-header { text-align: center; }
    #contato .section-header p { margin-left: auto; margin-right: auto; }
    .faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
    .faq-item { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; transition: border-color 0.2s; }
    .faq-item.open { border-color: hsl(var(--primary) / 0.35); }
    .faq-question {
      width: 100%; background: transparent; color: var(--fg);
      font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; font-weight: 600;
      text-align: left; padding: 20px 24px; cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      letter-spacing: -0.01em; transition: color 0.2s;
    }
    .faq-question:hover { color: hsl(var(--purple-light)); }
    .faq-icon {
      width: 20px; height: 20px; border-radius: 50%;
      background: hsl(var(--primary) / 0.15);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; color: var(--accent); font-size: 0.875rem;
      transition: transform 0.3s, background 0.2s;
    }
    .faq-item.open .faq-icon { transform: rotate(45deg); background: hsl(var(--primary) / 0.25); }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
    .faq-answer-inner { padding: 0 24px 20px; font-size: 0.9375rem; color: var(--muted-fg); line-height: 1.7; }

    /* ── Formulário ── */
    #contato { background: hsl(var(--surface)); border-top: 1px solid var(--border-color); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 6px; }
    .form-group.full { grid-column: 1 / -1; }
    label { font-size: 0.8125rem; font-weight: 600; color: var(--fg); letter-spacing: 0.01em; }
    label .required { color: var(--accent); }
    input, select, textarea {
      background: var(--card-bg); border: 1px solid var(--border-color);
      border-radius: var(--radius); color: var(--fg);
      font-family: 'DM Sans', sans-serif; font-size: 0.9375rem;
      padding: 12px 16px; outline: none;
      transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none;
    }
    input::placeholder, textarea::placeholder { color: hsl(var(--muted-foreground)); }
    select {
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
    }
    select option { background: hsl(var(--card)); color: var(--fg); }
    textarea { resize: vertical; min-height: 100px; }
    input:focus, select:focus, textarea:focus { border-color: hsl(var(--primary) / 0.6); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1); }
    input.error, select.error, textarea.error { border-color: #ef4444; }
    .field-error { font-size: 0.75rem; color: #ef4444; display: none; }
    .field-error.show { display: block; }
    .form-footer { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
    .trust-note { font-size: 0.8125rem; color: var(--muted-fg); display: flex; align-items: center; gap: 6px; }
    .trust-note::before { content: '🔒'; font-size: 0.75rem; }
    .form-success { display: none; background: hsl(143 70% 50% / 0.1); border: 1px solid hsl(143 70% 50% / 0.3); border-radius: var(--radius); padding: 20px 24px; color: hsl(143 70% 60%); font-weight: 600; text-align: center; margin-top: 16px; }

    /* ── Footer ── */
    footer { padding: 40px 0; border-top: 1px solid var(--border-color); text-align: center; color: var(--muted-fg); font-size: 0.875rem; }

    /* ── Mobile CTA ── */
    .mobile-cta { display: none; }

    /* ── Responsive ── */
    @media (max-width: 1000px) {
    }
    @media (max-width: 900px) {
      .hero-grid { grid-template-columns: 1fr; text-align: center; }
      #hero .social-proof { justify-content: center; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .repertoire-types { grid-template-columns: 1fr; }
      #diferenciais .reasons-grid { grid-template-columns: 1fr 1fr; }
      .reason-card { grid-column: span 1 !important; }
      .reasons-grid .reason-card:nth-child(5) { grid-column: 1 / -1 !important; }
    }
    @media (max-width: 768px) {
    }
    @media (max-width: 640px) {
      section { padding: 64px 0; }
      .nav-links { display: none; }
      .services-grid { grid-template-columns: 1fr; }
      .service-card-img { height: 240px; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .pf-stage { height: 400px; }
      .pf-slide { width: 240px; height: 320px; }
      .pf-slide[data-pos="1"]  { transform: translateX(260px)  scale(0.78); }
      .pf-slide[data-pos="-1"] { transform: translateX(-260px) scale(0.78); }
      .pf-slide[data-pos="2"]  { transform: translateX(430px)  scale(0.6); }
      .pf-slide[data-pos="-2"] { transform: translateX(-430px) scale(0.6); }
      .form-grid { grid-template-columns: 1fr; }
      .form-group.full { grid-column: 1; }
      .cta-block { padding: 40px 24px; }
      #diferenciais .reasons-grid { grid-template-columns: 1fr; }
      .reason-card { grid-column: 1 !important; }
      .hero-cta { flex-direction: column; align-items: center; }
    }

    /* ═══════════════════════════════════════════════════════
       BLUE & WHITE THEME
    ═══════════════════════════════════════════════════════ */

    /* ── Scrollbar ── */
    ::-webkit-scrollbar-thumb { background: hsl(215 40% 75%); }
    ::-webkit-scrollbar-track { background: #fff; }

    /* ── Marquee: dark navy bridge from hero ── */
    .marquee-section { background: hsl(220 55% 16%); border-top-color: transparent; border-bottom-color: transparent; }
    .marquee-item { color: rgba(255,255,255,0.5); }
    .marquee-item .mstar { color: hsl(215 80% 70%); }

    /* ── Dark navy sections ── */
    #hero, #portfolio, #contato {
      background: hsl(220 55% 15%);
      border-top-color: transparent;
      border-bottom-color: transparent;
    }

    /* ── Brand blue sections ── */
    #servicos, #repertorio, #cta-mid {
      background: hsl(215 82% 46%);
      border-top-color: transparent;
      border-bottom-color: transparent;
    }

    /* ── White section card depth (blue-tinted shadow) ── */
    .service-card { box-shadow: 0 2px 8px rgba(20,50,120,0.07), 0 6px 20px rgba(20,50,120,0.05); }
    .reason-card { border-color: hsl(215 30% 22%); }
    .faq-item { box-shadow: 0 1px 4px rgba(20,50,120,0.06), 0 4px 14px rgba(20,50,120,0.05); }
    .stat-card { box-shadow: 0 2px 8px rgba(20,50,120,0.07), 0 6px 20px rgba(20,50,120,0.06); }

    /* ── Hero glow ── */
    .hero-glow { background: radial-gradient(ellipse at center, hsl(215 85% 62% / 0.32) 0%, transparent 70%); }

    /* ── Labels on dark navy ── */
    #hero .label, #portfolio .label, #contato .label { color: hsl(215 78% 74%); }

    /* ── Headings on dark navy ── */
    #hero h1, #hero h2, #hero h3,
    #portfolio h2, #portfolio h3,
    #contato h2, #contato h3 { color: #fff; }

    /* ── Body text on dark navy ── */
    #hero p, #portfolio p, #contato p { color: rgba(255,255,255,0.72); }
    #hero .hero-subtitle { color: rgba(255,255,255,0.78); }
    #hero .social-proof-item { color: rgba(255,255,255,0.62); }
    #hero .highlight { color: hsl(210 85% 80%); }

    /* ── btn-outline on dark navy ── */
    #hero .btn-outline, #contato .btn-outline {
      color: #fff; border-color: rgba(255,255,255,0.38);
    }
    #hero .btn-outline:hover, #contato .btn-outline:hover {
      background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6);
    }

    /* ── Labels on brand blue ── */
    #servicos .label, #repertorio .label, #cta-mid .label { color: rgba(255,255,255,0.72); }

    /* ── Headings on brand blue ── */
    #servicos h2, #servicos h3,
    #repertorio h2, #repertorio h3,
    #cta-mid blockquote { color: #fff; }

    /* ── Body text on brand blue ── */
    #servicos p, #repertorio p, #cta-mid p { color: rgba(255,255,255,0.8); }

    /* ── Service cards → white on brand blue ── */
    #servicos .service-card {
      background: #fff;
      border-color: transparent;
      box-shadow: 0 4px 20px rgba(0,0,30,0.2), 0 1px 4px rgba(0,0,30,0.12);
    }
    #servicos .service-card:hover {
      box-shadow: 0 10px 44px rgba(0,0,30,0.3);
      transform: translateY(-3px);
      border-color: transparent;
    }
    #servicos .service-card-body h3 { color: hsl(220 30% 10%); }
    #servicos .service-card-body > p { color: hsl(220 10% 38%); }
    #servicos .service-card-body .service-list li { color: hsl(220 10% 38%); }
    #servicos .service-card-img .img-placeholder { background: hsl(210 20% 96%); border-bottom-color: hsl(214 18% 90%); }

    /* ── Stat cards → white sólido no fundo azul ── */
    #repertorio .stat-card {
      background: #fff;
      border-color: transparent;
      box-shadow: 0 4px 20px rgba(0,0,0,0.18), 0 1px 4px rgba(0,0,0,0.1);
    }
    #repertorio .stat-card:hover {
      box-shadow: 0 8px 36px rgba(0,0,0,0.26);
      transform: translateY(-2px);
    }
    #repertorio .stat-value { color: hsl(215 85% 44%); }
    #repertorio .stat-label { color: hsl(220 14% 40%); }
    #repertorio .stat-card::after { background: linear-gradient(90deg, transparent, hsl(215 85% 46% / 0.4), transparent); }
    #repertorio .repertoire-item {
      background: rgba(255,255,255,0.92);
      border-color: transparent;
      color: hsl(220 14% 38%);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    #repertorio .repertoire-item::before { background: hsl(215 85% 46%); }

    /* ── CTA block on brand blue ── */
    #cta-mid .cta-block {
      background: rgba(255,255,255,0.18);
      border: 2px solid rgba(255,255,255,0.5);
      box-shadow: 0 4px 32px rgba(0,0,0,0.12);
    }
    #cta-mid blockquote { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.15); }
    #cta-mid .cta-block p { color: #fff; font-weight: 500; }

    /* ── Portfolio active card on dark ── */
    .pf-dot { background: rgba(255,255,255,0.2); }
    .pf-dot.active { background: hsl(215 78% 74%); }
    .pf-btn { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); }
    .pf-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.35); }

    /* ── Form on dark navy ── */
    #contato label { color: rgba(255,255,255,0.9); }
    #contato label .required { color: rgba(255,255,255,0.42); }
    #contato input[type="text"],
    #contato input[type="email"],
    #contato input[type="tel"] {
      background: rgba(255,255,255,0.09);
      border-color: rgba(255,255,255,0.22);
      color: #fff;
    }
    #contato input::placeholder { color: rgba(255,255,255,0.32); }
    #contato input:focus {
      border-color: hsl(215 80% 72%);
      box-shadow: 0 0 0 3px rgba(100,160,240,0.18);
    }
    #contato .trust-note { color: rgba(255,255,255,0.5); }
    #contato .section-header p { color: rgba(255,255,255,0.74); }

    /* ── Footer ── */
    footer { border-top-color: hsl(214 18% 88%); }

    /* ════════════════════════════════════════════════
       TECH VISUAL LAYER
    ════════════════════════════════════════════════ */

    /* ── Grid de linhas nos fundos escuros ── */
    #hero, #portfolio, #contato {
      background-image:
        linear-gradient(rgba(100,160,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,160,255,0.04) 1px, transparent 1px);
      background-size: 60px 60px;
    }

    /* ── Pontinhos/estrelas nos fundos azul-marca ── */
    #servicos, #repertorio, #cta-mid {
      background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
      background-size: 36px 36px;
    }

    /* ── Pontilhado sutil nas seções brancas ── */
    #diferenciais, #detalhamento, #faq {
      background-image: radial-gradient(circle, hsl(215 85% 46% / 0.07) 1px, transparent 1px);
      background-size: 28px 28px;
    }

    /* ── Linha de scan no hero ── */
    @keyframes scan-line {
      0%   { top: 0%;   opacity: 0; }
      4%   { opacity: 0.65; }
      96%  { opacity: 0.25; }
      100% { top: 100%; opacity: 0; }
    }
    .hero-scan {
      position: absolute; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        hsl(215 85% 72% / 0.5) 30%,
        hsl(200 100% 85% / 0.9) 50%,
        hsl(215 85% 72% / 0.5) 70%,
        transparent 100%);
      box-shadow: 0 0 12px hsl(215 85% 62% / 0.6), 0 0 4px rgba(255,255,255,0.4);
      animation: scan-line 7s ease-in-out infinite 0.5s backwards;
      z-index: 1; pointer-events: none;
    }

    /* ── Prefix de seta nos labels ── */
    .label::before {
      content: '›› ';
      font-weight: 800;
      letter-spacing: -0.06em;
      margin-right: 2px;
    }

    /* ── Glow no h1 do hero ── */
    #hero h1 { text-shadow: 0 0 80px hsl(215 85% 62% / 0.3), 0 0 160px hsl(215 85% 62% / 0.1); }

    /* ── Glow ampliado no hero ── */
    .hero-glow {
      background: radial-gradient(ellipse at center,
        hsl(215 85% 62% / 0.28) 0%,
        hsl(220 85% 40% / 0.1) 45%,
        transparent 70%) !important;
      width: 1000px !important; height: 750px !important;
    }

    /* ── Glow no botão principal do hero ── */
    #hero .btn-primary {
      box-shadow: 0 0 22px hsl(215 85% 46% / 0.55), 0 0 48px hsl(215 85% 46% / 0.2);
    }


    /* ── Linha divisória luminosa entre seções ── */
    .glow-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, hsl(215 85% 62% / 0.6) 50%, transparent 100%);
      box-shadow: 0 0 16px hsl(215 85% 62% / 0.35), 0 0 32px hsl(215 85% 62% / 0.1);
    }
    /* versão branca para seções azul */
    .glow-divider-white {
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
      box-shadow: 0 0 16px rgba(255,255,255,0.2), 0 0 32px rgba(255,255,255,0.06);
    }

    /* ── Canvas de estrelas ── */
    .stars-canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none; z-index: 0;
    }

    /* ── Transição de entrada das seções ── */
    .section-reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .section-reveal.section-revealed {
      opacity: 1;
      transform: translateY(0);
    }

/* ── DETALHAMENTO ── */
#detalhamento { padding: 96px 0; }

.detalhamento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.detalhamento-item {
  border-radius: var(--radius);
  overflow: hidden;
  background: hsl(220 38% 10%);
  border: 1px solid hsl(215 28% 18%);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.detalhamento-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(0,0,0,0.45);
}

.detalhamento-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.detalhamento-item:hover img {
  transform: scale(1.04);
}

@media (max-width: 900px) {
  .detalhamento-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .detalhamento-grid { grid-template-columns: 1fr; }
}
    /* Hero nunca esconde */
    #hero.section-reveal { opacity: 1; transform: none; transition: none; }