/* ============================================================
   ROTHA DIGITAL — Homepage Stylesheet
   style.css
   
   ESTRUTURA DO ARQUIVO:
   01. Variáveis e Reset
   02. Tipografia Base
   03. Utilitários
   04. Navegação
   05. Hero Section
   06. Ecosystem Section (3 Fronts)
   07. Featured Work
   08. What We Build (Services)
   09. Case Studies Preview
   10. Social Proof / Numbers
   11. CTA Final
   12. Footer
   13. Animações e Scroll Effects
   14. Responsivo — Breakpoints
   
   ============================================================ */


/* ============================================================
   01. VARIÁVEIS E RESET
   ============================================================
   
   CORES PRINCIPAIS:
   --bg-primary    → Fundo principal da página (preto profundo)
   --bg-secondary  → Fundo de painéis/cards (cinza muito escuro)
   --bg-elevated   → Fundo de elementos elevados, hover states
   --accent        → Verde Rotha — USE APENAS para:
                     Títulos principais, CTAs primários, 
                     destaques, links ativos, ícones
   --text-primary  → Branco para textos principais
   --text-body     → Branco com opacidade para corpo de texto
   --text-muted    → Cinza para labels, datas, informações secundárias
   --border        → Cor das bordas e linhas divisórias
   
   PARA MUDAR O TEMA DE CORES:
   Altere apenas as variáveis abaixo. Todo o site se adapta.
   ============================================================ */

:root {
  /* --- Cores de fundo --- */
  --bg-primary:    #0a0a0a;
  --bg-secondary:  #111111;
  --bg-elevated:   #161616;
  --bg-card:       #131313;

  /* --- Accent (Verde Rotha) ---
       Para trocar o verde, mude apenas este valor.
       Todas as bordas verdes, hovers e highlights seguem. */
  --accent:        #9efc09;       /* Verde Rotha */
  --accent-dim:    rgba(158, 252, 9, 0.08);  /* Para backgrounds sutis */
  --accent-glow:   rgba(158, 252, 9, 0.15);  /* Para sombras e glows */

  /* --- Textos --- */
  --text-primary:  #FFFFFF;
  --text-body:     rgba(255, 255, 255, 0.75);
  --text-muted:    rgba(255, 255, 255, 0.40);
  --text-label:    rgba(255, 255, 255, 0.30);

  /* --- Bordas e divisores --- */
  --border:        rgba(255, 255, 255, 0.08);
  --border-accent: rgba(158, 252, 9, 0.30);

  /* --- Tipografia ---
       DISPLAY  → Para headlines grandes (Hero, títulos de seção)
       BODY     → Para texto corrido, descrições, parágrafos
       MONO     → Para labels, tags, números, código
       
       Para trocar as fontes: substituir os valores abaixo.
       As fontes são carregadas via Google Fonts no HTML. */
  --font-display:  'Inter Tight', 'Helvetica Neue', sans-serif;
  --font-body:     'Inter Tight', 'Helvetica Neue', sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* --- Espaçamentos base ---
       Usado para consistência de padding/margin em seções */
  --section-py:    120px;       /* Padding vertical de seções desktop */
  --section-px:    80px;        /* Padding horizontal máximo desktop */
  --container:     1280px;      /* Largura máxima do conteúdo */
  --nav-height:    72px;        /* Altura da navbar */

  /* --- Raios de borda --- */
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --radius-xl:     32px;

  /* --- Transições padrão --- */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:      0.3s;
  --duration-slow: 0.6s;
}

/* Reset universal */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Tamanho base de fonte: 1rem = 16px */
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  /* Grain texture sutil sobre o fundo — 
     Remove a linha abaixo se não quiser a textura */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}


/* ============================================================
   02. TIPOGRAFIA BASE
   ============================================================ */

/* Escala tipográfica:
   --type-xs  → 11px  Labels, tags pequenas
   --type-sm  → 13px  Texto de apoio, legendas
   --type-md  → 15px  Corpo principal
   --type-lg  → 17px  Subtítulos, destaque leve
   --type-xl  → 20px  Subtítulos de seção
   --type-2xl → 28px  Títulos de card
   --type-3xl → 38px  Títulos de seção
   --type-4xl → 52px  Headlines secundárias
   --type-5xl → 72px  Headline principal (Hero)
   --type-6xl → 96px  Display máximo (opcional) */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Labels de seção (verde, uppercase) 
   Usado como: "OUR ECOSYSTEM", "FEATURED WORK", etc. */
.label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--accent);
}

/* Corpo de texto padrão */
p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
}

/* Texto de destaque dentro de parágrafos */
strong {
  color: var(--text-primary);
  font-weight: 600;
}


/* ============================================================
   03. UTILITÁRIOS
   ============================================================ */

/* Container centralizado */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

/* Divisor horizontal */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* Badge/tag pequena */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated);
}

.badge--accent {
  border-color: var(--border-accent);
  color: var(--accent);
  background: var(--accent-dim);
}

/* Dot indicador (•) verde */
.badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

/* ============================================================
   BOTÕES
   
   Tipos disponíveis:
   .btn               → Base (não usar sozinho)
   .btn--primary      → Verde, preenchido — CTA principal
   .btn--outline      → Bordado branco — CTA secundário
   .btn--ghost        → Sem borda, apenas texto — link sutil
   .btn--icon         → Quadrado com ícone
   
   Tamanhos:
   .btn--sm           → Pequeno (nav, cards)
   .btn (padrão)      → Médio (maioria dos casos)
   .btn--lg           → Grande (hero, CTA final)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all var(--duration) var(--ease);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn--primary {
  background: var(--accent);
  color: #000000;
  border: 1px solid var(--accent);
}

.btn--primary:hover {
  background: #b5ff2a;
  border-color: #b5ff2a;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(158, 252, 9, 0.20);
}

.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn--outline:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: none;
  padding-left: 0;
  padding-right: 4px;
}

.btn--ghost:hover {
  gap: 12px;
  color: #b5ff2a;
}

.btn--ghost .btn-arrow {
  transition: transform var(--duration) var(--ease);
}

.btn--ghost:hover .btn-arrow {
  transform: translateX(4px);
}

.btn--lg {
  padding: 16px 32px;
  font-size: 15px;
}

.btn--sm {
  padding: 8px 16px;
  font-size: 13px;
}

/* Ícone de seta dentro de botão */
.btn-arrow {
  font-size: 16px;
  line-height: 1;
}


/* ============================================================
   04. NAVEGAÇÃO
   ============================================================ */

/* NAVBAR:
   Posição fixed no topo, blur effect, borda inferior sutil.
   
   Para mudar o logo: substituir o elemento .nav-logo no HTML.
   Para adicionar/remover itens: editar a lista .nav-links no HTML.
   
   Altura controlada por: --nav-height (variável no :root) */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  /* Fundo com blur — efeito glassmorphism sutil */
  background: rgba(10, 10, 10, 0.80);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration) var(--ease),
              border-color var(--duration) var(--ease);
}

/* Navbar ao scrollar — fundo mais opaco */
.navbar.scrolled {
  background: rgba(10, 10, 10, 0.96);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO:
   Substitua o conteúdo de .nav-logo pelo seu logo SVG ou <img>.
   O "Q" e "Rotha" são placeholders baseados no layout original.
   
   Para usar imagem:
   <a href="/" class="nav-logo">
     <img src="assets/logo.svg" alt="Rotha Digital" height="28">
   </a> */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  /* Logo SVG is the only child — no gap needed */
  line-height: 0;  /* collapse vertical space around inline-block img */
}

/* Rotha_Logo.svg inside .nav-logo */
.nav-logo img {
  display: block;
  height: 32px;       /* navbar size — matches HTML attr */
  width: auto;
  max-width: none;    /* override any global max-width:100% */
}

/* Footer logo is slightly smaller — uses footer-brand context */
.footer-brand .nav-logo img {
  height: 26px;       /* footer size */
  width: auto;
}

/* Ícone "Q" do logo Rotha — substitua por SVG real */
.nav-logo-icon {
  /* Placeholder icon replaced by Rotha_Logo.svg — this rule kept for safety */
  display: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: color var(--duration) var(--ease),
              background var(--duration) var(--ease);
  letter-spacing: 0.01em;
}

.nav-links a:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* Item de nav com dropdown (Labs) */
.nav-links .has-dropdown {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links .dropdown-arrow {
  font-size: 10px;
  color: var(--text-label);
  transition: transform var(--duration) var(--ease);
}

.nav-links .has-dropdown:hover .dropdown-arrow {
  transform: rotate(180deg);
  color: var(--text-muted);
}

/* CTA da navbar */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Hamburger — só aparece em mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-primary);
  transition: all var(--duration) var(--ease);
}

/* [v9] Legacy mobile open-state removed — replaced by the independent
   off-canvas #mobile-menu (see MOBILE MENU v9 at the end of this file). */


/* ============================================================
   05. HERO SECTION
   ============================================================ */

