/* ==========================================================================
       FONTS
       ========================================================================== */
    @font-face {
      font-family: 'Loretta';
      src: url('../fonts/Loretta.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    /* ==========================================================================
       ROOT & BASE
       ========================================================================== */
    :root {
      --primary: #4f46e5;
      --primary-dark: #3730a3;
      --primary-light: #818cf8;
      --primary-ultra-light: #eef2ff;
      --accent: #06b6d4;
      --accent-dark: #0891b2;
      --accent-light: #67e8f9;
      --emerald: #10b981;
      --emerald-light: #d1fae5;
      --amber: #f59e0b;
      --amber-light: #fef3c7;
      --rose: #f43f5e;
      --rose-light: #ffe4e6;
      --violet: #8b5cf6;
      --violet-light: #ede9fe;
      --surface: #f8fafc;
      --surface-alt: #f1f5f9;
      --card-bg: #ffffff;
      --text-dark: #0f172a;
      --text-body: #334155;
      --text-muted: #64748b;
      --text-light: #94a3b8;
      --border: rgba(0,0,0,.06);
      --gradient-hero: linear-gradient(135deg, #4338ca 0%, #6d28d9 40%, #7c3aed 60%, #2563eb 100%);
      --gradient-hero-2: linear-gradient(180deg, rgba(67,56,202,.08) 0%, transparent 60%);
      --gradient-soft: linear-gradient(135deg, #eef2ff 0%, #e0f2fe 50%, #f0fdf4 100%);
      --gradient-cta: linear-gradient(135deg, #4338ca 0%, #6d28d9 35%, #db2777 100%);
      --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
      --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
      --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md: 0 4px 24px rgba(0,0,0,.07);
      --shadow-lg: 0 12px 40px rgba(0,0,0,.1);
      --shadow-xl: 0 20px 60px rgba(0,0,0,.12);
      --shadow-glow: 0 0 40px rgba(79,70,229,.15);
      --shadow-card-hover: 0 16px 48px rgba(79,70,229,.12);
      --radius: 1.125rem;
      --radius-sm: .75rem;
      --radius-xs: .5rem;
      --radius-full: 50rem;
      --transition: .3s cubic-bezier(.4,0,.2,1);
    }

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

    html { scroll-behavior: smooth; scroll-padding-top: 80px; }

    body {
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
      color: var(--text-body);
      background: var(--surface);
      overflow-x: hidden;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--text-dark); line-height: 1.3; }

    section { padding: 6rem 0; position: relative; }

    img { max-width: 100%; }

    /* ==========================================================================
       REUSABLE COMPONENTS
       ========================================================================== */
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--primary);
      background: var(--primary-ultra-light);
      padding: .4rem 1rem;
      border-radius: var(--radius-full);
      margin-bottom: 1rem;
      border: 1px solid rgba(79,70,229,.1);
    }

    .section-title {
      font-size: 2.5rem;
      font-weight: 800;
      margin-bottom: .75rem;
      letter-spacing: -.025em;
    }

    .section-subtitle {
      color: var(--text-muted);
      max-width: 620px;
      margin: 0 auto 3rem;
      font-size: 1.05rem;
      line-height: 1.75;
    }

    .decorated-bg {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .5;
      pointer-events: none;
      z-index: 0;
    }

    .card-lift {
      transition: transform var(--transition), box-shadow var(--transition);
    }
    .card-lift:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-card-hover);
    }

    .icon-box {
      width: 56px;
      height: 56px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: .875rem;
      font-size: 1.4rem;
      flex-shrink: 0;
    }

    .icon-box-lg {
      width: 64px;
      height: 64px;
      font-size: 1.55rem;
      border-radius: 1rem;
    }

    .divider-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--primary-light);
      display: inline-block;
    }

    /* ==========================================================================
       1. STICKY NAVBAR
       ========================================================================== */
    .navbar {
      background: rgba(255,255,255,.78);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid var(--border);
      padding: .6rem 0;
      transition: background var(--transition), box-shadow var(--transition), padding var(--transition);
      z-index: 1050;
    }

    .navbar.scrolled {
      background: rgba(255,255,255,.95);
      box-shadow: var(--shadow-md);
      padding: .45rem 0;
    }

    .navbar-brand {
      font-weight: 900;
      font-size: 1.5rem;
      color: var(--primary) !important;
      letter-spacing: -.03em;
      display: flex;
      align-items: center;
      gap: .45rem;
    }

    .navbar-brand .brand-icon {
      width: 36px; height: 36px;
      background: var(--gradient-hero);
      border-radius: .6rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.1rem;
    }

    .nav-link {
      font-size: .85rem;
      font-weight: 500;
      color: var(--text-muted) !important;
      padding: .5rem .8rem !important;
      border-radius: var(--radius-xs);
      transition: color var(--transition), background var(--transition);
      position: relative;
    }

    .nav-link:hover, .nav-link.active {
      color: var(--primary) !important;
      background: var(--primary-ultra-light);
    }

    .nav-actions { display: flex; align-items: center; gap: .5rem; }

    .btn-nav {
      font-size: .8rem;
      font-weight: 600;
      border-radius: var(--radius-full);
      padding: .45rem 1.15rem;
      transition: all var(--transition);
      border: none;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      text-decoration: none;
    }

    .btn-nav-ghost { color: var(--text-muted); background: transparent; }
    .btn-nav-ghost:hover { color: var(--primary); background: var(--primary-ultra-light); }

    .btn-nav-outline {
      border: 1.5px solid var(--primary);
      color: var(--primary);
      background: transparent;
    }
    .btn-nav-outline:hover { background: var(--primary); color: #fff; }

    .btn-nav-fill { background: var(--primary); color: #fff; }
    .btn-nav-fill:hover { background: var(--primary-dark); color: #fff; box-shadow: 0 4px 14px rgba(79,70,229,.35); }

    .btn-nav-gradient {
      background: var(--gradient-cta);
      color: #fff;
    }
    .btn-nav-gradient:hover { opacity: .9; color: #fff; box-shadow: 0 4px 16px rgba(109,40,217,.3); }

    /* ==========================================================================
       2. HERO SECTION
       ========================================================================== */
    #hero {
      background: var(--gradient-hero);
      color: #fff;
      padding: 8rem 0 6rem;
      position: relative;
      overflow: hidden;
    }

    .hero-bg-shapes {
      position: absolute; inset: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .hero-bg-shapes .orb {
      position: absolute;
      border-radius: 50%;
      opacity: .1;
      background: #fff;
    }

    .hero-bg-shapes .orb-1 { width: 600px; height: 600px; top: -200px; right: -100px; }
    .hero-bg-shapes .orb-2 { width: 400px; height: 400px; bottom: -150px; left: -100px; opacity: .06; }
    .hero-bg-shapes .orb-3 { width: 200px; height: 200px; top: 40%; left: 45%; opacity: .05; }

    .hero-grid-overlay {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events: none;
    }

    .hero-announcement {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: .8rem;
      font-weight: 600;
      background: rgba(255,255,255,.12);
      backdrop-filter: blur(8px);
      padding: .4rem .5rem .4rem .4rem;
      border-radius: var(--radius-full);
      margin-bottom: 1.75rem;
      border: 1px solid rgba(255,255,255,.15);
    }

    .hero-announcement .pill {
      background: var(--amber);
      color: #000;
      font-size: .65rem;
      font-weight: 800;
      padding: .2rem .55rem;
      border-radius: var(--radius-full);
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .hero-title {
      font-size: clamp(2.2rem, 4.8vw, 3.5rem);
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 1.5rem;
      letter-spacing: -.035em;
      color: #fff;
    }

    .hero-title .gradient-text {
      background: linear-gradient(90deg, var(--accent-light), #a5f3fc, #fff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero-desc {
      font-size: 1.1rem;
      opacity: .88;
      max-width: 520px;
      margin-bottom: 2.25rem;
      line-height: 1.75;
      font-weight: 400;
    }

    .hero-buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }

    .btn-hero-primary {
      background: #fff;
      color: var(--primary-dark);
      font-weight: 700;
      border-radius: var(--radius-full);
      padding: .8rem 2rem;
      border: none;
      font-size: .95rem;
      transition: transform var(--transition), box-shadow var(--transition);
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      text-decoration: none;
    }

    .btn-hero-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(0,0,0,.2);
      color: var(--primary-dark);
    }

    .btn-hero-secondary {
      background: rgba(255,255,255,.12);
      color: #fff;
      font-weight: 600;
      border: 1.5px solid rgba(255,255,255,.3);
      border-radius: var(--radius-full);
      padding: .75rem 1.75rem;
      font-size: .95rem;
      transition: all var(--transition);
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      backdrop-filter: blur(4px);
      text-decoration: none;
    }

    .btn-hero-secondary:hover {
      background: rgba(255,255,255,.22);
      border-color: rgba(255,255,255,.6);
      color: #fff;
      transform: translateY(-2px);
    }

    /* Trust bar */
    .hero-trust {
      display: flex;
      flex-wrap: wrap;
      gap: 1.25rem;
      align-items: center;
    }

    .hero-trust-item {
      display: flex;
      align-items: center;
      gap: .4rem;
      font-size: .82rem;
      font-weight: 500;
      opacity: .8;
    }

    .hero-trust-item i { font-size: 1rem; opacity: .9; }

    .hero-trust-divider {
      width: 1px; height: 20px;
      background: rgba(255,255,255,.2);
    }

    /* Hero Visual / Dashboard mockup */
    .hero-visual {
      position: relative;
      z-index: 2;
    }

    .dashboard-mock {
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 1.25rem;
      padding: 0;
      overflow: hidden;
      box-shadow: 0 32px 64px rgba(0,0,0,.2);
    }

    .dashboard-mock .mock-header {
      display: flex;
      align-items: center;
      gap: .5rem;
      padding: .85rem 1.25rem;
      border-bottom: 1px solid rgba(255,255,255,.08);
      font-size: .8rem;
      font-weight: 600;
    }

    .mock-header .dots { display: flex; gap: .35rem; }
    .mock-header .dots span { width: 10px; height: 10px; border-radius: 50%; }
    .mock-header .dots span:nth-child(1) { background: #f87171; }
    .mock-header .dots span:nth-child(2) { background: #fbbf24; }
    .mock-header .dots span:nth-child(3) { background: #34d399; }

    .mock-body { padding: 1.25rem; }

    .mock-stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .75rem;
      margin-bottom: 1.25rem;
    }

    .mock-stat-card {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: var(--radius-sm);
      padding: .9rem .75rem;
      text-align: center;
    }

    .mock-stat-card .value {
      font-size: 1.65rem;
      font-weight: 800;
      line-height: 1.2;
    }

    .mock-stat-card .label {
      font-size: .68rem;
      opacity: .6;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .mock-chart-area {
      background: rgba(255,255,255,.05);
      border-radius: var(--radius-sm);
      padding: 1rem;
      margin-bottom: 1rem;
      border: 1px solid rgba(255,255,255,.06);
    }

    .mock-chart-area .chart-label {
      font-size: .75rem;
      font-weight: 600;
      margin-bottom: .75rem;
      display: flex;
      justify-content: space-between;
    }

    .mock-chart-area .chart-label span { opacity: .6; font-weight: 400; }

    .mock-bar-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
    .mock-bar-row .bar-label { font-size: .7rem; opacity: .65; width: 70px; flex-shrink: 0; }
    .mock-bar-row .bar-track { flex: 1; height: 10px; background: rgba(255,255,255,.08); border-radius: var(--radius-full); overflow: hidden; }
    .mock-bar-row .bar-fill { height: 100%; border-radius: var(--radius-full); transition: width 1.5s ease; }
    .mock-bar-row .bar-val { font-size: .7rem; font-weight: 700; width: 34px; text-align: right; }

    .mock-activity {
      background: rgba(255,255,255,.05);
      border-radius: var(--radius-sm);
      padding: .85rem 1rem;
      border: 1px solid rgba(255,255,255,.06);
    }

    .mock-activity .act-title {
      font-size: .75rem;
      font-weight: 600;
      margin-bottom: .65rem;
    }

    .mock-activity-item {
      display: flex;
      align-items: center;
      gap: .55rem;
      padding: .4rem 0;
      font-size: .72rem;
      opacity: .8;
    }

    .mock-activity-item .act-dot {
      width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    }

    .mock-activity-item .act-time {
      margin-left: auto; opacity: .5; font-size: .65rem;
    }

    /* Floating badges */
    .float-badge {
      position: absolute;
      background: #fff;
      color: var(--text-dark);
      border-radius: var(--radius-sm);
      padding: .65rem 1rem;
      font-size: .78rem;
      font-weight: 600;
      box-shadow: var(--shadow-xl);
      display: flex;
      align-items: center;
      gap: .45rem;
      z-index: 10;
      border: 1px solid var(--border);
    }

    .float-badge.fb-1 {
      top: 20px; right: -24px;
      animation: floatA 5s ease-in-out infinite;
    }

    .float-badge.fb-2 {
      bottom: 40px; left: -20px;
      animation: floatA 5s ease-in-out infinite 2.5s;
    }

    .float-badge.fb-3 {
      bottom: -10px; right: 30px;
      animation: floatA 5s ease-in-out infinite 1.2s;
    }

    @keyframes floatA {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
    }

    /* ==========================================================================
       3. LOGOS / SOCIAL PROOF BAR
       ========================================================================== */
    #social-proof {
      padding: 3rem 0;
      background: #fff;
      border-bottom: 1px solid var(--border);
    }

    .social-proof-label {
      font-size: .75rem;
      font-weight: 600;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 1.5rem;
    }

    .logo-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2.5rem;
    }

    .logo-placeholder {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-light);
      opacity: .55;
      transition: opacity var(--transition);
    }

    .logo-placeholder:hover { opacity: .85; }
    .logo-placeholder i { font-size: 1.3rem; }

    /* ==========================================================================
       4. FEATURES
       ========================================================================== */
    #features { background: var(--surface); }

    .feature-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2rem 1.5rem 1.75rem;
      text-align: left;
      height: 100%;
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      border-radius: var(--radius) var(--radius) 0 0;
      opacity: 0;
      transition: opacity var(--transition);
    }

    .feature-card:hover::before { opacity: 1; }

    .feature-card .icon-box { margin-bottom: 1.25rem; color: #fff; }

    .feature-card h5 {
      font-size: 1.05rem;
      font-weight: 700;
      margin-bottom: .5rem;
    }

    .feature-card p {
      font-size: .88rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.65;
    }

    .feature-card .feature-tag {
      display: inline-block;
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
      padding: .2rem .55rem;
      border-radius: var(--radius-full);
      margin-top: .75rem;
    }

    .fc-quiz .icon-box, .fc-quiz::before { background: linear-gradient(135deg, #6366f1, #818cf8); }
    .fc-quiz .feature-tag { background: #eef2ff; color: #6366f1; }

    .fc-exam .icon-box, .fc-exam::before { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
    .fc-exam .feature-tag { background: #fef3c7; color: #d97706; }

    .fc-form .icon-box, .fc-form::before { background: linear-gradient(135deg, #10b981, #34d399); }
    .fc-form .feature-tag { background: #d1fae5; color: #059669; }

    .fc-event .icon-box, .fc-event::before { background: linear-gradient(135deg, #f43f5e, #fb7185); }
    .fc-event .feature-tag { background: #ffe4e6; color: #e11d48; }

    .fc-qr .icon-box, .fc-qr::before { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
    .fc-qr .feature-tag { background: #ede9fe; color: #7c3aed; }

    .fc-team .icon-box, .fc-team::before { background: linear-gradient(135deg, #06b6d4, #67e8f9); }
    .fc-team .feature-tag { background: #cffafe; color: #0891b2; }

    .fc-flow .icon-box, .fc-flow::before { background: linear-gradient(135deg, #f97316, #fb923c); }
    .fc-flow .feature-tag { background: #ffedd5; color: #ea580c; }

    .fc-track .icon-box, .fc-track::before { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
    .fc-track .feature-tag { background: #dbeafe; color: #2563eb; }

    /* ==========================================================================
       5. PROGRAM TYPES
       ========================================================================== */
    #program-types {
      background: var(--gradient-soft);
      overflow: hidden;
    }

    .ptype-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.75rem 1.25rem;
      text-align: center;
      height: 100%;
      position: relative;
    }

    .ptype-emoji {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.75rem;
      margin: 0 auto .85rem;
      border-radius: 1rem;
      background: var(--surface);
      border: 1px solid var(--border);
    }

    .ptype-badge {
      display: inline-block;
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: .25rem .7rem;
      border-radius: var(--radius-full);
      margin-bottom: .6rem;
    }

    .ptype-card h5 { font-size: 1rem; font-weight: 700; margin-bottom: .45rem; }
    .ptype-card p { font-size: .83rem; color: var(--text-muted); margin: 0; line-height: 1.6; }

    /* ==========================================================================
       6. HOW IT WORKS
       ========================================================================== */
    #how-it-works { background: #fff; }

    .how-tabs .nav-pills {
      background: var(--surface);
      border-radius: var(--radius-full);
      padding: .3rem;
      display: inline-flex;
      border: 1px solid var(--border);
    }

    .how-tabs .nav-link {
      font-size: .85rem;
      font-weight: 600;
      color: var(--text-muted) !important;
      border-radius: var(--radius-full) !important;
      padding: .55rem 1.5rem !important;
      transition: all var(--transition);
      display: flex;
      align-items: center;
      gap: .4rem;
      background: transparent !important;
      border: none;
    }

    .how-tabs .nav-link.active {
      background: var(--primary) !important;
      color: #fff !important;
      box-shadow: 0 2px 10px rgba(79,70,229,.3);
    }

    .how-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2.25rem;
      height: 100%;
    }

    .how-card.highlighted {
      border: 2px solid var(--primary);
      box-shadow: var(--shadow-glow);
      position: relative;
    }

    .how-card.highlighted .popular-tag {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--primary);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      padding: .25rem .85rem;
      border-radius: var(--radius-full);
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .role-header {
      display: flex;
      align-items: center;
      gap: .65rem;
      margin-bottom: 1.75rem;
    }

    .role-icon-circle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: #fff;
    }

    .role-header h4 { font-size: 1.15rem; margin: 0; }
    .role-header p { font-size: .8rem; color: var(--text-muted); margin: 0; }

    .step-item {
      display: flex;
      gap: .85rem;
      margin-bottom: 1.25rem;
      position: relative;
    }

    .step-item:not(:last-child)::after {
      content: '';
      position: absolute;
      left: 15px;
      top: 36px;
      bottom: -8px;
      width: 2px;
      background: var(--border);
    }

    .step-num {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .75rem;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
    }

    .step-content h6 { font-size: .9rem; font-weight: 700; margin-bottom: .1rem; }
    .step-content p { font-size: .82rem; color: var(--text-muted); margin: 0; line-height: 1.55; }

    /* ==========================================================================
       7. PUBLIC PROGRAMS
       ========================================================================== */
    #public-programs { background: var(--surface); }

    /* Filter Chips */
    .filter-chips {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      margin-bottom: 2rem;
      transition: opacity 0.2s ease;
    }

    .filter-chips.filter-loading {
      opacity: 0.6;
      pointer-events: none;
    }

    #public-programs .filter-chip,
    #public-programs button.filter-chip,
    .filter-chips .filter-chip {
      background: var(--primary-ultra-light) !important;
      background-color: #eef2ff !important;
      color: var(--primary) !important;
      padding: 0.5rem 1.15rem !important;
      border-radius: var(--radius-full) !important;
      border: 0 !important;
      border-width: 0 !important;
      border-style: none !important;
      border-color: transparent !important;
      outline: 0 !important;
      outline-width: 0 !important;
      box-shadow: none !important;
      font-size: 0.85rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      -webkit-appearance: none !important;
      -moz-appearance: none !important;
      appearance: none !important;
    }

    #public-programs .filter-chip:hover,
    .filter-chips .filter-chip:hover {
      background: #e0e7ff !important;
      background-color: #e0e7ff !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
      border: 0 !important;
    }

    #public-programs .filter-chip:focus,
    .filter-chips .filter-chip:focus {
      outline: 0 !important;
      border: 0 !important;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
    }

    #public-programs .filter-chip.active,
    .filter-chips .filter-chip.active {
      background: var(--gradient-hero) !important;
      color: white !important;
      box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;
      border: 0 !important;
    }

    #public-programs .filter-chip.tag,
    .filter-chips .filter-chip.tag {
      background: var(--violet-light) !important;
      background-color: #ede9fe !important;
      color: var(--violet) !important;
      border: 0 !important;
    }

    #public-programs .filter-chip.tag:hover,
    .filter-chips .filter-chip.tag:hover {
      background: #ddd6fe !important;
      background-color: #ddd6fe !important;
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;
      border: 0 !important;
    }

    #public-programs .filter-chip.tag.active,
    .filter-chips .filter-chip.tag.active {
      background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
      color: white !important;
      box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35) !important;
      border: 0 !important;
    }

    .filter-divider {
      width: 1px;
      height: 24px;
      background: rgba(99, 102, 241, 0.2);
      margin: 0 0.75rem;
      align-self: center;
    }

    @media (max-width: 767.98px) {
      .filter-chips {
        gap: 0.4rem;
      }

      #public-programs .filter-chip,
      .filter-chips .filter-chip {
        padding: 0.4rem 0.85rem !important;
        font-size: 0.8rem;
        border: 0 !important;
      }

      .filter-divider {
        display: none;
      }
    }

    @media (max-width: 575.98px) {
      #public-programs .filter-chip,
      .filter-chips .filter-chip {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.75rem;
        border: 0 !important;
      }
    }

    .prog-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .prog-cover {
      height: 155px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.75rem;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .prog-cover::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.15) 100%);
    }

    .prog-cover .type-chip {
      position: absolute;
      top: .75rem;
      left: .75rem;
      font-size: .65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      background: rgba(255,255,255,.2);
      backdrop-filter: blur(6px);
      padding: .3rem .7rem;
      border-radius: var(--radius-full);
      z-index: 2;
      border: 1px solid rgba(255,255,255,.15);
    }

    .prog-cover .status-chip {
      position: absolute;
      top: .75rem;
      right: .75rem;
      font-size: .6rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: .3rem .6rem;
      border-radius: var(--radius-full);
      z-index: 2;
    }

    .prog-cover .login-chip {
      position: absolute;
      bottom: .75rem;
      left: .75rem;
      font-size: .6rem !important;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      padding: .3rem .6rem;
      border-radius: var(--radius-full);
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      line-height: 1;
    }

    .prog-cover .login-chip i {
      font-size: .6rem !important;
    }

    .prog-body {
      padding: 1.35rem;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .prog-body h5 {
      font-size: 1.02rem;
      font-weight: 700;
      margin-bottom: .4rem;
      line-height: 1.35;
    }

    .prog-body .prog-desc {
      font-size: .84rem;
      color: var(--text-muted);
      flex: 1;
      margin-bottom: .85rem;
      line-height: 1.6;
    }

    .prog-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .85rem;
      font-size: .75rem;
      color: var(--text-muted);
      margin-bottom: 1rem;
      padding-top: .85rem;
      border-top: 1px solid var(--border);
    }

    .prog-meta-item {
      display: flex;
      align-items: center;
      gap: .3rem;
    }

    .prog-meta-item i { font-size: .8rem; color: var(--text-light); }

    .btn-join {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      font-size: .84rem;
      font-weight: 600;
      color: var(--primary);
      background: var(--primary-ultra-light);
      border: 1px solid rgba(79,70,229,.12);
      border-radius: var(--radius-full);
      padding: .5rem 1.15rem;
      transition: all var(--transition);
      width: 100%;
      text-decoration: none;
    }

    .btn-join:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    /* ==========================================================================
       8. WHY / BENEFITS
       ========================================================================== */
    #why {
      background: #fff;
      overflow: hidden;
    }

    .why-visual {
      background: var(--gradient-soft);
      border-radius: 1.5rem;
      padding: 2.5rem;
      position: relative;
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .why-visual-inner {
      background: var(--card-bg);
      border-radius: var(--radius);
      padding: 1.5rem;
      box-shadow: var(--shadow-md);
      border: 1px solid var(--border);
    }

    .why-visual-stat {
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: .75rem 0;
    }

    .why-visual-stat:not(:last-child) { border-bottom: 1px solid var(--border); }

    .wvs-icon {
      width: 42px; height: 42px;
      border-radius: .7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: #fff;
      flex-shrink: 0;
    }

    .wvs-info .wvs-label { font-size: .78rem; color: var(--text-muted); }
    .wvs-info .wvs-value { font-size: 1.15rem; font-weight: 800; color: var(--text-dark); }

    .why-item {
      display: flex;
      gap: 1rem;
      margin-bottom: 1.65rem;
    }

    .why-item .why-icon {
      width: 46px;
      height: 46px;
      border-radius: .8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      color: #fff;
      flex-shrink: 0;
    }

    .why-item h5 { font-size: .95rem; font-weight: 700; margin-bottom: .2rem; }
    .why-item p { font-size: .86rem; color: var(--text-muted); margin: 0; line-height: 1.6; }

    /* ==========================================================================
       PRICING SECTION
       ========================================================================== */
    #pricing { background: #fff; }

    .pricing-toggle {
      display: inline-flex;
      align-items: center;
      gap: .75rem;
      background: var(--surface);
      border: 1px solid var(--border);
      padding: .35rem;
      border-radius: var(--radius-full);
      margin-bottom: 2.5rem;
    }

    .pricing-toggle .toggle-btn {
      font-size: .85rem;
      font-weight: 600;
      padding: .5rem 1.35rem;
      border-radius: var(--radius-full);
      border: none;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      transition: all var(--transition);
    }

    .pricing-toggle .toggle-btn.active {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 2px 10px rgba(79,70,229,.3);
    }

    .pricing-toggle .save-badge {
      font-size: .65rem;
      font-weight: 700;
      background: var(--emerald-light);
      color: var(--emerald);
      padding: .2rem .55rem;
      border-radius: var(--radius-full);
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    .pricing-card {
      background: var(--card-bg);
      border: 1.5px solid var(--border);
      border-radius: 1.25rem;
      padding: 2.5rem 2rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: all var(--transition);
    }

    .pricing-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }

    .pricing-card.featured {
      border-color: var(--primary);
      box-shadow: var(--shadow-glow), 0 8px 32px rgba(79,70,229,.12);
      transform: scale(1.03);
      z-index: 2;
    }

    .pricing-card.featured:hover {
      transform: scale(1.03) translateY(-6px);
      box-shadow: var(--shadow-glow), 0 16px 48px rgba(79,70,229,.18);
    }

    .pricing-card .popular-ribbon {
      position: absolute;
      top: -1px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gradient-hero);
      color: #fff;
      font-size: .68rem;
      font-weight: 700;
      padding: .3rem 1.1rem;
      border-radius: 0 0 .6rem .6rem;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    .pricing-plan-icon {
      width: 52px;
      height: 52px;
      border-radius: .9rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.35rem;
      margin-bottom: 1.25rem;
    }

    .pricing-card .plan-name {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: .25rem;
    }

    .pricing-card .plan-desc {
      font-size: .85rem;
      color: var(--text-muted);
      margin-bottom: 1.5rem;
      line-height: 1.6;
    }

    .pricing-card .price-row {
      display: flex;
      align-items: baseline;
      gap: .2rem;
      margin-bottom: .25rem;
    }

    .pricing-card .price-amount {
      font-size: 3rem;
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: 1;
      color: var(--text-dark);
    }

    .pricing-card .price-currency {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text-muted);
    }

    .pricing-card .price-period {
      font-size: .85rem;
      color: var(--text-light);
      font-weight: 500;
      margin-bottom: 1.75rem;
    }

    .pricing-card .plan-divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 0 0 1.5rem;
    }

    .pricing-card .features-title {
      font-size: .72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--text-light);
      margin-bottom: 1rem;
    }

    .pricing-card .feature-list {
      list-style: none;
      padding: 0;
      margin: 0 0 2rem;
      flex: 1;
    }

    .pricing-card .feature-list li {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      font-size: .87rem;
      color: var(--text-body);
      margin-bottom: .7rem;
      line-height: 1.5;
    }

    .pricing-card .feature-list li i {
      font-size: .85rem;
      margin-top: .2rem;
      flex-shrink: 0;
    }

    .pricing-card .feature-list li i.bi-check-circle-fill { color: var(--emerald); }
    .pricing-card .feature-list li i.bi-x-circle-fill { color: var(--text-light); }
    .pricing-card .feature-list li.disabled { color: var(--text-light); }

    .btn-pricing {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .4rem;
      width: 100%;
      font-size: .92rem;
      font-weight: 700;
      padding: .75rem 1.5rem;
      border-radius: var(--radius-full);
      border: none;
      transition: all var(--transition);
      text-decoration: none;
    }

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

    .btn-pricing-outline:hover {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 4px 16px rgba(79,70,229,.3);
    }

    .btn-pricing-primary {
      background: var(--gradient-hero);
      color: #fff;
    }

    .btn-pricing-primary:hover {
      opacity: .92;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(79,70,229,.35);
      color: #fff;
    }

    .btn-pricing-dark {
      background: var(--gradient-dark);
      color: #fff;
    }

    .btn-pricing-dark:hover {
      opacity: .92;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(15,23,42,.3);
      color: #fff;
    }

    .pricing-note {
      font-size: .82rem;
      color: var(--text-muted);
      margin-top: 2rem;
    }

    .pricing-note i { color: var(--emerald); }

    /* ==========================================================================
       FLOATING BUTTONS (WhatsApp + Back to Top)
       ========================================================================== */
    .floating-buttons {
      position: fixed;
      bottom: 28px;
      right: 28px;
      display: flex;
      flex-direction: column;
      gap: .65rem;
      z-index: 1040;
    }

    .float-btn {
      width: 54px;
      height: 54px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.45rem;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: all var(--transition);
      box-shadow: 0 4px 16px rgba(0,0,0,.18);
      text-decoration: none;
    }

    .float-btn:hover {
      transform: translateY(-3px) scale(1.08);
      box-shadow: 0 8px 28px rgba(0,0,0,.22);
      color: #fff;
    }

    .float-btn-whatsapp {
      background: #25d366;
    }

    .float-btn-whatsapp:hover {
      background: #1ebe57;
    }

    .float-btn-top {
      background: #1e293b;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: all var(--transition);
    }

    .float-btn-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .float-btn-top:hover {
      background: var(--primary);
      transform: translateY(-3px) scale(1.08);
    }

    /* WhatsApp tooltip */
    .float-btn-whatsapp .wa-tooltip {
      position: absolute;
      right: 64px;
      top: 50%;
      transform: translateY(-50%);
      background: #fff;
      color: var(--text-dark);
      font-size: .78rem;
      font-weight: 600;
      padding: .45rem .85rem;
      border-radius: var(--radius-xs);
      box-shadow: var(--shadow-md);
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all var(--transition);
      pointer-events: none;
    }

    .float-btn-whatsapp .wa-tooltip::after {
      content: '';
      position: absolute;
      top: 50%;
      right: -6px;
      transform: translateY(-50%);
      border-width: 6px 0 6px 6px;
      border-style: solid;
      border-color: transparent transparent transparent #fff;
    }

    .float-btn-whatsapp:hover .wa-tooltip {
      opacity: 1;
      visibility: visible;
    }

    .float-btn-chat {
      background: var(--primary);
      position: relative;
    }

    .float-btn-chat:hover {
      background: var(--primary-dark);
    }

    .float-btn-chat .chat-pulse {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 14px;
      height: 14px;
      background: var(--rose);
      border-radius: 50%;
      border: 2px solid #fff;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.3); opacity: .7; }
    }

    @media (max-width: 575.98px) {
      .floating-buttons { bottom: 18px; right: 18px; }
      .float-btn { width: 48px; height: 48px; font-size: 1.25rem; }
      .pricing-card.featured { transform: scale(1); }
      .pricing-card.featured:hover { transform: translateY(-6px); }
    }

    /* Reorder: Back to Top (top) → WhatsApp (middle) → AI Chat (bottom) */
    body:has(.ai-chat-widget--floating) .floating-buttons {
      flex-direction: column-reverse; /* Swap order: Back to Top on top, WhatsApp below */
      bottom: 90px; /* Offset up to make room for AI chat at bottom */
    }

    @media (max-width: 575.98px) {
      body:has(.ai-chat-widget--floating) .floating-buttons {
        bottom: 78px;
      }
    }

    /* ==========================================================================
       AI CHAT WIDGET
       ========================================================================== */
    .ai-chat-widget {
      position: fixed;
      bottom: 28px;
      right: 28px;
      z-index: 1045;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }

    /* Launcher Button */
    .ai-chat-launcher {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--gradient-hero);
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.5rem;
      box-shadow: 0 4px 20px rgba(79, 70, 229, 0.35);
      transition: all var(--transition);
      position: relative;
    }

    .ai-chat-launcher:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 8px 32px rgba(79, 70, 229, 0.45);
    }

    .ai-chat-launcher:focus {
      outline: none;
      box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.25), 0 4px 20px rgba(79, 70, 229, 0.35);
    }

    .ai-chat-launcher .chat-icon,
    .ai-chat-launcher .close-icon {
      position: absolute;
      transition: all 0.3s ease;
    }

    .ai-chat-launcher .close-icon {
      opacity: 0;
      transform: rotate(-90deg) scale(0.5);
    }

    .ai-chat-launcher.is-open .chat-icon {
      opacity: 0;
      transform: rotate(90deg) scale(0.5);
    }

    .ai-chat-launcher.is-open .close-icon {
      opacity: 1;
      transform: rotate(0) scale(1);
    }

    .ai-chat-launcher .unread-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 20px;
      height: 20px;
      background: var(--rose);
      border-radius: 50%;
      border: 2px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      font-weight: 700;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    /* Chat Window */
    .ai-chat-window {
      position: absolute;
      bottom: 72px;
      right: 0;
      width: 380px;
      height: 550px;
      max-height: calc(100vh - 120px);
      background: var(--card-bg);
      border-radius: 1.25rem;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform-origin: bottom right;
      animation: chatWindowOpen 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes chatWindowOpen {
      from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    /* Chat Header */
    .ai-chat-header {
      background: var(--gradient-hero);
      color: #fff;
      padding: 1.25rem 1rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-shrink: 0;
    }

    .ai-chat-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      flex-shrink: 0;
    }

    .ai-chat-header-info {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .ai-chat-header-info h4 {
      font-size: 1rem;
      font-weight: 700;
      margin: 0;
      color: #fff;
      line-height: 1.3;
    }

    .ai-chat-header-info .status {
      font-size: 0.75rem;
      opacity: 0.85;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .ai-chat-header-info .status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #34d399;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    .ai-chat-close-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
      flex-shrink: 0;
    }

    .ai-chat-close-btn:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    /* Messages Container */
    .ai-chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      background: var(--surface);
    }

    .ai-chat-messages::-webkit-scrollbar {
      width: 6px;
    }

    .ai-chat-messages::-webkit-scrollbar-track {
      background: transparent;
    }

    .ai-chat-messages::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.1);
      border-radius: 3px;
    }

    /* Message Bubbles */
    .ai-chat-message {
      max-width: 85%;
      display: flex;
      flex-direction: column;
      animation: messageSlideIn 0.3s ease;
    }

    @keyframes messageSlideIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .ai-chat-message.user {
      align-self: flex-end;
    }

    .ai-chat-message.assistant {
      align-self: flex-start;
    }

    .ai-chat-bubble {
      padding: 0.85rem 1rem;
      border-radius: 1rem;
      font-size: 0.9rem;
      line-height: 1.55;
      word-wrap: break-word;
    }

    .ai-chat-message.user .ai-chat-bubble {
      background: var(--primary);
      color: #fff;
      border-bottom-right-radius: 0.25rem;
    }

    .ai-chat-message.assistant .ai-chat-bubble {
      background: var(--card-bg);
      color: var(--text-body);
      border: 1px solid var(--border);
      border-bottom-left-radius: 0.25rem;
      box-shadow: var(--shadow-xs);
    }

    .ai-chat-message .message-time {
      font-size: 0.68rem;
      color: var(--text-light);
      margin-top: 0.35rem;
      padding: 0 0.25rem;
    }

    .ai-chat-message.user .message-time {
      text-align: right;
    }

    /* Typing Indicator */
    .ai-chat-typing {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 1rem;
      border-bottom-left-radius: 0.25rem;
      align-self: flex-start;
      box-shadow: var(--shadow-xs);
    }

    .ai-chat-typing .typing-dots {
      display: flex;
      gap: 0.25rem;
    }

    .ai-chat-typing .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--primary);
      animation: typingBounce 1.4s infinite ease-in-out both;
    }

    .ai-chat-typing .dot:nth-child(1) { animation-delay: -0.32s; }
    .ai-chat-typing .dot:nth-child(2) { animation-delay: -0.16s; }
    .ai-chat-typing .dot:nth-child(3) { animation-delay: 0s; }

    @keyframes typingBounce {
      0%, 80%, 100% {
        transform: scale(0.7);
        opacity: 0.5;
      }
      40% {
        transform: scale(1);
        opacity: 1;
      }
    }

    /* Welcome Message */
    .ai-chat-welcome {
      text-align: center;
      padding: 1.5rem 1rem;
    }

    .ai-chat-welcome .welcome-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--primary-ultra-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin: 0 auto 1rem;
      color: var(--primary);
    }

    .ai-chat-welcome h5 {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 0.35rem;
      color: var(--text-dark);
    }

    .ai-chat-welcome p {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.5;
    }

    /* Quick Actions / Suggestions */
    .ai-chat-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: var(--surface);
      border-top: 1px solid var(--border);
    }

    .ai-chat-suggestion {
      font-size: 0.78rem;
      font-weight: 500;
      color: var(--primary);
      background: var(--primary-ultra-light);
      border: 1px solid rgba(79, 70, 229, 0.15);
      border-radius: var(--radius-full);
      padding: 0.4rem 0.85rem;
      cursor: pointer;
      transition: all var(--transition);
    }

    .ai-chat-suggestion:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    /* Input Area */
    .ai-chat-input-area {
      padding: 0.85rem 1rem;
      background: var(--card-bg);
      border-top: 1px solid var(--border);
      display: flex;
      align-items: flex-end;
      gap: 0.65rem;
      flex-shrink: 0;
    }

    .ai-chat-input-wrapper {
      flex: 1;
      position: relative;
    }

    .ai-chat-input {
      width: 100%;
      border: 1.5px solid var(--border);
      border-radius: 1rem;
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
      font-family: inherit;
      resize: none;
      max-height: 120px;
      line-height: 1.45;
      transition: all var(--transition);
      background: var(--surface);
    }

    .ai-chat-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
      background: var(--card-bg);
    }

    .ai-chat-input::placeholder {
      color: var(--text-light);
    }

    .ai-chat-send-btn {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--primary);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      transition: all var(--transition);
      flex-shrink: 0;
    }

    .ai-chat-send-btn:hover:not(:disabled) {
      background: var(--primary-dark);
      transform: scale(1.05);
    }

    .ai-chat-send-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .ai-chat-send-btn.is-sending {
      animation: sendingPulse 1s ease-in-out infinite;
    }

    @keyframes sendingPulse {
      0%, 100% { opacity: 0.7; }
      50% { opacity: 1; }
    }

    /* Footer / Privacy Notice */
    .ai-chat-footer {
      padding: 0.5rem 1rem;
      background: var(--surface);
      border-top: 1px solid var(--border);
      text-align: center;
      flex-shrink: 0;
    }

    .ai-chat-footer p {
      font-size: 0.68rem;
      color: var(--text-light);
      margin: 0;
    }

    .ai-chat-footer a {
      color: var(--primary);
      text-decoration: none;
    }

    .ai-chat-footer a:hover {
      text-decoration: underline;
    }

    .ai-chat-footer .hsbr-brand {
      font-family: 'Loretta', Georgia, serif;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: #1f3a5f;
    }

    .ai-chat-footer .ai-brand {
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--primary);
    }

    /* Error State */
    .ai-chat-error {
      background: var(--rose-light);
      border: 1px solid rgba(244, 63, 94, 0.2);
      color: var(--rose);
      padding: 0.75rem 1rem;
      border-radius: 0.75rem;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0.5rem 1rem;
    }

    .ai-chat-error i {
      font-size: 1rem;
    }

    /* Rate Limit Warning */
    .ai-chat-rate-limit {
      background: var(--amber-light);
      border: 1px solid rgba(245, 158, 11, 0.2);
      color: #b45309;
      padding: 0.65rem 1rem;
      border-radius: 0.75rem;
      font-size: 0.82rem;
      text-align: center;
      margin: 0.5rem 1rem;
    }

    /* Lead Capture Form */
    .ai-chat-lead-form {
      padding: 1.25rem;
      background: var(--card-bg);
      border-radius: 0.85rem;
      margin: 0.5rem 1rem;
      border: 1px solid var(--border);
    }

    .ai-chat-lead-form h5 {
      font-size: 0.95rem;
      font-weight: 700;
      margin-bottom: 0.75rem;
      color: var(--text-dark);
    }

    .ai-chat-lead-form .form-group {
      margin-bottom: 0.85rem;
    }

    .ai-chat-lead-form label {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text-muted);
      display: block;
      margin-bottom: 0.35rem;
    }

    .ai-chat-lead-form input {
      width: 100%;
      border: 1.5px solid var(--border);
      border-radius: 0.65rem;
      padding: 0.6rem 0.85rem;
      font-size: 0.88rem;
      font-family: inherit;
      transition: all var(--transition);
    }

    .ai-chat-lead-form input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
    }

    .ai-chat-lead-form .submit-btn {
      width: 100%;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 0.65rem;
      padding: 0.7rem;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
    }

    .ai-chat-lead-form .submit-btn:hover {
      background: var(--primary-dark);
    }

    /* ===== Additional Header Elements (Template Compatibility) ===== */

    .ai-chat-header-text {
      display: flex;
      flex-direction: column;
    }

    .ai-chat-header-title {
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.3;
    }

    .ai-chat-header-status {
      font-size: 0.75rem;
      opacity: 0.85;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    .ai-chat-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #34d399;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    .ai-chat-header-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .ai-chat-header-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      border: none;
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
      flex-shrink: 0;
    }

    .ai-chat-header-btn:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    .ai-chat-header-btn svg {
      width: 18px;
      height: 18px;
    }

    /* Avatar SVG Support */
    .ai-chat-avatar svg {
      width: 20px;
      height: 20px;
      color: inherit;
    }

    /* ===== Message Variants (Template Compatibility) ===== */

    .ai-chat-message-user {
      align-self: flex-end;
    }

    .ai-chat-message-assistant {
      align-self: flex-start;
    }

    .ai-chat-message-content {
      padding: 0.85rem 1rem;
      border-radius: 1rem;
      font-size: 0.9rem;
      line-height: 1.55;
      word-wrap: break-word;
    }

    .ai-chat-message-user .ai-chat-message-content {
      background: var(--primary);
      color: #fff;
      border-bottom-right-radius: 0.25rem;
    }

    .ai-chat-message-assistant .ai-chat-message-content {
      background: var(--card-bg);
      color: var(--text-body);
      border: 1px solid var(--border);
      border-bottom-left-radius: 0.25rem;
      box-shadow: var(--shadow-xs);
    }

    .ai-chat-message-time {
      font-size: 0.68rem;
      color: var(--text-light);
      margin-top: 0.35rem;
      padding: 0 0.25rem;
    }

    .ai-chat-message-user .ai-chat-message-time {
      text-align: right;
    }

    /* ===== Quick Actions ===== */

    .ai-chat-quick-actions {
      display: flex;
      align-items: center;
    }

    .ai-chat-quick-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
    }

    .ai-chat-quick-btn:hover {
      background: var(--primary-ultra-light);
      color: var(--primary);
      border-color: var(--primary);
    }

    .ai-chat-quick-btn svg {
      width: 16px;
      height: 16px;
    }

    /* ===== Form and Textarea ===== */

    .ai-chat-form {
      display: flex;
      align-items: flex-end;
      gap: 0.5rem;
      flex: 1;
    }

    .ai-chat-textarea {
      flex: 1;
      border: 1.5px solid var(--border);
      border-radius: 1rem;
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
      font-family: inherit;
      resize: none;
      max-height: 120px;
      line-height: 1.45;
      transition: all var(--transition);
      background: var(--surface);
    }

    .ai-chat-textarea:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
      background: var(--card-bg);
    }

    .ai-chat-textarea::placeholder {
      color: var(--text-light);
    }

    /* ===== Typing Indicator (Template Compatibility) ===== */

    .ai-chat-typing span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--primary);
      display: inline-block;
      animation: typingBounce 1.4s infinite ease-in-out both;
    }

    .ai-chat-typing span:nth-child(1) { animation-delay: -0.32s; }
    .ai-chat-typing span:nth-child(2) { animation-delay: -0.16s; }
    .ai-chat-typing span:nth-child(3) { animation-delay: 0s; }

    /* ===== Launcher Pulse ===== */

    .ai-chat-launcher-pulse {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 14px;
      height: 14px;
      background: var(--rose);
      border-radius: 50%;
      border: 2px solid #fff;
      animation: pulse-dot 2s ease-in-out infinite;
    }

    /* ===== Lead Form (Template Compatibility) ===== */

    .ai-chat-lead-form-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
    }

    .ai-chat-lead-form-header h4 {
      font-size: 0.95rem;
      font-weight: 700;
      margin: 0;
      color: var(--text-dark);
    }

    .ai-chat-lead-close {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition);
    }

    .ai-chat-lead-close:hover {
      background: var(--rose-light);
      color: var(--rose);
      border-color: var(--rose);
    }

    .ai-chat-lead-close svg {
      width: 14px;
      height: 14px;
    }

    .ai-chat-form-group {
      margin-bottom: 0.85rem;
    }

    .ai-chat-submit-btn {
      width: 100%;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: 0.65rem;
      padding: 0.7rem;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
    }

    .ai-chat-submit-btn:hover {
      background: var(--primary-dark);
    }

    /* ===== Notice/Warning Styles ===== */

    .ai-chat-notice {
      padding: 0.65rem 1rem;
      border-radius: 0.75rem;
      font-size: 0.82rem;
      text-align: center;
      margin: 0.5rem 0;
    }

    .ai-chat-notice-warning {
      background: var(--amber-light);
      border: 1px solid rgba(245, 158, 11, 0.2);
      color: #b45309;
    }

    /* ===== Send Button Disabled State ===== */

    .ai-chat-send-btn-disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Mobile Responsive */
    @media (max-width: 575.98px) {
      .ai-chat-widget {
        bottom: 18px;
        right: 18px;
      }

      .ai-chat-launcher {
        width: 50px;
        height: 50px;
        font-size: 1.35rem;
      }

      .ai-chat-window {
        width: calc(100vw - 36px);
        height: calc(100vh - 100px);
        max-height: none;
        bottom: 68px;
        right: 0;
        border-radius: 1rem;
      }

      .ai-chat-header {
        padding: 1rem;
      }

      .ai-chat-avatar {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
      }

      .ai-chat-header-info h4,
      .ai-chat-header-title {
        font-size: 0.95rem;
      }

      .ai-chat-bubble,
      .ai-chat-message-content {
        padding: 0.75rem 0.9rem;
        font-size: 0.88rem;
      }

      .ai-chat-input,
      .ai-chat-textarea {
        font-size: 16px; /* Prevents iOS zoom */
        padding: 0.65rem 0.9rem;
      }

      .ai-chat-send-btn {
        width: 38px;
        height: 38px;
        font-size: 1rem;
      }

      .ai-chat-quick-btn {
        width: 32px;
        height: 32px;
      }

      .ai-chat-header-btn {
        width: 28px;
        height: 28px;
      }
    }

    /* Dark mode support (optional) */
    @media (prefers-color-scheme: dark) {
      .ai-chat-widget {
        /* Could add dark mode styles here if needed */
      }
    }

    /* ==========================================================================
       9. STATS COUNTER
       ========================================================================== */
    #stats {
      background: var(--gradient-dark);
      color: #fff;
      padding: 4rem 0;
    }

    .stat-block { text-align: center; }
    .stat-block .stat-number {
      font-size: 2.75rem;
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -.03em;
    }

    .stat-block .stat-label {
      font-size: .85rem;
      opacity: .6;
      font-weight: 500;
    }

    .stat-divider {
      width: 1px;
      background: rgba(255,255,255,.12);
      align-self: stretch;
    }

    /* ==========================================================================
       10. CTA SECTION
       ========================================================================== */
    #cta-section {
      background: var(--gradient-cta);
      color: #fff;
      padding: 6rem 0;
      position: relative;
      overflow: hidden;
    }

    #cta-section .cta-orbs {
      position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    }

    #cta-section .cta-orbs .orb {
      position: absolute; border-radius: 50%; background: rgba(255,255,255,.06);
    }

    #cta-section .cta-orbs .orb:nth-child(1) { width: 500px; height: 500px; top: -200px; right: -100px; }
    #cta-section .cta-orbs .orb:nth-child(2) { width: 300px; height: 300px; bottom: -100px; left: -50px; }

    .cta-card {
      background: rgba(255,255,255,.1);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius);
      padding: 2.25rem 1.75rem;
      text-align: center;
      transition: all var(--transition);
      height: 100%;
      position: relative;
      z-index: 2;
    }

    .cta-card:hover {
      transform: translateY(-6px);
      background: rgba(255,255,255,.16);
      box-shadow: 0 20px 50px rgba(0,0,0,.15);
    }

    .cta-card .cta-icon {
      width: 64px; height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.65rem;
      background: rgba(255,255,255,.12);
      border-radius: 1rem;
      margin: 0 auto 1.15rem;
      border: 1px solid rgba(255,255,255,.1);
    }

    .cta-card h5 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; color: #fff; }
    .cta-card p { font-size: .87rem; opacity: .8; margin-bottom: 1.5rem; line-height: 1.6; }

    .btn-cta-white {
      background: #fff;
      color: var(--primary-dark);
      font-weight: 700;
      font-size: .87rem;
      border: none;
      border-radius: var(--radius-full);
      padding: .6rem 1.65rem;
      transition: all var(--transition);
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      text-decoration: none;
    }

    .btn-cta-white:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0,0,0,.18);
      color: var(--primary-dark);
    }

    /* ==========================================================================
       11. TESTIMONIALS
       ========================================================================== */
    #testimonials { background: var(--surface); }

    .testimonial-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 2rem;
      height: 100%;
    }

    .testimonial-card .stars { color: var(--amber); font-size: .9rem; margin-bottom: .85rem; }

    .testimonial-card .quote {
      font-size: .95rem;
      line-height: 1.75;
      color: var(--text-body);
      margin-bottom: 1.25rem;
      font-style: italic;
    }

    .testimonial-card .author {
      display: flex;
      align-items: center;
      gap: .75rem;
    }

    .author-avatar {
      width: 42px; height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem;
      font-weight: 700;
      color: #fff;
    }

    .author-info .author-name { font-size: .87rem; font-weight: 700; color: var(--text-dark); }
    .author-info .author-role { font-size: .78rem; color: var(--text-muted); }

    /* ==========================================================================
       12. FAQ
       ========================================================================== */
    #faq { background: #fff; }

    .faq-wrapper {
      max-width: 760px;
      margin: 0 auto;
    }

    .accordion-item {
      border: 1px solid var(--border);
      border-radius: var(--radius) !important;
      margin-bottom: .85rem;
      overflow: hidden;
      background: var(--card-bg);
    }

    .accordion-button {
      font-weight: 600;
      font-size: .95rem;
      color: var(--text-dark);
      padding: 1.15rem 1.35rem;
      border-radius: var(--radius) !important;
      background: var(--card-bg);
    }

    .accordion-button:not(.collapsed) {
      background: var(--primary-ultra-light);
      color: var(--primary);
      box-shadow: none;
    }

    .accordion-button::after {
      background-size: 1rem;
    }

    .accordion-body {
      font-size: .9rem;
      color: var(--text-muted);
      line-height: 1.75;
      padding: 0 1.35rem 1.25rem;
    }

    /* ==========================================================================
       13. CONTACT / FINAL CTA
       ========================================================================== */
    #contact {
      background: var(--gradient-soft);
      position: relative;
      overflow: hidden;
    }

    .contact-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.5rem;
      text-align: center;
      height: 100%;
    }

    .contact-card .cc-icon {
      width: 48px; height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: .85rem;
      margin: 0 auto .85rem;
      font-size: 1.2rem;
    }

    .contact-card h6 { font-size: .95rem; font-weight: 700; margin-bottom: .3rem; }
    .contact-card p { font-size: .83rem; color: var(--text-muted); margin: 0; }

    /* ==========================================================================
       14. FOOTER
       ========================================================================== */
    footer {
      background: #0f172a;
      color: rgba(255,255,255,.65);
      padding: 4rem 0 1.5rem;
      font-size: .85rem;
    }

    footer h6 {
      color: #fff;
      font-size: .85rem;
      font-weight: 700;
      margin-bottom: 1.15rem;
      text-transform: uppercase;
      letter-spacing: .06em;
    }

    footer a {
      color: rgba(255,255,255,.55);
      text-decoration: none;
      transition: color var(--transition);
      font-size: .84rem;
    }

    footer a:hover { color: var(--accent-light); }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: .5rem;
      font-size: 1.4rem;
      font-weight: 900;
      color: #fff !important;
      margin-bottom: .75rem;
      text-decoration: none;
    }

    .footer-brand .fb-icon {
      width: 32px; height: 32px;
      background: var(--gradient-hero);
      border-radius: .5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .95rem;
      color: #fff;
    }

    .footer-links { list-style: none; padding: 0; margin: 0; }
    .footer-links li { margin-bottom: .6rem; }

    .footer-social {
      display: flex;
      gap: .6rem;
    }

    .footer-social a {
      width: 36px; height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.06);
      border-radius: .5rem;
      font-size: .95rem;
      color: rgba(255,255,255,.5);
      transition: all var(--transition);
      border: 1px solid rgba(255,255,255,.06);
    }

    .footer-social a:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.06);
      margin-top: 2.5rem;
      padding-top: 1.25rem;
      font-size: .8rem;
      opacity: .5;
    }

    /* ==========================================================================
       UTILITIES & RESPONSIVE
       ========================================================================== */
    .btn-primary-gradient {
      background: var(--gradient-hero);
      color: #fff;
      border: none;
      font-weight: 700;
      border-radius: var(--radius-full);
      padding: .7rem 1.8rem;
      font-size: .92rem;
      transition: all var(--transition);
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      text-decoration: none;
    }

    .btn-primary-gradient:hover {
      opacity: .9;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(79,70,229,.3);
      color: #fff;
    }

    .btn-outline-primary-custom {
      border: 2px solid var(--primary);
      color: var(--primary);
      background: transparent;
      font-weight: 600;
      border-radius: var(--radius-full);
      padding: .65rem 1.75rem;
      font-size: .92rem;
      transition: all var(--transition);
      display: inline-flex;
      align-items: center;
      gap: .4rem;
      text-decoration: none;
    }

    .btn-outline-primary-custom:hover {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary);
    }

    @media (max-width: 991.98px) {
      .nav-actions { margin-top: .75rem; flex-wrap: wrap; }
      #hero { padding: 6rem 0 4rem; }
      .hero-visual { margin-top: 3rem; }
      section { padding: 4.5rem 0; }
      .section-title { font-size: 2rem; }
      .mock-stat-row { grid-template-columns: repeat(3, 1fr); }
      .stat-block .stat-number { font-size: 2rem; }
      .float-badge.fb-1 { right: 0; }
      .float-badge.fb-2 { left: 0; }
    }

    @media (max-width: 767.98px) {
      section { padding: 3.5rem 0; }
      .section-title { font-size: 1.75rem; }
      .hero-title { font-size: 1.85rem; }
      .hero-desc { font-size: 1rem; }
      .stat-block .stat-number { font-size: 1.75rem; }
      .stat-divider { display: none; }
      .how-tabs .nav-link { font-size: .78rem; padding: .5rem 1rem !important; }
      .float-badge { display: none; }
    }

    @media (max-width: 575.98px) {
      .section-title { font-size: 1.5rem; }
      .hero-title { font-size: 1.6rem; }
      .hero-buttons { flex-direction: column; }
      .hero-buttons .btn-hero-primary,
      .hero-buttons .btn-hero-secondary { width: 100%; justify-content: center; }
      .hero-trust { justify-content: center; }
      .hero-trust-divider { display: none; }
      .logo-row { gap: 1.5rem; }
    }

    /* Scroll-triggered animations */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }