/* --- STYLE BLOCK 1 --- */
:root{
    --bg: #000000;
    --violet-deep: #241236;
    --indigo: #2a1f5e;
    --primary-accent: #009eed;
    --blue-cold: #4fd1ff;
    --eye-white: #ffffff;
    --bruno-scale: 1; /* For 4K / Ultrawide */
  }

  /* Responsive Bruno Scaling */
  @media (max-width: 1920px) { :root { --bruno-scale: 0.82; } }
  @media (max-width: 1440px) { :root { --bruno-scale: 0.75; } }
  @media (max-width: 1024px) { :root { --bruno-scale: 0.65; } }
  @media (max-width: 768px) { :root { --bruno-scale: 0.50; } }
  @media (max-width: 480px) { :root { --bruno-scale: 0.40; } }
  
  /* Height constraints for landscape/laptops */
  @media (max-height: 900px) and (min-width: 1025px) { :root { --bruno-scale: 0.75; } }
  @media (max-height: 800px) and (min-width: 1025px) { :root { --bruno-scale: 0.65; } }

  * { box-sizing: border-box; }
  h1, h2, h3, h4, h5, h6, b, strong { font-weight: 500 !important; }

  html, body{
    margin:0; padding:0; width:100%;
    background: var(--bg);
    touch-action: pan-y;
    font-family: 'ITC Avant Garde Gothic Std', sans-serif;
  }
  
  body {
    overflow-x: clip;
  }

  
  /* ============================================================
     NEW BRUNO VIDEO STYLES
     ============================================================ */
  .video-wrapper {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 750px; /* Fine-tuned for exact eye fit */
    height: 750px;
    pointer-events: none;
    z-index: -1; /* Keep it behind the eyes */
  }

  #bruno-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    mix-blend-mode: screen; 
    filter: brightness(1.05) contrast(1.1) saturate(1.1);
  }

  .breathing-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 92%; height: 92%;
    border-radius: 50%;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: transparent;
    z-index: 2; 
    pointer-events: none;
    animation: ringBreathe 4s ease-in-out infinite;
  }

  @keyframes ringBreathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.04); opacity: 1.0; }
  }

  #bruno-canvas-holder { display: none !important; }

  /* ============================================================
     BRUNO ROOT ΓÇö everything lives inside this isolated stage
     ============================================================ */
  #bruno-stage{
    position: relative;
    width: 100%;
    height: calc(100vh - 4.5rem); /* Fit hero + ticker exactly in 1 screen */
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
  }

  #bruno-canvas-holder{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index: 10;
  }

  #bruno-canvas-holder canvas{
    display:block;
    width:100% !important;
    height:100% !important;
  }

  /* ============================================================
     BRUNO FLOAT GROUP ΓÇö the vertical bob transform is applied here
     so that eyes + shadow + (visually) the WebGL orb stay in sync
     ============================================================ */
  #bruno-float-group{
    position: relative;
    width:0;
    height:0;
    opacity: 0; /* HIDE UNTIL VIDEO LOADS */
    transition: opacity 0.3s ease-in-out;
    pointer-events:none;
    will-change: transform;
    z-index: 20;
    transform: scale(var(--bruno-scale, 1));
  }

  /* ============================================================
     BRUNO EYES ΓÇö independently animatable DOM elements
     Each eye exposes CSS custom properties so future modules can
     drive expressions without touching structure:
       --eye-h, --eye-w, --eye-rot, --eye-curve,
       --eye-glow, --eye-opacity
     Cursor-tracking ("gaze") lives in its own set of variables,
     one pair per eye (--gaze-left-x/y, --gaze-right-x/y, and
     --gaze-rot-left/right) so each eye aims at the cursor
     independently -- real servo-eye tracking rather than both
     eyes sliding as one block -- while still composing cleanly
     with future expression control on --eye-rot-*.
     ============================================================ */
  .bruno-eye{
    position:absolute;
    top:50%;
    width: var(--eye-width, 110px);
    height: var(--eye-height, 135px);
    background: var(--eye-white);
    border-radius: 60px; /* Cute chubby oval shape */
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,0.8);
    opacity: var(--eye-opacity, 1);
    transform-origin: center;
    transition: border-radius 0.2s ease, box-shadow 0.2s ease;
  }
  
  .eyes-happy .bruno-eye {
    border-radius: 60px 60px 18px 18px !important;
  }

  #eye-left{
    right: var(--eye-distance, 75px);
    transform: translate(50%,-50%) translate(var(--gaze-left-x, 0px), var(--gaze-left-y, 0px))
      rotate(var(--eye-rot-left, 0deg)) rotate(var(--gaze-rot-left, 0deg))
      scaleY(calc(var(--eye-scaleY, 1) * var(--gaze-scale-y, 1))) scaleX(var(--eye-scaleX, 1));
  }
  #eye-right{
    left: var(--eye-distance, 75px);
    transform: translate(-50%,-50%) translate(var(--gaze-right-x, 0px), var(--gaze-right-y, 0px))
      rotate(var(--eye-rot-right, 0deg)) rotate(var(--gaze-rot-right, 0deg))
      scaleY(calc(var(--eye-scaleY, 1) * var(--gaze-scale-y, 1))) scaleX(var(--eye-scaleX, 1));
  }

  /* ============================================================
     BRUNO ENERGY SHADOW ΓÇö soft floating light beneath the orb
     ============================================================ */
  #bruno-shadow{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: 35vh; /* Places it precisely below the 3D sphere radius (which is ~32.6vh) */
    width: 31.25rem;
    height: 5rem; /* Taller for a softer, broader reflection */
    transform: translate(-50%, -50%) scale(var(--bruno-scale, 1));
    background: radial-gradient(ellipse at center,
      rgba(var(--cycle-r, 0), var(--cycle-g, 200), var(--cycle-b, 255), 0.5) 0%,
      rgba(var(--cycle-r, 0), var(--cycle-g, 200), var(--cycle-b, 255), 0.15) 50%,
      rgba(0,0,0,0) 80%);
    filter: blur(1.5rem); /* Heavy blur for a very soft, diffused look */
    pointer-events:none;
    z-index: 5;
    will-change: transform, opacity;
  }

  /* ============================================================
     Zzz PARTICLES (MODULE 09)
     ============================================================ */
  .zzz-particle {
    position: absolute;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-family: 'ITC Avant Garde Gothic Std', sans-serif;
    pointer-events: none;
    z-index: 150;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: zzzDrift linear forwards;
  }
  
  /* ============================================================
     THINKING BUBBLE
     ============================================================ */
  .thinking-bubble {
    position: absolute;
    top: calc(50% - 34vh);
    left: calc(50% - 58vh);
    background: rgba(15, 15, 18, 0.95) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
    border-radius: 12px !important;
    padding: 1.2rem !important;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: auto;
    z-index: 100;
    width: 24rem !important;
    max-width: 90vw !important;
    color: #e4e4e7;
}
  
  .thinking-bubble.active {
    opacity: 1;
    transform: scale(1);
  }

  #bruno-thinking-bubble.is-typing #thinking-text {
    display: none !important;
  }
  #bruno-thinking-bubble.is-typing #thinking-dots {
    display: flex !important;
  }
  
  #bruno-thinking-bubble.is-thinking #thinking-text {
    display: flex !important;
    flex-direction: column;
    width: max-content;
    max-width: 20rem;
    text-align: left;
  }
  #bruno-thinking-bubble.is-thinking #thinking-dots {
    display: none !important;
  }

  /* Cute little tail for the bubble - hidden as requested to keep it a clean floating card */
  .thinking-bubble::after,
  .thinking-bubble::before {
    display: none;
  }

  .thinking-bubble-header {
    display: none;
  }
  
  .thinking-bubble-text {
    color: #202020;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.45;
    margin: 0;
  }
  
  .thinking-bubble-text b, .thinking-bubble-text strong {
    font-weight: 600;
    color: #000000;
  }

  /* Proactive variant (removed blue gradient to keep it clean and white) */
  .thinking-bubble.proactive {
    /* No overrides needed, just use the white base style */
  }
  .thinking-bubble.proactive::after,
  .thinking-bubble.proactive::before {
    background: #ffffff;
    border: none;
  }

  .thinking-dots-container {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .thinking-dots-container .dot {
    width: 0.5rem;
    height: 0.5rem;
    background: #fff;
    border-radius: 50%;
    animation: thinkingDot 1.2s infinite ease-in-out;
  }
  .thinking-dots-container .dot:nth-child(1) { animation-delay: 0s; }
  .thinking-dots-container .dot:nth-child(2) { animation-delay: 0.2s; }
  .thinking-dots-container .dot:nth-child(3) { animation-delay: 0.4s; }

  @keyframes thinkingDot {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(-4px); opacity: 1; }
  }

  @keyframes zzzDrift {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
      opacity: 1;
      transform: translate(calc(-50% + 1.25rem), calc(-50% - 2.5rem)) scale(1);
    }
    50% {
      transform: translate(calc(-50% - 1.875rem), calc(-50% - 5.625rem)) scale(1.2);
    }
    80% {
      opacity: 0.8;
      transform: translate(calc(-50% + 0.9375rem), calc(-50% - 8.75rem)) scale(1.4);
    }
    100% {
      opacity: 0;
      transform: translate(calc(-50% - 0.625rem), calc(-50% - 11.25rem)) scale(1.5);
    }
  }
  
  @keyframes jumpExcited {
    0% { margin-top: 0px; }
    20% { margin-top: -45px; }
    40% { margin-top: 0px; }
    60% { margin-top: -20px; }
    80% { margin-top: 0px; }
    100% { margin-top: 0px; }
  }
  .jump-excited {
    animation: jumpExcited 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* Respect reduced motion preference at the CSS layer too */
  @media (prefers-reduced-motion: reduce){
    #bruno-float-group{ transition:none; }
  }

  #main-content-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 55% 45%;
    z-index: 100;
    pointer-events: none;
  }

  /* ============================================================
     VOICE AI UI (MIC & BUBBLE)
     ============================================================ */
  .bruno-mic-btn {
    width: auto;
    align-self: flex-start;
    height: 2.25rem;
    border-radius: 1.125rem;
    background: rgba(15, 15, 20, 0.9);
    border: 1px solid rgba(138, 43, 226, 0.5); /* Purple border */
    box-shadow: 0 0 0.9375rem rgba(138, 43, 226, 0.3), inset 0 0 0.625rem rgba(138, 43, 226, 0.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem 0 0.875rem;
    cursor: pointer;
    z-index: 100;
    transition: all 0.3s ease;
    backdrop-filter: blur(0.3125rem);
    pointer-events: auto;
    margin-bottom: 1rem;
  }
  .mic-wave-icon {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 0.875rem;
  }
  .mic-wave-icon span {
    display: block;
    width: 3px;
    border-radius: 1.5px;
    background: #009eed;
    animation: idleWave 1.5s infinite ease-in-out;
  }
  .mic-wave-icon span:nth-child(1) { height: 4px; animation-delay: 0.0s; }
  .mic-wave-icon span:nth-child(2) { height: 0.5rem; animation-delay: 0.2s; }
  .mic-wave-icon span:nth-child(3) { height: 0.75rem; background: #6a5acd; animation-delay: 0.4s; }
  .mic-wave-icon span:nth-child(4) { height: 0.5rem; animation-delay: 0.6s; }
  .mic-wave-icon span:nth-child(5) { height: 4px; animation-delay: 0.8s; }
  
  @keyframes idleWave {
    0%, 100% { transform: scaleY(0.8); opacity: 0.7; }
    50% { transform: scaleY(1.1); opacity: 1; }
  }

  .mic-btn-text {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .mic-btn-arrow {
    width: 0.875rem;
    height: 0.875rem;
    color: #009eed;
    transition: transform 0.3s ease;
  }
  .bruno-mic-btn:hover {
    box-shadow: 0 0 1.5625rem rgba(138, 43, 226, 0.6), inset 0 0 0.9375rem rgba(138, 43, 226, 0.2);
    border-color: rgba(138, 43, 226, 0.9);
  }
  .bruno-mic-btn:hover .mic-btn-arrow {
    transform: translateX(3px);
  }
  .bruno-mic-btn.listening,
  .bruno-mic-btn.speaking {
    border-color: #ff4d4d;
    box-shadow: 0 0 1.5625rem rgba(255, 77, 77, 0.6);
  }
  .bruno-mic-btn.listening .mic-wave-icon span,
  .bruno-mic-btn.speaking .mic-wave-icon span {
    animation: activeWave 0.5s infinite ease-in-out alternate;
    background: #ff4d4d !important;
  }
  @keyframes activeWave {
    from { transform: scaleY(0.4); }
    to { transform: scaleY(1.8); }
  }

  .bruno-speech-bubble {
    position: absolute;
    top: -34vh;
    left: -58vh;
    transform: scale(0.8);
    background: rgba(25, 25, 30, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 0.75rem 1.25rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 99;
    backdrop-filter: blur(0.5rem);
  }
  .bruno-speech-bubble.active {
    opacity: 1;
    transform: scale(1);
  }
  .bruno-speech-bubble .bubble-tail {
    position: absolute;
    bottom: -10px;
    right: 1.5rem;
    width: 1.25rem;
    height: 1.25rem;
    background: rgba(25, 25, 30, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 0.75rem 0;
    transform: rotate(45deg);
    z-index: -1;
  }

  @media (max-width: 768px) {
    .bruno-mic-btn {
      bottom: -40px;
    }
    .bruno-speech-bubble {
      left: 50%;
      top: -80px;
      transform: translateX(-50%) scale(0.8);
      white-space: nowrap;
    }
    .bruno-speech-bubble.active {
      transform: translateX(-50%) scale(1);
    }
    .bruno-speech-bubble .bubble-tail {
      right: 50%;
      top: 100%;
      transform: translateX(50%);
      border-top: 0.5rem solid rgba(25, 25, 30, 0.9);
      border-left: 0.5rem solid transparent;
      border-right: 0.5rem solid transparent;
      border-bottom: none;
    }
  }
  
  .bruno-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  /* ============================================================
     NEW UI: ASYMMETRIC LAYOUT (MODULE 05)
     ============================================================ */
  #left-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 8vw;
    pointer-events: none; /* Let clicks pass through except on active elements */
  }

  /* 1080p & Laptop Layout Adjustments */
  @media (min-width: 1025px) and (max-width: 1920px) {
    #left-panel {
      transform: scale(0.85);
      transform-origin: left center;
    }
    .bruno-container {
      margin-top: 8vh;
    }
    #bruno-shadow {
      margin-top: 40vh; /* Push shadow down so it doesn't overlap the smaller sphere */
    }
  }

  @media (min-width: 1025px) and (max-height: 900px) {
    #left-panel {
      transform: scale(0.75);
      transform-origin: left center;
    }
    .bruno-container {
      margin-top: 12vh;
    }
  }

  #main-content-grid > * > * {
    pointer-events: auto;
  }

  .greeting {
    color: #a0a0a0;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 400;
  }

  .headline {
    color: #ffffff;
    font-size: 3.85rem;
    font-weight: 300;
    line-height: 1.15;
    margin: 0 0 3.2rem 0;
    letter-spacing: -0.02em;
    max-width: 53.125rem;
  }

  .headline-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 16rem; /* Strict fixed height */
  }

  .highlight {
    color: var(--primary-accent, #009eed);
    font-weight: 500;
  }
  
  .bold-text {
    font-weight: 500;
  }
  
  .cursor {
    display: inline-block;
    width: 4px;
    height: 1.1em;
    background-color: var(--primary-accent, #009eed);
    color: transparent; /* Hides cached pipe character */
    overflow: hidden; /* Hides cached pipe character */
    animation: blink 1s step-end infinite;
    margin-left: 4px;
    vertical-align: middle;
    transform: translateY(-2px);
  }
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  .search-container {
    display: flex;
    align-items: center;
    background: rgba(15, 15, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3.125rem;
    padding: 0.8rem;
    width: 100%;
    max-width: 53.125rem;
    margin-bottom: 4rem;
    backdrop-filter: blur(0.5rem);
  }

  #search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    padding: 0.8rem 1.8rem;
    outline: none;
  }

  #search-input::placeholder {
    color: #555;
  }

  .search-btn {
    background: transparent;
    border: 1px solid var(--primary-accent, #009eed);
    border-radius: 50%;
    width: 3.375rem;
    height: 3.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.3s ease;
  }
  .search-btn svg {
    width: 1.625rem;
    height: 1.625rem;
  }
  .search-btn:hover {
    background: rgba(0, 158, 237, 0.2);
  }

  .suggestion-label {
    color: #555;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 1.8rem;
    transition: opacity 0.3s ease;
  }

  .suggestions-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 53.125rem;
    height: 8rem; /* Strict fixed height to NEVER cause layout jump */
    align-content: flex-start;
  }

  .suggestion-tag {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3.125rem;
    color: #b0b0b0;
    padding: 1rem 1.8rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .suggestion-tag:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
  }
  .suggestion-tag svg {
    width: 1.375rem;
    height: 1.375rem;
    stroke: var(--primary-accent, #009eed);
  }

  /* === DYNAMIC ACTION CHIPS === */
  .suggestions-row {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .action-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6.25rem;
    color: rgba(255,255,255,0.75);
    padding: 0.75rem 1.4rem;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.22s ease;
    animation: chipFadeIn 0.35s ease both;
  }
  .action-chip:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
    transform: translateY(-2px);
  }
  .action-chip svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    opacity: 0.8;
  }

  /* WhatsApp chip ΓÇö green accent */
  .action-chip--whatsapp {
    background: rgba(37,211,102,0.1);
    border-color: rgba(37,211,102,0.35);
    color: #25d366;
  }
  .action-chip--whatsapp:hover {
    background: rgba(37,211,102,0.2);
    border-color: rgba(37,211,102,0.6);
    color: #25d366;
  }
  .action-chip--whatsapp svg {
    fill: #25d366;
    stroke: none;
  }

  @keyframes chipFadeIn {
    from { opacity: 0; transform: translateY(0.375rem); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ============================================================
     MOBILE / TABLET RESPONSIVENESS
     ============================================================ */
  @media (max-width: 1024px) {
    .hero-dark-card { z-index: 20 !important; }

    .logos-eyebrow { display: none !important; }

    .bruno-container { margin-top: 10vh !important; }

    
  
  
  
  
  
  
  

  
  
  
  
  /* THIS is the actual black space the user was talking about all along! */
  .client-logos-section { padding-top: 2rem !important; }
  
  /* --- PERFECT MOBILE ALIGNMENT --- */
    .client-logos-section { padding-top: 15vh !important; padding-bottom: 2rem !important; margin-top: 0 !important; position: relative; z-index: 10; background: #000000 !important; }
    .headline { font-size: 1.4rem !important; margin-bottom: 1rem !important; }
    .headline-wrapper { min-height: 8rem !important; }
    
    /* --- SQUEEZE TEXT SO IT FITS --- */
    .headline-wrapper { min-height: 5.5rem !important; margin-bottom: 0 !important; }
    .search-container { margin-bottom: 0.5rem !important; }
    .suggestion-label { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
#main-content-grid {
      grid-template-columns: 1fr;
      grid-template-rows: 40fr 60fr;
      padding-top: 4.375rem; /* Push down to prevent navbar overlap */
    }
    #left-panel {
      order: 2;
      padding: 0 5vw;
      align-items: center;
      text-align: center;
      justify-content: flex-start;
    }
    .bruno-container {
      order: 1;
    }
    .headline-wrapper {
      min-height: 12rem; /* Keep a fixed height even on smaller screens to prevent layout jump! */
    }
    .headline {
      font-size: 3rem;
      margin-bottom: 2rem;
    }
    .search-container {
      margin-bottom: 2rem;
      padding: 0.5rem;
    }
    #search-input {
      font-size: 1.1rem;
      padding: 0.5rem 1rem;
    }
    .search-btn {
      width: 2.75rem;
      height: 2.75rem;
    }
    .suggestions-row {
      justify-content: center;
      gap: 0.5rem;
    }
    .action-chip {
        padding: 0.6rem 1.2rem !important;
        font-size: 0.9rem !important;
        gap: 0.5rem !important;
      }
      .action-chip svg {
        width: 1.1rem !important;
        height: 1.1rem !important;
      }
    
    #bruno-shadow {
      margin-top: 22vh; /* Scale shadow height down */
    }
    
    .thinking-bubble {
      transform: scale(0.4);
      top: calc(50% - 20vh);
      bottom: auto;
      left: calc(50% - 20vh);
    }
    .thinking-bubble.active {
      transform: scale(0.85);
    }
    
    @media (max-width: 768px) {
      .thinking-bubble {
        backdrop-filter: none !important; /* CRITICAL FIX for mobile typing lag */
        -webkit-backdrop-filter: none !important;
        background: #0f0f12 !important; /* Solid background prevents GPU thrashing */
        top: 38vh !important; /* Perfect sweet spot */
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.5) !important;
        width: 94vw !important;
        max-width: none !important;
        z-index: 9999 !important;
        padding: 0.8rem 1rem !important; /* Less padding to make it wider inside */
      }
      .thinking-bubble.active {
        transform: translateX(-50%) scale(1) !important;
      }
    @media (min-width: 650px) and (max-width: 1024px) {
      .thinking-bubble {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #0f0f12 !important;
        top: 52vh !important; /* Push it further down for tablets/iPads because the orb is larger */
      }
    }

      .bruno-card-header {
        margin-bottom: 0.5rem !important;
      }
      .thinking-bubble-text {
        font-size: 0.85rem !important; /* Slightly smaller text so it fits better horizontally */
      }
    }
  }

  /* ============================================================
   CLIENT LOGOS STRIP (INFINITE MARQUEE)
   ============================================================ */
  .client-logos-section {
    padding: 12rem 0 4rem;
    background: #000000 !important;
    position: relative;
    z-index: 10;
    border-bottom: 1px solid rgba(255,255,255,0.05);
  }

  .logos-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #a1a1aa;
    margin-bottom: 4rem;
    max-width: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    gap: 24px;
  }

  .logos-eyebrow::before {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.15));
  }

  .logos-eyebrow::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.15));
  }

  .logos-eyebrow span {
    background: linear-gradient(90deg, #a855f7, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
  }

  .marquee-wrapper {
    display: flex;
    overflow: hidden;
    user-select: none;
    padding: 20px 0; /* Extra space so hover effect doesn't get clipped */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }

      .marquee-content {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12rem;
      padding-right: 12rem; /* Gap between batches */
      width: max-content; /* THIS IS THE MAGIC FIX */
      animation: scrollMarquee 28s linear infinite;
    }
    
    .marquee-wrapper:hover .marquee-content {
      animation-play-state: paused;
    }

  .marquee-wrapper:hover     .marquee-content {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12rem;
      padding-right: 12rem; /* Gap between batches */
      width: max-content; /* THIS IS THE MAGIC FIX */
      animation: scrollMarquee 28s linear infinite;
    }
    
    .marquee-wrapper:hover .marquee-content {
      animation-play-state: paused;
    }

  .trust-logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
  }

  .trust-logo-item img {
    height: 100%;
    width: auto;
    object-fit: contain;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    will-change: transform, opacity, filter;
  }

  .trust-logo-item:hover img {
    opacity: 1;
    filter: grayscale(0%);
    transform: translateY(-2px) scale(1.05);
  }

  @keyframes scrollMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }

  @media (max-width: 1024px) {
    .trust-logo-item { height: 32px; }
        .marquee-content {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12rem;
      padding-right: 12rem; /* Gap between batches */
      width: max-content; /* THIS IS THE MAGIC FIX */
      animation: scrollMarquee 28s linear infinite;
    }
    
        .marquee-wrapper:hover .marquee-content {
      animation-play-state: paused;
    }
  } /* Added missing closing brace for @media */

  /* ============================================================
     CORE SERVICES BENTO BOX
     ============================================================ */
  .core-services-section {
    background: #ececec;
    padding: 6rem 0;
  }
  
  .services-header {
    text-align: center;
    margin-bottom: 4rem;
    padding: 0 2rem;
  }
  .services-header h2 {
    font-size: 2.5rem;
    font-weight: 500;
    color: #111;
    margin: 0 auto;
    letter-spacing: -0.02em;
    line-height: 1.4;
    text-transform: none;
    max-width: 56.25rem;
  }
  .services-header h2 .cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background-color: #ff4444;
    vertical-align: middle;
    margin-left: 4px;
    animation: blink 1s step-end infinite;
  }
  @keyframes blink {
    50% { opacity: 0; }
  }

  /* ============================================================
     TABLET SEQUENCE SCROLL
     ============================================================ */
  .sequence-section {
    position: relative;
    background: transparent;
  }
  .seq-main-title {
    display: none;
  }
  .cinematic-title-typewriter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    font-weight: 500;
    color: #111;
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
  }
  @media (max-width: 768px) {
    .cinematic-title-typewriter { font-size: 2.5rem; }
  }
  .seq-sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: transparent;
    z-index: 15;
  }
  .seq-canvas-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100vh;
    z-index: 1;
    background: transparent;
  }
  .seq-canvas-wrapper canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: translateX(-4vw); /* Initial state, will be managed by JS */
  }
  .seq-text-fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    z-index: 2;
  }
  .seq-step-fixed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4rem 0 14vw;
    opacity: 0;
    pointer-events: none;
  }
  .seq-step-fixed.active { opacity: 1; }

    @media (max-width: 768px) {
        .seq-canvas-wrapper {
          width: 100% !important;
          height: 38vh !important;
          top: 10vh !important;
        }
        .seq-canvas-wrapper canvas {
          transform: none !important;
          object-position: center;
        }
        .seq-text-fixed {
          width: 100% !important;
          height: 52vh !important;
          top: 48vh !important;
        }
        .seq-step-fixed {
          padding: 0 5vw !important;
          align-items: flex-start !important;
          text-align: left !important;
          justify-content: flex-start !important;
          padding-top: 1rem !important;
        }
        .seq-icon {
          width: 3.125rem !important;
          height: 3.125rem !important;
          margin-bottom: 0.5rem !important;
        }
        .seq-step-fixed h3 { margin-bottom: 0 !important; }
        .seq-step-fixed h4 { margin-bottom: 0.5rem !important; }
        .cinematic-title-typewriter {
          top: 12vh !important;
        }
      }
    }

  .seq-icon {
    margin-bottom: 1.5rem;
    background: #ffffff;
    width: 5rem;
    height: 5rem;
    border-radius: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.03);
  }
  .seq-num {
    color: var(--primary-accent);
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
  }
  .seq-step-fixed h3 {
    font-size: 3.8rem;
    font-weight: 500;
    color: #111;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
  }
  .seq-step-fixed h4 {
    font-size: 1.8rem;
    font-weight: 400;
    color: #666;
    margin: 0 0 1.5rem 0;
  }
  .seq-step-fixed p {
    font-size: 1.3rem;
    line-height: 1.6;
    color: #555;
    max-width: 34.375rem;
  }
  
  .seq-scroll-spacer {
    height: 400vh;
    width: 100%;
  }

  @media (max-width: 1000px) {
    .core-services-container {
      grid-template-columns: 1fr;
      padding: 0 2rem;
    }
    .bento-stat { font-size: 5rem; }
  }