/* HERO:
   Seção principal acima da dobra.
   Ocupa 100vh menos a navbar.
   
   BACKGROUND:
   Fundo escuro com gradient radial e glow verde sutil.
   Para adicionar uma imagem de fundo:
   background-image: url('assets/hero-bg.jpg'), var(--gradient-hero);
   
   IMAGEM DO ASTRONAUTA (ou outro visual):
   Substituir .hero-visual pelo seu asset.
   Recomendado: imagem PNG com fundo transparente, 
   largura máxima 600px, posicionada à direita. */

.hero {
  position: relative;
  min-height: calc(100vh - var(--nav-height));
  margin-top: var(--nav-height);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0;

  /* Gradiente de fundo do hero:
     O glow verde no lado direito replica o layout original.
     Ajuste o tamanho (600px) e posição (right -200px) conforme necessário. */
  background:
    radial-gradient(ellipse 600px 700px at right -200px center, rgba(158, 252, 9, 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 800px 600px at 30% 100%, rgba(158, 252, 9, 0.03) 0%, transparent 60%),
    var(--bg-primary);
}

/* Grade decorativa de fundo — linhas sutis */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Linhas de grid em perspectiva — decoração */
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}

.hero-content {
  max-width: 600px;
}

/* Tagline acima do headline */
.hero-tagline {
  margin-bottom: 28px;
}

/* HERO HEADLINE:
   Fonte grande com quebra de linha controlada.
   A palavra em verde usa a classe .text-accent.
   
   Para alterar o texto principal: editar no HTML a tag <h1>.
   Tamanho da fonte: 72px desktop, reduz em breakpoints. */
.hero-headline {
  font-size: clamp(48px, 5.5vw, 80px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
  color: var(--text-primary);
}

/* Palavras com cor de destaque (verde) */
.text-accent {
  color: var(--accent);
}

/* Subtítulo do hero */
.hero-description {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 40px;
  max-width: 460px;
}

/* Grupo de botões do hero */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* Indicador "One brand. Three Strategic Fronts." */
.hero-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.hero-indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}

/* VISUAL DO HERO:
   Container da imagem principal (astronauta ou outro asset).
   
   PARA SUBSTITUIR A IMAGEM:
   No HTML, dentro de .hero-visual, coloque:
   <img src="assets/hero-visual.png" alt="Rotha Digital" class="hero-visual-img">
   
   Dimensões recomendadas: 560px x 620px, PNG transparente.
   
   O placeholder atual é apenas para visualização. */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-visual-img {
  width: 100%;
  max-width: 520px;
  height: auto;
  /* Glow verde sutil na imagem */
  filter: drop-shadow(0 0 60px rgba(158, 252, 9, 0.15));
  animation: float 6s ease-in-out infinite;
}

/* Animação de flutuação da imagem */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-16px); }
}

/* Placeholder visual enquanto imagem não está disponível
   REMOVER quando a imagem real for inserida */
.hero-visual-placeholder {
  width: 480px;
  height: 520px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--text-label);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-visual-placeholder::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, var(--accent-glow), transparent 60%);
}

.hero-visual-placeholder .ph-icon {
  font-size: 48px;
  opacity: 0.3;
}

/* Card flutuante de stats — sobrepõe a imagem */
.hero-stats {
  position: absolute;
  bottom: 40px;
  left: -20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-stat-card {
  background: rgba(17, 17, 17, 0.92);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideInLeft 0.8s var(--ease) both;
}

.hero-stat-card:nth-child(2) {
  animation-delay: 0.15s;
}

.hero-stat-card:nth-child(3) {
  animation-delay: 0.30s;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.hero-stat-info {
  display: flex;
  flex-direction: column;
}

.hero-stat-value {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.hero-stat-label {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1;
}


/* ============================================================
   06. ECOSYSTEM SECTION — "Three Strategic Fronts"
   ============================================================ */

/* ECOSYSTEM:
   Apresenta as 3 frentes: Studio, Labs, Originals.
   
   CARDS:
   Cada card tem ícone, título, descrição e link.
   Para trocar os ícones: substituir .front-icon no HTML por SVG.
   Para trocar as imagens de card: substituir .front-image.
   
   Recomendação de imagens por card:
   - Studio: screenshot de produto/interface
   - Labs: render de asset 3D
   - Originals: screenshot do jogo/ambiente */

.ecosystem {
  padding: var(--section-py) 0;
  background: var(--bg-primary);
  position: relative;
}

.ecosystem .section-header {
  text-align: center;
  margin-bottom: 72px;
}

.section-title {
  font-size: clamp(32px, 3.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 16px;
  margin-bottom: 20px;
}

.section-subtitle {
  font-size: 16px;
  color: var(--text-body);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Grid de 3 cards */
.fronts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.front-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.front-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
              0 0 0 1px var(--border-accent);
}

/* Número do card (01, 02, 03) */
.front-number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-label);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

/* Área de ícone do card
   PARA TROCAR O ÍCONE: substituir o conteúdo de .front-icon
   por um elemento SVG com width/height de 28px.
   O background e border vão se adaptar automaticamente. */
.front-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 24px;
  transition: background var(--duration) var(--ease);
}

.front-card:hover .front-icon {
  background: rgba(158, 252, 9, 0.15);
}

/* Imagem de preview do card
   PARA ADICIONAR IMAGEM: 
   Descomente e coloque o caminho correto:
   background-image: url('assets/studio-preview.jpg'); */
.front-preview {
  width: 100%;
  height: 180px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  margin-bottom: 28px;
  overflow: hidden;
  position: relative;
  /* TROCAR: adicione background-image aqui ou use uma <img> */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: var(--font-mono);
  font-size: 11px;
}

.front-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease);
}

.front-card:hover .front-preview img {
  transform: scale(1.03);
}

.front-card h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.front-card .front-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  margin-bottom: 28px;
  flex: 1;
}

/* Tagline destacada em verde — frase curta de posicionamento */
.front-tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 20px;
  line-height: 1.4;
}

.front-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  transition: gap var(--duration) var(--ease), color var(--duration) var(--ease);
  font-family: var(--font-body);
}

.front-link:hover {
  gap: 10px;
  color: #b5ff2a;
}

/* Glow decorativo no hover do card */
.front-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.front-card:hover::after {
  opacity: 0.6;
}


/* ============================================================
   07. FEATURED WORK
   ============================================================ */

/* FEATURED WORK:
   Destaque para o projeto principal (jogo de horror / IMU).
   Card horizontal com imagem à direita e info à esquerda.
   
   IMAGEM DO PROJETO:
   Substituir .work-visual pela screenshot do jogo/projeto.
   Dimensões recomendadas: 600px x 400px, landscape.
   
   Para trocar o projeto destacado: editar diretamente no HTML
   os campos: título, descrição, tags e link do case study. */

.featured-work {
  padding: var(--section-py) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.work-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
  transition: border-color var(--duration) var(--ease);
}

.work-card:hover {
  border-color: var(--border-accent);
}

.work-info {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.work-meta {
  margin-bottom: 20px;
}

.work-info h2 {
  font-size: clamp(24px, 2.5vw, 36px);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  line-height: 1.15;
}

.work-description {
  font-size: 15px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Tags de tecnologia usada no projeto */
.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}

.work-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.work-tag::before {
  content: '•';
  color: var(--accent);
  font-size: 8px;
}

/* Visual do projeto (imagem ou render)
   PARA ADICIONAR IMAGEM: trocar o placeholder por:
   <img src="assets/project-featured.jpg" alt="Projeto" class="work-visual-img"> */
.work-visual {
  position: relative;
  background: var(--bg-elevated);
  overflow: hidden;
  /* Gradient de sobreposição da esquerda */
  background: linear-gradient(to right, var(--bg-card) 0%, transparent 20%),
              var(--bg-elevated);
}

.work-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  transition: transform var(--duration-slow) var(--ease), opacity var(--duration) var(--ease);
}

.work-card:hover .work-visual-img {
  transform: scale(1.03);
  opacity: 1;
}

/* Overlay escuro sobre a imagem para legibilidade */
.work-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--bg-card) 0%, rgba(19, 19, 19, 0.3) 40%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Placeholder da imagem do projeto */
.work-visual-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-label);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: center;
}


/* ============================================================
   08. WHAT WE BUILD — Services Grid
   ============================================================ */

/* SERVICES:
   4 cards com os principais serviços da Rotha.
   Grid 2x2 em desktop, 1 coluna em mobile.
   
   ÍCONES:
   Substituir o emoji/character em .service-icon por SVG.
   
   Para adicionar/remover cards: editar a lista no HTML.
   Cada card deve ter: ícone, título, descrição, link. */

.services {
  padding: var(--section-py) 0;
  background: var(--bg-primary);
}

