:root {
    --primary: #4F46E5;
    --primary-dark: #4338ca;
    --secondary: #ec4899;
    --accent: #8b5cf6;
    --dark: #0f172a;
    --light: #f8fafc;
    --gray: #64748b;
    --white: #ffffff;
    --gradient-main: linear-gradient(135deg, #4F46E5 0%, #8b5cf6 100%);
    --gradient-glow: radial-gradient(circle at center, rgba(79, 70, 229, 0.15) 0%, transparent 70%);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--dark);
    background: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Buttons */
.btn-primary {
    background: var(--gradient-main);
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

.btn-secondary {
    background: white;
    color: var(--primary);
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-secondary:hover {
    border-color: var(--primary);
    background: #f8fafc;
    transform: translateY(-2px);
}

.btn-primary.large,
.btn-secondary.large {
    padding: 16px 40px;
    font-size: 1.1rem;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.5rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-links a:not(.nav-btn) {
    font-weight: 500;
    color: var(--gray);
}

.nav-links a:not(.nav-btn):hover {
    color: var(--primary);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    padding: 160px 0 100px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);
}

.hero-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.badge-new {
    display: inline-block;
    background: #e0e7ff;
    color: var(--primary);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--dark);
    letter-spacing: -0.02em;
}

.gradient-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    font-size: 1.25rem;
    color: var(--gray);
    margin-bottom: 40px;
    max-width: 540px;
}

.hero-buttons {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
}

.hero-stats-preview {
    display: flex;
    gap: 32px;
    padding-top: 32px;
    border-top: 1px solid #e2e8f0;
}

.mini-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray);
    font-weight: 500;
}

.mini-stat i {
    color: var(--primary);
    font-size: 1.2rem;
}

/* Hero Visual & Mockup */
.hero-visual {
    position: relative;
}

.dashboard-mockup {
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    border: 1px solid #e2e8f0;
    padding: 20px;
    position: relative;
    aspect-ratio: 16/10;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}

.mockup-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dots {
    display: flex;
    gap: 6px;
}

.dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.dots span:nth-child(1) {
    background: #ef4444;
}

.dots span:nth-child(2) {
    background: #eab308;
}

.dots span:nth-child(3) {
    background: #22c55e;
}

.bar {
    height: 10px;
    background: #e2e8f0;
    border-radius: 5px;
    flex: 1;
    max-width: 200px;
}

.mockup-body {
    display: flex;
    gap: 20px;
    height: 100%;
}

.sidebar {
    width: 60px;
    background: #f1f5f9;
    border-radius: 10px;
    height: 100%;
}

.main-view {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 15px;
}

.widget {
    background: white;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.w-1 {
    grid-row: span 2;
}

.w-2 {
    grid-column: 2;
}

.w-3 {
    grid-column: 2;
}

.chart-pie {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(var(--primary) 0% 70%, #e2e8f0 70% 100%);
}

.chart-bar {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 60px;
}

.chart-bar span {
    width: 10px;
    background: var(--accent);
    border-radius: 2px;
}

.chart-bar span:nth-child(1) {
    height: 40%;
}

.chart-bar span:nth-child(2) {
    height: 70%;
}

.chart-bar span:nth-child(3) {
    height: 50%;
}

.chart-bar span:nth-child(4) {
    height: 90%;
}

.profile-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
}

.lines span {
    display: block;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-bottom: 4px;
    width: 80px;
}

.float-card {
    position: absolute;
    background: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    animation: float 6s ease-in-out infinite;
}

.fc-1 {
    top: 20%;
    left: -40px;
}

.fc-2 {
    bottom: 20%;
    right: -40px;
    animation-delay: 2s;
}

.float-card i {
    font-size: 1.5rem;
    color: #22c55e;
}

.fc-2 i {
    color: var(--primary);
}

.float-card strong {
    display: block;
    font-size: 0.9rem;
    color: var(--dark);
}

.float-card span {
    font-size: 0.8rem;
    color: var(--gray);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.hero-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: var(--gradient-glow);
    z-index: -1;
    pointer-events: none;
}

/* Why It Matters */
.why-matters {
    padding: 100px 0;
    background: white;
}

.section-header {
    margin-bottom: 60px;
}

.section-header.center {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--dark);
}

.section-header p {
    font-size: 1.125rem;
    color: var(--gray);
}

