/* ===================================================
   No2tetnour Landing Page - علاقات من نور
   =================================================== */

/* Design Tokens / CSS Variables */
:root {
    --n2-purple: #7b5297;
    --n2-purple-light: #9b72b7;
    --n2-green: #9fb09d;
    --n2-beige: #d4c9b9;
    --n2-bg: #fdfbf7;
    --n2-fg: #2d2a26;
    --n2-card: #ffffff;
    --n2-muted: #f4f1ea;
    --n2-muted-fg: #7d7871;
    --n2-accent-fg: #4a453e;
    --n2-border: #e8e4dc;
    --n2-destructive: #d4183d;
    --n2-footer-bg: #1a1816;
    --n2-font-heading: 'Tajawal', sans-serif;
    --n2-font-body: 'Noto Sans Arabic', sans-serif;
    --n2-radius: 1rem;

    /* Variables required by shared partials (testimonials, gallery, registration) */
    --background: #fdfbf7;
    --foreground: #2d2a26;
    --primary: #7b5297;
    --primary-foreground: #fff;
    --card: #fff;
    --card-foreground: #2d2a26;
    --muted: #f4f1ea;
    --muted-foreground: #7d7871;
    --accent: #9fb09d;
    --accent-foreground: #fff;
    --gold: #d4a017;
    --teal: #7b5297;
    --border: rgba(123, 82, 151, 0.2);
    --input: transparent;
    --input-background: #fff;
    --ring: #7b5297;
    --radius: 0.625rem;
}

/* Shared partials overrides */
.n2-landing .iti {
    width: 100% !important;
}

/* Testimonial star icons should be filled golden */
.n2-landing .testimonial-card [data-lucide="star"] {
    fill: var(--gold);
    stroke: var(--gold);
}

/* Base Reset for Landing Page */
.n2-landing {
    font-family: var(--n2-font-body);
    background-color: var(--n2-bg);
    color: var(--n2-fg);
    direction: rtl;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.n2-landing ::selection {
    background-color: var(--n2-purple);
    color: #fff;
}

.n2-landing .font-heading {
    font-family: var(--n2-font-heading);
}

/* Container */
.n2-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 768px) {
    .n2-container {
        padding: 0 2rem;
    }
}

/* ===================================================
   Header
   =================================================== */
.n2-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all 0.3s ease;
    padding: 1rem 0;
}

.n2-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
}

.n2-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.n2-header-logo img {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .n2-header-logo img {
        height: 3rem;
    }
}

.n2-header-countdown {
    display: none;
    align-items: center;
    gap: 1rem;
    border-right: 1px solid var(--n2-border);
    padding-right: 1.5rem;
}

@media (min-width: 1024px) {
    .n2-header-countdown {
        display: flex;
    }
}

.n2-header-countdown-label {
    font-size: 0.625rem;
    color: var(--n2-muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.n2-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

@media (min-width: 768px) {
    .n2-header-actions {
        gap: 1.5rem;
    }
}

.n2-header-price {
    display: none;
    align-items: center;
    gap: 0.75rem;
    background: rgba(212, 201, 185, 0.1);
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    border: 1px solid rgba(212, 201, 185, 0.2);
}

@media (min-width: 640px) {
    .n2-header-price {
        display: flex;
    }
}

.n2-header-price .old-price {
    font-size: 0.875rem;
    text-decoration: line-through;
    color: var(--n2-muted-fg);
    opacity: 0.6;
}

.n2-header-price .free-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--n2-purple);
    font-weight: 700;
    font-size: 0.875rem;
}

.n2-live-dot {
    position: relative;
    display: flex;
    height: 0.5rem;
    width: 0.5rem;
}

.n2-live-dot .ping {
    animation: n2-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background-color: var(--n2-purple);
    opacity: 0.75;
}

.n2-live-dot .dot {
    position: relative;
    display: inline-flex;
    border-radius: 9999px;
    height: 0.5rem;
    width: 0.5rem;
    background-color: var(--n2-purple);
}

.n2-header-whatsapp {
    display: none;
    align-items: center;
    gap: 0.75rem;
    color: var(--n2-muted-fg);
}

@media (min-width: 768px) {
    .n2-header-whatsapp {
        display: flex;
    }
}

.n2-header-whatsapp a {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    transition: all 0.2s;
    border: 1px solid transparent;
    color: var(--n2-muted-fg);
}

.n2-header-whatsapp a:hover {
    background: rgba(123, 82, 151, 0.1);
    color: var(--n2-purple);
    border-color: rgba(123, 82, 151, 0.2);
}

/* ===================================================
   Header CTA: Pulse animation + Free tag
   =================================================== */
.n2-header-cta {
    position: relative;
    overflow: visible;
    animation: n2-cta-pulse 4s ease-in-out infinite;
}

@keyframes n2-cta-pulse {
    0%, 100% { box-shadow: 0 10px 15px -3px rgba(123, 82, 151, 0.2); transform: scale(1); }
    15% { box-shadow: 0 0 0 0 rgba(123, 82, 151, 0.5); transform: scale(1.05); }
    30% { box-shadow: 0 0 0 10px rgba(123, 82, 151, 0); transform: scale(1); }
    45% { box-shadow: 0 0 0 0 rgba(123, 82, 151, 0.4); transform: scale(1.03); }
    55% { box-shadow: 0 0 0 8px rgba(123, 82, 151, 0); transform: scale(1); }
}

.n2-header-cta:hover {
    animation-play-state: paused;
}

.n2-header-cta-free {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(135deg, #d4a017, #e8b82a);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    font-family: var(--n2-font-heading);
    padding: 2px 8px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.4);
    z-index: 1;
    pointer-events: none;
    line-height: 1.4;
}

/* ===================================================
   Buttons
   =================================================== */