.services .section-header {
  margin-bottom: 64px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.service-card {
  background: var(--bg-card);
  padding: 48px 44px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
}

/* Remove bordas extras nos cantos */
.service-card:nth-child(even) {
  border-right: none;
}

.service-card:nth-last-child(-n+2) {
  border-bottom: none;
}

.service-card:hover {
  background: var(--bg-elevated);
}

/* Número sequencial do card de serviço */
.service-number {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-label);
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

/* Ícone do serviço
   PARA TROCAR: substituir o conteúdo por SVG com fill="currentColor"
   O ícone herda a cor --accent automaticamente */
.service-icon {
  font-size: 32px;
  margin-bottom: 24px;
  display: block;
  /* Para ícones SVG: width: 36px; height: 36px; color: var(--accent); */
}

.service-card h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--text-primary);
}

.service-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: 28px;
}

/* Lista de tecnologias/skills do serviço */
.service-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}

.service-skill {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  letter-spacing: 0.05em;
}

/* Glow decorativo no canto do card de serviço */
.service-card::after {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-dim), transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease);
}

.service-card:hover::after {
  opacity: 1;
}


/* ============================================================
   09. NUMBERS / PROOF
   ============================================================ */

/* PROVA SOCIAL / NÚMEROS:
   Seção de números que transmitem autoridade.
   Valores em texto grande, descrição em texto menor.
   
   PARA TROCAR OS NÚMEROS:
   Editar os valores em .stat-value no HTML.
   Os valores são animados com contagem via JS ao entrar na tela. */

.proof {
  padding: var(--section-py) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.proof-inner {
  display: grid;
  grid-template-columns: 1fr 2px 1fr 2px 1fr 2px 1fr;
  align-items: center;
  gap: 0;
}

.proof-stat {
  padding: 32px 48px;
  text-align: center;
}

/* Divisor vertical entre os stats */
.proof-divider {
  height: 60px;
  background: var(--border);
}

.stat-value {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 8px;
  /* O span.count é alvo da animação de contagem em JS */
}

.stat-value .unit {
  color: var(--accent);
}

.stat-label {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 120px;
  margin: 0 auto;
}


/* ============================================================
   10. TESTIMONIALS / CLIENTES
   ============================================================ */

/* DEPOIMENTOS:
   Seção de prova social com depoimentos reais.
   
   PARA ADICIONAR DEPOIMENTOS:
   Copiar o bloco .testimonial-card no HTML e preencher:
   - .testimonial-text → o depoimento em si
   - .testimonial-author → nome do cliente
   - .testimonial-role → cargo/empresa
   - .testimonial-avatar → foto ou iniciais
   
   ATENÇÃO: Esta seção deve ter depoimentos REAIS.
   Depoimentos genéricos reduzem credibilidade. */

.testimonials {
  padding: var(--section-py) 0;
  background: var(--bg-primary);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 64px;
}

.testimonial-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}

.testimonial-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
}

/* Aspas decorativas */
.testimonial-quote {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--accent);
  line-height: 0.5;
  opacity: 0.4;
}

.testimonial-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  font-style: italic;
  flex: 1;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Avatar do cliente
   PARA USAR FOTO: substituir o fundo/iniciais por:
   <img src="assets/avatar-nome.jpg" alt="Nome"> 
   dentro de .testimonial-avatar */
.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.testimonial-role {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Estado vazio — enquanto não tem depoimentos reais */
.testimonials-placeholder {
  grid-column: 1 / -1;
  padding: 60px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--text-label);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
}


/* ============================================================
   11. CTA FINAL
   ============================================================ */

/* CTA FINAL:
   Seção de encerramento com chamada para contato.
   Fundo com gradiente para criar sensação de destaque.
   
   TEXTOS EDITÁVEIS NO HTML:
   - Headline principal
   - Subtítulo
   - Texto dos botões (Start a Project / Explore Our Work) */

.cta-final {
  padding: var(--section-py) 0;
  background:
    radial-gradient(ellipse 800px 500px at 50% 100%, rgba(158, 252, 9, 0.05) 0%, transparent 60%),
    var(--bg-secondary);
  border-top: 1px solid var(--border);
  text-align: center;
}

.cta-final-inner {
  max-width: 680px;
  margin: 0 auto;
}

.cta-final h2 {
  font-size: clamp(36px, 4.5vw, 60px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
}

.cta-final p {
  font-size: 16px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 44px;
}

.cta-final-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}


/* ============================================================
   12. FOOTER
   ============================================================ */

/* FOOTER:
   Rodapé com 4 colunas: brand, links úteis, escritórios, legal.
   
   ESCRITÓRIOS:
   Para atualizar endereços/localizações: editar .offices-list no HTML.
   
   LINKS ÚTEIS:
   Para editar a navegação do footer: editar .footer-nav no HTML.
   
   REDES SOCIAIS:
   Para trocar os ícones: os SVGs inline no HTML podem ser substituídos.
   Para adicionar nova rede: copiar um .social-link e atualizar href e SVG. */

.footer {
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

/* Coluna da marca */
.footer-brand {
  max-width: 280px;
}

.footer-brand .nav-logo {
  margin-bottom: 16px;
}

.footer-brand p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Links de redes sociais */
.footer-socials {
  display: flex;
  gap: 8px;
}

.social-link {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all var(--duration) var(--ease);
}

.social-link:hover {
  border-color: var(--border-accent);
  color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-2px);
}

.social-link svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* Colunas de navegação do footer */
.footer-nav-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: var(--font-mono);
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav-list a {
  font-size: 13px;
  color: var(--text-muted);
  transition: color var(--duration) var(--ease);
}

.footer-nav-list a:hover {
  color: var(--text-primary);
}

