@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');
        
        :root {
            --yellow: #FFD400;
        }
        
        body {
            font-family: 'Inter', system_ui, sans-serif;
        }
        
        .font-display {
            font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
            font-weight: 700;
            letter-spacing: -0.03em;
        }

        .gta-heading {
            font-weight: 900;
            letter-spacing: -0.05em;
            text-transform: uppercase;
        }

        .section-title {
            font-size: clamp(2.25rem, 5vw, 3.5rem);
            line-height: 0.95;
            font-weight: 900;
            letter-spacing: -0.04em;
        }

        .premium-text {
            font-weight: 600;
            letter-spacing: -0.025em;
        }

        .glass {
            background: rgba(17, 17, 17, 0.75);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 212, 0, 0.1);
        }

        .gta-border {
            border: 2px solid #FFD400;
            box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.6);
        }

        .yellow-glow {
            box-shadow: 0 0 15px rgba(255, 212, 0, 0.3),
                        0 0 30px rgba(255, 212, 0, 0.15);
        }

        .yellow-glow-strong {
            box-shadow: 0 0 25px rgba(255, 212, 0, 0.5),
                        0 0 50px rgba(255, 212, 0, 0.25);
        }

        .card-hover {
            transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        .card-hover:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
            border-color: #FFD400;
        }

        .direction-card {
            transition: all 0.4s cubic-bezier(0.23, 1.0, 0.32, 1);
            position: relative;
            overflow: hidden;
        }
        
        .direction-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border: 2px solid transparent;
            transition: all 0.4s ease;
            pointer-events: none;
        }
        
        .direction-card:hover::before {
            border-color: #FFD400;
            box-shadow: 0 0 20px rgba(255, 212, 0, 0.4);
        }

        .nav-active {
            color: #FFD400;
            position: relative;
        }
        
        .nav-active:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #FFD400;
        }

        .timeline-line {
            position: absolute;
            left: 31px;
            top: 60px;
            bottom: 20px;
            width: 3px;
            background: linear-gradient(to bottom, #FFD400, #FFD400);
            box-shadow: 0 0 10px rgba(255, 212, 0, 0.5);
        }

        .step-number {
            transition: all 0.3s ease;
            box-shadow: 0 0 0 6px rgba(255, 212, 0, 0.1);
        }

        .step-card:hover .step-number {
            transform: scale(1.1);
            box-shadow: 0 0 0 8px rgba(255, 212, 0, 0.2);
        }

        .premium-button {
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
        }
        
        .premium-button::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -100%;
            width: 50%;
            height: 200%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,0.35),
                transparent
            );
            transition: 0.6s;
        }
        
        .premium-button:hover::after {
            left: 250%;
        }

        .premium-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 30px rgba(255, 212, 0, 0.6);
        }

        .pulse {
            animation: pulse-yellow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes pulse-yellow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.6); }
            50% { box-shadow: 0 0 0 18px rgba(255, 212, 0, 0); }
        }

        .grain {
            position: fixed;
            inset: 0;
            background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22300%22 height=%22300%22 filter=%22url(%23n)%22 opacity=%220.06%22/%3E%3C/svg%3E');
            background-size: 180px 180px;
            pointer-events: none;
            z-index: 9999;
            mix-blend-mode: overlay;
            opacity: 0.7;
        }

        .section-header {
            position: relative;
            display: inline-block;
        }
        
        .section-header:after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 0;
            width: 60px;
            height: 3px;
            background: #FFD400;
            box-shadow: 0 0 12px #FFD400;
        }

        .gta-card {
            background: rgba(17, 17, 17, 0.75);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 212, 0, 0.15);
            transition: all 0.4s cubic-bezier(0.23, 1.0, 0.32, 1);
        }
        
        .gta-card:hover {
            border-color: #FFD400;
            box-shadow: 0 0 25px rgba(255, 212, 0, 0.15);
        }

        .floating-particle {
            position: absolute;
            border-radius: 50%;
            background: #FFD400;
            box-shadow: 0 0 8px #FFD400,
                        0 0 16px #FFD400;
            pointer-events: none;
            z-index: 1;
        }

        .hero-bg {
            background: radial-gradient(circle at 30% 40%, rgba(255,212,0,0.06) 0%, transparent 50%);
        }

        .cinematic {
            box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.9);
        }

        .metric {
            font-variant-numeric: tabular-nums;
        }

        .system-line {
            transition: all 0.3s ease;
            transform: translateY(10px);
        }

        .system-line.show {
            opacity: 1 !important;
            transform: translateY(0);
        }

        .case-card::after {
            content: 'GRIZZLY GANG';
            position: absolute;
            right: -42px;
            bottom: 30px;
            transform: rotate(-18deg);
            color: rgba(255, 212, 0, 0.08);
            border: 2px solid rgba(255, 212, 0, 0.08);
            padding: 6px 18px;
            font-weight: 900;
            letter-spacing: 2px;
            font-size: 18px;
            pointer-events: none;
        }

        #preloader::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: repeating-linear-gradient(
                transparent,
                transparent 3px,
                rgba(255,255,255,0.05) 3px,
                rgba(255,255,255,0.05) 6px
            );
            pointer-events: none;
            z-index: 2;
        }
    

        /* Case Files: Tinder-style slider. FIXED: all cards share the same top baseline. */
        .case-slider-viewport {
            position: relative;
            overflow: hidden;
            max-width: 980px;
            margin: 0 auto;
            cursor: grab;
            touch-action: pan-y;
            user-select: none;
            min-height: 620px;
        }

        .case-slider-viewport.is-dragging {
            cursor: grabbing;
        }

        .case-slider-track {
            position: relative;
            height: 100%;
            width: 100%;
        }

        .case-slide {
            position: absolute !important;
            top: 0 !important;
            left: 50% !important;
            width: min(92vw, 760px);
            min-height: 560px;
            border: 1px solid rgba(255, 212, 0, 0.18);
            box-shadow: 0 30px 90px rgba(0,0,0,0.55);
            opacity: 0;
            pointer-events: none;
            transform-origin: center center;
            will-change: transform, opacity, filter;
            backface-visibility: hidden;
            transform: translate3d(-50%, 0, 0) scale(.96) rotateZ(0deg);
            transition:
                transform 0.42s cubic-bezier(0.2, 0.85, 0.18, 1),
                opacity 0.26s ease,
                filter 0.26s ease,
                border-color 0.26s ease,
                box-shadow 0.26s ease;
        }

        .case-slider-viewport.is-dragging .case-slide {
            transition: none !important;
        }

        .case-slide.is-active {
            border-color: rgba(255, 212, 0, 0.74);
            box-shadow: 0 40px 120px rgba(0,0,0,0.74), 0 0 48px rgba(255, 212, 0, 0.16);
        }

        .case-slide::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(110deg, transparent 0%, rgba(255,212,0,0.085) 42%, transparent 58%),
                radial-gradient(circle at 20% 0%, rgba(255,212,0,0.12), transparent 35%);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.35s ease;
        }

        .case-slide.is-active::before {
            opacity: 1;
        }

        .case-file-label {
            position: absolute;
            top: 24px;
            right: 24px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 2px;
            color: rgba(255, 212, 0, 0.75);
        }

        .case-watermark {
            position: absolute;
            right: -42px;
            bottom: 34px;
            transform: rotate(-18deg);
            color: rgba(255, 212, 0, 0.075);
            border: 2px solid rgba(255, 212, 0, 0.075);
            padding: 7px 20px;
            font-weight: 900;
            letter-spacing: 3px;
            font-size: 20px;
            pointer-events: none;
        }

        .case-stat {
            min-height: 78px;
            padding: 14px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(0, 0, 0, 0.28);
            border-radius: 12px;
        }

        .case-stat span {
            display: block;
            color: rgba(255, 255, 255, 0.42);
            font-size: 10px;
            letter-spacing: 1.6px;
            margin-bottom: 7px;
        }

        .case-stat b {
            display: block;
            color: #FFD400;
            font-size: 16px;
            line-height: 1.05;
        }

        .case-status {
            display: inline-flex;
            align-items: center;
            border: 1px solid rgba(255, 212, 0, 0.35);
            color: #FFD400;
            background: rgba(255, 212, 0, 0.06);
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-weight: 900;
            letter-spacing: 2px;
            font-size: 11px;
            padding: 10px 14px;
            border-radius: 4px;
        }

        .case-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            border: 1px solid rgba(255, 212, 0, 0.4);
            background: transparent;
            transition: all 0.25s ease;
        }

        .case-dot.is-active {
            width: 34px;
            background: #FFD400;
            box-shadow: 0 0 18px rgba(255, 212, 0, 0.45);
        }

        .case-flash {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: radial-gradient(circle at 50% 45%, rgba(255,212,0,0.16), transparent 56%);
            opacity: 0;
            z-index: 120;
        }

        .case-flash.run {
            animation: case-flash 0.34s ease-out;
        }

        @keyframes case-flash {
            0% { opacity: 0; }
            34% { opacity: 1; }
            100% { opacity: 0; }
        }

        @media (max-width: 768px) {
            .case-slider-viewport {
                min-height: 720px;
                overflow: hidden;
            }
            .case-slide {
                width: 88vw;
                min-height: 640px;
                padding-top: 56px;
            }
            .case-stat b {
                font-size: 14px;
            }
        }

        .hero-proof {
            display: inline-block;
            max-width: 520px;
            font-weight: 500;
            line-height: 1.55;
            letter-spacing: -0.015em;
            background: linear-gradient(110deg, rgba(255,255,255,0.74), #FFD400, rgba(255,255,255,0.9), #FFD400, rgba(255,255,255,0.62));
            background-size: 260% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: heroProofFlow 7.5s ease-in-out infinite;
            text-shadow: 0 0 26px rgba(255, 212, 0, 0.10);
        }

        @keyframes heroProofFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

/* Performance tuning for Keitaro / Telegram WebView */
img { max-width: 100%; height: auto; }
#particles-canvas, #cta-particles { contain: strict; }
#bear-container, .premium-button, .case-card, .direction-card, .gta-card { backface-visibility: hidden; }
.case-card { will-change: transform, opacity; transform: translateZ(0); }
@media (max-width: 768px) {
  .card-hover:hover { transform: none; }
  .premium-button:hover { transform: none; }
}


/* === Mobile slider performance + clipping fix v2 === */
.case-slider-viewport {
  overflow: visible !important;
  contain: layout style;
}
.case-slider-track { min-height: inherit; }
.case-slide {
  box-sizing: border-box;
  filter: none !important;
}
@media (max-width: 768px) {
  #cases { overflow: visible !important; padding-top: 56px; padding-bottom: 56px; }
  .case-slider-viewport {
    width: 100%;
    min-height: 0 !important;
    height: auto;
    overflow: visible !important;
    touch-action: pan-y;
  }
  .case-slide {
    width: calc(100vw - 48px) !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 44px 24px 28px !important;
    border-radius: 24px !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.58), 0 0 28px rgba(255,212,0,.10) !important;
  }
  .case-file-label { top: 22px; right: 22px; font-size: 9px; letter-spacing: 1.5px; }
  .case-watermark { opacity: .7; right: -54px; bottom: 24px; font-size: 17px; }
  .case-stat { min-height: 86px; padding: 14px; }
  .case-status { max-width: 100%; overflow-wrap: anywhere; }
  .case-flash { display: none !important; }
}
@media (max-width: 420px) {
  .case-slide { width: calc(100vw - 32px) !important; padding-left: 20px !important; padding-right: 20px !important; }
  .case-stat { min-height: 82px; }
}