/* =========================================================================
   4K SPECIFIC SCALING FOR INDEX PAGE ONLY
   (min-width: 3000px safely ignores 2K screens. 0.625vw mathematically 
   matches 2560px proportions exactly onto 3840px screens)
   ========================================================================= */
@media (min-width: 3000px) {
  html {
    font-size: 0.625vw !important;
  }
}

/* --- STYLE BLOCK 2 --- */
body { background: #ffffff !important; }
    .nav-hamburger span {
      background: #111 !important;
    }
    
    .hero-dark-card {
      background: #000000;
      border-radius: 0;
      margin: 0;
      height: calc(100vh - 4.5rem);
      position: relative;
    }
  /* OVERRIDE BRUNO STAGE TO FIT THE CARD */
  #bruno-stage {
    position: absolute !important;
    top: 0; left: 0; width: 100% !important; height: 100% !important;
  }

/* --- STYLE BLOCK 3 --- */
/* --- INJECTED DONUT CSS --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&display=swap');

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

:root {
	--orange: #00aaff;
	--orange2: #00ccff;
	--white: #eee8de;
	--dim: rgba(238, 232, 222, 0.35);
	--bg: #050505;
	--mono: "Courier New", Courier, monospace;
}

/* ── Custom cursor ─────────────────────────────────────────── */
.donut-services-section {
    cursor: none;
}
.donut-services-section *, .donut-services-section a, .donut-services-section button {
    cursor: none !important;
}
#cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--orange);
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: width 0.2s, height 0.2s, opacity 0.2s;
	mix-blend-mode: screen;
}
.donut-services-section:hover ~ #cursor {
    opacity: 1;
}
#cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 170, 255, 0.5);
	pointer-events: none;
	z-index: 9998;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: width 0.3s, height 0.3s, border-color 0.3s, opacity 0.2s; /* Removed transform to fix GPU jitter */
}
.donut-services-section:hover ~ #cursor-ring {
    opacity: 1;
}
body:has(.webgl:hover) #cursor-ring {
	width: 3.75rem;
	height: 3.75rem;
	border-color: var(--orange);
}
.webgl {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* ── Nav ──────────────────────────────────────────────────── */
nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.8rem 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.nav-logo {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	color: var(--white);
	opacity: 0.5;
}

.nav-status {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.15em;
	color: var(--orange);
	opacity: 0;
}
.nav-status .dot-live {
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
	background: var(--orange);
	animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
}

/* ── Progress sidebar ─────────────────────────────────────── */
.sidebar {
	position: fixed;
	left: 3rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: flex-start;
}

.sidebar-item {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	cursor: pointer;
}

.sidebar-tick {
	width: 1.25rem;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
	transition:
		width 0.4s,
		background 0.4s;
}

.sidebar-label {
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.2);
	transition: color 0.4s;
	opacity: 0;
}