/* Coluna de escritórios */
.offices-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.office-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.office-location {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.office-detail {
  font-size: 12px;
  color: var(--text-muted);
}

/* Divider e legal */
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copyright {
  font-size: 12px;
  color: var(--text-label);
}

.footer-copyright a {
  color: var(--accent);
  transition: color var(--duration) var(--ease);
}

.footer-copyright a:hover {
  color: #b5ff2a;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 12px;
  color: var(--text-label);
  transition: color var(--duration) var(--ease);
}

.footer-legal a:hover {
  color: var(--text-muted);
}

/* Cookie notice */
.cookie-notice {
  font-size: 12px;
  color: var(--text-label);
}


/* ============================================================
   13. ANIMAÇÕES E SCROLL EFFECTS
   ============================================================ */

/* Elementos com animação ao entrar na viewport.
   Adicionar a classe .reveal ao elemento no HTML.
   O JS em index.html vai adicionar .visible quando aparecer. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Delay escalonado para grupos de elementos */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Animação de entrada do hero */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-tagline   { animation: heroFadeUp 0.7s var(--ease) 0.1s both; }
.hero-headline  { animation: heroFadeUp 0.7s var(--ease) 0.2s both; }
.hero-description { animation: heroFadeUp 0.7s var(--ease) 0.3s both; }
.hero-actions   { animation: heroFadeUp 0.7s var(--ease) 0.4s both; }
.hero-indicator { animation: heroFadeUp 0.7s var(--ease) 0.5s both; }
.hero-visual    { animation: heroFadeUp 0.8s var(--ease) 0.3s both; }


/* ============================================================
   14. RESPONSIVO — BREAKPOINTS
   ============================================================
   
   Breakpoints usados:
   1200px → Large tablet / small desktop
   1024px → Tablet landscape
   768px  → Tablet portrait / mobile grande
   480px  → Mobile padrão
   ============================================================ */

@media (max-width: 1200px) {
  :root {
    --section-py: 100px;
    --section-px: 48px;
  }

  .hero-inner {
    gap: 48px;
  }

  .hero-visual-placeholder {
    width: 400px;
    height: 440px;
  }

  .fronts-grid {
    gap: 16px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 64px;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-description {
    max-width: 580px;
    margin: 0 auto 40px;
  }

  .hero-actions {
    justify-content: center;
  }

  .hero-indicator {
    justify-content: center;
  }

  .hero-visual {
    display: none; /* Ocultar visual em tablet para não poluir */
  }

  .fronts-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fronts-grid .front-card:last-child {
    grid-column: 1 / -1;
    max-width: 420px;
    margin: 0 auto;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card:nth-child(even) {
    border-right: none;
  }

  .service-card {
    border-bottom: 1px solid var(--border) !important;
  }

  .service-card:last-child {
    border-bottom: none !important;
  }

  .work-card {
    grid-template-columns: 1fr;
  }

  .work-visual {
    height: 240px;
    order: -1;
  }

  .proof-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }

  .proof-divider {
    display: none;
  }

  .proof-stat {
    padding: 28px 24px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .proof-stat:nth-child(even) {
    border-right: none;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: 72px;
    --nav-height: 64px;
  }

  .container {
    padding: 0 20px;
  }

  .nav-inner {
    padding: 0 20px;
  }

  /* Mostrar hamburger, esconder nav links */
  .nav-links,
  .nav-cta .btn--outline {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  .hero-headline {
    font-size: 42px;
  }

  .fronts-grid {
    grid-template-columns: 1fr;
  }

  .fronts-grid .front-card:last-child {
    grid-column: auto;
    max-width: 100%;
  }

  .work-info {
    padding: 32px 28px;
  }

  .proof-inner {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-brand {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .footer-legal {
    gap: 16px;
  }

  .hero-stats {
    display: none;
  }
}

@media (max-width: 480px) {
  :root {
    --section-py: 56px;
  }

  .hero-headline {
    font-size: 36px;
  }

  .section-title {
    font-size: 28px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn--lg {
    width: 100%;
  }

  .cta-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .proof-inner {
    grid-template-columns: 1fr;
  }

  .proof-stat {
    border-right: none !important;
  }
}


/* ============================================================
   FIM DO ARQUIVO style.css
   ============================================================
   
   RESUMO DAS CORES QUE VOCÊ PODE QUERER AJUSTAR:
   
   Verde principal:    --accent: #9efc09
   Fundo da página:    --bg-primary: #0a0a0a
   Fundo de cards:     --bg-card: #131313
   Cor do texto body:  --text-body: rgba(255, 255, 255, 0.75)
   Bordas:             --border: rgba(255, 255, 255, 0.08)
   
   FONTES (carregadas no <head> do HTML):
   Display: Space Grotesk
   Body:    DM Sans
   Mono:    JetBrains Mono
   
   Para trocar, atualizar tanto as --font-* variables acima
   quanto os @import no HTML.
   ============================================================ */


/* ============================================================
   ADDITIONS — Studio / Labs / Originals / Contact pages
   Appended to base stylesheet — no conflicts with existing rules
   ============================================================ */

/* ── Shared page hero (inner pages) ─────────────────────────── */
.page-hero {
  padding: calc(var(--nav-height) + 80px) 0 80px;
  background:
    radial-gradient(ellipse 700px 500px at 80% 50%, rgba(158,252,9,0.05) 0%, transparent 65%),
    var(--bg-primary);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 20%, transparent 75%);
  pointer-events: none;
}
.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

/*
 * ─── SECTION BACKGROUND IMAGE SYSTEM ───────────────────────────
 *
 * Any section (.page-hero, .cta-final, or any other) can receive
 * a background image by adding the attribute:
 *
 *   data-bg="/assets/img/your-image.png"
 *
 * The image is applied via CSS using the inline style set by PHP:
 *   style="background-image: url('/assets/img/your-image.png'); ..."
 *
 * Alternatively, use the CSS class modifiers below:
 *   .section-bg-cover    → background-size: cover (fills section)
 *   .section-bg-contain  → background-size: contain
 *   .section-bg-right    → background-position: right center
 *   .section-bg-center   → background-position: center
 *
 * A dark overlay is automatically applied via ::after pseudo-element
 * to maintain text legibility over any background image.
 *
 * To add a bg image to a new section in PHP:
 *   <section class="page-hero section-bg-cover"
 *     style="background-image: url('/assets/img/banner_labs.png');">
 *
 * ──────────────────────────────────────────────────────────────── */

/* Sections with background images — overlay for text legibility */
.page-hero[style*="background-image"],
.cta-final[style*="background-image"],
[class][style*="background-image"] {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Convenience position modifiers */
.section-bg-cover    { background-size: cover !important; }
.section-bg-contain  { background-size: contain !important; background-repeat: no-repeat !important; }
.section-bg-right    { background-position: right center !important; }
.section-bg-left     { background-position: left center !important; }
.section-bg-center   { background-position: center center !important; }
.section-bg-top      { background-position: center top !important; }

/* Dark overlay for page-hero with bg image — always readable */
.page-hero[style*="background-image"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,10,10,0.75) 0%,
    rgba(10,10,10,0.50) 50%,
    rgba(10,10,10,0.30) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* cta-final with bg image — lighter overlay preserving green glow */
.cta-final[style*="background-image"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,10,10,0.82) 0%,
    rgba(10,10,10,0.60) 60%,
    rgba(10,10,10,0.45) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* Ensure page-hero-inner stays above the overlay */
.page-hero[style*="background-image"] .page-hero-inner {
  z-index: 3;
  position: relative;
}

/* Ensure cta-final children stay above overlay */
.cta-final[style*="background-image"] > * {
  position: relative;
  z-index: 1;
}
.page-eyebrow {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.page-h1 {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 24px;
}
.page-lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 620px;
  margin-bottom: 36px;
}

/* ── Work grid (Studio & portfolio) ─────────────────────────── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.work-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
  display: flex;
  flex-direction: column;
}
.work-item:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
}
.work-item-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-elevated);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 11px;
}
.work-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.work-item:hover .work-item-img img {
  transform: scale(1.04);
}
.work-item-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.work-item-area {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.work-item h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.work-item p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 16px;
}
.work-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.work-item-tag {
  font-family: var(--font-display);
  font-size: 10px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-label);
  letter-spacing: 0.04em;
}

/* ── Process steps (Studio) ──────────────────────────────────── */
.process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 56px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.process-step {
  padding: 36px 28px;
  border-right: 1px solid var(--border);
  position: relative;
  background: var(--bg-card);
  transition: background var(--duration) var(--ease);
}
.process-step:last-child { border-right: none; }
.process-step:hover { background: var(--bg-elevated); }
.process-num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-label);
  margin-bottom: 16px;
}
.process-icon {
  font-size: 24px;
  margin-bottom: 16px;
  display: block;
}
.process-step h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.process-step p {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.process-arrow {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: none;
  border-bottom: none;
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
}
.process-step:last-child .process-arrow { display: none; }

/* ── Pricing / packages (Studio) ─────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
  position: relative;
}
.pricing-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
}
.pricing-card.featured {
  border-color: var(--border-accent);
  background: var(--bg-elevated);
}
.pricing-card.featured::before {
  content: 'Most Requested';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 0 0 8px 8px;
  font-family: var(--font-display);
}
.pricing-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  font-family: var(--font-display);
}
.pricing-card h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.pricing-card > p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.5;
}
.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin-bottom: 32px;
}
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.4;
}
.pricing-feature::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Labs asset cards ─────────────────────────────────────────── */
.asset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.asset-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease);
  display: flex;
  flex-direction: column;
  position: relative;
}
.asset-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.asset-img {
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 11px;
  text-align: center;
}
.asset-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.asset-card:hover .asset-img img {
  transform: scale(1.06);
}
.asset-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--accent);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  font-family: var(--font-display);
  z-index: 2;
}
.asset-badge.new { background: var(--accent); }
.asset-badge.coming { background: var(--text-muted); color: var(--bg-primary); }
.asset-body {
  padding: 20px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.asset-engine {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.asset-card h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.asset-card p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
  flex: 1;
  margin-bottom: 16px;
}
.asset-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.asset-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
.asset-price .free { color: var(--accent); }
.asset-specs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.asset-spec {
  font-family: var(--font-display);
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-label);
}

/* ── Featured asset (Labs hero) ─────────────────────────────── */
.asset-hero-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-card);
  margin-top: 56px;
}
.asset-hero-visual {
  background: var(--bg-elevated);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.asset-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.asset-hero-body {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.asset-hero-body .badge { margin-bottom: 20px; }
.asset-hero-body h2 {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 16px;
}
.asset-hero-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 32px;
}
.asset-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

/* ── Originals / IP cards ────────────────────────────────────── */
.ip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  margin-top: 56px;
}
.ip-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 440px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-card);
  margin-bottom: 20px;
  transition: border-color var(--duration) var(--ease);
}
.ip-card.featured {
  border-color: var(--border-accent);
  min-height: 520px;
}
.ip-card:hover {
  border-color: var(--border-accent);
}
.ip-card.reverse { direction: rtl; }
.ip-card.reverse > * { direction: ltr; }
.ip-visual {
  background: var(--bg-elevated);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 12px;
  text-align: center;
}
.ip-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.ip-card:hover .ip-visual img { transform: scale(1.04); }
.ip-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,0.3) 0%, transparent 60%);
  pointer-events: none;
}
.ip-body {
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.ip-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.ip-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}
.ip-body h2 {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.ip-body .ip-genre {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  font-family: var(--font-display);
}
.ip-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-body);
  margin-bottom: 28px;
}
.ip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 32px;
}
.ip-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── VR Experience card ───────────────────────────────────────── */
.vr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.vr-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.vr-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
}
.vr-img {
  aspect-ratio: 16/9;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 11px;
  overflow: hidden;
}
.vr-img img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.vr-body {
  padding: 24px;
}
.vr-body h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.vr-body p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Contact page ─────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  margin-top: 56px;
  align-items: start;
}
.contact-info h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.contact-info p {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 32px;
}
.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 40px;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease);
}
.contact-method:hover {
  border-color: var(--border-accent);
  transform: translateX(4px);
}
.contact-method-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.contact-method-info {
  display: flex;
  flex-direction: column;
}
.contact-method-label {
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.contact-method-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.contact-offices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-office {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.contact-office::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Contact form */
.contact-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 44px;
}
.contact-form h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.contact-form > p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 32px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.04em;
  font-family: var(--font-display);
  text-transform: uppercase;
}
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-primary);
  transition: border-color var(--duration) var(--ease);
  outline: none;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-label);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px rgba(158,252,9,0.06);
}
.form-group select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 36px;
}
.form-group select option { background: var(--bg-secondary); }
/* textarea-specific overrides merged into .form-group textarea above */
.form-submit {
  margin-top: 8px;
}
.form-note {
  font-size: 12px;
  color: var(--text-label);
  margin-top: 12px;
  line-height: 1.5;
}