/* === FINAL QA FIXES: spacing, centering, mobile readability === */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }

/* More breathing room for Cyrillic uppercase headings */
.gta-heading { line-height: .94 !important; letter-spacing: -0.045em !important; }
.section-title { line-height: 1.02 !important; letter-spacing: -0.035em !important; }

/* Avoid tight/clipped headings inside cards */
.gta-card h3,
.direction-card h3,
.step-card h4,
.case-slide h3 {
  line-height: 1.06 !important;
  overflow-wrap: anywhere;
}

/* Cases block: keep card centered and prevent clipping */
#cases { overflow: visible !important; }
.case-slider-viewport {
  width: 100%;
  max-width: 980px;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: visible !important;
  display: block;
}
.case-slider-track { width: 100%; position: relative; }
.case-slide {
  left: 50% !important;
  right: auto !important;
  margin: 0 !important;
  overflow: hidden;
}
.case-slide p { line-height: 1.58 !important; }
.case-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.case-stat span,
.case-stat b { overflow-wrap: anywhere; }
.case-status { line-height: 1.2 !important; }

/* CTA heading: less squeezed lines */
section h2 { text-wrap: balance; }

@media (max-width: 1024px) {
  .section-title { font-size: clamp(2.35rem, 8vw, 3.7rem) !important; }
}

