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

   :root {
       --primary: #639008;
       --primary-light: #84C907;
       --dark: #000000;
       --card: #141416;
       --card-2: #1C1C1E;
       --text: #FFFFFF;
       --muted: #9BA0A8;
       --border: rgba(99, 144, 8, 0.3);
       --glow: rgba(99, 144, 8, 0.45);
       --radius: 18px;
   }

   html {
       scroll-behavior: smooth;
   }

   body {
       font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
       background: var(--dark);
       color: var(--text);
       line-height: 1.6;
       overflow-x: hidden;
   }

   ::selection {
       background: var(--primary);
       color: #fff;
   }

   ::-webkit-scrollbar {
       width: 10px;
   }

   ::-webkit-scrollbar-track {
       background: #0a0a0a;
   }

   ::-webkit-scrollbar-thumb {
       background: var(--primary);
       border-radius: 8px;
   }

   section {
       scroll-margin-top: 90px;
   }

   .wrap {
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 2rem;
   }

   .accent {
       color: var(--primary-light);
   }

   /* ============ HEADER ============ */
   header {
       background: rgba(0, 0, 0, 0.72);
       backdrop-filter: blur(14px);
       padding: 0.9rem 2rem;
       position: sticky;
       top: 0;
       z-index: 100;
       border-bottom: 1px solid var(--border);
   }

   nav {
       max-width: 1200px;
       margin: 0 auto;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 1rem;
   }

   .nav-left {
       display: flex;
       align-items: center;
       gap: 1.2rem;
   }

   .logo {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       font-size: 1.5rem;
       font-weight: 800;
       color: var(--text);
   }

   .logo svg {
       width: 34px;
       height: 34px;
   }

   .lang-switch {
       display: flex;
       background: var(--card-2);
       border-radius: 50px;
       padding: 3px;
       border: 1px solid var(--border);
   }

   .lang-switch button {
       background: transparent;
       color: var(--muted);
       border: none;
       cursor: pointer;
       font-family: inherit;
       font-weight: 700;
       font-size: 0.72rem;
       padding: 0.35rem 0.8rem;
       border-radius: 50px;
       transition: all 0.25s ease;
       letter-spacing: 0.04em;
   }

   .lang-switch button.active {
       background: var(--primary);
       color: #fff;
   }

   nav ul {
       display: flex;
       list-style: none;
       gap: 2rem;
       align-items: center;
   }

   nav ul a {
       color: var(--text);
       text-decoration: none;
       font-weight: 600;
       font-size: 0.95rem;
       transition: color 0.25s ease;
       position: relative;
   }

   nav ul a:not(.nav-btn)::after {
       content: '';
       position: absolute;
       left: 0;
       bottom: -6px;
       height: 2px;
       width: 0;
       background: var(--primary-light);
       transition: width 0.3s ease;
   }

   nav ul a:not(.nav-btn):hover {
       color: var(--primary-light);
   }

   nav ul a:not(.nav-btn):hover::after {
       width: 100%;
   }

   .nav-btn {
       background: var(--primary);
       color: #fff;
       padding: 0.55rem 1.5rem;
       border-radius: 50px;
       font-weight: 700;
       box-shadow: 0 0 0 0 var(--glow);
       animation: pulseGlow 2.4s infinite;
       transition: transform 0.25s ease, background 0.25s ease;
   }

   .nav-btn:hover {
       background: var(--primary-light);
       transform: translateY(-2px);
   }

   @keyframes pulseGlow {
       0% {
           box-shadow: 0 0 0 0 var(--glow);
       }

       70% {
           box-shadow: 0 0 0 14px rgba(99, 144, 8, 0);
       }

       100% {
           box-shadow: 0 0 0 0 rgba(99, 144, 8, 0);
       }
   }

   .hamburger {
       display: none;
       background: transparent;
       border: 1px solid var(--border);
       border-radius: 10px;
       width: 44px;
       height: 44px;
       cursor: pointer;
       align-items: center;
       justify-content: center;
       padding: 10px;
       transition: opacity 0.25s ease;
   }

   .hamburger:hover {
       opacity: 0.8;
   }

   .hamburger-box {
       transform: scale(0.6);
       transform-origin: center;
   }

   .hamburger-inner,
   .hamburger-inner::before,
   .hamburger-inner::after {
       background-color: #fff;
   }

   .hamburger.is-active .hamburger-inner,
   .hamburger.is-active .hamburger-inner::before,
   .hamburger.is-active .hamburger-inner::after {
       background-color: #fff;
   }

   .mobile-menu {
       position: fixed;
       inset: 0;
       top: 62px;
       background: rgba(0, 0, 0, 0.97);
       z-index: 99;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 1.8rem;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.3s ease;
   }

   .mobile-menu.open {
       opacity: 1;
       pointer-events: auto;
   }

   .mobile-menu a {
       color: var(--text);
       text-decoration: none;
       font-size: 1.4rem;
       font-weight: 700;
   }

   .mobile-menu a:hover {
       color: var(--primary-light);
   }

   /* ============ HERO ============ */
   .hero {
       position: relative;
       overflow: hidden;
       background:
           radial-gradient(900px 500px at 85% -10%, rgba(99, 144, 8, 0.25), transparent 60%),
           radial-gradient(700px 500px at -10% 110%, rgba(132, 201, 7, 0.12), transparent 60%),
           var(--dark);
   }

   .hero-grid-bg {
       position: absolute;
       inset: 0;
       opacity: 0.5;
       pointer-events: none;
       background-image:
           linear-gradient(rgba(99, 144, 8, 0.07) 1px, transparent 1px),
           linear-gradient(90deg, rgba(99, 144, 8, 0.07) 1px, transparent 1px);
       background-size: 46px 46px;
       mask-image: radial-gradient(circle at 70% 30%, #000 30%, transparent 75%);
   }

   .ball {
       position: absolute;
       bottom: -40px;
       width: 22px;
       height: 22px;
       border-radius: 50%;
       background: radial-gradient(circle at 30% 30%, var(--primary-light), var(--primary) 70%);
       opacity: 0.18;
       filter: blur(1px);
       animation: floatBall linear infinite;
   }

   @keyframes floatBall {
       0% {
           transform: translateY(0) rotate(0deg);
       }

       100% {
           transform: translateY(-150px) rotate(360deg);
       }
   }

   #balls {
       position: absolute;
       inset: 0;
       overflow: hidden;
       pointer-events: none;
   }

   .hero-content {
       max-width: 1200px;
       margin: 0 auto;
       padding: 5rem 2rem 4rem;
       display: grid;
       grid-template-columns: 1.05fr 0.95fr;
       gap: 4rem;
       align-items: center;
       position: relative;
       z-index: 2;
   }

   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 0.5rem;
       background: rgba(99, 144, 8, 0.12);
       border: 1px solid var(--border);
       border-radius: 50px;
       padding: 0.4rem 1rem;
       font-size: 0.8rem;
       font-weight: 700;
       color: var(--primary-light);
       margin-bottom: 1.5rem;
   }

   .hero-badge .dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--primary-light);
       animation: blink 1.4s infinite;
   }

   @keyframes blink {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.25;
       }
   }

   .hero-text h1 {
       font-size: 3.6rem;
       font-weight: 900;
       line-height: 1.08;
       margin-bottom: 1.2rem;
       letter-spacing: -0.02em;
   }

   .hero-text p {
       font-size: 1.15rem;
       color: var(--muted);
       margin-bottom: 2.2rem;
       max-width: 540px;
   }

   .cta-buttons {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .btn {
       padding: 1rem 2rem;
       border-radius: 50px;
       font-size: 1rem;
       font-weight: 700;
       cursor: pointer;
       transition: all 0.3s ease;
       text-decoration: none;
       display: inline-flex;
       align-items: center;
       gap: 0.6rem;
       font-family: inherit;
       border: none;
   }

   .btn svg {
       width: 20px;
       height: 20px;
   }

   .btn-primary {
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
       color: #fff;
       box-shadow: 0 10px 30px rgba(99, 144, 8, 0.4);
   }

   .btn-primary:hover {
       transform: translateY(-3px);
       box-shadow: 0 14px 36px rgba(132, 201, 7, 0.5);
   }

   .btn-secondary {
       background: transparent;
       color: var(--primary-light);
       border: 2px solid var(--primary);
   }

   .btn-secondary:hover {
       background: var(--primary);
       color: #fff;
       transform: translateY(-3px);
   }

   .hero-stats-mini {
       display: flex;
       gap: 2.4rem;
       margin-top: 2.5rem;
   }

   .hero-stats-mini .hs-num {
       font-size: 1.7rem;
       font-weight: 900;
       color: var(--primary-light);
   }

   .hero-stats-mini .hs-lab {
       font-size: 0.8rem;
       color: var(--muted);
   }

   /* phone mockup */
   .hero-visual {
       display: flex;
       justify-content: center;
       position: relative;
   }

   .phone-glow {
       position: absolute;
       width: 340px;
       height: 340px;
       border-radius: 50%;
       background: radial-gradient(circle, var(--glow) 0%, transparent 65%);
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       filter: blur(10px);
   }

   .phone {
       position: relative;
       width: 290px;
       height: 580px;
       background: #0B0B0D;
       border-radius: 44px;
       border: 2px solid rgba(255, 255, 255, 0.09);
       box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(99, 144, 8, 0.15);
       overflow: hidden;
       z-index: 2;
   }

   .phone-notch {
       position: absolute;
       top: 0;
       left: 50%;
       transform: translateX(-50%);
       width: 130px;
       height: 26px;
       background: #0B0B0D;
       border-radius: 0 0 16px 16px;
       z-index: 5;
   }

   .app-screen {
       height: 100%;
       padding: 40px 14px 14px;
       display: flex;
       flex-direction: column;
       gap: 10px;
   }

   .app-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .app-title {
       font-size: 0.85rem;
       font-weight: 800;
   }

   .app-match {
       background: linear-gradient(135deg, #1a1f10, #14161a);
       border: 1px solid var(--border);
       border-radius: 14px;
       padding: 12px;
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .app-match .am-court {
       font-size: 0.62rem;
       color: var(--muted);
       text-transform: uppercase;
       letter-spacing: 0.08em;
   }

   .app-match .am-teams {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 0.72rem;
       font-weight: 700;
   }

   .app-match .am-score {
       font-size: 1.5rem;
       font-weight: 900;
       color: var(--primary-light);
       text-align: center;
   }

   .app-match .am-set {
       text-align: center;
       font-size: 0.6rem;
       color: var(--muted);
   }

   .app-match .am-bar {
       height: 4px;
       border-radius: 4px;
       background: #2a2d2f;
       overflow: hidden;
   }

   .app-match .am-bar span {
       display: block;
       height: 100%;
       width: 62%;
       background: linear-gradient(90deg, var(--primary), var(--primary-light));
   }

   .app-bracket-title {
       font-size: 0.7rem;
       font-weight: 800;
       color: var(--muted);
       margin-top: 2px;
       letter-spacing: 0.06em;
       text-transform: uppercase;
   }

   .app-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: #101114;
       border: 1px solid rgba(255, 255, 255, 0.06);
       border-radius: 10px;
       padding: 7px 10px;
       font-size: 0.66rem;
   }

   .app-row .name {
       font-weight: 600;
   }

   .app-row .pts {
       font-weight: 800;
       color: var(--primary-light);
   }

   .app-row.win {
       border-color: var(--primary);
       background: rgba(99, 144, 8, 0.12);
   }

   .app-ranking {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 8px;
   }

   .app-rank-card {
       background: #101114;
       border: 1px solid rgba(255, 255, 255, 0.06);
       border-radius: 10px;
       padding: 8px;
   }

   .app-rank-card .pos {
       font-size: 0.6rem;
       color: var(--primary-light);
       font-weight: 800;
   }

   .app-rank-card .nm {
       font-size: 0.62rem;
       font-weight: 700;
       margin-top: 2px;
   }

   .app-nav {
       display: flex;
       justify-content: space-around;
       margin-top: auto;
       border-top: 1px solid rgba(255, 255, 255, 0.06);
       padding-top: 8px;
   }

   .app-nav svg {
       width: 20px;
       height: 20px;
       stroke: #6b7077;
   }

   .app-nav .active svg {
       stroke: var(--primary-light);
   }

   /* ============ LIVE TICKER ============ */
   .ticker {
       border-top: 1px solid var(--border);
       border-bottom: 1px solid var(--border);
       background: #0b0c08;
       overflow: hidden;
       padding: 0.7rem 0;
       position: relative;
   }

   .ticker-track {
       display: flex;
       gap: 3.5rem;
       white-space: nowrap;
       animation: marquee 30s linear infinite;
       width: max-content;
   }

   .ticker:hover .ticker-track {
       animation-play-state: paused;
   }

   .ticker-item {
       display: flex;
       align-items: center;
       gap: 0.6rem;
       font-size: 0.85rem;
       font-weight: 600;
       color: var(--muted);
   }

   .ticker-item .t-dot {
       width: 7px;
       height: 7px;
       border-radius: 50%;
       background: var(--primary-light);
   }

   .ticker-item .t-score {
       color: var(--text);
       font-weight: 800;
   }

   @keyframes marquee {
       from {
           transform: translateX(0);
       }

       to {
           transform: translateX(-50%);
       }
   }

   /* ============ GENERIC SECTIONS ============ */
   .section {
       padding: 6rem 2rem;
   }

   .section-title {
       text-align: center;
       font-size: 2.7rem;
       font-weight: 900;
       margin-bottom: 1rem;
       letter-spacing: -0.01em;
   }

   .section-subtitle {
       text-align: center;
       color: var(--muted);
       font-size: 1.1rem;
       max-width: 620px;
       margin: 0 auto 4rem;
   }

   /* ============ DRAW DEMO ============ */
   .draw-demo {
       background: linear-gradient(180deg, #07070a 0%, var(--card) 100%);
       border: 1px solid var(--border);
       border-radius: 24px;
       padding: 3rem 2rem;
       margin-top: 3rem;
       position: relative;
       overflow: hidden;
   }

   .draw-demo::before {
       content: '';
       position: absolute;
       top: -40%;
       left: -20%;
       width: 500px;
       height: 500px;
       background: radial-gradient(circle, rgba(99, 144, 8, 0.12), transparent 70%);
       pointer-events: none;
   }

   .draw-toolbar {
       display: flex;
       justify-content: center;
       gap: 1rem;
       margin: 2rem 0 2.5rem;
       flex-wrap: wrap;
   }

   .bracket {
       display: flex;
       gap: 2rem;
       justify-content: center;
       align-items: stretch;
       min-height: 420px;
   }

   .bcol {
       display: flex;
       flex-direction: column;
       justify-content: space-around;
       gap: 1rem;
       flex: 1;
       max-width: 280px;
   }

   .bround-label {
       text-align: center;
       font-size: 0.72rem;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       color: var(--primary-light);
       margin-bottom: 0.6rem;
   }

   .bmatch {
       opacity: 0;
       transform: translateY(14px) scale(0.96);
       transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
   }

   .bmatch.show {
       opacity: 1;
       transform: translateY(0) scale(1);
   }

   .bmatch.winner-col {
       border-color: rgba(255, 255, 255, 0.06);
   }

   .bteam {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: var(--card-2);
       border: 1px solid rgba(255, 255, 255, 0.07);
       padding: 0.6rem 0.9rem;
       font-size: 0.85rem;
       font-weight: 600;
   }

   .bteam:first-child {
       border-radius: 10px 10px 0 0;
   }

   .bteam:last-child {
       border-radius: 0 0 10px 10px;
       border-top: none;
   }

   .bteam .score {
       font-weight: 800;
       color: var(--muted);
   }

   .bteam.win {
       background: rgba(99, 144, 8, 0.18);
       border-color: var(--primary);
   }

   .bteam.win .score {
       color: var(--primary-light);
   }

   .bchampion {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 0.8rem;
       border: 1px dashed var(--primary);
       border-radius: 16px;
       padding: 2rem 1.5rem;
       text-align: center;
       opacity: 0;
       transform: scale(0.9);
       transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
   }

   .bchampion.show {
       opacity: 1;
       transform: scale(1);
   }

   .bchampion svg {
       width: 46px;
       height: 46px;
       stroke: #E8B923;
       fill: rgba(232, 185, 35, 0.15);
   }

   .bchampion .bc-label {
       font-size: 0.72rem;
       text-transform: uppercase;
       letter-spacing: 0.12em;
       color: var(--primary-light);
       font-weight: 800;
   }

   .bchampion .bc-name {
       font-size: 1.2rem;
       font-weight: 900;
   }

   /* ============ HOW IT WORKS ============ */
   .how-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 1.5rem;
       counter-reset: step;
   }

   .how-step {
       background: var(--card);
       border: 1px solid rgba(255, 255, 255, 0.06);
       border-radius: var(--radius);
       padding: 2rem 1.5rem;
       position: relative;
       transition: all 0.3s ease;
   }

   .how-step:hover {
       transform: translateY(-6px);
       border-color: var(--primary);
       box-shadow: 0 14px 34px rgba(99, 144, 8, 0.18);
   }

   .how-step::before {
       counter-increment: step;
       content: counter(step, decimal-leading-zero);
       position: absolute;
       top: 1.2rem;
       right: 1.3rem;
       font-size: 2.2rem;
       font-weight: 900;
       color: rgba(99, 144, 8, 0.22);
   }

   .how-step svg {
       width: 38px;
       height: 38px;
       stroke: var(--primary-light);
       margin-bottom: 1.2rem;
   }

   .how-step h3 {
       font-size: 1.15rem;
       margin-bottom: 0.6rem;
   }

   .how-step p {
       color: var(--muted);
       font-size: 0.9rem;
   }

   /* ============ FEATURES ============ */
   .features-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
       gap: 1.8rem;
   }

   .feature-card {
       background: var(--card);
       padding: 2rem;
       border-radius: var(--radius);
       border: 1px solid rgba(255, 255, 255, 0.06);
       transition: all 0.3s ease;
       position: relative;
       overflow: hidden;
       transform-style: preserve-3d;
       will-change: transform;
   }

   .feature-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 3px;
       background: linear-gradient(90deg, var(--primary), var(--primary-light));
       transform: scaleX(0);
       transform-origin: left;
       transition: transform 0.35s ease;
   }

   .feature-card:hover {
       border-color: var(--primary);
       box-shadow: 0 18px 40px rgba(99, 144, 8, 0.22);
       transform: translateY(-4px);
   }

   .feature-card:hover::before {
       transform: scaleX(1);
   }

   .feature-icon {
       width: 56px;
       height: 56px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(99, 144, 8, 0.14);
       border: 1px solid var(--border);
       margin-bottom: 1.2rem;
   }

   .feature-icon svg {
       width: 28px;
       height: 28px;
       stroke: var(--primary-light);
   }

   .feature-card h3 {
       font-size: 1.25rem;
       margin-bottom: 0.6rem;
   }

   .feature-card p {
       color: var(--muted);
       font-size: 0.92rem;
   }

   .dupr-note {
       margin-top: 2.2rem;
       margin-left: auto;
       margin-right: auto;
       max-width: 760px;
       text-align: center;
       color: var(--muted);
       font-size: 0.95rem;
       background: rgba(99, 144, 8, 0.08);
       border: 1px dashed var(--border);
       border-radius: var(--radius);
       padding: 1.2rem 1.5rem;
   }

   /* ============ STATS ============ */
   .stats {
       padding: 2rem 2rem;
   }

   .stats-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
       gap: 1.5rem;
   }

   .stat-item {
       text-align: center;
       padding: 2.4rem 1.5rem;
       border: 1px solid var(--border);
       border-radius: var(--radius);
       background: linear-gradient(160deg, rgba(99, 144, 8, 0.1), transparent 65%);
   }

   .stat-number {
       font-size: 3rem;
       font-weight: 900;
       color: var(--primary-light);
       line-height: 1.1;
   }

   .stat-text {
       color: var(--muted);
       font-size: 0.92rem;
       margin-top: 0.4rem;
   }

   /* ============ STORIES ============ */
   .stories-section {
       background: linear-gradient(180deg, var(--card) 0%, var(--dark) 100%);
   }

   .stories-carousel {
       position: relative;
       max-width: 1100px;
       margin: 0 auto;
       padding: 0 3.2rem;
   }

   .stories-track {
       display: flex;
       gap: 1.2rem;
       overflow-x: auto;
       scroll-snap-type: x mandatory;
       padding: 0.5rem 0.2rem 1.5rem;
       scrollbar-width: none;
       -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
       mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
   }

   .stories-track::-webkit-scrollbar {
       display: none;
   }

   .story-card {
       flex: 0 0 220px;
       scroll-snap-align: start;
       height: 340px;
       border-radius: 18px;
       cursor: pointer;
       border: 2px solid rgba(255, 255, 255, 0.08);
       position: relative;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
       padding: 1.2rem;
       transition: transform 0.3s ease, border-color 0.3s ease;
   }

   .story-card:hover {
       transform: translateY(-6px);
       border-color: var(--primary);
   }

   .story-card .sc-type {
       position: absolute;
       top: 0.9rem;
       left: 0.9rem;
       z-index: 2;
       font-size: 0.62rem;
       font-weight: 700;
       letter-spacing: 0.12em;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.9);
       background: rgba(0, 0, 0, 0.45);
       border: 1px solid rgba(255, 255, 255, 0.18);
       border-radius: 999px;
       padding: 0.28rem 0.7rem;
   }

   .story-card .sc-img {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   .story-card .sc-grad {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.05) 70%);
   }

   .story-card .sc-label {
       position: relative;
       z-index: 2;
       font-weight: 800;
       font-size: 0.95rem;
       text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
   }

   .story-card .sc-tag {
       position: relative;
       z-index: 2;
       font-size: 0.7rem;
       color: rgba(255, 255, 255, 0.85);
       text-transform: uppercase;
       letter-spacing: 0.1em;
       margin-top: 0.3rem;
   }

   .stories-dots {
       display: flex;
       justify-content: center;
       gap: 0.5rem;
       margin-top: 0.5rem;
   }

   .stories-dots button {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       border: none;
       background: #333;
       cursor: pointer;
       transition: all 0.3s ease;
       padding: 0;
   }

   .stories-dots button.active {
       background: var(--primary-light);
       width: 22px;
       border-radius: 6px;
   }

   .sc-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       z-index: 5;
       width: 42px;
       height: 42px;
       border-radius: 50%;
       border: 1px solid rgba(255, 255, 255, 0.12);
       background: rgba(20, 20, 22, 0.85);
       color: #fff;
       font-size: 1rem;
       line-height: 1;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.3s ease;
   }

   .sc-arrow:hover {
       border-color: var(--primary);
       color: var(--primary-light);
   }

   .sc-prev {
       left: -0.6rem;
   }

   .sc-next {
       right: -0.6rem;
   }

   /* story viewer overlay */
   .story-viewer {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.95);
       z-index: 200;
       display: none;
       align-items: center;
       justify-content: center;
       flex-direction: column;
   }

   .story-viewer.open {
       display: flex;
   }

   .sv-stage {
       position: relative;
       width: min(340px, 90vw);
       height: min(600px, 80vh);
       border-radius: 20px;
       overflow: hidden;
   }

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

   .sv-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 75%);
       z-index: 2;
   }

   .sv-progress {
       display: flex;
       gap: 4px;
       padding: 14px;
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       z-index: 3;
   }

   .sv-progress span {
       height: 3px;
       flex: 1;
       background: rgba(255, 255, 255, 0.3);
       border-radius: 4px;
       overflow: hidden;
   }

   .sv-progress span i {
       display: block;
       height: 100%;
       width: 0;
       background: #fff;
   }

   .sv-body {
       position: absolute;
       inset: 0;
       z-index: 3;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 2rem;
   }

   .sv-body .sv-label {
       color: #fff;
       font-weight: 800;
       font-size: 1.1rem;
       text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
   }

   .sv-close {
       position: absolute;
       top: 18px;
       right: 18px;
       z-index: 5;
       background: rgba(255, 255, 255, 0.1);
       border: none;
       color: #fff;
       width: 38px;
       height: 38px;
       border-radius: 50%;
       font-size: 1.2rem;
       cursor: pointer;
   }

   .sv-nav {
       margin-top: 1rem;
       display: flex;
       gap: 1rem;
   }

   .sv-nav button {
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.15);
       color: #fff;
       border-radius: 50px;
       padding: 0.5rem 1.4rem;
       font-weight: 700;
       cursor: pointer;
       font-family: inherit;
       transition: all 0.25s ease;
   }

   .sv-nav button:hover {
       background: var(--primary);
       border-color: var(--primary);
   }

   /* ============ TESTIMONIALS ============ */
   .testi-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 1.8rem;
   }

   .testi-card {
       background: var(--card);
       border: 1px solid rgba(255, 255, 255, 0.06);
       border-radius: var(--radius);
       padding: 2rem;
       transition: all 0.3s ease;
   }

   .testi-card:hover {
       border-color: var(--primary);
       transform: translateY(-5px);
       box-shadow: 0 14px 34px rgba(99, 144, 8, 0.16);
   }

   .testi-stars {
       display: flex;
       gap: 3px;
       margin-bottom: 1rem;
   }

   .testi-stars svg {
       width: 18px;
       height: 18px;
       fill: #E8B923;
       stroke: #E8B923;
   }

   .testi-quote {
       color: var(--text);
       font-size: 1rem;
       font-style: italic;
       line-height: 1.7;
       margin-bottom: 1.5rem;
   }

   .testi-person {
       display: flex;
       align-items: center;
       gap: 0.9rem;
   }

   .testi-avatar {
       width: 46px;
       height: 46px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-weight: 800;
       color: #fff;
       font-size: 1.05rem;
   }

   .testi-name {
       font-weight: 800;
       font-size: 0.95rem;
   }

   .testi-role {
       color: var(--muted);
       font-size: 0.8rem;
   }

   /* ============ FAQ ============ */
   .faq-list {
       max-width: 760px;
       margin: 0 auto;
       display: flex;
       flex-direction: column;
       gap: 1rem;
   }

   .faq-item {
       background: var(--card);
       border: 1px solid rgba(255, 255, 255, 0.07);
       border-radius: 14px;
       overflow: hidden;
   }

   .faq-item.open {
       border-color: var(--primary);
   }

   .faq-q {
       width: 100%;
       background: transparent;
       border: none;
       color: var(--text);
       text-align: left;
       font-family: inherit;
       font-size: 1.02rem;
       font-weight: 700;
       padding: 1.2rem 1.4rem;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 1rem;
   }

   .faq-q .plus {
       width: 26px;
       height: 26px;
       border-radius: 50%;
       border: 2px solid var(--primary);
       color: var(--primary-light);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.1rem;
       flex-shrink: 0;
       transition: transform 0.3s ease, background 0.3s ease;
   }

   .faq-item.open .plus {
       transform: rotate(45deg);
       background: var(--primary);
       color: #fff;
   }

   .faq-a {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.4s ease;
   }

   .faq-a p {
       padding: 0 1.4rem 1.3rem;
       color: var(--muted);
       font-size: 0.95rem;
   }

   /* ============ DOWNLOAD ============ */
   .download {
       background: linear-gradient(180deg, var(--dark) 0%, var(--card) 100%);
       text-align: center;
       position: relative;
       overflow: hidden;
   }

   .download::before {
       content: '';
       position: absolute;
       top: -30%;
       left: 50%;
       transform: translateX(-50%);
       width: 800px;
       height: 400px;
       background: radial-gradient(circle, rgba(99, 144, 8, 0.2), transparent 70%);
       pointer-events: none;
   }

   .download-buttons {
       display: flex;
       justify-content: center;
       gap: 1.5rem;
       flex-wrap: wrap;
       margin: 2.5rem 0 1.2rem;
       position: relative;
       z-index: 2;
   }

   .app-button {
       display: flex;
       align-items: center;
       gap: 0.9rem;
       padding: 0.9rem 1.8rem;
       background: var(--card-2);
       border: 1px solid var(--border);
       border-radius: 16px;
       text-decoration: none;
       color: var(--text);
       transition: all 0.3s ease;
   }

   .app-button svg {
       width: 30px;
       height: 30px;
   }

   .app-button:hover {
       transform: translateY(-3px);
       border-color: var(--primary-light);
       box-shadow: 0 12px 28px rgba(99, 144, 8, 0.3);
       background: #202015;
   }

   .app-button-text {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       line-height: 1.25;
   }

   .app-button-label {
       font-size: 0.72rem;
       color: var(--muted);
   }

   .app-button-name {
       font-size: 1.05rem;
       font-weight: 800;
   }

   .req-os {
       color: var(--muted);
       font-size: 0.85rem;
   }

   /* ============ CONTACT ============ */
   .contact-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 1.8rem;
   }

   .contact-item {
       background: var(--card);
       padding: 2rem;
       border-radius: var(--radius);
       border: 1px solid rgba(255, 255, 255, 0.06);
       text-align: center;
       transition: all 0.3s ease;
   }

   .contact-item:hover {
       border-color: var(--primary);
       transform: translateY(-4px);
       box-shadow: 0 14px 30px rgba(99, 144, 8, 0.16);
   }

   .contact-icon {
       width: 58px;
       height: 58px;
       margin: 0 auto 1rem;
       border-radius: 16px;
       background: rgba(99, 144, 8, 0.14);
       border: 1px solid var(--border);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .contact-icon svg {
       width: 28px;
       height: 28px;
       stroke: var(--primary-light);
   }

   .contact-item h3 {
       margin-bottom: 0.5rem;
       font-size: 1.1rem;
   }

   .contact-item p,
   .contact-item a {
       color: var(--muted);
       text-decoration: none;
       transition: color 0.25s ease;
       font-size: 0.95rem;
   }

   .contact-item a:hover {
       color: var(--primary-light);
   }

   /* ============ FOOTER ============ */
   footer {
       background: #0a0a0a;
       padding: 3rem 2rem;
       text-align: center;
       border-top: 1px solid var(--border);
       position: relative;
       overflow: hidden;
   }

   .footer-links {
       display: flex;
       justify-content: center;
       gap: 2rem;
       flex-wrap: wrap;
       margin: 1.2rem 0;
   }

   .footer-links a {
       color: var(--muted);
       text-decoration: none;
       font-size: 0.9rem;
       transition: color 0.25s ease;
   }

   .footer-links a:hover {
       color: var(--primary-light);
   }

   footer p {
       color: var(--muted);
       font-size: 0.9rem;
   }

   footer .logo,
   footer .footer-links,
   footer p {
       position: relative;
       z-index: 1;
   }

   /* ============ FLOATING CTA ============ */
   .float-cta {
       position: fixed;
       bottom: 24px;
       right: 24px;
       z-index: 120;
       display: flex;
       align-items: center;
       gap: 0.6rem;
       background: linear-gradient(135deg, var(--primary), var(--primary-light));
       color: #fff;
       border: none;
       border-radius: 50px;
       padding: 0.9rem 1.5rem;
       font-family: inherit;
       font-weight: 800;
       font-size: 0.95rem;
       cursor: pointer;
       box-shadow: 0 12px 30px rgba(99, 144, 8, 0.45);
       opacity: 0;
       transform: translateY(20px) scale(0.9);
       pointer-events: none;
       transition: all 0.35s ease;
       text-decoration: none;
   }

   .float-cta svg {
       width: 22px;
       height: 22px;
   }

   .float-cta.show {
       opacity: 1;
       transform: translateY(0) scale(1);
       pointer-events: auto;
   }

   .float-cta:hover {
       transform: translateY(-3px);
   }

   /* ============ SCROLL REVEAL ============ */
   .reveal {
       opacity: 0;
       transform: translateY(34px);
       transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
   }

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

   .reveal-delay-1 {
       transition-delay: 0.08s;
   }

   .reveal-delay-2 {
       transition-delay: 0.16s;
   }

   .reveal-delay-3 {
       transition-delay: 0.24s;
   }

   /* ============ RESPONSIVE ============ */
   @media (max-width: 900px) {
       .hero-content {
           grid-template-columns: 1fr;
           text-align: center;
           gap: 3rem;
       }

       .hero-text p {
           margin-left: auto;
           margin-right: auto;
       }

       .cta-buttons,
       .hero-stats-mini {
           justify-content: center;
       }

       .how-grid {
           grid-template-columns: repeat(2, 1fr);
       }

       .bracket {
           flex-direction: column;
           align-items: center;
       }

       .bcol {
           max-width: 100%;
           width: 100%;
       }
   }

   @media (max-width: 768px) {
       nav ul {
           display: none;
       }

       .hamburger {
           display: flex;
       }

       .hero-text h1 {
           font-size: 2.3rem;
       }

       .section-title {
           font-size: 2rem;
       }

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

       .cta-buttons {
           flex-direction: column;
       }

       .btn {
           width: 100%;
           justify-content: center;
       }

       .stats-grid {
           grid-template-columns: repeat(2, 1fr);
       }

       .phone {
           width: 260px;
           height: 520px;
       }

       .section {
           padding: 4rem 1.2rem;
       }

       .stories-carousel {
           padding: 0;
       }

       .sc-arrow {
           display: none;
       }

       .story-card {
           flex-basis: 190px;
       }

       .draw-demo {
           padding: 2rem 1rem;
       }

       .float-cta {
           bottom: 16px;
           right: 16px;
           padding: 0.8rem 1.2rem;
       }
   }

   @media (prefers-reduced-motion: reduce) {

       *,
       *::before,
       *::after {
           animation-duration: 0.01ms !important;
           transition-duration: 0.01ms !important;
       }
   }

   .hamburger-inner,
   .hamburger-inner::before,
   .hamburger-inner::after {
       width: 100% !important;
       height: 2px !important;
   }