.n2-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--n2-purple);
    color: #fff;
    padding: 0.625rem 2rem;
    border-radius: 0.75rem;
    font-family: var(--n2-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 0.2s;
    box-shadow: 0 10px 15px -3px rgba(123, 82, 151, 0.2);
    border: none;
    cursor: pointer;
    text-decoration: none;
}

@media (min-width: 768px) {
    .n2-btn-primary {
        padding: 0.625rem 2rem;
        font-size: 1rem;
    }
}

.n2-btn-primary:hover {
    background: rgba(123, 82, 151, 0.9);
}

.n2-btn-primary:active {
    transform: scale(0.95);
}

.n2-btn-primary-lg {
    padding: 1.25rem 3rem;
    font-size: 1.25rem;
    border-radius: var(--n2-radius);
    box-shadow: 0 25px 50px -12px rgba(123, 82, 151, 0.25);
}

@media (min-width: 640px) {
    .n2-btn-primary-lg {
        width: auto;
    }
}

.n2-btn-primary-xl {
    padding: 1.25rem 3rem;
    font-size: 1.5rem;
    border-radius: var(--n2-radius);
    box-shadow: 0 25px 50px -12px rgba(123, 82, 151, 0.3);
    width: 100%;
}

@media (min-width: 640px) {
    .n2-btn-primary-xl {
        width: auto;
    }
}

.n2-btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: #fff;
    color: var(--n2-purple);
    padding: 1.25rem;
    border-radius: var(--n2-radius);
    font-family: var(--n2-font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    width: 100%;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.n2-btn-white:hover {
    box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2);
    transform: scale(1.02);
}

/* ===================================================
   Hero Section
   =================================================== */
.n2-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 7rem;
    padding-bottom: 4rem;
    overflow: hidden;
}

.n2-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.n2-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
}

.n2-hero-bg .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(253, 251, 247, 0.8), rgba(253, 251, 247, 0.4), var(--n2-bg));
}

.n2-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
}

/* Event Badges */
.n2-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.n2-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(212, 201, 185, 0.2);
    color: var(--n2-accent-fg);
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(212, 201, 185, 0.3);
}

.n2-badge i {
    color: var(--n2-purple);
}

.n2-badge-highlight {
    background: var(--n2-purple);
    color: #fff;
    font-weight: 700;
    border-color: rgba(123, 82, 151, 0.2);
    box-shadow: 0 10px 15px -3px rgba(123, 82, 151, 0.2);
    animation: n2-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.n2-badge-highlight i {
    color: #fff;
}

.n2-badge-outline {
    background: rgba(123, 82, 151, 0.1);
    color: var(--n2-purple);
    font-weight: 700;
    border-color: rgba(123, 82, 151, 0.2);
}

.n2-badge-outline i {
    color: var(--n2-purple);
}

/* Hero Headline */
.n2-hero h1 {
    font-family: var(--n2-font-heading);
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.2;
    max-width: 56rem;
    margin: 0 auto 1.5rem;
    color: var(--n2-fg);
}

@media (min-width: 768px) {
    .n2-hero h1 {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .n2-hero h1 {
        font-size: 3.75rem;
    }
}

.n2-hero-subtitle {
    font-size: 1.125rem;
    color: var(--n2-muted-fg);
    max-width: 42rem;
    margin: 0 auto 2.5rem;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .n2-hero-subtitle {
        font-size: 1.25rem;
    }
}

/* Video Placeholder */
.n2-video-wrapper {
    position: relative;
    max-width: 56rem;
    margin: 0 auto 3rem;
    cursor: pointer;
}

.n2-video-wrapper .video-container {
    aspect-ratio: 16 / 9;
    background: var(--n2-muted);
    border-radius: var(--n2-radius);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 4px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

.n2-video-wrapper .video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.n2-video-wrapper:hover .video-container img {
    transform: scale(1.05);
}

.n2-video-wrapper .video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.n2-video-wrapper:hover .video-overlay {
    background: rgba(0, 0, 0, 0.1);
}

.n2-play-btn {
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    background: rgba(123, 82, 151, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s;
}

.n2-video-wrapper:hover .n2-play-btn {
    transform: scale(1.1);
}

.n2-video-wrapper .blur-circle {
    position: absolute;
    width: 8rem;
    height: 8rem;
    border-radius: 9999px;
    filter: blur(48px);
    z-index: -1;
    opacity: 0.2;
}

.n2-video-wrapper .blur-circle.beige {
    bottom: -1.5rem;
    right: -1.5rem;
    background: var(--n2-beige);
}

.n2-video-wrapper .blur-circle.purple {
    top: -1.5rem;
    left: -1.5rem;
    background: var(--n2-purple);
    opacity: 0.1;
}

/* Benefit Icons */
.n2-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 48rem;
    margin: 0 auto 3rem;
}

@media (min-width: 640px) {
    .n2-benefits {
        grid-template-columns: repeat(3, 1fr);
    }
}

.n2-benefit-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.n2-benefit-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--n2-radius);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n2-purple);
}

.n2-benefit-text {
    font-family: var(--n2-font-heading);
    font-weight: 500;
    color: var(--n2-fg);
}

/* CTA Area */
.n2-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.n2-price-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(123, 82, 151, 0.1);
}

.n2-price-badge .old {
    font-size: 1.25rem;
    text-decoration: line-through;
    color: var(--n2-muted-fg);
    opacity: 0.6;
}

.n2-price-badge .new {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--n2-purple);
}

.n2-urgency-text {
    font-size: 0.875rem;
    color: var(--n2-muted-fg);
    animation: n2-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ===================================================
   Trust Bar
   =================================================== */
.n2-trust-bar {
    background: var(--n2-purple);
    color: #fff;
    padding: 2rem 0;
}

@media (min-width: 768px) {
    .n2-trust-bar {
        padding: 3rem 0;
    }
}

.n2-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .n2-trust-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}

.n2-trust-item {
    text-align: center;
    position: relative;
}

.n2-trust-grid .n2-trust-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.n2-trust-value {
    font-family: var(--n2-font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

@media (min-width: 768px) {
    .n2-trust-value {
        font-size: 2.25rem;
    }
}

.n2-trust-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

@media (min-width: 768px) {
    .n2-trust-label {
        font-size: 1rem;
    }
}

/* ===================================================
   Section Title (Reusable)
   =================================================== */
.n2-section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.n2-section-title h2 {
    font-family: var(--n2-font-heading);
    font-weight: 700;
    font-size: 1.875rem;
    margin-bottom: 1rem;
    color: var(--n2-fg);
}

@media (min-width: 768px) {
    .n2-section-title h2 {
        font-size: 2.25rem;
    }
}

.n2-section-title p {
    font-size: 1.125rem;
    color: var(--n2-muted-fg);
}

.n2-title-bar {
    width: 5rem;
    height: 0.375rem;
    border-radius: 9999px;
    margin: 0 auto;
}

.n2-title-bar.purple {
    background: var(--n2-purple);
}

.n2-title-bar.beige {
    background: var(--n2-beige);
}

/* ===================================================
   Overview (Workshop Axes) Accordion
   =================================================== */
.n2-overview {
    padding: 6rem 0;
    background: #fff;
}

.n2-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .n2-overview-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.n2-accordion-card {
    background: rgba(244, 241, 234, 0.3);
    border-radius: var(--n2-radius);
    overflow: hidden;
    border: 1px solid var(--n2-border);
    transition: box-shadow 0.3s;
}

.n2-accordion-card.active {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
}

.n2-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    text-align: right;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.n2-accordion-trigger:hover {
    background: rgba(244, 241, 234, 0.3);
}

.n2-accordion-trigger-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.n2-accordion-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.n2-accordion-trigger:hover .n2-accordion-icon {
    transform: scale(1.1);
}

.n2-accordion-icon.purple {
    background: rgba(123, 82, 151, 0.1);
    color: var(--n2-purple);
}

.n2-accordion-icon.green {
    background: rgba(159, 176, 157, 0.1);
    color: var(--n2-green);
}

.n2-accordion-icon.beige {
    background: rgba(212, 201, 185, 0.2);
    color: var(--n2-accent-fg);
}

.n2-accordion-title {
    font-family: var(--n2-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--n2-fg);
}

.n2-accordion-chevron {
    color: var(--n2-muted-fg);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.n2-accordion-card.active .n2-accordion-chevron {
    transform: rotate(180deg);
}

.n2-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

.n2-accordion-card.active .n2-accordion-content {
    max-height: 500px;
}

.n2-accordion-body {
    padding: 0.5rem 2rem 2rem;
    color: var(--n2-muted-fg);
    line-height: 1.8;
    font-size: 1.125rem;
    border-top: 1px solid rgba(232, 228, 220, 0.5);
}

/* ===================================================
   Comparison Section
   =================================================== */
.n2-comparison {
    padding: 6rem 0;
    background: rgba(244, 241, 234, 0.3);
}

.n2-comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 64rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .n2-comparison-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.n2-compare-card {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.n2-compare-card .top-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.375rem;
}

.n2-compare-card.negative {
    border: 1px solid rgba(248, 113, 113, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.n2-compare-card.negative .top-bar {
    background: #f87171;
    opacity: 0.2;
}

.n2-compare-card.positive {
    border: 1px solid rgba(159, 176, 157, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

.n2-compare-card.positive .top-bar {
    background: var(--n2-green);
}

.n2-compare-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.n2-compare-header.negative {
    color: #dc2626;
}

.n2-compare-header.positive {
    color: var(--n2-green);
}

.n2-compare-header h3 {
    font-family: var(--n2-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
}

.n2-compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.n2-compare-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.n2-compare-list li i {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.n2-compare-list.negative li {
    color: var(--n2-muted-fg);
}

.n2-compare-list.negative li i {
    color: #fca5a5;
}

.n2-compare-list.positive li {
    color: var(--n2-fg);
    font-weight: 500;
}

.n2-compare-list.positive li i {
    color: var(--n2-green);
}

.n2-compare-list li span {
    font-size: 1.125rem;
}

/* ===================================================
   What You Get Section
   =================================================== */
.n2-what-you-get {
    padding: 6rem 0;
    background: #fff;
}

.n2-perks-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .n2-perks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .n2-perks-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.n2-perk-card {
    background: rgba(244, 241, 234, 0.2);
    border-radius: var(--n2-radius);
    padding: 1.5rem;
    border: 1px solid rgba(232, 228, 220, 0.5);
    transition: box-shadow 0.3s;
    cursor: pointer;
}

.n2-perk-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

.n2-perk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.n2-perk-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n2-purple);
}

.n2-perk-toggle {
    color: var(--n2-muted-fg);
}

.n2-perk-card h3 {
    font-family: var(--n2-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--n2-fg);
}

.n2-perk-detail {
    color: var(--n2-muted-fg);
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.n2-perk-card:not(.expanded) .n2-perk-detail {
    max-height: 1.6em;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.n2-perk-card.expanded .n2-perk-detail {
    max-height: 500px;
}

/* ===================================================
   About Instructor
   =================================================== */
.n2-about {
    padding: 6rem 0;
    background: rgba(212, 201, 185, 0.1);
}

.n2-about-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .n2-about-grid {
        flex-direction: row;
        gap: 5rem;
    }
}

.n2-about-photo {
    width: 100%;
    position: relative;
}

@media (min-width: 1024px) {
    .n2-about-photo {
        width: 41.666%;
    }
}

.n2-about-photo .photo-frame {
    aspect-ratio: 4 / 5;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 10;
}

.n2-about-photo .photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.n2-about-photo .blur-circle {
    position: absolute;
    width: 12rem;
    height: 12rem;
    border-radius: 9999px;
    filter: blur(48px);
    z-index: 0;
}

.n2-about-photo .blur-circle.purple {
    bottom: -2rem;
    left: -2rem;
    background: rgba(123, 82, 151, 0.1);
}

.n2-about-photo .blur-circle.green {
    top: -2rem;
    right: -2rem;
    background: rgba(159, 176, 157, 0.1);
}

.n2-floating-badge {
    position: absolute;
    bottom: 2.5rem;
    right: -1.25rem;
    background: #fff;
    padding: 1rem;
    border-radius: var(--n2-radius);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    z-index: 20;
    display: none;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--n2-border);
}

@media (min-width: 768px) {
    .n2-floating-badge {
        display: flex;
    }
}

.n2-floating-badge .badge-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: var(--n2-purple);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.n2-floating-badge .badge-label {
    font-size: 0.875rem;
    color: var(--n2-muted-fg);
}

.n2-floating-badge .badge-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--n2-fg);
}

.n2-about-bio {
    width: 100%;
}

@media (min-width: 1024px) {
    .n2-about-bio {
        width: 58.333%;
    }
}

.n2-about-bio h2 {
    font-family: var(--n2-font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .n2-about-bio h2 {
        font-size: 3rem;
    }
}

.n2-about-bio .role {
    font-size: 1.25rem;
    color: var(--n2-purple);
    font-weight: 500;
    margin-bottom: 2rem;
}

.n2-about-bio .bio-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-size: 1.125rem;
    color: var(--n2-muted-fg);
    line-height: 1.8;
}

.n2-about-bio .bio-extra {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
}

.n2-about-bio .bio-extra.visible {
    display: flex;
}

.n2-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--n2-purple);
    font-weight: 700;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-family: var(--n2-font-body);
    padding: 0;
    transition: gap 0.2s;
}

.n2-read-more:hover {
    gap: 0.75rem;
}

.n2-about-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(232, 228, 220, 0.5);
}

.n2-about-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.n2-about-stat .stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.n2-about-stat .stat-icon.purple {
    background: rgba(123, 82, 151, 0.1);
    color: var(--n2-purple);
}

.n2-about-stat .stat-icon.green {
    background: rgba(159, 176, 157, 0.1);
    color: var(--n2-green);
}

.n2-about-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.n2-about-stat .stat-label {
    font-size: 0.875rem;
    color: var(--n2-muted-fg);
}

/* ===================================================
   Testimonials Section (override for n2 theme)
   =================================================== */
.n2-testimonials {
    padding: 6rem 0;
    background: #fff;
    overflow: hidden;
}

/* Style the testimonial cards with n2 theme */
.n2-testimonials .testimonial-card {
    background: rgba(244, 241, 234, 0.2) !important;
    border-radius: 1.5rem !important;
    border: 1px solid rgba(232, 228, 220, 0.5) !important;
    box-shadow: none !important;
}

.n2-testimonials .testimonial-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.n2-testimonials .testimonial-card h3 {
    color: var(--n2-fg) !important;
}

.n2-testimonials .testimonial-card .testimonial-review {
    font-style: italic;
}

.n2-testimonials .carousel-btn {
    border-color: var(--n2-border);
}

/* ===================================================
   Gallery Section (override for n2 theme)
   =================================================== */
.n2-gallery {
    padding: 6rem 0;
    background: rgba(244, 241, 234, 0.3);
}

.n2-gallery .gallery-carousel .gallery-item {
    border-radius: var(--n2-radius);
}

/* ===================================================
   Event Details
   =================================================== */
.n2-event-details {
    padding: 6rem 0;
    background: #fff;
}

.n2-details-card {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: rgba(244, 241, 234, 0.2);
    border-radius: 3rem;
    overflow: hidden;
    border: 1px solid rgba(232, 228, 220, 0.5);
}

@media (min-width: 1024px) {
    .n2-details-card {
        flex-direction: row;
    }
}

.n2-details-info {
    width: 100%;
    padding: 3rem;
}

@media (min-width: 768px) {
    .n2-details-info {
        padding: 4rem;
    }
}

@media (min-width: 1024px) {
    .n2-details-info {
        width: 50%;
    }
}

.n2-details-info h2 {
    font-family: var(--n2-font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
}

.n2-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.n2-detail-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--n2-radius);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--n2-purple);
    flex-shrink: 0;
}

