/* =========================================================
   Diverge Website — Redesigned Stylesheet
   Theme: Sleek black/grey/yellow, minimal, modern
   ========================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800;14..32,900&display=swap');

   :root {
     --primary:       #ffcc00; /* Vibrant Yellow */
     --primary-dark:  #e6b800;
     --secondary:     #6b7280; /* Grey */
     --accent:        #9ca3af;
     --yellow:        #ffcc00;
     --yellow-dark:   #e6b800;
     --bg:            #000000;
     --bg-1:          #0a0a0a;
     --bg-2:          #141414;
     --bg-card:       #1a1a1a;
     --bg-card-2:     #242424;
     --text:          #ffffff;
     --text-muted:    #9ca3af;
     --text-dim:      #6b7280;
     --border:        rgba(255,255,255,0.08);
     --border-bright: rgba(255,255,255,0.15);
     --grad-brand:    linear-gradient(135deg, var(--primary), var(--primary-dark));
     --grad-yellow:   linear-gradient(135deg, var(--yellow), var(--yellow-dark));
     --grad-hero:     radial-gradient(ellipse 120% 80% at 50% -10%, rgba(255,204,0,0.12) 0%, transparent 60%);
     --shadow-card:   0 8px 30px rgba(0,0,0,0.6);
     --shadow-glow:   0 0 30px rgba(255,204,0,0.2);
     --radius:        16px;
     --radius-sm:     10px;
     --radius-pill:   999px;
     --nav-h:         70px;
     --max-w:         1200px;
     --transition:    0.25s cubic-bezier(0.2, 0, 0, 1);
   }
   
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { scroll-behavior: smooth; }
   body {
     font-family: 'Inter', system-ui, sans-serif;
     background: var(--bg);
     color: var(--text);
     line-height: 1.6;
     overflow-x: hidden;
   }
   a { color: inherit; text-decoration: none; }
   img { max-width: 100%; display: block; }
   button, input, textarea, select { font-family: inherit; font-size: inherit; outline: none; border: none; }
   ul { list-style: none; }
   
   .container { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
   .text-center { text-align: center; }
   .text-muted { color: var(--text-muted); }
   
   /* Gradient text */
   .grad-text {
     background: var(--grad-brand);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
   }
   .grad-text-yellow {
     background: var(--grad-yellow);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
   }
   
   /* Typography */
   h1 { font-size: clamp(2.2rem, 6vw, 3.8rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
   h2 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.25; }
   h3 { font-size: 1.3rem; font-weight: 600; line-height: 1.3; }
   h4 { font-size: 1rem; font-weight: 600; }
   p  { color: var(--text-muted); font-size: 1rem; }
   
   .label {
     display: inline-block;
     font-size: 0.75rem;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--primary);
     margin-bottom: 12px;
   }
   
   /* Buttons */
   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 12px 28px;
     border-radius: var(--radius-pill);
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
     transition: all var(--transition);
     white-space: nowrap;
   }
   .btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
   .btn:active { transform: translateY(0); }
   .btn-yellow {
     background: var(--grad-yellow);
     color: #000;
     box-shadow: 0 4px 14px rgba(255,204,0,0.3);
   }
   .btn-ghost {
     background: transparent;
     color: var(--text-muted);
     border: 1px solid var(--border-bright);
   }
   .btn-ghost:hover { color: var(--text); border-color: var(--primary); }
   .btn-sm { padding: 8px 20px; font-size: 0.85rem; }
   .btn-lg { padding: 14px 36px; font-size: 1rem; }
   
   /* Navigation */
   .nav {
     position: fixed;
     top: 0; left: 0; right: 0;
     height: var(--nav-h);
     z-index: 100;
     background: rgba(0,0,0,0.8);
     backdrop-filter: blur(16px);
     border-bottom: 1px solid var(--border);
   }
   .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
   }
   .nav-logo {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 800;
     font-size: 1.2rem;
   }
   .nav-logo-icon {
     width: 34px; height: 34px;
     background: var(--grad-brand);
     clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 900;
     font-size: 1rem;
     color: #000;
   }
   .nav-links {
     display: flex;
     align-items: center;
     gap: 6px;
   }
   .nav-link {
     padding: 8px 18px;
     border-radius: var(--radius-pill);
     font-size: 0.9rem;
     font-weight: 500;
     color: var(--text-muted);
     transition: all var(--transition);
   }
   .nav-link:hover, .nav-link.active {
     background: rgba(255,255,255,0.08);
     color: var(--text);
   }
   .nav-link.active { color: var(--primary); }
   .nav-cta { margin-left: 12px; }
   
   /* Mobile nav */
   .nav-toggle {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
   }
   .nav-toggle span {
     width: 24px; height: 2px;
     background: var(--text);
     border-radius: 2px;
     transition: 0.2s;
   }
   
   /* Hero */
   .hero {
     padding: calc(var(--nav-h) + 80px) 0 80px;
     background: var(--grad-hero), var(--bg);
     position: relative;
     overflow: hidden;
   }
   .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(255,204,0,0.1);
     border: 1px solid rgba(255,204,0,0.25);
     padding: 6px 16px;
     border-radius: var(--radius-pill);
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--primary);
     margin-bottom: 28px;
   }
   .hero-subtitle {
     font-size: 1.1rem;
     max-width: 620px;
     margin: 0 auto 40px;
   }
   .hero-actions {
     display: flex;
     gap: 16px;
     justify-content: center;
     flex-wrap: wrap;
   }
   
   /* Sections */
   .section { padding: 90px 0; }
   .section-alt { background: var(--bg-1); }
   .section-header { text-align: center; margin-bottom: 60px; }
   .section-header p { max-width: 600px; margin: 14px auto 0; }
   
   /* Cards */
   .card {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 32px;
     transition: all var(--transition);
   }
   .card:hover {
     border-color: var(--primary);
     transform: translateY(-6px);
     box-shadow: var(--shadow-card);
   }
   .card-icon {
     width: 52px; height: 52px;
     background: rgba(255,204,0,0.1);
     border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     margin-bottom: 20px;
     color: var(--primary);
   }
   
   /* Grid */
   .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
   .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
   .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
   .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

   /* Stats strip */
   .stat-strip {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     background: var(--bg-1);
   }
   .stat-item {
     flex: 1;
     min-width: 180px;
     text-align: center;
     padding: 44px 24px;
     border-right: 1px solid var(--border);
   }
   .stat-item:last-child { border-right: none; }
   .stat-value {
     font-size: 2.6rem;
     font-weight: 800;
     background: var(--grad-yellow);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     line-height: 1;
   }
   .stat-label {
     font-size: 0.85rem;
     color: var(--text-muted);
     margin-top: 8px;
   }
   .divider { height: 1px; background: var(--border); margin: 0; }
   
   /* Trust badges (new) */
   .trust-badges {
     display: flex;
     justify-content: center;
     gap: 24px;
     flex-wrap: wrap;
     margin: 30px auto 0;
   }
   .trust-badge {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: rgba(255,255,255,0.03);
     backdrop-filter: blur(8px);
     padding: 8px 20px;
     border-radius: var(--radius-pill);
     border: 1px solid var(--border-bright);
     font-size: 0.85rem;
     font-weight: 500;
     color: var(--text-muted);
     transition: all var(--transition);
   }
   .trust-badge i { color: var(--primary); font-size: 1rem; }
   .trust-badge:hover { border-color: var(--primary); color: var(--text); }
   
   /* Forms */
   .form-group { display: flex; flex-direction: column; gap: 8px; }
   .form-control {
     background: var(--bg-card-2);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     padding: 14px 18px;
     color: var(--text);
     transition: all var(--transition);
     width: 100%;
   }
   .form-control:focus {
     border-color: var(--primary);
     box-shadow: 0 0 0 3px rgba(255,204,0,0.1);
   }
   textarea.form-control { resize: vertical; min-height: 130px; }
   
   /* FAQ accordion */
   .faq-item {
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
     overflow: hidden;
     margin-bottom: 10px;
   }
   .faq-item input { display: none; }
   .faq-label {
     display: flex;
     justify-content: space-between;
     padding: 18px 24px;
     cursor: pointer;
     font-weight: 500;
     background: var(--bg-card);
     transition: background var(--transition);
   }
   .faq-label:hover { background: var(--bg-card-2); }
   .faq-label::after {
     content: '+';
     font-size: 1.2rem;
     color: var(--primary);
     transition: transform 0.25s;
   }
   .faq-item input:checked + .faq-label::after { transform: rotate(45deg); }
   .faq-body {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.35s ease;
     background: var(--bg-2);
   }
   .faq-item input:checked ~ .faq-body { max-height: 400px; }
   .faq-body-inner { padding: 20px 24px; color: var(--text-muted); }
   
   /* Value cards */
   .value-card {
     display: flex;
     gap: 20px;
     align-items: flex-start;
   }
   .value-icon {
     width: 48px; height: 48px;
     background: rgba(255,204,0,0.08);
     border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
   }
   
   /* Channel cards */
   .channel-card {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 20px 28px;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     transition: all var(--transition);
   }
   .channel-card:hover {
     border-color: var(--primary);
     transform: translateX(6px);
   }
   .channel-icon {
     width: 52px; height: 52px;
     background: rgba(255,204,0,0.08);
     border-radius: var(--radius-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: var(--primary);
   }
   
   /* Rule items */
   .rule-item {
     display: flex;
     gap: 18px;
     align-items: flex-start;
     padding: 20px 24px;
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-sm);
   }
   .rule-num {
     width: 32px; height: 32px;
     background: var(--grad-brand);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     color: #000;
     flex-shrink: 0;
   }
   
   /* Newsletter */
   .newsletter-wrap {
     background: linear-gradient(135deg, rgba(255,204,0,0.05), rgba(255,204,0,0.02));
     border: 1px solid rgba(255,204,0,0.15);
     border-radius: var(--radius);
     padding: 56px 40px;
     text-align: center;
   }
   .newsletter-form {
     display: flex;
     gap: 12px;
     max-width: 500px;
     margin: 32px auto 0;
   }
   .newsletter-form .form-control { border-radius: var(--radius-pill); }
   
   /* Footer */
   .footer {
     background: var(--bg-1);
     border-top: 1px solid var(--border);
     padding: 64px 0 32px;
   }
   .footer-grid {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 48px;
     margin-bottom: 48px;
   }
   .footer-brand p { font-size: 0.9rem; margin: 16px 0 20px; max-width: 280px; }
   .footer-address {
     font-style: normal;
     font-size: 0.82rem;
     line-height: 1.55;
     color: var(--text-dim);
     margin: 0 0 20px;
     max-width: 280px;
   }
   .footer-address strong {
     display: block;
     color: var(--text-muted);
     font-size: 0.78rem;
     font-weight: 700;
     letter-spacing: 0.04em;
     text-transform: uppercase;
     margin-bottom: 6px;
   }
   .footer-whatsapp {
     margin: 0 0 16px !important;
     max-width: 280px;
     font-size: 0.9rem;
   }
   .footer-whatsapp a {
     color: var(--primary);
     font-weight: 600;
   }
   .footer-whatsapp a:hover { color: var(--text); }
   .footer-social {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
   }
   .footer-col h5 {
     font-size: 0.8rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--text-muted);
     margin-bottom: 20px;
   }
   .footer-col li { margin-bottom: 12px; }
   .footer-col a { font-size: 0.9rem; color: var(--text-muted); transition: color var(--transition); }
   .footer-col a:hover { color: var(--text); }
   .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 32px;
     border-top: 1px solid var(--border);
     flex-wrap: wrap;
     gap: 16px;
   }
   .footer-bottom p { font-size: 0.8rem; }
   .social-btn {
     width: 38px; height: 38px;
     border-radius: 50%;
     background: var(--bg-card);
     border: 1px solid var(--border);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: all var(--transition);
   }
   .social-btn:hover { border-color: var(--primary); background: rgba(255,204,0,0.1); }
   
   /* Animations */
   @keyframes fade-up {
     from { opacity: 0; transform: translateY(20px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   .fade-up { animation: fade-up 0.6s ease forwards; }
   .delay-1 { animation-delay: 0.1s; }
   .delay-2 { animation-delay: 0.2s; }
   .delay-3 { animation-delay: 0.3s; }
   
   /* Responsive */
   @media (max-width: 1100px) {
     .grid-5 { grid-template-columns: repeat(3, 1fr); }
   }
   @media (max-width: 960px) {
     .grid-4 { grid-template-columns: repeat(2, 1fr); }
     .grid-5 { grid-template-columns: repeat(2, 1fr); }
     .footer-grid { grid-template-columns: 1fr 1fr; }
   }
   @media (max-width: 720px) {
     .grid-2, .grid-3 { grid-template-columns: 1fr; }
     .grid-5 { grid-template-columns: 1fr; }
     .form-row { grid-template-columns: 1fr; }
     .footer-grid { grid-template-columns: 1fr; gap: 32px; }
     .stat-strip { flex-direction: column; }
     .stat-item { border-right: none; border-bottom: 1px solid var(--border); }
     .stat-item:last-child { border-bottom: none; }
     .newsletter-form { flex-direction: column; }
     .hero-actions { flex-direction: column; align-items: stretch; }
     .hero-actions .btn { width: 100%; text-align: center; }
   
     .nav-links {
       display: none;
       position: fixed;
       top: var(--nav-h); left: 0; right: 0;
       background: rgba(0,0,0,0.95);
       backdrop-filter: blur(20px);
       flex-direction: column;
       padding: 24px;
       gap: 8px;
       border-bottom: 1px solid var(--border);
     }
     .nav-links.open { display: flex; }
     .nav-links .nav-cta { margin-left: 0; margin-top: 12px; }
     .nav-links .nav-cta .btn { width: 100%; }
     .nav-toggle { display: flex; }
   }
   @media (max-width: 480px) {
     .section { padding: 60px 0; }
     .hero { padding: calc(var(--nav-h) + 56px) 0 56px; }
     .card { padding: 24px; }
   }