/* ============================================
   LANDING PAGE — Bold, Dramatic SaaS
   ============================================ */

/* --- ANIMATIONS (must be outside @layer for broad compat) --- */
@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(50px, -60px) scale(1.1); }
    66% { transform: translate(-40px, 40px) scale(0.9); }
}

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

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.92) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 oklch(70% 0.22 145 / 0.6); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px oklch(70% 0.22 145 / 0); }
}

@keyframes shimmer {
    0% { inset-inline-start: -100%; }
    100% { inset-inline-start: 200%; }
}

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

@keyframes barGrow {
    from { inline-size: 0; }
}

@keyframes gradientBorder {
    0% { --border-angle: 0deg; }
    100% { --border-angle: 360deg; }
}

@property --border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}


/* ==============================
   COMPONENTS LAYER
   ============================== */
@layer components {

    /* ---------- HERO ---------- */
    .hero {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--space-2xl);
        min-block-size: calc(100cqb - 60px);
        padding: var(--space-3xl) clamp(1rem, 5vw, 4rem);
        max-inline-size: 1300px;
        margin-inline: auto;

        /* BG */
        .hero-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            overflow: hidden;
        }

        .gradient-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(90px);
            animation: float 18s ease-in-out infinite;
        }

        .gradient-orb--1 {
            width: 700px; height: 700px;
            top: -25%; left: -10%;
        }

        .gradient-orb--2 {
            width: 600px; height: 600px;
            bottom: -20%; right: -5%;
            animation-delay: -6s;
        }

        .gradient-orb--3 {
            width: 450px; height: 450px;
            top: 40%; left: 45%;
            animation-delay: -12s;
        }

        .noise-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .grid-overlay {
            position: absolute;
            inset: 0;
            background-size: 64px 64px;
            mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 80%);
        }

        /* Content (left side) */
        .hero-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
            animation: fadeInUp 0.7s ease-out both;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: 6px 16px;
            border-radius: 100px;
            font-family: var(--font-display);
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            inline-size: fit-content;
        }

        .badge-dot {
            inline-size: 8px; block-size: 8px;
            border-radius: 50%;
            animation: pulse-dot 2s ease-in-out infinite;
        }

        h1 {
            font-family: var(--font-display);
            font-size: clamp(2.5rem, 5.5vw, 4.2rem);
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -0.02em;
            text-transform: uppercase;
        }

        .hero-line { display: block; }

        .tagline {
            font-size: clamp(1rem, 1.5vw, 1.2rem);
            line-height: 1.7;
            max-inline-size: 48ch;
        }

        .cta-group {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-md);
            padding-block-start: var(--space-sm);
        }

        .cta-button {
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            padding: 14px 32px;
            border-radius: 100px;
            font-family: var(--font-heading);
            font-size: 0.95rem;
            font-weight: var(--fw-semibold);
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;

            svg { transition: transform 0.3s ease-out; }
            &:hover svg { transform: translateX(4px); }
        }

        .btn-shimmer {
            position: absolute;
            inset-block-start: 0; inset-inline-start: -100%;
            inline-size: 60%; block-size: 100%;
            animation: shimmer 3s ease-in-out infinite;
            pointer-events: none;
        }

        /* Visual (right side) */
        .hero-visual {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: fadeInScale 0.8s ease-out 0.3s both;
        }

        .mockup-glow {
            position: absolute;
            inline-size: 80%; block-size: 80%;
            border-radius: 50%;
            filter: blur(80px);
            z-index: 0;
        }

        .mockup-card {
            position: relative;
            z-index: 1;
            inline-size: 100%;
            max-inline-size: 480px;
            border-radius: 16px;
            overflow: hidden;
            animation: floatCard 6s ease-in-out infinite;
        }

        .mockup-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
        }

        .mockup-dots {
            display: flex;
            gap: 6px;

            span {
                inline-size: 10px; block-size: 10px;
                border-radius: 50%;
            }
        }

        .mockup-title {
            font-size: 0.75rem;
            font-weight: var(--fw-semibold);
            letter-spacing: 0.02em;
        }

        .mockup-body {
            padding: 0 16px 16px;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .mockup-list {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .mockup-row {
            display: grid;
            grid-template-columns: 1.4fr 1fr 0.7fr;
            align-items: center;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 0.82rem;
            gap: 8px;
        }

        .mockup-row--header {
            font-size: 0.7rem;
            font-weight: var(--fw-semibold);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding-block-end: 6px;
        }

        .mockup-user {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: var(--fw-medium);
        }

        .mockup-avatar {
            inline-size: 28px; block-size: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.7rem;
            font-weight: var(--fw-bold);
            font-style: normal;
            text-decoration: none;
            flex-shrink: 0;
        }

        .mockup-score {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.78rem;
            font-weight: var(--fw-semibold);
        }

        .mockup-bar {
            flex: 1;
            block-size: 6px;
            border-radius: 3px;
            overflow: hidden;
        }

        .mockup-fill {
            block-size: 100%;
            border-radius: 3px;
            animation: barGrow 1.2s ease-out 0.8s both;
        }

        .mockup-badge {
            font-size: 0.7rem;
            font-weight: var(--fw-semibold);
            padding: 3px 10px;
            border-radius: 100px;
            text-align: center;
            inline-size: fit-content;
        }

        /* Floating stat cards */
        .floating-card {
            position: absolute;
            z-index: 2;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            border-radius: 12px;
            font-size: 0.82rem;
            white-space: nowrap;

            strong { font-family: var(--font-display); font-size: 1.1rem; display: block; line-height: 1; }
            span { font-size: 0.72rem; display: block; }
        }

        .floating-card--1 {
            inset-block-start: 5%;
            inset-inline-end: -5%;
            animation: floatCard 5s ease-in-out 1s infinite;
        }

        .floating-card--2 {
            inset-block-end: 10%;
            inset-inline-start: -5%;
            animation: floatCard 5s ease-in-out 2.5s infinite;
        }

        /* Responsive: stack on narrow */
        @container root (inline-size <= 800px) {
            grid-template-columns: 1fr;
            text-align: center;
            padding-block: var(--space-2xl);
            min-block-size: auto;

            .hero-content { align-items: center; }
            .cta-group { justify-content: center; }
            .hero-visual { order: -1; }
            .floating-card { display: none; }
        }
    }


    /* ---------- STATS SECTION ---------- */
    .stats-section {
        position: relative;
        z-index: 1;
        padding: var(--space-xl) clamp(1rem, 5vw, 4rem);

        .stats-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-3xl);
            padding: var(--space-xl) var(--space-2xl);
            border-radius: 16px;
            max-inline-size: 1000px;
            margin-inline: auto;
            flex-wrap: wrap;
        }

        .stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            position: relative;

            &:not(:last-child)::after {
                content: '';
                position: absolute;
                inset-inline-end: calc(-1 * var(--space-3xl) / 2);
                inset-block-start: 50%;
                transform: translateY(-50%);
                inline-size: 1px;
                block-size: 40px;
            }
        }

        .stat-value {
            font-family: var(--font-display);
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 900;
            letter-spacing: 0.02em;
            line-height: 1;
        }

        .stat-label {
            font-size: 0.78rem;
            font-weight: var(--fw-medium);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        @container root (inline-size <= 600px) {
            .stats-inner { gap: var(--space-xl); }
            .stat::after { display: none; }
        }
    }


    /* ---------- FEATURES SECTION ---------- */
    .features {
        padding: var(--space-3xl) clamp(1rem, 5vw, 4rem);
        max-inline-size: 1200px;
        margin-inline: auto;
        text-align: center;

        .section-title {
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            margin-block-end: var(--space-xs);
        }

        .section-subtitle {
            font-size: var(--fs-large);
            margin-block-end: var(--space-3xl);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: var(--space-xl);
            text-align: start;
            list-style: none;
            counter-reset: feature-step;
        }

        .feature-card {
            position: relative;
            padding: var(--space-2xl) var(--space-xl);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
            counter-increment: feature-step;

            &:hover {
                transform: translateY(-6px);
            }

            &:hover .feature-icon-box {
                transform: scale(1.1) rotate(-3deg);
            }

            &:hover .feature-card-glow {
                opacity: 1;
            }

            &::before {
                content: "0" counter(feature-step);
                font-family: var(--font-display);
                font-size: 6rem;
                font-weight: 900;
                line-height: 1;
                position: absolute;
                inset-block-start: -8px;
                inset-inline-end: 16px;
                opacity: 0.05;
                pointer-events: none;
            }
        }

        .feature-card-glow {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.4s ease-out;
            pointer-events: none;
            border-radius: 20px;
        }

        .feature-icon-box {
            display: flex;
            align-items: center;
            justify-content: center;
            inline-size: 60px; block-size: 60px;
            border-radius: 16px;
            margin-block-end: var(--space-xl);
            transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
        }

        h3 {
            font-size: 1.15rem;
            font-weight: var(--fw-bold);
            margin-block-end: var(--space-sm);
        }

        p {
            font-size: var(--fs-small);
            line-height: 1.65;
        }
    }


    /* ---------- PORTAL SECTION ---------- */
    .portal-section {
        padding: var(--space-xl) clamp(1rem, 5vw, 4rem) var(--space-3xl);
        max-inline-size: 1200px;
        margin-inline: auto;

        .portal-list {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xl);
            justify-content: center;
            list-style: none;
        }

        .portal-card {
            display: flex;
            align-items: center;
            gap: var(--space-lg);
            padding: var(--space-xl) var(--space-2xl);
            border-radius: 16px;
            flex: 1;
            min-inline-size: 300px;
            max-inline-size: 520px;
            transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);

            &:hover {
                transform: translateY(-3px);
            }

            &:hover .portal-link svg {
                transform: translateX(4px);
            }
        }

        .portal-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            inline-size: 50px; block-size: 50px;
            border-radius: 14px;
            flex-shrink: 0;
        }

        h3 {
            font-size: var(--fs-body);
            font-weight: var(--fw-semibold);
            margin-block-end: 2px;
        }

        p { font-size: var(--fs-small); }

        .portal-link {
            margin-inline-start: auto;
            display: inline-flex;
            align-items: center;
            gap: var(--space-xs);
            font-weight: var(--fw-semibold);
            font-size: var(--fs-small);
            white-space: nowrap;

            svg { transition: transform 0.3s ease-out; }
        }
    }
}