.highlight {
    color: var(--primary);
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.benefit-item {
    padding: 30px;
    border-radius: var(--radius-lg);
    background: var(--light);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.benefit-item:hover {
    background: white;
    box-shadow: var(--shadow-lg);
    border-color: #e2e8f0;
    transform: translateY(-5px);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}

.benefit-item h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.benefit-item p {
    color: var(--gray);
}

/* Quick Features */
.quick-features {
    padding: 100px 0;
    background: #f8fafc;
}

.feature-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.f-card {
    background: white;
    padding: 32px 24px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border-top: 4px solid transparent;
}

.f-card:hover {
    border-top-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.f-icon {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 20px;
}

.f-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.f-card p {
    font-size: 0.95rem;
    color: var(--gray);
}

/* Detailed Features */
.detailed-features {
    padding: 100px 0;
    background: white;
}

.feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 120px;
}

.feature-block.reverse {
    direction: rtl;
}

.feature-block.reverse .fb-content {
    direction: ltr;
}

.fb-content h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.fb-content p {
    font-size: 1.1rem;
    color: var(--gray);
    margin-bottom: 30px;
}

.check-list {
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-weight: 500;
    color: var(--dark);
}

.check-list li i {
    color: #22c55e;
    background: #dcfce7;
    padding: 4px;
    border-radius: 50%;
    font-size: 0.8rem;
}

.fb-visual {
    background: #f1f5f9;
    border-radius: 20px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.visual-placeholder {
    color: #94a3b8;
    font-weight: 600;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Stats Section */
.stats-section {
    padding: 80px 0;
    background: var(--dark);
    color: white;
}

.white-text h2,
.white-text p {
    color: white;
}

.white-text p {
    opacity: 0.8;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.stat-box {
    text-align: center;
    padding: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-value {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.9;
}

/* How It Works */
.how-it-works {
    padding: 100px 0;
    background: white;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.step-card {
    text-align: center;
    padding: 40px 20px;
    position: relative;
}

.step-number {
    font-size: 4rem;
    font-weight: 900;
    color: #f1f5f9;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}

.step-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 16px;
}

/* Institution Plans */
.institution-plans {
    padding: 60px 0;
    background: #f8fafc;
}

.plan-card {
    background: var(--gradient-main);
    border-radius: var(--radius-xl);
    padding: 60px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.plan-content {
    max-width: 600px;
    z-index: 1;
}

.plan-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

.plan-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.plan-content .btn-primary {
    background: white;
    color: var(--primary);
}

.plan-image {
    font-size: 15rem;
    opacity: 0.1;
    position: absolute;
    right: 50px;
    bottom: -50px;
    transform: rotate(-15deg);
}

/* FAQs */
.faqs {
    padding: 100px 0;
    background: white;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #e2e8f0;
}

.faq-question {
    padding: 24px 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question i {
    color: var(--primary);
    transition: transform 0.3s ease;
}

.hover-subtle {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-subtle:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.faq-answer {
    padding-bottom: 24px;
    color: var(--gray);
    display: none;
}

.faq-item.active .faq-answer {
    display: block;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

/* Final CTA */
.final-cta {
    padding: 100px 0;
    text-align: center;
    background: white;
}

.final-cta h2 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.final-cta p {
    font-size: 1.25rem;
    color: var(--gray);
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Footer */
.footer {
    background: #0f172a;
    color: #94a3b8;
    padding: 80px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-col h4 {
    color: white;
    margin-bottom: 24px;
    font-size: 1.1rem;
}

.footer-col a {
    display: block;
    margin-bottom: 12px;
}

.footer-col a:hover {
    color: white;
}

.social-icons {
    display: flex;
    gap: 16px;
}

.social-icons a {
    font-size: 1.2rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .feature-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 15px 20px;
    }

    .nav-links {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        padding: 20px;
        box-shadow: var(--shadow-lg);
        display: none;
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-stats-preview {
        justify-content: center;
    }

    .hero-visual {
        display: none;
    }

    /* Hide complex visual on mobile or simplify */

    .feature-block {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .feature-block.reverse {
        direction: ltr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .cta-buttons {
        flex-direction: column;
    }
}

.hero-tagline {
    font-size: 1.1rem;
    color: var(--primary);
    font-weight: 600;
    margin-bottom: 30px;
    margin-top: -20px;
    max-width: 540px;
}

/* Smart Calendar Section */
.smart-calendar-section {
    padding: 100px 0;
    background: #f8fafc;
    overflow: hidden;
}

.calendar-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.calendar-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--dark);
}

.calendar-content p {
    font-size: 1.1rem;
    color: var(--gray);
    margin-bottom: 40px;
}

.calendar-features {
    list-style: none;
    margin-bottom: 40px;
}

.calendar-features li {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.cf-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.calendar-features h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.calendar-features p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* Calendar Mockup */
.cal-mockup {
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-xl);
    padding: 25px;
    position: relative;
    transform: rotate(0deg);
    transition: all 0.3s ease;
}

.cal-mockup:hover {
    transform: rotate(5deg) scale(1.02);
}

.cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 1.2rem;
}

.cal-nav {
    display: flex;
    gap: 15px;
    color: var(--gray);
    font-size: 0.9rem;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    text-align: center;
}

.cal-day-name {
    font-size: 0.8rem;
    color: var(--gray);
    font-weight: 600;
    margin-bottom: 10px;
}

.cal-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 5px;
    border-radius: 8px;
    font-size: 0.9rem;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.cal-day:hover {
    background: #f1f5f9;
}

.cal-day.faded {
    color: #cbd5e1;
}

.cal-day.active {
    background: var(--primary);
    color: white;
}

.event {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 4px;
}

.cal-day.active .event {
    background: white;
}

.event.e-exam {
    background: #ef4444;
}

.event.e-study {
    background: #3b82f6;
}

.cal-notification {
    position: absolute;
    bottom: 20px;
    right: -30px;
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 15px;
    animation: float 5s ease-in-out infinite;
    border-left: 4px solid #ef4444;
}

.cal-notification i {
    color: #ef4444;
    font-size: 1.5rem;
}

/* User Pricing Section */
.user-pricing {
    padding: 100px 0;
    background: white;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
    /* Align items to center to allow pop-out */
}

.price-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.price-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    background-color: rgba(37, 99, 235, 0.05);
}

/* Floating Elements for Calendar */
.calendar-visual {
    position: relative;
    padding: 40px;
}

.float-bubble {
    position: absolute;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary);
    box-shadow: var(--shadow-md);
    z-index: 2;
    animation: float 4s ease-in-out infinite;
}


.fb-2 {
    bottom: 15%;
    left: 5%;
    animation-delay: 1s;
}

.fb-3 {
    top: 15%;
    right: 10%;
    animation-delay: 2s;
}

.float-card-cal {
    position: absolute;
    background: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3;
    animation: float 5s ease-in-out infinite;
    min-width: 180px;
}

.float-card-cal i {
    font-size: 1.2rem;
}

.fcc-1 {
    top: -5%;
    right: -40px;
    border-left: 4px solid #ef4444;
    animation-delay: 0.5s;
}

.fcc-1 i {
    color: #ef4444;
}

.fcc-2 {
    bottom: -5%;
    left: -20px;
    border-left: 4px solid #22c55e;
    animation-delay: 1.5s;
}

.fcc-2 i {
    color: #22c55e;
}

.float-card-cal strong {
    display: block;
    font-size: 0.9rem;
    color: var(--dark);
}

.float-card-cal span {
    font-size: 0.8rem;
    color: var(--gray);
}

.price-card.popular {
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
    z-index: 2;
}

.price-card.popular:hover {
    transform: scale(1.05) translateY(-10px);
}

.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.pc-header {
    margin-bottom: 30px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 30px;
}

.pc-header h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.price {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 10px;
}

.price span {
    font-size: 1rem;
    color: var(--gray);
    font-weight: 500;
}

.pc-features {
    list-style: none;
    text-align: left;
    margin-bottom: 30px;
}

.pc-features li {
    margin-bottom: 15px;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pc-features li i {
    color: #22c55e;
}

.pc-features li.disabled {
    color: var(--gray);
    opacity: 0.7;
}

.pc-features li.disabled i {
    color: var(--gray);
}

.full-width {
    width: 100%;
    justify-content: center;
}

@media (max-width: 768px) {
    .calendar-wrapper {
        grid-template-columns: 1fr;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .price-card.popular {
        transform: scale(1);
    }

    .price-card.popular:hover {
        transform: translateY(-10px);
    }
}

/* 
=============================================
   HERO UI COMPOSITION (High-Fidelity CSS) 
=============================================
*/

.hero-illustration-container {
    position: relative;
    width: 100%;
    height: 500px;
    /* Fixed height for consistent layout */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

/* --- CENTRAL DASHBOARD (The Core) --- */
.central-dashboard {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: white;
    position: relative;
    z-index: 10;
    box-shadow: 0 0 80px rgba(79, 70, 229, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: float-center 6s ease-in-out infinite;
}

.dashboard-glow {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.5), rgba(236, 72, 153, 0.5));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
    z-index: -1;
    animation: spin 10s linear infinite;
}

.cd-content {
    text-align: center;
}

.cd-score {
    font-size: 3rem;
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}

.cd-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 5px;
}

.cd-rings {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 8px solid #f1f5f9;
    border-top-color: var(--primary);
    border-left-color: var(--accent);
    transform: rotate(-45deg);
    animation: spin-pulse 4s ease-in-out infinite alternate;
}

/* --- FLOATING MINI-UI CARDS --- */
.mini-ui-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 15px;
    z-index: 5;
    transition: transform 0.3s ease;
    width: 160px;
}

.mini-ui-card:hover {
    transform: scale(1.05) translateZ(20px) !important;
    z-index: 20;
    border-color: var(--primary);
}

/* 1. Resume Builder (Top Right) */
.ui-resume {
    top: 20px;
    right: 0;
    width: 140px;
    height: 180px;
    transform: rotate(6deg) translateY(0);
    animation: float-1 5s ease-in-out infinite;
}

.resume-header {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
}

.resume-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e2e8f0;
}

.resume-lines span {
    display: block;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin-bottom: 4px;
    width: 60px;
}

.resume-body span {
    display: block;
    height: 4px;
    background: #f1f5f9;
    margin-bottom: 6px;
    border-radius: 2px;
}

.resume-badge {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: #22c55e;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* 2. Smart Calendar (Bottom Right) */
.ui-calendar {
    bottom: 40px;
    right: 20px;
    width: 150px;
    transform: rotate(-3deg);
    animation: float-2 6s ease-in-out infinite 1s;
}

.cal-header-mini {
    background: #ef4444;
    color: white;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    margin-bottom: 10px;
}

.cal-grid-mini {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.cal-grid-mini span {
    aspect-ratio: 1;
    background: #f1f5f9;
    border-radius: 4px;
}

.cal-grid-mini span.active {
    background: #3b82f6;
}

/* 3. AI Chat (Top Left) */
.ui-ai {
    top: 40px;
    left: 10px;
    border-radius: 20px 20px 20px 4px;
    animation: float-3 7s ease-in-out infinite 0.5s;
    border-left: 4px solid var(--accent);
}

.ai-bubble {
    font-size: 0.8rem;
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 8px;
}

.ai-typing {
    display: flex;
    gap: 4px;
}

.ai-typing span {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: bounce 1s infinite;
}

.ai-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

/* 4. Growth Chart (Bottom Left) */
.ui-chart {
    bottom: 20px;
    left: -10px;
    width: 170px;
    animation: float-4 5s ease-in-out infinite 1.5s;
}

.chart-title {
    font-size: 0.75rem;
    color: var(--gray);
    margin-bottom: 10px;
    font-weight: 600;
}

.chart-bars-mini {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 60px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e2e8f0;
}

.chart-bars-mini div {
    flex: 1;
    background: var(--primary);
    border-radius: 4px 4px 0 0;
    width: 100%;
}

.bar-1 {
    height: 40%;
    opacity: 0.4;
}

.bar-2 {
    height: 60%;
    opacity: 0.6;
}

.bar-3 {
    height: 85%;
    opacity: 0.8;
}

.bar-4 {
    height: 100%;
}

/* Connecting Lines (Subtle) */
.ui-connector {
    position: absolute;
    background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
    z-index: 1;
    height: 1px;
    transform-origin: 0 50%;
}

/* Animations */
@keyframes float-center {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-pulse {
    from {
        transform: rotate(-45deg) scale(0.95);
    }

    to {
        transform: rotate(-40deg) scale(1.05);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

@keyframes float-1 {

    0%,
    100% {
        transform: rotate(6deg) translateY(0);
    }

    50% {
        transform: rotate(6deg) translateY(-15px);
    }
}

@keyframes float-2 {

    0%,
    100% {
        transform: rotate(-3deg) translateY(0);
    }

    50% {
        transform: rotate(-3deg) translateY(-12px);
    }
}

@keyframes float-3 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-18px);
    }
}

@keyframes float-4 {

    0%,
    100% {
        transform: rotate(2deg) translateY(0);
    }

    50% {
        transform: rotate(2deg) translateY(-10px);
    }
}

/* Mobile */
@media (max-width: 1024px) {
    .hero-illustration-container {
        transform: scale(0.7);
        height: 400px;
    }
}
/* Dropdown Menu */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown .dropbtn {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 180px;
  box-shadow: 0px 10px 25px rgba(0,0,0,0.1);
  z-index: 1001;
  border-radius: 12px;
  overflow: hidden;
  top: 120%; /* Slight offset */
  left: 0;
  border: 1px solid #f1f5f9;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.dropdown:hover .dropdown-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Ensure hover works nicely */
.dropdown-content a {
  color: var(--dark) !important;
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.dropdown-content a:hover {
  background-color: #f8fafc;
  color: var(--primary) !important;
  padding-left: 24px; /* Slide effect */
}

/* Hero Badge Gradient */
.badge-ai {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Agent Knott Section */
.agent-section {
    padding: 120px 0;
    background: linear-gradient(to bottom, #ffffff 0%, #f0fdf4 100%);
    position: relative;
    overflow: hidden;
}

.agent-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.agent-content h2 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.agent-feature-list {
    margin-top: 30px;
    margin-bottom: 40px;
}

.agent-feature-row {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.af-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #059669;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Advantages Grid Update */
.advantage-card {
    background: white;
    padding: 30px;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1);
    border-color: #e2e8f0;
}

.advantage-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-main);
    opacity: 0;
    transition: opacity 0.3s ease;
}

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


/* Hero Visual Animation Update */
.hero-illustration-container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.central-dashboard {
  position: relative;
  background: white;
  z-index: 5;
  display: flex;
  align-items: center;
  border: 1px solid rgba(16, 185, 129, 0.2);
  justify-content: center;
}

/* Floating animation for all mini-cards in hero */
.hero-illustration-container .mini-ui-card {
    position: absolute;
    background: white;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    z-index: 6;
    animation: float-hero 6s ease-in-out infinite;
    padding: 0; /* Reset */
    transition: transform 0.3s ease;
    border: 1px solid #f8fafc;
}

.hero-illustration-container .mini-ui-card:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* Stagger animations */
.hero-illustration-container .mini-ui-card:nth-child(2) { animation-delay: 0s; } /* Smart Calendar */
.hero-illustration-container .mini-ui-card:nth-child(3) { animation-delay: 1.5s; } /* Skill Recs */
.hero-illustration-container .mini-ui-card:nth-child(4) { animation-delay: 3s; } /* Tutor */
.hero-illustration-container .mini-ui-card:nth-child(5) { animation-delay: 2s; } /* Portfolio */
.hero-illustration-container .mini-ui-card:nth-child(6) { animation-delay: 4s; } /* Learning */
.hero-illustration-container .mini-ui-card:nth-child(7) { animation-delay: 1s; } /* ATS */


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

/* --- FIXED HERO VISUALS --- */

/* 1. Container - Needs to be a defined box for absolute positioning */
.hero-illustration-container {
    position: relative;
    width: 600px; /* Wider */
    height: 600px; /* Taller */
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; /* Let cards float out if needed */
}

/* 2. Central Hub - The "Sun" */
.central-dashboard.hub-circle {
    position: absolute;
    width: 240px !important;
    height: 240px !important;
    background: white;
    border-radius: 50% !important;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.15);
    border: 2px solid rgba(16, 185, 129, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hub-text {
    text-align: center;
    line-height: 1.1;
    z-index: 11;
}

.hub-text .main {
    font-size: 1.8rem;
    font-weight: 800;
    color: #064e3b;
    display: block;
}

.hub-text .sub {
    font-size: 2.5rem;
    font-weight: 900;
    color: #10b981; /* Green */
    display: block;
}

/* 3. Satellites - The "Planets" */
/* Reset generic card styles that might interfere */
.hero-illustration-container .mini-ui-card {
    position: absolute;
    width: auto !important;
    padding: 12px 18px !important;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-radius: 50px; /* Pill shape */
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 20;
    transition: all 0.4s ease;
    /* Clear previous inline styles via CSS dominance if possible, otherwise we rely on HTML cleanup */
    top: auto; bottom: auto; left: auto; right: auto;
    transform: none; /* Reset simple transform */
    animation: float-orbit 5s ease-in-out infinite;
}

.hero-illustration-container .mini-ui-card:hover {
    transform: scale(1.1) translateY(-5px);
    z-index: 30;
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.card-text {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    white-space: nowrap;
}

/* 4. Satellite Orbit Positions (Clockwise from top) */

/* #1 Smart Calendar (Top) */
.pos-1 {
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

/* #2 AI Skill Recs (Top Right) */
.pos-2 {
    top: 20%;
    right: 0%;
}

/* #3 AI Tutor (Bottom Right) */
.pos-3 {
    bottom: 25%;
    right: -5%;
}

/* #4 Portfolio (Bottom) */
.pos-4 {
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

/* #5 Learning Resources (Bottom Left) */
.pos-5 {
    bottom: 25%;
    left: -5%;
}

/* #6 ATS Resumes (Top Left) */
.pos-6 {
    top: 20%;
    left: 0%;
}

/* Animation Refinement */
@keyframes float-orbit {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-10px) translateX(0); } /* Simple float, specialized transforms above might override */
}

/* Specific overrides for centered items to keep them centered during float */
.pos-1 { animation: float-top 6s ease-in-out infinite; }
.pos-4 { animation: float-bottom 7s ease-in-out infinite; }

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

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


/* --- FINAL POSITIONING FIXES (High Specificity) --- */

/* Force container size again */
.hero-illustration-container {
    width: 650px !important;
    height: 650px !important;
}

/* Ensure Central Hub stays put */
.hero-illustration-container .central-dashboard.hub-circle {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 260px !important;
    height: 260px !important;
}

/* Override any potential conflicts for cards */
.hero-illustration-container .mini-ui-card {
    position: absolute !important;
    top: auto; 
    left: auto; 
    right: auto; 
    bottom: auto;
    margin: 0 !important;
}

/* Specific Positions with High Specificity */

/* 1. Smart Calendar (Top Center) */
.hero-illustration-container .mini-ui-card.pos-1 {
    top: 0% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    bottom: auto !important;
}

/* 2. AI Skill Recs (Top Right) */
.hero-illustration-container .mini-ui-card.pos-2 {
    top: 15% !important;
    right: -5% !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* 3. AI Tutor (Bottom Right) */
.hero-illustration-container .mini-ui-card.pos-3 {
    bottom: 25% !important;
    right: -10% !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* 4. Portfolio (Bottom Center) */
.hero-illustration-container .mini-ui-card.pos-4 {
    bottom: 5% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    right: auto !important;
}

/* 5. Learning Resources (Bottom Left) */
.hero-illustration-container .mini-ui-card.pos-5 {
    bottom: 25% !important;
    left: -10% !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
}

/* 6. ATS Resumes (Top Left) */
.hero-illustration-container .mini-ui-card.pos-6 {
    top: 15% !important;
    left: -5% !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}


/* --- PORTAL HERO DESIGN (Splitscreen) --- */

/* 1. The Container - Gradient Split Background */
.hero-illustration-container {
    background: linear-gradient(100deg, #1e1b4b 0%, #1e1b4b 45%, #f0fdf4 55%, #ffffff 100%);
    border-radius: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: visible; /* Cards float out */
    border: 4px solid #ffffff;
    /* Maintain size but make it responsive-ish internally */
    width: 700px !important; 
    height: 500px !important;
}

/* 2. The Portal (Central Hub) */
.hero-illustration-container .central-dashboard.hub-circle {
    background: #0f172a; /* Dark core */
    border: 4px solid transparent;
    background-clip: padding-box;
    /* Glowing Border Effect */
    box-shadow: 
        0 0 0 4px #0f172a, /* Space */
        0 0 60px rgba(16, 185, 129, 0.6), /* Green Glow */
        0 0 100px rgba(59, 130, 246, 0.4); /* Blue outer glow */
    width: 200px !important;
    height: 200px !important;
    z-index: 50;
}

/* Text inside Portal */
.hub-text .main {
    color: #ffffff;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.hub-text .sub {
    color: #34d399; /* Bright Emerald */
    text-shadow: 0 0 20px rgba(52, 211, 153, 0.8);
}

/* 3. The Divide Line (Optional, subtle vertical glow) */
.hero-illustration-container::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(10deg);
    width: 2px;
    height: 80%;
    background: linear-gradient(to bottom, transparent, rgba(52, 211, 153, 0.5), transparent);
    z-index: 10;
    pointer-events: none;
}

/* 4. Left Side (The "Before" / Student) */
/* Update specific positions to group them on the left */

/* Smart Calendar */
.hero-illustration-container .mini-ui-card.pos-1 {
    top: 20% !important;
    left: 10% !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.9);
    border-left: 4px solid #6366f1; /* Indigo accent */
}

/* Learning Resources */
.hero-illustration-container .mini-ui-card.pos-5 {
    bottom: 20% !important;
    left: 12% !important;
    transform: none !important;
    background: rgba(255, 255, 255, 0.9);
    border-left: 4px solid #8b5cf6; /* Purple accent */
}

/* AI Tutor (Guiding the transition) */
.hero-illustration-container .mini-ui-card.pos-3 {
    top: -30px !important; /* Floating above center */
    left: 45% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    background: #0f172a;
    color: white;
    border: 1px solid #10b981;
}
.hero-illustration-container .mini-ui-card.pos-3 .card-text {
    color: white !important;
}

/* 5. Right Side (The "After" / Success) */

/* Skill Recs */
.hero-illustration-container .mini-ui-card.pos-2 {
    top: 25% !important;
    right: 5% !important;
    left: auto !important;
    background: white;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.15);
    border-right: 4px solid #10b981;
}

/* Portfolio */
.hero-illustration-container .mini-ui-card.pos-4 {
    bottom: 25% !important;
    right: 8% !important;
    left: auto !important;
    transform: none !important;
    background: white;
    border-right: 4px solid #f59e0b;
}

/* ATS Resumes */
.hero-illustration-container .mini-ui-card.pos-6 {
    top: 60% !important;
    right: -10% !important;
    left: auto !important;
    width: auto !important;
    background: white;
    border-right: 4px solid #06b6d4;
    z-index: 60;
}

/* Headline Overlay */
.portal-headline {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2.2rem;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 100;
    pointer-events: none;
    line-height: 1;
}

.portal-headline span {
    color: #10b981;
}

/* Animation Updates */
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 60px rgba(16, 185, 129, 0.6); }
    50% { box-shadow: 0 0 100px rgba(16, 185, 129, 0.8), 0 0 20px rgba(255,255,255,0.5); }
}

.hero-illustration-container .central-dashboard.hub-circle {
    animation: pulse-glow 3s infinite alternate;
}


/* --- SUN CONCEPT REDESIGN (Dark to Bright) --- */

/* 1. Container - Dark to Bright Gradient */
.hero-illustration-container {
    background: linear-gradient(90deg, #020617 0%, #0f172a 45%, #fff7ed 55%, #ffffff 100%);
    box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.5); /* Deeper shadow for depth */
    border: 4px solid white; /* Clean rim */
}

/* 2. Central Hub - The "Sun" */
.hero-illustration-container .central-dashboard.hub-circle {
    background: radial-gradient(circle at center, #fbbf24, #d97706); /* Amber to Orange */
    border: none;
    box-shadow: 
        0 0 20px rgba(245, 158, 11, 0.8), /* Inner heat */
        0 0 60px rgba(245, 158, 11, 0.6), /* Radiant glow */
        0 0 120px rgba(251, 191, 36, 0.4); /* Far reaching light */
    z-index: 60;
}

/* Text inside Sun - Needs to be readable on Orange */
.hub-text .main {
    color: #fffbeb; /* Warm white */
    text-shadow: 0 2px 4px rgba(180, 83, 9, 0.5);
    font-size: 1.5rem;
}
.hub-text .sub {
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(180, 83, 9, 0.5);
}

/* 3. Cards - Adjust for Dark Side (Left) */
/* Force dark-side cards to pop */
.hero-illustration-container .mini-ui-card.pos-1,
.hero-illustration-container .mini-ui-card.pos-5,
.hero-illustration-container .mini-ui-card.pos-6 { 
    /* pos-6 is ATS, moved to left? No, let's keep logic */
    /* Wait, let's re-verify positions. 
       Left: 1 (Calendar - Top Center->Left), 5 (Learning - Bottom Left), 6 (ATS - Top Left)
    */
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); /* Glow against dark */
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* 4. Portal Headline Update for this theme */
.portal-headline {
    text-shadow: 0 4px 20px rgba(0,0,0,0.8); /* Strong shadow for readability over variable bg */
}
.portal-headline span {
    color: #fbbf24; /* Match Sun */
    text-shadow: 0 0 20px rgba(251, 191, 36, 0.5);
}

/* Animation - Pulse the Sun */
@keyframes sun-pulse {
    0% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 60px rgba(245, 158, 11, 0.6); }
    50% { transform: translate(-50%, -50%) scale(1.02); box-shadow: 0 0 100px rgba(245, 158, 11, 0.8); }
    100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 60px rgba(245, 158, 11, 0.6); }
}

.hero-illustration-container .central-dashboard.hub-circle {
    animation: sun-pulse 4s infinite ease-in-out;
}


/* ========================================= */
/*       DARK SEAMLESS SPACE THEME           */
/* ========================================= */

/* 1. Global Dark Mode Overrides */
:root {
    --dark-bg: #020617; /* Slate 950 - Deep Space */
    --card-bg: #0f172a; /* Slate 900 - Lighter Space */
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --accent-sun: #fbbf24;
}

body {
    background-color: var(--dark-bg) !important;
    color: var(--text-main) !important;
}

/* Force all white sections to dark */
section, .section, .footer {
    background-color: var(--dark-bg) !important;
    color: var(--text-main) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: white !important;
}

/* Paragraphs */
p {
    color: var(--text-muted) !important;
}

/* Cards (Features, etc.) */
.mini-ui-card, .advantage-card, .step-card, .f-card, .benefit-item {
    background: var(--card-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}
.mini-ui-card .card-text {
    color: white !important;
}

/* Navbar */
.navbar {
    background: rgba(2, 6, 23, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.nav-links a {
    color: var(--text-muted) !important;
}
.nav-links a:hover {
    color: white !important;
}

/* ========================================= */
/*       HERO SPACE & REAL SUN VISUAL        */
/* ========================================= */

/* 2. Hero Container - The Cosmos */
.hero-illustration-container {
    background: 
        radial-gradient(1px 1px at 10% 10%, white 100%, transparent),
        radial-gradient(1px 1px at 20% 20%, white 100%, transparent),
        radial-gradient(2px 2px at 30% 60%, rgba(255,255,255,0.8) 100%, transparent),
        radial-gradient(1px 1px at 40% 80%, white 100%, transparent),
        radial-gradient(1px 1px at 50% 50%, white 100%, transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(255,255,255,0.7) 100%, transparent),
        radial-gradient(1px 1px at 90% 40%, white 100%, transparent),
        radial-gradient(circle at center, #1e1b4b 0%, #020617 100%); /* Nebula Glow */
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px, 450px 450px, 600px 600px, 800px 800px, 100% 100%;
    
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        inset 0 0 100px rgba(0,0,0,0.8), 
        0 0 50px rgba(79, 70, 229, 0.2);
    
    perspective: 1000px;
    animation: galaxy-move 60s linear infinite;
    overflow: hidden !important;
    position: relative;
    border-radius: 50% !important; /* Portal/Window look? Or maintain box? Let's stick to box but slightly rounded */
    border-radius: 40px !important;
}

/* 3. The REAL SUN Hub */
.hero-illustration-container .central-dashboard.hub-circle {
    /* Base Sun Body */
    background: radial-gradient(circle at 30% 30%, #fef3c7 0%, #f59e0b 20%, #d97706 45%, #b45309 70%, #78350f 100%);
    border: none !important;
    width: 220px !important;
    height: 220px !important;
    
    /* The Corona / Glow */
    box-shadow: 
        inset -10px -10px 40px rgba(0,0,0,0.5), /* Depth */
        0 0 20px rgba(245, 158, 11, 0.8), /* Inner heat */
        0 0 60px rgba(234, 88, 12, 0.6), /* Orange Glow */
        0 0 120px rgba(220, 38, 38, 0.4), /* Red Outer Glow */
        0 0 200px rgba(251, 146, 60, 0.2); /* Atmosphere */
        
    animation: sun-pulse-real 8s ease-in-out infinite, sun-rotate 120s linear infinite;
    z-index: 50;
    
    /* Text Adjustment */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hub-text .main {
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.5px;
}
.hub-text .sub {
    color: #fef3c7;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

/* 4. Animation for "Camera Zoom" / Star Movement */
@keyframes galaxy-move {
    0% { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, center; }
    100% { background-position: 550px 550px, 350px 350px, 250px 250px, 150px 150px, 450px 450px, 600px 600px, 800px 800px, center; }
}

@keyframes sun-pulse-real {
    0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
    50% { transform: translate(-50%, -50%) scale(1.02); filter: brightness(1.2); }
}

@keyframes sun-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Counter-rotate text so it stays upright */
.hero-illustration-container .central-dashboard.hub-circle .hub-text {
    animation: sun-rotate-reverse 120s linear infinite;
}
@keyframes sun-rotate-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}


/* 5. Card Updates for Space */
.hero-illustration-container .mini-ui-card {
    background: rgba(15, 23, 42, 0.7) !important; /* Semi-transparent dark */
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

.hero-illustration-container .mini-ui-card:hover {
    border-color: rgba(251, 191, 36, 0.6) !important; /* Sun Gold Border */
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.3) !important;
}

/* 6. Clean up the Portal Headline */
.portal-headline {
    color: white;
}
.portal-headline span {
    color: #fbbf24;
    text-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
}


/* ========================================= */
/*       CLEAN CIRCULAR HUB RESTORE          */
/* ========================================= */

/* 1. RESET Global Dark Mode Overrides (Back to default) */
:root {
    --dark-bg: initial;
    --card-bg: initial;
    --text-main: initial;
    --text-muted: initial;
}

body {
    background-color: var(--white) !important;
    color: var(--dark) !important;
}

section, .section, .footer {
    background-color: initial !important;
    color: initial !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--dark) !important;
}

p {
    color: var(--gray) !important;
}

/* Reset Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}
.nav-links a {
    color: var(--gray) !important;
}
.nav-links a:hover {
    color: var(--primary) !important;
}

/* 2. Hero Container - Clean & Light */
.hero-illustration-container {
    background: none !important; /* Transparent/Clean */
    box-shadow: none !important;
    border: none !important;
    perspective: none;
    animation: none;
    overflow: visible !important;
    position: relative;
    border-radius: 0;
    width: 600px !important;
    height: 600px !important;
}

/* 3. Central Hub - Clean White Glass */
.hero-illustration-container .central-dashboard.hub-circle {
    /* Clean White/Light Theme */
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    
    /* Soft Glow */
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(79, 70, 229, 0.1), /* Subtle outline */
        0 0 40px rgba(79, 70, 229, 0.15); /* Primary Glow */
        
    width: 200px !important;
    height: 200px !important;
    border-radius: 50% !important;
    animation: pulse-soft 4s ease-in-out infinite;
    z-index: 50;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hub-text .main {
    color: #0f172a !important; /* Dark Slate */
    text-shadow: none !important;
    font-size: 1.4rem;
    font-weight: 800;
}
.hub-text .sub {
    color: #4f46e5 !important; /* Primary Blue */
    text-shadow: none !important;
    font-size: 2rem;
    font-weight: 900;
}

/* 4. Cards - Clean Light Pills */
.hero-illustration-container .mini-ui-card {
    background: white !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
    border-radius: 50px !important;
    padding: 10px 20px !important;
    display: flex;
    align-items: center;
    gap: 12px;
    
    color: #334155 !important; /* Slate 700 */
    font-weight: 600;
}

.hero-illustration-container .mini-ui-card:hover {
    transform: translateY(-5px) scale(1.05) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1) !important;
    border-color: #4f46e5 !important;
}

.hero-illustration-container .mini-ui-card .card-text {
    color: #334155 !important;
}

/* 5. Restore Animations */
@keyframes pulse-soft {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.2); }
    70% { box-shadow: 0 0 0 20px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}

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

.hero-illustration-container .mini-ui-card {
    animation: float-gentle 6s ease-in-out infinite;
    /* Staggered delay logic isn't easily selected here without nth-child, keeping simple */
}

/* Ensure Positions are clean */
/* Re-asserting positions if they were overridden by 'Dark Side' logic,
   but actually the pos-X logic was kept largely intact in style.css.
   We just need to ensure no specificity wars. */
.pos-1 { top: 5% !important; left: 50% !important; transform: translateX(-50%) !important; }
.pos-2 { top: 25% !important; right: 0% !important; left: auto !important; }
.pos-3 { bottom: 25% !important; right: -5% !important; left: auto !important; }
.pos-4 { bottom: 5% !important; left: 50% !important; transform: translateX(-50%) !important; }
.pos-5 { bottom: 25% !important; left: -5% !important; right: auto !important; }
.pos-6 { top: 25% !important; left: 0% !important; right: auto !important; }


/* ========================================= */
/*       ROTATING FAN / WING ANIMATION       */
/* ========================================= */

/* 1. Structural Fixes */
.hero-illustration-container {
    position: relative;
    width: 600px !important;
    height: 600px !important;
    /* Ensure it's a positioning context */
}

/* 2. The Rotating Fan Assembly */
.rotating-fan-assembly {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* The Animation: Infinite Spin */
    animation: rotate-fan 30s linear infinite;
    
    /* Center aligning contents */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. The Central Hub Visual (No Text) */
.central-dashboard.hub-circle-visual {
    width: 200px !important;
    height: 200px !important;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    border: 1px solid rgba(79, 70, 229, 0.2);
    box-shadow: 0 0 50px rgba(79, 70, 229, 0.15);
    z-index: 10;
}

/* 4. The Card "Wings" - Counter Rotation */
.rotating-fan-assembly .mini-ui-card {
    /* Existing positioning (pos-1, etc) works inside the rotating parent */
    /* Add counter-rotation to keep orientation up */
    animation: counter-rotate-fan 30s linear infinite;
    
    /* Spoke connection (Wings) */
    /* We want a line pointing to center. */
    /* But 'center' is dynamic relative to the card. */
    /* Trick: Add a pseudo element that is huge and rotated? */
    /* Easier: just keep them floating. "Wings" usually means they stick out. */
    /* Let's try to add a visible spoke if possible. */
}

/* Spoke Lines */
.rotating-fan-assembly .mini-ui-card::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px; /* Long enough to reach center */
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.1) 50%, rgba(79, 70, 229, 0) 100%);
    z-index: -1;
    transform-origin: 0 50%;
}

/* Adjust Spoke Angles based on position to point inward? 
   Actually, if the parent rotates, the spoke rotates with it.
   But the Card counter-rotates.
   So the spoke inside the card will also counter-rotate.
   Result: The spoke will spin wildly.
   
   Better approach for spokes: 
   Add them to the .hub-circle-visual or a separate layer that rotates WITH the fan but doesn't counter-rotate.
   
   Let's skip distinctive spokes for now to avoid visual glitching and focus on the "Aerodynamic Wing" feel of the cards themselves.
   User asked "let it be added with circle be act as a fan".
   Okay, let's just make the cards strictly attached.
*/

.rotating-fan-assembly .mini-ui-card {
    /* Enhance the "Blade" look */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    /* Remove the float animation, replace with counter-rotate */
}

/* 5. Static Text Overlay */
.static-hub-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100; /* Top most */
    pointer-events: none;
    text-align: center;
}

.static-hub-text-overlay .hub-text .main {
    color: #0f172a;
    font-size: 1.5rem;
    font-weight: 800;
}
.static-hub-text-overlay .hub-text .sub {
    color: #4f46e5;
    font-size: 2.2rem;
    font-weight: 900;
}


/* Animations */
@keyframes rotate-fan {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes counter-rotate-fan {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); } /* Opposite to parent */
}


/* ========================================= */
/*       FAN HUB: WRAPPED CARD FIX           */
/* ========================================= */

/* 1. The Wrapper handles Position & Rotation from Parent */
.fan-card-positioner {
    position: absolute;
    z-index: 20;
    /* pos-X classes apply top/left/transform here */
    /* It inherits the rotation from .rotating-fan-assembly */
}

/* 2. The Inner Card handles Counter-Rotation & Visuals */
.rotating-fan-assembly .mini-ui-card {
    /* No positioning here! */
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    /* transform: none !important; removed to allow animation */
    
    /* The Animation: Counter Rotate so Text stays upright */
    animation: counter-rotate-fan 30s linear infinite;
    transform-origin: center center;
    
    /* Visuals */
    background: white;
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    white-space: nowrap;
}

/* 3. Cleanup specific overrides */
.pos-1, .pos-2, .pos-3, .pos-4, .pos-5, .pos-6 {
    /* Ensure these work on the wrapper */
    position: absolute !important;
}

/* 4. Spoke Lines (Wings) connecting Wrapper to Center? */
/* Or connect Card to Center? */
/* If we put it on wrapper, it rotates with Fan. Perfect. */
.fan-card-positioner::before {
    content: '';
    position: absolute;
    top: 50%;
    
    /* Logic to point to center (300px away) */
    /* Since we don't know exact angle, this is hard with just CSS unless we know specific pos */
    /* But we know pos-1 is Top Center. pos-4 is Bottom Center. */
    /* Using radial gradient on the main fan assembly is easier for spokes. */
    /* Let's skip individual spokes for now to ensure animation works first. */
    display: none;
}


/* ========================================= */
/*       REFERENCE DESIGN: SIDE ARC          */
/* ========================================= */

/* 1. Container - Right Alignment */
.hero-visual-arc-container {
    position: relative;
    width: 600px; /* Or 100% of col */
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Push arc to right */
    overflow: visible;
}

/* 2. The Glowing Arc Path */
.glowing-arc-path {
    position: absolute;
    /* Create a huge circle positioned off-screen to the right to form a curve */
    right: -250px; 
    top: 50%;
    transform: translateY(-50%);
    
    width: 700px;
    height: 700px;
    border-radius: 50%;
    
    /* The Glow Line */
    border: 3px solid rgba(255, 255, 255, 0.4);
    border-left: 3px solid rgba(79, 70, 229, 0.6); /* Highlighted side */
    box-shadow: 
        -10px 0 30px rgba(79, 70, 229, 0.2), /* Soft blue glow inwards */
        inset 10px 0 30px rgba(79, 70, 229, 0.1);

    /* Glassy Fill? */
    background: radial-gradient(circle at 10% 50%, rgba(255,255,255,0.8) 0%, transparent 60%);
    
    z-index: 10;
}

/* 3. Icons Wrapper - Matches the Arc coordinate system */
.arc-icons-wrapper {
    position: absolute;
    right: -250px; /* Same as arc */
    top: 50%;
    transform: translateY(-50%);
    width: 700px;
    height: 700px;
    border-radius: 50%;
    pointer-events: none; /* Let clicks pass through if needed */
    z-index: 20;
}

/* 4. The Card Points (Absolute along the circle edge) */
/* Formula: left = 50% + cos(a)*R, top = 50% + sin(a)*R */
/* We want the LEFT side of the circle (Arc). Angles: 90 deg (bottom) to 270 deg (top) */
/* Actually, 0 is right. 180 is left. */
/* We want angles from approx 150deg (top-left) to 210deg (bottom-left) relative to circle center */
/* Wait, the container is on the right. The Arc is curved OUT Left. */
/* So we need positions on the LEFT arc of the circle. */

.arc-card {
    position: absolute;
    pointer-events: auto;
    
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-radius: 30px;
    
    transform: translate(-50%, -50%); /* Centered on their point */
    
    /* Animation */
    animation: float-gentle 6s ease-in-out infinite;
}

.arc-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.arc-text-box .label {
    font-weight: 600;
    color: #334155;
    font-size: 0.9rem;
    line-height: 1.2;
    display: block;
}

/* Positions (Manual override of Circle Math for aesthetics) */
/* We are placing them along the Left-Top to Left-Bottom arc */

/* Top Most (Pos 1) - Angle ~200 deg? No, 0 is right. 90 is bottom. 180 is left. 270 is top. */
/* Arc is on the right of screen. We see the LEFT edge of circle. */
/* Angles: 150 (Top Left) -> 180 (Mid Left) -> 210 (Bottom Left) */

/* POS 1: Top ~225 deg (Upper Left) */
.arc-pos-1 { left: 15%; top: 15%; } 

/* POS 2: ~200 deg */
.arc-pos-2 { left: 6%; top: 30%; }

/* POS 3: ~180 deg (Center Left) */
.arc-pos-3 { left: 0%; top: 50%; width: auto; padding-right: 20px; }
/* Emphasize Center Node */
.arc-pos-3 .arc-icon-box { width: 50px; height: 50px; font-size: 1.4rem; }

/* POS 4: ~160 deg */
.arc-pos-4 { left: 6%; bottom: 30%; top: auto; }

/* POS 5: ~135 deg */
.arc-pos-5 { left: 15%; bottom: 15%; top: auto; }

/* POS 6: Outlier / Bottom Tail */
.arc-pos-6 { left: 35%; bottom: 0%; top: auto; transform: translate(-50%, 0); }


/* Mobile Adjustments - Arc becomes messy on small screens */
@media (max-width: 992px) {
    .glowing-arc-path, .arc-icons-wrapper {
        position: relative;
        right: auto;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 350px;
        height: 350px;
        margin-top: 50px;
    }
    
    .hero-visual-arc-container {
        width: 100%;
        height: auto;
        justify-content: center;
        margin-bottom: 50px;
    }
    
    /* Reset positions for mobile circle */
    .arc-pos-1 { left: 50%; top: -20px; }
    .arc-pos-2 { right: -20px; top: 20%; left: auto; }
    .arc-pos-3 { right: -40px; top: 50%; left: auto; }
    .arc-pos-4 { right: -20px; bottom: 20%; left: auto; top: auto; }
    .arc-pos-5 { left: 50%; bottom: -30px; top: auto; }
    .arc-pos-6 { left: -10px; top: 50%; bottom: auto; }
}