/* ── Alternating text+visual sections ───────────────────────── */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: var(--section-py) 0;
  border-top: 1px solid var(--border);
}
.split-section.reverse .split-visual { order: -1; }
.split-visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 12px;
  text-align: center;
}
.split-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-text .label { margin-bottom: 16px; }
.split-text h2 {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.split-text p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: 16px;
}
.split-text .btn { margin-top: 12px; }

/* ── Inline Google Fonts import for Inter Tight ─────────────── */

/* ── Responsive additions ────────────────────────────────────── */
@media (max-width: 1024px) {
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .process-step:nth-child(3) { border-right: none; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .asset-hero-card { grid-template-columns: 1fr; }
  .asset-hero-visual { min-height: 280px; aspect-ratio: 16/9; }
  .ip-card { grid-template-columns: 1fr; }
  .ip-card.reverse { direction: ltr; }
  .ip-visual { min-height: 260px; }
  .contact-grid { grid-template-columns: 1fr; }
  .split-section { grid-template-columns: 1fr; gap: 40px; }
  .split-section.reverse .split-visual { order: 0; }
}
@media (max-width: 768px) {
  .process-grid { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .asset-grid { grid-template-columns: 1fr; }
  .vr-grid { grid-template-columns: 1fr; }
  .ip-body { padding: 32px 28px; }
  .contact-form { padding: 32px 24px; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .process-grid { grid-template-columns: 1fr; }
}



/* ============================================================
   ROTHA DIGITAL v3 — Additional Styles
   New sections: CEO quote, Vault store, accent color update
   ============================================================ */

/* Updated accent — #ABF50D from brand document */
:root {
  --accent:       #ABF50D;
  --accent-dim:   rgba(171,245,13,.08);
  --accent-glow:  rgba(171,245,13,.18);
  --border-accent: rgba(171,245,13,.28);
}

/* ── CEO / Founder Quote Section ─────────────────────────── */
.ceo-section {
  padding: var(--section-py) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.ceo-inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}

/* CEO avatar container
   REPLACE: add <img src="assets/rodrigo-photo.jpg"> inside .ceo-avatar
   Recommended photo: 400x400px, square crop, professional */
.ceo-avatar {
  position: relative;
}

.ceo-avatar-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--border-accent);
  display: block;
}

/* Placeholder shown when no photo is available — REMOVE when photo is added */
.ceo-avatar-placeholder {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 3px solid var(--border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.04em;
}

.ceo-accent-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  opacity: .4;
  pointer-events: none;
}

.ceo-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Large opening quote mark */
.ceo-quote-mark {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 800;
  line-height: .6;
  color: var(--accent);
  opacity: .35;
  display: block;
  margin-bottom: -8px;
}

/* EDITAR: quote text — the founder's message to future clients */
.ceo-quote {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.ceo-quote em {
  color: var(--accent);
  font-style: normal;
}

.ceo-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ceo-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .02em;
}

.ceo-role {
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Vault — store-style asset grid ────────────────────────── */

/* Trust strip (icons row below hero) */
.trust-strip {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.trust-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.trust-item .trust-icon {
  font-size: 16px;
  color: var(--accent);
}

/* Categories filter bar */
.categories-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.cat-btn {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s ease;
  text-transform: uppercase;
}

.cat-btn:hover,
.cat-btn.active {
  border-color: var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* Vault asset card — store-style */
.vault-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vault-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}

.vault-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.4);
}

/* Pack preview image
   REPLACE inner span with: <img src="assets/pack-name.jpg" alt="Pack name" loading="lazy"> */
.vault-card-img {
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-label);
  text-align: center;
}

.vault-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.vault-card:hover .vault-card-img img {
  transform: scale(1.05);
}

/* Status badge (New, Best Seller, Coming Soon) */
.pack-status {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 2;
}

.pack-status--new    { background: var(--accent); color: #000; }
.pack-status--seller { background: #f39c12; color: #000; }
.pack-status--soon   { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border); }

.vault-card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault-card-category {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.vault-card h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
  line-height: 1.3;
}

.vault-card-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  flex: 1;
}

/* Pack specs (asset count, engines, textures) */
.pack-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.pack-spec {
  font-family: var(--font-display);
  font-size: 10px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-label);
  letter-spacing: .04em;
}

.vault-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  gap: 12px;
}

.pack-engine-icons {
  display: flex;
  gap: 6px;
}

.engine-tag {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
  letter-spacing: .04em;
}

/* ── Studios — cinematic IP cards ──────────────────────────── */
.studios-hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 16px;
}

/* Roadmap / pipeline timeline */
.roadmap {
  display: flex;
  gap: 0;
  margin-top: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.roadmap-step {
  flex: 1;
  padding: 28px 24px;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  transition: background .2s ease;
  position: relative;
}

.roadmap-step:last-child {
  border-right: none;
}

.roadmap-step:hover {
  background: var(--bg-elevated);
}

.roadmap-num {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--text-label);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.roadmap-step h4 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.roadmap-step p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Active roadmap step */
.roadmap-step.active {
  background: var(--bg-elevated);
  border-color: var(--border-accent);
}

.roadmap-step.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* ── Development Pillars (Studios) ──────────────────────────── */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.pillar-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 20px;
  transition: border-color .2s ease, transform .2s ease;
  text-align: center;
}

.pillar-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
}

.pillar-icon {
  font-size: 28px;
  margin-bottom: 12px;
  display: block;
}

.pillar-card h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.pillar-card p {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Vault hero search bar ──────────────────────────────────── */
.vault-search-bar {
  display: flex;
  gap: 0;
  max-width: 520px;
  margin-top: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-elevated);
  transition: border-color .2s ease;
}

.vault-search-bar:focus-within {
  border-color: var(--border-accent);
}

.vault-search-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 18px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

.vault-search-input::placeholder {
  color: var(--text-label);
}

.vault-search-btn {
  background: var(--accent);
  border: none;
  padding: 0 20px;
  color: #000;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}

.vault-search-btn:hover {
  background: #c5ff30;
}

/* ── Responsive additions ────────────────────────────────────── */
@media (max-width: 1024px) {
  .ceo-inner { grid-template-columns: 160px 1fr; gap: 40px; }
  .vault-grid { grid-template-columns: repeat(2, 1fr); }
  .pillars-grid { grid-template-columns: repeat(3, 1fr); }
  .roadmap { flex-wrap: wrap; }
  .roadmap-step { flex: 1 1 40%; border-bottom: 1px solid var(--border); }
}

@media (max-width: 768px) {
  .ceo-inner { grid-template-columns: 1fr; text-align: center; }
  .ceo-avatar { display: flex; justify-content: center; }
  .ceo-quote-mark { display: none; }
  .vault-grid { grid-template-columns: 1fr; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-inner { gap: 20px; }
  .categories-bar { justify-content: center; }
  .roadmap-step { flex: 1 1 100%; border-right: none; }
}

@media (max-width: 480px) {
  .pillars-grid { grid-template-columns: 1fr 1fr; }
}



/* ============================================================
   ROTHA DIGITAL — Portfolio Pages
   Styles for work.html (gallery) and work-*.html (case study)
   ============================================================ */

/* ── Portfolio gallery filter bar ───────────────────────────
   Same pattern as Vault categories — reuses .cat-btn from v3
   If .cat-btn is already in style.css, no duplication occurs. */
.portfolio-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

/* ── Portfolio card grid ─────────────────────────────────────
   3-column grid with hover that reveals project details.
   Cards are clickable and link to case study pages. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;  /* tight gap — creates the "connected tiles" look */
}

/* Individual portfolio card */
.pf-card {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

/* Featured card spans 2 columns — used for the first/hero project */
.pf-card--featured {
  grid-column: span 2;
  aspect-ratio: 16/7;
}

/* Tall card spans 2 rows */
.pf-card--tall {
  grid-row: span 2;
  aspect-ratio: auto;
}

/* Project image
   REPLACE: placeholder background with actual project image */
.pf-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
  display: block;
}

/* Placeholder shown when no image is available — REMOVE when images are added */
.pf-card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-label);
  text-align: center;
  transition: background .3s ease;
}

.pf-card:hover .pf-card-placeholder {
  background: var(--bg-card);
}