/* ==============================
   THEME LAYER — light-dark()
   ============================== */
@layer theme {

    /* --- Hero --- */
    .hero {
        /* Orbs: fold opacity into background alpha so light-dark() works (color-only) */
        .gradient-orb--1 { background: light-dark(oklch(50% 0.28 270 / 0.15), oklch(50% 0.28 270 / 0.5)); }
        .gradient-orb--2 { background: light-dark(oklch(55% 0.28 15 / 0.12), oklch(55% 0.28 15 / 0.4)); }
        .gradient-orb--3 { background: light-dark(oklch(50% 0.2 180 / 0.1), oklch(50% 0.2 180 / 0.3)); }

        .grid-overlay {
            background-image:
                linear-gradient(light-dark(oklch(40% 0.06 270 / 0.05), oklch(60% 0.08 270 / 0.07)) 1px, transparent 1px),
                linear-gradient(90deg, light-dark(oklch(40% 0.06 270 / 0.05), oklch(60% 0.08 270 / 0.07)) 1px, transparent 1px);
        }

        .noise-overlay {
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
            background-repeat: repeat;
            opacity: 0.5;
        }

        .btn-shimmer {
            background: linear-gradient(90deg, transparent, oklch(100% 0 0 / 0.15), transparent);
        }

        .hero-badge {
            background: light-dark(oklch(50% 0.2 270 / 0.08), oklch(65% 0.18 270 / 0.12));
            border: 1px solid light-dark(oklch(50% 0.2 270 / 0.15), oklch(65% 0.18 270 / 0.25));
            color: light-dark(oklch(40% 0.18 270), oklch(82% 0.1 270));
        }

        .badge-dot {
            background: oklch(70% 0.22 145);
        }

        .hero-line--accent {
            background: linear-gradient(135deg,
                light-dark(oklch(52% 0.26 20), oklch(72% 0.22 25)),
                light-dark(oklch(48% 0.28 340), oklch(68% 0.25 340)),
                light-dark(oklch(45% 0.24 270), oklch(65% 0.2 270)));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .tagline { color: light-dark(oklch(40% 0.01 250), oklch(70% 0.01 250)); }

        .cta-button.primary {
            background: linear-gradient(135deg,
                light-dark(oklch(52% 0.26 20), oklch(62% 0.24 20)),
                light-dark(oklch(46% 0.28 5), oklch(56% 0.26 5)));
            color: white;
            box-shadow:
                0 0 0 1px light-dark(oklch(0% 0 0 / 0), oklch(62% 0.24 20 / 0.3)),
                0 6px 24px light-dark(oklch(52% 0.26 20 / 0.3), oklch(60% 0.24 20 / 0.35)),
                inset 0 1px 0 light-dark(oklch(0% 0 0 / 0), oklch(100% 0 0 / 0.12));

            &:hover {
                box-shadow:
                    0 0 0 1px light-dark(oklch(0% 0 0 / 0), oklch(62% 0.24 20 / 0.4)),
                    0 10px 40px light-dark(oklch(52% 0.26 20 / 0.4), oklch(60% 0.24 20 / 0.5)),
                    inset 0 1px 0 light-dark(oklch(0% 0 0 / 0), oklch(100% 0 0 / 0.15));
                transform: translateY(-2px);
            }
        }

        .cta-button.secondary {
            background: light-dark(oklch(0% 0 0 / 0.04), oklch(100% 0 0 / 0.05));
            border: 1px solid oklch(from var(--glass-tint) l c h / 0.12);
            color: light-dark(oklch(20% 0 0), oklch(90% 0 0));
            backdrop-filter: blur(12px);

            &:hover {
                background: light-dark(oklch(0% 0 0 / 0.07), oklch(100% 0 0 / 0.1));
                border-color: light-dark(oklch(0% 0 0 / 0.12), oklch(100% 0 0 / 0.22));
            }
        }

        /* Mockup */
        .mockup-glow {
            background: radial-gradient(circle,
                light-dark(oklch(50% 0.2 270 / 0.12), oklch(55% 0.22 270 / 0.3)),
                light-dark(oklch(50% 0.2 20 / 0.06), oklch(55% 0.2 20 / 0.15)),
                transparent);
        }

        .mockup-card {
            background: light-dark(oklch(100% 0 0 / 0.92), oklch(12% 0.015 260 / 0.85));
            border: 1px solid oklch(from var(--glass-tint) l c h / 0.08);
            backdrop-filter: blur(20px);
            box-shadow:
                0 0 0 1px light-dark(oklch(0% 0 0 / 0), oklch(100% 0 0 / 0.04)),
                0 24px 80px light-dark(oklch(0% 0 0 / 0.12), oklch(0% 0 0 / 0.5)),
                0 4px 16px light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.3));
        }

        .mockup-header {
            border-block-end: 1px solid oklch(from var(--glass-tint) l c h / 0.06);
        }

        .mockup-dots span:nth-child(1) { background: oklch(65% 0.2 25); }
        .mockup-dots span:nth-child(2) { background: oklch(75% 0.18 85); }
        .mockup-dots span:nth-child(3) { background: oklch(70% 0.18 145); }

        .mockup-title { color: light-dark(oklch(40% 0.01 250), oklch(70% 0.01 250)); }

        .mockup-row--header { color: light-dark(oklch(50% 0.01 250), oklch(55% 0.01 250)); }

        .mockup-row:not(.mockup-row--header) {
            &:hover { background: oklch(from var(--glass-tint) l c h / 0.03); }
        }

        .mockup-user span { color: light-dark(oklch(20% 0 0), oklch(88% 0 0)); }

        .mockup-avatar--1 { background: light-dark(oklch(50% 0.2 270 / 0.15), oklch(55% 0.2 270 / 0.3)); color: light-dark(oklch(40% 0.16 270), oklch(80% 0.12 270)); }
        .mockup-avatar--2 { background: light-dark(oklch(50% 0.2 25 / 0.15), oklch(55% 0.2 25 / 0.3));  color: light-dark(oklch(40% 0.16 25), oklch(80% 0.12 25)); }
        .mockup-avatar--3 { background: light-dark(oklch(50% 0.2 180 / 0.15), oklch(55% 0.2 180 / 0.3)); color: light-dark(oklch(40% 0.16 180), oklch(80% 0.12 180)); }

        .mockup-bar { background: oklch(from var(--glass-tint) l c h / 0.06); }
        .mockup-fill { background: linear-gradient(90deg, oklch(60% 0.2 270), oklch(65% 0.22 20)); }

        .mockup-score span { color: light-dark(oklch(25% 0.01 250), oklch(85% 0.01 250)); }

        .mockup-badge--pass {
            background: light-dark(oklch(55% 0.18 145 / 0.12), oklch(70% 0.2 145 / 0.15));
            color: light-dark(oklch(40% 0.18 145), oklch(78% 0.15 145));
        }

        .mockup-badge--review {
            background: light-dark(oklch(60% 0.18 85 / 0.12), oklch(75% 0.18 85 / 0.15));
            color: light-dark(oklch(45% 0.18 85), oklch(80% 0.14 85));
        }

        /* Floating cards */
        .floating-card {
            background: light-dark(oklch(100% 0 0 / 0.92), oklch(14% 0.015 260 / 0.9));
            border: 1px solid light-dark(oklch(0% 0 0 / 0.08), oklch(100% 0 0 / 0.1));
            backdrop-filter: blur(16px);
            box-shadow: 0 8px 32px light-dark(oklch(0% 0 0 / 0.08), oklch(0% 0 0 / 0.4));
            color: light-dark(oklch(20% 0 0), oklch(90% 0 0));
        }

        .floating-card--1 svg { color: oklch(70% 0.2 145); }
        .floating-card--1 strong { color: light-dark(oklch(45% 0.2 145), oklch(78% 0.18 145)); }
        .floating-card--1 span { color: light-dark(oklch(50% 0.01 250), oklch(60% 0.01 250)); }

        .floating-card--2 svg { color: oklch(70% 0.18 270); }
        .floating-card--2 strong { color: light-dark(oklch(42% 0.18 270), oklch(78% 0.15 270)); }
        .floating-card--2 span { color: light-dark(oklch(50% 0.01 250), oklch(60% 0.01 250)); }
    }


    /* --- Stats --- */
    .stats-section {
        .stats-inner {
            background: light-dark(oklch(100% 0 0 / 0.75), oklch(100% 0 0 / 0.03));
            border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.06));
            backdrop-filter: blur(12px);
            box-shadow: 0 4px 20px light-dark(oklch(0% 0 0 / 0.04), oklch(0% 0 0 / 0));
        }

        .stat-value {
            background: linear-gradient(135deg,
                light-dark(oklch(20% 0 0), oklch(90% 0 0)),
                light-dark(oklch(48% 0.22 20), oklch(72% 0.18 25)));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .stat-label { color: light-dark(oklch(45% 0.01 250), oklch(55% 0.01 250)); }
        .stat::after { background: oklch(from var(--glass-tint) l c h / 0.08); }
    }


    /* --- Features --- */
    .features {
        .section-title { color: var(--text-primary); }
        .section-subtitle { color: var(--text-secondary); }

        .feature-card {
            background: light-dark(oklch(100% 0 0 / 0.85), oklch(100% 0 0 / 0.03));
            border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.07));
            box-shadow: 0 2px 8px light-dark(oklch(0% 0 0 / 0.03), oklch(0% 0 0 / 0));

            &:hover {
                border-color: light-dark(oklch(50% 0.2 270 / 0.2), oklch(65% 0.18 270 / 0.3));
                box-shadow: 0 16px 48px light-dark(oklch(50% 0.2 270 / 0.06), oklch(65% 0.18 270 / 0.08));
            }
        }

        .feature-card--highlight {
            border-color: light-dark(oklch(50% 0.2 270 / 0.15), oklch(65% 0.18 270 / 0.2));
            background: light-dark(oklch(50% 0.2 270 / 0.03), oklch(65% 0.18 270 / 0.04));
        }

        .feature-card-glow {
            background: radial-gradient(circle at 50% 0%,
                light-dark(oklch(50% 0.2 270 / 0.04), oklch(65% 0.18 270 / 0.06)),
                transparent 60%);
        }

        .feature-icon-box {
            background: linear-gradient(135deg,
                light-dark(oklch(50% 0.2 270 / 0.1), oklch(60% 0.2 270 / 0.2)),
                light-dark(oklch(50% 0.2 20 / 0.05), oklch(60% 0.2 20 / 0.1)));
            border: 1px solid light-dark(oklch(50% 0.2 270 / 0.15), oklch(65% 0.18 270 / 0.25));
            color: light-dark(oklch(42% 0.18 270), oklch(78% 0.12 270));
        }

        h3 { color: var(--text-primary); }
        p  { color: var(--text-secondary); }
    }


    /* --- Portals --- */
    .portal-section {
        .portal-card {
            background: light-dark(oklch(100% 0 0 / 0.85), oklch(100% 0 0 / 0.03));
            border: 1px solid light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.07));
            box-shadow: 0 2px 8px light-dark(oklch(0% 0 0 / 0.03), oklch(0% 0 0 / 0));

            &:hover {
                background: light-dark(oklch(100% 0 0 / 0.85), oklch(100% 0 0 / 0.06));
                box-shadow: 0 8px 32px light-dark(oklch(0% 0 0 / 0.06), oklch(0% 0 0 / 0.2));
                border-color: light-dark(oklch(0% 0 0 / 0.06), oklch(100% 0 0 / 0.12));
            }
        }

        .portal-card--admin .portal-icon {
            background: light-dark(oklch(50% 0.2 270 / 0.1), oklch(60% 0.18 270 / 0.15));
            color: light-dark(oklch(42% 0.18 270), oklch(75% 0.14 270));
        }

        .portal-card--candidate .portal-icon {
            background: light-dark(oklch(52% 0.24 25 / 0.1), oklch(60% 0.22 25 / 0.15));
            color: light-dark(oklch(45% 0.2 25), oklch(75% 0.16 25));
        }

        h3 { color: var(--text-primary); }
        p  { color: var(--text-secondary); }
        .portal-link { color: light-dark(oklch(42% 0.18 270), oklch(78% 0.12 270)); }
    }
}