h1, h2, h3, .section-header h2, .cta h2 {
        font-family: 'Outfit', sans-serif;
      }

      .header {
        background-color: rgba(8, 9, 20, 0.97) !important;
        border-bottom: 1px solid rgba(88,101,242,0.14) !important;
      }
      .header.scrolled {
        background-color: rgba(8, 9, 20, 0.99) !important;
        box-shadow: 0 2px 24px rgba(0,0,0,0.5) !important;
      }

      .footer {
        background-color: #07080f !important;
        border-top: 1px solid rgba(88,101,242,0.1);
      }
      .footer-bottom {
        border-top-color: rgba(88,101,242,0.08) !important;
      }

      .hero {
        min-height: 100vh;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0b0c18;
        position: relative;
        overflow: hidden;
      }

      .hero-orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
      }
      .hero-orb-1 {
        width: 700px; height: 700px;
        background: radial-gradient(circle, rgba(88,101,242,0.22) 0%, transparent 65%);
        top: -180px; left: -200px;
        animation: orbFloat1 14s ease-in-out infinite;
        filter: blur(40px);
      }
      .hero-orb-2 {
        width: 550px; height: 550px;
        background: radial-gradient(circle, rgba(71,82,196,0.18) 0%, transparent 65%);
        bottom: -120px; right: -120px;
        animation: orbFloat2 17s ease-in-out infinite;
        filter: blur(50px);
      }
      .hero-orb-3 {
        width: 350px; height: 350px;
        background: radial-gradient(circle, rgba(255,126,51,0.07) 0%, transparent 70%);
        top: 55%; left: 55%;
        transform: translate(-50%, -50%);
        animation: orbFloat3 11s ease-in-out infinite;
        filter: blur(60px);
      }
      @keyframes orbFloat1 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33%       { transform: translate(50px, 40px) scale(1.06); }
        66%       { transform: translate(-25px, 60px) scale(0.96); }
      }
      @keyframes orbFloat2 {
        0%, 100% { transform: translate(0, 0); }
        50%       { transform: translate(-50px, -40px); }
      }
      @keyframes orbFloat3 {
        0%, 100% { transform: translate(-50%, -50%) scale(1); }
        50%       { transform: translate(-50%, -50%) scale(1.4); }
      }

      .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(88,101,242,0.08) 1px, transparent 1px);
        background-size: 36px 36px;
        pointer-events: none;
        z-index: 0;
      }

      .hero .container {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding-top: 100px;
        padding-bottom: 120px;
      }

      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(88,101,242,0.1);
        border: 1px solid rgba(88,101,242,0.28);
        border-radius: 50px;
        padding: 6px 18px;
        font-size: 0.75rem;
        font-weight: 700;
        color: #8b96f8;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        margin-bottom: 30px;
        animation: fadeSlideUp 0.6s 0.05s ease;
      }
      .hero-badge-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #5865f2;
        box-shadow: 0 0 8px #5865f2;
        animation: dotPulse 2.2s ease-in-out infinite;
        flex-shrink: 0;
      }
      @keyframes dotPulse {
        0%, 100% { box-shadow: 0 0 5px #5865f2; }
        50%       { box-shadow: 0 0 14px #5865f2, 0 0 26px rgba(88,101,242,0.4); }
      }

      .hero-content {
        max-width: 820px;
        margin: 0;
      }

      .hero h1 {
        font-family: 'Outfit', sans-serif;
        font-size: clamp(2.6rem, 5.5vw, 5rem);
        font-weight: 900;
        line-height: 1.06;
        letter-spacing: -0.025em;
        margin-bottom: 22px;
        color: #eceeff;
        text-shadow: none;
        animation: fadeSlideUp 0.7s 0.15s ease;
      }
      .hero h1 .accent {
        background: linear-gradient(135deg, #818cf8 0%, #5865f2 50%, #7c89f5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .hero > .container > .hero-content > p {
        font-size: 1.12rem;
        color: #7b8194;
        max-width: 520px;
        margin: 0 auto 38px;
        line-height: 1.75;
        animation: fadeSlideUp 0.7s 0.25s ease;
      }

      .hero-buttons {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        animation: fadeSlideUp 0.7s 0.35s ease;
      }
      .hero .btn-primary {
        background: #5865f2;
        color: #fff;
        padding: 13px 30px;
        font-size: 0.97rem;
        font-weight: 700;
        border-radius: 10px;
        border: none;
        transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
        box-shadow: 0 4px 20px rgba(88,101,242,0.35);
      }
      .hero .btn-primary:hover {
        background: #4752c4;
        transform: translateY(-3px);
        box-shadow: 0 10px 32px rgba(88,101,242,0.5);
        color: #fff;
      }
      .hero .btn-secondary {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.12);
        color: #c8cce8;
        padding: 13px 30px;
        font-size: 0.97rem;
        font-weight: 600;
        border-radius: 10px;
        transition: all 0.2s;
      }
      .hero .btn-secondary:hover {
        background: rgba(255,255,255,0.09);
        border-color: rgba(255,255,255,0.22);
        color: #fff;
        transform: translateY(-3px);
      }

      .hero-stats {
        display: flex;
        gap: 56px;
        margin-top: 60px;
        padding-top: 40px;
        border-top: 1px solid rgba(255,255,255,0.055);
        justify-content: center;
        flex-wrap: wrap;
        animation: fadeSlideUp 0.7s 0.45s ease;
      }
      .hero-stat-value {
        font-family: 'Outfit', sans-serif;
        font-size: 1.9rem;
        font-weight: 800;
        color: #e4e6eb;
        line-height: 1;
      }
      .hero-stat-label {
        font-size: 0.72rem;
        color: #474c66;
        margin-top: 6px;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 600;
      }

      .hero-scroll {
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        z-index: 2;
        animation: fadeSlideUp 0.7s 0.6s ease;
      }
      .hero-scroll span {
        font-size: 0.65rem;
        color: #3d4160;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 700;
      }
      .hero-scroll-line {
        width: 1px; height: 44px;
        background: linear-gradient(to bottom, #5865f2, transparent);
        animation: scrollDrop 1.9s ease-in-out infinite;
        transform-origin: top;
      }
      @keyframes scrollDrop {
        0%   { transform: scaleY(0); opacity: 1; transform-origin: top; }
        50%  { transform: scaleY(1); opacity: 1; transform-origin: top; }
        51%  { transform: scaleY(1); opacity: 1; transform-origin: bottom; }
        100% { transform: scaleY(0); opacity: 0; transform-origin: bottom; }
      }

      @keyframes fadeSlideUp {
        from { transform: translateY(18px); }
        to   { transform: translateY(0); }
      }

      [data-reveal] {
        opacity: 0;
        transform: translateY(26px);
        transition: opacity 0.65s ease, transform 0.65s ease;
      }
      [data-reveal].revealed { opacity: 1; transform: translateY(0); }
      [data-reveal-delay="1"] { transition-delay: 0.08s; }
      [data-reveal-delay="2"] { transition-delay: 0.16s; }
      [data-reveal-delay="3"] { transition-delay: 0.24s; }
      [data-reveal-delay="4"] { transition-delay: 0.32s; }
      [data-reveal-delay="5"] { transition-delay: 0.40s; }
      [data-reveal-delay="6"] { transition-delay: 0.48s; }

      .section-sep {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(88,101,242,0.22), transparent);
        border: none;
        margin: 0;
      }

      .section-header h2 {
        font-family: 'Outfit', sans-serif;
        font-size: 2.3rem;
        font-weight: 800;
        letter-spacing: -0.015em;
      }
      .section-header h2::after {
        background: linear-gradient(90deg, #5865f2, #818cf8);
        border-radius: 2px;
        width: 38px;
        height: 3px;
      }
      .section-header p {
        color: #5e6380;
        font-size: 1.05rem;
      }

      .servers {
        background: #0d0e1a;
      }

      .features {
        background: #0b0c18;
      }
      .feature-card {
        background: linear-gradient(145deg, #111220, #0d0e1c);
        border-radius: 16px;
        border: 1px solid rgba(88,101,242,0.09);
        padding: 34px 26px;
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
      }
      .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 48px rgba(88,101,242,0.18);
        border-color: rgba(88,101,242,0.32);
      }
      .feature-icon {
        width: 64px; height: 64px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(88,101,242,0.14), rgba(88,101,242,0.04));
        border: 1px solid rgba(88,101,242,0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
      }
      .feature-icon i { font-size: 24px; color: #818cf8; }
      .feature-card h3 {
        font-family: 'Outfit', sans-serif;
        font-size: 1.15rem;
        font-weight: 700;
        margin-bottom: 10px;
        color: #dde0f5;
      }
      .feature-card p {
        font-size: 0.9rem;
        line-height: 1.68;
        color: #4e5470;
      }

      .premium {
        background: #0d0e1a;
      }

      .cta {
        background: #0b0c18;
        border-top: 1px solid rgba(88,101,242,0.12);
        position: relative;
      }
      .cta::before {
        content: '';
        position: absolute;
        top: -1px; left: 50%;
        transform: translateX(-50%);
        width: 220px; height: 1px;
        background: linear-gradient(90deg, transparent, #5865f2, transparent);
      }
      .cta::after { display: none; }
      .cta h2 {
        font-family: 'Outfit', sans-serif;
        font-size: 2.8rem;
        font-weight: 900;
        letter-spacing: -0.02em;
        color: #eceeff;
        text-shadow: none;
      }
      .cta p { color: #4e5470; }
      .cta .btn-primary {
        background: #5865f2;
        color: #fff;
        padding: 14px 36px;
        font-size: 1rem;
        font-weight: 700;
        border-radius: 10px;
        box-shadow: 0 8px 30px rgba(88,101,242,0.38);
        transition: all 0.22s;
      }
      .cta .btn-primary:hover {
        background: #4752c4;
        transform: translateY(-3px);
        box-shadow: 0 14px 40px rgba(88,101,242,0.5);
        color: #fff;
      }

      .topgg-widget-section {
        background: #0d0e1a;
        padding: 28px 0 32px;
      }
      .topgg-widget-wrap { display: flex; justify-content: center; align-items: center; }
      .topgg-widget-inner {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        background: rgba(88,101,242,0.06);
        border: 1px solid rgba(88,101,242,0.18);
        border-radius: 14px;
        padding: 12px 22px;
        box-shadow: 0 0 30px rgba(88,101,242,0.07);
        flex-wrap: wrap;
        justify-content: center;
        max-width: 420px;
        width: fit-content;
      }
      .topgg-widget-label {
        display: flex; align-items: center; gap: 7px;
        font-size: 0.8rem; font-weight: 600;
        color: #555a7a; white-space: nowrap;
      }
      .topgg-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: #FF3366; box-shadow: 0 0 7px #FF3366;
        animation: topgg-pulse 2s ease-in-out infinite; flex-shrink: 0;
      }
      @keyframes topgg-pulse {
        0%, 100% { box-shadow: 0 0 5px #FF3366; }
        50%       { box-shadow: 0 0 13px #FF3366, 0 0 22px rgba(255,51,102,0.35); }
      }
      .topgg-logo { width: 20px; height: 20px; flex-shrink: 0; }
      .topgg-widget-label strong { color: #9098b1; }
      .topgg-widget-link {
        display: block; border-radius: 9px; overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
      }
      .topgg-widget-link:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(255,51,102,0.22); }
      .topgg-widget-img { display: block; height: 38px; width: auto; border-radius: 9px; }
      .topgg-vote-btn {
        display: inline-flex; align-items: center; gap: 6px;
        background: linear-gradient(135deg, #FF3366, #b5002a);
        color: #fff; font-size: 0.8rem; font-weight: 700;
        padding: 8px 16px; border-radius: 8px;
        text-decoration: none; white-space: nowrap;
        transition: opacity 0.15s, transform 0.15s;
        box-shadow: 0 2px 10px rgba(255,51,102,0.32);
      }
      .topgg-vote-btn:hover { color: #fff; opacity: 0.88; transform: translateY(-1px); }
      .topgg-vote-btn i { font-size: 0.76rem; }

      @media (max-width: 768px) {
        .hero h1 { font-size: 2.3rem; }
        .hero > .container > .hero-content > p { font-size: 1rem; }
        .hero-stats { gap: 28px; }
        .hero-stat-value { font-size: 1.5rem; }
        .hero-scroll { display: none; }
        .cta h2 { font-size: 2rem; }
      }

/* ── from CogitSecurity.ejs ── */
      :root{--primary-color:#5865f2;--bg-color:#0b0c18;--text-color:#e4e6eb;}
      *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
      html{scroll-behavior:smooth;}
      body{font-family:'Outfit','Segoe UI',sans-serif;background:#0b0c18;color:#e4e6eb;overflow-x:hidden;min-height:100vh;}
      .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}
      .hero{min-height:100vh;background:#0b0c18;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
      .hero .container{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:100px;padding-bottom:120px;}
      .hero-content{max-width:820px;}
      .hero h1{font-family:'Outfit',sans-serif;font-size:clamp(2.6rem,5.5vw,5rem);font-weight:900;line-height:1.06;letter-spacing:-0.025em;margin-bottom:22px;color:#eceeff;}
      .hero h1 .accent{background:linear-gradient(135deg,#818cf8 0%,#5865f2 50%,#7c89f5 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}