/* Overlay that appears on hover — slides up from bottom */
.pf-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.6) 40%,
    rgba(0,0,0,.1) 70%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity .3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
}

.pf-card:hover .pf-card-overlay {
  opacity: 1;
}

.pf-card:hover .pf-card-img {
  transform: scale(1.04);
}

/* Category label above title */
.pf-card-cat {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .3s ease .05s, opacity .3s ease .05s;
}

.pf-card:hover .pf-card-cat {
  transform: translateY(0);
  opacity: 1;
}

/* Project title */
.pf-card-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -.025em;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 8px;
  transform: translateY(10px);
  opacity: 0;
  transition: transform .3s ease .08s, opacity .3s ease .08s;
}

.pf-card:hover .pf-card-title {
  transform: translateY(0);
  opacity: 1;
}

/* Tag row */
.pf-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  transform: translateY(12px);
  opacity: 0;
  transition: transform .3s ease .12s, opacity .3s ease .12s;
}

.pf-card:hover .pf-card-tags {
  transform: translateY(0);
  opacity: 1;
}

.pf-card-tag {
  font-family: var(--font-display);
  font-size: 10px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 3px;
  color: rgba(255,255,255,.7);
  letter-spacing: .04em;
}

/* "View Project →" arrow that always shows */
.pf-card-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
}

.pf-card:hover .pf-card-arrow {
  opacity: 1;
  transform: scale(1);
}

/* Focus state for keyboard nav */
.pf-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pf-card:focus-visible .pf-card-overlay {
  opacity: 1;
}

/* ── Mosaic layout helper ─────────────────────────────────────
   Alternates card sizes to create visual rhythm.
   Classes applied via data-size attribute in HTML. */
.portfolio-grid[data-layout="mosaic"] .pf-card:nth-child(1) {
  grid-column: span 2;
}
.portfolio-grid[data-layout="mosaic"] .pf-card:nth-child(4) {
  grid-column: span 2;
}

/* ── Work count badge ─────────────────────────────────────── */
.work-count {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  letter-spacing: .04em;
}

/* ── Empty state (when no projects match filter) ────────────── */
.portfolio-empty {
  grid-column: 1 / -1;
  padding: 80px 40px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
}

.portfolio-empty p {
  color: var(--text-muted);
  font-size: 14px;
}


/* ============================================================
   CASE STUDY PAGE — work-*.html
   ============================================================ */

/* ── Case study hero ─────────────────────────────────────────
   Full-bleed image with overlay and project title */
.cs-hero {
  width: 100%;
  min-height: 70vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-top: var(--nav-height);
  overflow: hidden;
  background: var(--bg-elevated);
}

/* Hero image
   REPLACE: add background-image or <img> inside .cs-hero */
.cs-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Placeholder for hero image */
.cs-hero-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 12px;
  text-align: center;
}

/* Gradient overlay on the hero image */
.cs-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10,10,10,.95) 0%,
    rgba(10,10,10,.5) 40%,
    rgba(10,10,10,.15) 100%
  );
  z-index: 1;
}

/* Hero content — sits on top of overlay */
.cs-hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 0;
  width: 100%;
}

/* Breadcrumb nav inside hero */
.cs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-bottom: 24px;
}

.cs-breadcrumb a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .2s ease;
}

.cs-breadcrumb a:hover {
  color: var(--accent);
}

.cs-breadcrumb-sep {
  color: rgba(255,255,255,.25);
}

/* Project meta (category + year) */
.cs-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.cs-category {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.cs-year {
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(255,255,255,.4);
  letter-spacing: .06em;
}

/* Main project title in hero */
.cs-title {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.0;
  color: #fff;
  margin-bottom: 20px;
}

/* Subtitle / one-line positioning statement */
.cs-subtitle {
  font-size: clamp(15px, 1.8vw, 20px);
  color: rgba(255,255,255,.65);
  line-height: 1.5;
  max-width: 600px;
}

/* ── Project summary bar ─────────────────────────────────────
   Key metrics row below the hero */
.cs-summary-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.cs-summary-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  divide: var(--border);
}

.cs-summary-item {
  padding: 28px 32px;
  border-right: 1px solid var(--border);
}

.cs-summary-item:last-child {
  border-right: none;
}

.cs-summary-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block;
}

.cs-summary-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -.01em;
  line-height: 1.3;
}

/* ── Case study body ─────────────────────────────────────────
   Main content area — alternates between text and visuals */
.cs-body {
  padding: var(--section-py) 0;
}

/* Two-column layout: narrow text + wide visual */
.cs-two-col {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 80px;
  align-items: start;
  margin-bottom: 80px;
}

.cs-two-col.reverse {
  grid-template-columns: 1.6fr 1fr;
}

.cs-two-col.reverse .cs-col-text {
  order: 2;
}

.cs-two-col.reverse .cs-col-visual {
  order: 1;
}

/* Section label above text */
.cs-section-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.cs-section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--accent);
}

.cs-col-text h2 {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.cs-col-text p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
  margin-bottom: 16px;
}

.cs-col-text p:last-child {
  margin-bottom: 0;
}

/* Visual placeholder in case study body */
.cs-col-visual {
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 11px;
  text-align: center;
}

.cs-col-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Full-width image break
   Use between sections to break text rhythm with a strong visual */
.cs-full-img {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0 0 80px;
  aspect-ratio: 21/9;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 11px;
  text-align: center;
}

.cs-full-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Image caption */
.cs-img-caption {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 10px;
  letter-spacing: .04em;
  text-align: center;
}

/* ── Decision cards — key design decisions ───────────────────
   Numbered cards explaining why each creative choice was made */
.cs-decisions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 80px;
}

.cs-decision-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: border-color .2s ease, transform .2s ease;
}

.cs-decision-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
}

.cs-decision-num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: block;
}

.cs-decision-card h4 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 10px;
  color: var(--text-primary);
}

.cs-decision-card p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ── Results / outcomes ───────────────────────────────────────
   High-impact numbers or qualitative outcomes */
.cs-results {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 56px;
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.cs-results-text h2 {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.cs-results-text p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-body);
}

.cs-results-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.cs-result-item {
  text-align: center;
}

.cs-result-value {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -.05em;
  color: var(--text-primary);
  line-height: 1;
  display: block;
}

.cs-result-value .accent {
  color: var(--accent);
}

.cs-result-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 6px;
  display: block;
}

/* ── Tools used row ───────────────────────────────────────────
   Horizontal strip of tool badges */
.cs-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 80px;
}

.cs-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  letter-spacing: .02em;
  transition: border-color .2s ease;
}

.cs-tool-badge:hover {
  border-color: var(--border-accent);
  color: var(--accent);
}

/* ── Next / Prev project navigation ──────────────────────────
   Large navigation at bottom of case study */
.cs-nav-projects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-top: 80px;
  border-top: 1px solid var(--border);
}

.cs-nav-project {
  padding: 36px 32px;
  background: var(--bg-card);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background .2s ease;
  border-right: 1px solid var(--border);
}

.cs-nav-project:last-child {
  border-right: none;
  align-items: flex-end;
  text-align: right;
}

.cs-nav-project:hover {
  background: var(--bg-elevated);
}

.cs-nav-direction {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cs-nav-project:last-child .cs-nav-direction {
  flex-direction: row-reverse;
}

.cs-nav-project-cat {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cs-nav-project-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-primary);
  line-height: 1.2;
}

/* ── Image gallery strip ─────────────────────────────────────
   Horizontal scrollable row of project images */
.cs-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 80px;
}

.cs-gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 11px;
  text-align: center;
}

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

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


/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid[data-layout="mosaic"] .pf-card:nth-child(1),
  .portfolio-grid[data-layout="mosaic"] .pf-card:nth-child(4) {
    grid-column: span 1;
  }
  .pf-card--featured { grid-column: span 1; aspect-ratio: 4/3; }
  .cs-two-col,
  .cs-two-col.reverse { grid-template-columns: 1fr; gap: 40px; }
  .cs-two-col.reverse .cs-col-text,
  .cs-two-col.reverse .cs-col-visual { order: unset; }
  .cs-decisions { grid-template-columns: 1fr 1fr; }
  .cs-results { grid-template-columns: 1fr; gap: 32px; }
  .cs-summary-inner { grid-template-columns: repeat(2, 1fr); }
  .cs-summary-item:nth-child(2) { border-right: none; }
  .cs-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .portfolio-grid { grid-template-columns: 1fr; gap: 2px; }
  .pf-card { aspect-ratio: 4/3; }
  /* Always show overlay on mobile — no hover */
  .pf-card-overlay { opacity: 1; }
  .pf-card-cat,
  .pf-card-title,
  .pf-card-tags,
  .pf-card-arrow { opacity: 1; transform: none; }
  .cs-hero { min-height: 50vh; }
  .cs-decisions { grid-template-columns: 1fr; }
  .cs-results { padding: 32px 24px; }
  .cs-results-stats { grid-template-columns: 1fr 1fr; }
  .cs-nav-projects { grid-template-columns: 1fr; }
  .cs-nav-project:last-child { border-right: none; text-align: left; align-items: flex-start; }
  .cs-nav-project:last-child .cs-nav-direction { flex-direction: row; }
  .cs-summary-inner { grid-template-columns: 1fr 1fr; }
  .cs-gallery { grid-template-columns: 1fr; }
}