.n2-detail-label {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.n2-detail-value {
    font-size: 1.125rem;
    color: var(--n2-muted-fg);
}

.n2-women-only {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(123, 82, 151, 0.1);
    padding: 1.5rem;
    border-radius: var(--n2-radius);
    border: 1px solid rgba(123, 82, 151, 0.2);
}

.n2-women-only i {
    color: var(--n2-purple);
    flex-shrink: 0;
}

.n2-women-only span {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--n2-purple);
}

.n2-details-form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(123, 82, 151, 0.06) 0%, rgba(123, 82, 151, 0.02) 100%);
    position: relative;
}

@media (min-width: 1024px) {
    .n2-details-form {
        width: 50%;
        padding: 3rem;
    }
}

.n2-details-form .n2-registration-card {
    background: #fff;
    border-radius: 1.5rem;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(123, 82, 151, 0.1);
    border: 1px solid rgba(123, 82, 151, 0.08);
    width: 100%;
    max-width: 28rem;
}

.n2-details-form .n2-registration-card h3 {
    font-family: var(--n2-font-heading);
    color: var(--n2-purple);
}

.n2-details-form .n2-registration-card p {
    color: var(--n2-muted-fg);
}

.n2-details-form .n2-registration-card input {
    border: 1px solid rgba(123, 82, 151, 0.2);
    border-radius: var(--n2-radius);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.n2-details-form .n2-registration-card input:focus {
    border-color: var(--n2-purple);
    box-shadow: 0 0 0 3px rgba(123, 82, 151, 0.1);
    outline: none;
}

/* ===================================================
   Pricing Section
   =================================================== */
.n2-pricing {
    padding: 6rem 0;
    background: rgba(244, 241, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.n2-pricing .bg-blur {
    position: absolute;
    width: 40%;
    height: 40%;
    border-radius: 9999px;
    filter: blur(100px);
    pointer-events: none;
}

.n2-pricing .bg-blur.purple {
    top: -10%;
    right: -5%;
    background: rgba(123, 82, 151, 0.05);
}

.n2-pricing .bg-blur.green {
    bottom: -10%;
    left: -5%;
    background: rgba(159, 176, 157, 0.05);
}

.n2-pricing-card {
    max-width: 56rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 3rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--n2-border);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

.n2-pricing-inner {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .n2-pricing-inner {
        grid-template-columns: 3fr 2fr;
    }
}

.n2-pricing-info {
    padding: 2.5rem;
}

@media (min-width: 768px) {
    .n2-pricing-info {
        padding: 3.5rem;
    }
}

.n2-seats-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fef2f2;
    color: #dc2626;
    padding: 0.375rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    animation: n2-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.n2-pricing-info h2 {
    font-family: var(--n2-font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .n2-pricing-info h2 {
        font-size: 2.25rem;
    }
}

.n2-pricing-info > p {
    font-size: 1.125rem;
    color: var(--n2-muted-fg);
    margin-bottom: 2.5rem;
}

.n2-pricing-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.n2-pricing-checklist li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.n2-pricing-checklist li .check-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    background: rgba(159, 176, 157, 0.1);
    color: var(--n2-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.n2-pricing-checklist li span {
    font-size: 1.125rem;
    font-weight: 500;
}

.n2-pricing-price-side {
    background: var(--n2-purple);
    color: #fff;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .n2-pricing-price-side {
        padding: 3.5rem;
    }
}

.n2-pricing-price-side .pattern {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    background-image: radial-gradient(circle at center, var(--n2-beige) 1px, transparent 1px);
    background-size: 20px 20px;
}

.n2-pricing-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 10;
}

.n2-pricing-old {
    font-size: 1.875rem;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.25rem;
    position: relative;
    z-index: 10;
}

.n2-pricing-free {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 10;
    margin-bottom: 2rem;
}

.n2-pricing-free span {
    font-size: 4.5rem;
    font-weight: 700;
    font-family: var(--n2-font-heading);
}

.n2-pricing-free .live-dot {
    position: relative;
    display: flex;
    height: 1rem;
    width: 1rem;
}

.n2-pricing-free .live-dot .ping {
    animation: n2-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    position: absolute;
    display: inline-flex;
    height: 100%;
    width: 100%;
    border-radius: 9999px;
    background: #fff;
    opacity: 0.75;
}

.n2-pricing-free .live-dot .dot {
    position: relative;
    display: inline-flex;
    border-radius: 9999px;
    height: 1rem;
    width: 1rem;
    background: #fff;
}

.n2-pricing-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 10;
}

.n2-pricing-actions p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

.n2-pricing-love {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.6;
    position: relative;
    z-index: 10;
}

.n2-pricing-love span {
    font-size: 0.75rem;
}

/* ===================================================
   FAQ Section
   =================================================== */
.n2-faq {
    padding: 6rem 0;
    background: #fff;
}

.n2-faq-container {
    max-width: 48rem;
    margin: 0 auto;
}

.n2-faq-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--n2-radius);
    background: rgba(123, 82, 151, 0.1);
    color: var(--n2-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.n2-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.n2-faq-item {
    border: 1px solid var(--n2-border);
    border-radius: var(--n2-radius);
    overflow: hidden;
}

.n2-faq-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    text-align: right;
    font-family: var(--n2-font-heading);
    font-weight: 700;
    font-size: 1.125rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--n2-fg);
}