.sidebar-item.active .sidebar-label {
	color: var(--orange);
}
.sidebar-item.active .sidebar-tick {
	width: 2rem;
	background: var(--orange);
}

/* ── Corner HUD decorations ───────────────────────────────── */
.hud-corner {
	position: fixed;
	z-index: 100;
	pointer-events: none;
	opacity: 0;
}
.hud-corner svg {
	display: block;
}

.hud-tl {
	top: 5rem;
	left: 3rem;
}
.hud-br {
	bottom: 2.5rem;
	right: 3rem;
}

.hud-readout {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.2);
	line-height: 1.8;
}

/* ── Scrollable content ───────────────────────────────────── */
.content {
	position: relative;
	z-index: 10;
	pointer-events: none;
}

/* ── SECTION 1 — Hero: full screen, donut dead center ─────── */
#section-1 {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 6rem 3rem 3rem;
	position: relative;
	align-items: center;
	overflow: hidden;
}

.hero-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
}

.hero-title {
	font-family: 'ITC Avant Garde Gothic Std', sans-serif;
	font-size: 9.5rem;
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.01em;
	opacity: 0;
	transform: translateY(1.875rem);
	text-align: center;
	color: #8c8c8c;
	position: relative;
	display: inline-flex;
	text-transform: uppercase;
}