/* ============================================================
   ROTHA VAULT — Store-specific styles
   vault-packs.html + vault-[pack].html
   ============================================================ */

/* ============================================================
   ROTHA VAULT — Store CSS
   vault-packs.html + vault-[pack].html
   All classes prefixed with .vp- (vault product)
   ============================================================ */

/* ── Vault store hero with search ─────────────────────────── */
.vault-store-hero {
  padding: calc(var(--nav-height) + 72px) 0 64px;
  background:
    radial-gradient(ellipse 700px 500px at 100% 60%, rgba(158,252,9,.06) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 0% 30%, rgba(158,252,9,.03) 0%, transparent 60%),
    var(--bg-primary);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.vault-store-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 20%, transparent 75%);
  pointer-events: none;
}

.vault-store-hero-inner {
  position: relative;
  z-index: 2;
}

.vault-store-hero h1 {
  font-size: clamp(44px, 5.5vw, 80px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.0;
  margin-bottom: 20px;
}

.vault-store-hero p {
  font-size: 17px;
  color: var(--text-body);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.65;
}

/* Search bar in hero */
.vault-search-wrap {
  display: flex;
  gap: 0;
  max-width: 560px;
  margin: 0 auto 48px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.vault-search-wrap:focus-within {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px rgba(158,252,9,.07);
}

.vault-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  color: var(--text-muted);
}

.vault-search-field {
  flex: 1;
  background: transparent;
  border: none;
  padding: 15px 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

.vault-search-field::placeholder { color: var(--text-label); }

.vault-search-submit {
  background: var(--accent);
  border: none;
  padding: 0 24px;
  color: #000;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
  white-space: nowrap;
}

.vault-search-submit:hover { background: #c0ff30; }

/* Category pill stats below search */
.vault-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.vault-hero-stat {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .04em;
}

.vault-hero-stat strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ── Featured carousel ────────────────────────────────────── */
.vault-carousel-section {
  padding: 64px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.vault-carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
}

.vault-carousel-track-wrap {
  position: relative;
}

/* Carousel track — scrollable container */
.vault-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  cursor: grab;
  user-select: none;
}

.vault-carousel-track::-webkit-scrollbar { display: none; }
.vault-carousel-track.dragging { cursor: grabbing; }

/* Edge fade gradients */
.vault-carousel-track-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 4px;
  width: 80px;
  background: linear-gradient(to left, var(--bg-secondary), transparent);
  pointer-events: none;
  z-index: 2;
}

/* Individual carousel card */
.vault-fc {
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, transform .25s ease;
}

.vault-fc:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
}

.vault-fc-img {
  aspect-ratio: 16/10;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-label);
  font-family: var(--font-display);
  font-size: 11px;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.vault-fc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.vault-fc:hover .vault-fc-img img { transform: scale(1.05); }

.vault-fc-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.badge-new    { background: var(--accent); color: #000; }
.badge-seller { background: #f39c12; color: #000; }
.badge-soon   { background: rgba(255,255,255,.12); color: var(--text-muted); }

.vault-fc-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }

.vault-fc-cat {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.vault-fc h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.3;
}

.vault-fc p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 14px;
}

.vault-fc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vault-fc-engines {
  display: flex;
  gap: 4px;
}

.veng {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-label);
  letter-spacing: .04em;
}

/* Carousel nav arrows */
.vault-carousel-nav {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: flex-end;
}

.vault-carousel-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s ease;
}

.vault-carousel-btn:hover {
  border-color: var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent);
}

/* ── Store sidebar + grid layout ────────────────────────── */
.vault-store-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  padding: var(--section-py) 0;
  align-items: start;
}

/* Sticky sidebar with filters */
.vault-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}

.vault-sidebar-section {
  margin-bottom: 32px;
}

.vault-sidebar-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
  display: block;
}

/* Filter checkboxes */
.vault-filter-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vault-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.vault-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-body);
  cursor: pointer;
  transition: color .2s ease;
}

.vault-filter-label:hover { color: var(--accent); }

.vault-filter-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.vault-filter-count {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-label);
  letter-spacing: .04em;
}

/* Sort bar above grid */
.vault-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.vault-result-count {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-muted);
}

.vault-result-count strong { color: var(--text-primary); }

.vault-sort-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 32px 8px 12px;
  color: var(--text-body);
  font-family: var(--font-display);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  transition: border-color .2s ease;
}

.vault-sort-select:focus { border-color: var(--border-accent); }
.vault-sort-select option { background: var(--bg-secondary); }

/* Store product grid */
.vault-store-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Store product card */
.vp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease, box-shadow .2s ease;
}

.vp-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}

.vp-card-img {
  aspect-ratio: 4/3;
  background: var(--bg-elevated);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-label);
  text-align: center;
}

.vp-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.vp-card:hover .vp-card-img img { transform: scale(1.05); }

.vp-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 2;
}

.vp-card-body { padding: 16px; flex: 1; display: flex; flex-direction: column; }

.vp-card-cat {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

.vp-card h3 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.vp-card p {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 12px;
}

.vp-card-specs {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.vp-spec {
  font-family: var(--font-display);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-label);
}

.vp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

.vp-engines { display: flex; gap: 4px; }

/* ── Pack product page (sales landing) ───────────────────── */

/* Sticky buy sidebar on product page */
.vpack-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: start;
  padding-top: 40px;
  padding-bottom: 80px;
}

.vpack-main { min-width: 0; }

/* Image carousel */
.vpack-carousel {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-elevated);
  margin-bottom: 16px;
  position: relative;
}

.vpack-carousel-stage {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
}

.vpack-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-label);
  text-align: center;
  opacity: 0;
  transition: opacity .4s ease;
  background: var(--bg-elevated);
}

.vpack-slide.active { opacity: 1; }

.vpack-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carousel prev/next buttons */
.vpack-carousel-prev,
.vpack-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  z-index: 10;
  transition: background .2s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.vpack-carousel-prev { left: 16px; }
.vpack-carousel-next { right: 16px; }
.vpack-carousel-prev:hover,
.vpack-carousel-next:hover { background: rgba(158,252,9,.2); border-color: var(--border-accent); }

/* Slide counter */
.vpack-carousel-counter {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-family: var(--font-display);
  font-size: 11px;
  color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.5);
  padding: 3px 10px;
  border-radius: 100px;
  z-index: 10;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* Thumbnail strip */
.vpack-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.vpack-thumbs::-webkit-scrollbar { display: none; }

.vpack-thumb {
  flex: 0 0 80px;
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--text-label);
  text-align: center;
  transition: border-color .2s ease;
  flex-shrink: 0;
}

.vpack-thumb.active { border-color: var(--accent); }
.vpack-thumb:hover { border-color: var(--border-accent); }

.vpack-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pack main content area */
.vpack-content-header {
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}

.vpack-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.vpack-breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color .2s ease; }
.vpack-breadcrumb a:hover { color: var(--accent); }

.vpack-h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  margin-bottom: 12px;
}

.vpack-tagline {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 560px;
  margin-bottom: 24px;
}

/* Spec pills row */
.vpack-specs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vpack-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-body);
}

.vpack-spec-pill .icon { color: var(--accent); font-size: 12px; }

/* ── Sticky buy box (right column) ─────────────────────────
   This is the conversion engine of the page.
   Position sticky keeps it visible as user scrolls. */
.vpack-buy-box {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.vpack-buy-box-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}

.vpack-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.vpack-price {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text-primary);
}

.vpack-price-note {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .04em;
}

.vpack-license-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}

.vpack-buy-box-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }

/* Primary CTA — get the pack */
.btn-vault-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}

.btn-vault-primary:hover {
  background: #c0ff30;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(158,252,9,.25);
}

/* Secondary CTA — request / enquire */
.btn-vault-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 24px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}

.btn-vault-secondary:hover {
  border-color: var(--border-accent);
  background: var(--accent-dim);
}

/* Guarantee strip */
.vpack-guarantee {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(158,252,9,.06);
  border: 1px solid var(--border-accent);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-body);
  line-height: 1.45;
}

.vpack-guarantee-icon {
  font-size: 20px;
  flex-shrink: 0;
}

/* Includes checklist */
.vpack-includes {
  padding: 0 28px 24px;
}

.vpack-includes-title {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: block;
}

.vpack-includes-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vpack-include-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.4;
}

.vpack-include-item::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Content sections (pack description page) ────────────── */
.vpack-section {
  margin-bottom: 56px;
}

.vpack-section-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.vpack-section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--accent);
}

.vpack-section h2 {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  margin-bottom: 16px;
}