.n2-faq-trigger:hover {
    background: rgba(244, 241, 234, 0.3);
}

.n2-faq-trigger .chevron {
    color: var(--n2-muted-fg);
    transition: transform 0.3s;
    flex-shrink: 0;
}

.n2-faq-item.active .n2-faq-trigger .chevron {
    transform: rotate(180deg);
}

.n2-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.87, 0, 0.13, 1);
}

.n2-faq-item.active .n2-faq-answer {
    max-height: 500px;
}

.n2-faq-answer-inner {
    padding: 0 1.5rem 1.5rem;
    color: var(--n2-muted-fg);
    line-height: 1.8;
    font-size: 1.125rem;
    border-top: 1px solid rgba(232, 228, 220, 0.5);
    padding-top: 1rem;
}

/* ===================================================
   Final CTA
   =================================================== */
.n2-final-cta {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

.n2-final-cta .bg-tint {
    position: absolute;
    inset: 0;
    background: var(--n2-purple);
    opacity: 0.03;
}

.n2-final-cta .bg-blur {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 24rem;
    height: 24rem;
    border-radius: 9999px;
    filter: blur(120px);
}

.n2-final-cta .bg-blur.purple {
    left: 0;
    background: rgba(123, 82, 151, 0.1);
}

.n2-final-cta .bg-blur.green {
    right: 0;
    background: rgba(159, 176, 157, 0.1);
}

.n2-final-cta-content {
    max-width: 56rem;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
}

.n2-final-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
    color: var(--n2-purple);
    margin-bottom: 2.5rem;
}

.n2-final-cta h2 {
    font-family: var(--n2-font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .n2-final-cta h2 {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .n2-final-cta h2 {
        font-size: 3.75rem;
    }
}

.n2-final-cta > .n2-final-cta-content > p {
    font-size: 1.25rem;
    color: var(--n2-muted-fg);
    margin-bottom: 3rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .n2-final-cta > .n2-final-cta-content > p {
        font-size: 1.5rem;
    }
}

.n2-final-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .n2-final-cta-actions {
        flex-direction: row;
    }
}

.n2-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.875rem;
    color: var(--n2-muted-fg);
}

@media (min-width: 640px) {
    .n2-rating {
        align-items: flex-start;
    }
}