.hero-title::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	white-space: nowrap;
	color: #ffffff;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent 30%, #000 50%, transparent 70%);
	mask-image: linear-gradient(to right, transparent 30%, #000 50%, transparent 70%);
	-webkit-mask-size: 150% auto;
	mask-size: 150% auto;
	animation: shinyPillSweep 3s ease-in-out infinite;
}

@keyframes shinyPillSweep {
	0% { -webkit-mask-position: 200%; mask-position: 200%; }
	100% { -webkit-mask-position: -100%; mask-position: -100%; }
}

.hero-title .accent {
	color: var(--orange);
}

.hero-meta {
	text-align: center;
	opacity: 0;
	transform: translateY(1.25rem);
	margin-top: 2rem;
}

.hero-meta .tag {
	font-family: var(--mono);
	font-size: 0.62rem;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--orange);
	display: block;
	margin-bottom: 0.8rem;
}

.hero-meta .desc {
	font-size: 0.82rem;
	color: var(--dim);
	max-width: 40ch;
	line-height: 1.6;
	margin: 0 auto;
}

.hero-bottom {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	width: 100%;
}

.hero-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	opacity: 0;
	transform: translateY(1.25rem);
	pointer-events: all;
	cursor: none;
}

.cta-label {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--dim);
}

.cta-arrow {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		border-color 0.3s,
		background 0.3s;
	animation: float 2.5s ease-in-out infinite;
}
@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-6px);
	}
}
.cta-arrow:hover {
	border-color: var(--orange);
	background: rgba(0, 170, 255, 0.08);
}

.hero-coords {
	position: absolute;
	bottom: 0;
	right: 0;
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.15);
	text-align: right;
	opacity: 0;
	line-height: 1.8;
}

/* Hover instruction — center bottom */
.hover-hint {
	position: absolute;
	bottom: 15rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.2);
	white-space: nowrap;
	opacity: 0;
}

/* ── SECTIONS 2 & 3 — 50/50 layout ───────────────────────── */
.split-section {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
}

.empty-col {
	min-height: 100vh;
}

.text-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 7rem 10rem;
	position: relative;
}

.text-col.border-right {
}

/* Section number */
.sec-num {
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.12);
	margin-bottom: 3rem;
	opacity: 0;
}

.sec-tag {
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--orange);
	margin-bottom: 1.5rem;
	opacity: 0;
	transform: translateY(0.9375rem);
}

.sec-h2 {
	font-size: 5.5rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-bottom: 1.8rem;
	opacity: 0;
	transform: translateY(1.5625rem);
}

.sec-body {
	font-size: 1.25rem;
	line-height: 1.8;
	color: var(--dim);
	max-width: 45ch;
	margin-bottom: 2.5rem;
	opacity: 0;
	transform: translateY(0.9375rem);
}

/* Stat grid */
.stats {
  	display: grid;
  	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  	gap: 1.5rem 0;
  	border-top: 1px solid rgba(255, 255, 255, 0.06);
  	padding-top: 2rem;
  	opacity: 0;
  	transform: translateY(0.9375rem);
  }
  @media (max-width: 768px) {
    .stats { grid-template-columns: 1fr; }
  }
.stat-n {
	font-size: 2rem;
	font-weight: 500;
	color: var(--orange);
	line-height: 1;
}

.stat-l {
	font-family: var(--mono);
	font-size: 0.58rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.25);
	margin-top: 0.4rem;
}

/* Feature list */
.feat-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	opacity: 0;
	transform: translateY(0.9375rem);
}

.feat-list li {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--dim);
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.feat-list li::before {
	content: "→";
	color: var(--orange);
	font-size: 0.7rem;
	flex-shrink: 0;
}

/* ── Scan line overlay ────────────────────────────────────── */
.scanlines {
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(
		to bottom,
		transparent 0px,
		transparent 3px,
		rgba(0, 0, 0, 0.08) 3px,
		rgba(0, 0, 0, 0.08) 4px
	);
	pointer-events: none;
	z-index: 5;
	opacity: 0.4;
}

/* ── Thin divider ─────────────────────────────────────────── */
.rule {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}
.apple-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.sec-btn {
	display: inline-block;
	margin-top: 2rem;
	padding: 0.8rem 2rem;
	border: 1px solid rgba(0, 170, 255, 0.5);
	color: #fff;
	text-decoration: none;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: all 0.3s ease;
	background: transparent;
	opacity: 0;
	transform: translateY(1.25rem);
	width: max-content;
}
.sec-btn:hover {
	background: rgba(0, 170, 255, 0.1);
	border-color: rgba(0, 170, 255, 1);
	box-shadow: 0 0 0.9375rem rgba(0, 170, 255, 0.2);
}

.apple-btn {
	margin-top: 0.5rem;
	padding: 0.8rem 2rem;
	border-radius: 3.125rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(0.5rem);
	-webkit-backdrop-filter: blur(0.5rem);
	color: #fff;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	pointer-events: auto;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	align-self: flex-start;
	opacity: 0;
	transform: translateY(1.25rem);
	text-decoration: none;
}

.apple-btn:hover {
	background: #fff;
	color: #000;
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 0.625rem 1.875rem rgba(255, 255, 255, 0.1);
}

/* --- END INJECTED DONUT CSS --- */

/* --- STYLE BLOCK 4 --- */
@keyframes strobeFlash {
    0%, 100% { 
        background-color: transparent;
        color: #fff;
    }
    5%, 45% {
        background-color: #fff;
        color: #000;
    }
}
.apple-btn {
    animation: strobeFlash 1.5s infinite !important;
}

/* --- STYLE BLOCK 5 --- */
/* =========================================================================
   APPLE-STYLE PREMIUM SCROLL ANIMATIONS
   ========================================================================= */

.anim-showcase-wrapper {
    background: #ffffff;
    color: #1d1d1f;
    font-family: 'ITC Avant Garde Gothic Std', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: clip; 
    position: relative;
    -webkit-font-smoothing: antialiased;
}

.process-section {
    position: relative;
    height: 700vh;
    z-index: 10;
}

.process-sticky {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    background: #ffffff;
    overflow: hidden;
}

.process-sticky::before {
    content: '';
    position: absolute;
    width: 100vw; height: 100vh;
    background: radial-gradient(circle at 75% 50%, rgba(255,255,255,1) 0%, rgba(245,245,247,0) 60%);
    z-index: 0;
}

/* LEFT PANEL (TEXT) */
.process-left {
    flex: 1; padding: 0 5vw 0 10vw;
    position: relative; height: 100%; display: flex;
    flex-direction: column; justify-content: center; z-index: 20;
}
.step-text { position: absolute; width: 100%; max-width: 480px; opacity: 0; }