.vpack-section p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
  margin-bottom: 14px;
}

/* Asset count grid */
.vpack-counts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.vpack-count-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  transition: border-color .2s ease;
}

.vpack-count-card:hover { border-color: var(--border-accent); }

.vpack-count-num {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--accent);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}

.vpack-count-label {
  font-family: var(--font-display);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Scene gallery (horizontal scroll) */
.vpack-gallery-scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.vpack-gallery-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-label);
  text-align: center;
  cursor: pointer;
  transition: transform .3s ease;
}

.vpack-gallery-item:hover { transform: scale(1.02); }

.vpack-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Compatible engines strip */
.vpack-compat {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.vpack-compat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-body);
  transition: border-color .2s ease;
}

.vpack-compat-badge:hover { border-color: var(--border-accent); color: var(--accent); }

/* Related packs at the bottom */
.vpack-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .vault-store-layout { grid-template-columns: 200px 1fr; }
  .vault-store-grid { grid-template-columns: repeat(2, 1fr); }
  .vpack-layout { grid-template-columns: 1fr 320px; gap: 40px; }
}

@media (max-width: 1024px) {
  .vault-store-layout { grid-template-columns: 1fr; }
  .vault-sidebar { position: static; }
  .vault-store-grid { grid-template-columns: repeat(3, 1fr); }
  .vpack-layout { grid-template-columns: 1fr; }
  .vpack-buy-box { position: static; }
  .vpack-counts-grid { grid-template-columns: repeat(2, 1fr); }
  .vpack-gallery-scroll { grid-template-columns: repeat(2, 1fr); }
  .vpack-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .vault-store-grid { grid-template-columns: 1fr 1fr; }
  .vault-carousel-track { padding-right: 20px; }
  .vault-fc { flex: 0 0 280px; }
  .vpack-counts-grid { grid-template-columns: repeat(2, 1fr); }
  .vpack-gallery-scroll { grid-template-columns: 1fr; }
  .vpack-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .vault-store-grid { grid-template-columns: 1fr; }
}

/* [v9] Legacy authoritative-fix block removed — superseded by MOBILE MENU v9. */

/* Body lock when menu is open (prevents background scroll) */
body.menu-open { overflow: hidden; }

/* ============================================================
   LEGAL PAGES (privacy.php / cookies.php)
   ============================================================ */
.legal-body { font-size: 15px; line-height: 1.75; color: var(--text-body); }
.legal-body h2 {
  font-size: 18px; font-weight: 700; letter-spacing: -.01em;
  margin: 36px 0 12px; color: var(--text-primary);
}
.legal-body p { margin-bottom: 14px; }
.legal-body ul { margin: 0 0 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.legal-body li { list-style: disc; }
.legal-body a { color: var(--accent); text-decoration: underline; }
.legal-updated {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
  padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 28px;
}
.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 13px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border: 1px solid var(--border); }
.legal-table th { background: var(--bg-secondary); color: var(--text-muted); font-weight: 600; }
.legal-table code { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }

/* ============================================================
   COOKIE CONSENT BANNER — granular (LGPD / GDPR / CCPA)
   ============================================================ */
.cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  max-width: 760px; margin: 0 auto;
  background: rgba(15,15,15,.98);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  display: none; flex-direction: column; gap: 16px;
  box-shadow: 0 16px 56px rgba(0,0,0,.55);
}
.cookie-banner.show { display: flex; animation: cookieUp .4s ease; }
@keyframes cookieUp { from { opacity:0; transform: translateY(16px);} to { opacity:1; transform:none; } }
.cookie-main { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cookie-text { flex: 1; min-width: 240px; }
.cookie-text strong { display:block; font-family: var(--font-display); font-size: 14px; color: var(--text-primary); margin-bottom: 4px; }
.cookie-text p { font-size: 12.5px; color: var(--text-body); line-height: 1.55; margin: 0; }
.cookie-text a { color: var(--accent); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  padding: 9px 18px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border);
  background: transparent; color: var(--text-body); transition: all .15s; white-space: nowrap;
}
.cookie-btn:hover { border-color: rgba(255,255,255,.3); color: var(--text-primary); }
.cookie-btn.is-open { border-color: var(--accent); color: var(--accent); }
.cookie-btn--accept { background: var(--accent); color: #000; border-color: var(--accent); }
.cookie-btn--accept:hover { background: #b5ff2a; color:#000; }
.cookie-prefs { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.cookie-cat { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cookie-cat-info { flex: 1; }
.cookie-cat-name { display:block; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.cookie-cat-desc { display:block; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin-top: 2px; }
.cookie-prefs-actions { display: flex; justify-content: flex-end; }
.cookie-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.cookie-switch input { opacity: 0; width: 0; height: 0; }
.cookie-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--bg-elevated, #1e1e1e); border: 1px solid var(--border);
  border-radius: 24px; transition: .2s;
}
.cookie-slider::before {
  content:''; position:absolute; height: 16px; width: 16px; left: 3px; bottom: 3px;
  background: var(--text-muted); border-radius: 50%; transition: .2s;
}
.cookie-switch input:checked + .cookie-slider { background: var(--accent); border-color: var(--accent); }
.cookie-switch input:checked + .cookie-slider::before { transform: translateX(18px); background: #000; }
.cookie-switch.is-locked { opacity: .7; }
.cookie-switch.is-locked .cookie-slider { cursor: not-allowed; }
.cookie-reopen {
  position: fixed; left: 16px; bottom: 16px; z-index: 8999;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(15,15,15,.95); border: 1px solid var(--border);
  font-size: 18px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.cookie-reopen:hover { border-color: var(--accent); transform: translateY(-2px); }
@media (max-width: 560px) {
  .cookie-main { flex-direction: column; align-items: stretch; }
  .cookie-actions { flex-direction: column; }
  .cookie-btn { width: 100%; }
}


/* [v9] v7 additive hook removed — superseded by MOBILE MENU v9. */

/* ============================================================
   MOBILE MENU v9 — independent off-canvas panel
   ------------------------------------------------------------
   Self-contained styles for #mobile-menu (partials/nav.php).
   Uses ONLY .mnav-* selectors — zero overlap with .navbar rules,
   immune to legacy CSS and stale caches.
   UX/UI (#03): every link is a >=48px touch target (WCAG 2.5.8 /
   Material guidelines) with full-width hit areas.
   Cross-browser: transform+opacity transitions (GPU-friendly),
   -webkit- prefixes for Safari/iOS.
   ============================================================ */
.mnav-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,.6);
  opacity: 0; transition: opacity .25s ease;
}
.mnav-backdrop.open { opacity: 1; }

.mnav {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1101;
  width: min(320px, 88vw);
  background: #0d0d0d;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  padding: 18px 20px 24px;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  transition: -webkit-transform .28s cubic-bezier(.22,.68,0,1);
  transition: transform .28s cubic-bezier(.22,.68,0,1);
  transition: transform .28s cubic-bezier(.22,.68,0,1), -webkit-transform .28s cubic-bezier(.22,.68,0,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mnav.open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.mnav-logo { height: 28px; width: auto; }
.mnav-close {
  /* 48x48 touch target (#03) */
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-body); font-size: 30px; line-height: 1;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.mnav-close:hover { color: var(--accent); }

.mnav-links { display: flex; flex-direction: column; padding: 12px 0; flex: 1; }
.mnav-links a {
  /* Full-width, min 48px tall touch target (#03) */
  display: flex; align-items: center;
  min-height: 48px; padding: 12px 8px;
  font-size: 17px; font-weight: 600;
  color: var(--text-body);
  border-bottom: 1px solid var(--border2, rgba(255,255,255,.05));
  -webkit-tap-highlight-color: transparent;
}
.mnav-links a:last-child { border-bottom: none; }
.mnav-links a:hover, .mnav-links a.active { color: var(--accent); }

.mnav-cta { padding-top: 12px; }
.mnav-cta .btn {
  width: 100%; justify-content: center;
  min-height: 48px;             /* touch target (#03) */
}

/* Lock background scroll while the panel is open */
body.mnav-lock { overflow: hidden; }

/* The panel is mobile-only; never shows on desktop */
@media (min-width: 769px) {
  .mnav, .mnav-backdrop { display: none !important; }
}

/* ── Touch-target upsizing for other mobile UI (#03) ─────────── */
@media (max-width: 768px) {
  /* Footer links and legal links — comfortable tap areas */
  .footer-nav-list a,
  .footer-legal a {
    display: inline-block;
    padding: 10px 4px;
    min-height: 44px;
    line-height: 24px;
  }
  /* Footer social icons — enlarge to 44px circles */
  .social-link { width: 44px; height: 44px; }
  /* Cookie banner buttons — min 48px tall on touch */
  .cookie-btn { min-height: 48px; }
  .cookie-reopen { width: 48px; height: 48px; }
  /* General buttons gain comfortable height on mobile */
  .btn { min-height: 46px; }
}