.n2-rating-stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.n2-rating-stars i {
    color: #f59e0b;
}

/* ===================================================
   Footer
   =================================================== */
.n2-footer {
    background: var(--n2-footer-bg);
    color: #fff;
    padding-top: 5rem;
    padding-bottom: 2.5rem;
}

.n2-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .n2-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .n2-footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.n2-footer-brand img {
    height: 4rem;
    width: auto;
    object-fit: contain;
    margin-bottom: 2rem;
    filter: brightness(0) invert(1);
}

.n2-footer-brand p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.n2-footer-social {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.n2-footer-social a {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: background 0.2s;
}

.n2-footer-social a:hover {
    background: var(--n2-purple);
}

.n2-footer-col h4 {
    font-family: var(--n2-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.n2-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.n2-footer-links li a {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
    text-decoration: none;
    transition: color 0.2s;
}

.n2-footer-links li a:hover {
    color: #fff;
}

.n2-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.n2-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.125rem;
}

.n2-footer-contact li i {
    color: var(--n2-purple);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.n2-footer-bottom {
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .n2-footer-bottom {
        flex-direction: row;
    }
}

.n2-footer-bottom a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.2s;
}

.n2-footer-bottom a:hover {
    color: #fff;
}

.n2-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ===================================================
   Floating WhatsApp
   =================================================== */
.n2-whatsapp-float {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 50;
    width: 4rem;
    height: 4rem;
    background: #25D366;
    color: #fff;
    border-radius: 9999px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    text-decoration: none;
}

.n2-whatsapp-float:hover {
    transform: scale(1.1);
}

.n2-whatsapp-float:active {
    transform: scale(0.95);
}

.n2-whatsapp-tooltip {
    position: absolute;
    right: 100%;
    margin-right: 1rem;
    background: #fff;
    color: #374151;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.n2-whatsapp-float:hover .n2-whatsapp-tooltip {
    opacity: 1;
}

/* ===================================================
   Countdown Timer
   =================================================== */
.n2-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .n2-countdown {
        gap: 1rem;
    }
}

.n2-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    padding: 0.5rem;
    min-width: 70px;
}

@media (min-width: 768px) {
    .n2-countdown-unit {
        min-width: 80px;
    }
}

.n2-countdown-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--n2-font-heading);
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .n2-countdown-value {
        font-size: 1.875rem;
    }
}

.n2-countdown-label {
    font-size: 0.625rem;
    font-weight: 500;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .n2-countdown-label {
        font-size: 0.75rem;
    }
}

.n2-countdown-separator {
    font-size: 1.5rem;
    font-weight: 700;
    opacity: 0.3;
}

/* Compact Countdown (header) */
.n2-countdown-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--n2-fg);
    font-weight: 500;
}