@media (max-width: 768px) {
  body { line-height: 1.45; }

  nav .h-20 { height: 72px !important; }
  nav .text-2xl { font-size: 1.35rem !important; line-height: 1 !important; }

  .gta-heading {
    font-size: clamp(3.25rem, 15vw, 4.6rem) !important;
    line-height: .98 !important;
    letter-spacing: -0.045em !important;
    margin-bottom: 18px !important;
  }

  .section-title {
    font-size: clamp(2.25rem, 10vw, 3.15rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.035em !important;
  }

  .hero-proof {
    font-size: clamp(16px, 4.5vw, 19px) !important;
    line-height: 1.55 !important;
  }

  .premium-button {
    width: 100%;
    padding: 18px 20px !important;
    gap: 12px !important;
  }
  .premium-button span {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    letter-spacing: .7px !important;
    white-space: normal;
    line-height: 1.15;
  }

  #cases {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }
  #cases > .flex:first-child {
    gap: 24px !important;
    margin-bottom: 34px !important;
  }
  #cases .text-lg { font-size: 16px !important; line-height: 1.55 !important; }
  #case-counter { font-size: 12px !important; letter-spacing: 2px !important; }
  .case-nav-btn { width: 46px !important; height: 46px !important; }

  .case-slider-viewport {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .case-slider-track { min-height: inherit; }
  .case-slide {
    width: min(100%, calc(100vw - 32px)) !important;
    padding: 46px 20px 28px !important;
    border-radius: 22px !important;
    min-height: 0 !important;
  }
  .case-slide h3 {
    font-size: clamp(32px, 10vw, 44px) !important;
    line-height: 1.04 !important;
    letter-spacing: -1.4px !important;
    margin-bottom: 12px !important;
  }
  .case-slide .text-sm { font-size: 14px !important; line-height: 1.45 !important; }
  .case-slide .grid {
    gap: 10px !important;
    margin-bottom: 24px !important;
  }
  .case-stat {
    min-height: 78px !important;
    padding: 13px 12px !important;
  }
  .case-stat span {
    font-size: 9px !important;
    letter-spacing: 1.25px !important;
    line-height: 1.15 !important;
  }
  .case-stat b {
    font-size: clamp(13px, 3.8vw, 15px) !important;
    line-height: 1.18 !important;
  }
  .case-status {
    font-size: 10px !important;
    letter-spacing: 1.3px !important;
    padding: 9px 12px !important;
  }
  .case-file-label { top: 20px !important; right: 20px !important; }

  #why, #workflow { padding-top: 64px !important; padding-bottom: 64px !important; }
  #directions { padding-top: 64px !important; padding-bottom: 64px !important; }

  .gta-card,
  .direction-card {
    border-radius: 22px !important;
    padding: 26px !important;
  }
  .direction-card h3 {
    font-size: clamp(28px, 8.5vw, 38px) !important;
    letter-spacing: -1px !important;
  }
  .direction-card .text-2xl {
    font-size: clamp(20px, 6vw, 26px) !important;
    line-height: 1.12 !important;
  }

  .step-card {
    gap: 18px !important;
    align-items: flex-start;
  }
  .step-number {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
    font-size: 30px !important;
  }
  .step-card h4 {
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.08 !important;
  }

  .yellow-glow-strong { box-shadow: 0 0 22px rgba(255,212,0,.38), 0 0 42px rgba(255,212,0,.17) !important; }
  footer .font-black { line-height: 1.08 !important; }
}

@media (max-width: 380px) {
  .case-slide { width: calc(100vw - 24px) !important; padding-left: 16px !important; padding-right: 16px !important; }
  .case-slide .grid { grid-template-columns: 1fr !important; }
  .case-stat { min-height: 64px !important; }
  #case-counter { width: 100%; }
  #cases > .flex:first-child > .flex.items-center { flex-wrap: wrap; }
  .gta-heading { font-size: clamp(3rem, 14vw, 3.8rem) !important; }
}