.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.step-icon { color: #86868b; font-size: 1.2rem; opacity: 0.8; }
.step-num { color: #86868b; font-size: 0.75rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
.step-text h2 { font-size: clamp(2.5rem, 3.5vw, 3.5rem); font-weight: 500; color: #1d1d1f; margin: 0 0 16px 0; line-height: 1.1; letter-spacing: -0.03em; }
.step-text p { font-size: 1.15rem; color: #555557; line-height: 1.6; margin: 0; font-weight: 400; }

/* RIGHT PANEL (HIGH-FIDELITY VISUALS) */
.process-right {
    width: 60%; height: 100%; position: relative;
    display: flex; align-items: center; justify-content: center;
     z-index: 20;
}
.scene-container {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0; z-index: 10;
}
.glass-panel {
    background: rgba(255, 255, 255, 0.7); backdrop-filter: saturate(180%) blur(25px); -webkit-backdrop-filter: saturate(180%) blur(25px);
    border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255,255,255,0.9); border-radius: 24px;
}

/* SCENE 01: DISCOVER */
.s1-adv-dashboard { padding: 35px; display: flex; flex-direction: column; }
.s1-top { display: flex; justify-content: space-between; align-items: flex-start; }
.s1-label { font-size: 0.7rem; font-weight: 700; color: #86868b; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.blink-dot { width: 6px; height: 6px; background: #34c759; border-radius: 50%; animation: blink 1.5s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; box-shadow: 0 0 8px #34c759; } }
.s1-counter-wrapper { display: flex; align-items: baseline; gap: 6px; }
.s1-counter { font-size: 3.5rem; font-weight: 500; color: #1d1d1f; line-height: 1; letter-spacing: -2px; }
.s1-counter-suffix { font-size: 0.8rem; font-weight: 700; color: #86868b; letter-spacing: 1px; }
.s1-radar { width: 70px; height: 70px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); background: #ffffff; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,0.8); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.s1-radar-sweep { position: absolute; width: 50%; height: 50%; top: 0; left: 50%; background: linear-gradient(90deg, rgba(0,0,0,0.15), transparent); transform-origin: bottom left; animation: radar 2s linear infinite; border-radius: 0 100% 0 0; }
@keyframes radar { to { transform: rotate(360deg); } }
.s1-radar-icon { font-size: 1.5rem; color: #1d1d1f; z-index: 2; }
.s1-widgets { display: flex; gap: 16px; margin-top: auto; }
.s1-widget { flex: 1; background: #ffffff; border-radius: 16px; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 15px 30px rgba(0,0,0,0.04); padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(20px); }
.s1-w-header { font-size: 0.75rem; font-weight: 700; color: #86868b; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
.s1-w-header i { color: #1d1d1f; font-size: 1rem; }
.s1-w-chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 45px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 2px; }
.s1-w-bar { flex: 1; background: #1d1d1f; border-radius: 3px 3px 0 0; height: 0%; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,0.8); }
.s1-w-bar:nth-child(even) { background: #d2d2d7; }
.s1-w-ring-container { position: relative; width: 50px; height: 50px; margin: 0 auto; }
.s1-circular-chart { display: block; margin: 0 auto; max-width: 100%; max-height: 250px; }
.circle-bg { fill: none; stroke: #f5f5f7; stroke-width: 3; }
.circle { fill: none; stroke-width: 3; stroke-linecap: round; stroke: #1d1d1f; }
.s1-ring-val { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 0.75rem; font-weight: 700; color: #1d1d1f; }

/* SCENE 02: STRATEGY (Premium Apple Compass Redesign) */
.s2-compass-board { width: 860px; height: 600px; display: flex; flex-direction: column; padding: 24px; position: relative; }
.s2-rm-header { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; z-index: 10; position: absolute; top: 24px; left: 24px; }
.s2-rm-dot { width: 12px; height: 12px; border-radius: 50%; } 
.s2-rm-dot.r { background: #ff5f56; } .s2-rm-dot.y { background: #ffbd2e; } .s2-rm-dot.g { background: #27c93f; }
.s2-rm-title { font-weight: 600; font-size: 0.8rem; letter-spacing: 0.5px; margin-left: 8px; transition: color 0.3s ease; display: flex; align-items: center; gap: 8px; }
.s2-central-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

/* The Ultra-Premium SVG Compass */
.s2-premium-compass { position: relative; width: 380px; height: 380px; display: flex; align-items: center; justify-content: center;  z-index: 5; }
.s2-compass-glow { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%); z-index: 1; filter: blur(10px); }
.s2-compass-dial { width: 100%; height: 100%; position: absolute; z-index: 2; overflow: visible; }
.s2-compass-needle { width: 100%; height: 100%; position: absolute; z-index: 10; overflow: visible; transform-origin: center center; }

/* Direction Cards (4 Pillars) - Safely absolute positioned */
.s2-dir-card {
    position: absolute; background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
    padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 15px 30px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 12px;
    opacity: 0; transform: scale(0.9); z-index: 20; white-space: nowrap;
}
.s2-dir-icon { width: 34px; height: 34px; border-radius: 50%; background: #f5f5f7; color: #1d1d1f; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.s2-dir-step { font-size: 0.6rem; font-weight: 700; color: #86868b; letter-spacing: 1.5px; margin-bottom: 2px; }
.s2-dir-title { font-size: 1rem; font-weight: 600; color: #1d1d1f; letter-spacing: -0.5px; }

/* Correcting card positions to be perfectly inside the 620x440 panel */
.s2-dir-card.n { top: 15px; left: 50%; transform: translateX(-50%); }
.s2-dir-card.s { bottom: 15px; left: 50%; transform: translateX(-50%); }
.s2-dir-card.e { right: 20px; top: 50%; transform: translateY(-50%); }
.s2-dir-card.w { left: 20px; top: 50%; transform: translateY(-50%); }

/* Active North Styling */
.s2-dir-card.n .s2-dir-icon { background: #007aff; color: #fff; box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3); }
.s2-dir-card.n .s2-dir-step { color: #007aff; }

/* SCENE 03: IDENTITY (Apple Bento Grid) */
.s3-bento-grid { width: 840px; height: 540px; display: grid; grid-template-columns: 2fr 1.3fr 1.3fr; grid-template-rows: 40fr 60fr; gap: 24px; perspective: 1200px; }
.s3-bento-box { background: rgba(255, 255, 255, 0.75); backdrop-filter: saturate(180%) blur(25px); -webkit-backdrop-filter: saturate(180%) blur(25px); border-radius: 32px; border: 1px solid rgba(255, 255, 255, 1); box-shadow: 0 25px 50px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.6); overflow: hidden; position: relative; padding: 32px; opacity: 0; transform: translateY(40px); }
.s3-box-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; color: #86868b; text-transform: uppercase; }

/* Box 1: Typography */
.s3-box-typo { grid-column: 1 / 3; grid-row: 1 / 2; display: flex; justify-content: space-between; }

/* Box 2 & 5: Iconography and Voice */
.s3-box-icons { grid-column: 3 / 4; grid-row: 1 / 2; display: flex; flex-direction: column; }
.s3-box-voice { grid-column: 3 / 4; grid-row: 2 / 3; display: flex; flex-direction: column; }
.s3-icon-item { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; }
.s3-icon-item:hover { transform: scale(1.15) translateY(-4px); }
.s3-icon-item i { transition: transform 0.3s ease; }
.s3-icon-item:hover i { transform: scale(1.1); }
.s3-voice-tag { transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; }
.s3-voice-tag:hover { transform: translateX(5px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

/* Box 3: 3D Geometry Logo & Construction Grid */
.s3-box-geo { grid-column: 1 / 2; grid-row: 2 / 3; background-image: linear-gradient(rgba(0,122,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,122,255,0.08) 1px, transparent 1px); background-size: 24px 24px; background-position: center center; display: flex; align-items: center; justify-content: center; }
.s3-cube-spinner { width: 90px; height: 90px; position: relative;  animation: spinCube 12s infinite linear; margin-top: 10px; }
.s3-cube-face { position: absolute; width: 90px; height: 90px; border: 2px solid rgba(0,122,255,0.8); background: rgba(0,122,255,0.1); backdrop-filter: blur(2px); box-shadow: inset 0 -2px 5px rgba(0,0,0,0.1), inset 0 2px 5px rgba(255,255,255,0.8); }
.s3-cube-face.front  { transform: translateZ(45px); }
.s3-cube-face.back   { transform: rotateY(180deg) translateZ(45px); }
.s3-cube-face.right  { transform: rotateY(90deg) translateZ(45px); }
.s3-cube-face.left   { transform: rotateY(-90deg) translateZ(45px); }
.s3-cube-face.top    { transform: rotateX(90deg) translateZ(45px); }
.s3-cube-face.bottom { transform: rotateX(-90deg) translateZ(45px); }
@keyframes spinCube { 0% { transform: rotateX(25deg) rotateY(0deg); } 100% { transform: rotateX(25deg) rotateY(360deg); } }

@keyframes rotateGlow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Box 4: Color Palette Full Swatches */
.s3-box-colors { grid-column: 2 / 3; grid-row: 2 / 3; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.s3-color-swatch { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; cursor: crosshair; backface-visibility: hidden; transform: translateZ(0); }
.s3-color-swatch:hover { transform: translateX(8px) translateZ(0); z-index: 10; box-shadow: -8px 10px 20px rgba(0,0,0,0.1) !important; }

/* SCENE 04: EXPERIENCE (Pro Phone Mockup) */
.s4-phone { width: 290px; height: 600px; border: 10px solid transparent; border-radius: 50px; background: transparent; position: relative; box-shadow: none; overflow: hidden; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }
.s4-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 95px; height: 28px; background: #000; border-radius: 20px; z-index: 10; }
.s4-ui-card { width: 100%; height: 130px; background: #f5f5f7; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(30px); }
.s4-ui-header { display: flex; gap: 12px; align-items: center; }
.s4-ui-avatar { width: 32px; height: 32px; border-radius: 50%; background: #d2d2d7; }
.s4-ui-text-sm { width: 50%; height: 8px; background: #d2d2d7; border-radius: 4px; }
.s4-ui-img { width: 100%; flex: 1; background: #e5e5ea; border-radius: 12px; }

/* SCENE 05: CONTENT (Pro Video Timeline) */
.s5-editor { width: 580px; height: 300px; background: transparent; border-radius: 20px; border: none; box-shadow: none; padding: 24px; position: relative; overflow: hidden; }
.s5-track { width: 100%; height: 44px; background: #2c2c2e; border-radius: 8px; margin-bottom: 12px; display: flex; gap: 2px; padding: 3px; }
.s5-clip { height: 100%; border-radius: 5px; position: relative; overflow: hidden; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 2px, transparent 2px, transparent 5px); }
.s5-clip.g1 { background-color: #555557; } .s5-clip.g2 { background-color: #86868b; } .s5-clip.g3 { background-color: #a1a1a6; }
.s5-playhead-line { position: absolute; width: 1.5px; height: 190px; background: #ff3b30; top: 50px; left: 100px; z-index: 5; }
.s5-playhead-top { position: absolute; width: 14px; height: 14px; background: #ff3b30; border-radius: 3px; top: -14px; left: -6px; }
.s5-timecode { position: absolute; top: 20px; left: 100px; color: #ff3b30; font-family: monospace; font-size: 0.85rem; font-weight: 500; }

/* SCENE 06: DEVELOPMENT (Mac Terminal) */
.s6-window { width: 540px; height: 340px; background: transparent; border-radius: 16px; border: none; box-shadow: none; overflow: hidden; display: flex; flex-direction: column; }
.s6-titlebar { height: 44px; background: #f5f5f7; border-bottom: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; padding: 0 16px; gap: 8px; }
.s6-dot { width: 12px; height: 12px; border-radius: 50%; } .s6-dot.r { background: #ff5f56; } .s6-dot.y { background: #ffbd2e; } .s6-dot.g { background: #27c93f; }
.s6-body { padding: 24px; flex: 1; background: #fafafa; font-family: 'SF Mono', Consolas, monospace; font-size: 0.9rem; color: #1d1d1f; }
.s6-line { margin-bottom: 10px; opacity: 0; transform: translateY(10px); }
.s6-kw { color: #d63384; font-weight: 500; } .s6-str { color: #198754; } .s6-func { color: #0d6efd; }
.s6-progress-container { width: 100%; height: 6px; background: #e5e5ea; margin-top: auto; border-radius: 3px; overflow: hidden; }
.s6-progress-bar { width: 0%; height: 100%; background: #1d1d1f; }

/* Scene 7 Growth Timeline */
.growth-timeline { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; position: relative; }
.growth-timeline::before { content: ''; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 2px; background: #e5e5ea; z-index: 0; }
.gt-item { display: flex; align-items: flex-start; gap: 20px; position: relative; z-index: 1; opacity: 0; transform: translateY(15px); }
.gt-dot { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid #d1d1d6; margin-top: 4px; flex-shrink: 0; transition: all 0.3s ease; }
.gt-dot.active { border-color: #0071e3; background: #0071e3; box-shadow: 0 0 0 4px rgba(0,113,227,0.2); }
.gt-text { font-size: 0.95rem; color: #86868b; line-height: 1.4; }
.gt-text b { color: #1d1d1f; font-size: 1.1rem; display: block; margin-bottom: 4px; letter-spacing: -0.3px; }

/* SCENE 07: LAUNCH & SCALE (Minimalist Bezier) */
.s7-container { width: 600px; height: 400px; position: relative; }
.s7-curve { width: 100%; height: 100%; fill: none; stroke: #1d1d1f; stroke-width: 3; stroke-linecap: round; }
.s7-node { position: absolute; width: 16px; height: 16px; background: #ffffff; border: 4px solid #1d1d1f; border-radius: 50%; box-shadow: 0 0 0 6px rgba(0,0,0,0.05); z-index: 5; }
.s7-milestone { position: absolute; font-size: 2rem; font-weight: 500; color: #1d1d1f; letter-spacing: -1px; opacity: 0; }

@media (max-width: 992px) {
    .process-sticky { flex-direction: column; }
    .process-left, .process-right { width: 100%; }
    .process-left { height: 40%; padding: 10% 0 0; align-items: center; text-align: center; }
    .step-text { left: 0; right: 0; margin: 0 auto; width: 90%; text-align: center; }
    .process-right { height: 60%; transform: scale(0.65); transform-origin: center 25%; }
    .eyebrow { justify-content: center; }
    .step-text h2 { font-size: 2.5rem; }
    .growth-timeline { text-align: left; margin: 24px auto 0; width: fit-content; }
}
@media (max-width: 768px) {
    .process-right { transform: scale(0.65); }
    .step-text h2 { font-size: 2.1rem; }
    #morph-bg {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}
@media (max-width: 480px) {
    .process-left { padding: 5% 5% 0; height: 45%; }
    .process-right { height: 55%; transform: scale(0.55); transform-origin: center 25%; }
    #s2-board { transform: translate(-50%, -50%) scale(0.65) !important; }
    #s3-video { transform: translate(-50%, -50%) scale(0.8) !important; }
    .step-text h2 { font-size: 1.8rem; margin-bottom: 12px; }
    .step-text p { font-size: 0.95rem; line-height: 1.4; }
    .modern-brands-heading h2 { font-size: 1.4rem !important; }
    .growth-timeline { gap: 12px; margin-top: 16px; }
    .gt-text b { font-size: 0.95rem; margin-bottom: 2px; }
    .gt-text { font-size: 0.8rem; line-height: 1.3; }
    .gt-item { gap: 12px; }
}

/* --- STYLE BLOCK 6 --- */
@keyframes s7-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(1.5)} }
                        .s7-live-dot { animation: s7-pulse 2s ease-in-out infinite; }

/* --- STYLE BLOCK 7 --- */
@keyframes s7-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.35;transform:scale(1.5)} }
                        .s7-live-dot { animation: s7-pulse 2s ease-in-out infinite; }

/* --- STYLE BLOCK 8 --- */
/* Scroll Grid Motion — fully namespaced */
  .sgm-wrap {
    background: #fff;
    overflow: clip;
  }

  .sgm-wrap .sgm-header {
    min-height: 150vh;
    position: relative;
  }

  .sgm-header-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-content: center;
    justify-content: center;
    text-align: center;
  }

  .sgm-wrap .sgm-title {
    font-size: 12rem;
    line-height: 0.6;
    margin: 0;
    color: #000;
    font-family: 'ITC Avant Garde Gothic Std', sans-serif;
    font-weight: 500;
  }

  .sgm-wrap .sgm-subtitle {
    font-size: 1.5rem;
    padding-top: 3rem;
    color: #000;
    font-family: 'ITC Avant Garde Gothic Std', sans-serif;
    font-weight: 400;
  }

  .sgm-wrap .sgm-subtitle a {
    color: #000;
    text-decoration: underline;
  }

  .sgm-wrap .sgm-main-section {
    min-height: 240vh;
  }

  .sgm-wrap .sgm-content {
    min-height: 100vh;
    width: 100%;
    display: flex;
    place-items: center;
    align-content: center;
    position: sticky;
    top: 0;
    overflow: hidden;
  }

  .sgm-wrap .sgm-fin-section {
    min-height: 100vh;
    display: grid;
    place-items: center;
  }

  .sgm-wrap .sgm-fin-text {
    font-size: 12rem;
    line-height: 0.6;
    margin: 0;
    color: #000;
    font-family: 'ITC Avant Garde Gothic Std', sans-serif;
    font-weight: 500;
  }

  /* Grid Layout */
  .sgm-grid {
    /* Base width calculated so the 3x3 16:9 grid perfectly fits the screen height at 100% scale */
    --sgm-container-width: min(96vw, 145vh);
    --sgm-gap: min(1.5vw, 1.5vh);
    width: var(--sgm-container-width);
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--sgm-gap);
    margin: 0 auto;
    position: relative;
    top: -6vh;
    transform-origin: center center;
  }

  .sgm-grid > .sgm-layer {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    pointer-events: none; /* Allow clicks to pass through empty parts of layer */
  }

  .sgm-grid > .sgm-layer > div {
    pointer-events: auto; /* Re-enable clicks on the actual grid items */
  }

  /* Layer 1: Corners */
  .sgm-grid > .sgm-layer:nth-of-type(1) div:nth-child(1) { grid-area: 1 / 1; }
  .sgm-grid > .sgm-layer:nth-of-type(1) div:nth-child(2) { grid-area: 1 / 3; }
  .sgm-grid > .sgm-layer:nth-of-type(1) div:nth-child(3) { grid-area: 3 / 1; }
  .sgm-grid > .sgm-layer:nth-of-type(1) div:nth-child(4) { grid-area: 3 / 3; }

  /* Layer 2: Edges */
  .sgm-grid > .sgm-layer:nth-of-type(2) div:nth-child(1) { grid-area: 1 / 2; }
  .sgm-grid > .sgm-layer:nth-of-type(2) div:nth-child(2) { grid-area: 2 / 1; }
  .sgm-grid > .sgm-layer:nth-of-type(2) div:nth-child(3) { grid-area: 2 / 3; }
  .sgm-grid > .sgm-layer:nth-of-type(2) div:nth-child(4) { grid-area: 3 / 2; }

  .sgm-project-link {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    text-decoration: none;
  }
  .sgm-grid .sgm-project-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.3s ease;
  }
  .sgm-grid .sgm-project-link:hover img {
    transform: scale(1.05);
  }
  
  .sgm-project-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .sgm-grid .sgm-project-link:hover .sgm-project-overlay {
    opacity: 1;
  }
  .sgm-project-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0 0.25rem 0;
    font-family: 'ITC Avant Garde Gothic Std', sans-serif;
  }
  .sgm-project-cat {
    font-size: 0.875rem;
    opacity: 0.9;
    text-transform: uppercase;
        letter-spacing: 1px;
    font-family: 'ITC Avant Garde Gothic Std', sans-serif;
  }

  .sgm-grid .sgm-scaler {
    grid-area: 2 / 2;
  }

  .sgm-scaler {
    z-index: 2;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: visible;
  }

  .sgm-scaler .sgm-project-link {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: 0;
  }

  .sgm-scaler .sgm-media {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* Typewriter cursor */
  .sgm-title .sgm-cursor {
    display: inline-block;
    width: 4px;
    height: 0.85em;
    background: #000;
    margin-left: 0.375rem;
    vertical-align: baseline;
    animation: sgmBlink 1s step-end infinite;
  }
  @keyframes sgmBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

/* --- STYLE BLOCK 9 --- */
/* MOBILE PORTFOLIO FIXES (MATHEMATICALLY PERFECT 16:9 IFRAME SIZING) */
@media (max-width: 1024px) {
    .sgm-wrap .sgm-layer > div,
    .sgm-wrap .sgm-scaler {
        border-radius: 0 !important;
    }
    
    .sgm-wrap .sgm-project-link {
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        display: block !important;
    }
    
    .sgm-wrap .sgm-scaler .sgm-project-link {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    .sgm-wrap .sgm-media.portfolio-iframe {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        -webkit-transform: translateX(-50%) !important;
        border: none !important;
        pointer-events: none !important;
        max-width: none !important;
    }
}

/* PHONES: Container height is 300px */
@media (max-width: 599px) {
    .sgm-wrap .sgm-layer > div,
    .sgm-wrap .sgm-scaler {
        height: 300px !important;
    }
    .sgm-wrap .sgm-media.portfolio-iframe {
        height: 100% !important; /* 300px */
        width: 535px !important; /* 300px * 16/9 */
    }
}

/* TABLETS: Container height is 450px */
@media (min-width: 600px) and (max-width: 1024px) {
    .sgm-wrap .sgm-layer > div,
    .sgm-wrap .sgm-scaler {
        height: 450px !important;
    }
    .sgm-wrap .sgm-media.portfolio-iframe {
        height: 100% !important; /* 450px */
        width: 802px !important; /* 450px * 16/9 */
    }
}

/* --- STYLE BLOCK 10 --- */
/* ============================================================
   NEW TESTIMONIALS SECTION (Chosen by 14k+ businesses)
   ============================================================ */
.nt-section {
  padding: 8rem 0;
  background: #f7f7f7;
  color: #111;
}
.nt-container {
  width: 100%;
  max-width: 81.25rem;
  margin: 0 auto;
  padding: 0 4rem;
}
.nt-trust-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4rem;
  margin-top: 5rem;
  margin-bottom: 8rem;
  padding: 0 1rem;
}
.nt-badge-block {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.nt-badge-block.center-col {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.nt-badge-divider {
  width: 1px;
  height: 4rem;
  background: #e5e5e5;
}
.nt-badge-icon {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}
.nt-badge-icon.clutch {
  width: auto;
  height: 2.8rem;
  margin-bottom: 0.2rem;
}
.nt-badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nt-badge-text.center {
  align-items: center;
  text-align: center;
}
.nt-badge-title {
  font-weight: 500;
  font-size: 1.3rem;
  color: #111;
  letter-spacing: -0.02em;
}
.nt-badge-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  font-size: 1.25rem;
  color: #111;
}
.nt-badge-stars {
  display: flex;
  gap: 0.15rem;
}
.nt-badge-stars svg {
  width: 1.25rem;
  height: 1.25rem;
}
.nt-badge-stars.google svg { color: #fbbc05; fill: currentColor; }
.nt-badge-stars.clutch svg { color: #ff3a2d; fill: currentColor; }
.nt-badge-sub {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 500;
}
.nt-badge-shield {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1.5px solid #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
}
.nt-badge-shield svg {
  width: 1.8rem;
  height: 1.8rem;
}
.nt-bottom-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 6rem;
  padding: 0 1rem;
}
.nt-bt-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d97706;
}
.nt-bt-icon svg { width: 1.2rem; height: 1.2rem; }
.nt-bt-text {
  font-size: 1rem;
  color: #6b7280;
  font-weight: 500;
}
.nt-bt-text span {
  color: #d97706;
  font-weight: 500;
}
.nt-btn {
  background: #111;
  color: #fff;
  padding: 0.875rem 1.75rem;
  border-radius: 1.875rem;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  transition: transform 0.2s, background 0.2s;
}
.nt-btn:hover {
  background: #000;
  transform: translateY(-2px);
}
.nt-slider-container {
  position: relative;
  width: 90%;
  max-width: 115.625rem;
  margin: 0 auto;
  padding: 0;
}  .nt-track::-webkit-scrollbar { display: none; }
.nt-track {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding: 1.5rem 1.5rem 3.5rem 1.5rem;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }
.nt-track::-webkit-scrollbar {
  display: none;
}

.nt-card {
  /* Exactly 5 cards visible across the expanded container. */
  flex: 0 0 calc((100% - 8rem) / 5);
  min-height: 27.5rem; height: auto;
  background: #fff;
  border-radius: 1.5rem;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}

@media (max-width: 1400px) {
  .nt-card {
    /* 4 cards visible */
    flex: 0 0 calc(25% - 1.5rem);
  }
}
@media (max-width: 1200px) {
  .nt-card {
    /* 3 cards visible */
    flex: 0 0 calc(33.333% - 1.333rem);
  }
}
@media (max-width: 1024px) { .nt-card { flex: 0 0 calc((100% - 2rem) / 2); } }
@media (max-width: 767px) {
    .nt-slider-container {
      width: 100%;
      padding: 0;
    }
    .nt-track::-webkit-scrollbar { display: none; }
.nt-track {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
      padding: 1rem 1rem 3rem 1rem;
      margin: 0;
    }
    .nt-card {
      /* 1 card visible */
      flex: 0 0 100%;
      margin: 0;
      scroll-snap-align: start;
    }
  }

.nt-card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
}
.nt-card-header img {
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  object-fit: cover;
}
.nt-meta {
  flex: 1;
}
.nt-meta h4 {
  margin: 0 0 0.2rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: #111;
}
.nt-meta p {
  margin: 0;
  font-size: 0.85rem;
  color: #777;
}
.nt-social {
  background: #f4f4f4;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
}
.nt-social:hover {
  transform: translateY(-2px);
  opacity: 1;
  background: #0a66c2 !important;
}
.nt-social:hover svg path {
  fill: #fff !important;
}

.nt-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.nt-body h3 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 500;
  color: #111;
}
.nt-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

.nt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: 1.5rem;
}
.nt-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 1.2rem;
}
.nt-stars svg {
  width: 1.125rem;
  height: 1.125rem;
}
.nt-case-study {
  font-size: 0.95rem;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 0.2s, transform 0.2s;
}
.nt-case-study:hover {
  opacity: 0.7;
  transform: translateX(3px);
}
.nt-date {
  font-size: 0.85rem;
  color: #777;
  font-weight: 500;
}

/* Video Card Specifics */
.nt-video-card {
  background-size: cover;
  background-position: center;
  border: none;
}
.nt-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
}
.nt-video-card .nt-meta h4, 
.nt-video-card .nt-meta p, 
.nt-video-card .nt-date {
  color: #fff;
}
.nt-video-card .nt-social {
  background: #fff;
}

.nt-play {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.nt-play-circle {
  width: 3.75rem;
  height: 3.75rem;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.nt-play-circle:hover {
  transform: scale(1.1);
}
.nt-play-circle svg {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 4px;
}

.nt-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  background: rgba(17, 17, 17, 0.2);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 0.625rem rgba(0,0,0,0.05);
  transition: all 0.3s;
  opacity: 0.5;
}
.nt-nav-btn.prev {
  left: -3rem;
}
.nt-nav-btn.next {
  right: -3rem;
}
.nt-nav-btn:hover {
  background: rgba(17, 17, 17, 0.6);
  opacity: 1;
}

@media (max-width: 900px) {
  .nt-trust-badges { gap: 2rem; flex-direction: column; text-align: center; margin-top: 3rem; }
  .nt-badge-divider { width: 80%; height: 1px; margin: 0.5rem 0; }
  .nt-badge-block { flex-direction: column; text-align: center; }
  .nt-badge-text { align-items: center; }
  .nt-container { padding: 0 2rem; }
  .nt-nav-btn { display: none; /* Rely on swipe for mobile */ }
}

/* --- STYLE BLOCK 11 --- */
/* ============================================================
   AWARDS SECTION
   ============================================================ */
.awards-section {
  padding: 8rem 0;
  background: #080808; /* Deep black */
  color: #ffffff;
  overflow: hidden;
}
.awards-container {
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Header */
.awards-header {
  text-align: center;
  margin-bottom: 6rem;
}
.awards-header h2 {
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #f4f4f5;
    margin: 0;
  }

/* List Layout */
.awards-list {
  display: flex;
  flex-direction: column;
}

/* Row Styling */
.award-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 2rem;
  border-radius: 0.75rem;
  position: relative;
  transition: background 0.3s ease;
  cursor: default;
}
.award-row:hover {
  background: #1a1a1a;
}

/* Column Styling */
.award-col {
  flex: 1;
}
.aw-platform {
    font-size: 1.4rem;
  font-weight: 500;
  color: #ffffff;
}
.aw-project {
  font-size: 1.1rem;
  color: #777777;
  font-weight: 500;
  text-align: center;
}
.aw-category {
    font-size: 1.1rem;
    color: #e4e4e7; /* slightly softer white for elegance */
    font-weight: 400; /* Regular weight, not bold */
    letter-spacing: 0.02em; /* Touch of spacing for a nice look */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .award-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.8rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 0.8rem;
    letter-spacing: 0.05em;
  }
  .badge-gold {
    background: rgba(255, 215, 0, 0.1);
    color: #FFD700;
    border: 1px solid rgba(255, 215, 0, 0.25);
  }
  .badge-winner {
    background: rgba(14, 165, 233, 0.1);
    color: #38bdf8;
    border: 1px solid rgba(14, 165, 233, 0.25);
  }
.aw-date {
  font-size: 1.1rem;
  color: #777777;
  text-align: right;
  font-weight: 500;
}

/* Hidden Hover Image (The Certificate) */
.award-img {
  position: absolute;
  right: 12%; /* Positions it between the category and date columns */
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.3s;
  pointer-events: none; /* Let mouse pass through so it doesn't break hover */
  z-index: 10;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.1);
}
.award-row:hover .award-img {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) scale(1); /* Straight/no rotation */
}
.award-img img {
  display: block;
  width: 11.25rem;
  height: auto;
  object-fit: cover;
}

  /* Responsive Mobile/Tablet Awards Layout */
  @media (max-width: 1024px) {
    .awards-header {
      margin-bottom: 3rem;
    }
    .awards-header h2 { 
      font-size: 2.2rem; 
      font-weight: 500;
    }
    .awards-list {
      gap: 1.25rem;
    }
    .award-row { 
      background: #111111;
      border-radius: 1.25rem;
      padding: 1.5rem;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: auto auto auto;
      row-gap: 0.75rem;
      align-items: center;
      transition: background 0.3s;
    }
    .award-row:hover {
      background: #161616;
    }
    
    .aw-platform {
      grid-column: 1;
      grid-row: 1;
      font-size: 1.3rem;
      font-weight: 500;
      color: #ffffff;
      text-align: left !important;
    }
    
    .aw-date {
      grid-column: 2;
      grid-row: 1;
      font-size: 0.9rem;
      color: #888888;
      text-align: right !important;
      font-weight: 400;
    }

    .aw-project {
      grid-column: 1;
      grid-row: 2;
      font-size: 1.05rem;
      color: #888888;
      font-weight: 400;
      text-align: left !important;
    }

    .aw-category {
      grid-column: 2;
      grid-row: 2;
      font-size: 1.05rem;
      color: #ffffff;
      font-weight: 500;
      text-align: right !important;
    }

    .award-img { 
      display: none; 
      grid-column: 1 / -1;
      grid-row: 3;
      margin-top: 1rem;
      position: relative;
      top: auto;
      right: auto;
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
      box-shadow: none;
      border: none;
      pointer-events: auto;
    }
    
    .award-row { cursor: pointer; }
    .award-row.active .award-img {
      display: block;
    }
    
    .award-img img {
      width: 100%;
      height: 180px; 
      object-fit: cover;
      display: block;
      border-radius: 0.75rem;
    }
  }

  /* Font-size scaling for small phones to preserve 2-column layout */
  @media (max-width: 480px) {
    .award-row {
      padding: 1.25rem;
    }
    .aw-platform {
      font-size: 1.1rem !important;
    }
    .aw-date {
      font-size: 0.8rem !important;
    }
    .aw-project {
      font-size: 0.85rem !important;
    }
    .aw-category {
      font-size: 0.85rem !important;
    }
    .award-badge {
      font-size: 0.6rem !important;
      padding: 0.15rem 0.4rem !important;
      margin-right: 0.3rem !important;
    }
  }

/* --- STYLE BLOCK 12 --- */
/* ============================================================
   BLOG SECTION
   ============================================================ */
.blog-section {
  padding: 8rem 0;
  background: #111111; /* Dark grey, slightly lighter than black awards */
  color: #ffffff;
}
.blog-container {
  max-width: 93.75rem;
  margin: 0 auto;
  padding: 0 4rem;
}

/* Header */
.blog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
}
.blog-header h2 {
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #f4f4f5;
    margin: 0;
  }
.blog-view-all {
  color: #ffffff;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding-bottom: 4px;
  transition: border-color 0.3s;
}
.blog-view-all:hover {
  border-color: #ffffff;
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

/* Blog Cards */
.blog-card {
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  border-radius: 1.25rem;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  border: 1px solid rgba(255,255,255,0.05);
}
.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.15);
}

.blog-img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
}
.blog-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}
.blog-card:hover .blog-img-wrapper img {
  transform: scale(1.08);
}

.blog-content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 500;
  color: #888888;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.blog-category {
  color: #ffffff;
}

.blog-content h3 {
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0 0 1rem 0;
  line-height: 1.3;
}
.blog-content p {
  font-size: 1.1rem;
  color: #aaaaaa;
  line-height: 1.6;
  margin: 0 0 2rem 0;
  flex-grow: 1;
}

.blog-read-more {
  font-size: 1rem;
  font-weight: 500;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
}
.blog-read-more::after {
  content: '\2192';
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}
.blog-card:hover .blog-read-more::after {
  transform: translateX(0.3125rem);
}

/* Responsive */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .blog-container { padding: 0 2rem; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-header h2 { font-size: 3rem; }
}

/* --- STYLE BLOCK 13 --- */
/* ============================================================
   FAQ SECTION (DARK THEME)
   ============================================================ */
.faq-section {
  padding: 8rem 0;
  background: #000000; /* Pure black background to match footer */
  color: #ffffff;
  font-family: 'ITC Avant Garde Gothic Std', sans-serif;
}
.faq-container {
  max-width: 56.25rem; 
  margin: 0 auto;
  padding: 0 2rem;
}
.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}
.faq-header h2 {
    font-size: 3.2rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #f4f4f5;
    margin: 0;
  }

/* Tabs */
.faq-tabs {
  display: flex;
  justify-content: space-between;
  border: 1px solid rgba(255,255,255,0.1); /* Subtle dark border */
  border-radius: 0.75rem;
  padding: 0.5rem;
  margin-bottom: 2rem;
  background: #111111; /* Darker tab background */
  overflow-x: auto;
  gap: 0.5rem;
}
.faq-tabs::-webkit-scrollbar { display: none; }
.faq-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  background: transparent;
  color: #888; /* Inactive text */
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.faq-tab svg {
  opacity: 0.7;
  transition: opacity 0.4s ease;
}
.faq-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.faq-tab.active {
  background: rgba(0, 163, 255, 0.15); /* Sky Blue translucent */
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  border: 1px solid rgba(0, 163, 255, 0.4);
  box-shadow: 0 0.5rem 2rem 0 rgba(0, 163, 255, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.faq-tab.active svg {
  opacity: 1;
  filter: drop-shadow(0 2px 4px rgba(0,163,255,0.4));
}

/* Tab Content */
.faq-tab-content {
  display: none;
  animation: fadeIn 0.4s ease forwards;
}
.faq-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(0.625rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Accordion List */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Individual Item */
.faq-item {
  background: #111111; /* Dark grey for inactive */
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 1rem;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
  color: #ffffff;
}
.faq-item:hover {
  border-color: rgba(255,255,255,0.15);
}

/* Active item */
.faq-item.active {
  background: #000000; /* Pure black for active to create depth */
  border-color: rgba(0, 163, 255, 0.4); /* Slight sky blue glow/border */
}

/* Question Area */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.8rem 2rem;
  cursor: pointer;
  user-select: none;
}
.faq-question h3 {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0;
  color: inherit;
}

/* Icon Design (+ / -) */
.faq-icon {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq-icon::before {
  width: 0.875rem;
  height: 2px;
}
.faq-icon::after {
  height: 0.875rem;
  width: 2px;
}

/* Answer Area (Hidden by default) */
.faq-answer {
  max-height: 0;
  opacity: 0;
  padding: 0 2rem;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}
.faq-answer p {
  font-size: 1rem;
  line-height: 1.6;
  color: #aaaaaa; /* Softer text for answer */
  margin: 0;
  padding-bottom: 0;
}

/* Active State Styles */
.faq-item.active .faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.faq-item.active .faq-answer {
  max-height: 62.5rem;
  opacity: 1;
  padding-bottom: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-header h2 { font-size: 2.5rem; }
  .faq-tabs { justify-content: flex-start; }
  .faq-question { padding: 1.5rem; }
  .faq-question h3 { font-size: 1.05rem; }
  .faq-answer { padding: 0 1.5rem; }
  .faq-item.active .faq-answer { padding-bottom: 1.5rem; }
}

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



    
    /* --- TABLET SPECIFIC (iPad) --- */
    @media (min-width: 768px) and (max-width: 1024px) {
      #main-content-grid {
        grid-template-rows: 45fr 55fr !important;
      }
      #left-panel {
        justify-content: center !important;
        padding-top: 10vh !important;
      }
      .bruno-container {
        margin-top: 12vh !important;
      }
    }

    /* --- PREMIUM REPLY CARD EXTRA STYLES --- */
    #bruno-thinking-bubble.is-thinking #thinking-text {
      width: 100% !important;
      max-width: none !important;
    }
    
    .bruno-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 0.8rem;
    }
    .bruno-card-title {
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.8);
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .bruno-card-title .icon-pulse {
      width: 6px;
      height: 6px;
      background: rgba(255,255,255,0.15);
      border-radius: 50%;
    }
    .bruno-status-badge {
      font-size: 0.7rem;
      font-weight: 500;
      background: rgba(16, 185, 129, 0.1);
      color: #10b981;
      padding: 0.2rem 0.5rem;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 0.3rem;
      border: 1px solid rgba(16, 185, 129, 0.2);
    }
    .bruno-status-badge .status-dot {
      width: 4px;
      height: 4px;
      background: #10b981;
      border-radius: 50%;
    }
    
    .thinking-bubble-text {
      color: #d4d4d8 !important;
      font-size: 0.95rem !important;
      line-height: 1.5 !important;
      margin: 0 0 1rem 0 !important;
    }
    .thinking-bubble-text strong, .thinking-bubble-text b {
      font-weight: 600;
      color: #ffffff !important;
    }
    
    .bruno-card-footer {
        display: flex;
        gap: 0.35rem;
        border-top: 1px solid rgba(255,255,255,0.06);
        padding-top: 0.8rem;
        flex-wrap: nowrap;
        overflow-x: auto; /* Allow scrolling if it still overflows on tiny screens */
      }
    
    .bruno-action-btn {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #e4e4e7;
        padding: 0.35rem 0.5rem;
        border-radius: 6px;
        font-size: 0.7rem;
        font-weight: 500;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.25rem;
        transition: all 0.2s;
        white-space: nowrap;
      }
    .bruno-action-btn:hover {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.2);
    }
    
    .bruno-btn-primary {
      background: linear-gradient(90deg, #00c6ff, #0072ff) !important;
      color: #000 !important;
      border: none !important;
      font-weight: 600;
      box-shadow: 0 0 15px rgba(0, 198, 255, 0.4);
      margin-left: auto;
      border-radius: 6px;
    }
    .bruno-btn-primary:hover {
      background: linear-gradient(90deg, #0072ff, #00c6ff) !important;
      color: #fff !important;
    }

    /* --- MOBILE BUBBLE FIX (ALL PHONES) --- */
    @media (max-width: 992px) {
      #left-panel {
        padding-top: 28vh !important; /* Push the text and search bar heavily down towards the bottom */
      }
      .suggestion-label, .suggestions-row {
        display: none !important; /* Hide TRY ASKING chips on mobile */
      }
      .thinking-bubble {
        backdrop-filter: none !important; /* CRITICAL FIX for mobile typing lag */
        -webkit-backdrop-filter: none !important;
        background: #0f0f12 !important; /* Solid background prevents GPU thrashing */
        top: 38vh !important; /* Perfect sweet spot */
        bottom: auto !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.9) !important;
        width: 90vw !important; /* Fits perfectly in the user's red box */
        max-width: 500px !important;
        z-index: 9999 !important;
        padding: 1.2rem 1.5rem !important;
      }
      .thinking-bubble.active {
        transform: translateX(-50%) scale(1) !important;
      }
    @media (min-width: 650px) and (max-width: 1024px) {
      .thinking-bubble {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: #0f0f12 !important;
        top: 52vh !important; /* Push it further down for tablets/iPads because the orb is larger */
      }
    }

      .bruno-card-header {
        margin-bottom: 0.5rem !important;
      }
      .thinking-bubble-text {
        font-size: 0.85rem !important;
      }
      #bruno-thinking-bubble.is-thinking #thinking-text {
        width: 100% !important;
        max-width: none !important;
      }
    }
@media (max-width: 480px) {
  .bruno-container { margin-top: 20vh !important; }
}

/* FIX iOS KEYBOARD JUMPING */
@media (max-width: 768px) {
  #bruno-stage {
    height: calc(100lvh - 4.5rem) !important;
    min-height: 800px !important;
  }
  #left-panel {
    justify-content: flex-start !important;
    padding-top: 35lvh !important;
  }
}

/* FIX: iOS KEYBOARD EXACT DOCKING USING DVH AND FOCUS-WITHIN */
@media (max-width: 768px) {
  #main-content-grid:focus-within {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100dvh !important;
    grid-template-rows: 1fr auto !important;
    z-index: 99999 !important;
  }
  
  #main-content-grid:focus-within #left-panel {
    padding-top: 0 !important;
    padding-bottom: 15px !important;
    justify-content: flex-end !important;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 60%, transparent);
  }
  
  /* Dim the bruno head slightly when typing so text is readable */
  #main-content-grid:focus-within #bruno-float-group {\n    opacity: 0.3 !important;
    margin-top: 5vh !important;
  }
}



/* Ensure bubble stays visible and brings it forward when focused */
#main-content-grid:focus-within #bruno-thinking-bubble.active {
    z-index: 999999 !important;
    opacity: 1 !important;
}

/* Mobile Ask Overlay */
@media (max-width: 768px) {
  .mobile-ask-overlay { display: block !important; background: rgba(0,0,0,0.01); }
}

/* FIX iOS AUTO-ZOOM BUG */
@media screen and (max-width: 768px) {
  #mb-chat-input, 
  #search-input,
  input[type="text"], 
  input[type="email"], 
  textarea {
    font-size: 16px !important;
  }
}

/* CRITICAL FIX FOR iOS GPU CRASHES */
@media screen and (max-width: 768px) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* CRITICAL FIX FOR iOS GPU CRASHES: Disable heavy filters on mobile */
@media screen and (max-width: 768px) {
  #bruno-shadow, .s2-compass-glow {
    filter: none !important;
  }
}