.n2-countdown-compact .unit {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.n2-countdown-compact .unit-value {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.n2-countdown-compact .unit-label {
    font-size: 0.625rem;
    opacity: 0.7;
}

.n2-countdown-compact .separator {
    opacity: 0.3;
    font-size: 0.75rem;
}

/* ===================================================
   Registration Section Override
   =================================================== */
.n2-registration {
    padding: 6rem 0;
    background: var(--n2-bg);
}

.n2-registration .n2-container {
    max-width: 56rem;
}

/* Override landing_registration styles */
.n2-registration-card {
    border-radius: 2rem !important;
    background: #fff !important;
    padding: 2.5rem !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--n2-border) !important;
}

@media (min-width: 768px) {
    .n2-registration-card {
        padding: 3.5rem !important;
    }
}

.n2-registration-card h3 {
    font-family: var(--n2-font-heading) !important;
    color: var(--n2-fg) !important;
}

.n2-registration-card input {
    border-radius: 0.75rem !important;
    border-color: var(--n2-border) !important;
    font-family: var(--n2-font-body) !important;
}

.n2-registration-card input:focus {
    border-color: var(--n2-purple) !important;
    box-shadow: 0 0 0 3px rgba(123, 82, 151, 0.15) !important;
}

/* ===================================================
   Animations
   =================================================== */
@keyframes n2-ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes n2-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Fade-in on scroll animation */
.n2-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.n2-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

.n2-animate-delay-1 { transition-delay: 0.1s; }
.n2-animate-delay-2 { transition-delay: 0.2s; }
.n2-animate-delay-3 { transition-delay: 0.3s; }
.n2-animate-delay-4 { transition-delay: 0.4s; }
.n2-animate-delay-5 { transition-delay: 0.5s; }
.n2-animate-delay-6 { transition-delay: 0.6s; }

/* Slide from right (RTL) */
.n2-animate-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.n2-animate-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from left */
.n2-animate-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.n2-animate-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Scale in */
.n2-animate-scale {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.n2-animate-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* ===================================================
   Utility classes
   =================================================== */
.n2-text-center { text-align: center; }
.n2-text-right { text-align: right; }
.n2-mx-auto { margin-left: auto; margin-right: auto; }

/* Section Hiding During Payment */
.n2-landing .to-be-hidden { transition: opacity 0.3s; }

/* Video iframe for VSL */
.n2-vsl-container {
    aspect-ratio: 16 / 9;
    border-radius: var(--n2-radius);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 4px solid rgba(255, 255, 255, 0.5);
    max-width: 56rem;
    margin: 0 auto 3rem;
}

.n2-vsl-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ===================================================
   Ramadan Decorative Elements
   =================================================== */

/* --- Hero: Repeating crescent + star + geometric pattern --- */
.n2-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M50 20a25 25 0 1 0 0 50 20 20 0 1 1 0-50z' fill='%23d4a017' opacity='0.5'/%3E%3Cpolygon points='160,30 163,39 172,39 165,44 167,53 160,48 153,53 155,44 148,39 157,39' fill='%23d4a017' opacity='0.4'/%3E%3Cpolygon points='30,150 32,156 38,156 33,160 35,166 30,162 25,166 27,160 22,156 28,156' fill='%23d4a017' opacity='0.3'/%3E%3Cpath d='M150 120a20 20 0 1 0 0 40 16 16 0 1 1 0-40z' fill='%23d4a017' opacity='0.35'/%3E%3Cpolygon points='100,90 104,102 116,102 106,110 110,122 100,114 90,122 94,110 84,102 96,102' fill='%23d4a017' opacity='0.15'/%3E%3Ccircle cx='100' cy='100' r='35' fill='none' stroke='%23d4a017' stroke-width='0.3' opacity='0.2'/%3E%3Ccircle cx='100' cy='100' r='45' fill='none' stroke='%23d4a017' stroke-width='0.2' opacity='0.15'/%3E%3C/svg%3E");
    background-size: 250px 250px;
}

/* --- Hero: Corner lantern silhouette (top-right) --- */
.n2-hero::after {
    content: '';
    position: absolute;
    top: 5rem;
    right: -1rem;
    width: 220px;
    height: 360px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 180'%3E%3Cellipse cx='50' cy='30' rx='15' ry='10' fill='none' stroke='%23d4a017' stroke-width='1.5'/%3E%3Crect x='35' y='30' width='30' height='80' rx='8' fill='none' stroke='%23d4a017' stroke-width='1.5'/%3E%3Cellipse cx='50' cy='110' rx='15' ry='8' fill='none' stroke='%23d4a017' stroke-width='1.5'/%3E%3Cline x1='50' y1='20' x2='50' y2='5' stroke='%23d4a017' stroke-width='1.5'/%3E%3Ccircle cx='50' cy='4' r='3' fill='none' stroke='%23d4a017' stroke-width='1'/%3E%3Cline x1='40' y1='50' x2='60' y2='50' stroke='%23d4a017' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='40' y1='65' x2='60' y2='65' stroke='%23d4a017' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='40' y1='80' x2='60' y2='80' stroke='%23d4a017' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='50' y1='30' x2='50' y2='110' stroke='%23d4a017' stroke-width='0.5' opacity='0.3'/%3E%3Cellipse cx='50' cy='120' rx='20' ry='30' fill='%23d4a017' opacity='0.15'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* --- Hero: Floating stars scattered --- */
.n2-hero-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.n2-hero-star {
    position: absolute;
    color: var(--n2-gold, #d4a017);
    opacity: 0;
    animation: n2-star-twinkle 4s ease-in-out infinite;
}

.n2-hero-star:nth-child(1) { top: 12%; right: 12%; font-size: 1.2rem; animation-delay: 0s; }
.n2-hero-star:nth-child(2) { top: 25%; left: 8%; font-size: 0.9rem; animation-delay: 1.2s; }
.n2-hero-star:nth-child(3) { top: 45%; right: 6%; font-size: 0.7rem; animation-delay: 2.4s; }
.n2-hero-star:nth-child(4) { top: 60%; left: 5%; font-size: 1rem; animation-delay: 0.6s; }
.n2-hero-star:nth-child(5) { top: 18%; left: 18%; font-size: 0.6rem; animation-delay: 1.8s; }
.n2-hero-star:nth-child(6) { top: 70%; right: 15%; font-size: 0.8rem; animation-delay: 3s; }
.n2-hero-star:nth-child(7) { top: 35%; right: 20%; font-size: 0.5rem; animation-delay: 0.3s; }
.n2-hero-star:nth-child(8) { top: 80%; left: 12%; font-size: 0.7rem; animation-delay: 2s; }

@keyframes n2-star-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 0.25; transform: scale(1); }
}

/* --- Hero: Islamic arch top border --- */
.n2-hero-arch-border {
    position: absolute;
    top: 4.5rem;
    left: 0;
    right: 0;
    height: 30px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.08;
}

/* --- VSL: Decorative corner ornaments --- */
.n2-vsl-container {
    position: relative;
}

.n2-vsl-ornament {
    position: absolute;
    width: 50px;
    height: 50px;
    pointer-events: none;
    opacity: 0.15;
    color: var(--n2-gold, #d4a017);
    z-index: 5;
}

.n2-vsl-ornament--tl { top: -12px; left: -12px; }
.n2-vsl-ornament--tr { top: -12px; right: -12px; transform: scaleX(-1); }
.n2-vsl-ornament--bl { bottom: -12px; left: -12px; transform: scaleY(-1); }
.n2-vsl-ornament--br { bottom: -12px; right: -12px; transform: scale(-1); }

/* --- Hero: Left-side lantern silhouette (mirror of right) --- */
.n2-hero-lantern-left {
    position: absolute;
    top: 8rem;
    left: -1rem;
    width: 160px;
    height: 280px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 180'%3E%3Cellipse cx='50' cy='30' rx='12' ry='8' fill='none' stroke='%23d4a017' stroke-width='1.5'/%3E%3Crect x='38' y='30' width='24' height='65' rx='6' fill='none' stroke='%23d4a017' stroke-width='1.5'/%3E%3Cellipse cx='50' cy='95' rx='12' ry='6' fill='none' stroke='%23d4a017' stroke-width='1.5'/%3E%3Cline x1='50' y1='22' x2='50' y2='5' stroke='%23d4a017' stroke-width='1.5'/%3E%3Ccircle cx='50' cy='4' r='3' fill='none' stroke='%23d4a017' stroke-width='1'/%3E%3Cline x1='42' y1='45' x2='58' y2='45' stroke='%23d4a017' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='42' y1='58' x2='58' y2='58' stroke='%23d4a017' stroke-width='0.5' opacity='0.5'/%3E%3Cline x1='42' y1='71' x2='58' y2='71' stroke='%23d4a017' stroke-width='0.5' opacity='0.5'/%3E%3Cellipse cx='50' cy='105' rx='16' ry='25' fill='%23d4a017' opacity='0.12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* --- Trust Bar: Crescent + Star accents (white on purple bg) --- */
.n2-trust-bar {
    position: relative;
    overflow: hidden;
}

.n2-trust-bar::before {
    content: '\262A';
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8rem;
    color: #fff;
    opacity: 0.06;
    pointer-events: none;
    line-height: 1;
}

.n2-trust-bar::after {
    content: '\2726';
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 5rem;
    color: #fff;
    opacity: 0.05;
    pointer-events: none;
    line-height: 1;
}

/* --- Pricing: 8-pointed star tessellation --- */
.n2-pricing::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpolygon points='40,5 45,25 65,15 50,30 70,40 50,45 60,65 45,50 40,70 35,50 20,65 30,45 10,40 30,30 15,15 35,25' fill='none' stroke='%23d4a017' stroke-width='0.8'/%3E%3Ccircle cx='40' cy='40' r='8' fill='none' stroke='%23d4a017' stroke-width='0.5'/%3E%3C/svg%3E");
    background-size: 120px 120px;
}

/* --- Pricing purple card: Crescent watermark --- */
.n2-pricing-price-side::before {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 160px;
    height: 160px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 5a40 40 0 1 0 0 80 32 32 0 1 1 0-80z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* --- FAQ: Crescent accent near icon --- */
.n2-faq .n2-faq-icon {
    position: relative;
}

.n2-faq .n2-faq-icon::after {
    content: '\262A';
    position: absolute;
    top: -8px;
    right: -12px;
    font-size: 1rem;
    color: var(--n2-gold, #d4a017);
    opacity: 0.3;
    pointer-events: none;
}

/* --- Registration: Geometric border at top --- */
.n2-registration {
    position: relative;
}

.n2-registration::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='2' viewBox='0 0 40 2'%3E%3Cpath d='M0,1 L10,0 L20,1 L30,0 L40,1' fill='none' stroke='%23d4a017' stroke-width='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 40px 2px;
    opacity: 0.3;
}

/* --- Final CTA: Crescents + stars + diamonds pattern --- */
.n2-final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M40 30a25 25 0 1 0 0 50 20 20 0 1 1 0-50z' fill='%237b5297'/%3E%3Cpolygon points='150,30 153,39 162,39 155,44 157,53 150,48 143,53 145,44 138,39 147,39' fill='%23d4a017'/%3E%3Cpolygon points='30,150 33,159 42,159 35,164 37,173 30,168 23,173 25,164 18,159 27,159' fill='%23d4a017'/%3E%3Cpolygon points='160,150 165,160 160,170 155,160' fill='%239fb09d'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

/* --- Footer: Scattered faint stars --- */
.n2-footer {
    position: relative;
    overflow: hidden;
}

.n2-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cpolygon points='30,20 32,26 38,26 33,30 35,36 30,32 25,36 27,30 22,26 28,26' fill='%23d4a017'/%3E%3Cpolygon points='110,80 112,86 118,86 113,90 115,96 110,92 105,96 107,90 102,86 108,86' fill='%23d4a017'/%3E%3Cpolygon points='70,120 71,123 74,123 72,125 73,128 70,126 67,128 68,125 66,123 69,123' fill='%23d4a017'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* --- Inline SVG Elements Styles --- */

/* Hanging Lanterns in Hero */
.n2-ramadan-lanterns {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.n2-lantern {
    position: absolute;
    top: 0;
    color: var(--n2-gold, #d4a017);
    opacity: 0.07;
}

.n2-lantern--right {
    right: 5%;
    width: 60px;
    height: 140px;
}

.n2-lantern--left {
    left: 8%;
    width: 45px;
    height: 110px;
}

/* Section Dividers */
.n2-ramadan-divider {
    width: 100%;
    height: 40px;
    overflow: hidden;
    pointer-events: none;
    line-height: 0;
}

.n2-ramadan-divider svg {
    width: 100%;
    height: 100%;
}

.n2-ramadan-divider--arch {
    height: 50px;
}

/* Small Centered Ornament */
.n2-ramadan-ornament {
    text-align: center;
    padding: 1rem 0;
    pointer-events: none;
}

/* CTA Lantern */
.n2-ramadan-cta-lantern {
    position: absolute;
    top: 2rem;
    right: 3rem;
    width: 60px;
    height: 140px;
    color: var(--n2-purple);
    opacity: 0.06;
    pointer-events: none;
    z-index: 1;
}

/* --- Responsive: Reduce decorations on mobile --- */
@media (max-width: 768px) {
    .n2-hero::before {
        opacity: 0.04;
        background-size: 180px 180px;
    }

    .n2-hero::after {
        opacity: 0.05;
        width: 100px;
        height: 180px;
        top: 6rem;
        right: -1rem;
    }

    .n2-hero-lantern-left {
        display: none;
    }

    .n2-hero-star:nth-child(n+5) {
        display: none;
    }

    .n2-hero-arch-border {
        display: none;
    }

    .n2-vsl-ornament {
        width: 30px;
        height: 30px;
        opacity: 0.1;
    }

    .n2-vsl-ornament--tl { top: -8px; left: -8px; }
    .n2-vsl-ornament--tr { top: -8px; right: -8px; }
    .n2-vsl-ornament--bl { bottom: -8px; left: -8px; }
    .n2-vsl-ornament--br { bottom: -8px; right: -8px; }

    .n2-lantern--right {
        right: 2%;
        width: 35px;
        height: 80px;
        opacity: 0.04;
    }

    .n2-lantern--left {
        display: none;
    }

    .n2-trust-bar::before {
        font-size: 5rem;
        opacity: 0.04;
    }

    .n2-trust-bar::after {
        font-size: 3rem;
        opacity: 0.03;
    }

    .n2-ramadan-cta-lantern {
        display: none;
    }

    .n2-ramadan-divider {
        height: 25px;
    }

    .n2-ramadan-divider--arch {
        height: 30px;
    }
}
#lg-outer-1{
    direction: ltr;
}