/*`r`n * DreamWebCrafts Public Frontend Bundle`r`n * Generated from shared public CSS sources.`r`n */`r`n

/* Prevent Alpine.js FOUC – hide elements until Alpine processes x-show */
[x-cloak] { display: none !important; }

/* ===== BEGIN frontend-renderers.css ===== */


.cc-track { position: absolute; cursor: pointer; inset: 0; background-color: #334155; transition: 0.3s; border-radius: 24px; }
.cc-track:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #94a3b8; transition: 0.3s; border-radius: 50%; }

.dc-identity-card {
    width: 350px;
    background: #fff;
    font-family: sans-serif;
    overflow: hidden;
}

.dc-identity-card--academic {
    height: 500px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.dc-identity-card__header {
    color: #fff;
    padding: 30px 20px;
    text-align: center;
}

.dc-identity-card__site-name {
    font-weight: 800;
    font-size: 1.2rem;
}

.dc-identity-card__site-label {
    font-size: 0.7rem;
    opacity: 0.7;
    text-transform: uppercase;
}

.dc-identity-card__avatar-shell {
    text-align: center;
}

.dc-identity-card__avatar-shell--academic { margin-top: -40px; }
.dc-identity-card__avatar-ring {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.dc-identity-card__avatar-ring--academic {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: inline-block;
    border: 5px solid #fff;
}

.dc-identity-card__avatar-ring--corporate {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
}

.dc-identity-card__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-identity-card__body { text-align: center; padding: 20px; }
.dc-identity-card__name { margin: 10px 0 5px; font-size: 1.5rem; }
.dc-identity-card__badge { display: inline-block; padding: 4px 16px; border-radius: 20px; font-weight: 800; font-size: 0.75rem; }
.dc-identity-card__meta-grid {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: left;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    font-size: 0.8rem;
}

.dc-identity-card__meta-wide { grid-column: span 2; }
.dc-identity-card__meta-label { opacity: 0.5; font-size: 0.6rem; }
.dc-identity-card__footer {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dc-identity-card__disclaimer { font-size: 0.6rem; opacity: 0.5; }
.dc-identity-card__qr { width: 60px; height: 60px; border-radius: 8px; }

.dc-identity-card--corporate {
    height: 220px;
    border: 1px solid #333;
    border-radius: 8px;
    display: flex;
}

.dc-identity-card__side {
    width: 120px;
    background: #1a237e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-identity-card__content {
    flex: 1;
    padding: 20px;
}

.dc-identity-card__content-head { font-weight: bold; color: #1a237e; }
.dc-identity-card__content-name { margin: 5px 0 0; font-size: 1.1rem; }
.dc-identity-card__content-role { color: #666; font-size: 0.8rem; margin-bottom: 10px; }
.dc-identity-card__content-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15px; }
.dc-identity-card__content-meta { font-size: 0.7rem; color: #999; }
.dc-identity-card__qr--small { width: 45px; height: 45px; }

.dc-analytics-report__footer { margin-top: 40px; color: #666; font-size: 12px; }
.dc-print-body { margin: 0; }
.dc-id-print-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.dc-page-break { page-break-after: always; }

@media (max-width: 640px) {
}

.preloader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s, visibility 0.5s;
}

.preloader.hide { opacity: 0; visibility: hidden; }

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: dc-spin 1s linear infinite;
}

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

.dc-runtime-empty {
    font-family: sans-serif;
    padding: 40px;
    text-align: center;
}

.dc-analytics-report {
    font-family: Arial, sans-serif;
    padding: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.dc-analytics-report__title { color: #6366f1; }
.dc-analytics-report__meta { margin-bottom: 1rem; }
.dc-analytics-report__stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.dc-analytics-report__stat-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.dc-analytics-report__stat-value { font-size: 32px; font-weight: bold; color: #333; }
.dc-analytics-report__stat-label { color: #666; margin-top: 5px; }
.dc-analytics-report table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.dc-analytics-report th,
.dc-analytics-report td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
.dc-analytics-report th { background: #6366f1; color: #fff; }
.dc-analytics-report__funnel { margin: 30px 0; display: grid; gap: 10px; }
.dc-analytics-report__funnel-step {
    padding: 15px;
    border-radius: 5px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}

.dc-analytics-report__funnel-label {
    font-weight: 600;
    color: #312e81;
    margin-bottom: 0.5rem;
}

.dc-analytics-report__funnel-progress {
    width: 100%;
    height: 12px;
}

.dc-finance-report {
    font-family: Arial, sans-serif;
    padding: 32px;
    color: #0f172a;
}

.dc-finance-report__title { margin: 0 0 8px; }
.dc-finance-report__meta { color: #64748b; font-size: 12px; }
.dc-finance-report__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.dc-finance-report__card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
}

.dc-finance-report__label { color: #64748b; font-size: 11px; text-transform: uppercase; }
.dc-finance-report__value { font-size: 18px; font-weight: bold; margin-top: 6px; }
.dc-finance-report table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.dc-finance-report th,
.dc-finance-report td { padding: 10px; text-align: left; border-bottom: 1px solid #e2e8f0; }
.dc-finance-report th { background: #f1f5f9; }

.dc-payslip {
    font-family: Arial, sans-serif;
    margin: 40px;
    color: #333;
}

.dc-payslip__header {
    border-bottom: 3px solid #6366f1;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.dc-payslip__company { font-size: 24px; font-weight: bold; color: #1a1a2e; }
.dc-payslip__title { font-size: 14px; color: #666; margin-top: 5px; }
.dc-payslip__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.dc-payslip__info-box { background: #f8fafc; padding: 20px; border-radius: 8px; }
.dc-payslip__info-box h3 { margin: 0 0 15px; color: #6366f1; font-size: 14px; text-transform: uppercase; }
.dc-payslip__info-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.dc-payslip__info-label { color: #666; }
.dc-payslip__info-value { font-weight: 600; }
.dc-payslip table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.dc-payslip th { background: #6366f1; color: #fff; padding: 12px; text-align: left; }
.dc-payslip td { padding: 12px; border-bottom: 1px solid #e2e8f0; }
.dc-payslip__total-row { font-weight: bold; background: #f1f5f9; }
.dc-payslip__net-pay {
    font-size: 24px;
    color: #10b981;
    text-align: center;
    padding: 20px;
    background: #ecfdf5;
    border-radius: 8px;
}

.dc-payslip__footer { margin-top: 40px; text-align: center; color: #666; font-size: 12px; }

.dc-shipping-labels {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
    padding: 12px;
}

.dc-shipping-labels__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.dc-shipping-labels__label {
    background: #fff;
    border: 2px solid #111;
    border-radius: 8px;
    padding: 12px;
    page-break-inside: avoid;
}

.dc-shipping-labels__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.dc-shipping-labels__mono { font-family: Consolas, monospace; }
.dc-shipping-labels__small { font-size: 12px; color: #444; }
.dc-shipping-labels__strong { font-weight: 700; }

@media print {
    .dc-shipping-labels { background: #fff; padding: 0; }
    .dc-shipping-labels__label { break-inside: avoid; }
}

/* ===== END frontend-renderers.css ===== */


/* ===== BEGIN theme.css ===== */

:root {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --accent: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
}

[data-theme="dark"] {
    --bg: #0a0a0f;
    --bg-secondary: #111118;
    --bg-card: #1a1a24;
    --bg-hover: #222234;
    --text: #ffffff;
    --text-muted: #9ca3af;
    --border: rgba(255,255,255,0.08);
}

[data-theme="light"] {
    --bg: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #e2e8f0;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: rgba(0,0,0,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: clip;
    transition: background 0.4s, color 0.4s;
}

/* Global section heading alignment */
.section-header {
    width: min(760px, calc(100% - 2rem));
    margin: 0 auto 3rem;
    text-align: center;
}

.section-label {
    display: inline-block;
    margin: 0 0 0.85rem;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    text-align: center;
    text-wrap: balance;
}

.section-subtitle {
    margin: 0 auto;
    color: var(--text-muted);
    max-width: 680px;
    text-align: center;
    text-wrap: pretty;
}

/* Unified page hero */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 8.2rem 0 4.25rem;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(1000px 400px at 5% -20%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(920px 420px at 100% 0%, rgba(236, 72, 153, 0.14), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #000 12%) 0%, var(--bg) 100%);
}

.page-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 860px;
}

.page-hero__kicker {
    display: inline-block;
    margin: 0 0 0.95rem;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.page-hero__title {
    font-family: 'Outfit', sans-serif;
    margin: 0 auto 0.95rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-size: clamp(2rem, 5vw, 4rem);
    text-wrap: balance;
}

.page-hero__subtitle {
    margin: 0 auto;
    color: var(--text-muted);
    max-width: 720px;
    font-size: clamp(0.98rem, 1.8vw, 1.15rem);
    text-wrap: pretty;
}

.page-hero__actions {
    margin-top: 1.65rem;
    display: inline-flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
}

.page-hero__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(55px);
    opacity: 0.5;
    pointer-events: none;
}

.page-hero__orb--one {
    width: 260px;
    height: 260px;
    left: -70px;
    top: 100px;
    background: rgba(99, 102, 241, 0.32);
}

.page-hero__orb--two {
    width: 320px;
    height: 320px;
    right: -100px;
    top: 50px;
    background: rgba(236, 72, 153, 0.25);
}

/* Auth hero */
.auth-page-hero {
    margin-top: 78px;
    padding: 2.1rem 0 0.65rem;
}

.auth-page-hero__inner {
    text-align: center;
    max-width: 780px;
}

.auth-page-hero__kicker {
    display: inline-block;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}

.auth-page-hero__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-family: 'Outfit', sans-serif;
}

.auth-page-hero__subtitle {
    margin: 0 auto;
    color: var(--text-muted);
    max-width: 650px;
}

/* Footer */
.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--border);
    background:
        radial-gradient(800px 200px at 0% 0%, rgba(99, 102, 241, 0.1), transparent 60%),
        radial-gradient(780px 200px at 100% 0%, rgba(236, 72, 153, 0.08), transparent 60%),
        var(--bg-secondary);
}

.site-footer__wrap {
    padding: 3rem 1rem 1.5rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(120px, 1fr));
    gap: 2rem;
}

.site-footer__brand {
    margin-bottom: 1rem;
}

.site-footer__text {
    color: var(--text-muted);
    max-width: 340px;
}

.site-footer__social {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
}

.site-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-footer__social a:hover {
    transform: translateY(-2px);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.site-footer h4 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: 0.62rem;
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--primary);
}

.site-footer__bar {
    margin-top: 1.7rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* Unified modern footer */
.footer-modern {
    background: var(--bg-secondary);
    position: relative;
    padding-top: 0;
}

.footer-top-glow {
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f43f5e, #f59e0b);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 2rem 30px;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer-brand p {
    color: var(--text-muted);
    max-width: 300px;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 8px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.1);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.footer-social a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

.footer-links-col h4 {
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-col li {
    margin-bottom: 0.75rem;
}

.footer-links-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.footer-links-col a:hover {
    color: var(--primary);
    padding-left: 4px;
}

.footer-bottom-bar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Common Components */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white !important;
    padding: 12px 28px;
    border-radius: 50px;
    min-height: 3rem;
    font-weight: 600;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99,102,241,0.5), 0 0 20px rgba(236,72,153,0.3);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    padding: 12px 28px;
    border: 2px solid var(--border);
    border-radius: 50px;
    text-decoration: none;
    min-height: 3rem;
    font-weight: 600;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-outline:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.btn-primary i,
.btn-outline i,
.marketing-link-stack a i {
    width: 1rem;
    flex: 0 0 1rem;
    text-align: center;
    font-size: 0.95em;
}

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.marketing-link-stack a:focus-visible,
.marketing-point a:focus-visible,
.marketing-checkline a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section { padding: 72px 2rem; }
.section-alt { background: var(--bg-secondary); }

@media (max-width: 768px) {
    .section { padding: 48px 1rem; }
}
.container { max-width: 1400px; margin: 0 auto; }

/* Cards & Grid */
.grid { display: grid; gap: 2rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.4s;
}

/* Preloader */
.preloader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s, visibility 0.5s;
}
.preloader.hide { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Login/Auth Specifics */
input, textarea, select, .form-control {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: 1rem;
    width: 100%; /* Ensure full width */
    display: block;
}

@media (max-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
    }
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.8rem;
    }
}

@media (max-width: 768px) {
    /* .section mobile padding defined at line ~420 above */
    .page-hero { padding: 7rem 0 3.4rem; }
    .page-hero__inner {
        box-sizing: border-box;
        padding-inline: 0.7rem;
    }
    .page-hero__subtitle {
        width: min(100%, 21rem);
        max-width: min(100%, 21rem);
    }
    .page-hero__actions {
        width: 100%;
    }
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
    .site-footer__text {
        max-width: 100%;
    }
    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-brand p {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-social {
        justify-content: center;
    }
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

/* Unified marketing shell */
.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-hero--marketing {
    padding: 8.75rem 0 4.5rem;
    min-height: auto;
}

.page-hero--marketing .page-hero__inner {
    max-width: 860px;
}

.page-hero--marketing .page-hero__title {
    max-width: 15ch;
}

.page-hero--marketing .page-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.75;
}

.marketing-shell {
    position: relative;
    padding: 0 0 96px;
    background:
        radial-gradient(960px 280px at 8% 0%, rgba(99, 102, 241, 0.08), transparent 64%),
        radial-gradient(900px 240px at 100% 100%, rgba(236, 72, 153, 0.06), transparent 62%),
        var(--bg);
}

.marketing-grid {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.marketing-grid > * {
    min-width: 0;
}

.marketing-grid--content {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

.marketing-grid--form {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
}

.marketing-panel {
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(1.35rem, 2vw, 2rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, transparent), var(--bg-card)),
        var(--bg-card);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

[data-theme="dark"] .marketing-panel {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
}

.marketing-panel--soft {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 11%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)),
        var(--bg-card);
}

.marketing-panel--flush {
    padding: 0;
    overflow: hidden;
}

.marketing-stack {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.marketing-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marketing-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0.35rem 0 0.75rem;
    text-wrap: balance;
}

.marketing-copy {
    color: var(--text-muted);
    line-height: 1.75;
    text-wrap: pretty;
}

.marketing-form {
    display: grid;
    gap: 1rem;
}

.marketing-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-field {
    display: grid;
    gap: 0.55rem;
}

.marketing-field--full {
    grid-column: 1 / -1;
}

.marketing-field > span,
.marketing-field > label {
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.marketing-field input,
.marketing-field select,
.marketing-field textarea {
    width: 100%;
    min-height: 58px;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.marketing-field input::placeholder,
.marketing-field textarea::placeholder {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
    opacity: 1;
}

.marketing-field input:hover,
.marketing-field select:hover,
.marketing-field textarea:hover {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

.marketing-field select {
    appearance: none;
    cursor: pointer;
    padding-right: 3.25rem;
    color: var(--text);
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
}

.marketing-field textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.65;
}

.marketing-field input:focus,
.marketing-field select:focus,
.marketing-field textarea:focus {
    border-color: color-mix(in srgb, var(--primary) 60%, #fff 40%);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.marketing-checkline {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.marketing-checkline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 0.18rem;
    accent-color: var(--primary);
    flex: 0 0 18px;
}

.marketing-checkline span {
    flex: 1 1 auto;
}

.marketing-checkline a {
    color: var(--primary);
    text-decoration: none;
}

.marketing-checkline a:hover {
    text-decoration: underline;
}

.marketing-alert {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
    line-height: 1.55;
}

.marketing-alert p,
.marketing-alert div {
    margin: 0;
}

.marketing-alert--error {
    color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 45%, transparent);
    background: color-mix(in srgb, #ef4444 12%, transparent);
}

.marketing-alert--success {
    color: #10b981;
    border-color: color-mix(in srgb, #10b981 45%, transparent);
    background: color-mix(in srgb, #10b981 12%, transparent);
}

.marketing-points,
.marketing-link-stack,
.marketing-guidance {
    display: grid;
    gap: 0.85rem;
}

.marketing-point {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.marketing-point__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
    font-size: 1rem;
}

.marketing-point strong {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--text);
}

.marketing-point a,
.marketing-point span,
.marketing-guidance li {
    color: var(--text-muted);
    line-height: 1.6;
}

.marketing-link-stack a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    overflow-wrap: anywhere;
}

.marketing-link-stack a:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    transform: translateY(-2px);
}

.marketing-guidance {
    padding-left: 1.15rem;
}

.marketing-guidance li + li {
    margin-top: 0.1rem;
}

.marketing-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.marketing-stat {
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

.marketing-stat strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.marketing-stat span {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.marketing-empty {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.marketing-map iframe {
    width: 100% !important;
    min-height: 260px;
    display: block;
    border: 0;
}

.marketing-rich-text {
    line-height: 1.75;
}

.marketing-rich-text h2,
.marketing-rich-text h3 {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

.marketing-rich-text h2 {
    font-size: clamp(1.6rem, 3vw, 2rem);
    margin: 2rem 0 0.9rem;
}

.marketing-rich-text h3 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    margin: 1.45rem 0 0.7rem;
}

.marketing-rich-text p,
.marketing-rich-text li,
.marketing-rich-text blockquote {
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .marketing-grid--content,
    .marketing-grid--form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-hero--marketing {
        padding: 7.4rem 0 3.35rem;
    }
    .page-hero--marketing .page-hero__title,
    .page-hero--marketing .page-hero__subtitle {
        max-width: min(100%, 14ch);
    }
    .page-hero--marketing .page-hero__subtitle {
        width: min(100%, 21rem);
        max-width: min(100%, 21rem);
    }
    .marketing-shell {
        padding-bottom: 72px;
    }
    .marketing-panel {
        border-radius: 22px;
        padding: 1.25rem;
    }
    .marketing-field input,
    .marketing-field select,
    .marketing-field textarea {
        min-height: 54px;
        padding: 0.92rem 0.95rem;
        font-size: 16px;
    }
    .marketing-field select {
        padding-right: 3rem;
    }
    .marketing-field textarea {
        min-height: 160px;
    }
    .marketing-point {
        gap: 0.75rem;
    }
    .marketing-point__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .marketing-form-grid,
    .marketing-stat-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .page-hero {
        overflow: clip;
    }
    .page-hero__orb--one {
        width: 210px;
        height: 210px;
        left: -88px;
        top: 110px;
    }
    .page-hero__orb--two {
        width: 230px;
        height: 230px;
        right: -78px;
        top: 64px;
    }
    .marketing-panel {
        padding: 1.05rem;
        border-radius: 20px;
    }
}

/* ===== END theme.css ===== */


/* ===== BEGIN main.css ===== */

/*
 * DreamWebCrafts - Main Stylesheet
 * All-in-one local CSS with Tailwind utilities and custom styles
 */

/* ========================================
   CSS VARIABLES — defined in theme.css (single source of truth)
   Only non-theme utility aliases kept here.
   ======================================== */
:root {
    --color-primary: #6366F1;
    --color-secondary: #10B981;
    --color-accent: #F59E0B;
    --color-dark: #0F172A;
    --color-darker: #020617;
}

/* ========================================
   FONTS
   ======================================== */
@import url('./local-fonts.css');

/* ========================================
   CSS RESET & BASE
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { 
    scroll-behavior: smooth; 
    overflow-x: hidden !important; 
    overflow-y: auto !important;
    width: 100% !important; 
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body { 
    line-height: 1.6; 
    -webkit-font-smoothing: antialiased; 
    overflow-x: clip !important;
    overflow-y: visible;
    position: relative; 
    width: 100% !important;
    max-width: 100% !important;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a, button, [role="button"], input[type="button"], input[type="submit"] { touch-action: manipulation; }

/* Global Container Fixes */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 1400px;
}

@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Shared shell defaults without overriding page-specific hero/grid layouts */
.container,
.shell {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.hero-title, .pricing-hero h1, .portfolio-hero h1, .services-hero h1, .about-hero h1 {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Shared section alignment defaults */
.section-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.section-label,
.section-title,
.section-subtitle {
    text-align: center;
}

@media (pointer: coarse) {
    a, button, [role="button"], .btn, .action-btn, .mobile-toggle, .nav-menu a, .profile-btn, .swiper-button-prev, .swiper-button-next {
        min-width: 44px;
        min-height: 44px;
    }
    input, select, textarea {
        font-size: 16px;
    }
}

/* ========================================
   TAILWIND-LIKE UTILITIES
   ======================================== */

/* Layout */
/* .container defined in Global Container Fixes above (max-width: 1400px) */

.max-w-7xl { max-width: 80rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-lg { max-width: 32rem; }
.max-w-sm { max-width: 24rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }

/* Flexbox */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Grid */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:block { display: block; }
}

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.bottom-8 { bottom: 2rem; }
.right-8 { right: 2rem; }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-\[9999\] { z-index: 9999; }

/* Typography */
.font-sans { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.text-7xl { font-size: 4.5rem; }
@media (min-width: 768px) {
    .md\:text-5xl { font-size: 3rem; }
    .md\:text-6xl { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
    .lg\:text-6xl { font-size: 3.75rem; }
    .lg\:text-7xl { font-size: 4.5rem; }
}
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-tight { line-height: 1.25; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Colors */
.text-white { color: #ffffff; }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-900 { color: #0f172a; }
.text-primary { color: #6366F1; }
.text-secondary { color: #10B981; }
.text-accent { color: #F59E0B; }
.text-pink-500 { color: #ec4899; }
.text-cyan-400 { color: #22d3ee; }
.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
.text-orange-400 { color: #fb923c; }
.text-blue-400 { color: #60a5fa; }

.bg-white { background-color: #ffffff; }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-200 { background-color: #e2e8f0; }
.bg-slate-800 { background-color: #1e293b; }
.bg-dark { background-color: #0F172A; }
.bg-darker { background-color: #020617; }
.bg-primary { background-color: #6366F1; }
.bg-primary\/10 { background-color: rgba(99, 102, 241, 0.1); }
.bg-primary\/30 { background-color: rgba(99, 102, 241, 0.3); }
.bg-secondary { background-color: #10B981; }
.bg-secondary\/10 { background-color: rgba(16, 185, 129, 0.1); }
.bg-accent { background-color: #F59E0B; }
.bg-accent\/10 { background-color: rgba(245, 158, 11, 0.1); }
.bg-pink-500\/10 { background-color: rgba(236, 72, 153, 0.1); }
.bg-pink-500\/20 { background-color: rgba(236, 72, 153, 0.2); }

/* Gradients */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-dark { --tw-gradient-from: #0F172A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-primary { --tw-gradient-from: #6366F1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pink-500 { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-slate-50 { --tw-gradient-from: #f8fafc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-slate-900 { --tw-gradient-to: #0f172a; }
.via-purple-600 { --tw-gradient-to: #9333ea; }
.to-darker { --tw-gradient-to: #020617; }
.to-pink-500 { --tw-gradient-to: #ec4899; }
.to-purple-600 { --tw-gradient-to: #9333ea; }
.to-slate-100 { --tw-gradient-to: #f1f5f9; }

/* Borders */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-t { border-top-width: 1px; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-white { border-color: #ffffff; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.border-primary { border-color: #6366F1; }
.border-t-transparent { border-top-color: transparent; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* Effects */
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.backdrop-blur-lg { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* Sizing */
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-full { width: 100%; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }

/* Object Fit */
.object-cover { object-fit: cover; }

/* Transitions */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* Transforms */
.transform { transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rotate-2 { transform: rotate(2deg); }
.-rotate-45 { transform: rotate(-45deg); }
.translate-y-4 { transform: translateY(1rem); }
.scale-110 { transform: scale(1.1); }

/* Hover States */
.hover\:text-white:hover { color: #ffffff; }
.hover\:text-primary:hover { color: #6366F1; }
.hover\:text-secondary:hover { color: #10B981; }
.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-primary:hover { background-color: #6366F1; }
.hover\:bg-primary\/80:hover { background-color: rgba(99, 102, 241, 0.8); }
.hover\:bg-primary\/90:hover { background-color: rgba(99, 102, 241, 0.9); }
.hover\:border-white:hover { border-color: #ffffff; }
.hover\:border-white\/60:hover { border-color: rgba(255, 255, 255, 0.6); }
.hover\:border-primary\/30:hover { border-color: rgba(99, 102, 241, 0.3); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:rotate-0:hover { transform: rotate(0deg); }
.hover\:translate-y-0:hover { transform: translateY(0); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:translate-y-0 { transform: translateY(0); }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

/* Visibility */
.invisible { visibility: hidden; }
.visible { visibility: visible; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Outline */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/* Focus States */
.focus\:border-primary:focus { border-color: #6366F1; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }
.focus\:ring-primary\/20:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }

/* Animations */
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Brand logo glow utility */
.dc-brand-orbit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    --dc-logo-glow-anchor: min(92px, 24%);
    --dc-logo-glow-outer: clamp(86px, 16vw, 132px);
    --dc-logo-glow-inner: clamp(72px, 13vw, 110px);
}

.dc-brand-orbit::before {
    content: "";
    position: absolute;
    left: var(--dc-logo-glow-anchor);
    top: 50%;
    width: var(--dc-logo-glow-outer);
    height: var(--dc-logo-glow-outer);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 78%, #fff 22%), color-mix(in srgb, var(--accent) 76%, #fff 24%), color-mix(in srgb, #22d3ee 72%, #fff 28%), color-mix(in srgb, var(--primary) 78%, #fff 22%));
    filter: blur(15px);
    opacity: 0.48;
    z-index: -1;
    animation: dc-brand-orbit-spin 7.5s linear infinite;
    pointer-events: none;
}

.dc-brand-orbit::after {
    content: "";
    position: absolute;
    left: var(--dc-logo-glow-anchor);
    top: 50%;
    width: var(--dc-logo-glow-inner);
    height: var(--dc-logo-glow-inner);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 48%, #fff 52%) 0%, color-mix(in srgb, var(--primary) 28%, transparent 72%) 45%, transparent 74%);
    filter: blur(12px);
    opacity: 0.35;
    z-index: -1;
    animation: dc-brand-heartbeat 1.55s ease-in-out infinite;
    pointer-events: none;
}

.dc-brand-orbit > img {
    display: block;
    position: relative;
    z-index: 1;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes dc-brand-orbit-spin {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(7px); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(7px); }
}
@keyframes dc-brand-heartbeat {
    0%, 100% { transform: translate(-50%, -50%) scale(0.84); opacity: 0.2; }
    18% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.5; }
    38% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.3; }
    60% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.44; }
}

/* ========================================
   CUSTOM COMPONENT STYLES
   ======================================== */

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-gradient { 
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* Gradient Text */
.gradient-text {
    background: var(--public-title-gradient, linear-gradient(135deg, var(--secondary), var(--accent), var(--primary-light), var(--primary)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Service Card Hover */
.service-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.service-card:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Blob backgrounds */
.blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    filter: blur(60px);
}

/* Swiper custom */
.swiper-pagination-bullet-active {
    background: #6366F1 !important;
}

/* Smooth hover underline */
.hover-underline {
    position: relative;
}
.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #6366F1;
    transition: width 0.3s ease;
}
.hover-underline:hover::after {
    width: 100%;
}

/* Grid Pattern Background */
.grid-pattern {
    background-image: linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Space utilities */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Resize */
.resize-none { resize: none; }

/* Pseudo element pb */
.pb-12 { padding-bottom: 3rem; }

/* ========================================
   PREMIUM VISUAL EFFECTS (PHASE 5+)
   ======================================== */

/* Glassmorphism Cards */
.glass {
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.75);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 3D Card Effect */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.card-3d:hover {
    transform: translateY(-12px) rotateX(5deg) rotateY(-5deg);
}

.card-3d::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 100%);
    pointer-events: none;
    border-radius: inherit;
}

/* Shimmer Loading Effect */
.shimmer {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Button Glow Effect */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, var(--color-primary), transparent 30%);
    animation: rotate-glow 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-glow:hover::before {
    opacity: 1;
}

@keyframes rotate-glow {
    100% { transform: rotate(360deg); }
}

/* Ripple Button Effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.btn-ripple:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

/* Focus Ring */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Floating Animation */
.float {
    animation: float 3s ease-in-out infinite;
}

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

/* Pulse Animation */
.pulse-dot {
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: inherit;
    animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
    100% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animated Gradient Border */
.gradient-border {
    position: relative;
    background: linear-gradient(var(--color-dark), var(--color-dark)) padding-box,
                linear-gradient(90deg, var(--color-primary), #ec4899, var(--color-primary)) border-box;
    border: 2px solid transparent;
    background-size: 200% 200%;
    animation: gradient-border 3s linear infinite;
}

@keyframes gradient-border {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Premium Card Hover */
.premium-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-primary), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
}

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

/* Mobile Touch Feedback */
@media (hover: none) {
    .touch-feedback:active {
        transform: scale(0.97);
        opacity: 0.8;
    }
}

/* Scroll Snap Container */
.snap-x {
    scroll-snap-type: x mandatory;
}

.snap-start {
    scroll-snap-align: start;
}

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
}

@supports (scrollbar-width: none) {
    .no-scrollbar {
        scrollbar-width: none; /* Firefox */
    }
}

/* Mobile Viewport Fix */
.min-h-screen-real {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

/* Safe Area Padding */
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-top {
    padding-top: env(safe-area-inset-top);
}

/* ========================================
   FRONTEND DESIGN IMPROVEMENTS (2026)
   ======================================== */

/* ----------------------------------------
   SCROLL PROGRESS INDICATOR
   ---------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #8b5cf6, #ec4899);
    z-index: 9999;
    transition: width 0.1s ease-out;
}

/* ----------------------------------------
   BACK TO TOP BUTTON
   ---------------------------------------- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    z-index: 1000;
}

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

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}

@media (max-width: 640px) {
    .back-to-top {
        right: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }

    .theme-toggle:not(.action-btn) {
        left: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }
}

/* ----------------------------------------
   SKELETON LOADING
   ---------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, #1a1a2e 25%, #252540 50%, #1a1a2e 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text-sm {
    height: 0.75rem;
    width: 60%;
}

.skeleton-title {
    height: 1.5rem;
    width: 80%;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-image {
    aspect-ratio: 16/9;
    width: 100%;
}

.skeleton-card {
    padding: 1.5rem;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 1rem;
}

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ----------------------------------------
   SOCIAL SHARE BUTTONS
   ---------------------------------------- */
.social-share {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.share-btn.twitter { background: #1DA1F2; }
.share-btn.facebook { background: #4267B2; }
.share-btn.linkedin { background: #0077B5; }
.share-btn.whatsapp { background: #25D366; }
.share-btn.telegram { background: #0088cc; }
.share-btn.copy-link { background: #6366f1; }

.share-btn.twitter:hover { background: #0d8ddc; }
.share-btn.facebook:hover { background: #365899; }
.share-btn.linkedin:hover { background: #006097; }
.share-btn.whatsapp:hover { background: #1da851; }
.share-btn.telegram:hover { background: #0077b3; }
.share-btn.copy-link:hover { background: #4f46e5; }

/* ----------------------------------------
   READING TIME BADGE
   ---------------------------------------- */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.reading-time i {
    font-size: 0.875rem;
}

/* ----------------------------------------
   TABLE OF CONTENTS (Blog)
   ---------------------------------------- */
.table-of-contents {
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.table-of-contents h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-of-contents li {
    margin-bottom: 0.5rem;
}

.table-of-contents a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-of-contents a::before {
    content: '→';
    color: var(--color-primary);
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s;
}

.table-of-contents a:hover {
    color: var(--color-primary);
}

.table-of-contents a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------------------
   VISITOR DARK MODE TOGGLE
   ---------------------------------------- */
.theme-toggle:not(.action-btn) {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 48px;
    height: 48px;
    background: rgba(26, 26, 46, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
}

.theme-toggle:not(.action-btn):hover {
    background: var(--color-primary);
    transform: rotate(180deg);
}

/* Light mode styles (when toggled) */
html[data-theme="light"] {
    --color-dark: #f8fafc;
    --color-darker: #ffffff;
}

html[data-theme="light"] body {
    background: #f8fafc;
    color: #1e293b;
}

html[data-theme="light"] .bg-dark,
html[data-theme="light"] .bg-slate-900 {
    background: white !important;
}

html[data-theme="light"] .text-white {
    color: #1e293b !important;
}

html[data-theme="light"] .text-gray-300,
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500 {
    color: #64748b !important;
}

html[data-theme="light"] .border-gray-800,
html[data-theme="light"] .border-gray-600,
html[data-theme="light"] .border-gray-700 {
    border-color: #e2e8f0 !important;
}

/* Dark-themed background utilities → light-mode safe equivalents */
html[data-theme="light"] .bg-gray-800\/50,
html[data-theme="light"] .bg-gray-800\/30,
html[data-theme="light"] .bg-gray-700\/50 {
    background: var(--bg-card) !important;
    border: 1px solid var(--border);
}

/* Form elements inside dark-themed wrappers — force readable text */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] select option {
    color: var(--text) !important;
    background: var(--bg) !important;
}

/* Indigo tinted backgrounds */
html[data-theme="light"] .bg-indigo-500\/10 {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

html[data-theme="light"] .bg-indigo-500\/20 {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

html[data-theme="light"] .bg-green-500\/10 {
    background: rgba(16, 185, 129, 0.08);
}

html[data-theme="light"] .bg-green-500\/20 {
    background: rgba(16, 185, 129, 0.12);
}

/* ----------------------------------------
   CONTENT STATUS BADGES
   ---------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.draft {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.status-badge.review {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.status-badge.published {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-badge.rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ----------------------------------------
   ENHANCED PRINT STYLES
   ---------------------------------------- */
@media print {
    .no-print,
    .back-to-top,
    .theme-toggle:not(.action-btn),
    .scroll-progress,
    nav,
    footer,
    .social-share { 
        display: none !important; 
    }
    
    body { 
        background: white !important; 
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    a {
        color: black !important;
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Print header */
    @page {
        margin: 2cm;
    }
}


/* ===== END main.css ===== */


/* ===== BEGIN components\navbar.css ===== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.95rem 2rem;
    background: rgba(10, 10, 15, 0.7);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
    padding: 0.65rem 2rem;
    background: rgba(10, 10, 15, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo.has-brand-image::before,
.logo.has-brand-image::after {
    display: none;
}

.navbar .logo-image-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    isolation: isolate;
    flex-shrink: 0;
}

.navbar .logo-image-wrap::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 78%, #fff 22%), color-mix(in srgb, var(--accent) 76%, #fff 24%), color-mix(in srgb, #22d3ee 72%, #fff 28%), color-mix(in srgb, var(--primary) 78%, #fff 22%));
    filter: blur(13px);
    opacity: 0.72;
    z-index: 0;
    animation: dc-logo-orbit 7.5s linear infinite;
    pointer-events: none;
}

.navbar .logo-image-wrap::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 50%, #fff 50%) 0%, color-mix(in srgb, var(--primary) 30%, transparent 70%) 48%, transparent 75%);
    filter: blur(10px);
    opacity: 0.5;
    z-index: 0;
    animation: dc-logo-heartbeat 1.55s ease-in-out infinite;
    pointer-events: none;
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.navbar .logo-image {
    width: auto !important;
    height: 50px !important;
    max-width: min(236px, 18vw);
    border-radius: 0;
    object-fit: contain;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.1));
}

.navbar .logo-image.logo-light {
    display: none;
}
.navbar .logo-image.logo-dark {
    display: block;
}

[data-theme="light"] .navbar .logo-image.logo-light {
    display: block;
}
[data-theme="light"] .navbar .logo-image.logo-dark {
    display: none;
}

[data-theme="dark"] .navbar .logo-image-wrap {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.logo:hover .logo-icon {
    transform: rotate(10deg);
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
}

.logo.has-brand-image .logo-text {
    display: none;
}

@keyframes dc-logo-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(6px); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(6px); }
}

@keyframes dc-logo-heartbeat {
    0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.44; }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
}

.nav-menu a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.25s ease;
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.nav-menu a:hover {
    color: var(--text);
}

.nav-menu a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.25s ease;
}

.nav-menu a:not(.btn):hover::after {
    width: 100%;
}


.nav-menu a.nav-link.is-active {
    color: var(--primary) !important;
    font-weight: 700;
    opacity: 1;
}

.nav-menu a.nav-link.is-active::after {
    width: 100%;
}

.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
    position: relative;
    left: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.theme-toggle i {
    line-height: 1;
    display: block;
    pointer-events: none;
}

button.action-btn.theme-toggle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}

.theme-toggle.no-print:not(.action-btn) {
    display: none !important;
}

.mobile-toggle {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    -webkit-tap-highlight-color: transparent;
}

.mobile-only-link {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-only-link {
        display: block;
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: var(--bg);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        border-bottom: 1px solid var(--border);
        transform: translateY(-120%);
        opacity: 0;
        transition: all 0.3s;
        max-height: calc(100vh - 84px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
    }

    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.nav-profile {
    position: relative;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 16px 6px 6px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.profile-btn:hover {
    border-color: var(--primary);
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.profile-name {
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
}

.profile-btn i {
    color: var(--text-muted);
    font-size: 10px;
}

.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 220px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 100;
}

.dropdown-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.dropdown-header strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.dropdown-header span {
    font-size: 12px;
    color: var(--text-muted);
}

.profile-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-muted) !important;
    font-size: 14px;
    transition: all 0.2s;
}

.profile-dropdown a:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary) !important;
}

.profile-dropdown a i {
    width: 16px;
    text-align: center;
}

.dropdown-divider {
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.logout-link:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    text-decoration: none;
    position: relative;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.action-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.action-btn:focus-visible,
.mobile-toggle:focus-visible,
.delivery-btn:focus-visible,
.profile-btn:focus-visible,
.theme-toggle:focus-visible,
.nav-menu a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 75%, transparent);
    outline-offset: 2px;
}

.lang-switcher {
    position: relative;
}

.lang-switcher .action-btn {
    width: auto;
    padding: 0 12px;
    border-radius: 21px;
}

.lang-code {
    font-size: 11px;
    font-weight: 600;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 160px;
    padding: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.lang-option:hover {
    background: var(--bg-hover);
}

.lang-option.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.lang-flag {
    min-width: 24px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    padding: 2px 6px;
}

.cart-btn {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

@media (max-width: 1024px) {
    .nav-actions {
        gap: 8px;
    }

    .lang-switcher .action-btn {
        padding: 0 8px;
    }

    .lang-code {
        display: none;
    }

    .profile-name {
        display: none;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0.8rem 1rem;
    }
    .nav-actions {
        position: static;
        background: transparent;
        border-top: 0;
        padding: 0;
        justify-content: flex-end;
        gap: 8px;
    }

    .nav-actions .btn,
    .lang-switcher {
        display: none;
    }

    .nav-menu {
        top: 74px;
        padding: 1.3rem 1rem 1.5rem;
        gap: 0.9rem;
    }

    .nav-menu a {
        font-size: 0.95rem;
    }

    .logo-text {
        font-size: 1.05rem;
    }

    .navbar .logo-image {
        height: 50px !important;
        max-width: min(190px, 52vw);
    }

    .navbar .logo-image-wrap {
        height: 58px !important;
        padding: 0;
    }

    .navbar .logo-image-wrap::before {
        width: 52px;
        height: 52px;
        left: 22px;
    }

    .navbar .logo-image-wrap::after {
        width: 40px;
        height: 40px;
        left: 22px;
    }
}

/* ===== END components\navbar.css ===== */


/* ===== BEGIN components\footer.css ===== */

/*
 * Footer Modern — canonical responsive overrides
 * Base styles in theme.css (.footer-modern, .footer-top-glow, .footer-content,
 * .footer-main, .footer-social, .footer-links-col, .footer-bottom-bar)
 */

.footer-modern .logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 1rem;
}

.footer-modern .logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
}

.logo.has-brand-image::before,
.logo.has-brand-image::after {
    display: none;
}

.footer-modern .logo-image-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 82px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    isolation: isolate;
}

.footer-modern .logo-image-wrap::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 80%, #fff 20%), color-mix(in srgb, var(--accent) 78%, #fff 22%), color-mix(in srgb, #22d3ee 72%, #fff 28%), color-mix(in srgb, var(--primary) 80%, #fff 20%));
    filter: blur(14px);
    opacity: 0.76;
    z-index: 0;
    animation: footer-logo-orbit 8s linear infinite;
    pointer-events: none;
}

.footer-modern .logo-image-wrap::after {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 48%, #fff 52%) 0%, color-mix(in srgb, var(--primary) 28%, transparent 72%) 45%, transparent 74%);
    filter: blur(12px);
    opacity: 0.56;
    z-index: 0;
    animation: footer-logo-heartbeat 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes footer-logo-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(4px); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(4px); }
}

@keyframes footer-logo-heartbeat {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.5; }
}

.footer-modern .logo-image {
    width: auto !important;
    height: 68px !important;
    max-width: none !important;
    border-radius: 0;
    object-fit: contain;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.1));
}

.footer-modern .logo-image.logo-light {
    display: none;
}

.footer-modern .logo-image.logo-dark {
    display: block;
}

[data-theme="light"] .footer-modern .logo-image.logo-light {
    display: block;
}

[data-theme="light"] .footer-modern .logo-image.logo-dark {
    display: none;
}

@media (max-width: 768px) {
    .footer-modern .logo-image-wrap {
        height: 68px;
        padding: 0;
    }
    .footer-modern .logo-image-wrap::before {
        left: 24px;
        width: 54px;
        height: 54px;
    }
    .footer-modern .logo-image-wrap::after {
        left: 24px;
        width: 40px;
        height: 40px;
    }
    .footer-modern .logo-image {
        height: 56px !important;
    }
}

/* ===== END components\footer.css ===== */


/* ===== BEGIN components\frontend-widgets.css ===== */

/* public\templates\partials\footer.php */
.live-help-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}
.help-trigger {
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.help-trigger:hover { transform: scale(1.1); }
.help-modal {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden;
}
.help-modal.hidden { display: none; }
.help-header {
    background: var(--primary);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.help-header h3 { margin: 0; font-size: 16px; }
.help-header button { background: none; border: none; color: white; cursor: pointer; }
.help-body { padding: 10px; }
.help-option {
    display: flex;
    gap: 15px;
    padding: 15px;
    text-decoration: none;
    color: var(--text);
    border-radius: 10px;
    transition: background 0.3s;
}
.help-option:hover { background: var(--bg); }
.help-option i { font-size: 20px; color: var(--primary); }
.help-option strong { display: block; font-size: 14px; }
.help-option span { font-size: 12px; color: var(--text-muted); }

/* public\templates\partials\floating-popup.php */
.dc-popup {
    position: fixed;
    right: 20px;
    bottom: clamp(96px, 11vh, 148px);
    z-index: 9980;
    width: min(360px, calc(100vw - 32px));
    padding: 20px 20px 18px;
    color: #f8fafc;
    font-family: "Inter", sans-serif;
    background:
        linear-gradient(180deg, rgba(14, 18, 37, 0.94) 0%, rgba(18, 24, 46, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s ease;
}

.dc-popup--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

[data-theme="light"] .dc-popup {
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.96) 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.dc-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dc-popup-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="light"] .dc-popup-close {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.04);
    color: #64748b;
}

[data-theme="light"] .dc-popup-close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

.dc-popup-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dc-icon {
    width: fit-content;
    margin-bottom: 4px;
    font-size: 2rem;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 12px 24px rgba(124, 58, 237, 0.22));
}

.dc-text h3 {
    margin: 0 0 4px;
    padding-right: 34px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.dc-text p {
    margin: 0;
    color: rgba(226, 232, 240, 0.76);
    font-size: 0.8125rem;
    line-height: 1.5;
}

[data-theme="light"] .dc-text p {
    color: #475569;
}

.dc-popup-btn {
    display: block;
    padding: 11px 14px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(99, 102, 241, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dc-popup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(99, 102, 241, 0.28);
}

@media (max-width: 768px) {
    .dc-popup {
        right: 16px;
        bottom: 112px;
        width: min(360px, calc(100vw - 24px));
        padding: 18px 18px 16px;
    }
}

@media (max-width: 480px) {
    .dc-popup {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 108px;
    }
}

/* ===== END components\frontend-widgets.css ===== */


/* ===== BEGIN components\cookie-consent.css ===== */

/* ============================================================================
 * Compact floating popup card for public pages
 * ============================================================================ */





.cc-shell {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    position: relative;
}

.cc-copy {
    min-width: 0;
    padding-right: 2.35rem;
}

















@media (max-width: 767px) {

    .cc-shell {
        gap: 0.72rem;
        padding: 0.9rem;
    }

    .cc-copy {
        padding-right: 2rem;
    }





}

@media (max-width: 520px) {

}

/* ===== END components\cookie-consent.css ===== */


/* ===== BEGIN frontend.css ===== */

/* ============================================
   DreamWebCrafts Frontend Styles
   All page-specific CSS consolidated
   ============================================ */

/* Public pages should never render blank while waiting for scroll animation hooks. */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

:root {
    --public-title-gradient: linear-gradient(135deg, #765cff 0%, #9964ff 28%, #cb5fe8 64%, #f055b6 100%);
}

.section-title,
.marketing-title,
.ab-story-title,
.ab-cta-title,
.portfolio-cta h2,
.services-cta h2,
.proof-item strong {
    text-align: center;
}

.marketing-panel > div:first-child .marketing-kicker,
.marketing-panel > div:first-child .marketing-title,
.marketing-panel > div:first-child .marketing-copy,
.ab-panel > .section-label,
.ab-panel > .ab-story-title,
.ab-panel > .ab-story-copy,
.ab-cta-box,
.portfolio-cta,
.services-cta,
.proof-strip {
    text-align: center;
}

.marketing-panel > div:first-child .marketing-copy,
.ab-panel > .ab-story-copy,
.portfolio-cta p,
.services-cta p {
    margin-left: auto;
    margin-right: auto;
}

.ab-badges,
.portfolio-cta-actions,
.services-cta-actions {
    justify-content: center;
}

/* ============================================
   HOME PAGE
   ============================================ */
/* Homepage Specific Styles */
.btn-primary.home-btn {
    box-shadow: 0 15px 40px rgba(99,102,241,0.5), 0 0 20px rgba(236,72,153,0.3);
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 15px 40px rgba(99,102,241,0.5), 0 0 20px rgba(236,72,153,0.3); }
    50% { box-shadow: 0 15px 50px rgba(99,102,241,0.7), 0 0 30px rgba(236,72,153,0.5); }
}
.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
}
.theme-toggle:hover { background: var(--primary); color: white; }

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 2rem 80px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.05) 0%, transparent 40%);
}
#particles-js {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.hero-content > * {
    min-width: 0;
}
.hero-content > .igp-106 {
    grid-column: 1 / -1;
    min-width: 0;
}
.hero-content > div:first-child {
    text-align: center;
}
.hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    word-wrap: break-word;
}
.hero .hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}
.hero .hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.hero .gradient-text {
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.tech-ribbon-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    min-width: 0;
}
.tech-ribbon {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1rem 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 85%, transparent), color-mix(in srgb, var(--bg-secondary) 90%, transparent));
}
.tech-ribbon::before,
.tech-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 72px;
    z-index: 2;
    pointer-events: none;
}
.tech-ribbon::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.tech-ribbon::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}
.tech-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 1rem;
    animation: tech-scroll 34s linear infinite;
    will-change: transform;
}
.tech-ribbon:hover .tech-track { animation-play-state: paused; }
.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 95%, transparent);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
}
.tech-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 20px;
}
.tech-badge-fallback {
    display: none;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex: 0 0 20px;
    font-size: 0.85rem;
}
@keyframes tech-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hero-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 40px 100px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
}
.hero .code-block {
    font-family: monospace;
    font-size: 0.95rem;
    color: #e2e8f0;
    white-space: pre;
    line-height: 1.6;
    tab-size: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.hero .code-block::after { content: none; }
.hero .code-block .keyword { color: #c084fc; }
.hero .code-block .string { color: #4ade80; }
.hero .code-block .func { color: #60a5fa; }

/* Services - Horizontal Card Layout */
.home-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.service-card { background: linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 92%, var(--primary) 8%), var(--bg-card, var(--bg-secondary))); border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 20px; padding: 2px; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; height: 100%; }
.service-card::before { content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: linear-gradient(135deg, transparent, transparent); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; transition: background 0.4s; pointer-events: none; }
.service-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0.95; pointer-events: none; }
.service-card:hover::before { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 56px color-mix(in srgb, var(--primary) 24%, transparent); }
.service-card-inner { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.1rem; align-items: flex-start; height: 100%; }
.service-cover { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); background: var(--bg-secondary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 65%, transparent); }
.service-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-brand-badge { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--bg-secondary) 94%, #fff 6%); border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border)); display: inline-flex; align-items: center; justify-content: center; padding: 9px; box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent); }
.service-brand-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.service-brand-badge i { font-size: 1.1rem; color: var(--primary); }
.service-content { width: 100%; display: flex; flex-direction: column; flex: 1; }
.service-content h3 { font-family: 'Outfit', sans-serif; font-size: 1.02rem; font-weight: 700; margin-bottom: 0.4rem; line-height: 1.35; }
.service-content p { color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; margin-bottom: 0.7rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.8em; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.service-tags span { background: rgba(99,102,241,0.08); color: var(--primary); font-size: 0.7rem; padding: 3px 8px; border-radius: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.service-tags span i { font-size: 0.6rem; color: var(--success); }
.service-actions { margin-top: auto; padding-top: 0.78rem; display: flex; align-items: center; justify-content: space-between; }
.service-cta { display: inline-flex; gap: 0.35rem; align-items: center; color: var(--text); font-weight: 700; text-decoration: none; font-size: 0.78rem; }
.service-cta:hover { color: var(--primary); }
.service-arrow { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); font-size: 0.74rem; }
.home-services-swiper { max-width: 1280px; margin: 0 auto; padding: 0 0.2rem 2.2rem; }
.home-services-swiper .swiper-slide { height: auto; }
.home-services-swiper .service-card { height: 100%; }
.home-services-pagination .swiper-pagination-bullet { background: var(--text-muted); opacity: 0.35; }
.home-services-pagination .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }

/* Homepage Redesign Strip */
.solution-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.solution-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.solution-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 16px 40px rgba(99,102,241,0.12); }
.solution-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.solution-card p { color: var(--text-muted); font-size: .88rem; line-height: 1.55; }
.solution-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .8rem; color: #fff; }

.delivery-lane { max-width: 1200px; margin: 1.5rem auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.lane-step { border: 1px dashed var(--border); border-radius: 14px; padding: .9rem 1rem; background: var(--bg-card, var(--bg-secondary)); }
.lane-step strong { display: block; font-size: .82rem; color: var(--primary); margin-bottom: .25rem; }
.lane-step span { font-size: .84rem; color: var(--text-muted); }

/* Sale Popup */
.sale-popup-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.64); backdrop-filter: blur(4px); z-index: 1200; display: none; align-items: center; justify-content: center; padding: 1rem; }
.sale-popup-overlay.is-visible { display: flex; }
.sale-popup-card { width: min(560px, 95vw); border-radius: 20px; overflow: hidden; border: 1px solid rgba(99,102,241,0.35); background: var(--bg-card, #0b1220); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); }
.sale-popup-head { padding: 1.4rem 1.4rem .8rem; background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(236,72,153,0.2)); }
.sale-popup-body { padding: 1.1rem 1.4rem 1.4rem; }
.sale-popup-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1rem; }
.sale-popup-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; cursor: pointer; }

/* Stats Banner */
.stats-banner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0; background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(236,72,153,0.08)); border: 1px solid var(--border); border-radius: 24px; padding: 2.5rem 3rem; backdrop-filter: blur(12px); position: relative; z-index: 1; }
.stat-item { text-align: center; flex: 1; padding: 0 1.5rem; }
.stat-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; margin: 0 auto 0.75rem; }
.stat-value { font-family: 'Outfit', sans-serif; font-size: 2.5rem; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; }
.stat-label { color: var(--text-muted); margin-top: 0.25rem; font-size: 0.85rem; }
.stat-divider { width: 1px; height: 60px; background: var(--border); flex-shrink: 0; }

/* Card Legacy Styles */
.card-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.5rem; color: white; }

/* Portfolio */
.portfolio-item { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.portfolio-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.portfolio-item:hover .portfolio-img { transform: scale(1.1); }
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); opacity: 0; transition: opacity 0.4s; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay h3 { color: white; font-size: 1.4rem; }
.portfolio-overlay p { color: rgba(255,255,255,0.8); }

/* Testimonials Swiper */
.testimonial-swiper { padding-bottom: 50px; overflow: hidden; }
.tm-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; position: relative; height: 100%; transition: all 0.3s; }
.tm-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 16px 48px rgba(99,102,241,0.1); }
.tm-quote { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2rem; opacity: 0.1; color: var(--primary); }
.tm-stars { color: #f59e0b; margin-bottom: 1rem; font-size: 0.9rem; letter-spacing: 2px; }
.tm-text { color: var(--text-muted); font-style: italic; line-height: 1.7; margin-bottom: 1.5rem; font-size: 0.95rem; }
.tm-author { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.tm-avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.9rem; }
.tm-name { font-weight: 700; font-size: 0.95rem; }
.tm-role { color: var(--text-muted); font-size: 0.8rem; }
.tm-pagination .swiper-pagination-bullet { background: var(--text-muted); opacity: 0.4; }
.tm-pagination .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }

/* CTA Banner */
.cta-banner { background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899); border-radius: 24px; padding: 5rem 3rem; text-align: center; position: relative; overflow: hidden; margin: 0 2rem; }
.cta-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(255,255,255,0.03) 30px, rgba(255,255,255,0.03) 60px); }
.cta-content { position: relative; z-index: 1; }
.cta-content h2 { font-family: 'Outfit', sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 900; color: #fff; margin-bottom: 1rem; }
.cta-content p { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem; }

/* Contact Layout */
#contact { scroll-margin-top: 100px; }
.contact-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; }
.contact-info-side { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-card { display: flex; align-items: center; gap: 1rem; background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem 1.5rem; transition: all 0.3s; }
.contact-info-card:hover { border-color: var(--primary); transform: translateX(6px); box-shadow: 0 8px 24px rgba(99,102,241,0.1); }
.ci-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.ci-details h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 2px; }
.ci-details a, .ci-details span { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.ci-details a:hover { color: var(--primary); }
.contact-form-side { flex: 1; }
.contact-form-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; }
.contact-form-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text); }
.contact-form-card .marketing-field span { color: var(--text); font-weight: 600; font-size: 0.9rem; }
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea { color: var(--text); background: var(--bg); border: 1px solid var(--border); }
.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Footer Modern */
.footer-modern { background: var(--bg-secondary); position: relative; padding-top: 0; }
.footer-top-glow { height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f43f5e, #f59e0b); }
.footer-content { max-width: 1400px; margin: 0 auto; padding: 60px 2rem 30px; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.footer-brand p { color: var(--text-muted); max-width: 300px; margin-bottom: 1.5rem; }
.footer-modern .logo-image { width: auto; height: 66px; max-width: min(380px, 70vw); border-radius: 0; object-fit: contain; padding: 0; border: 0; background: transparent; }
.footer-modern .logo.has-brand-image .logo-text { display: none; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(99,102,241,0.1); color: var(--text-muted); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; font-size: 0.9rem; }
.footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.footer-links-col h4 { font-weight: 700; margin-bottom: 1.5rem; font-size: 0.95rem; }
.footer-links-col ul { list-style: none; padding: 0; margin: 0; }
.footer-links-col li { margin-bottom: 0.75rem; }
.footer-links-col a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; }
.footer-links-col a:hover { color: var(--primary); padding-left: 4px; }
.footer-bottom-bar { max-width: 1400px; margin: 0 auto; padding: 2rem; border-top: 1px solid var(--border); text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* Platform & Hosting Redesign (Option C) */
.platform-container { max-width: 1200px; margin: 0 auto; }
.platform-cta-wrap { margin-top: 2.5rem; }
.platform-cta-btn { font-size: 1.1rem; padding: 1rem 2.5rem; font-weight: 700; }
.grid-3d { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; perspective: 1500px; }
.tilt-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 20px; padding: 2rem 1.75rem 1.75rem; text-align: center; position: relative; transform-style: preserve-3d; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.tilt-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0; transition: opacity 0.3s; }
.tilt-card:hover::before { opacity: 1; }
.tilt-card:hover { border-color: var(--primary); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(99, 102, 241, 0.15); }
[data-theme="dark"] .tilt-card { box-shadow: 0 4px 24px rgba(0,0,0,0.25); }
[data-theme="dark"] .tilt-card:hover { box-shadow: 0 20px 50px rgba(99, 102, 241, 0.2); }
.icon-wrap { width: 64px; height: 64px; margin: 0 auto 1.25rem; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 18px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.6rem; transform: translateZ(50px); box-shadow: 0 10px 24px rgba(99, 102, 241, 0.25); flex-shrink: 0; }
.tilt-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; font-weight: 800; margin-bottom: 0.5rem; transform: translateZ(30px); }
.tilt-card p { color: var(--text-muted); font-size: 0.88rem; line-height: 1.6; margin: 0 0 1rem; transform: translateZ(20px); flex: 1; }
.card-stats { display: flex; justify-content: center; gap: 0.5rem; transform: translateZ(15px); flex-wrap: wrap; }
.stat-pill { background: rgba(99, 102, 241, 0.1); color: var(--primary); padding: 4px 12px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; border: 1px solid rgba(99, 102, 241, 0.2); }
@media (max-width: 1024px) { .grid-3d { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .tilt-card { padding: 1.75rem 1.5rem 1.5rem; } .tilt-card h3 { font-size: 1.1rem; } }
@media (max-width: 640px) { .grid-3d { grid-template-columns: 1fr; gap: 1rem; } .tilt-card { padding: 1.5rem 1.25rem 1.25rem; } }

/* Responsive */
@media (max-width: 1024px) {
    .hero { 
        min-height: auto;
        padding: 100px 1.5rem 60px;
    }
    .hero-content { 
        grid-template-columns: 1fr;
        text-align: center;
        max-width: 100%;
        gap: 2rem;
    }
    .hero-content > .igp-106 {
        grid-column: auto;
    }
    .hero-title { 
        font-size: clamp(1.8rem, 9.5vw, 2.9rem);
        margin-bottom: 1.25rem;
        line-height: 1.15;
    }
    .hero-subtitle { 
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem;
    }
    .hero-buttons {
        justify-content: center;
    }
    .hero-card { 
        max-width: 480px;
        margin: 0 auto;
        padding: 1.5rem;
    }
    .code-block { 
        white-space: pre-wrap;
        word-break: break-word;
        font-size: 0.8rem;
        text-align: left;
        line-height: 1.5;
    }
    .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solution-grid { grid-template-columns: 1fr 1fr; }
    .delivery-lane { grid-template-columns: 1fr 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: repeat(2, 1fr); }
    .stats-banner { flex-wrap: wrap; gap: 1rem; padding: 2rem 1.5rem; }
    .stat-divider { width: 100%; height: 1px; }
    .stat-item { flex: 0 0 calc(50% - 1rem); }
    .cta-banner { margin: 0 1rem; }
}
@media (max-width: 768px) {
    /* nav-menu show/hide handled by navbar.css transform */
    .home-services-grid { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
    .service-card-inner { flex-direction: column; text-align: center; gap: 1rem; }
    .service-brand-badge { margin: 0 auto; }
    .service-tags { justify-content: center; }
    .solution-grid, .delivery-lane { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: 1fr; text-align: center; }
    .footer-brand p { max-width: none; }
    .footer-social { justify-content: center; }
    .form-row { grid-template-columns: 1fr; }
    .cta-banner { padding: 3rem 1.5rem; margin: 0; border-radius: 0; }
}

/* AOS Fallback Animation */
[data-aos] {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-aos].aos-init {
    opacity: 0;
    transform: translateY(30px);
}
[data-aos].aos-animate, .aos-initialized [data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}
/* Ensure hero elements are ALWAYS visible — GSAP + AOS fight on mobile */
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-buttons,
.hero .hero-card {
    opacity: 1 !important;
    visibility: visible !important;
}
.hero [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}
/* Portfolio Carousel */
.portfolio-swiper { padding-bottom: 50px; overflow: hidden; }
.pf-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: all 0.3s; }
.pf-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,0.12); border-color: var(--primary); }
.pf-preview { position: relative; height: 200px; overflow: hidden; background: var(--bg-hover); }
.pf-chrome { height: 28px; display: flex; align-items: center; padding: 0 12px; gap: 6px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); position: relative; z-index: 2; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.pf-url { margin-left: 8px; font-size: 10px; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); padding: 2px 10px; border-radius: 4px; }
.pf-image-wrap { width: 100%; height: calc(100% - 28px); position: relative; background: #fff; }
.pf-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.pf-card:hover .pf-image { transform: scale(1.04); }
.pf-image-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; color: var(--text-muted); background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.08)); font-size: 0.8rem; text-align: center; padding: 0.5rem; }
.pf-image-fallback i { font-size: 1.2rem; color: var(--primary); }
.pf-hover-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(0px); opacity: 0; transition: all 0.3s; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pf-card:hover .pf-hover-overlay { opacity: 1; backdrop-filter: blur(4px); }
.pf-action-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; transform: scale(0.8); }
.pf-card:hover .pf-action-btn { transform: scale(1); }
.pf-action-btn:hover { transform: scale(1.1) !important; }
.pf-action-secondary { background: rgba(255,255,255,0.9); color: var(--text); }
.pf-info { padding: 16px; }
.pf-industry { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); font-weight: 700; display: block; margin-bottom: 4px; }
.pf-info h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.pf-info h3 a { color: var(--text); text-decoration: none; transition: color 0.2s; }
.pf-info h3 a:hover { color: var(--primary); }
.portfolio-pagination .swiper-pagination-bullet { background: var(--text-muted); opacity: 0.55; width: 10px; height: 10px; }
.portfolio-pagination .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }

.contact-info-side iframe { width: 100% !important; border: 0; min-height: 200px; display: block; }


/* ============================================
   ABOUT PAGE
   ============================================ */
    :root {
--primary: #6366f1;
--accent: #ec4899;
--about-surface: var(--bg-secondary);
--about-glass: rgba(15, 23, 42, 0.04);
--about-glass-strong: rgba(15, 23, 42, 0.08);
--about-glass-border: var(--border);
--about-overlay: rgba(248, 250, 252, 0.9);
--about-image-grad-start: #e2e8f0;
--about-image-grad-end: #f8fafc;
--glow: 0 0 24px rgba(99, 102, 241, 0.18);
    }

    [data-theme="dark"] {
--about-surface: #0f172a;
--about-glass: rgba(255, 255, 255, 0.03);
--about-glass-strong: rgba(255, 255, 255, 0.07);
--about-glass-border: rgba(255, 255, 255, 0.08);
--about-overlay: rgba(15, 23, 42, 0.82);
--about-image-grad-start: #1e293b;
--about-image-grad-end: #0f172a;
--glow: 0 0 30px rgba(99, 102, 241, 0.3);
    }

    [data-theme="light"] {
--about-surface: var(--bg-secondary);
--about-glass: rgba(15, 23, 42, 0.02);
--about-glass-strong: rgba(15, 23, 42, 0.05);
--about-glass-border: var(--border);
--about-overlay: rgba(248, 250, 252, 0.9);
--about-image-grad-start: #e2e8f0;
--about-image-grad-end: #f8fafc;
--glow: 0 0 24px rgba(99, 102, 241, 0.18);
    }

    /* Hero Section */
    .about-hero {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 140px 0 100px;
background: var(--about-surface);
overflow: hidden;
    }

    #particles-js {
position: absolute;
inset: 0;
z-index: 1;
    }

    .hero-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
filter: blur(80px);
z-index: 0;
pointer-events: none;
    }

    .about-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
text-align: center;
    }

    .about-hero h1 {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 5vw, 3.8rem);
font-weight: 900;
margin-bottom: 1.5rem;
line-height: 1.1;
word-wrap: break-word;
    }

    .gradient-text {
background: linear-gradient(135deg, var(--text) 0%, var(--primary) 50%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
    }

    .about-hero p {
font-size: 1.25rem;
color: var(--text-muted);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
    }

    /* Shared Section Headers */
    .section-header {
text-align: center;
margin-bottom: 50px;
    }

    .section-label {
color: var(--primary);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.82rem;
margin-bottom: 0.9rem;
display: block;
    }

    .section-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
    }

    .section-subtitle {
color: var(--text-muted);
max-width: 700px;
margin: 1rem auto 0;
line-height: 1.7;
    }

    /* Main surface below hero */
    .ab-shell {
background:
    radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.08), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.07), transparent 45%),
    var(--about-surface);
    }

    /* Impact stats */
    .ab-impact {
padding: 90px 0 35px;
    }

    .ab-impact-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
    }

    .ab-impact-card {
position: relative;
background: linear-gradient(165deg, var(--about-glass), transparent);
border: 1px solid var(--about-glass-border);
border-radius: 22px;
padding: 26px 22px;
overflow: hidden;
backdrop-filter: blur(10px);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .ab-impact-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(120deg, var(--ab-accent, var(--primary)), transparent 55%);
opacity: 0.12;
pointer-events: none;
    }

.ab-impact-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--ab-accent, var(--primary)) 55%, white 45%);
    box-shadow: var(--glow);
}

.ab-impact-card--primary { --ab-accent: #6366f1; }
.ab-impact-card--sky { --ab-accent: #0ea5e9; }
.ab-impact-card--accent { --ab-accent: #ec4899; }
.ab-impact-card--success { --ab-accent: #22c55e; }

    .ab-impact-icon {
width: 44px;
height: 44px;
border-radius: 14px;
background: color-mix(in srgb, var(--ab-accent, var(--primary)) 18%, transparent);
color: var(--ab-accent, var(--primary));
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.9rem;
font-size: 1rem;
    }

    .ab-impact-number {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
line-height: 1;
margin-bottom: 0.45rem;
color: var(--text);
    }

    .ab-impact-label {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 0.35rem;
color: var(--text);
    }

    .ab-impact-text {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
    }

    /* Story + timeline */
    .ab-story {
padding: 35px 0 95px;
    }

    .ab-story-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 1.2rem;
    }

    .ab-panel {
background: var(--about-glass);
border: 1px solid var(--about-glass-border);
border-radius: 24px;
padding: 2rem;
backdrop-filter: blur(10px);
    }

    .ab-story-title {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: clamp(1.5rem, 3vw, 2rem);
margin: 0 0 1rem;
    }

    .ab-story-copy {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 1.2rem;
    }

    .ab-badges {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
    }

    .ab-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--about-glass-border);
font-size: 0.8rem;
color: var(--text-muted);
background: color-mix(in srgb, var(--primary) 7%, transparent);
    }

    .ab-timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.95rem;
    }

    .ab-timeline-item {
position: relative;
padding-left: 1.2rem;
    }

    .ab-timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0.45rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--accent));
box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent);
    }

    .ab-timeline-year {
font-family: 'Outfit', sans-serif;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 0.2rem;
    }

    .ab-timeline-title {
font-weight: 700;
margin-bottom: 0.22rem;
    }

    .ab-timeline-desc {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
    }

    /* Principles */
    .ab-principles {
padding: 0 0 95px;
    }

    .ab-principle-card {
height: 100%;
background: var(--about-glass);
border: 1px solid var(--about-glass-border);
border-radius: 20px;
padding: 1.8rem;
transition: transform 0.25s ease, border-color 0.25s ease;
    }

    .ab-principle-card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--primary) 50%, white 50%);
    }

    .ab-principle-icon {
width: 54px;
height: 54px;
border-radius: 16px;
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: #fff;
background: linear-gradient(135deg, var(--primary), var(--accent));
    }

    .ab-principle-card h3 {
font-family: 'Outfit', sans-serif;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.75rem;
    }

    .ab-principle-card p {
color: var(--text-muted);
margin: 0;
line-height: 1.7;
    }

    /* CTA */
    .about-cta {
padding: 0 0 110px;
    }

    .ab-cta-box {
position: relative;
overflow: hidden;
border-radius: 34px;
border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--about-glass-border));
padding: 70px 32px;
text-align: center;
background: linear-gradient(150deg, rgba(99, 102, 241, 0.18), rgba(236, 72, 153, 0.12), rgba(15, 23, 42, 0.1));
    }

    .ab-cta-box::before {
content: '';
position: absolute;
inset: -25% -20%;
background: radial-gradient(circle at top right, rgba(236, 72, 153, 0.35), transparent 35%),
            radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.35), transparent 38%);
pointer-events: none;
    }

    .ab-cta-content {
position: relative;
z-index: 1;
    }

    .ab-cta-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
margin-bottom: 0.9rem;
    }

    .ab-cta-copy {
color: var(--text-muted);
max-width: 660px;
margin: 0 auto 1.8rem;
line-height: 1.8;
    }

    .ab-cta-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
    }

    .btn-gradient {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff !important;
padding: 14px 30px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
transition: transform 0.25s ease, box-shadow 0.25s ease;
border: none;
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
    }

    .btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(99, 102, 241, 0.5);
    }

    .btn-soft {
padding: 14px 28px;
border-radius: 999px;
border: 1px solid var(--about-glass-border);
color: var(--text);
background: color-mix(in srgb, var(--about-glass) 80%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
text-decoration: none;
font-weight: 700;
    }

    .btn-soft:hover {
border-color: var(--primary);
color: var(--primary);
    }

    @media (max-width: 1100px) {
.ab-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ab-story-grid {
    grid-template-columns: 1fr;
}
    }

    @media (max-width: 768px) {
.ab-impact {
    padding-top: 70px;
}

.ab-impact-grid {
    grid-template-columns: 1fr;
}

.ab-panel {
    padding: 1.4rem;
}

.ab-cta-box {
    padding: 52px 20px;
    border-radius: 24px;
}
.btn-gradient, .btn-soft {
    width: 100%;
    max-width: 320px;
    margin: 0.25rem 0;
}
    }


/* ============================================
   SERVICES PAGE
   ============================================ */
.services-hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 130px 0 95px;
    overflow: hidden;
    background: radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 42%),
                radial-gradient(circle at 84% 16%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
                var(--bg-secondary);
}
#services-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.services-hero-glow {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: min(74vw, 760px);
    height: min(74vw, 760px);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.1) 28%, transparent 68%);
    filter: blur(70px);
}
.services-hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.services-hero-label {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
}
.services-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    word-wrap: break-word;
}
.services-hero-gradient {
    background: linear-gradient(135deg, var(--text) 5%, var(--primary) 55%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.services-hero p {
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 680px;
    margin: 0 auto 1.8rem;
    line-height: 1.7;
}
.services-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.services-showcase {
    padding-top: 90px;
}
.services-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.5rem;
}
.services-header .section-label {
    display: inline-block;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}
.services-header .section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.9rem;
}
.services-header .section-subtitle {
    color: var(--text-muted);
    line-height: 1.7;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.service-card {
    border-radius: 22px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 10%, var(--bg-card)) 0%, var(--bg-card) 50%);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.2rem 0;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.service-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--service-accent) 55%, #fff 45%);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--service-accent) 22%, transparent);
}
.service-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0;
}
.service-brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--service-accent) 24%, var(--border));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--service-accent) 18%, transparent);
}
.service-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.service-brand-logo i {
    font-size: 1.35rem;
    color: var(--service-accent);
}
.service-index {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.service-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    line-height: 1.3;
    padding: 0;
}
.service-description {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
    padding: 0;
}
.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.45rem;
}
.service-features li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.service-features i {
    color: var(--success);
    font-size: 0.8rem;
}
.service-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.9rem 0 1.2rem;
    border-top: 1px dashed var(--border);
    transition: color 0.2s ease;
}
.service-link:hover {
    color: var(--primary);
}

.services-process {
    padding-top: 90px;
}
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.process-step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.4rem;
    position: relative;
}
.process-num {
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}
.process-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}
.process-step h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
}
.process-step p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

.services-proof {
    padding-top: 45px;
}
.proof-strip {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1.6rem;
    background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.proof-item {
    text-align: center;
    flex: 1;
    padding: 0 1rem;
}
.proof-item strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    font-weight: 900;
    line-height: 1.1;
}
.proof-item span {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.proof-divider {
    width: 1px;
    height: 52px;
    background: var(--border);
    flex-shrink: 0;
}

.services-cta-wrap {
    padding-top: 55px;
}
.services-cta {
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 3.1rem 1.4rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
}
.services-cta h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 900;
    margin-bottom: 0.8rem;
}
.services-cta p {
    color: var(--text-muted);
    margin: 0 auto 1.5rem;
    max-width: 680px;
}
.services-cta-actions {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .services-hero {
        min-height: auto;
        padding: 100px 1rem 60px;
    }
    .services-hero h1 {
        font-size: clamp(2rem, 10vw, 2.6rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 0.75rem !important;
    }
    .services-header {
        text-align: center;
        margin-bottom: 2rem !important;
    }
    .services-header .section-label {
        margin-bottom: 0.5rem !important;
    }
    .services-header .section-title {
        font-size: clamp(1.6rem, 8vw, 2.1rem) !important;
        line-height: 1.2 !important;
    }
    .services-hero-actions {
        gap: 0.6rem;
    }
    .services-hero-actions .btn {
        width: 100%;
        max-width: 320px;
        margin: 0.25rem 0;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .process-grid {
        grid-template-columns: 1fr;
    }
    .proof-strip {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .proof-divider {
        width: 100%;
        height: 1px;
    }
    .proof-item {
        flex: 0 0 100%;
    }
}
@media (max-width: 1100px) and (min-width: 769px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================
   SERVICE V3 PAGE
   ============================================ */
/* ===== HERO (identical to services.php) ===== */
        .services-hero {
            min-height: 78vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 130px 0 95px;
            overflow: hidden;
            background: radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 42%),
                        radial-gradient(circle at 84% 16%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
                        var(--bg-secondary);
        }
        #service-particles {
            position: absolute;
            inset: 0;
            z-index: 1;
        }
        .services-hero-glow {
            position: absolute;
            left: 50%;
            top: 46%;
            transform: translate(-50%, -50%);
            width: min(74vw, 760px);
            height: min(74vw, 760px);
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.1) 28%, transparent 68%);
            filter: blur(70px);
        }
        .services-hero-content {
            position: relative;
            z-index: 2;
            max-width: 860px;
            margin: 0 auto;
            text-align: center;
        }
        .svc-breadcrumb {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 1.2rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-muted);
        }
        .svc-breadcrumb a { color: var(--primary); text-decoration: none; }
        .svc-breadcrumb i { font-size: 0.65rem; opacity: 0.5; }
        .services-hero-label {
            display: inline-block;
            margin-bottom: 1rem;
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--primary);
        }
        .services-hero h1 {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(2.2rem, 9vw, 4.7rem);
            font-weight: 900;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin: 0 0 1.5rem;
            word-wrap: break-word;
        }
        .services-hero p {
            color: var(--text-muted);
            font-size: clamp(1rem, 2vw, 1.2rem);
            max-width: 680px;
            margin: 0 auto 1.8rem;
            line-height: 1.7;
        }
        .services-hero-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.8rem;
        }

        /* ═══════════════  DETAIL LAYOUT  ═══════════════ */
        .svc-detail-section { padding-top: 90px; }
        .svc-detail-grid {
            display: grid;
            grid-template-columns: 1fr 360px;
            gap: 1.5rem;
            align-items: start;
        }

        /* Overview card */
        .svc-overview-card {
            border-radius: 22px;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 10%, var(--bg-card)) 0%, var(--bg-card) 50%);
            padding: 2rem;
        }
        .svc-overview-head {
            display: flex;
            gap: 1.2rem;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        .svc-overview-head .section-label { margin-bottom: 0.3rem; }
        .svc-overview-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
        .service-brand-logo {
            width: 58px;
            height: 58px;
            border-radius: 16px;
            background: #ffffff;
            border: 1px solid color-mix(in srgb, var(--service-accent, var(--primary)) 24%, var(--border));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            flex-shrink: 0;
            box-shadow: 0 10px 26px color-mix(in srgb, var(--service-accent, var(--primary)) 18%, transparent);
        }
        .service-brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .service-brand-logo i { font-size: 1.35rem; color: var(--service-accent, var(--primary)); }

        .svc-hero-img-wrap {
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 1.5rem;
            border: 1px solid var(--border);
        }
        .svc-hero-img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            display: block;
        }
        .svc-overview-text {
            color: var(--text-muted);
            line-height: 1.8;
            font-size: 1.05rem;
            margin: 0;
        }

        /* Process cards (same style as services.php process-step) */
        .svc-sections-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .svc-process-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 1.4rem;
            position: relative;
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .svc-process-card:hover {
            transform: translateY(-6px);
            border-color: color-mix(in srgb, var(--service-accent) 55%, #fff 45%);
            box-shadow: 0 18px 34px color-mix(in srgb, var(--service-accent) 22%, transparent);
        }
        .svc-process-card .process-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--service-accent) 16%, transparent);
            color: var(--service-accent);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.8rem;
        }
        .svc-process-card h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 0.55rem;
        }
        .svc-process-card p {
            color: var(--text-muted);
            font-size: 0.92rem;
            line-height: 1.65;
            margin: 0;
        }

        /* ═══════════════  SIDEBAR  ═══════════════ */
        .svc-sidebar-sticky { position: sticky; top: 100px; display: grid; gap: 1rem; }

        .svc-features-card {
            border-radius: 22px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            padding: 1.5rem;
        }
        .svc-features-card h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.2rem;
            font-weight: 800;
            margin-bottom: 1.2rem;
        }
        .svc-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
        .svc-checklist li {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.95rem;
            font-weight: 500;
        }
        .svc-check-icon {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--service-accent) 16%, transparent);
            color: var(--service-accent);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        .svc-cta-card {
            border-radius: 22px;
            border: 1px solid var(--border);
            background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--accent, #ec4899) 6%, transparent));
            padding: 1.5rem;
            text-align: center;
        }
        .svc-cta-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; margin-bottom: 0.6rem; }
        .svc-cta-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.2rem; line-height: 1.6; }
        .svc-cta-btn { width: 100%; justify-content: center; }

        /* ═══════════════  RELATED  (reuses service-card from services.php) ═══════════════ */
        .svc-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .services-header { text-align: center; max-width: 820px; margin: 0 auto 2.5rem; }
        .services-header .section-label { display: inline-block; color: var(--primary); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.8rem; }
        .services-header .section-title { font-family: 'Outfit', sans-serif; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; line-height: 1.2; margin-bottom: 0.9rem; }
        .services-header .section-subtitle { color: var(--text-muted); line-height: 1.7; }
        .service-card {
            border-radius: 22px;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 10%, var(--bg-card)) 0%, var(--bg-card) 50%);
            min-height: 100%;
            display: flex;
            flex-direction: column;
            padding: 1.2rem 1.2rem 0;
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
            overflow: hidden;
        }
        .service-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--service-accent) 55%, #fff 45%); box-shadow: 0 18px 34px color-mix(in srgb, var(--service-accent) 22%, transparent); }
        .service-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
        .service-index { color: var(--text-muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; }
        .service-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.35rem; font-weight: 800; margin-bottom: 0.65rem; line-height: 1.3; }
        .service-description { color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; }
        .service-link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.9rem; padding: 0.9rem 0 1.2rem; border-top: 1px dashed var(--border); transition: color 0.2s ease; }
        .service-link:hover { color: var(--primary); }

        /* ═══════════════  CTA  (same as services.php) ═══════════════ */
        .services-cta-wrap { padding-top: 55px; }
        .services-cta { text-align: center; border: 1px solid var(--border); border-radius: 26px; padding: 3.1rem 1.4rem; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent, #ec4899) 10%, transparent)); }
        .services-cta h2 { font-family: 'Outfit', sans-serif; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; margin-bottom: 0.8rem; }
        .services-cta p { color: var(--text-muted); margin: 0 auto 1.5rem; max-width: 680px; }
        .services-cta-actions { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }

        /* ═══════════════  RESPONSIVE  ═══════════════ */
        @media (max-width: 1100px) {
            .svc-detail-grid { grid-template-columns: 1fr; }
            .svc-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 768px) {
            .services-hero { min-height: auto; padding: 100px 1rem 60px; }
            .services-hero h1 { font-size: clamp(2rem, 10vw, 2.6rem) !important; line-height: 1.1 !important; margin-bottom: 0.75rem !important; }
            .services-hero-actions .btn { width: 100%; max-width: 320px; margin: 0.25rem 0; }
            .svc-detail-grid { grid-template-columns: 1fr; }
            .svc-sections-grid { grid-template-columns: 1fr; }
            .svc-related-grid { grid-template-columns: 1fr; }
            .svc-hero-img { height: 200px; }
        }


/* ============================================
   CONTACT PAGE
   ============================================ */
.about-hero {
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 0 100px;
    background: var(--bg-secondary);
}
#particles-js {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
}
.section-label {
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.82rem;
    margin-bottom: 0.9rem;
    display: inline-flex;
    justify-content: center;
}
.about-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.2rem, 9vw, 5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    word-wrap: break-word;
}
.gradient-text {
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-flex;
}
.about-hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}
.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: 2rem;
    align-items: start;
}
.contact-panel {
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 2rem;
}
.panel-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.65rem;
    margin-bottom: 0.35rem;
}
.panel-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.contact-alert {
    display: flex;
    gap: 0.75rem;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
}
.contact-alert p {
    margin: 0;
    line-height: 1.45;
}
.contact-alert-error {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444;
}
.contact-alert-success {
    border-color: #10b981;
    background: color-mix(in srgb, #10b981 12%, transparent);
    color: #10b981;
}
.contact-form-grid .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.contact-form-grid textarea.form-control {
    min-height: 150px;
    resize: vertical;
}
.consent-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.85rem 0 1.2rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.consent-wrap input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}
.consent-wrap a {
    color: var(--primary);
    text-decoration: none;
}
.consent-wrap a:hover {
    text-decoration: underline;
}
.contact-submit-btn {
    width: 100%;
    justify-content: center;
}
.contact-side-stack {
    display: grid;
    gap: 1rem;
}
.side-card {
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 1.35rem;
}
.side-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.9rem;
}
.contact-points {
    display: grid;
    gap: 0.85rem;
}
.contact-point {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.point-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 17%, transparent);
    color: var(--primary);
    flex-shrink: 0;
}
.contact-point strong {
    display: block;
    margin-bottom: 0.18rem;
}
.contact-point a,
.contact-point span {
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.4;
}
.contact-point a:hover {
    color: var(--primary);
}
.muted-text {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.9rem;
}
.quick-links {
    display: grid;
    gap: 0.65rem;
}
.quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--text);
    font-size: 0.92rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}
.quick-links a:hover {
    border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
    color: var(--primary);
}
.map-card {
    padding: 0;
    overflow: hidden;
}
.map-card iframe {
    width: 100% !important;
    min-height: 240px;
    border: 0;
    display: block;
}

@media (max-width: 1024px) {
    .about-hero {
        min-height: auto;
        padding: 100px 1rem 60px;
        display: block;
    }
    .about-hero-content {
        max-width: 100%;
        width: 100%;
    }
    .contact-main-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .contact-panel {
        padding: 1.25rem;
    }
    .contact-form-grid .form-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   PRICING PAGE
   ============================================ */
:root {
    --primary: #6366f1;
    --primary-glow: rgba(99, 102, 241, 0.5);
    --accent: #a855f7;
    --accent-glow: rgba(168, 85, 247, 0.5);
    --success: #10b981;
    --card-radius: 32px;
    --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Theme Aware Tokens --- */
[data-theme="dark"] {
    --bg-deep: #030712;
    --bg-surface: #0b0f1a;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --glow-opacity: 0.15;
    --card-hover-bg: rgba(99, 102, 241, 0.05);
    --modal-backdrop: rgba(3, 7, 18, 0.85);
}

[data-theme="light"] {
    --bg-deep: #f8fafc;
    --bg-surface: #ffffff;
    --glass-bg: rgba(99, 102, 241, 0.04);
    --glass-border: rgba(99, 102, 241, 0.1);
    --text-main: #0f172a;
    --text-muted: #475569;
    --glow-opacity: 0.25;
    --card-hover-bg: rgba(99, 102, 241, 0.06);
    --modal-backdrop: rgba(255, 255, 255, 0.8);
}

body.pricing-enhanced {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* --- Global Glows --- */
.glow-sphere {
    position: absolute; width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    filter: blur(80px); opacity: var(--glow-opacity); z-index: -1; pointer-events: none;
    transition: opacity 0.4s ease;
}

/* --- Hero Section --- */
.pricing-hero {
    position: relative; padding: 180px 0 100px; text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
}
.pricing-decor {
    position: fixed;
    inset: 0;
    overflow: clip;
    pointer-events: none;
    z-index: -1;
}
#pricing-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6; }

.hero-label {
    display: inline-block; padding: 10px 22px; border-radius: 99px;
    background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--primary); font-weight: 800; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 3px; margin-bottom: 2.5rem;
}

.pricing-hero h1 {
    font-family: 'Outfit', sans-serif; font-size: clamp(2.5rem, 6vw, 4.2rem);
    font-weight: 900; line-height: 1.15; margin-bottom: 2rem; letter-spacing: -0.03em;
}

[data-theme="dark"] .hero-gradient {
    background: linear-gradient(135deg, #fff 30%, var(--primary) 70%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

[data-theme="light"] .hero-gradient {
    background: linear-gradient(135deg, #0f172a 30%, var(--primary) 70%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem; color: var(--text-muted); max-width: 700px; margin: 0 auto;
    font-weight: 400;
}

/* --- Country Switcher --- */
.pricing-controls { margin-bottom: 60px; position: relative; z-index: 10; }
.country-selector {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    padding: 8px 24px; border-radius: 99px; backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.country-selector span { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }
.btn-country {
    background: none; border: none; color: var(--text-main); font-weight: 800;
    cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;
}
.btn-country:hover { color: var(--primary); }

/* --- Pricing Matrix --- */
.pricing-matrix {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem; perspective: 1000px; align-items: stretch;
}

.price-card {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--card-radius); padding: 50px 40px;
    display: flex; flex-direction: column; position: relative;
    transition: var(--transition); backdrop-filter: blur(20px);
    overflow: visible; height: 100%;
}

[data-theme="light"] .price-card {
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.05);
}

.price-card:hover {
    transform: translateY(-15px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.2);
}
[data-theme="dark"] .price-card:hover { box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4); }

.price-card.is-popular {
    background: var(--card-hover-bg);
    border-color: var(--primary);
    box-shadow: 0 0 50px -10px var(--primary-glow);
}

.popular-badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white; padding: 8px 24px; border-radius: 99px;
    font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.35);
}

.card-header { margin-bottom: 2rem; }
.plan-name { font-size: 1.85rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -0.01em; color: var(--text-main); }

.price-block { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 1rem; }
.currency { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary); }
.amount { font-family: 'Outfit', sans-serif; font-size: 4.5rem; font-weight: 900; line-height: 0.8; color: var(--text-main); }
.period { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 0.6rem; font-weight: 700; }

.plan-desc { font-size: 1rem; color: var(--text-muted); min-height: 3rem; margin-bottom: 2.5rem; }

.feature-list { list-style: none; padding: 0; margin: 0 0 3.5rem; display: grid; gap: 1.25rem; }
.feature-item { display: flex; align-items: flex-start; gap: 14px; font-size: 1rem; color: var(--text-muted); }
.feature-item i { color: var(--success); font-size: 1.1rem; margin-top: 4px; }

.card-footer { margin-top: auto; }
.btn-plan {
    display: block; width: 100%; padding: 20px; border-radius: 20px;
    font-weight: 800; font-size: 1rem; text-align: center;
    text-decoration: none; transition: var(--transition);
    border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-main);
}
.btn-plan:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 15px 30px -5px var(--primary-glow); }
.btn-plan.primary { background: var(--primary); color: white; border: none; box-shadow: 0 20px 40px -10px var(--primary-glow); }
.btn-plan.primary:hover { background: #4f46e5; box-shadow: 0 25px 50px -10px var(--primary-glow); }

/* --- Category Tabs --- */
.category-tabs {
    display: flex; justify-content: center; gap: 10px; margin-bottom: 50px;
    flex-wrap: wrap; position: relative; z-index: 10;
}
.btn-tab {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    padding: 12px 28px; border-radius: 99px; color: var(--text-muted);
    font-weight: 700; cursor: pointer; transition: var(--transition);
    font-size: 0.95rem; backdrop-filter: blur(10px);
}
.btn-tab:hover { border-color: var(--primary); color: var(--text-main); }
.btn-tab.is-active {
    background: var(--primary); color: white; border-color: var(--primary);
    box-shadow: 0 10px 20px -5px var(--primary-glow);
}

.price-card.is-hidden { display: none; }


/* --- CTA Section --- */
.pricing-cta { padding: 140px 0; background: var(--bg-surface); position: relative; overflow: hidden; }
.cta-card {
    background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent), var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: 56px; padding: 100px 40px; text-align: center;
    backdrop-filter: blur(24px);
}
.cta-card h2 { font-family: 'Outfit', sans-serif; font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 900; margin-bottom: 2rem; color: var(--text-main); }
.cta-card p { font-size: 1.3rem; color: var(--text-muted); max-width: 650px; margin: 0 auto 3.5rem; }

/* --- Modal --- */
.modal {
    position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--modal-backdrop); backdrop-filter: blur(16px);
}
.modal.is-open { opacity: 1; pointer-events: all; }
.modal-box {
    width: 460px; background: var(--bg-surface); border: 1px solid var(--glass-border);
    border-radius: 40px; padding: 45px; transform: scale(0.9); transition: 0.4s ease;
    box-shadow: 0 40px 100px rgba(0,0,0,0.2);
}
.modal.is-open .modal-box { transform: scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.modal-header h3 { font-size: 1.75rem; font-weight: 800; color: var(--text-main); }
.btn-close { background: none; border: none; font-size: 2.5rem; color: var(--text-muted); cursor: pointer; line-height: 1; }

.region-grid { display: grid; gap: 14px; }
.region-item {
    display: flex; align-items: center; gap: 18px; padding: 18px 24px;
    border: 1px solid var(--glass-border); border-radius: 20px;
    text-decoration: none; color: var(--text-main); transition: 0.2s; font-weight: 700;
}
.region-item:hover { background: rgba(0, 0, 0, 0.04); border-color: var(--primary); transform: translateX(5px); }
[data-theme="dark"] .region-item:hover { background: rgba(255, 255, 255, 0.05); }
.region-item.is-active { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.flag-code { font-weight: 800; color: var(--primary); font-size: 0.85rem; background: rgba(99, 102, 241, 0.15); padding: 5px 10px; border-radius: 8px; }

@media (max-width: 768px) {
    .pricing-hero { padding: 150px 0 80px; }
    .pricing-matrix { grid-template-columns: 1fr; gap: 2rem; }
    .cta-card { padding: 70px 24px; }
    .modal-box { width: 90%; padding: 30px; }
}


/* ============================================
   PORTFOLIO PAGE
   ============================================ */
.portfolio-page {
    background:
        radial-gradient(circle at 15% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 38%),
        radial-gradient(circle at 85% 8%, rgba(236, 72, 153, 0.1) 0%, transparent 40%),
        var(--bg);
}

.portfolio-hero {
    position: relative;
    overflow: hidden;
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 145px 0 95px;
    text-align: center;
    isolation: isolate;
}

#portfolio-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.portfolio-hero-glow {
    position: absolute;
    width: min(72vw, 760px);
    height: min(72vw, 760px);
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(236, 72, 153, 0.14) 35%, transparent 70%);
    filter: blur(72px);
}

.portfolio-hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 0.75rem;
}

.portfolio-kicker {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 0.9rem;
}

.portfolio-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1rem;
    word-wrap: break-word;
}

.portfolio-hero-gradient {
    background: linear-gradient(135deg, var(--text) 5%, var(--primary) 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portfolio-hero p {
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 1.6rem;
    line-height: 1.75;
    font-size: clamp(1rem, 2vw, 1.18rem);
    text-wrap: pretty;
}

.portfolio-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.portfolio-main {
    padding: 20px 0 100px;
}

.portfolio-toolbar {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    padding: 1rem;
    display: grid;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.portfolio-filter {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.52rem 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portfolio-filter:hover,
.portfolio-filter.active {
    color: #fff;
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.portfolio-metrics {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.portfolio-metric {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.portfolio-empty {
    grid-column: 1 / -1;
    border: 1px dashed var(--border);
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
}

.portfolio-empty-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.25rem;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
    color: var(--primary);
    font-size: 1.8rem;
}

.portfolio-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.portfolio-card.hidden {
    display: none;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--primary) 50%, #fff 50%);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);
}

.portfolio-media {
    position: relative;
    aspect-ratio: 16/11;
    background: linear-gradient(135deg, var(--bg-hover), var(--bg-card));
    overflow: hidden;
}

.portfolio-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.portfolio-card:hover .portfolio-media img {
    transform: scale(1.05);
}

.portfolio-browser {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    z-index: 2;
}

.portfolio-browser span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.portfolio-body {
    padding: 1rem;
}

.portfolio-category {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.portfolio-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.14rem;
    line-height: 1.35;
    margin: 0 0 0.52rem;
}

.portfolio-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 0.95rem;
}

.portfolio-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.portfolio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.portfolio-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.portfolio-btn.primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border-color: transparent;
}

.portfolio-btn.primary:hover {
    color: #fff;
    filter: brightness(1.04);
}

.portfolio-cta {
    margin-top: 2.2rem;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 13%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
    padding: 2.8rem 1.5rem;
    text-align: center;
}

.portfolio-cta h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    margin-bottom: 0.7rem;
}

.portfolio-cta p {
    color: var(--text-muted);
    max-width: 680px;
    margin: 0 auto 1.3rem;
    line-height: 1.75;
}

.portfolio-cta-actions {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .portfolio-hero {
        min-height: 68vh;
        padding: 120px 0 72px;
    }

    .portfolio-hero-content {
        max-width: 100%;
        padding: 0 0.35rem;
    }

    .portfolio-hero h1 {
        line-height: 1.12;
        margin-bottom: 0.85rem;
    }

    .portfolio-hero p {
        margin-bottom: 1.25rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-hero-actions .btn,
    .portfolio-cta-actions .btn,
    .portfolio-cta-actions .portfolio-btn {
        width: 100%;
        max-width: 320px;
        margin: 0.25rem 0;
    }
}


/* ============================================
   FAQ PAGE
   ============================================ */
/* FAQ Page */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.faq-item.active { border-color: var(--primary); }
.faq-question {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s;
}
.faq-question:hover { color: var(--primary); }
.faq-question i { transition: transform 0.3s; color: var(--primary); }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
}
.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem;
}
.faq-answer p { color: var(--text-muted); line-height: 1.8; }

@media (max-width: 768px) {
    .faq-question {
        padding: 1.25rem;
        font-size: 1rem;
        gap: 0.75rem;
    }
    .faq-item.active .faq-answer {
        padding: 0 1.25rem 1.25rem;
    }
}


/* ============================================
   SUPPORT PAGE
   ============================================ */
/* Support Page */
.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .support-form {
        padding: 1.5rem;
    }
}


/* ============================================
   CAREERS PAGE
   ============================================ */
.careers-hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 132px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 82% 16%, rgba(236, 72, 153, 0.10) 0%, transparent 40%),
        var(--bg-secondary);
}

#careers-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.careers-hero-glow {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: min(74vw, 760px);
    height: min(74vw, 760px);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(236, 72, 153, 0.12) 30%, transparent 68%);
    filter: blur(72px);
}

.careers-hero-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.careers-hero-label,
.careers-header .section-label,
.careers-filter-label,
.careers-selected-label {
    display: inline-block;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.careers-hero h1,
.careers-panel .section-title,
.careers-header .section-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.careers-hero h1 {
    font-size: clamp(2.4rem, 9vw, 4.9rem);
    margin: 0 0 1.4rem;
}

.careers-hero-gradient {
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.careers-hero p,
.section-subtitle,
.section-copy,
.careers-card-copy,
.careers-process-list p,
.careers-guidance li {
    color: var(--text-muted);
    line-height: 1.7;
}

.careers-hero p {
    max-width: 700px;
    margin: 0 auto 1.8rem;
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.careers-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.careers-shell {
    background:
        radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.06), transparent 38%),
        radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.06), transparent 42%),
        var(--bg-secondary);
}

.careers-intro,
.careers-openings,
.careers-application {
    padding: 88px 0 0;
}

.careers-application {
    padding-bottom: 96px;
}

.careers-intro-grid,
.careers-application-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.25rem;
}

.careers-panel,
.careers-card,
.careers-form-card,
.careers-empty {
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--bg-card);
    backdrop-filter: blur(10px);
}

.careers-panel {
    padding: 2rem;
}

.careers-panel .section-title {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    margin: 0.65rem 0 1rem;
}

.careers-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.careers-pill,
.careers-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.careers-process-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.careers-process-list li {
    position: relative;
    padding-left: 1.1rem;
}

.careers-process-list li::before {
    content: '';
    position: absolute;
    top: 0.55rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent);
}

.careers-process-list strong {
    display: block;
    margin-bottom: 0.18rem;
}

.careers-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.2rem;
}

.careers-departments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

.careers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.careers-card {
    padding: 1.35rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.careers-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--primary) 58%, #fff 42%);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 20%, transparent);
}

.careers-card-top,
.careers-card-actions,
.careers-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.careers-card-top {
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.careers-card-index,
.careers-card-type,
.careers-card-date {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.careers-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.8rem;
}

.careers-meta {
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.careers-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.careers-card-copy {
    min-height: 120px;
    margin-bottom: 1rem;
}

.careers-card-actions {
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

.careers-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}

.careers-apply-btn:hover {
    color: var(--primary);
}

.careers-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.careers-empty h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

.careers-form-card {
    padding: 1.5rem;
}

.careers-form {
    display: grid;
    gap: 1rem;
}

.careers-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.careers-field {
    display: grid;
    gap: 0.45rem;
}

.careers-field-full {
    grid-column: 1 / -1;
}

.careers-field span {
    font-size: 0.9rem;
    font-weight: 700;
}

.careers-field input,
.careers-field select,
.careers-field textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    color: var(--text);
    padding: 0.9rem 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.careers-field input:focus,
.careers-field select:focus,
.careers-field textarea:focus {
    border-color: color-mix(in srgb, var(--primary) 60%, white 40%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.careers-selected-role {
    margin-top: 1.4rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.careers-selected-role strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.1rem;
}

.careers-selected-role p {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
}

.careers-guidance {
    margin: 1.2rem 0 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.6rem;
}

.careers-alert {
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.careers-alert-success {
    border: 1px solid rgba(34, 197, 94, 0.32);
    background: rgba(34, 197, 94, 0.10);
    color: #15803d;
}

.careers-alert-error {
    border: 1px solid rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    display: grid;
    gap: 0.25rem;
}

.careers-submit-btn {
    justify-self: start;
}

@media (max-width: 1100px) {
    .careers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .careers-intro-grid,
    .careers-application-grid,
    .careers-form-grid {
        grid-template-columns: 1fr;
    }

    .careers-card-copy {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .careers-grid {
        grid-template-columns: 1fr;
    }

    .careers-hero {
        padding: 120px 0 84px;
    }

    .careers-panel,
    .careers-card,
    .careers-form-card,
    .careers-empty {
        border-radius: 20px;
    }

    .careers-card-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ============================================
   BLOG INDEX PAGE
   ============================================ */
.blog-page {
    background:
        radial-gradient(circle at 10% 0%, rgba(99, 102, 241, 0.14), transparent 35%),
        radial-gradient(circle at 90% 10%, rgba(236, 72, 153, 0.1), transparent 38%),
        var(--bg);
}

.blog-hero {
    position: relative;
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 145px 0 90px;
    overflow: hidden;
}

#blog-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.blog-hero-glow {
    position: absolute;
    width: min(70vw, 740px);
    height: min(70vw, 740px);
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.22) 0%, rgba(236, 72, 153, 0.14) 36%, transparent 72%);
    filter: blur(72px);
}

.blog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}

.blog-hero-label,
.blog-kicker {
    color: var(--primary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 0.8rem;
}

.blog-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.3rem, 6vw, 4.6rem);
    font-weight: 900;
    line-height: 1.08;
    margin: 0 0 0.95rem;
    text-wrap: balance;
}

.blog-hero-gradient {
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.blog-hero p {
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.75;
    max-width: 700px;
    margin: 0 auto 1.6rem;
    text-wrap: pretty;
}

.blog-hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Blog Main ── */
.blog-main {
    padding: 20px 0 95px;
}

/* ── Toolbar ── */
.blog-toolbar {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    backdrop-filter: blur(12px);
    padding: 1rem;
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.blog-filter {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.5rem 0.86rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-filter:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
}

.blog-filter.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.blog-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.blog-metric {
    border: 1px dashed var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0.42rem 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-metric i {
    color: var(--primary);
    font-size: 0.72rem;
}

/* ── Featured Post ── */
.blog-featured {
    margin-bottom: 1.2rem;
}

.featured-card {
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-card);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.featured-card:hover {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
    box-shadow: 0 8px 40px rgba(99, 102, 241, 0.1);
}

.featured-media {
    position: relative;
    min-height: 310px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    overflow: hidden;
}

.featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-card:hover .featured-media img {
    transform: scale(1.03);
}

.featured-body {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
}

/* ── Post Meta ── */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.post-category {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.62rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s ease;
}

.post-category:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: var(--primary);
}

/* ── Post Title ── */
.post-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 0.72rem;
}

.post-title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-title a:hover {
    color: var(--primary);
}

/* ── Post Excerpt ── */
.post-excerpt {
    color: var(--text-muted);
    line-height: 1.75;
    margin: 0 0 1rem;
}

/* ── Read More ── */
.post-read {
    margin-top: auto;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    transition: gap 0.25s ease, color 0.25s ease;
}

.post-read:hover {
    gap: 0.72rem;
    color: var(--accent);
}

/* ── Blog Grid ── */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

/* ── Blog Card ── */
.blog-card {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    backdrop-filter: blur(8px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease;
}

.blog-card.hidden {
    display: none;
}

.blog-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.12),
                0 0 0 1px rgba(99, 102, 241, 0.06);
}

.blog-thumb {
    position: relative;
    aspect-ratio: 16/10;
    min-height: 200px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    overflow: hidden;
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.06);
}

.blog-content {
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    flex: 1;
}

.blog-content h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.12rem;
    line-height: 1.35;
    margin: 0 0 0.58rem;
}

.blog-content h2 a {
    text-decoration: none;
    color: var(--text);
    transition: color 0.2s ease;
}

.blog-content h2 a:hover {
    color: var(--primary);
}

.blog-content p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 0.8rem;
}

.blog-content .post-read {
    margin-top: auto;
    font-size: 0.86rem;
}

/* ── Empty State ── */
.blog-empty {
    border: 1px dashed var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

.blog-empty h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

/* ── Pagination ── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 2.5rem;
}

.page-info {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ── Blog Index Responsive ── */
@media (max-width: 1100px) {
    .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .blog-hero {
        min-height: 64vh;
        padding: 120px 0 72px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
    }

    .blog-hero-actions .btn,
    .pagination .btn {
        width: 100%;
        max-width: 300px;
    }

    .pagination {
        flex-wrap: wrap;
    }

    .featured-body {
        padding: 1.2rem;
    }
}


/* ============================================
   BLOG SINGLE PAGE
   ============================================ */
.blog-single-page {
    background:
        radial-gradient(circle at 15% 5%, rgba(99, 102, 241, 0.12), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.08), transparent 40%),
        var(--bg);
}

/* ── Single Hero ── */
.blog-single-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 145px 0 80px;
    overflow: hidden;
}

.blog-single-hero--featured {
    background-size: cover;
    background-position: center;
}

#blog-single-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.blog-single-hero-glow {
    position: absolute;
    width: min(65vw, 680px);
    height: min(65vw, 680px);
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(236, 72, 153, 0.12) 36%, transparent 72%);
    filter: blur(72px);
}

.blog-single-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.blog-single-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
    margin-bottom: 1rem;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    background: rgba(99, 102, 241, 0.08);
    backdrop-filter: blur(4px);
    transition: all 0.25s ease;
}

.blog-single-hero-label:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: var(--primary);
}

.blog-single-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.12;
    margin: 0 0 1.2rem;
    text-wrap: balance;
    color: var(--text);
}

/* ── Hero Meta ── */
.blog-single-hero-meta,
.post-meta-hero {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-bottom: 1.2rem;
}

.blog-single-hero-meta a,
.post-meta-hero a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-single-hero-meta a:hover,
.post-meta-hero a:hover {
    color: var(--accent);
}

.blog-single-hero-meta span,
.blog-single-hero-meta a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ── Reading Time Badge ── */
.reading-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: var(--primary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

/* ── Reading Progress Bar ── */
#reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
    background-size: 200% 100%;
    animation: progressGlow 2s linear infinite;
    z-index: 10000;
    transition: width 0.15s ease-out;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.6), 0 0 20px rgba(236, 72, 153, 0.3);
}

@keyframes progressGlow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Social Share ── */
.social-share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.5rem;
}

.social-share-buttons button,
.social-share-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.15);
    color: var(--text-muted);
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
}

.social-share-buttons button:hover,
.social-share-buttons a:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 6px 24px rgba(99, 102, 241, 0.35);
}

/* ── Blog Single Main ── */
.blog-single-main {
    padding: 0 0 5rem;
}

/* ── Post Layout ── */
.post-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}

/* ── Post Content ── */
.post-content {
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2.5rem;
    backdrop-filter: blur(8px);
}

.post-content h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.65rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    position: relative;
    color: var(--text);
}

.post-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    border-radius: 2px;
}

.post-content h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.4rem;
    position: relative;
    color: rgba(255, 255, 255, 0.93);
}

.post-content h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), transparent);
    border-radius: 2px;
}

.post-content p {
    color: var(--text-muted);
    line-height: 1.85;
    margin-bottom: 1.25rem;
}

.post-content img {
    border-radius: 12px;
    max-width: 100%;
    height: auto;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 1px rgba(99, 102, 241, 0.15);
    margin: 1.5rem 0;
    display: block;
}

.post-content a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.post-content a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.post-content ul,
.post-content ol {
    margin: 1.25rem 0;
    padding-left: 1.5rem;
}

.post-content ul li,
.post-content ol li {
    margin-bottom: 0.5rem;
    line-height: 1.8;
    color: var(--text-muted);
}

.post-content ul li::marker {
    color: var(--primary);
}

.post-content ol li::marker {
    color: var(--accent);
    font-weight: 600;
}

/* ── Code Blocks ── */
.post-content pre {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 12px;
    border-left: 4px solid var(--primary);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1.75rem 0;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary) 30%, transparent) transparent;
    position: relative;
}

.post-content pre code {
    background: none;
    color: #e0e6ed;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.9rem;
    line-height: 1.7;
    padding: 0;
    border: none;
}

.post-content code {
    background: rgba(99, 102, 241, 0.08);
    color: var(--primary);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.88em;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.post-content pre::-webkit-scrollbar {
    height: 6px;
}

.post-content pre::-webkit-scrollbar-track {
    background: transparent;
}

.post-content pre::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary) 30%, transparent);
    border-radius: 3px;
}

/* ── Blockquote ── */
.post-content blockquote {
    border-left: 4px solid transparent;
    border-image: linear-gradient(180deg, var(--primary), var(--accent)) 1;
    background: rgba(99, 102, 241, 0.06);
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
}

.post-content blockquote::before {
    content: '\201C';
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 3rem;
    color: rgba(99, 102, 241, 0.2);
    font-family: Georgia, serif;
    line-height: 1;
}

.post-content blockquote p {
    margin: 0;
}

/* ── Tables ── */
.post-content .table-responsive {
    overflow-x: auto;
    margin: 1.75rem 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.95rem;
}

.post-content table thead th {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid rgba(99, 102, 241, 0.2);
    white-space: nowrap;
}

.post-content table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
}

.post-content table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.post-content table tbody tr:hover {
    background: rgba(99, 102, 241, 0.04);
    transition: background 0.2s ease;
}

/* ── Post Tags ── */
.post-tags {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-tags a {
    background: rgba(99, 102, 241, 0.06);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border);
    transition: all 0.25s ease;
}

.post-tags a:hover {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    border-color: transparent;
    border-bottom: none;
}

/* ── Sidebar ── */
.sidebar {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sidebar-section {
    overflow: hidden;
    word-wrap: break-word;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
    margin-bottom: 0;
}

.sidebar-section h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-section h3::after {
    display: none;
}

.sidebar-section h4 {
    font-family: 'Outfit', sans-serif;
    margin-bottom: 1rem;
}

/* ── Table of Contents ── */
.toc-sidebar {
    background: rgba(13, 27, 42, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(99, 102, 241, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
}

.toc-sidebar h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    padding-bottom: 0.75rem;
}

.toc-sidebar h3 i {
    font-size: 0.85rem;
}

.toc-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-sidebar ul li {
    margin-bottom: 2px;
}

.toc-sidebar ul li a {
    display: block;
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.88rem;
    border-radius: 8px;
    border-left: 2px solid transparent;
    transition: all 0.25s ease;
    line-height: 1.4;
}

.toc-sidebar ul li a:hover,
.toc-sidebar ul li a.toc-active {
    color: var(--primary);
    background: rgba(99, 102, 241, 0.06);
    border-left-color: var(--primary);
}

/* ── Related Posts ── */
.related-post-item {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    transition: all 0.2s;
}

.related-post-item:last-child {
    border-bottom: none;
}

.related-post-item:hover {
    padding-left: 4px;
}

.related-post-item img {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.related-post-item h4 {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.35;
}

.related-post-item h4 a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.related-post-item h4 a:hover {
    color: var(--primary);
}

.related-post-item .date {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    display: block;
}

/* ── Sidebar Categories ── */
.sidebar-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-categories li {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.sidebar-categories li:last-child {
    border-bottom: none;
}

.sidebar-categories a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    transition: all 0.2s;
}

.sidebar-categories a:hover {
    color: var(--primary);
    padding-left: 4px;
}

.sidebar-categories .cat-count {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ── Back to Top ── */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
}

#back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.5);
}

/* ── Code Copy Button ── */
.code-copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: rgba(255, 255, 255, 0.6);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.code-copy-btn:hover {
    background: rgba(99, 102, 241, 0.25);
    color: var(--primary);
}

/* ── Toast Notification ── */
.dc-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999999;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
}

.dc-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ── Misc ── */
.btn-sm {
    padding: 8px 16px;
    font-size: 0.9rem;
}

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

.related-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.related-list li:last-child {
    border-bottom: none;
}

.related-list a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

.related-list a:hover {
    color: var(--primary);
}

/* ── Single Page Responsive ── */
@media (max-width: 1024px) {
    .post-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
    }

    .post-content {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .blog-single-hero {
        min-height: auto;
        padding: 120px 0 60px;
    }

    .blog-single-hero h1 {
        font-size: clamp(1.6rem, 7vw, 2.4rem);
    }

    .blog-single-hero-meta {
        gap: 0.6rem;
        font-size: 0.8rem;
    }

    .post-content {
        padding: 1.5rem;
        border-radius: 14px;
    }

    .post-content h2 {
        font-size: 1.4rem;
    }

    .post-content h3 {
        font-size: 1.2rem;
    }

    .post-content pre {
        padding: 1rem;
        font-size: 0.82rem;
    }

    #back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
    }

    .social-share-buttons button,
    .social-share-buttons a {
        width: 36px;
        height: 36px;
        font-size: 0.82rem;
    }
}


/* ============================================
   BLOG CATEGORY PAGE — scoped
   ============================================ */

/* Blog Content Readability Fix */
.post-content p,
.post-content li,
.post-content td,
.post-content dd {
    color: rgba(255, 255, 255, 0.85) !important;
}

.post-content strong,
.post-content b {
    color: #fff !important;
}

.toc-sidebar ul a {
    white-space: normal;
    word-break: break-word;
}

.sidebar {
    overflow-x: hidden;
    word-wrap: break-word;
}
.blog-category-page .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.blog-category-page .blog-card { padding: 0; overflow: hidden; }
.blog-category-page .blog-img { height: 200px; width: 100%; object-fit: cover; }
.blog-category-page .blog-content { padding: 1.5rem; }
.blog-category-page .blog-meta { display: flex; gap: 1rem; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--text-muted); }
.blog-category-page .blog-content h2 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; margin-bottom: 0.75rem; }
.blog-category-page .blog-content h2 a { color: var(--text); text-decoration: none; transition: color 0.3s; }
.blog-category-page .blog-content h2 a:hover { color: var(--primary); }
.blog-category-page .blog-content > p { color: var(--text-muted); margin-bottom: 1rem; }
.read-more { color: var(--primary); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: gap 0.3s; }
.read-more:hover { gap: 0.75rem; }
@media (max-width: 768px) { .blog-category-page .blog-grid { grid-template-columns: 1fr; } .blog-category-page .blog-content h2 { font-size: 1.2rem; } }



/* ============================================
   BOOK CONSULTATION PAGE
   ============================================ */
.booking-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.info-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.info-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.info-card h4 { margin-bottom: 0.25rem; }
.info-card p { color: var(--text-muted); margin: 0; font-size: 0.9rem; }
@media (max-width: 1024px) {
    .booking-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}


/* ============================================
   APPOINTMENTS BOOK PAGE
   ============================================ */
.booking-container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
        .step { display: none; }
        .step.active { display: block; }
        .service-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; cursor: pointer; transition: all 0.3s; }
        .service-card:hover, .service-card.selected { border-color: var(--primary); transform: translateY(-3px); }
        .service-card.selected { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
        .time-slot { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; text-align: center; cursor: pointer; transition: all 0.2s; }
        .time-slot:hover:not(.unavailable), .time-slot.selected { background: var(--primary); border-color: var(--primary); color: white; }
        .time-slot.unavailable { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
        .step-indicator { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
        .step-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-muted); transition: all 0.3s; }
        .step-dot.active, .step-dot.completed { background: var(--primary); color: white; }
        .step-dot.completed::before { content: '\2713'; }
        #calendar { background: var(--bg-card); border-radius: 1rem; padding: 1rem; }
        .fc-theme-standard { --fc-border-color: var(--border); --fc-button-bg-color: var(--primary); --fc-button-border-color: var(--primary); --fc-button-hover-bg-color: var(--primary-light); }
        .fc-day-today { background: var(--bg-secondary) !important; }
        .fc-daygrid-day:hover { background: var(--bg-secondary); cursor: pointer; }


/* ============================================
   REQUEST QUOTE PAGE
   ============================================ */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }


/* ============================================
   AUTH SHARED PAGE
   ============================================ */
/* ================================================================
       AUTH SHARED STYLES — Premium Theme (matches About / Services)
       ================================================================ */

    :root {
--auth-primary: #6366f1;
--auth-accent: #ec4899;
--auth-surface: var(--bg-secondary);
--auth-glass: rgba(15, 23, 42, 0.04);
--auth-glass-strong: rgba(15, 23, 42, 0.08);
--auth-glass-border: var(--border);
--auth-glow: 0 0 24px rgba(99, 102, 241, 0.18);
    }

    [data-theme="dark"] {
--auth-surface: #0f172a;
--auth-glass: rgba(255, 255, 255, 0.03);
--auth-glass-strong: rgba(255, 255, 255, 0.07);
--auth-glass-border: rgba(255, 255, 255, 0.08);
--auth-glow: 0 0 30px rgba(99, 102, 241, 0.3);
    }

    [data-theme="light"] {
--auth-surface: var(--bg-secondary);
--auth-glass: rgba(15, 23, 42, 0.02);
--auth-glass-strong: rgba(15, 23, 42, 0.05);
--auth-glass-border: var(--border);
--auth-glow: 0 0 24px rgba(99, 102, 241, 0.18);
    }

    /* ---- Hero Section ---- */
    .auth-hero {
min-height: 40vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 130px 0 60px;
overflow: hidden;
background: radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 42%),
            radial-gradient(circle at 84% 16%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
            var(--auth-surface);
    }

    #auth-particles {
position: absolute;
inset: 0;
z-index: 1;
    }

    .auth-hero-glow {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
width: min(74vw, 760px);
height: min(74vw, 760px);
pointer-events: none;
z-index: 0;
background: radial-gradient(circle, rgba(99, 102, 241, 0.24) 0%, rgba(236, 72, 153, 0.18) 30%, transparent 70%);
filter: blur(64px);
    }

    .auth-hero-content {
position: relative;
z-index: 2;
max-width: 860px;
margin: 0 auto;
text-align: center;
    }

    .auth-hero-label {
display: inline-block;
margin-bottom: 1rem;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--auth-primary);
    }

    .auth-hero h1 {
font-family: 'Outfit', sans-serif;
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 1rem;
    }

    .auth-hero-gradient {
background: linear-gradient(135deg, var(--text) 5%, var(--auth-primary) 55%, var(--auth-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
    }

    .auth-hero p {
color: var(--text-muted);
font-size: clamp(1rem, 2vw, 1.15rem);
max-width: 640px;
margin: 0 auto;
line-height: 1.7;
    }

    /* ---- Main form shell ---- */
    .auth-shell {
background:
    radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.08), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.07), transparent 45%),
    var(--auth-surface);
padding: 60px 0 90px;
    }

    .auth-v2-grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 1.25rem;
align-items: stretch;
    }

    /* ---- Showcase Side ---- */
    .auth-v2-showcase {
background: linear-gradient(165deg, var(--auth-glass), transparent);
border: 1px solid var(--auth-glass-border);
border-radius: 24px;
padding: 2rem;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .auth-v2-showcase:hover {
  border-color: #6366f1;
  border-color: color-mix(in srgb, var(--auth-primary) 40%, white 60%);
  box-shadow: var(--auth-glow);
    }

    .auth-v2-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--auth-glass-border);
border-radius: 999px;
padding: 0.42rem 0.85rem;
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
background: color-mix(in srgb, var(--auth-primary) 7%, transparent);
    }

    .auth-v2-showcase h2 {
margin: 1rem 0 0.7rem;
font-family: 'Outfit', sans-serif;
font-size: clamp(1.5rem, 3.2vw, 2.3rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.02em;
    }

    .auth-v2-showcase p {
margin: 0;
color: var(--text-muted);
line-height: 1.65;
    }

    .auth-v2-points {
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.72rem;
    }

    .auth-v2-points li {
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--text);
font-size: 0.92rem;
    }

    .auth-v2-points i {
width: 18px;
color: var(--auth-primary);
    }

    .auth-v2-showcase .text-sm a {
color: var(--auth-primary);
font-weight: 600;
text-decoration: none;
    }

    .auth-v2-showcase .text-sm a:hover {
text-decoration: underline;
    }

    /* ---- Form Panel ---- */
    .auth-v2-panel {
background: var(--auth-glass);
border: 1px solid var(--auth-glass-border);
border-radius: 24px;
padding: 2rem;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
transition: border-color 0.25s ease;
    }

    .auth-v2-panel:hover {
border-color: #6366f1;
border-color: color-mix(in srgb, var(--auth-primary) 30%, white 70%);
    }

    .auth-v2-logo {
width: 56px;
height: 56px;
margin: 0 auto 0.8rem;
border-radius: 16px;
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.35rem;
color: #fff;
background: linear-gradient(135deg, var(--auth-primary), var(--auth-accent));
box-shadow: 0 15px 30px -12px rgba(99, 102, 241, 0.6);
    }
    .auth-v2-logo-image-wrap {
width: 100%;
max-width: min(460px, 100%);
min-height: 84px;
--auth-logo-glow-anchor: min(96px, 24%);
--auth-logo-glow-outer: clamp(86px, 18vw, 132px);
--auth-logo-glow-inner: clamp(72px, 15vw, 110px);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
padding-inline: clamp(4px, 1vw, 10px);
border-radius: 0;
background: transparent;
box-shadow: none;
border: 0;
position: relative;
isolation: isolate;
overflow: visible;
    }
    .auth-v2-logo-image-wrap::before {
content: "";
position: absolute;
left: 30px;
top: 50%;
width: var(--auth-logo-glow-outer);
height: var(--auth-logo-glow-outer);
transform: translate(-50%, -50%);
border-radius: 999px;
background: conic-gradient(from 0deg, color-mix(in srgb, var(--auth-primary) 80%, #fff 20%), color-mix(in srgb, var(--auth-accent) 78%, #fff 22%), color-mix(in srgb, #22d3ee 72%, #fff 28%), color-mix(in srgb, var(--auth-primary) 80%, #fff 20%));
filter: blur(15px);
opacity: 0.62;
z-index: -1;
animation: auth-logo-orbit 8s linear infinite;
pointer-events: none;
    }
    .auth-v2-logo-image-wrap::after {
content: "";
position: absolute;
left: 30px;
top: 50%;
width: var(--auth-logo-glow-inner);
height: var(--auth-logo-glow-inner);
transform: translate(-50%, -50%);
border-radius: 999px;
background: radial-gradient(circle at center, color-mix(in srgb, var(--auth-accent) 48%, #fff 52%) 0%, color-mix(in srgb, var(--auth-primary) 28%, transparent 72%) 45%, transparent 74%);
filter: blur(11px);
opacity: 0.5;
z-index: -1;
animation: auth-logo-heartbeat 1.55s ease-in-out infinite;
pointer-events: none;
    }
    .auth-v2-logo-image {
width: 100%;
height: auto;
max-height: 96px;
object-fit: contain;
object-position: center;
background: transparent;
display: block;
margin: 0 auto;
position: relative;
z-index: 1;
    }
    @keyframes auth-logo-orbit {
from { transform: translate(-50%, -50%) rotate(0deg) translateX(9px); }
to { transform: translate(-50%, -50%) rotate(360deg) translateX(9px); }
    }
    @keyframes auth-logo-heartbeat {
0%, 100% { transform: translate(-50%, -50%) scale(0.84); opacity: 0.34; }
18% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.62; }
38% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.4; }
60% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.54; }
    }

    .auth-v2-title {
margin: 0;
text-align: center;
font-family: 'Outfit', sans-serif;
font-size: 1.9rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
    }

    .auth-v2-subtitle {
margin: 0.45rem 0 1.15rem;
text-align: center;
color: var(--text-muted);
line-height: 1.58;
font-size: 0.94rem;
    }

    /* ---- Alerts ---- */
    .auth-alert {
display: flex;
align-items: flex-start;
gap: 0.65rem;
border-radius: 14px;
border: 1px solid transparent;
padding: 0.82rem 0.95rem;
margin-bottom: 1rem;
font-size: 0.9rem;
line-height: 1.45;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
    }

    .auth-alert p { margin: 0; }

    .auth-alert.error {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.08);
    }

    .auth-alert.success {
color: #10b981;
border-color: rgba(16, 185, 129, 0.35);
background: rgba(16, 185, 129, 0.08);
    }

    /* ---- Form Elements ---- */
    .auth-form label {
display: block;
margin-bottom: 0.42rem;
color: var(--text-muted);
font-size: 0.88rem;
font-weight: 600;
    }

    .auth-input {
width: 100%;
border: 1px solid var(--auth-glass-border);
border-radius: 14px;
background: var(--auth-glass);
color: var(--text);
padding: 0.82rem 0.95rem;
outline: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .auth-input:focus {
border-color: var(--auth-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16), var(--auth-glow);
    }

    .auth-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.78rem;
    }

    .auth-divider {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 1.05rem 0;
color: var(--text-muted);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.04em;
    }

    .auth-divider::before,
    .auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--auth-glass-border), transparent);
    }

    .auth-social {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
width: 100%;
border: 1px solid var(--auth-glass-border);
border-radius: 14px;
background: var(--auth-glass);
color: var(--text);
padding: 0.78rem 0.85rem;
font-size: 0.92rem;
font-weight: 600;
margin-bottom: 0.68rem;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
cursor: pointer;
    }

    .auth-social:hover {
border-color: var(--auth-primary);
transform: translateY(-2px);
box-shadow: var(--auth-glow);
    }

    .auth-submit {
width: 100%;
justify-content: center;
padding: 0.86rem 1rem;
margin-top: 0.25rem;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: 14px;
background: linear-gradient(135deg, var(--auth-primary), var(--auth-accent));
color: #fff !important;
border: none;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
display: inline-flex;
align-items: center;
    }

    .auth-submit:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(99, 102, 241, 0.5);
    }

    .auth-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0.22rem 0 0.95rem;
    }

    .auth-row label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.88rem;
margin: 0;
    }
    .auth-row.is-stack {
justify-content: flex-start;
    }
    .auth-row .auth-check-label {
align-items: flex-start;
line-height: 1.32;
    }
    .auth-row input[type="checkbox"],
    .auth-row .auth-check-box {
width: 18px;
height: 18px;
min-width: 18px;
margin: 0;
accent-color: var(--auth-primary);
cursor: pointer;
border-radius: 4px;
    }
    .auth-row .auth-check-label input[type="checkbox"] {
margin-top: 0.12rem;
    }

    .auth-row a {
color: var(--auth-primary);
font-size: 0.88rem;
text-decoration: none;
font-weight: 600;
    }

    .auth-row a:hover {
text-decoration: underline;
    }

    .auth-meta {
margin: 1rem 0 0;
text-align: center;
color: var(--text-muted);
font-size: 0.92rem;
    }

    .auth-meta a {
color: var(--auth-primary);
text-decoration: none;
font-weight: 600;
    }

    .auth-meta a:hover {
text-decoration: underline;
    }

    .auth-hidden { display: none; }

    /* ---- Responsive ---- */
    @media (max-width: 1024px) {
.auth-hero {
    padding: 110px 0 50px;
    min-height: 32vh;
}
.auth-shell {
    padding: 40px 0 70px;
}
.auth-v2-grid {
    grid-template-columns: 1fr;
}
.auth-v2-showcase {
    order: 2;
    padding: 1.35rem;
}
.auth-v2-panel {
    order: 1;
}
    }

    @media (max-width: 680px) {
.auth-hero {
    padding: 100px 0 40px;
    min-height: 28vh;
}
.auth-hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
}
.auth-shell {
    padding: 30px 0 50px;
}
.auth-v2-panel {
    padding: 1.25rem;
}
.auth-v2-logo-image-wrap {
    min-height: 72px;
    max-width: min(360px, 100%);
}
.auth-v2-logo-image {
    max-height: 76px;
}
.auth-v2-showcase {
    display: none;
}
.auth-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
}
    }


/* ============================================
   ERRORS PAGE
   ============================================ */
/* Error Pages — unified styles */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    padding: 6rem 1rem 2rem;
}
.error-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
    pointer-events: none;
}
.error-code {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
}
.text-warning { color: var(--warning, #f59e0b); }
.text-danger { color: #ef4444; }

.icon-pulse {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    animation: error-pulse 2s infinite;
}
.icon-pulse.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning, #f59e0b);
}
.icon-pulse.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.icon-pulse.primary {
    width: 100px;
    height: 100px;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    animation: error-float 3s ease-in-out infinite;
}

@keyframes error-pulse {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
    70% { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
@keyframes error-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#particles-js {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 500.php — standalone minimal styles */
.error-container {
    background: var(--bg-card, white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
    text-align: center;
}
.request-id {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--text-muted, #64748b);
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-top: 1rem;
}

/* Maintenance social links */
.social-links { display: flex; gap: 1rem; }
.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s;
}
.social-link:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-3px);
}

/* Mobile */
@media (max-width: 768px) {
    .error-page {
padding: 5rem 1rem 6rem;
    }
    .flex-center {
flex-direction: column;
gap: 0.75rem;
    }
    .flex-center .btn,
    .flex-center .btn-primary,
    .flex-center .btn-outline {
width: 100%;
justify-content: center;
    }
}


/* ============================================
   PAGE PAGE
   ============================================ */
.page-content {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 3rem;
        }
        .page-content h2 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.8rem;
            margin: 2rem 0 1rem;
        }
        .page-content h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.4rem;
            margin: 1.5rem 0 0.75rem;
        }
        .page-content p {
            color: var(--text-muted);
            margin-bottom: 1rem;
            line-height: 1.8;
        }
        .page-content ul, .page-content ol {
            padding-left: 1.5rem;
            margin-bottom: 1rem;
            color: var(--text-muted);
        }
        .page-content li { margin-bottom: 0.5rem; }
        .page-content a { color: var(--primary); }
        .page-content a:hover { text-decoration: underline; }
        .page-content img {
            max-width: 100%;
            border-radius: 12px;
            margin: 1.5rem 0;
        }
        .page-content blockquote {
            border-left: 4px solid var(--primary);
            padding-left: 1.5rem;
            margin: 1.5rem 0;
            font-style: italic;
            color: var(--text-muted);
        }


/* ============================================
   DREAMCORE PAGE
   ============================================ */
.dc-product {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem 5rem;
    }
    .dc-hero {
        border: 1px solid var(--border);
        border-radius: 20px;
        background: linear-gradient(140deg, rgba(37,99,235,0.12), rgba(16,185,129,0.09));
        padding: 2.25rem;
        margin-bottom: 1.5rem;
    }
    .dc-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .78rem;
        border: 1px solid var(--border);
        background: var(--bg-card);
        padding: .35rem .7rem;
        border-radius: 999px;
        color: var(--text-muted);
        margin-bottom: 1rem;
    }
    .dc-hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.9rem);
        line-height: 1.15;
        margin: 0 0 .7rem;
    }
    .dc-hero p {
        color: var(--text-muted);
        margin: 0;
        max-width: 760px;
    }
    .dc-actions {
        margin-top: 1.2rem;
        display: flex;
        flex-wrap: wrap;
        gap: .7rem;
    }
    .dc-btn {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .66rem 1rem;
        border-radius: 10px;
        text-decoration: none;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--text);
        font-weight: 600;
    }
    .dc-btn.primary {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }
    .dc-grid {
        display: grid;
        gap: 1rem;
    }
    .dc-grid.modules {
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    }
    .dc-grid.highlights {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .dc-grid.licenses {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .dc-card {
        border: 1px solid var(--border);
        background: var(--bg-card);
        border-radius: 16px;
        padding: 1rem;
    }
    .dc-card h3 {
        margin: 0 0 .45rem;
        font-size: 1.02rem;
        display: flex;
        align-items: center;
        gap: .55rem;
    }
    .dc-card p {
        margin: 0;
        color: var(--text-muted);
        font-size: .92rem;
    }
    .dc-section {
        margin-top: 1.4rem;
    }
    .dc-section h2 {
        margin: 0 0 .75rem;
        font-size: 1.25rem;
    }
    .dc-list {
        margin: .8rem 0 0;
        padding-left: 1.1rem;
        color: var(--text-muted);
        font-size: .92rem;
    }
    .dc-list li {
        margin: .35rem 0;
    }
    .dc-license {
        position: relative;
    }
    .dc-license.featured {
        border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
        box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    }
    .dc-ribbon {
        position: absolute;
        top: -10px;
        right: 14px;
        background: var(--primary);
        color: #fff;
        font-size: .68rem;
        font-weight: 700;
        border-radius: 999px;
        padding: .2rem .55rem;
    }
    .dc-price {
        font-size: 2rem;
        margin: .4rem 0 .55rem;
        font-weight: 800;
    }
    .dc-price small {
        font-size: .82rem;
        color: var(--text-muted);
        font-weight: 500;
    }
    @media (max-width: 720px) {
        .dc-hero {
            padding: 1.35rem;
        }
    }


/* DreamCore checkout/success pages now use dedicated page stylesheets. */


/* ============================================
   DREAMCORE DOCS PAGE
   ============================================ */
:root {
        --sidebar-width: 300px;
    }
    
    /* Page Layout */
    .docs-wrapper {
        padding: 40px 0 80px;
        background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent 40%),
                    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.05), transparent 40%);
        min-height: 100vh;
    }
    
    .docs-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        gap: 3rem;
        position: relative;
    }

    /* Hero */
    .docs-hero {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px 0 60px;
        position: relative;
    }
    .docs-hero h1 {
        font-family: 'Outfit', sans-serif;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 800;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, var(--primary) 0%, #ec4899 50%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -0.02em;
    }
    .docs-hero p {
        font-size: 1.25rem;
        color: var(--text-muted);
        max-width: 700px;
        margin: 0 auto;
    }
    .docs-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary);
        border-radius: 99px;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        border: 1px solid rgba(99, 102, 241, 0.2);
    }

    /* Sidebar */
    .docs-sidebar {
        position: sticky;
        top: 100px;
        height: calc(100vh - 140px);
        overflow-y: auto;
        padding-right: 1rem;
    }
    .docs-nav-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 1.5rem;
        backdrop-filter: blur(10px);
    }
    .docs-nav-title {
        font-family: 'Outfit', sans-serif;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
        margin-bottom: 1rem;
        font-weight: 700;
    }
    .docs-nav-links {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .docs-nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: var(--text-muted);
        text-decoration: none;
        border-radius: 10px;
        transition: all 0.2s;
        font-weight: 500;
        font-size: 0.95rem;
    }
    .docs-nav-link:hover, .docs-nav-link.active {
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary);
    }
    .docs-nav-link i { width: 20px; text-align: center; }

    /* Content */
    .docs-content {
        min-width: 0; /* Prevent overflow */
    }
    .docs-section {
        margin-bottom: 4rem;
        scroll-margin-top: 100px;
    }
    .docs-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 2.5rem;
        position: relative;
        overflow: hidden;
    }
    .docs-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
        opacity: 0.5;
    }
    .section-title {
        font-family: 'Outfit', sans-serif;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .section-title i { color: var(--primary); opacity: 0.8; }
    
    .docs-card h3 {
        font-family: 'Outfit', sans-serif;
        font-size: 1.4rem;
        font-weight: 600;
        margin: 2rem 0 1rem;
        color: var(--text);
    }
    .docs-card h3:first-of-type { margin-top: 0; }
    
    .docs-card p, .docs-card li {
        color: var(--text-muted);
        line-height: 1.7;
        font-size: 1.05rem;
    }
    .docs-card ul { 
        list-style: none; 
        padding: 0; 
        margin: 1rem 0; 
    }
    .docs-card li { 
        position: relative; 
        padding-left: 1.75rem; 
        margin-bottom: 0.75rem; 
    }
    .docs-card li::before {
        content: '\f00c';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 2px;
        color: var(--success);
        font-size: 0.9rem;
    }

    /* Code Blocks */
    .code-block {
        background: #1e293b;
        border-radius: 12px;
        padding: 1.25rem;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        color: #e2e8f0;
        overflow-x: auto;
        white-space: pre;
        border: 1px solid rgba(255,255,255,0.1);
        margin: 1rem 0 1.5rem;
        position: relative;
    }
    .code-block::after {
        content: 'CODE';
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: rgba(255,255,255,0.3);
        letter-spacing: 0.1em;
    }
    .k-var { color: #f472b6; } /* pink */
    .k-str { color: #4ade80; } /* green */
    .k-func { color: #60a5fa; } /* blue */
    .k-kw { color: #c084fc; } /* purple */
    .inline-code {
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary);
        padding: 0.1rem 0.4rem;
        border-radius: 6px;
        font-family: monospace;
        font-size: 0.9em;
        font-weight: 600;
    }

    /* Alerts */
    .alert-box {
        padding: 1.25rem 1.5rem;
        border-radius: 12px;
        margin: 1.5rem 0;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }
    .alert-info {
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: #93c5fd;
    }
    .alert-warn {
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
        color: #fcd34d;
    }
    .alert-box i { font-size: 1.2rem; margin-top: 2px; }
    .alert-title { font-weight: 700; display: block; margin-bottom: 0.25rem; color: inherit; }

    /* Responsive */
    @media (max-width: 1024px) {
        .docs-container { grid-template-columns: 1fr; }
        .docs-sidebar { display: none; } /* Standard generic hidden sidebar for mobile for now */
        .docs-hero h1 { font-size: 2.5rem; }
    }


/* ============================================
   DEMOS INDEX PAGE
   ============================================ */
.page-hero {
            padding: 120px 0 80px;
            background: radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
                        radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.08) 0%, transparent 40%);
            text-align: center;
        }
        .page-hero h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: var(--text);
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 1.5rem;
        }
        .demo-card {
            padding: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
            background: var(--bg-card);
        }
        .demo-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            border-color: var(--primary);
        }
        .demo-preview {
            position: relative;
            height: 160px;
            overflow: hidden;
            background: var(--bg-hover);
        }
        .image-mockup {
            width: 100%;
            height: 100%;
            position: relative;
            background: var(--bg-hover);
        }
        .demo-preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }
        .demo-card:hover .demo-preview-image {
            transform: scale(1.04);
        }
        .demo-preview-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            color: var(--text-muted);
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.08));
            font-size: 0.8rem;
            text-align: center;
            padding: 0.5rem;
        }
        .demo-preview-fallback i {
            font-size: 1.2rem;
            color: var(--primary);
        }
        .demo-actions {
            display: flex;
            gap: 0.5rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 20;
        }
        .demo-card:hover .demo-actions {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        .btn-xs {
            padding: 8px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.9rem;
        }
        .demo-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.2);
            backdrop-filter: blur(0px);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 10;
        }
        .demo-card:hover .demo-overlay {
            opacity: 1;
            backdrop-filter: blur(4px);
            background: rgba(0,0,0,0.4);
        }

        .bg-glass {
            background: rgba(255,255,255,0.9);
            color: var(--text);
            border: none;
        }
        .demo-info {
            padding: 1rem;
        }
        .demo-industry {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--primary);
            font-weight: 700;
            display: block;
            margin-bottom: 0.25rem;
        }
        .demo-info h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
            line-height: 1.4;
        }
        .demo-info h3 a {
            color: var(--text);
            text-decoration: none;
            transition: color 0.2s;
        }
        .demo-info h3 a:hover {
            color: var(--primary);
        }
        /* Filter Styles */
.btn-outline.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.is-hidden {
    display: none !important;
}
.demo-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.demos-hero {
    position: relative;
    overflow: hidden;
    text-align: left;
    padding: clamp(7rem, 10vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
    background:
        linear-gradient(135deg, rgba(9, 12, 24, 0.96), rgba(16, 20, 40, 0.92)),
        radial-gradient(circle at 78% 24%, rgba(122, 92, 255, 0.26), transparent 34%),
        radial-gradient(circle at 20% 80%, rgba(240, 85, 182, 0.14), transparent 34%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.demos-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 84%);
    pointer-events: none;
}

.demos-hero__layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
}

.demos-hero__copy h1 {
    max-width: 800px;
    margin: 0 0 1.25rem;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
    color: #fff;
}

.demos-hero__copy p {
    max-width: 680px;
    margin: 0;
    color: rgba(226, 232, 240, 0.78);
    font-size: clamp(1.02rem, 2vw, 1.25rem);
    line-height: 1.72;
}

.demos-hero__controls {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
    gap: 0.85rem;
    align-items: center;
    max-width: 920px;
    margin-top: clamp(1.8rem, 4vw, 2.7rem);
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px);
}

.demos-hero .demo-search-field {
    position: relative;
    min-width: 0;
}

.demos-hero .demo-search-field__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.52);
    pointer-events: none;
}

.demos-hero .demo-search-field__input,
.demos-hero .demo-industry-filter select {
    width: 100%;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(5, 8, 18, 0.62);
    color: #fff;
    font: 700 0.92rem/1.2 Inter, system-ui, sans-serif;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.demos-hero .demo-search-field__input {
    padding: 0 1rem 0 2.75rem;
}

.demos-hero .demo-industry-filter select {
    appearance: none;
    padding: 0 2.4rem 0 1rem;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.76) 50%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.76) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 21px,
        calc(100% - 13px) 21px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.demos-hero .demo-search-field__input:focus,
.demos-hero .demo-industry-filter select:focus {
    border-color: rgba(168, 133, 255, 0.78);
    background-color: rgba(10, 14, 30, 0.9);
    box-shadow: 0 0 0 4px rgba(122, 92, 255, 0.2);
}

.demos-hero .demo-search-field__input::placeholder {
    color: rgba(226, 232, 240, 0.42);
    font-weight: 600;
}

.demos-hero__compare {
    min-height: 48px;
    min-width: 138px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding-inline: 1.1rem;
    white-space: nowrap;
    overflow: visible;
    box-shadow: 0 14px 38px rgba(122, 92, 255, 0.3);
}

.demos-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1rem;
    color: rgba(226, 232, 240, 0.64);
    font-size: 0.92rem;
}

.demos-hero__stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.55rem 0.78rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
}

.demos-hero__stats strong {
    color: #fff;
    font-size: 1.05rem;
}

.demos-hero__visual {
    position: relative;
    min-height: 430px;
}

.demos-hero__preview {
    position: absolute;
    width: min(86%, 390px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 26px 90px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(14px);
}

.demos-hero__preview--0 {
    right: 0;
    top: 0;
    z-index: 3;
}

.demos-hero__preview--1 {
    left: 0;
    top: 116px;
    z-index: 2;
    transform: scale(0.86);
    opacity: 0.78;
}

.demos-hero__preview--2 {
    right: 44px;
    bottom: 0;
    z-index: 1;
    transform: scale(0.74);
    opacity: 0.58;
}

.demos-hero__chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 32px;
    padding: 0 0.85rem;
    background: rgba(2, 6, 23, 0.88);
}

.demos-hero__chrome span {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.demos-hero__preview img,
.demos-hero__preview-fallback {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: rgba(15, 23, 42, 0.92);
}

.demos-hero__preview-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.46);
    font-size: 2rem;
}

.demos-hero__preview-title {
    padding: 0.82rem 1rem 1rem;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-theme="light"] .demos-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 255, 0.94)),
        radial-gradient(circle at 78% 24%, rgba(122, 92, 255, 0.18), transparent 34%),
        radial-gradient(circle at 18% 78%, rgba(240, 85, 182, 0.12), transparent 34%);
    border-bottom-color: rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .demos-hero::before {
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.045) 1px, transparent 1px);
}

html[data-theme="light"] .demos-hero__copy h1 {
    color: #111827;
}

html[data-theme="light"] .demos-hero__copy p {
    color: rgba(30, 41, 59, 0.74);
}

html[data-theme="light"] .demos-hero__controls {
    border-color: rgba(99, 102, 241, 0.16);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 24px 80px rgba(79, 70, 229, 0.16);
}

html[data-theme="light"] .demos-hero .demo-search-field__icon {
    color: rgba(51, 65, 85, 0.55);
}

html[data-theme="light"] .demos-hero .demo-search-field__input,
html[data-theme="light"] .demos-hero .demo-industry-filter select {
    border-color: rgba(99, 102, 241, 0.14);
    background-color: rgba(248, 250, 252, 0.9);
    color: #111827;
}

html[data-theme="light"] .demos-hero .demo-industry-filter select {
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(51, 65, 85, 0.8) 50%),
        linear-gradient(135deg, rgba(51, 65, 85, 0.8) 50%, transparent 50%);
}

html[data-theme="light"] .demos-hero .demo-search-field__input:focus,
html[data-theme="light"] .demos-hero .demo-industry-filter select:focus {
    border-color: rgba(122, 92, 255, 0.72);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(122, 92, 255, 0.16);
}

html[data-theme="light"] .demos-hero .demo-search-field__input::placeholder {
    color: rgba(71, 85, 105, 0.52);
}

html[data-theme="light"] .demos-hero__stats {
    color: rgba(51, 65, 85, 0.72);
}

html[data-theme="light"] .demos-hero__stats span {
    border-color: rgba(99, 102, 241, 0.14);
    background: rgba(255, 255, 255, 0.76);
}

html[data-theme="light"] .demos-hero__stats strong {
    color: #111827;
}

html[data-theme="light"] .demos-hero__preview {
    border-color: rgba(99, 102, 241, 0.15);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 26px 80px rgba(79, 70, 229, 0.18);
}

html[data-theme="light"] .demos-hero__chrome {
    background: rgba(241, 245, 249, 0.94);
}

html[data-theme="light"] .demos-hero__chrome span {
    background: rgba(51, 65, 85, 0.28);
}

html[data-theme="light"] .demos-hero__preview-title {
    color: #111827;
    background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 1024px) {
    .demos-hero__layout {
        grid-template-columns: 1fr;
    }

    .demos-hero__visual {
        display: none;
    }
}

@media (max-width: 760px) {
    .demos-hero {
        text-align: left;
        padding-top: 6.5rem;
    }

    .demos-hero__controls {
        grid-template-columns: 1fr;
        border-radius: 20px;
    }

    .demos-hero__compare {
        justify-content: center;
    }
}


/* ============================================
   DEMOS DETAILS PAGE
   ============================================ */
.demo-detail-hero {
        padding: 130px 0 70px;
        text-align: center;
        background:
            radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.12), transparent 38%),
            radial-gradient(circle at 90% 15%, rgba(236, 72, 153, 0.1), transparent 40%),
            var(--bg);
        border-bottom: 1px solid var(--border);
    }
    .detail-breadcrumb {
        display: inline-flex;
        gap: 0.5rem;
        align-items: center;
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
    }
    .detail-breadcrumb a {
        color: var(--text-muted);
        text-decoration: none;
    }
    .detail-industry-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        border: 1px solid rgba(99, 102, 241, 0.25);
        background: rgba(99, 102, 241, 0.12);
        color: var(--primary);
        font-weight: 600;
        font-size: 0.82rem;
        margin-bottom: 1rem;
    }
    .demo-detail-hero h1 {
        margin: 0 0 0.9rem;
        font-size: clamp(2rem, 3.6vw, 3.2rem);
        line-height: 1.1;
    }
    .demo-detail-hero p {
        margin: 0 auto 1.8rem;
        max-width: 760px;
        color: var(--text-muted);
        font-size: 1.04rem;
    }
    .hero-actions {
        display: flex;
        gap: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .detail-main { padding-top: 2.5rem; }
    .detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: 1.4rem;
        align-items: start;
    }
    .detail-preview-card {
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        background: var(--bg-card);
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
    }
    .preview-browser {
        height: 40px;
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0 0.9rem;
        background: rgba(15, 23, 42, 0.85);
    }
    .browser-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        display: inline-block;
    }
    .browser-dot.red { background: #ff5f57; }
    .browser-dot.yellow { background: #ffbd2e; }
    .browser-dot.green { background: #28c840; }
    .browser-url {
        margin-left: 0.45rem;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.78rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .preview-viewport {
        position: relative;
        min-height: 320px;
        background: var(--bg-secondary);
    }
    .preview-viewport img {
        width: 100%;
        height: auto;
        display: block;
    }
    .preview-fallback {
        min-height: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        color: var(--text-muted);
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.08));
    }
    .preview-fallback i {
        font-size: 1.3rem;
        color: var(--primary);
    }
    .preview-overlay-actions {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .preview-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
        padding: 1rem;
        border-top: 1px solid var(--border);
        background: var(--bg);
    }
    .stat-pill {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 0.7rem 0.8rem;
        text-align: center;
        background: var(--bg-secondary);
    }
    .stat-pill .stat-label {
        display: block;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 0.2rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .stat-pill strong {
        font-size: 0.95rem;
        color: var(--text);
        word-break: break-word;
    }
    .detail-side-card {
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 1.2rem;
        background: var(--bg-card);
        position: sticky;
        top: 100px;
    }
    .detail-side-card h2 {
        margin: 0 0 0.65rem;
        font-size: 1.2rem;
    }
    .detail-side-card p {
        margin: 0 0 1rem;
        color: var(--text-muted);
    }
    .detail-side-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.55rem;
    }
    .detail-side-card li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.94rem;
        color: var(--text);
    }
    .detail-side-card li i {
        color: #22c55e;
        margin-top: 0.18rem;
    }
    .side-actions {
        display: grid;
        gap: 0.6rem;
        margin-top: 1rem;
    }

    .section-head {
        text-align: center;
        margin-bottom: 1.4rem;
    }
    .section-head h2 {
        margin: 0 0 0.6rem;
    }
    .section-head p {
        margin: 0;
        color: var(--text-muted);
    }
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
    }
    .feature-item {
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg-card);
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }
    .feature-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--primary), var(--accent, #ec4899));
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
    }
    .feature-item h3 {
        margin: 0;
        font-size: 0.98rem;
        line-height: 1.35;
    }
    .detail-cta {
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 2rem 1.2rem;
        background: radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.11), transparent 40%), var(--bg-card);
    }
    .detail-cta h2 {
        margin: 0 0 0.75rem;
        font-size: clamp(1.5rem, 3vw, 2rem);
    }
    .detail-cta p {
        margin: 0 0 1.2rem;
        color: var(--text-muted);
    }

    @media (max-width: 1024px) {
        .detail-layout {
            grid-template-columns: 1fr;
        }
        .detail-side-card {
            position: static;
            top: auto;
        }
    }
    @media (max-width: 680px) {
        .demo-detail-hero {
            padding: 112px 0 52px;
        }
        .preview-stats {
            grid-template-columns: 1fr;
        }
        .preview-overlay-actions {
            left: 0.75rem;
            right: 0.75rem;
            bottom: 0.75rem;
        }
        .preview-overlay-actions .btn {
            width: 100%;
            justify-content: center;
        }
    }


/* ============================================
   DEMOS COMPARE PAGE
   ============================================ */
.compare-hero {
        padding: 120px 0 52px;
        text-align: center;
        background:
            radial-gradient(circle at 10% 15%, rgba(99, 102, 241, 0.14), transparent 36%),
            radial-gradient(circle at 88% 15%, rgba(236, 72, 153, 0.12), transparent 38%),
            var(--bg);
        border-bottom: 1px solid var(--border);
    }
    .compare-kicker {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.7rem;
        font-size: 0.8rem;
    }
    .compare-hero h1 {
        margin: 0 0 0.75rem;
        font-size: clamp(2rem, 4vw, 3.1rem);
        line-height: 1.1;
    }
    .compare-hero p {
        margin: 0 auto;
        max-width: 700px;
        color: var(--text-muted);
    }
    .compare-toolbar-wrap {
        padding: 1.2rem 0 0;
    }
    .compare-toolbar {
        padding: 1rem;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
        gap: 0.8rem;
        align-items: end;
    }
    .toolbar-field label {
        display: block;
        font-size: 0.82rem;
        margin-bottom: 0.45rem;
        color: var(--text-muted);
    }
    .compare-select {
        width: 100%;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        border-radius: 12px;
        padding: 0.72rem 0.8rem;
    }
    .swap-btn {
        height: 44px;
        white-space: nowrap;
    }
    .compare-content {
        padding-top: 1.2rem;
    }
    .compare-toolbar-wrap .container,
    .compare-content .container {
        width: min(96vw, 1860px);
        max-width: min(96vw, 1860px);
    }
    .compare-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem;
    }
    .compare-panel {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--bg-card);
        min-height: 760px;
    }
    .compare-image-wrap {
        position: relative;
        height: clamp(430px, 62vh, 760px);
        overflow: hidden;
        border-bottom: 1px solid var(--border);
        background: var(--bg-hover);
    }
    .compare-live-frame {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        background: #000;
    }
    .compare-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .compare-empty-image {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        background: linear-gradient(135deg, rgba(99,102,241,.09), rgba(236,72,153,.08));
    }
    .compare-empty-image i {
        font-size: 1.5rem;
    }
    .compare-industry {
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.4);
        background: rgba(15,23,42,0.65);
        color: #fff;
        font-size: 0.75rem;
        letter-spacing: 0.03em;
    }
    .compare-body {
        padding: 1rem;
    }
    .compare-body h2 {
        font-size: 1.28rem;
        margin: 0 0 0.5rem;
    }
    .compare-body p {
        color: var(--text-muted);
        margin: 0 0 0.8rem;
        line-height: 1.55;
    }
    .compare-features {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.45rem;
    }
    .compare-features li {
        display: flex;
        gap: 0.5rem;
        align-items: flex-start;
        color: var(--text);
        font-size: 0.9rem;
    }
    .compare-features i {
        color: #22c55e;
        margin-top: 0.1rem;
    }
    .compare-actions {
        margin-top: 0.95rem;
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;
    }
    .compare-placeholder {
        min-height: 520px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.4rem;
        color: var(--text-muted);
    }
    .compare-placeholder i {
        font-size: 2.3rem;
        margin-bottom: 0.9rem;
        color: var(--primary);
        opacity: 0.9;
    }
    .compare-placeholder h3 {
        margin: 0 0 0.5rem;
        color: var(--text);
    }
    .compare-footer-actions {
        margin-top: 1rem;
        display: flex;
        justify-content: center;
    }
    @media (max-width: 992px) {
        .compare-grid {
            grid-template-columns: 1fr;
        }
        .compare-toolbar {
            grid-template-columns: 1fr;
        }
        .compare-toolbar-wrap .container,
        .compare-content .container {
            width: min(96vw, 900px);
            max-width: min(96vw, 900px);
        }
        .compare-image-wrap {
            height: min(62vh, 560px);
        }
        .compare-panel {
            min-height: 620px;
        }
        .swap-btn {
            width: 100%;
        }
    }


/* ============================================
   DEMOS PREVIEW PAGE
   ============================================ */
:root{
            --dc-demo-accent:#6d5efc;
            --dc-demo-accent2:#22d3ee;
        }
        .preview-bar{
            border-bottom: 1px solid var(--border);
            box-shadow: 0 12px 40px rgba(0,0,0,.35);
        }
        .logo-icon{
            background: linear-gradient(135deg,var(--dc-demo-accent),var(--dc-demo-accent2));
        }
        .preview-logo-img{
            height: 52px;
            width: auto;
            display: block;
            border-radius: 0;
            object-fit: contain;
        }
        .purchase-btn{
            background: linear-gradient(135deg,var(--dc-demo-accent),var(--dc-demo-accent2));
            border: 0;
        }
        .dc-quote-fab{
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 2147483646;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 999px;
            color: #0b0f17;
            background: linear-gradient(135deg,var(--dc-demo-accent),var(--dc-demo-accent2));
            box-shadow: 0 16px 50px rgba(0,0,0,.45);
            cursor: pointer;
            user-select: none;
            font-weight: 700;
        }
        .dc-quote-fab i{color:#0b0f17}
        .dc-quote-modal{
            position: fixed;
            inset: 0;
            z-index: 2147483647;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(0,0,0,.55);
            backdrop-filter: blur(8px);
        }
        .dc-quote-modal.open{display:flex}
        .dc-quote-card{
            width: min(520px, 100%);
            background: rgba(16, 20, 30, .92);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(0,0,0,.6);
        }
        .dc-quote-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255,255,255,.10);
        }
        .dc-quote-title{
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .dc-quote-title strong{color:#fff;font-size:15px}
        .dc-quote-title span{color:rgba(255,255,255,.7);font-size:12px}
        .dc-quote-close{
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            color: rgba(255,255,255,.85);
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.06);
        }
        .dc-quote-body{padding: 14px 16px}
        .dc-quote-grid{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .dc-quote-field{display:flex;flex-direction:column;gap:6px}
        .dc-quote-field label{color:rgba(255,255,255,.75);font-size:12px}
        .dc-quote-field input,.dc-quote-field textarea{
            width: 100%;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.06);
            padding: 10px 12px;
            color: #fff;
            outline: none;
        }
        .dc-quote-field textarea{min-height: 110px;resize: vertical}
        .dc-quote-actions{
            display:flex;
            gap: 10px;
            align-items:center;
            justify-content:flex-end;
            padding: 12px 16px 16px;
        }
        .dc-quote-submit{
            border-radius: 12px;
            padding: 10px 14px;
            font-weight: 800;
            color: #0b0f17;
            background: linear-gradient(135deg,var(--dc-demo-accent),var(--dc-demo-accent2));
            cursor: pointer;
            border: 0;
        }
        .dc-quote-status{
            margin-right: auto;
            color: rgba(255,255,255,.78);
            font-size: 12px;
            min-height: 16px;
        }
        .dc-demo-watermark{
            position: fixed;
            left: 16px;
            bottom: 16px;
            z-index: 2147483646;
            padding: 8px 10px;
            border-radius: 12px;
            background: rgba(0,0,0,.35);
            border: 1px solid rgba(255,255,255,.10);
            color: rgba(255,255,255,.88);
            font-size: 12px;
            backdrop-filter: blur(6px);
        }
        .dc-demo-watermark b{color:#fff}
        @media (max-width: 520px){
            .dc-quote-grid{grid-template-columns:1fr}
        }
        body.dc-embed-preview .preview-bar,
        body.dc-embed-preview .dc-demo-watermark,
        body.dc-embed-preview .dc-quote-fab,
        body.dc-embed-preview .dc-quote-modal {
            display: none !important;
        }
        body.dc-embed-preview .iframe-container {
            padding-top: 0 !important;
            height: 100vh !important;
        }
        body.dc-embed-preview .preview-canvas {
            height: 100vh !important;
            border-radius: 0 !important;
            margin-top: 0 !important;
            width: 100% !important;
            box-shadow: none !important;
        }


/* ============================================
   DOCS INDEX PAGE
   ============================================ */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}
.doc-card {
    display: flex;
    align-items: center;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s;
}
.doc-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}
.doc-icon {
    font-size: 24px;
    color: var(--primary);
    margin-right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.doc-content h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--text);
}
.read-more {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.doc-card:hover .read-more {
    color: var(--primary);
}


/* ============================================
   DOCS SINGLE PAGE
   ============================================ */
.docs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    align-items: start;
}
.docs-sidebar {
    position: sticky;
    top: 100px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}
.docs-sidebar h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.docs-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.docs-nav li + li {
    margin-top: 0.5rem;
}
.docs-nav a {
    display: block;
    padding: 0.72rem 0.9rem;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.docs-nav a:hover,
.docs-nav a.is-active {
    color: var(--text);
    background: color-mix(in srgb, var(--bg-card) 85%, transparent);
    transform: translateX(2px);
}
.customer-site-layout {
    --site-primary: #4f46e5;
    --site-accent: #22c55e;
    --site-bg: #f8fafc;
    --site-card: rgba(255,255,255,0.88);
    --site-text: #0f172a;
    --site-muted: #475569;
    --site-border: rgba(148,163,184,0.18);
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--site-text);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--site-primary) 18%, transparent) 0, transparent 42%),
        radial-gradient(circle at right 15% top 20%, color-mix(in srgb, var(--site-accent) 18%, transparent) 0, transparent 35%),
        linear-gradient(180deg, #ffffff 0%, var(--site-bg) 100%);
    min-height: 100vh;
}
.customer-site-layout a { color: inherit; text-decoration: none; }
.customer-site-layout .shell { max-width: 1180px; margin: 0 auto; padding: 28px 20px 56px; }
.customer-site-layout .nav {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 22px; border: 1px solid var(--site-border); border-radius: 24px;
    background: rgba(255,255,255,0.76); backdrop-filter: blur(22px);
    box-shadow: 0 14px 40px rgba(15,23,42,0.05);
    margin-bottom: 28px;
}
.customer-site-layout .brand { display:flex; align-items:center; gap:14px; min-width:0; }
.customer-site-layout .brand-mark {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--site-primary) 28%, transparent);
    overflow:hidden;
}
.customer-site-layout .brand-mark img { width:100%; height:100%; object-fit:cover; }
.customer-site-layout .brand-copy { min-width:0; }
.customer-site-layout .brand-copy strong { display:block; font-size:1rem; line-height:1.2; }
.customer-site-layout .brand-copy span { display:block; color:var(--site-muted); font-size:.85rem; margin-top:2px; }
.customer-site-layout .nav-links { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.customer-site-layout .nav-links a {
    padding: 10px 14px; border-radius: 999px; color: var(--site-muted); font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.customer-site-layout .nav-links a:hover, .customer-site-layout .nav-links a.is-active {
    background: rgba(255,255,255,0.92); color: var(--site-text); transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.customer-site-layout .hero {
    padding: 28px 0 12px;
    display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.customer-site-layout .hero h1 { margin:0; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing:-0.03em; line-height:1.02; }
.customer-site-layout .hero p { margin:12px 0 0; max-width:760px; color:var(--site-muted); font-size:1rem; line-height:1.7; }
.customer-site-layout .glass {
    border:1px solid var(--site-border); background: rgba(255,255,255,0.74);
    backdrop-filter: blur(24px);
    box-shadow: 0 18px 42px rgba(15,23,42,0.05);
}
.customer-site-layout .panel { border-radius: 30px; padding: 24px; }
.customer-site-layout .grid { display:grid; gap:22px; }
.customer-site-layout .pill {
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
    font-size:.82rem; font-weight:700; color:var(--site-muted);
    background: rgba(255,255,255,0.92); border:1px solid var(--site-border);
}
.customer-site-layout .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 18px;
    border-radius: 999px; background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    color:#fff; font-weight:700; box-shadow: 0 10px 24px color-mix(in srgb, var(--site-primary) 28%, transparent);
}
.customer-site-layout .meta { display:flex; gap:10px; flex-wrap:wrap; color:var(--site-muted); font-size:.92rem; }
.customer-site-layout .stack { display:flex; flex-direction:column; gap:16px; }
.customer-site-layout .rich-content { color: var(--site-muted); line-height: 1.8; font-size: 1rem; }
.customer-site-layout .rich-content h2, .customer-site-layout .rich-content h3, .customer-site-layout .rich-content h4 { color: var(--site-text); line-height:1.15; letter-spacing:-0.02em; }
.customer-site-layout .rich-content img { max-width:100%; border-radius:24px; }
.customer-site-layout .split { display:grid; grid-template-columns: minmax(0, 1fr) 300px; gap:24px; align-items:start; }
.customer-site-layout .sidebar-card { padding:20px; border-radius:24px; }
@media (max-width: 900px) {
    .customer-site-layout .nav { flex-direction:column; align-items:stretch; }
    .customer-site-layout .split { grid-template-columns: 1fr; }
}
/* Invoice page now uses a dedicated page stylesheet. */


/* ============================================
   TOOLS EMI PAGE
   ============================================ */
.dc-emi-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.25rem;
}

.dc-emi-card {
    padding: 1.25rem;
}

.dc-emi-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dc-emi-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.dc-emi-input,
.dc-emi-select {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text);
    outline: none;
}

.dc-emi-input:focus,
.dc-emi-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.dc-emi-help {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dc-emi-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.dc-emi-results-title {
    margin-bottom: 0.75rem;
}

.dc-emi-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.dc-emi-result-label {
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .dc-emi-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dc-emi-form-grid {
        grid-template-columns: 1fr;
    }
}





/* ============================================
   END OF GLOBAL STYLES
   ============================================ */
.read-more:hover { gap: 0.75rem; }
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
}
.page-info { color: var(--text-muted); }

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-content h2 {
        font-size: 1.2rem;
    }
}

/* End of Consolidated Styles */

/* ============================================
   GLOBAL LAYOUT FIXES (POST-CONSOLIDATION)
   ============================================ */

/* 1. Fix Stuck Preloader Dismissal (Added !important) */
.preloader.hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out !important;
}

/* 1.1 Ensure Spinner also hides if it has a separate class */
.spinner.hide {
    display: none !important;
}

/* 2. Keep shared wrappers fluid without breaking page-specific grid/flex layouts */
.hero-content, 
.about-hero-content,
.pricing-hero .container,
.portfolio-hero .container,
.services-hero .container,
.shell {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    min-width: min(100vw, 320px);
}

.hero-title, 
.about-hero h1,
.pricing-hero h1,
.portfolio-hero h1,
.services-hero h1 {
    width: 100%;
    white-space: normal;
}

/* 3. Navigation Visibility */
.nav-menu a.nav-link.is-active {
    color: var(--primary) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

[data-theme="dark"] .nav-menu a.nav-link.is-active {
    color: #818cf8 !important;
}

/* ============================================
   END OF GLOBAL FIXES
   ============================================ */

/* ============================================
   FINAL PUBLIC HERO + TITLE OVERRIDES
   Keep this block last so the shared marketing pages
   do not get overridden by earlier page-specific rules.
   ============================================ */

.gradient-text,
.hero-gradient,
.services-hero-gradient,
.portfolio-hero-gradient,
.careers-hero-gradient,
.page-hero__title .gradient-text,
.hero .gradient-text,
.about-hero .gradient-text {
    background-image: var(--public-title-gradient) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
}

.btn-primary,
.purchase-btn,
.portfolio-btn.primary,
.btn-plan.primary,
.dc-quote-submit,

.btn-outline,
.portfolio-btn.secondary,
.btn-plan,

.btn-primary:hover,
.purchase-btn:hover,
.portfolio-btn.primary:hover,
.btn-plan.primary:hover,
.dc-quote-submit:hover,
.btn-outline:hover,
.portfolio-btn.secondary:hover,
.btn-plan:hover,
.btn-outline.active {
    background-image: var(--public-brand-gradient) !important;
    background-color: transparent !important;
    border-color: var(--public-brand-border) !important;
    color: var(--public-brand-ink) !important;
    box-shadow: 0 20px 42px rgba(219, 93, 205, 0.22), 0 12px 28px rgba(239, 195, 145, 0.18) !important;
}

.btn-primary i,
.btn-outline i,
.purchase-btn i,
.portfolio-btn i,
.dc-quote-submit i {
    color: currentColor !important;
}

.card-icon,
.stat-icon,
.ci-icon,
.icon-wrap,
.ab-impact-icon,
.ab-principle-icon,
.service-arrow,
.pf-action-btn,
.portfolio-empty-icon,
.demo-preview-fallback i,
.sale-popup-close {
    background-image: var(--public-brand-gradient) !important;
    background-color: transparent !important;
    border-color: var(--public-brand-border) !important;
    color: var(--public-brand-ink) !important;
    box-shadow: 0 12px 28px rgba(219, 93, 205, 0.16), 0 8px 20px rgba(239, 195, 145, 0.12) !important;
}

.section-label,
.marketing-kicker,
.page-hero__kicker,
.services-hero-label,
.portfolio-kicker,
.careers-hero-label,
.demo-badge,
.portfolio-category,
.lane-step strong,
.faq-question:hover,
.faq-question i,
.service-link:hover,
.pf-industry {
    color: var(--primary) !important;
}

.device-btn.active,
.help-bubble,
.back-to-top,
.tm-pagination .swiper-pagination-bullet-active,
.home-services-pagination .swiper-pagination-bullet-active,
.portfolio-pagination .swiper-pagination-bullet-active {
    background-image: var(--public-brand-gradient) !important;
    background-color: transparent !important;
    border-color: var(--public-brand-border) !important;
    color: var(--public-brand-ink) !important;
}

.hero-title,
.hero .hero-subtitle,
.hero .hero-buttons,
.about-hero-content,
.services-hero-content,
.portfolio-hero-content,
.pricing-hero-content,
.page-hero__inner,
.section-header,
.section-header .section-title,
.section-header .section-subtitle,
.section-header .section-label,
.services-header,
.services-header .section-title,
.services-header .section-subtitle,
.services-header .section-label,
.marketing-panel > div:first-child,
.marketing-panel > div:first-child .marketing-kicker,
.marketing-panel > div:first-child .marketing-title,
.marketing-panel > div:first-child .marketing-copy,
.ab-panel > .section-label,
.ab-panel > .ab-story-title,
.ab-panel > .ab-story-copy,
.ab-cta-box,
.portfolio-cta,
.services-cta,
.proof-strip {
    text-align: center !important;
}

.section-header .section-title,
.services-header .section-title,
.marketing-panel > div:first-child .marketing-title,
.ab-cta-title,
.ab-story-title {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero .hero-subtitle,
.section-header .section-subtitle,
.services-header .section-subtitle,
.marketing-panel > div:first-child .marketing-copy,
.ab-panel > .ab-story-copy,
.portfolio-cta p,
.services-cta p {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero .hero-buttons,
.ab-badges,
.portfolio-cta-actions,
.services-cta-actions {
    justify-content: center !important;
}

#typed-text {
    min-width: 14ch;
}

.typed-cursor {
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 768px) {
    #typed-text {
        min-width: 10ch;
    }
}

/* Homepage cinematic intro refinements */
body.home-page .home-cinematic-intro__lockup {
    --dock-scale: 0.3;
    width: clamp(220px, 22vw, 292px);
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(0.94);
}

body.home-page .home-cinematic-intro__lockup.is-visible {
    transform: translate(-50%, -50%) scale(1);
    transition:
        opacity 760ms cubic-bezier(.16, 1, .3, 1),
        filter 760ms cubic-bezier(.16, 1, .3, 1),
        transform 1040ms cubic-bezier(.16, 1, .3, 1);
}

body.home-page .home-cinematic-intro__lockup.is-docking {
    transition:
        transform 1680ms cubic-bezier(.16, .96, .18, 1),
        opacity 1080ms ease,
        filter 1080ms ease;
}

body.home-page .home-cinematic-intro__lockup::before {
    inset: -18%;
}

body.home-page .home-cinematic-intro__mark {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
}

body.home-page .home-cinematic-intro__mark img {
    position: absolute;
    inset: 0;
    width: 280%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    filter: drop-shadow(0 20px 42px rgba(0, 0, 0, 0.38));
}

body.home-page .navbar .logo-dock-target {
    position: absolute;
    left: 25px;
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
}

body.home-page.home-intro-active .navbar .logo.has-brand-image .logo-image-wrap {
    opacity: 0;
    transform: translateY(-6px) scale(0.82);
}

body.home-page .navbar .logo.has-brand-image .logo-image-wrap {
    transition: opacity 680ms ease, transform 1180ms cubic-bezier(.16, .96, .18, 1);
}

@media (max-width: 900px) {
    body.home-page .home-cinematic-intro__lockup {
        width: clamp(166px, 22vw, 218px);
    }
}

@media (max-width: 640px) {
    body.home-page .home-cinematic-intro__lockup {
        width: clamp(150px, 40vw, 190px);
    }

    body.home-page .navbar .logo-dock-target {
        left: 22px;
        width: 40px;
        height: 40px;
    }
}

/* Homepage cinematic intro */
html.home-intro-pending,
html.home-intro-pending body.home-page {
    overflow: hidden;
}

body.home-page .home-cinematic-intro {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: clamp(24px, 4vw, 40px);
    background:
        radial-gradient(circle at 20% 18%, rgba(118, 92, 255, 0.16), transparent 20%),
        radial-gradient(circle at 82% 22%, rgba(240, 85, 182, 0.18), transparent 20%),
        radial-gradient(circle at 50% 50%, rgba(24, 28, 52, 0.92), rgba(7, 9, 18, 0.98) 48%, rgba(2, 3, 8, 1) 100%),
        linear-gradient(180deg, #070814 0%, #03040a 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 620ms ease, visibility 620ms ease;
}


html.home-intro-pending body.home-page .home-cinematic-intro,
body.home-page.home-intro-active .home-cinematic-intro {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.home-page .home-cinematic-intro.is-hiding,
body.home-page .home-cinematic-intro.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.home-page .home-cinematic-intro__letterbox {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    height: clamp(36px, 5vw, 62px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(0, 0, 0, 0.74));
    pointer-events: none;
}

body.home-page .home-cinematic-intro__letterbox--top {
    top: 0;
}

body.home-page .home-cinematic-intro__letterbox--bottom {
    bottom: 0;
    transform: scaleY(-1);
}

body.home-page .home-cinematic-intro__flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(118, 92, 255, 0.18), rgba(240, 85, 182, 0.1));
    mix-blend-mode: screen;
}

body.home-page .home-cinematic-intro__flash.is-brand {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.3), transparent 26%),
        linear-gradient(135deg, rgba(118, 92, 255, 0.22), rgba(240, 85, 182, 0.2));
}

body.home-page .home-cinematic-intro__flash.is-active {
    animation: homeIntroFlash 560ms cubic-bezier(.22, 1, .36, 1);
}

body.home-page .home-cinematic-intro__stage {
    position: relative;
    z-index: 3;
    width: min(1120px, calc(100vw - 56px));
    display: grid;
    place-items: center;
    text-align: center;
}

body.home-page .home-cinematic-intro__word {
    --home-intro-word-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 215, 160, 0.95) 16%, rgba(214, 110, 216, 0.98) 52%, rgba(108, 114, 255, 0.96) 100%);
    margin: 0;
    max-width: 14ch;
    font-family: "Outfit", "Inter", sans-serif;
    font-size: clamp(3.2rem, 11vw, 8.9rem);
    line-height: 0.94;
    font-weight: 900;
    letter-spacing: -0.08em;
    text-transform: uppercase;
    white-space: pre-line;
    user-select: none;
    opacity: 0;
    filter: blur(22px);
    transform: translate3d(0, 72px, 0) scale(0.9);
    text-shadow:
        0 0 20px rgba(203, 95, 232, 0.06),
        0 0 44px rgba(122, 92, 255, 0.04);
    background: var(--home-intro-word-gradient);
    background-size: 180% 180%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    will-change: opacity, transform, filter;
    transition:
        opacity 460ms cubic-bezier(.22, 1, .36, 1),
        filter 460ms cubic-bezier(.22, 1, .36, 1),
        transform 760ms cubic-bezier(.16, 1, .3, 1),
        letter-spacing 760ms cubic-bezier(.16, 1, .3, 1),
        text-shadow 520ms cubic-bezier(.22, 1, .36, 1),
        background-position 1000ms ease;
}

body.home-page .home-cinematic-intro__word.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
    letter-spacing: -0.045em;
    animation: homeIntroWordRise 620ms cubic-bezier(.14, .86, .2, 1) both;
    text-shadow:
        0 0 24px rgba(214, 110, 216, 0.12),
        0 0 52px rgba(118, 92, 255, 0.08);
    background-position: 100% 50%;
}

body.home-page .home-cinematic-intro__word.is-brand {
    letter-spacing: -0.04em;
    --home-intro-word-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(118, 92, 255, 0.92) 28%, rgba(203, 95, 232, 0.98) 62%, rgba(240, 85, 182, 0.98) 100%);
    background: var(--home-intro-word-gradient);
    background-size: 180% 180%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 46px rgba(203, 95, 232, 0.18);
}

body.home-page .home-cinematic-intro__word.is-tagline {
    max-width: min(17ch, calc(100vw - 72px));
    font-size: clamp(1.2rem, 2.1vw, 1.9rem);
    line-height: 1.08;
    letter-spacing: 0.18em;
    font-weight: 700;
    --home-intro-word-gradient: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(239,195,145,0.94) 18%, rgba(203,95,232,0.94) 62%, rgba(118,92,255,0.9) 100%);
    background: var(--home-intro-word-gradient);
    background-size: 180% 180%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
        0 0 18px rgba(214, 110, 216, 0.12),
        0 0 32px rgba(118, 92, 255, 0.08);
}

body.home-page .home-cinematic-intro__word.is-rewritten {
    animation: none !important;
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
}

body.home-page .home-cinematic-intro__word.is-tech-rewrite {
    max-width: min(22ch, calc(100vw - 64px));
    filter: none;
    transform: translate3d(0, 0, 0) scale(1);
    white-space: nowrap;
    animation: none !important;
    text-shadow:
        0 0 18px rgba(214, 110, 216, 0.12),
        0 0 34px rgba(118, 92, 255, 0.08);
}

body.home-page .home-cinematic-intro__word.is-tech-rewrite::before {
    content: "";
    position: absolute;
    inset: -14% -10%;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, rgba(122, 92, 255, 0.1), transparent 54%),
        radial-gradient(circle at 52% 50%, rgba(240, 85, 182, 0.06), transparent 60%);
    opacity: 0.62;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: homeIntroRewritePulse 980ms cubic-bezier(.16, 1, .3, 1) both;
}

body.home-page .home-cinematic-intro__rewrite-rail {
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    white-space: nowrap;
}

body.home-page .home-cinematic-intro__rewrite-glyph {
    position: relative;
    display: inline-grid;
    place-items: start center;
    overflow: hidden;
    width: var(--glyph-width, 0.66em);
    min-width: var(--glyph-width, 0.66em);
    height: 1.08em;
}

body.home-page .home-cinematic-intro__rewrite-char {
    grid-area: 1 / 1;
    display: block;
    background: var(--home-intro-word-gradient);
    background-size: 180% 180%;
    background-position: center center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: inherit;
    will-change: transform, opacity, filter;
}

body.home-page .home-cinematic-intro__rewrite-char--from {
    animation: homeIntroGlyphOut 760ms cubic-bezier(.2, .92, .24, 1) both;
    animation-delay: var(--rewrite-delay, 0ms);
}

body.home-page .home-cinematic-intro__rewrite-char--to {
    opacity: 0;
    transform: translate3d(0, 1.05em, 0) scale(0.96);
    filter: blur(6px);
    animation: homeIntroGlyphIn 760ms cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--rewrite-delay, 0ms) + 28ms);
}

body.home-page .home-cinematic-intro__word.is-exiting {
    opacity: 0;
    filter: blur(18px);
    transform: translate3d(0, -56px, 0) scale(1.03);
    letter-spacing: 0.08em;
    animation: homeIntroWordLiftOut 360ms cubic-bezier(.42, 0, .74, .18) both;
}

body.home-page .home-cinematic-intro__word::after {
    content: "";
    position: absolute;
    inset: -10% auto -10% -16%;
    width: 18%;
    opacity: 0;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.08) 22%, rgba(255,255,255,0.74) 50%, rgba(255,255,255,0.14) 76%, transparent 100%);
    transform: translateX(-160%) skewX(-18deg);
    mix-blend-mode: screen;
    pointer-events: none;
}

body.home-page .home-cinematic-intro__word.is-sweeping::after {
    animation: homeIntroWordSweep 880ms cubic-bezier(.16, 1, .3, 1) forwards;
}

body.home-page .home-cinematic-intro__word.is-cleared {
    opacity: 0;
    visibility: hidden;
}

body.home-page .home-cinematic-intro__lockup {
    --dock-x: 0px;
    --dock-y: 0px;
    --dock-scale: 0.24;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 4;
    width: min(640px, 82vw);
    opacity: 0;
    filter: blur(18px);
    transform: translate(-50%, -50%) scale(0.88);
    transform-origin: center;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

body.home-page .home-cinematic-intro__lockup::before {
    content: "";
    position: absolute;
    inset: -14% -10%;
    z-index: -1;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, rgba(214, 110, 216, 0.28), transparent 52%),
        radial-gradient(circle at 50% 54%, rgba(118, 92, 255, 0.22), transparent 58%);
    opacity: 0;
    transition: opacity 520ms ease;
}

body.home-page .home-cinematic-intro__lockup.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
    transition:
        opacity 620ms cubic-bezier(.22, 1, .36, 1),
        filter 620ms cubic-bezier(.22, 1, .36, 1),
        transform 820ms cubic-bezier(.16, 1, .3, 1);
}

body.home-page .home-cinematic-intro__lockup.is-visible::before,
body.home-page .home-cinematic-intro__lockup.is-holding::before {
    opacity: 1;
    animation: homeIntroAura 1800ms ease-in-out infinite alternate;
}

body.home-page .home-cinematic-intro__lockup.is-docking {
    transition:
        transform 1280ms cubic-bezier(.2, 1, .22, 1),
        opacity 900ms ease,
        filter 900ms ease;
    transform: translate(calc(-50% + var(--dock-x)), calc(-50% + var(--dock-y))) scale(var(--dock-scale));
}

body.home-page .home-cinematic-intro__lockup.is-fading {
    opacity: 0;
    filter: blur(4px);
    transition:
        opacity 420ms cubic-bezier(.22, 1, .36, 1),
        filter 420ms cubic-bezier(.22, 1, .36, 1),
        transform 420ms cubic-bezier(.22, 1, .36, 1) !important;
}

body.home-page .home-cinematic-intro__lockup.is-docking.is-fading {
    transform: translate(calc(-50% + var(--dock-x)), calc(-50% + var(--dock-y))) scale(calc(var(--dock-scale) * 0.9)) !important;
}

body.home-page .home-cinematic-intro__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2vw, 22px);
}

body.home-page .home-cinematic-intro__brand-icon {
    position: relative;
    width: clamp(92px, 8vw, 124px);
    height: clamp(92px, 8vw, 124px);
    flex: 0 0 auto;
    overflow: hidden;
}

body.home-page .home-cinematic-intro__brand-icon img {
    position: absolute;
    inset: 0;
    width: 280%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.34));
}

body.home-page .home-cinematic-intro__brand-text {
    display: grid;
    align-content: center;
    gap: 6px;
    text-transform: uppercase;
    line-height: 0.9;
}

body.home-page .home-cinematic-intro__brand-primary {
    font-family: "Outfit", "Inter", sans-serif;
    font-size: clamp(2.3rem, 5vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -0.06em;
    color: rgba(255, 255, 255, 0.98);
    white-space: nowrap;
}

body.home-page .home-cinematic-intro__brand-accent {
    background: var(--public-title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body.home-page .home-cinematic-intro__brand-secondary {
    font-family: "Outfit", "Inter", sans-serif;
    font-size: clamp(1rem, 1.45vw, 1.24rem);
    font-weight: 700;
    letter-spacing: 0.34em;
    color: rgba(255, 255, 255, 0.78);
    padding-left: 0.18em;
}

body.home-page.home-intro-active .navbar .logo.has-brand-image .logo-image-wrap {
    opacity: 0;
    transform: translateY(-4px) scale(0.86);
}

body.home-page .navbar .logo.has-brand-image .logo-image-wrap {
    transition: opacity 520ms ease, transform 820ms cubic-bezier(.22, 1, .36, 1);
}

body.home-page.home-intro-ready .navbar .logo.has-brand-image .logo-image-wrap {
    opacity: 1;
    transform: none;
}

@keyframes homeIntroFlash {
    0% {
        opacity: 0;
    }
    18% {
        opacity: 0.64;
    }
    100% {
        opacity: 0;
    }
}

@keyframes homeIntroAura {
    0% {
        transform: scale(0.96);
        filter: blur(0);
    }
    100% {
        transform: scale(1.05);
        filter: blur(6px);
    }
}

@media (max-width: 900px) {
    body.home-page .home-cinematic-intro__word {
        max-width: 11ch;
        font-size: clamp(3.1rem, 15vw, 6.8rem);
    }

    body.home-page .home-cinematic-intro__lockup {
        width: min(520px, 88vw);
    }

    body.home-page .home-cinematic-intro__brand {
        gap: 14px;
    }

    body.home-page .home-cinematic-intro__brand-icon {
        width: clamp(78px, 16vw, 100px);
        height: clamp(78px, 16vw, 100px);
    }

    body.home-page .home-cinematic-intro__brand-primary {
        font-size: clamp(1.9rem, 7vw, 3rem);
    }

    body.home-page .home-cinematic-intro__brand-secondary {
        font-size: 0.92rem;
        letter-spacing: 0.24em;
    }
}

@media (max-width: 640px) {
    body.home-page .home-cinematic-intro__stage {
        width: calc(100vw - 40px);
    }

    body.home-page .home-cinematic-intro__word {
        max-width: 10ch;
        font-size: clamp(2.6rem, 16vw, 4.8rem);
        letter-spacing: -0.1em;
    }

    body.home-page .home-cinematic-intro__lockup {
        width: min(420px, 92vw);
    }

    body.home-page .home-cinematic-intro__brand {
        gap: 10px;
    }

    body.home-page .home-cinematic-intro__brand-primary {
        font-size: clamp(1.52rem, 7.5vw, 2.1rem);
    }

    body.home-page .home-cinematic-intro__brand-secondary {
        font-size: 0.72rem;
        letter-spacing: 0.18em;
    }
}

/* ===== END frontend.css ===== */

/* SOURCE: frontend-renderers.css */

.cc-track { position: absolute; cursor: pointer; inset: 0; background-color: #334155; transition: 0.3s; border-radius: 24px; }
.cc-track:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: #94a3b8; transition: 0.3s; border-radius: 50%; }

.dc-identity-card {
    width: 350px;
    background: #fff;
    font-family: sans-serif;
    overflow: hidden;
}

.dc-identity-card--academic {
    height: 500px;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.dc-identity-card__header {
    color: #fff;
    padding: 30px 20px;
    text-align: center;
}

.dc-identity-card__site-name {
    font-weight: 800;
    font-size: 1.2rem;
}

.dc-identity-card__site-label {
    font-size: 0.7rem;
    opacity: 0.7;
    text-transform: uppercase;
}

.dc-identity-card__avatar-shell {
    text-align: center;
}

.dc-identity-card__avatar-shell--academic { margin-top: -40px; }
.dc-identity-card__avatar-ring {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.dc-identity-card__avatar-ring--academic {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: inline-block;
    border: 5px solid #fff;
}

.dc-identity-card__avatar-ring--corporate {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
}

.dc-identity-card__avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dc-identity-card__body { text-align: center; padding: 20px; }
.dc-identity-card__name { margin: 10px 0 5px; font-size: 1.5rem; }
.dc-identity-card__badge { display: inline-block; padding: 4px 16px; border-radius: 20px; font-weight: 800; font-size: 0.75rem; }
.dc-identity-card__meta-grid {
    margin-top: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: left;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 12px;
    font-size: 0.8rem;
}

.dc-identity-card__meta-wide { grid-column: span 2; }
.dc-identity-card__meta-label { opacity: 0.5; font-size: 0.6rem; }
.dc-identity-card__footer {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dc-identity-card__disclaimer { font-size: 0.6rem; opacity: 0.5; }
.dc-identity-card__qr { width: 60px; height: 60px; border-radius: 8px; }

.dc-identity-card--corporate {
    height: 220px;
    border: 1px solid #333;
    border-radius: 8px;
    display: flex;
}

.dc-identity-card__side {
    width: 120px;
    background: #1a237e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-identity-card__content {
    flex: 1;
    padding: 20px;
}

.dc-identity-card__content-head { font-weight: bold; color: #1a237e; }
.dc-identity-card__content-name { margin: 5px 0 0; font-size: 1.1rem; }
.dc-identity-card__content-role { color: #666; font-size: 0.8rem; margin-bottom: 10px; }
.dc-identity-card__content-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15px; }
.dc-identity-card__content-meta { font-size: 0.7rem; color: #999; }
.dc-identity-card__qr--small { width: 45px; height: 45px; }

.dc-analytics-report__footer { margin-top: 40px; color: #666; font-size: 12px; }
.dc-print-body { margin: 0; }
.dc-id-print-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.dc-page-break { page-break-after: always; }

@media (max-width: 640px) {
}

.preloader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s, visibility 0.5s;
}

.preloader.hide { opacity: 0; visibility: hidden; }

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: dc-spin 1s linear infinite;
}

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

.dc-runtime-empty {
    font-family: sans-serif;
    padding: 40px;
    text-align: center;
}

.dc-analytics-report {
    font-family: Arial, sans-serif;
    padding: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.dc-analytics-report__title { color: #6366f1; }
.dc-analytics-report__meta { margin-bottom: 1rem; }
.dc-analytics-report__stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.dc-analytics-report__stat-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.dc-analytics-report__stat-value { font-size: 32px; font-weight: bold; color: #333; }
.dc-analytics-report__stat-label { color: #666; margin-top: 5px; }
.dc-analytics-report table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.dc-analytics-report th,
.dc-analytics-report td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
.dc-analytics-report th { background: #6366f1; color: #fff; }
.dc-analytics-report__funnel { margin: 30px 0; display: grid; gap: 10px; }
.dc-analytics-report__funnel-step {
    padding: 15px;
    border-radius: 5px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
}

.dc-analytics-report__funnel-label {
    font-weight: 600;
    color: #312e81;
    margin-bottom: 0.5rem;
}

.dc-analytics-report__funnel-progress {
    width: 100%;
    height: 12px;
}

.dc-finance-report {
    font-family: Arial, sans-serif;
    padding: 32px;
    color: #0f172a;
}

.dc-finance-report__title { margin: 0 0 8px; }
.dc-finance-report__meta { color: #64748b; font-size: 12px; }
.dc-finance-report__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.dc-finance-report__card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px;
}

.dc-finance-report__label { color: #64748b; font-size: 11px; text-transform: uppercase; }
.dc-finance-report__value { font-size: 18px; font-weight: bold; margin-top: 6px; }
.dc-finance-report table { width: 100%; border-collapse: collapse; margin-top: 14px; }
.dc-finance-report th,
.dc-finance-report td { padding: 10px; text-align: left; border-bottom: 1px solid #e2e8f0; }
.dc-finance-report th { background: #f1f5f9; }

.dc-payslip {
    font-family: Arial, sans-serif;
    margin: 40px;
    color: #333;
}

.dc-payslip__header {
    border-bottom: 3px solid #6366f1;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.dc-payslip__company { font-size: 24px; font-weight: bold; color: #1a1a2e; }
.dc-payslip__title { font-size: 14px; color: #666; margin-top: 5px; }
.dc-payslip__info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.dc-payslip__info-box { background: #f8fafc; padding: 20px; border-radius: 8px; }
.dc-payslip__info-box h3 { margin: 0 0 15px; color: #6366f1; font-size: 14px; text-transform: uppercase; }
.dc-payslip__info-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.dc-payslip__info-label { color: #666; }
.dc-payslip__info-value { font-weight: 600; }
.dc-payslip table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.dc-payslip th { background: #6366f1; color: #fff; padding: 12px; text-align: left; }
.dc-payslip td { padding: 12px; border-bottom: 1px solid #e2e8f0; }
.dc-payslip__total-row { font-weight: bold; background: #f1f5f9; }
.dc-payslip__net-pay {
    font-size: 24px;
    color: #10b981;
    text-align: center;
    padding: 20px;
    background: #ecfdf5;
    border-radius: 8px;
}

.dc-payslip__footer { margin-top: 40px; text-align: center; color: #666; font-size: 12px; }

.dc-shipping-labels {
    font-family: Arial, sans-serif;
    background: #f7f7f7;
    padding: 12px;
}

.dc-shipping-labels__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
}

.dc-shipping-labels__label {
    background: #fff;
    border: 2px solid #111;
    border-radius: 8px;
    padding: 12px;
    page-break-inside: avoid;
}

.dc-shipping-labels__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.dc-shipping-labels__mono { font-family: Consolas, monospace; }
.dc-shipping-labels__small { font-size: 12px; color: #444; }
.dc-shipping-labels__strong { font-weight: 700; }

@media print {
    .dc-shipping-labels { background: #fff; padding: 0; }
    .dc-shipping-labels__label { break-inside: avoid; }
}


/* SOURCE: theme.css */
:root {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --accent: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
}

[data-theme="dark"] {
    --bg: #0a0a0f;
    --bg-secondary: #111118;
    --bg-card: #1a1a24;
    --bg-hover: #222234;
    --text: #ffffff;
    --text-muted: #9ca3af;
    --border: rgba(255,255,255,0.08);
}

[data-theme="light"] {
    --bg: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #e2e8f0;
    --text: #0f172a;
    --text-muted: #64748b;
    --border: rgba(0,0,0,0.1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    overflow-x: clip;
    transition: background 0.4s, color 0.4s;
}

/* Global section heading alignment */
.section-header {
    width: min(760px, calc(100% - 2rem));
    margin: 0 auto 3rem;
    text-align: center;
}

.section-label {
    display: inline-block;
    margin: 0 0 0.85rem;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 3.5vw, 3rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
    text-align: center;
    text-wrap: balance;
}

.section-subtitle {
    margin: 0 auto;
    color: var(--text-muted);
    max-width: 680px;
    text-align: center;
    text-wrap: pretty;
}

/* Unified page hero */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: 8.2rem 0 4.25rem;
    border-bottom: 1px solid var(--border);
    background:
        radial-gradient(1000px 400px at 5% -20%, rgba(99, 102, 241, 0.16), transparent 60%),
        radial-gradient(920px 420px at 100% 0%, rgba(236, 72, 153, 0.14), transparent 62%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, #000 12%) 0%, var(--bg) 100%);
}

.page-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 860px;
}

.page-hero__kicker {
    display: inline-block;
    margin: 0 0 0.95rem;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.page-hero__title {
    font-family: 'Outfit', sans-serif;
    margin: 0 auto 0.95rem;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-size: clamp(2rem, 5vw, 4rem);
    text-wrap: balance;
}

.page-hero__subtitle {
    margin: 0 auto;
    color: var(--text-muted);
    max-width: 720px;
    font-size: clamp(0.98rem, 1.8vw, 1.15rem);
    text-wrap: pretty;
}

.page-hero__actions {
    margin-top: 1.65rem;
    display: inline-flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
}

.page-hero__orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(55px);
    opacity: 0.5;
    pointer-events: none;
}

.page-hero__orb--one {
    width: 260px;
    height: 260px;
    left: -70px;
    top: 100px;
    background: rgba(99, 102, 241, 0.32);
}

.page-hero__orb--two {
    width: 320px;
    height: 320px;
    right: -100px;
    top: 50px;
    background: rgba(236, 72, 153, 0.25);
}

/* Auth hero */
.auth-page-hero {
    margin-top: 78px;
    padding: 2.1rem 0 0.65rem;
}

.auth-page-hero__inner {
    text-align: center;
    max-width: 780px;
}

.auth-page-hero__kicker {
    display: inline-block;
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
}

.auth-page-hero__title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-family: 'Outfit', sans-serif;
}

.auth-page-hero__subtitle {
    margin: 0 auto;
    color: var(--text-muted);
    max-width: 650px;
}

/* Footer */
.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--border);
    background:
        radial-gradient(800px 200px at 0% 0%, rgba(99, 102, 241, 0.1), transparent 60%),
        radial-gradient(780px 200px at 100% 0%, rgba(236, 72, 153, 0.08), transparent 60%),
        var(--bg-secondary);
}

.site-footer__wrap {
    padding: 3rem 1rem 1.5rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, minmax(120px, 1fr));
    gap: 2rem;
}

.site-footer__brand {
    margin-bottom: 1rem;
}

.site-footer__text {
    color: var(--text-muted);
    max-width: 340px;
}

.site-footer__social {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
}

.site-footer__social a {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.site-footer__social a:hover {
    transform: translateY(-2px);
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.site-footer h4 {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: 0.62rem;
}

.site-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--primary);
}

.site-footer__bar {
    margin-top: 1.7rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.84rem;
}

/* Unified modern footer */
.footer-modern {
    background: var(--bg-secondary);
    position: relative;
    padding-top: 0;
}

.footer-top-glow {
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f43f5e, #f59e0b);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 2rem 30px;
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
}

.footer-brand p {
    color: var(--text-muted);
    max-width: 300px;
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 8px;
}

.footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(99,102,241,0.1);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.footer-social a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

.footer-links-col h4 {
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.footer-links-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-col li {
    margin-bottom: 0.75rem;
}

.footer-links-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.footer-links-col a:hover {
    color: var(--primary);
    padding-left: 4px;
}

.footer-bottom-bar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    border-top: 1px solid var(--border);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Common Components */
.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white !important;
    padding: 12px 28px;
    border-radius: 50px;
    min-height: 3rem;
    font-weight: 600;
    transition: transform 0.3s, box-shadow 0.3s;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99,102,241,0.5), 0 0 20px rgba(236,72,153,0.3);
}

.btn-outline {
    background: transparent;
    color: var(--text);
    padding: 12px 28px;
    border: 2px solid var(--border);
    border-radius: 50px;
    text-decoration: none;
    min-height: 3rem;
    font-weight: 600;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-outline:hover {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.btn-primary i,
.btn-outline i,
.marketing-link-stack a i {
    width: 1rem;
    flex: 0 0 1rem;
    text-align: center;
    font-size: 0.95em;
}

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.marketing-link-stack a:focus-visible,
.marketing-point a:focus-visible,
.marketing-checkline a:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}

.gradient-text {
    background: var(--public-title-gradient, linear-gradient(135deg, var(--secondary), var(--accent), var(--primary-light), var(--primary)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section { padding: 72px 2rem; }
.section-alt { background: var(--bg-secondary); }

@media (max-width: 768px) {
    .section { padding: 48px 1rem; }
}
.container { max-width: 1400px; margin: 0 auto; }

/* Cards & Grid */
.grid { display: grid; gap: 2rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.4s;
}

/* Preloader */
.preloader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s, visibility 0.5s;
}
.preloader.hide { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Login/Auth Specifics */
input, textarea, select, .form-control {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: 1rem;
    width: 100%; /* Ensure full width */
    display: block;
}

@media (max-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.6rem;
    }
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.8rem;
    }
}

@media (max-width: 768px) {
    /* .section mobile padding defined at line ~420 above */
    .page-hero { padding: 7rem 0 3.4rem; }
    .page-hero__inner {
        box-sizing: border-box;
        padding-inline: 0.7rem;
    }
    .page-hero__subtitle {
        width: min(100%, 21rem);
        max-width: min(100%, 21rem);
    }
    .page-hero__actions {
        width: 100%;
    }
    .site-footer__grid {
        grid-template-columns: 1fr;
    }
    .site-footer__text {
        max-width: 100%;
    }
    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-brand p {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }
    .footer-social {
        justify-content: center;
    }
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.2);
}

/* Unified marketing shell */
.page-hero .container {
    position: relative;
    z-index: 2;
}

.page-hero--marketing {
    padding: 8.75rem 0 4.5rem;
    min-height: auto;
}

.page-hero--marketing .page-hero__inner {
    max-width: 860px;
}

.page-hero--marketing .page-hero__title {
    max-width: 15ch;
}

.page-hero--marketing .page-hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.16rem);
    line-height: 1.75;
}

.marketing-shell {
    position: relative;
    padding: 0 0 96px;
    background:
        radial-gradient(960px 280px at 8% 0%, rgba(99, 102, 241, 0.08), transparent 64%),
        radial-gradient(900px 240px at 100% 100%, rgba(236, 72, 153, 0.06), transparent 62%),
        var(--bg);
}

.marketing-grid {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.marketing-grid > * {
    min-width: 0;
}

.marketing-grid--content {
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
}

.marketing-grid--form {
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
}

.marketing-panel {
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(1.35rem, 2vw, 2rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 92%, transparent), var(--bg-card)),
        var(--bg-card);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

[data-theme="dark"] .marketing-panel {
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.24);
}

.marketing-panel--soft {
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 11%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)),
        var(--bg-card);
}

.marketing-panel--flush {
    padding: 0;
    overflow: hidden;
}

.marketing-stack {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.marketing-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.marketing-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0.35rem 0 0.75rem;
    text-wrap: balance;
}

.marketing-copy {
    color: var(--text-muted);
    line-height: 1.75;
    text-wrap: pretty;
}

.marketing-form {
    display: grid;
    gap: 1rem;
}

.marketing-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.marketing-field {
    display: grid;
    gap: 0.55rem;
}

.marketing-field--full {
    grid-column: 1 / -1;
}

.marketing-field > span,
.marketing-field > label {
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.marketing-field input,
.marketing-field select,
.marketing-field textarea {
    width: 100%;
    min-height: 58px;
    padding: 1rem 1.05rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.marketing-field input::placeholder,
.marketing-field textarea::placeholder {
    color: color-mix(in srgb, var(--text-muted) 82%, transparent);
    opacity: 1;
}

.marketing-field input:hover,
.marketing-field select:hover,
.marketing-field textarea:hover {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--border));
}

.marketing-field select {
    appearance: none;
    cursor: pointer;
    padding-right: 3.25rem;
    color: var(--text);
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 20px) calc(50% - 3px),
        calc(100% - 14px) calc(50% - 3px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
}

.marketing-field textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.65;
}

.marketing-field input:focus,
.marketing-field select:focus,
.marketing-field textarea:focus {
    border-color: color-mix(in srgb, var(--primary) 60%, #fff 40%);
    background: color-mix(in srgb, var(--bg-card) 96%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.marketing-checkline {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
}

.marketing-checkline input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 0.18rem;
    accent-color: var(--primary);
    flex: 0 0 18px;
}

.marketing-checkline span {
    flex: 1 1 auto;
}

.marketing-checkline a {
    color: var(--primary);
    text-decoration: none;
}

.marketing-checkline a:hover {
    text-decoration: underline;
}

.marketing-alert {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    border-radius: 16px;
    padding: 0.95rem 1rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
    line-height: 1.55;
}

.marketing-alert p,
.marketing-alert div {
    margin: 0;
}

.marketing-alert--error {
    color: #ef4444;
    border-color: color-mix(in srgb, #ef4444 45%, transparent);
    background: color-mix(in srgb, #ef4444 12%, transparent);
}

.marketing-alert--success {
    color: #10b981;
    border-color: color-mix(in srgb, #10b981 45%, transparent);
    background: color-mix(in srgb, #10b981 12%, transparent);
}

.marketing-points,
.marketing-link-stack,
.marketing-guidance {
    display: grid;
    gap: 0.85rem;
}

.marketing-point {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}

.marketing-point__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    background: color-mix(in srgb, var(--primary) 15%, transparent);
    color: var(--primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
    font-size: 1rem;
}

.marketing-point strong {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--text);
}

.marketing-point a,
.marketing-point span,
.marketing-guidance li {
    color: var(--text-muted);
    line-height: 1.6;
}

.marketing-link-stack a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.75rem 0.85rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
    overflow-wrap: anywhere;
}

.marketing-link-stack a:hover {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    transform: translateY(-2px);
}

.marketing-guidance {
    padding-left: 1.15rem;
}

.marketing-guidance li + li {
    margin-top: 0.1rem;
}

.marketing-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.marketing-stat {
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 1rem;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

.marketing-stat strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);
    line-height: 1;
    margin-bottom: 0.4rem;
}

.marketing-stat span {
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

.marketing-empty {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.marketing-map iframe {
    width: 100% !important;
    min-height: 260px;
    display: block;
    border: 0;
}

.marketing-rich-text {
    line-height: 1.75;
}

.marketing-rich-text h2,
.marketing-rich-text h3 {
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.02em;
}

.marketing-rich-text h2 {
    font-size: clamp(1.6rem, 3vw, 2rem);
    margin: 2rem 0 0.9rem;
}

.marketing-rich-text h3 {
    font-size: clamp(1.25rem, 2vw, 1.55rem);
    margin: 1.45rem 0 0.7rem;
}

.marketing-rich-text p,
.marketing-rich-text li,
.marketing-rich-text blockquote {
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .marketing-grid--content,
    .marketing-grid--form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .page-hero--marketing {
        padding: 7.4rem 0 3.35rem;
    }
    .page-hero--marketing .page-hero__title,
    .page-hero--marketing .page-hero__subtitle {
        max-width: min(100%, 14ch);
    }
    .page-hero--marketing .page-hero__subtitle {
        width: min(100%, 21rem);
        max-width: min(100%, 21rem);
    }
    .marketing-shell {
        padding-bottom: 72px;
    }
    .marketing-panel {
        border-radius: 22px;
        padding: 1.25rem;
    }
    .marketing-field input,
    .marketing-field select,
    .marketing-field textarea {
        min-height: 54px;
        padding: 0.92rem 0.95rem;
        font-size: 16px;
    }
    .marketing-field select {
        padding-right: 3rem;
    }
    .marketing-field textarea {
        min-height: 160px;
    }
    .marketing-point {
        gap: 0.75rem;
    }
    .marketing-point__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .marketing-form-grid,
    .marketing-stat-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 360px) {
    .page-hero {
        overflow: clip;
    }
    .page-hero__orb--one {
        width: 210px;
        height: 210px;
        left: -88px;
        top: 110px;
    }
    .page-hero__orb--two {
        width: 230px;
        height: 230px;
        right: -78px;
        top: 64px;
    }
    .marketing-panel {
        padding: 1.05rem;
        border-radius: 20px;
    }
}


/* SOURCE: main.css */
/*
 * DreamWebCrafts - Main Stylesheet
 * All-in-one local CSS with Tailwind utilities and custom styles
 */

/* ========================================
   CSS VARIABLES — defined in theme.css (single source of truth)
   Only non-theme utility aliases kept here.
   ======================================== */
:root {
    --color-primary: #6366F1;
    --color-secondary: #10B981;
    --color-accent: #F59E0B;
    --color-dark: #0F172A;
    --color-darker: #020617;
}

/* ========================================
   FONTS
   ======================================== */
@import url('./local-fonts.css');

/* ========================================
   CSS RESET & BASE
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { 
    scroll-behavior: smooth; 
    overflow-x: hidden !important; 
    overflow-y: auto !important;
    width: 100% !important; 
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body { 
    line-height: 1.6; 
    -webkit-font-smoothing: antialiased; 
    overflow-x: clip !important;
    overflow-y: visible;
    position: relative; 
    width: 100% !important;
    max-width: 100% !important;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
a, button, [role="button"], input[type="button"], input[type="submit"] { touch-action: manipulation; }

/* Global Container Fixes */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    max-width: 1400px;
}

@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Shared shell defaults without overriding page-specific hero/grid layouts */
.container,
.shell {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.hero-title, .pricing-hero h1, .portfolio-hero h1, .services-hero h1, .about-hero h1 {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: keep-all !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Shared section alignment defaults */
.section-header {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.section-label,
.section-title,
.section-subtitle {
    text-align: center;
}

@media (pointer: coarse) {
    a, button, [role="button"], .btn, .action-btn, .mobile-toggle, .nav-menu a, .profile-btn, .swiper-button-prev, .swiper-button-next {
        min-width: 44px;
        min-height: 44px;
    }
    input, select, textarea {
        font-size: 16px;
    }
}

/* ========================================
   TAILWIND-LIKE UTILITIES
   ======================================== */

/* Layout */
/* .container defined in Global Container Fixes above (max-width: 1400px) */

.max-w-7xl { max-width: 80rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-lg { max-width: 32rem; }
.max-w-sm { max-width: 24rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-16 { gap: 4rem; }

/* Display */
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }

/* Flexbox */
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Grid */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:flex { display: flex; }
    .md\:hidden { display: none; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:block { display: block; }
}

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.bottom-8 { bottom: 2rem; }
.right-8 { right: 2rem; }
.left-1\/2 { left: 50%; }
.-translate-x-1\/2 { transform: translateX(-50%); }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.z-\[9999\] { z-index: 9999; }

/* Typography */
.font-sans { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-display { font-family: 'Space Grotesk', sans-serif; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.text-6xl { font-size: 3.75rem; }
.text-7xl { font-size: 4.5rem; }
@media (min-width: 768px) {
    .md\:text-5xl { font-size: 3rem; }
    .md\:text-6xl { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
    .lg\:text-6xl { font-size: 3.75rem; }
    .lg\:text-7xl { font-size: 4.5rem; }
}
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-tight { line-height: 1.25; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Colors */
.text-white { color: #ffffff; }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-900 { color: #0f172a; }
.text-primary { color: #6366F1; }
.text-secondary { color: #10B981; }
.text-accent { color: #F59E0B; }
.text-pink-500 { color: #ec4899; }
.text-cyan-400 { color: #22d3ee; }
.text-green-400 { color: #4ade80; }
.text-red-400 { color: #f87171; }
.text-orange-400 { color: #fb923c; }
.text-blue-400 { color: #60a5fa; }

.bg-white { background-color: #ffffff; }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-slate-200 { background-color: #e2e8f0; }
.bg-slate-800 { background-color: #1e293b; }
.bg-dark { background-color: #0F172A; }
.bg-darker { background-color: #020617; }
.bg-primary { background-color: #6366F1; }
.bg-primary\/10 { background-color: rgba(99, 102, 241, 0.1); }
.bg-primary\/30 { background-color: rgba(99, 102, 241, 0.3); }
.bg-secondary { background-color: #10B981; }
.bg-secondary\/10 { background-color: rgba(16, 185, 129, 0.1); }
.bg-accent { background-color: #F59E0B; }
.bg-accent\/10 { background-color: rgba(245, 158, 11, 0.1); }
.bg-pink-500\/10 { background-color: rgba(236, 72, 153, 0.1); }
.bg-pink-500\/20 { background-color: rgba(236, 72, 153, 0.2); }

/* Gradients */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-dark { --tw-gradient-from: #0F172A; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-primary { --tw-gradient-from: #6366F1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pink-500 { --tw-gradient-from: #ec4899; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-slate-50 { --tw-gradient-from: #f8fafc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-slate-900 { --tw-gradient-to: #0f172a; }
.via-purple-600 { --tw-gradient-to: #9333ea; }
.to-darker { --tw-gradient-to: #020617; }
.to-pink-500 { --tw-gradient-to: #ec4899; }
.to-purple-600 { --tw-gradient-to: #9333ea; }
.to-slate-100 { --tw-gradient-to: #f1f5f9; }

/* Borders */
.border { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }
.border-t { border-top-width: 1px; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-white { border-color: #ffffff; }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.border-primary { border-color: #6366F1; }
.border-t-transparent { border-top-color: transparent; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }

/* Effects */
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.backdrop-blur { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.backdrop-blur-lg { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* Sizing */
.w-2 { width: 0.5rem; }
.w-3 { width: 0.75rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-16 { width: 4rem; }
.w-full { width: 100%; }
.h-2 { height: 0.5rem; }
.h-3 { height: 0.75rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.aspect-\[4\/3\] { aspect-ratio: 4 / 3; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }

/* Object Fit */
.object-cover { object-fit: cover; }

/* Transitions */
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }

/* Transforms */
.transform { transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rotate-2 { transform: rotate(2deg); }
.-rotate-45 { transform: rotate(-45deg); }
.translate-y-4 { transform: translateY(1rem); }
.scale-110 { transform: scale(1.1); }

/* Hover States */
.hover\:text-white:hover { color: #ffffff; }
.hover\:text-primary:hover { color: #6366F1; }
.hover\:text-secondary:hover { color: #10B981; }
.hover\:bg-white:hover { background-color: #ffffff; }
.hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-primary:hover { background-color: #6366F1; }
.hover\:bg-primary\/80:hover { background-color: rgba(99, 102, 241, 0.8); }
.hover\:bg-primary\/90:hover { background-color: rgba(99, 102, 241, 0.9); }
.hover\:border-white:hover { border-color: #ffffff; }
.hover\:border-white\/60:hover { border-color: rgba(255, 255, 255, 0.6); }
.hover\:border-primary\/30:hover { border-color: rgba(99, 102, 241, 0.3); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }
.hover\:rotate-0:hover { transform: rotate(0deg); }
.hover\:translate-y-0:hover { transform: translateY(0); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:translate-y-0 { transform: translateY(0); }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }

/* Visibility */
.invisible { visibility: hidden; }
.visible { visibility: visible; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Outline */
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }

/* Focus States */
.focus\:border-primary:focus { border-color: #6366F1; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }
.focus\:ring-primary\/20:focus { box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); }

/* Animations */
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce { animation: bounce 1s infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Brand logo glow utility */
.dc-brand-orbit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    --dc-logo-glow-anchor: min(92px, 24%);
    --dc-logo-glow-outer: clamp(86px, 16vw, 132px);
    --dc-logo-glow-inner: clamp(72px, 13vw, 110px);
}

.dc-brand-orbit::before {
    content: "";
    position: absolute;
    left: var(--dc-logo-glow-anchor);
    top: 50%;
    width: var(--dc-logo-glow-outer);
    height: var(--dc-logo-glow-outer);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 78%, #fff 22%), color-mix(in srgb, var(--accent) 76%, #fff 24%), color-mix(in srgb, #22d3ee 72%, #fff 28%), color-mix(in srgb, var(--primary) 78%, #fff 22%));
    filter: blur(15px);
    opacity: 0.48;
    z-index: -1;
    animation: dc-brand-orbit-spin 7.5s linear infinite;
    pointer-events: none;
}

.dc-brand-orbit::after {
    content: "";
    position: absolute;
    left: var(--dc-logo-glow-anchor);
    top: 50%;
    width: var(--dc-logo-glow-inner);
    height: var(--dc-logo-glow-inner);
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 48%, #fff 52%) 0%, color-mix(in srgb, var(--primary) 28%, transparent 72%) 45%, transparent 74%);
    filter: blur(12px);
    opacity: 0.35;
    z-index: -1;
    animation: dc-brand-heartbeat 1.55s ease-in-out infinite;
    pointer-events: none;
}

.dc-brand-orbit > img {
    display: block;
    position: relative;
    z-index: 1;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes dc-brand-orbit-spin {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(7px); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(7px); }
}
@keyframes dc-brand-heartbeat {
    0%, 100% { transform: translate(-50%, -50%) scale(0.84); opacity: 0.2; }
    18% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.5; }
    38% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.3; }
    60% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.44; }
}

/* ========================================
   CUSTOM COMPONENT STYLES
   ======================================== */

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-gradient { 
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
}

/* Gradient Text */
.gradient-text {
    background: var(--public-title-gradient, linear-gradient(135deg, var(--secondary), var(--accent), var(--primary-light), var(--primary)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass Effect */
.glass {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Service Card Hover */
.service-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.service-card:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Blob backgrounds */
.blob {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    filter: blur(60px);
}

/* Swiper custom */
.swiper-pagination-bullet-active {
    background: #6366F1 !important;
}

/* Smooth hover underline */
.hover-underline {
    position: relative;
}
.hover-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #6366F1;
    transition: width 0.3s ease;
}
.hover-underline:hover::after {
    width: 100%;
}

/* Grid Pattern Background */
.grid-pattern {
    background-image: linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* Space utilities */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }

/* Resize */
.resize-none { resize: none; }

/* Pseudo element pb */
.pb-12 { padding-bottom: 3rem; }

/* ========================================
   PREMIUM VISUAL EFFECTS (PHASE 5+)
   ======================================== */

/* Glassmorphism Cards */
.glass {
    background: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.75);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 3D Card Effect */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
}

.card-3d:hover {
    transform: translateY(-12px) rotateX(5deg) rotateY(-5deg);
}

.card-3d::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1) 100%);
    pointer-events: none;
    border-radius: inherit;
}

/* Shimmer Loading Effect */
.shimmer {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Button Glow Effect */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, var(--color-primary), transparent 30%);
    animation: rotate-glow 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.btn-glow:hover::before {
    opacity: 1;
}

@keyframes rotate-glow {
    100% { transform: rotate(360deg); }
}

/* Ripple Button Effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
}

.btn-ripple:active::after {
    transform: scale(0);
    opacity: 1;
    transition: 0s;
}

/* Focus Ring */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.focus-ring:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Floating Animation */
.float {
    animation: float 3s ease-in-out infinite;
}

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

/* Pulse Animation */
.pulse-dot {
    position: relative;
}

.pulse-dot::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: inherit;
    animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
    100% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
}

/* Gradient Text */
.text-gradient {
    background: linear-gradient(135deg, var(--color-primary), #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-gold {
    background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animated Gradient Border */
.gradient-border {
    position: relative;
    background: linear-gradient(var(--color-dark), var(--color-dark)) padding-box,
                linear-gradient(90deg, var(--color-primary), #ec4899, var(--color-primary)) border-box;
    border: 2px solid transparent;
    background-size: 200% 200%;
    animation: gradient-border 3s linear infinite;
}

@keyframes gradient-border {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Premium Card Hover */
.premium-card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-primary), transparent 50%);
    opacity: 0;
    transition: opacity 0.4s;
    z-index: -1;
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.25);
}

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

/* Mobile Touch Feedback */
@media (hover: none) {
    .touch-feedback:active {
        transform: scale(0.97);
        opacity: 0.8;
    }
}

/* Scroll Snap Container */
.snap-x {
    scroll-snap-type: x mandatory;
}

.snap-start {
    scroll-snap-align: start;
}

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
}

@supports (scrollbar-width: none) {
    .no-scrollbar {
        scrollbar-width: none; /* Firefox */
    }
}

/* Mobile Viewport Fix */
.min-h-screen-real {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

/* Safe Area Padding */
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
}

.safe-top {
    padding-top: env(safe-area-inset-top);
}

/* ========================================
   FRONTEND DESIGN IMPROVEMENTS (2026)
   ======================================== */

/* ----------------------------------------
   SCROLL PROGRESS INDICATOR
   ---------------------------------------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), #8b5cf6, #ec4899);
    z-index: 9999;
    transition: width 0.1s ease-out;
}

/* ----------------------------------------
   BACK TO TOP BUTTON
   ---------------------------------------- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    z-index: 1000;
}

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

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);
}

@media (max-width: 640px) {
    .back-to-top {
        right: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }

    .theme-toggle:not(.action-btn) {
        left: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: 44px;
        height: 44px;
    }
}

/* ----------------------------------------
   SKELETON LOADING
   ---------------------------------------- */
.skeleton {
    background: linear-gradient(90deg, #1a1a2e 25%, #252540 50%, #1a1a2e 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-text-sm {
    height: 0.75rem;
    width: 60%;
}

.skeleton-title {
    height: 1.5rem;
    width: 80%;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-image {
    aspect-ratio: 16/9;
    width: 100%;
}

.skeleton-card {
    padding: 1.5rem;
    background: rgba(26, 26, 46, 0.5);
    border-radius: 1rem;
}

@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ----------------------------------------
   SOCIAL SHARE BUTTONS
   ---------------------------------------- */
.social-share {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}

.share-btn.twitter { background: #1DA1F2; }
.share-btn.facebook { background: #4267B2; }
.share-btn.linkedin { background: #0077B5; }
.share-btn.whatsapp { background: #25D366; }
.share-btn.telegram { background: #0088cc; }
.share-btn.copy-link { background: #6366f1; }

.share-btn.twitter:hover { background: #0d8ddc; }
.share-btn.facebook:hover { background: #365899; }
.share-btn.linkedin:hover { background: #006097; }
.share-btn.whatsapp:hover { background: #1da851; }
.share-btn.telegram:hover { background: #0077b3; }
.share-btn.copy-link:hover { background: #4f46e5; }

/* ----------------------------------------
   READING TIME BADGE
   ---------------------------------------- */
.reading-time {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(99, 102, 241, 0.1);
    color: var(--color-primary);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.reading-time i {
    font-size: 0.875rem;
}

/* ----------------------------------------
   TABLE OF CONTENTS (Blog)
   ---------------------------------------- */
.table-of-contents {
    background: rgba(26, 26, 46, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.table-of-contents h4 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-of-contents li {
    margin-bottom: 0.5rem;
}

.table-of-contents a {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.table-of-contents a::before {
    content: '→';
    color: var(--color-primary);
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s;
}

.table-of-contents a:hover {
    color: var(--color-primary);
}

.table-of-contents a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------------------
   VISITOR DARK MODE TOGGLE
   ---------------------------------------- */
.theme-toggle:not(.action-btn) {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 48px;
    height: 48px;
    background: rgba(26, 26, 46, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1000;
}

.theme-toggle:not(.action-btn):hover {
    background: var(--color-primary);
    transform: rotate(180deg);
}

/* Light mode styles (when toggled) */
html[data-theme="light"] {
    --color-dark: #f8fafc;
    --color-darker: #ffffff;
}

html[data-theme="light"] body {
    background: #f8fafc;
    color: #1e293b;
}

html[data-theme="light"] .bg-dark,
html[data-theme="light"] .bg-slate-900 {
    background: white !important;
}

html[data-theme="light"] .text-white {
    color: #1e293b !important;
}

html[data-theme="light"] .text-gray-300,
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500 {
    color: #64748b !important;
}

html[data-theme="light"] .border-gray-800,
html[data-theme="light"] .border-gray-600,
html[data-theme="light"] .border-gray-700 {
    border-color: #e2e8f0 !important;
}

/* Dark-themed background utilities → light-mode safe equivalents */
html[data-theme="light"] .bg-gray-800\/50,
html[data-theme="light"] .bg-gray-800\/30,
html[data-theme="light"] .bg-gray-700\/50 {
    background: var(--bg-card) !important;
    border: 1px solid var(--border);
}

/* Form elements inside dark-themed wrappers — force readable text */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] select option {
    color: var(--text) !important;
    background: var(--bg) !important;
}

/* Indigo tinted backgrounds */
html[data-theme="light"] .bg-indigo-500\/10 {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

html[data-theme="light"] .bg-indigo-500\/20 {
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

html[data-theme="light"] .bg-green-500\/10 {
    background: rgba(16, 185, 129, 0.08);
}

html[data-theme="light"] .bg-green-500\/20 {
    background: rgba(16, 185, 129, 0.12);
}

/* ----------------------------------------
   CONTENT STATUS BADGES
   ---------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.draft {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.status-badge.review {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.status-badge.published {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.status-badge.rejected {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ----------------------------------------
   ENHANCED PRINT STYLES
   ---------------------------------------- */
@media print {
    .no-print,
    .back-to-top,
    .theme-toggle:not(.action-btn),
    .scroll-progress,
    nav,
    footer,
    .social-share { 
        display: none !important; 
    }
    
    body { 
        background: white !important; 
        color: black !important;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: black !important;
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    a {
        color: black !important;
        text-decoration: underline;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    /* Print header */
    @page {
        margin: 2cm;
    }
}



/* SOURCE: components\navbar.css */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0.95rem 2rem;
    background: rgba(10, 10, 15, 0.7);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar.scrolled {
    padding: 0.65rem 2rem;
    background: rgba(10, 10, 15, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo.has-brand-image::before,
.logo.has-brand-image::after {
    display: none;
}

.navbar .logo-image-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 62px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    isolation: isolate;
    flex-shrink: 0;
}

.navbar .logo-image-wrap::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    width: 68px;
    height: 68px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 78%, #fff 22%), color-mix(in srgb, var(--accent) 76%, #fff 24%), color-mix(in srgb, #22d3ee 72%, #fff 28%), color-mix(in srgb, var(--primary) 78%, #fff 22%));
    filter: blur(13px);
    opacity: 0.72;
    z-index: 0;
    animation: dc-logo-orbit 7.5s linear infinite;
    pointer-events: none;
}

.navbar .logo-image-wrap::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 50%, #fff 50%) 0%, color-mix(in srgb, var(--primary) 30%, transparent 70%) 48%, transparent 75%);
    filter: blur(10px);
    opacity: 0.5;
    z-index: 0;
    animation: dc-logo-heartbeat 1.55s ease-in-out infinite;
    pointer-events: none;
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.5rem;
    transition: transform 0.3s;
}

.navbar .logo-image {
    width: auto !important;
    height: 50px !important;
    max-width: min(236px, 18vw);
    border-radius: 0;
    object-fit: contain;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 18px rgba(15, 23, 42, 0.1));
}

.navbar .logo-image.logo-light {
    display: none;
}
.navbar .logo-image.logo-dark {
    display: block;
}

[data-theme="light"] .navbar .logo-image.logo-light {
    display: block;
}
[data-theme="light"] .navbar .logo-image.logo-dark {
    display: none;
}

[data-theme="dark"] .navbar .logo-image-wrap {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.logo:hover .logo-icon {
    transform: rotate(10deg);
}

.logo-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text);
}

.logo.has-brand-image .logo-text {
    display: none;
}

@keyframes dc-logo-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(6px); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(6px); }
}

@keyframes dc-logo-heartbeat {
    0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.2; }
    50% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.44; }
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    list-style: none;
}

.nav-menu a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.25s ease;
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
}

.nav-menu a:hover {
    color: var(--text);
}

.nav-menu a:not(.btn)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.25s ease;
}

.nav-menu a:not(.btn):hover::after {
    width: 100%;
}


.nav-menu a.nav-link.is-active {
    color: var(--primary) !important;
    font-weight: 700;
    opacity: 1;
}

.nav-menu a.nav-link.is-active::after {
    width: 100%;
}

.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
    position: relative;
    left: auto;
    bottom: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.theme-toggle i {
    line-height: 1;
    display: block;
    pointer-events: none;
}

button.action-btn.theme-toggle {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
}

.theme-toggle.no-print:not(.action-btn) {
    display: none !important;
}

.mobile-toggle {
    display: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 42px;
    height: 42px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 1.2rem;
    -webkit-tap-highlight-color: transparent;
}

.mobile-only-link {
    display: none;
}

@media (max-width: 1024px) {
    .mobile-only-link {
        display: block;
    }
}

@media (max-width: 1024px) {
    .nav-menu {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        background: var(--bg);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        border-bottom: 1px solid var(--border);
        transform: translateY(-120%);
        opacity: 0;
        transition: all 0.3s;
        max-height: calc(100vh - 84px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .nav-menu.active {
        transform: translateY(0);
        opacity: 1;
    }

    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.nav-profile {
    position: relative;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 6px 16px 6px 6px;
    cursor: pointer;
    transition: all 0.3s;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.profile-btn:hover {
    border-color: var(--primary);
}

.profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.profile-name {
    color: var(--text);
    font-weight: 500;
    font-size: 14px;
}

.profile-btn i {
    color: var(--text-muted);
    font-size: 10px;
}

.profile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 220px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    z-index: 100;
}

.dropdown-header {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.dropdown-header strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.dropdown-header span {
    font-size: 12px;
    color: var(--text-muted);
}

.profile-dropdown a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--text-muted) !important;
    font-size: 14px;
    transition: all 0.2s;
}

.profile-dropdown a:hover {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary) !important;
}

.profile-dropdown a i {
    width: 16px;
    text-align: center;
}

.dropdown-divider {
    border-top: 1px solid var(--border);
    margin: 4px 0;
}

.logout-link:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    text-decoration: none;
    position: relative;
    min-width: 44px;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}

.action-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.action-btn:focus-visible,
.mobile-toggle:focus-visible,
.delivery-btn:focus-visible,
.profile-btn:focus-visible,
.theme-toggle:focus-visible,
.nav-menu a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 75%, transparent);
    outline-offset: 2px;
}

.lang-switcher {
    position: relative;
}

.lang-switcher .action-btn {
    width: auto;
    padding: 0 12px;
    border-radius: 21px;
}

.lang-code {
    font-size: 11px;
    font-weight: 600;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    min-width: 160px;
    padding: 8px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.lang-option:hover {
    background: var(--bg-hover);
}

.lang-option.active {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary);
}

.lang-flag {
    min-width: 24px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--primary);
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    padding: 2px 6px;
}

.cart-btn {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: bold;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

@media (max-width: 1024px) {
    .nav-actions {
        gap: 8px;
    }

    .lang-switcher .action-btn {
        padding: 0 8px;
    }

    .lang-code {
        display: none;
    }

    .profile-name {
        display: none;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0.8rem 1rem;
    }
    .nav-actions {
        position: static;
        background: transparent;
        border-top: 0;
        padding: 0;
        justify-content: flex-end;
        gap: 8px;
    }

    .nav-actions .btn,
    .lang-switcher {
        display: none;
    }

    .nav-menu {
        top: 74px;
        padding: 1.3rem 1rem 1.5rem;
        gap: 0.9rem;
    }

    .nav-menu a {
        font-size: 0.95rem;
    }

    .logo-text {
        font-size: 1.05rem;
    }

    .navbar .logo-image {
        height: 50px !important;
        max-width: min(190px, 52vw);
    }

    .navbar .logo-image-wrap {
        height: 58px !important;
        padding: 0;
    }

    .navbar .logo-image-wrap::before {
        width: 52px;
        height: 52px;
        left: 22px;
    }

    .navbar .logo-image-wrap::after {
        width: 40px;
        height: 40px;
        left: 22px;
    }
}


/* SOURCE: components\footer.css */
/*
 * Footer Modern — canonical responsive overrides
 * Base styles in theme.css (.footer-modern, .footer-top-glow, .footer-content,
 * .footer-main, .footer-social, .footer-links-col, .footer-bottom-bar)
 */

.footer-modern .logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 1rem;
}

.footer-modern .logo-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 800;
    font-size: 1.2rem;
}

.logo.has-brand-image::before,
.logo.has-brand-image::after {
    display: none;
}

.footer-modern .logo-image-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 82px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: visible;
    isolation: isolate;
}

.footer-modern .logo-image-wrap::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    width: 78px;
    height: 78px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: conic-gradient(from 0deg, color-mix(in srgb, var(--primary) 80%, #fff 20%), color-mix(in srgb, var(--accent) 78%, #fff 22%), color-mix(in srgb, #22d3ee 72%, #fff 28%), color-mix(in srgb, var(--primary) 80%, #fff 20%));
    filter: blur(14px);
    opacity: 0.76;
    z-index: 0;
    animation: footer-logo-orbit 8s linear infinite;
    pointer-events: none;
}

.footer-modern .logo-image-wrap::after {
    content: "";
    position: absolute;
    left: 30px;
    top: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 48%, #fff 52%) 0%, color-mix(in srgb, var(--primary) 28%, transparent 72%) 45%, transparent 74%);
    filter: blur(12px);
    opacity: 0.56;
    z-index: 0;
    animation: footer-logo-heartbeat 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes footer-logo-orbit {
    from { transform: translate(-50%, -50%) rotate(0deg) translateX(4px); }
    to { transform: translate(-50%, -50%) rotate(360deg) translateX(4px); }
}

@keyframes footer-logo-heartbeat {
    0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.3; }
    50% { transform: translate(-50%, -50%) scale(1.0); opacity: 0.5; }
}

.footer-modern .logo-image {
    width: auto !important;
    height: 68px !important;
    max-width: none !important;
    border-radius: 0;
    object-fit: contain;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.1));
}

.footer-modern .logo-image.logo-light {
    display: none;
}

.footer-modern .logo-image.logo-dark {
    display: block;
}

[data-theme="light"] .footer-modern .logo-image.logo-light {
    display: block;
}

[data-theme="light"] .footer-modern .logo-image.logo-dark {
    display: none;
}

@media (max-width: 768px) {
    .footer-modern .logo-image-wrap {
        height: 68px;
        padding: 0;
    }
    .footer-modern .logo-image-wrap::before {
        left: 24px;
        width: 54px;
        height: 54px;
    }
    .footer-modern .logo-image-wrap::after {
        left: 24px;
        width: 40px;
        height: 40px;
    }
    .footer-modern .logo-image {
        height: 56px !important;
    }
}


/* SOURCE: components\frontend-widgets.css */
/* public\templates\partials\footer.php */
.live-help-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}
.help-trigger {
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    transition: transform 0.3s;
}
.help-trigger:hover { transform: scale(1.1); }
.help-modal {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden;
}
.help-modal.hidden { display: none; }
.help-header {
    background: var(--primary);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.help-header h3 { margin: 0; font-size: 16px; }
.help-header button { background: none; border: none; color: white; cursor: pointer; }
.help-body { padding: 10px; }
.help-option {
    display: flex;
    gap: 15px;
    padding: 15px;
    text-decoration: none;
    color: var(--text);
    border-radius: 10px;
    transition: background 0.3s;
}
.help-option:hover { background: var(--bg); }
.help-option i { font-size: 20px; color: var(--primary); }
.help-option strong { display: block; font-size: 14px; }
.help-option span { font-size: 12px; color: var(--text-muted); }

/* public\templates\partials\floating-popup.php */
.dc-popup {
    position: fixed;
    right: 20px;
    bottom: clamp(96px, 11vh, 148px);
    z-index: 9980;
    width: min(360px, calc(100vw - 32px));
    padding: 20px 20px 18px;
    color: #f8fafc;
    font-family: "Inter", sans-serif;
    background:
        linear-gradient(180deg, rgba(14, 18, 37, 0.94) 0%, rgba(18, 24, 46, 0.94) 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 20px;
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    opacity: 0;
    transform: translateY(18px) scale(0.98);
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.28s ease,
        transform 0.28s ease,
        visibility 0.28s ease;
}

.dc-popup--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

[data-theme="light"] .dc-popup {
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.96) 100%);
    border-color: rgba(15, 23, 42, 0.08);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.dc-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dc-popup-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="light"] .dc-popup-close {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(15, 23, 42, 0.04);
    color: #64748b;
}

[data-theme="light"] .dc-popup-close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}

.dc-popup-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dc-icon {
    width: fit-content;
    margin-bottom: 4px;
    font-size: 2rem;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 12px 24px rgba(124, 58, 237, 0.22));
}

.dc-text h3 {
    margin: 0 0 4px;
    padding-right: 34px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.dc-text p {
    margin: 0;
    color: rgba(226, 232, 240, 0.76);
    font-size: 0.8125rem;
    line-height: 1.5;
}

[data-theme="light"] .dc-text p {
    color: #475569;
}

.dc-popup-btn {
    display: block;
    padding: 11px 14px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    border-radius: 12px;
    box-shadow: 0 16px 32px rgba(99, 102, 241, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dc-popup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(99, 102, 241, 0.28);
}

@media (max-width: 768px) {
    .dc-popup {
        right: 16px;
        bottom: 112px;
        width: min(360px, calc(100vw - 24px));
        padding: 18px 18px 16px;
    }
}

@media (max-width: 480px) {
    .dc-popup {
        right: 12px;
        left: 12px;
        width: auto;
        bottom: 108px;
    }
}


/* SOURCE: components\cookie-consent.css */
/* ============================================================================
 * Compact floating popup card for public pages
 * ============================================================================ */





.cc-shell {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    position: relative;
}

.cc-copy {
    min-width: 0;
    padding-right: 2.35rem;
}

















@media (max-width: 767px) {

    .cc-shell {
        gap: 0.72rem;
        padding: 0.9rem;
    }

    .cc-copy {
        padding-right: 2rem;
    }





}

@media (max-width: 520px) {

}


/* SOURCE: frontend.css */
/* ============================================
   DreamWebCrafts Frontend Styles
   All page-specific CSS consolidated
   ============================================ */

/* Public pages should never render blank while waiting for scroll animation hooks. */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

:root {
    --public-title-gradient: linear-gradient(135deg, #f0d090 0%, #f0c0a0 20%, #e070c0 50%, #d050c0 76%, #c040a0 100%);
}

.section-title,
.marketing-title,
.ab-story-title,
.ab-cta-title,
.portfolio-cta h2,
.services-cta h2,
.proof-item strong {
    text-align: center;
}

.marketing-panel > div:first-child .marketing-kicker,
.marketing-panel > div:first-child .marketing-title,
.marketing-panel > div:first-child .marketing-copy,
.ab-panel > .section-label,
.ab-panel > .ab-story-title,
.ab-panel > .ab-story-copy,
.ab-cta-box,
.portfolio-cta,
.services-cta,
.proof-strip {
    text-align: center;
}

.marketing-panel > div:first-child .marketing-copy,
.ab-panel > .ab-story-copy,
.portfolio-cta p,
.services-cta p {
    margin-left: auto;
    margin-right: auto;
}

.ab-badges,
.portfolio-cta-actions,
.services-cta-actions {
    justify-content: center;
}

/* ============================================
   HOME PAGE
   ============================================ */
/* Homepage Specific Styles */
.btn-primary.home-btn {
    box-shadow: 0 15px 40px rgba(99,102,241,0.5), 0 0 20px rgba(236,72,153,0.3);
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 15px 40px rgba(99,102,241,0.5), 0 0 20px rgba(236,72,153,0.3); }
    50% { box-shadow: 0 15px 50px rgba(99,102,241,0.7), 0 0 30px rgba(236,72,153,0.5); }
}
.theme-toggle {
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s;
}
.theme-toggle:hover { background: var(--primary); color: white; }

/* Hero */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 2rem 80px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.05) 0%, transparent 40%);
}
#particles-js {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
}
.hero-content > * {
    min-width: 0;
}
.hero-content > .igp-106 {
    grid-column: 1 / -1;
    min-width: 0;
}
.hero-content > div:first-child {
    text-align: center;
}
.hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    word-wrap: break-word;
}
.hero .hero-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}
.hero .hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.hero .gradient-text {
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.tech-ribbon-wrap {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    min-width: 0;
}
.tech-ribbon {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 1rem 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 85%, transparent), color-mix(in srgb, var(--bg-secondary) 90%, transparent));
}
.tech-ribbon::before,
.tech-ribbon::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 72px;
    z-index: 2;
    pointer-events: none;
}
.tech-ribbon::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.tech-ribbon::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}
.tech-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 1rem;
    animation: tech-scroll 34s linear infinite;
    will-change: transform;
}
.tech-ribbon:hover .tech-track { animation-play-state: paused; }
.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-secondary) 95%, transparent);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.85rem;
    white-space: nowrap;
}
.tech-badge img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 20px;
}
.tech-badge-fallback {
    display: none;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex: 0 0 20px;
    font-size: 0.85rem;
}
@keyframes tech-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.hero-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 40px 100px rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden;
}
.hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    pointer-events: none;
}
.hero .code-block {
    font-family: monospace;
    font-size: 0.95rem;
    color: #e2e8f0;
    white-space: pre;
    line-height: 1.6;
    tab-size: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
.hero .code-block::after { content: none; }
.hero .code-block .keyword { color: #c084fc; }
.hero .code-block .string { color: #4ade80; }
.hero .code-block .func { color: #60a5fa; }

/* Services - Horizontal Card Layout */
.home-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.service-card { background: linear-gradient(160deg, color-mix(in srgb, var(--bg-card) 92%, var(--primary) 8%), var(--bg-card, var(--bg-secondary))); border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); border-radius: 20px; padding: 2px; transition: all 0.35s cubic-bezier(0.4,0,0.2,1); position: relative; overflow: hidden; height: 100%; }
.service-card::before { content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: linear-gradient(135deg, transparent, transparent); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor; transition: background 0.4s; pointer-events: none; }
.service-card::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0.95; pointer-events: none; }
.service-card:hover::before { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 56px color-mix(in srgb, var(--primary) 24%, transparent); }
.service-card-inner { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.1rem; align-items: flex-start; height: 100%; }
.service-cover { width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border)); background: var(--bg-secondary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 65%, transparent); }
.service-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-brand-badge { width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--bg-secondary) 94%, #fff 6%); border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border)); display: inline-flex; align-items: center; justify-content: center; padding: 9px; box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent); }
.service-brand-badge img { width: 100%; height: 100%; object-fit: contain; display: block; }
.service-brand-badge i { font-size: 1.1rem; color: var(--primary); }
.service-content { width: 100%; display: flex; flex-direction: column; flex: 1; }
.service-content h3 { font-family: 'Outfit', sans-serif; font-size: 1.02rem; font-weight: 700; margin-bottom: 0.4rem; line-height: 1.35; }
.service-content p { color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; margin-bottom: 0.7rem; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.8em; }
.service-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.service-tags span { background: rgba(99,102,241,0.08); color: var(--primary); font-size: 0.7rem; padding: 3px 8px; border-radius: 20px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.service-tags span i { font-size: 0.6rem; color: var(--success); }
.service-actions { margin-top: auto; padding-top: 0.78rem; display: flex; align-items: center; justify-content: space-between; }
.service-cta { display: inline-flex; gap: 0.35rem; align-items: center; color: var(--text); font-weight: 700; text-decoration: none; font-size: 0.78rem; }
.service-cta:hover { color: var(--primary); }
.service-arrow { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent)); font-size: 0.74rem; }
.home-services-swiper { max-width: 1280px; margin: 0 auto; padding: 0 0.2rem 2.2rem; }
.home-services-swiper .swiper-slide { height: auto; }
.home-services-swiper .service-card { height: 100%; }
.home-services-pagination .swiper-pagination-bullet { background: var(--text-muted); opacity: 0.35; }
.home-services-pagination .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }

/* Homepage Redesign Strip */
.solution-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.solution-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 18px; padding: 1.4rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.solution-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 16px 40px rgba(99,102,241,0.12); }
.solution-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; }
.solution-card p { color: var(--text-muted); font-size: .88rem; line-height: 1.55; }
.solution-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .8rem; color: #fff; }

.delivery-lane { max-width: 1200px; margin: 1.5rem auto 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.lane-step { border: 1px dashed var(--border); border-radius: 14px; padding: .9rem 1rem; background: var(--bg-card, var(--bg-secondary)); }
.lane-step strong { display: block; font-size: .82rem; color: var(--primary); margin-bottom: .25rem; }
.lane-step span { font-size: .84rem; color: var(--text-muted); }

/* Sale Popup */
.sale-popup-overlay { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.64); backdrop-filter: blur(4px); z-index: 1200; display: none; align-items: center; justify-content: center; padding: 1rem; }
.sale-popup-overlay.is-visible { display: flex; }
.sale-popup-card { width: min(560px, 95vw); border-radius: 20px; overflow: hidden; border: 1px solid rgba(99,102,241,0.35); background: var(--bg-card, #0b1220); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); }
.sale-popup-head { padding: 1.4rem 1.4rem .8rem; background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(236,72,153,0.2)); }
.sale-popup-body { padding: 1.1rem 1.4rem 1.4rem; }
.sale-popup-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: 1rem; }
.sale-popup-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.16); color: #fff; cursor: pointer; }

/* Stats Banner */
.stats-banner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 0; background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(236,72,153,0.08)); border: 1px solid var(--border); border-radius: 24px; padding: 2.5rem 3rem; backdrop-filter: blur(12px); position: relative; z-index: 1; }
.stat-item { text-align: center; flex: 1; padding: 0 1.5rem; }
.stat-icon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; margin: 0 auto 0.75rem; }
.stat-value { font-family: 'Outfit', sans-serif; font-size: 2.5rem; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; }
.stat-label { color: var(--text-muted); margin-top: 0.25rem; font-size: 0.85rem; }
.stat-divider { width: 1px; height: 60px; background: var(--border); flex-shrink: 0; }

/* Card Legacy Styles */
.card-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; font-size: 1.5rem; color: white; }

/* Portfolio */
.portfolio-item { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.portfolio-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; background: linear-gradient(135deg, var(--primary), var(--accent)); }
.portfolio-item:hover .portfolio-img { transform: scale(1.1); }
.portfolio-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); opacity: 0; transition: opacity 0.4s; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay h3 { color: white; font-size: 1.4rem; }
.portfolio-overlay p { color: rgba(255,255,255,0.8); }

/* Testimonials Swiper */
.testimonial-swiper { padding-bottom: 50px; overflow: hidden; }
.tm-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; position: relative; height: 100%; transition: all 0.3s; }
.tm-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 16px 48px rgba(99,102,241,0.1); }
.tm-quote { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2rem; opacity: 0.1; color: var(--primary); }
.tm-stars { color: #f59e0b; margin-bottom: 1rem; font-size: 0.9rem; letter-spacing: 2px; }
.tm-text { color: var(--text-muted); font-style: italic; line-height: 1.7; margin-bottom: 1.5rem; font-size: 0.95rem; }
.tm-author { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.tm-avatar { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.9rem; }
.tm-name { font-weight: 700; font-size: 0.95rem; }
.tm-role { color: var(--text-muted); font-size: 0.8rem; }
.tm-pagination .swiper-pagination-bullet { background: var(--text-muted); opacity: 0.4; }
.tm-pagination .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }

/* CTA Banner */
.cta-banner { background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899); border-radius: 24px; padding: 5rem 3rem; text-align: center; position: relative; overflow: hidden; margin: 0 2rem; }
.cta-pattern { position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 30px, rgba(255,255,255,0.03) 30px, rgba(255,255,255,0.03) 60px); }
.cta-content { position: relative; z-index: 1; }
.cta-content h2 { font-family: 'Outfit', sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 900; color: #fff; margin-bottom: 1rem; }
.cta-content p { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem; }

/* Contact Layout */
#contact { scroll-margin-top: 100px; }
.contact-layout { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; }
.contact-info-side { display: flex; flex-direction: column; gap: 1rem; }
.contact-info-card { display: flex; align-items: center; gap: 1rem; background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem 1.5rem; transition: all 0.3s; }
.contact-info-card:hover { border-color: var(--primary); transform: translateX(6px); box-shadow: 0 8px 24px rgba(99,102,241,0.1); }
.ci-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.ci-details h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 2px; }
.ci-details a, .ci-details span { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.ci-details a:hover { color: var(--primary); }
.contact-form-side { flex: 1; }
.contact-form-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 20px; padding: 2.5rem; }
.contact-form-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--text); }
.contact-form-card .marketing-field span { color: var(--text); font-weight: 600; font-size: 0.9rem; }
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea { color: var(--text); background: var(--bg); border: 1px solid var(--border); }
.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Footer Modern */
.footer-modern { background: var(--bg-secondary); position: relative; padding-top: 0; }
.footer-top-glow { height: 3px; background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899, #f43f5e, #f59e0b); }
.footer-content { max-width: 1400px; margin: 0 auto; padding: 60px 2rem 30px; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
.footer-brand p { color: var(--text-muted); max-width: 300px; margin-bottom: 1.5rem; }
.footer-modern .logo-image { width: auto; height: 66px; max-width: min(380px, 70vw); border-radius: 0; object-fit: contain; padding: 0; border: 0; background: transparent; }
.footer-modern .logo.has-brand-image .logo-text { display: none; }
.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; background: rgba(99,102,241,0.1); color: var(--text-muted); display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; font-size: 0.9rem; }
.footer-social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.footer-links-col h4 { font-weight: 700; margin-bottom: 1.5rem; font-size: 0.95rem; }
.footer-links-col ul { list-style: none; padding: 0; margin: 0; }
.footer-links-col li { margin-bottom: 0.75rem; }
.footer-links-col a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; }
.footer-links-col a:hover { color: var(--primary); padding-left: 4px; }
.footer-bottom-bar { max-width: 1400px; margin: 0 auto; padding: 2rem; border-top: 1px solid var(--border); text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* Platform & Hosting Redesign (Option C) */
.platform-container { max-width: 1200px; margin: 0 auto; }
.platform-cta-wrap { margin-top: 2.5rem; }
.platform-cta-btn { font-size: 1.1rem; padding: 1rem 2.5rem; font-weight: 700; }
.grid-3d { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; perspective: 1500px; }
.tilt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 32px; padding: 4rem 2rem 5.5rem; text-align: center; position: relative; transform-style: preserve-3d; transition: border-color 0.3s, box-shadow 0.3s; box-shadow: var(--card-shadow, 0 10px 30px rgba(0,0,0,0.3)); min-height: 320px; display: flex; flex-direction: column; align-items: center; }
.tilt-card:hover { border-color: var(--primary); box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
[data-theme="light"] .tilt-card:hover { box-shadow: 0 20px 50px rgba(99, 102, 241, 0.1); }
.icon-wrap { width: 80px; height: 80px; margin: 0 auto 2.5rem; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 24px; display: flex; align-items: center; justify-content: center; color: white; font-size: 2.2rem; transform: translateZ(50px); box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3); }
.tilt-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; transform: translateZ(30px); }
.tilt-card p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; margin: 0; transform: translateZ(20px); }
.card-stats { position: absolute; bottom: 2rem; left: 0; right: 0; display: flex; justify-content: center; gap: 1rem; transform: translateZ(15px); opacity: 0; transition: opacity 0.3s, transform 0.3s; }
.tilt-card:hover .card-stats { opacity: 1; transform: translateZ(15px) translateY(-5px); }
.stat-pill { background: rgba(99, 102, 241, 0.1); color: var(--primary); padding: 4px 12px; border-radius: 99px; font-size: 0.7rem; font-weight: 700; border: 1px solid rgba(99, 102, 241, 0.2); }
@media (max-width: 1024px) { .grid-3d { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3d { grid-template-columns: 1fr; } }

/* Responsive */
@media (max-width: 1024px) {
    .hero { 
        min-height: auto;
        padding: 100px 1.5rem 60px;
    }
    .hero-content { 
        grid-template-columns: 1fr;
        text-align: center;
        max-width: 100%;
        gap: 2rem;
    }
    .hero-content > .igp-106 {
        grid-column: auto;
    }
    .hero-title { 
        font-size: clamp(1.8rem, 9.5vw, 2.9rem);
        margin-bottom: 1.25rem;
        line-height: 1.15;
    }
    .hero-subtitle { 
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem;
    }
    .hero-buttons {
        justify-content: center;
    }
    .hero-card { 
        max-width: 480px;
        margin: 0 auto;
        padding: 1.5rem;
    }
    .code-block { 
        white-space: pre-wrap;
        word-break: break-word;
        font-size: 0.8rem;
        text-align: left;
        line-height: 1.5;
    }
    .home-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .solution-grid { grid-template-columns: 1fr 1fr; }
    .delivery-lane { grid-template-columns: 1fr 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: repeat(2, 1fr); }
    .stats-banner { flex-wrap: wrap; gap: 1rem; padding: 2rem 1.5rem; }
    .stat-divider { width: 100%; height: 1px; }
    .stat-item { flex: 0 0 calc(50% - 1rem); }
    .cta-banner { margin: 0 1rem; }
}
@media (max-width: 768px) {
    /* nav-menu show/hide handled by navbar.css transform */
    .home-services-grid { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: 1fr; }
    .service-card-inner { flex-direction: column; text-align: center; gap: 1rem; }
    .service-brand-badge { margin: 0 auto; }
    .service-tags { justify-content: center; }
    .solution-grid, .delivery-lane { grid-template-columns: 1fr; }
    .footer-main { grid-template-columns: 1fr; text-align: center; }
    .footer-brand p { max-width: none; }
    .footer-social { justify-content: center; }
    .form-row { grid-template-columns: 1fr; }
    .cta-banner { padding: 3rem 1.5rem; margin: 0; border-radius: 0; }
}

/* AOS Fallback Animation */
[data-aos] {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-aos].aos-init {
    opacity: 0;
    transform: translateY(30px);
}
[data-aos].aos-animate, .aos-initialized [data-aos].aos-animate {
    opacity: 1;
    transform: translateY(0);
}
/* Ensure hero elements are ALWAYS visible — GSAP + AOS fight on mobile */
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-buttons,
.hero .hero-card {
    opacity: 1 !important;
    visibility: visible !important;
}
.hero [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}
/* Portfolio Carousel */
.portfolio-swiper { padding-bottom: 50px; overflow: hidden; }
.pf-card { background: var(--bg-card, var(--bg-secondary)); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: all 0.3s; }
.pf-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px rgba(0,0,0,0.12); border-color: var(--primary); }
.pf-preview { position: relative; height: 200px; overflow: hidden; background: var(--bg-hover); }
.pf-chrome { height: 28px; display: flex; align-items: center; padding: 0 12px; gap: 6px; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); position: relative; z-index: 2; }
.pf-dot { width: 8px; height: 8px; border-radius: 50%; display: block; }
.pf-url { margin-left: 8px; font-size: 10px; color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.1); padding: 2px 10px; border-radius: 4px; }
.pf-image-wrap { width: 100%; height: calc(100% - 28px); position: relative; background: #fff; }
.pf-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.pf-card:hover .pf-image { transform: scale(1.04); }
.pf-image-fallback { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; color: var(--text-muted); background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.08)); font-size: 0.8rem; text-align: center; padding: 0.5rem; }
.pf-image-fallback i { font-size: 1.2rem; color: var(--primary); }
.pf-hover-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(0px); opacity: 0; transition: all 0.3s; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 10px; }
.pf-card:hover .pf-hover-overlay { opacity: 1; backdrop-filter: blur(4px); }
.pf-action-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.3s; transform: scale(0.8); }
.pf-card:hover .pf-action-btn { transform: scale(1); }
.pf-action-btn:hover { transform: scale(1.1) !important; }
.pf-action-secondary { background: rgba(255,255,255,0.9); color: var(--text); }
.pf-info { padding: 16px; }
.pf-industry { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary); font-weight: 700; display: block; margin-bottom: 4px; }
.pf-info h3 { font-size: 1rem; font-weight: 600; margin: 0; }
.pf-info h3 a { color: var(--text); text-decoration: none; transition: color 0.2s; }
.pf-info h3 a:hover { color: var(--primary); }
.portfolio-pagination .swiper-pagination-bullet { background: var(--text-muted); opacity: 0.55; width: 10px; height: 10px; }
.portfolio-pagination .swiper-pagination-bullet-active { background: var(--primary); opacity: 1; }

.contact-info-side iframe { width: 100% !important; border: 0; min-height: 200px; display: block; }


/* ============================================
   ABOUT PAGE
   ============================================ */
    :root {
--primary: #6366f1;
--accent: #ec4899;
--about-surface: var(--bg-secondary);
--about-glass: rgba(15, 23, 42, 0.04);
--about-glass-strong: rgba(15, 23, 42, 0.08);
--about-glass-border: var(--border);
--about-overlay: rgba(248, 250, 252, 0.9);
--about-image-grad-start: #e2e8f0;
--about-image-grad-end: #f8fafc;
--glow: 0 0 24px rgba(99, 102, 241, 0.18);
    }

    [data-theme="dark"] {
--about-surface: #0f172a;
--about-glass: rgba(255, 255, 255, 0.03);
--about-glass-strong: rgba(255, 255, 255, 0.07);
--about-glass-border: rgba(255, 255, 255, 0.08);
--about-overlay: rgba(15, 23, 42, 0.82);
--about-image-grad-start: #1e293b;
--about-image-grad-end: #0f172a;
--glow: 0 0 30px rgba(99, 102, 241, 0.3);
    }

    [data-theme="light"] {
--about-surface: var(--bg-secondary);
--about-glass: rgba(15, 23, 42, 0.02);
--about-glass-strong: rgba(15, 23, 42, 0.05);
--about-glass-border: var(--border);
--about-overlay: rgba(248, 250, 252, 0.9);
--about-image-grad-start: #e2e8f0;
--about-image-grad-end: #f8fafc;
--glow: 0 0 24px rgba(99, 102, 241, 0.18);
    }

    /* Hero Section */
    .about-hero {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 140px 0 100px;
background: var(--about-surface);
overflow: hidden;
    }

    #particles-js {
position: absolute;
inset: 0;
z-index: 1;
    }

    .hero-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
filter: blur(80px);
z-index: 0;
pointer-events: none;
    }

    .about-hero-content {
position: relative;
z-index: 2;
max-width: 900px;
text-align: center;
    }

    .about-hero h1 {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 5vw, 3.8rem);
font-weight: 900;
margin-bottom: 1.5rem;
line-height: 1.1;
word-wrap: break-word;
    }

    .gradient-text {
background: linear-gradient(135deg, var(--text) 0%, var(--primary) 50%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
    }

    .about-hero p {
font-size: 1.25rem;
color: var(--text-muted);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
    }

    /* Shared Section Headers */
    .section-header {
text-align: center;
margin-bottom: 50px;
    }

    .section-label {
color: var(--primary);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 0.82rem;
margin-bottom: 0.9rem;
display: block;
    }

    .section-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: -0.02em;
    }

    .section-subtitle {
color: var(--text-muted);
max-width: 700px;
margin: 1rem auto 0;
line-height: 1.7;
    }

    /* Main surface below hero */
    .ab-shell {
background:
    radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.08), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.07), transparent 45%),
    var(--about-surface);
    }

    /* Impact stats */
    .ab-impact {
padding: 90px 0 35px;
    }

    .ab-impact-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1rem;
    }

    .ab-impact-card {
position: relative;
background: linear-gradient(165deg, var(--about-glass), transparent);
border: 1px solid var(--about-glass-border);
border-radius: 22px;
padding: 26px 22px;
overflow: hidden;
backdrop-filter: blur(10px);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .ab-impact-card::before {
content: '';
position: absolute;
inset: -1px;
border-radius: inherit;
background: linear-gradient(120deg, var(--ab-accent, var(--primary)), transparent 55%);
opacity: 0.12;
pointer-events: none;
    }

.ab-impact-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--ab-accent, var(--primary)) 55%, white 45%);
    box-shadow: var(--glow);
}

.ab-impact-card--primary { --ab-accent: #6366f1; }
.ab-impact-card--sky { --ab-accent: #0ea5e9; }
.ab-impact-card--accent { --ab-accent: #ec4899; }
.ab-impact-card--success { --ab-accent: #22c55e; }

    .ab-impact-icon {
width: 44px;
height: 44px;
border-radius: 14px;
background: color-mix(in srgb, var(--ab-accent, var(--primary)) 18%, transparent);
color: var(--ab-accent, var(--primary));
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.9rem;
font-size: 1rem;
    }

    .ab-impact-number {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
line-height: 1;
margin-bottom: 0.45rem;
color: var(--text);
    }

    .ab-impact-label {
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 0.35rem;
color: var(--text);
    }

    .ab-impact-text {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
    }

    /* Story + timeline */
    .ab-story {
padding: 35px 0 95px;
    }

    .ab-story-grid {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
gap: 1.2rem;
    }

    .ab-panel {
background: var(--about-glass);
border: 1px solid var(--about-glass-border);
border-radius: 24px;
padding: 2rem;
backdrop-filter: blur(10px);
    }

    .ab-story-title {
font-family: 'Outfit', sans-serif;
font-weight: 800;
font-size: clamp(1.5rem, 3vw, 2rem);
margin: 0 0 1rem;
    }

    .ab-story-copy {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 1.2rem;
    }

    .ab-badges {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
    }

    .ab-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.42rem 0.75rem;
border-radius: 999px;
border: 1px solid var(--about-glass-border);
font-size: 0.8rem;
color: var(--text-muted);
background: color-mix(in srgb, var(--primary) 7%, transparent);
    }

    .ab-timeline {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.95rem;
    }

    .ab-timeline-item {
position: relative;
padding-left: 1.2rem;
    }

    .ab-timeline-item::before {
content: '';
position: absolute;
left: 0;
top: 0.45rem;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--accent));
box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent);
    }

    .ab-timeline-year {
font-family: 'Outfit', sans-serif;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 0.2rem;
    }

    .ab-timeline-title {
font-weight: 700;
margin-bottom: 0.22rem;
    }

    .ab-timeline-desc {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
    }

    /* Principles */
    .ab-principles {
padding: 0 0 95px;
    }

    .ab-principle-card {
height: 100%;
background: var(--about-glass);
border: 1px solid var(--about-glass-border);
border-radius: 20px;
padding: 1.8rem;
transition: transform 0.25s ease, border-color 0.25s ease;
    }

    .ab-principle-card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--primary) 50%, white 50%);
    }

    .ab-principle-icon {
width: 54px;
height: 54px;
border-radius: 16px;
margin-bottom: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: #fff;
background: linear-gradient(135deg, var(--primary), var(--accent));
    }

    .ab-principle-card h3 {
font-family: 'Outfit', sans-serif;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.75rem;
    }

    .ab-principle-card p {
color: var(--text-muted);
margin: 0;
line-height: 1.7;
    }

    /* CTA */
    .about-cta {
padding: 0 0 110px;
    }

    .ab-cta-box {
position: relative;
overflow: hidden;
border-radius: 34px;
border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--about-glass-border));
padding: 70px 32px;
text-align: center;
background: linear-gradient(150deg, rgba(99, 102, 241, 0.18), rgba(236, 72, 153, 0.12), rgba(15, 23, 42, 0.1));
    }

    .ab-cta-box::before {
content: '';
position: absolute;
inset: -25% -20%;
background: radial-gradient(circle at top right, rgba(236, 72, 153, 0.35), transparent 35%),
            radial-gradient(circle at bottom left, rgba(99, 102, 241, 0.35), transparent 38%);
pointer-events: none;
    }

    .ab-cta-content {
position: relative;
z-index: 1;
    }

    .ab-cta-title {
font-family: 'Outfit', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 900;
margin-bottom: 0.9rem;
    }

    .ab-cta-copy {
color: var(--text-muted);
max-width: 660px;
margin: 0 auto 1.8rem;
line-height: 1.8;
    }

    .ab-cta-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
    }

    .btn-gradient {
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff !important;
padding: 14px 30px;
border-radius: 999px;
font-weight: 700;
letter-spacing: 0.02em;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
transition: transform 0.25s ease, box-shadow 0.25s ease;
border: none;
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
    }

    .btn-gradient:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(99, 102, 241, 0.5);
    }

    .btn-soft {
padding: 14px 28px;
border-radius: 999px;
border: 1px solid var(--about-glass-border);
color: var(--text);
background: color-mix(in srgb, var(--about-glass) 80%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
text-decoration: none;
font-weight: 700;
    }

    .btn-soft:hover {
border-color: var(--primary);
color: var(--primary);
    }

    @media (max-width: 1100px) {
.ab-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ab-story-grid {
    grid-template-columns: 1fr;
}
    }

    @media (max-width: 768px) {
.ab-impact {
    padding-top: 70px;
}

.ab-impact-grid {
    grid-template-columns: 1fr;
}

.ab-panel {
    padding: 1.4rem;
}

.ab-cta-box {
    padding: 52px 20px;
    border-radius: 24px;
}
.btn-gradient, .btn-soft {
    width: 100%;
    max-width: 320px;
    margin: 0.25rem 0;
}
    }


/* ============================================
   SERVICES PAGE
   ============================================ */
.services-hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 130px 0 95px;
    overflow: hidden;
    background: radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 42%),
                radial-gradient(circle at 84% 16%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
                var(--bg-secondary);
}
#services-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.services-hero-glow {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: min(74vw, 760px);
    height: min(74vw, 760px);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.1) 28%, transparent 68%);
    filter: blur(70px);
}
.services-hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}
.services-hero-label {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
}
.services-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    word-wrap: break-word;
}
.services-hero-gradient {
    background: linear-gradient(135deg, var(--text) 5%, var(--primary) 55%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.services-hero p {
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 680px;
    margin: 0 auto 1.8rem;
    line-height: 1.7;
}
.services-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}
.services-showcase {
    padding-top: 90px;
}
.services-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.5rem;
}
.services-header .section-label {
    display: inline-block;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}
.services-header .section-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.9rem;
}
.services-header .section-subtitle {
    color: var(--text-muted);
    line-height: 1.7;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.service-card {
    border-radius: 22px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 10%, var(--bg-card)) 0%, var(--bg-card) 50%);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.2rem 1.2rem 0;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.service-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--service-accent) 55%, #fff 45%);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--service-accent) 22%, transparent);
}
.service-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0;
}
.service-brand-logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid color-mix(in srgb, var(--service-accent) 24%, var(--border));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--service-accent) 18%, transparent);
}
.service-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.service-brand-logo i {
    font-size: 1.35rem;
    color: var(--service-accent);
}
.service-index {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.service-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin-bottom: 0.65rem;
    line-height: 1.3;
    padding: 0;
}
.service-description {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
    padding: 0;
}
.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.45rem;
}
.service-features li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.service-features i {
    color: var(--success);
    font-size: 0.8rem;
}
.service-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.9rem 0 1.2rem;
    border-top: 1px dashed var(--border);
    transition: color 0.2s ease;
}
.service-link:hover {
    color: var(--primary);
}

.services-process {
    padding-top: 90px;
}
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.process-step {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 1.4rem;
    position: relative;
}
.process-num {
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}
.process-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.8rem;
}
.process-step h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
}
.process-step p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

.services-proof {
    padding-top: 45px;
}
.proof-strip {
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 1.6rem;
    background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.proof-item {
    text-align: center;
    flex: 1;
    padding: 0 1rem;
}
.proof-item strong {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.2rem);
    font-weight: 900;
    line-height: 1.1;
}
.proof-item span {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.proof-divider {
    width: 1px;
    height: 52px;
    background: var(--border);
    flex-shrink: 0;
}

.services-cta-wrap {
    padding-top: 55px;
}
.services-cta {
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 26px;
    padding: 3.1rem 1.4rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
}
.services-cta h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 900;
    margin-bottom: 0.8rem;
}
.services-cta p {
    color: var(--text-muted);
    margin: 0 auto 1.5rem;
    max-width: 680px;
}
.services-cta-actions {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
@media (max-width: 768px) {
    .services-hero {
        min-height: auto;
        padding: 100px 1rem 60px;
    }
    .services-hero h1 {
        font-size: clamp(2rem, 10vw, 2.6rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 0.75rem !important;
    }
    .services-header {
        text-align: center;
        margin-bottom: 2rem !important;
    }
    .services-header .section-label {
        margin-bottom: 0.5rem !important;
    }
    .services-header .section-title {
        font-size: clamp(1.6rem, 8vw, 2.1rem) !important;
        line-height: 1.2 !important;
    }
    .services-hero-actions {
        gap: 0.6rem;
    }
    .services-hero-actions .btn {
        width: 100%;
        max-width: 320px;
        margin: 0.25rem 0;
    }
    .services-grid {
        grid-template-columns: 1fr;
    }
    .process-grid {
        grid-template-columns: 1fr;
    }
    .proof-strip {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
    .proof-divider {
        width: 100%;
        height: 1px;
    }
    .proof-item {
        flex: 0 0 100%;
    }
}
@media (max-width: 1100px) and (min-width: 769px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ============================================
   SERVICE V3 PAGE
   ============================================ */
/* ===== HERO (identical to services.php) ===== */
        .services-hero {
            min-height: 78vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 130px 0 95px;
            overflow: hidden;
            background: radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 42%),
                        radial-gradient(circle at 84% 16%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
                        var(--bg-secondary);
        }
        #service-particles {
            position: absolute;
            inset: 0;
            z-index: 1;
        }
        .services-hero-glow {
            position: absolute;
            left: 50%;
            top: 46%;
            transform: translate(-50%, -50%);
            width: min(74vw, 760px);
            height: min(74vw, 760px);
            pointer-events: none;
            z-index: 0;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.1) 28%, transparent 68%);
            filter: blur(70px);
        }
        .services-hero-content {
            position: relative;
            z-index: 2;
            max-width: 860px;
            margin: 0 auto;
            text-align: center;
        }
        .svc-breadcrumb {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 1.2rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text-muted);
        }
        .svc-breadcrumb a { color: var(--primary); text-decoration: none; }
        .svc-breadcrumb i { font-size: 0.65rem; opacity: 0.5; }
        .services-hero-label {
            display: inline-block;
            margin-bottom: 1rem;
            font-size: 0.82rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--primary);
        }
        .services-hero h1 {
            font-family: 'Outfit', sans-serif;
            font-size: clamp(2.2rem, 9vw, 4.7rem);
            font-weight: 900;
            letter-spacing: -0.02em;
            line-height: 1.1;
            margin: 0 0 1.5rem;
            word-wrap: break-word;
        }
        .services-hero p {
            color: var(--text-muted);
            font-size: clamp(1rem, 2vw, 1.2rem);
            max-width: 680px;
            margin: 0 auto 1.8rem;
            line-height: 1.7;
        }
        .services-hero-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.8rem;
        }

        /* ═══════════════  DETAIL LAYOUT  ═══════════════ */
        .svc-detail-section { padding-top: 90px; }
        .svc-detail-grid {
            display: grid;
            grid-template-columns: 1fr 360px;
            gap: 1.5rem;
            align-items: start;
        }

        /* Overview card */
        .svc-overview-card {
            border-radius: 22px;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 10%, var(--bg-card)) 0%, var(--bg-card) 50%);
            padding: 2rem;
        }
        .svc-overview-head {
            display: flex;
            gap: 1.2rem;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        .svc-overview-head .section-label { margin-bottom: 0.3rem; }
        .svc-overview-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
        .service-brand-logo {
            width: 58px;
            height: 58px;
            border-radius: 16px;
            background: #ffffff;
            border: 1px solid color-mix(in srgb, var(--service-accent, var(--primary)) 24%, var(--border));
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px;
            flex-shrink: 0;
            box-shadow: 0 10px 26px color-mix(in srgb, var(--service-accent, var(--primary)) 18%, transparent);
        }
        .service-brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .service-brand-logo i { font-size: 1.35rem; color: var(--service-accent, var(--primary)); }

        .svc-hero-img-wrap {
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 1.5rem;
            border: 1px solid var(--border);
        }
        .svc-hero-img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            display: block;
        }
        .svc-overview-text {
            color: var(--text-muted);
            line-height: 1.8;
            font-size: 1.05rem;
            margin: 0;
        }

        /* Process cards (same style as services.php process-step) */
        .svc-sections-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .svc-process-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 18px;
            padding: 1.4rem;
            position: relative;
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
        }
        .svc-process-card:hover {
            transform: translateY(-6px);
            border-color: color-mix(in srgb, var(--service-accent) 55%, #fff 45%);
            box-shadow: 0 18px 34px color-mix(in srgb, var(--service-accent) 22%, transparent);
        }
        .svc-process-card .process-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--service-accent) 16%, transparent);
            color: var(--service-accent);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.8rem;
        }
        .svc-process-card h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.15rem;
            font-weight: 700;
            margin-bottom: 0.55rem;
        }
        .svc-process-card p {
            color: var(--text-muted);
            font-size: 0.92rem;
            line-height: 1.65;
            margin: 0;
        }

        /* ═══════════════  SIDEBAR  ═══════════════ */
        .svc-sidebar-sticky { position: sticky; top: 100px; display: grid; gap: 1rem; }

        .svc-features-card {
            border-radius: 22px;
            border: 1px solid var(--border);
            background: var(--bg-card);
            padding: 1.5rem;
        }
        .svc-features-card h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.2rem;
            font-weight: 800;
            margin-bottom: 1.2rem;
        }
        .svc-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
        .svc-checklist li {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-size: 0.95rem;
            font-weight: 500;
        }
        .svc-check-icon {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            background: color-mix(in srgb, var(--service-accent) 16%, transparent);
            color: var(--service-accent);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            flex-shrink: 0;
        }

        .svc-cta-card {
            border-radius: 22px;
            border: 1px solid var(--border);
            background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 8%, transparent), color-mix(in srgb, var(--accent, #ec4899) 6%, transparent));
            padding: 1.5rem;
            text-align: center;
        }
        .svc-cta-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.2rem; margin-bottom: 0.6rem; }
        .svc-cta-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.2rem; line-height: 1.6; }
        .svc-cta-btn { width: 100%; justify-content: center; }

        /* ═══════════════  RELATED  (reuses service-card from services.php) ═══════════════ */
        .svc-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .services-header { text-align: center; max-width: 820px; margin: 0 auto 2.5rem; }
        .services-header .section-label { display: inline-block; color: var(--primary); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.8rem; }
        .services-header .section-title { font-family: 'Outfit', sans-serif; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; line-height: 1.2; margin-bottom: 0.9rem; }
        .services-header .section-subtitle { color: var(--text-muted); line-height: 1.7; }
        .service-card {
            border-radius: 22px;
            border: 1px solid var(--border);
            background: linear-gradient(180deg, color-mix(in srgb, var(--service-accent) 10%, var(--bg-card)) 0%, var(--bg-card) 50%);
            min-height: 100%;
            display: flex;
            flex-direction: column;
            padding: 1.2rem 1.2rem 0;
            transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
            overflow: hidden;
        }
        .service-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--service-accent) 55%, #fff 45%); box-shadow: 0 18px 34px color-mix(in srgb, var(--service-accent) 22%, transparent); }
        .service-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
        .service-index { color: var(--text-muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; }
        .service-card h3 { font-family: 'Outfit', sans-serif; font-size: 1.35rem; font-weight: 800; margin-bottom: 0.65rem; line-height: 1.3; }
        .service-description { color: var(--text-muted); line-height: 1.7; margin-bottom: 1rem; }
        .service-link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.9rem; padding: 0.9rem 0 1.2rem; border-top: 1px dashed var(--border); transition: color 0.2s ease; }
        .service-link:hover { color: var(--primary); }

        /* ═══════════════  CTA  (same as services.php) ═══════════════ */
        .services-cta-wrap { padding-top: 55px; }
        .services-cta { text-align: center; border: 1px solid var(--border); border-radius: 26px; padding: 3.1rem 1.4rem; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--accent, #ec4899) 10%, transparent)); }
        .services-cta h2 { font-family: 'Outfit', sans-serif; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; margin-bottom: 0.8rem; }
        .services-cta p { color: var(--text-muted); margin: 0 auto 1.5rem; max-width: 680px; }
        .services-cta-actions { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }

        /* ═══════════════  RESPONSIVE  ═══════════════ */
        @media (max-width: 1100px) {
            .svc-detail-grid { grid-template-columns: 1fr; }
            .svc-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 768px) {
            .services-hero { min-height: auto; padding: 100px 1rem 60px; }
            .services-hero h1 { font-size: clamp(2rem, 10vw, 2.6rem) !important; line-height: 1.1 !important; margin-bottom: 0.75rem !important; }
            .services-hero-actions .btn { width: 100%; max-width: 320px; margin: 0.25rem 0; }
            .svc-detail-grid { grid-template-columns: 1fr; }
            .svc-sections-grid { grid-template-columns: 1fr; }
            .svc-related-grid { grid-template-columns: 1fr; }
            .svc-hero-img { height: 200px; }
        }


/* ============================================
   CONTACT PAGE
   ============================================ */
.about-hero {
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 0 100px;
    background: var(--bg-secondary);
}
#particles-js {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.about-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
}
.section-label {
    color: var(--primary);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.82rem;
    margin-bottom: 0.9rem;
    display: inline-flex;
    justify-content: center;
}
.about-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.2rem, 9vw, 5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    word-wrap: break-word;
}
.gradient-text {
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 50%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-flex;
}
.about-hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}
.contact-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    gap: 2rem;
    align-items: start;
}
.contact-panel {
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 2rem;
}
.panel-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.65rem;
    margin-bottom: 0.35rem;
}
.panel-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.contact-alert {
    display: flex;
    gap: 0.75rem;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    font-size: 0.92rem;
}
.contact-alert p {
    margin: 0;
    line-height: 1.45;
}
.contact-alert-error {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444;
}
.contact-alert-success {
    border-color: #10b981;
    background: color-mix(in srgb, #10b981 12%, transparent);
    color: #10b981;
}
.contact-form-grid .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.contact-form-grid textarea.form-control {
    min-height: 150px;
    resize: vertical;
}
.consent-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0.85rem 0 1.2rem;
    color: var(--text-muted);
    font-size: 0.92rem;
}
.consent-wrap input[type="checkbox"] {
    margin-top: 0.15rem;
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}
.consent-wrap a {
    color: var(--primary);
    text-decoration: none;
}
.consent-wrap a:hover {
    text-decoration: underline;
}
.contact-submit-btn {
    width: 100%;
    justify-content: center;
}
.contact-side-stack {
    display: grid;
    gap: 1rem;
}
.side-card {
    border-radius: 18px;
    border: 1px solid var(--border);
    padding: 1.35rem;
}
.side-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    margin-bottom: 0.9rem;
}
.contact-points {
    display: grid;
    gap: 0.85rem;
}
.contact-point {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.point-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 17%, transparent);
    color: var(--primary);
    flex-shrink: 0;
}
.contact-point strong {
    display: block;
    margin-bottom: 0.18rem;
}
.contact-point a,
.contact-point span {
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1.4;
}
.contact-point a:hover {
    color: var(--primary);
}
.muted-text {
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0.9rem;
}
.quick-links {
    display: grid;
    gap: 0.65rem;
}
.quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    color: var(--text);
    font-size: 0.92rem;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}
.quick-links a:hover {
    border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
    color: var(--primary);
}
.map-card {
    padding: 0;
    overflow: hidden;
}
.map-card iframe {
    width: 100% !important;
    min-height: 240px;
    border: 0;
    display: block;
}

@media (max-width: 1024px) {
    .about-hero {
        min-height: auto;
        padding: 100px 1rem 60px;
        display: block;
    }
    .about-hero-content {
        max-width: 100%;
        width: 100%;
    }
    .contact-main-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 720px) {
    .contact-panel {
        padding: 1.25rem;
    }
    .contact-form-grid .form-row {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   PRICING PAGE
   ============================================ */
:root {
    --primary: #6366f1;
    --primary-glow: rgba(99, 102, 241, 0.5);
    --accent: #a855f7;
    --accent-glow: rgba(168, 85, 247, 0.5);
    --success: #10b981;
    --card-radius: 32px;
    --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Theme Aware Tokens --- */
[data-theme="dark"] {
    --bg-deep: #030712;
    --bg-surface: #0b0f1a;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-main: #f3f4f6;
    --text-muted: #9ca3af;
    --glow-opacity: 0.15;
    --card-hover-bg: rgba(99, 102, 241, 0.05);
    --modal-backdrop: rgba(3, 7, 18, 0.85);
}

[data-theme="light"] {
    --bg-deep: #f8fafc;
    --bg-surface: #ffffff;
    --glass-bg: rgba(99, 102, 241, 0.04);
    --glass-border: rgba(99, 102, 241, 0.1);
    --text-main: #0f172a;
    --text-muted: #475569;
    --glow-opacity: 0.25;
    --card-hover-bg: rgba(99, 102, 241, 0.06);
    --modal-backdrop: rgba(255, 255, 255, 0.8);
}

body.pricing-enhanced {
    background-color: var(--bg-deep);
    color: var(--text-main);
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* --- Global Glows --- */
.glow-sphere {
    position: absolute; width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    filter: blur(80px); opacity: var(--glow-opacity); z-index: -1; pointer-events: none;
    transition: opacity 0.4s ease;
}

/* --- Hero Section --- */
.pricing-hero {
    position: relative; padding: 180px 0 100px; text-align: center;
    background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
}
.pricing-decor {
    position: fixed;
    inset: 0;
    overflow: clip;
    pointer-events: none;
    z-index: -1;
}
#pricing-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.6; }

.hero-label {
    display: inline-block; padding: 10px 22px; border-radius: 99px;
    background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--primary); font-weight: 800; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 3px; margin-bottom: 2.5rem;
}

.pricing-hero h1 {
    font-family: 'Outfit', sans-serif; font-size: clamp(2.5rem, 6vw, 4.2rem);
    font-weight: 900; line-height: 1.15; margin-bottom: 2rem; letter-spacing: -0.03em;
}

[data-theme="dark"] .hero-gradient {
    background: linear-gradient(135deg, #fff 30%, var(--primary) 70%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

[data-theme="light"] .hero-gradient {
    background: linear-gradient(135deg, #0f172a 30%, var(--primary) 70%, var(--accent) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem; color: var(--text-muted); max-width: 700px; margin: 0 auto;
    font-weight: 400;
}

/* --- Country Switcher --- */
.pricing-controls { margin-bottom: 60px; position: relative; z-index: 10; }
.country-selector {
    display: inline-flex; align-items: center; gap: 12px;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    padding: 8px 24px; border-radius: 99px; backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.country-selector span { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }
.btn-country {
    background: none; border: none; color: var(--text-main); font-weight: 800;
    cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 0.9rem;
}
.btn-country:hover { color: var(--primary); }

/* --- Pricing Matrix --- */
.pricing-matrix {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem; perspective: 1000px; align-items: stretch;
}

.price-card {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    border-radius: var(--card-radius); padding: 50px 40px;
    display: flex; flex-direction: column; position: relative;
    transition: var(--transition); backdrop-filter: blur(20px);
    overflow: visible; height: 100%;
}

[data-theme="light"] .price-card {
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.05);
}

.price-card:hover {
    transform: translateY(-15px);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 40px 80px -20px rgba(0,0,0,0.2);
}
[data-theme="dark"] .price-card:hover { box-shadow: 0 40px 80px -20px rgba(0,0,0,0.4); }

.price-card.is-popular {
    background: var(--card-hover-bg);
    border-color: var(--primary);
    box-shadow: 0 0 50px -10px var(--primary-glow);
}

.popular-badge {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white; padding: 8px 24px; border-radius: 99px;
    font-size: 0.75rem; font-weight: 800; text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(99, 102, 241, 0.35);
}

.card-header { margin-bottom: 2rem; }
.plan-name { font-size: 1.85rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -0.01em; color: var(--text-main); }

.price-block { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 1rem; }
.currency { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; color: var(--primary); }
.amount { font-family: 'Outfit', sans-serif; font-size: 4.5rem; font-weight: 900; line-height: 0.8; color: var(--text-main); }
.period { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 0.6rem; font-weight: 700; }

.plan-desc { font-size: 1rem; color: var(--text-muted); min-height: 3rem; margin-bottom: 2.5rem; }

.feature-list { list-style: none; padding: 0; margin: 0 0 3.5rem; display: grid; gap: 1.25rem; }
.feature-item { display: flex; align-items: flex-start; gap: 14px; font-size: 1rem; color: var(--text-muted); }
.feature-item i { color: var(--success); font-size: 1.1rem; margin-top: 4px; }

.card-footer { margin-top: auto; }
.btn-plan {
    display: block; width: 100%; padding: 20px; border-radius: 20px;
    font-weight: 800; font-size: 1rem; text-align: center;
    text-decoration: none; transition: var(--transition);
    border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-main);
}
.btn-plan:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 15px 30px -5px var(--primary-glow); }
.btn-plan.primary { background: var(--primary); color: white; border: none; box-shadow: 0 20px 40px -10px var(--primary-glow); }
.btn-plan.primary:hover { background: #4f46e5; box-shadow: 0 25px 50px -10px var(--primary-glow); }

/* --- Category Tabs --- */
.category-tabs {
    display: flex; justify-content: center; gap: 10px; margin-bottom: 50px;
    flex-wrap: wrap; position: relative; z-index: 10;
}
.btn-tab {
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    padding: 12px 28px; border-radius: 99px; color: var(--text-muted);
    font-weight: 700; cursor: pointer; transition: var(--transition);
    font-size: 0.95rem; backdrop-filter: blur(10px);
}
.btn-tab:hover { border-color: var(--primary); color: var(--text-main); }
.btn-tab.is-active {
    background: var(--primary); color: white; border-color: var(--primary);
    box-shadow: 0 10px 20px -5px var(--primary-glow);
}

.price-card.is-hidden { display: none; }


/* --- CTA Section --- */
.pricing-cta { padding: 140px 0; background: var(--bg-surface); position: relative; overflow: hidden; }
.cta-card {
    background: radial-gradient(circle at top right, rgba(168, 85, 247, 0.12), transparent), var(--glass-bg);
    border: 1px solid var(--glass-border); border-radius: 56px; padding: 100px 40px; text-align: center;
    backdrop-filter: blur(24px);
}
.cta-card h2 { font-family: 'Outfit', sans-serif; font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 900; margin-bottom: 2rem; color: var(--text-main); }
.cta-card p { font-size: 1.3rem; color: var(--text-muted); max-width: 650px; margin: 0 auto 3.5rem; }

/* --- Modal --- */
.modal {
    position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--modal-backdrop); backdrop-filter: blur(16px);
}
.modal.is-open { opacity: 1; pointer-events: all; }
.modal-box {
    width: 460px; background: var(--bg-surface); border: 1px solid var(--glass-border);
    border-radius: 40px; padding: 45px; transform: scale(0.9); transition: 0.4s ease;
    box-shadow: 0 40px 100px rgba(0,0,0,0.2);
}
.modal.is-open .modal-box { transform: scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; }
.modal-header h3 { font-size: 1.75rem; font-weight: 800; color: var(--text-main); }
.btn-close { background: none; border: none; font-size: 2.5rem; color: var(--text-muted); cursor: pointer; line-height: 1; }

.region-grid { display: grid; gap: 14px; }
.region-item {
    display: flex; align-items: center; gap: 18px; padding: 18px 24px;
    border: 1px solid var(--glass-border); border-radius: 20px;
    text-decoration: none; color: var(--text-main); transition: 0.2s; font-weight: 700;
}
.region-item:hover { background: rgba(0, 0, 0, 0.04); border-color: var(--primary); transform: translateX(5px); }
[data-theme="dark"] .region-item:hover { background: rgba(255, 255, 255, 0.05); }
.region-item.is-active { border-color: var(--primary); background: rgba(99, 102, 241, 0.1); }
.flag-code { font-weight: 800; color: var(--primary); font-size: 0.85rem; background: rgba(99, 102, 241, 0.15); padding: 5px 10px; border-radius: 8px; }

@media (max-width: 768px) {
    .pricing-hero { padding: 150px 0 80px; }
    .pricing-matrix { grid-template-columns: 1fr; gap: 2rem; }
    .cta-card { padding: 70px 24px; }
    .modal-box { width: 90%; padding: 30px; }
}


/* ============================================
   PORTFOLIO PAGE
   ============================================ */
.portfolio-page {
    background:
        radial-gradient(circle at 15% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 38%),
        radial-gradient(circle at 85% 8%, rgba(236, 72, 153, 0.1) 0%, transparent 40%),
        var(--bg);
}

.portfolio-hero {
    position: relative;
    overflow: hidden;
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 145px 0 95px;
    text-align: center;
    isolation: isolate;
}

#portfolio-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.portfolio-hero-glow {
    position: absolute;
    width: min(72vw, 760px);
    height: min(72vw, 760px);
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(236, 72, 153, 0.14) 35%, transparent 70%);
    filter: blur(72px);
}

.portfolio-hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 0.75rem;
}

.portfolio-kicker {
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-block;
    margin-bottom: 0.9rem;
}

.portfolio-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1rem;
    word-wrap: break-word;
}

.portfolio-hero-gradient {
    background: linear-gradient(135deg, var(--text) 5%, var(--primary) 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.portfolio-hero p {
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto 1.6rem;
    line-height: 1.75;
    font-size: clamp(1rem, 2vw, 1.18rem);
    text-wrap: pretty;
}

.portfolio-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.portfolio-main {
    padding: 20px 0 100px;
}

.portfolio-toolbar {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    padding: 1rem;
    display: grid;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.portfolio-filter {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.52rem 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.portfolio-filter:hover,
.portfolio-filter.active {
    color: #fff;
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.portfolio-metrics {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.portfolio-metric {
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    font-size: 0.78rem;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.portfolio-empty {
    grid-column: 1 / -1;
    border: 1px dashed var(--border);
    border-radius: 24px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
}

.portfolio-empty-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 1.25rem;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
    color: var(--primary);
    font-size: 1.8rem;
}

.portfolio-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}

.portfolio-card.hidden {
    display: none;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--primary) 50%, #fff 50%);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.22);
}

.portfolio-media {
    position: relative;
    aspect-ratio: 16/11;
    background: linear-gradient(135deg, var(--bg-hover), var(--bg-card));
    overflow: hidden;
}

.portfolio-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.portfolio-card:hover .portfolio-media img {
    transform: scale(1.05);
}

.portfolio-browser {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    z-index: 2;
}

.portfolio-browser span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.portfolio-body {
    padding: 1rem;
}

.portfolio-category {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.portfolio-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.14rem;
    line-height: 1.35;
    margin: 0 0 0.52rem;
}

.portfolio-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0 0 0.95rem;
}

.portfolio-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.portfolio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s ease;
}

.portfolio-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.portfolio-btn.primary {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    border-color: transparent;
}

.portfolio-btn.primary:hover {
    color: #fff;
    filter: brightness(1.04);
}

.portfolio-cta {
    margin-top: 2.2rem;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 13%, transparent), color-mix(in srgb, var(--accent) 10%, transparent));
    padding: 2.8rem 1.5rem;
    text-align: center;
}

.portfolio-cta h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 900;
    margin-bottom: 0.7rem;
}

.portfolio-cta p {
    color: var(--text-muted);
    max-width: 680px;
    margin: 0 auto 1.3rem;
    line-height: 1.75;
}

.portfolio-cta-actions {
    display: flex;
    justify-content: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

@media (max-width: 1100px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .portfolio-hero {
        min-height: 68vh;
        padding: 120px 0 72px;
    }

    .portfolio-hero-content {
        max-width: 100%;
        padding: 0 0.35rem;
    }

    .portfolio-hero h1 {
        line-height: 1.12;
        margin-bottom: 0.85rem;
    }

    .portfolio-hero p {
        margin-bottom: 1.25rem;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-hero-actions .btn,
    .portfolio-cta-actions .btn,
    .portfolio-cta-actions .portfolio-btn {
        width: 100%;
        max-width: 320px;
        margin: 0.25rem 0;
    }
}


/* ============================================
   FAQ PAGE
   ============================================ */
/* FAQ Page */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.3s;
}
.faq-item.active { border-color: var(--primary); }
.faq-question {
    width: 100%;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s;
}
.faq-question:hover { color: var(--primary); }
.faq-question i { transition: transform 0.3s; color: var(--primary); }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
}
.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem;
}
.faq-answer p { color: var(--text-muted); line-height: 1.8; }

@media (max-width: 768px) {
    .faq-question {
        padding: 1.25rem;
        font-size: 1rem;
        gap: 0.75rem;
    }
    .faq-item.active .faq-answer {
        padding: 0 1.25rem 1.25rem;
    }
}


/* ============================================
   SUPPORT PAGE
   ============================================ */
/* Support Page */
.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {
    .support-form {
        padding: 1.5rem;
    }
}


/* ============================================
   CAREERS PAGE
   ============================================ */
.careers-hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 132px 0 96px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 40%),
        radial-gradient(circle at 82% 16%, rgba(236, 72, 153, 0.10) 0%, transparent 40%),
        var(--bg-secondary);
}

#careers-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.careers-hero-glow {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translate(-50%, -50%);
    width: min(74vw, 760px);
    height: min(74vw, 760px);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(236, 72, 153, 0.12) 30%, transparent 68%);
    filter: blur(72px);
}

.careers-hero-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.careers-hero-label,
.careers-header .section-label,
.careers-filter-label,
.careers-selected-label {
    display: inline-block;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.careers-hero h1,
.careers-panel .section-title,
.careers-header .section-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

.careers-hero h1 {
    font-size: clamp(2.4rem, 9vw, 4.9rem);
    margin: 0 0 1.4rem;
}

.careers-hero-gradient {
    background: linear-gradient(135deg, var(--text) 0%, var(--primary) 52%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.careers-hero p,
.section-subtitle,
.section-copy,
.careers-card-copy,
.careers-process-list p,
.careers-guidance li {
    color: var(--text-muted);
    line-height: 1.7;
}

.careers-hero p {
    max-width: 700px;
    margin: 0 auto 1.8rem;
    font-size: clamp(1rem, 2vw, 1.18rem);
}

.careers-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.careers-shell {
    background:
        radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.06), transparent 38%),
        radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.06), transparent 42%),
        var(--bg-secondary);
}

.careers-intro,
.careers-openings,
.careers-application {
    padding: 88px 0 0;
}

.careers-application {
    padding-bottom: 96px;
}

.careers-intro-grid,
.careers-application-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.25rem;
}

.careers-panel,
.careers-card,
.careers-form-card,
.careers-empty {
    border-radius: 24px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent), var(--bg-card);
    backdrop-filter: blur(10px);
}

.careers-panel {
    padding: 2rem;
}

.careers-panel .section-title {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    margin: 0.65rem 0 1rem;
}

.careers-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.careers-pill,
.careers-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.careers-process-list {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 1rem;
}

.careers-process-list li {
    position: relative;
    padding-left: 1.1rem;
}

.careers-process-list li::before {
    content: '';
    position: absolute;
    top: 0.55rem;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 20%, transparent);
}

.careers-process-list strong {
    display: block;
    margin-bottom: 0.18rem;
}

.careers-header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 2.2rem;
}

.careers-departments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

.careers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.careers-card {
    padding: 1.35rem;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.careers-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--primary) 58%, #fff 42%);
    box-shadow: 0 18px 34px color-mix(in srgb, var(--primary) 20%, transparent);
}

.careers-card-top,
.careers-card-actions,
.careers-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.careers-card-top {
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.careers-card-index,
.careers-card-type,
.careers-card-date {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.careers-card h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 0.8rem;
}

.careers-meta {
    gap: 0.8rem;
    margin-bottom: 0.9rem;
}

.careers-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.careers-card-copy {
    min-height: 120px;
    margin-bottom: 1rem;
}

.careers-card-actions {
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

.careers-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
}

.careers-apply-btn:hover {
    color: var(--primary);
}

.careers-empty {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
}

.careers-empty h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    margin-bottom: 0.8rem;
}

.careers-form-card {
    padding: 1.5rem;
}

.careers-form {
    display: grid;
    gap: 1rem;
}

.careers-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.careers-field {
    display: grid;
    gap: 0.45rem;
}

.careers-field-full {
    grid-column: 1 / -1;
}

.careers-field span {
    font-size: 0.9rem;
    font-weight: 700;
}

.careers-field input,
.careers-field select,
.careers-field textarea {
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    color: var(--text);
    padding: 0.9rem 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.careers-field input:focus,
.careers-field select:focus,
.careers-field textarea:focus {
    border-color: color-mix(in srgb, var(--primary) 60%, white 40%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent);
}

.careers-selected-role {
    margin-top: 1.4rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.careers-selected-role strong {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.1rem;
}

.careers-selected-role p {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
}

.careers-guidance {
    margin: 1.2rem 0 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.6rem;
}

.careers-alert {
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.careers-alert-success {
    border: 1px solid rgba(34, 197, 94, 0.32);
    background: rgba(34, 197, 94, 0.10);
    color: #15803d;
}

.careers-alert-error {
    border: 1px solid rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
    display: grid;
    gap: 0.25rem;
}

.careers-submit-btn {
    justify-self: start;
}

@media (max-width: 1100px) {
    .careers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .careers-intro-grid,
    .careers-application-grid,
    .careers-form-grid {
        grid-template-columns: 1fr;
    }

    .careers-card-copy {
        min-height: 0;
    }
}

@media (max-width: 640px) {
    .careers-grid {
        grid-template-columns: 1fr;
    }

    .careers-hero {
        padding: 120px 0 84px;
    }

    .careers-panel,
    .careers-card,
    .careers-form-card,
    .careers-empty {
        border-radius: 20px;
    }

    .careers-card-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}



/* Duplicate blog CSS blocks removed — see primary blocks above */

/* ============================================
   BOOK CONSULTATION PAGE
   ============================================ */
.booking-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: start;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.info-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.info-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.info-card h4 { margin-bottom: 0.25rem; }
.info-card p { color: var(--text-muted); margin: 0; font-size: 0.9rem; }
@media (max-width: 1024px) {
    .booking-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}


/* ============================================
   APPOINTMENTS BOOK PAGE
   ============================================ */
.booking-container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
        .step { display: none; }
        .step.active { display: block; }
        .service-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 1rem; padding: 1.5rem; cursor: pointer; transition: all 0.3s; }
        .service-card:hover, .service-card.selected { border-color: var(--primary); transform: translateY(-3px); }
        .service-card.selected { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
        .time-slot { padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; text-align: center; cursor: pointer; transition: all 0.2s; }
        .time-slot:hover:not(.unavailable), .time-slot.selected { background: var(--primary); border-color: var(--primary); color: white; }
        .time-slot.unavailable { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }
        .step-indicator { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
        .step-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--text-muted); transition: all 0.3s; }
        .step-dot.active, .step-dot.completed { background: var(--primary); color: white; }
        .step-dot.completed::before { content: '\2713'; }
        #calendar { background: var(--bg-card); border-radius: 1rem; padding: 1rem; }
        .fc-theme-standard { --fc-border-color: var(--border); --fc-button-bg-color: var(--primary); --fc-button-border-color: var(--primary); --fc-button-hover-bg-color: var(--primary-light); }
        .fc-day-today { background: var(--bg-secondary) !important; }
        .fc-daygrid-day:hover { background: var(--bg-secondary); cursor: pointer; }


/* ============================================
   REQUEST QUOTE PAGE
   ============================================ */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }


/* ============================================
   AUTH SHARED PAGE
   ============================================ */
/* ================================================================
       AUTH SHARED STYLES — Premium Theme (matches About / Services)
       ================================================================ */

    :root {
--auth-primary: #6366f1;
--auth-accent: #ec4899;
--auth-surface: var(--bg-secondary);
--auth-glass: rgba(15, 23, 42, 0.04);
--auth-glass-strong: rgba(15, 23, 42, 0.08);
--auth-glass-border: var(--border);
--auth-glow: 0 0 24px rgba(99, 102, 241, 0.18);
    }

    [data-theme="dark"] {
--auth-surface: #0f172a;
--auth-glass: rgba(255, 255, 255, 0.03);
--auth-glass-strong: rgba(255, 255, 255, 0.07);
--auth-glass-border: rgba(255, 255, 255, 0.08);
--auth-glow: 0 0 30px rgba(99, 102, 241, 0.3);
    }

    [data-theme="light"] {
--auth-surface: var(--bg-secondary);
--auth-glass: rgba(15, 23, 42, 0.02);
--auth-glass-strong: rgba(15, 23, 42, 0.05);
--auth-glass-border: var(--border);
--auth-glow: 0 0 24px rgba(99, 102, 241, 0.18);
    }

    /* ---- Hero Section ---- */
    .auth-hero {
min-height: 40vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 130px 0 60px;
overflow: hidden;
background: radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 42%),
            radial-gradient(circle at 84% 16%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
            var(--auth-surface);
    }

    #auth-particles {
position: absolute;
inset: 0;
z-index: 1;
    }

    .auth-hero-glow {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
width: min(74vw, 760px);
height: min(74vw, 760px);
pointer-events: none;
z-index: 0;
background: radial-gradient(circle, rgba(99, 102, 241, 0.24) 0%, rgba(236, 72, 153, 0.18) 30%, transparent 70%);
filter: blur(64px);
    }

    .auth-hero-content {
position: relative;
z-index: 2;
max-width: 860px;
margin: 0 auto;
text-align: center;
    }

    .auth-hero-label {
display: inline-block;
margin-bottom: 1rem;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--auth-primary);
    }

    .auth-hero h1 {
font-family: 'Outfit', sans-serif;
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 1rem;
    }

    .auth-hero-gradient {
background: linear-gradient(135deg, var(--text) 5%, var(--auth-primary) 55%, var(--auth-accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
    }

    .auth-hero p {
color: var(--text-muted);
font-size: clamp(1rem, 2vw, 1.15rem);
max-width: 640px;
margin: 0 auto;
line-height: 1.7;
    }

    /* ---- Main form shell ---- */
    .auth-shell {
background:
    radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.08), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(236, 72, 153, 0.07), transparent 45%),
    var(--auth-surface);
padding: 60px 0 90px;
    }

    .auth-v2-grid {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
gap: 1.25rem;
align-items: stretch;
    }

    /* ---- Showcase Side ---- */
    .auth-v2-showcase {
background: linear-gradient(165deg, var(--auth-glass), transparent);
border: 1px solid var(--auth-glass-border);
border-radius: 24px;
padding: 2rem;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .auth-v2-showcase:hover {
  border-color: #6366f1;
  border-color: color-mix(in srgb, var(--auth-primary) 40%, white 60%);
  box-shadow: var(--auth-glow);
    }

    .auth-v2-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: 1px solid var(--auth-glass-border);
border-radius: 999px;
padding: 0.42rem 0.85rem;
font-size: 0.76rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
background: color-mix(in srgb, var(--auth-primary) 7%, transparent);
    }

    .auth-v2-showcase h2 {
margin: 1rem 0 0.7rem;
font-family: 'Outfit', sans-serif;
font-size: clamp(1.5rem, 3.2vw, 2.3rem);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.02em;
    }

    .auth-v2-showcase p {
margin: 0;
color: var(--text-muted);
line-height: 1.65;
    }

    .auth-v2-points {
margin: 1.25rem 0 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.72rem;
    }

    .auth-v2-points li {
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--text);
font-size: 0.92rem;
    }

    .auth-v2-points i {
width: 18px;
color: var(--auth-primary);
    }

    .auth-v2-showcase .text-sm a {
color: var(--auth-primary);
font-weight: 600;
text-decoration: none;
    }

    .auth-v2-showcase .text-sm a:hover {
text-decoration: underline;
    }

    /* ---- Form Panel ---- */
    .auth-v2-panel {
background: var(--auth-glass);
border: 1px solid var(--auth-glass-border);
border-radius: 24px;
padding: 2rem;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
transition: border-color 0.25s ease;
    }

    .auth-v2-panel:hover {
border-color: #6366f1;
border-color: color-mix(in srgb, var(--auth-primary) 30%, white 70%);
    }

    .auth-v2-logo {
width: 56px;
height: 56px;
margin: 0 auto 0.8rem;
border-radius: 16px;
display: grid;
place-items: center;
font-weight: 800;
font-size: 1.35rem;
color: #fff;
background: linear-gradient(135deg, var(--auth-primary), var(--auth-accent));
box-shadow: 0 15px 30px -12px rgba(99, 102, 241, 0.6);
    }
    .auth-v2-logo-image-wrap {
width: 100%;
max-width: min(460px, 100%);
min-height: 84px;
--auth-logo-glow-anchor: min(96px, 24%);
--auth-logo-glow-outer: clamp(86px, 18vw, 132px);
--auth-logo-glow-inner: clamp(72px, 15vw, 110px);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
padding-inline: clamp(4px, 1vw, 10px);
border-radius: 0;
background: transparent;
box-shadow: none;
border: 0;
position: relative;
isolation: isolate;
overflow: visible;
    }
    .auth-v2-logo-image-wrap::before {
content: "";
position: absolute;
left: 30px;
top: 50%;
width: var(--auth-logo-glow-outer);
height: var(--auth-logo-glow-outer);
transform: translate(-50%, -50%);
border-radius: 999px;
background: conic-gradient(from 0deg, color-mix(in srgb, var(--auth-primary) 80%, #fff 20%), color-mix(in srgb, var(--auth-accent) 78%, #fff 22%), color-mix(in srgb, #22d3ee 72%, #fff 28%), color-mix(in srgb, var(--auth-primary) 80%, #fff 20%));
filter: blur(15px);
opacity: 0.62;
z-index: -1;
animation: auth-logo-orbit 8s linear infinite;
pointer-events: none;
    }
    .auth-v2-logo-image-wrap::after {
content: "";
position: absolute;
left: 30px;
top: 50%;
width: var(--auth-logo-glow-inner);
height: var(--auth-logo-glow-inner);
transform: translate(-50%, -50%);
border-radius: 999px;
background: radial-gradient(circle at center, color-mix(in srgb, var(--auth-accent) 48%, #fff 52%) 0%, color-mix(in srgb, var(--auth-primary) 28%, transparent 72%) 45%, transparent 74%);
filter: blur(11px);
opacity: 0.5;
z-index: -1;
animation: auth-logo-heartbeat 1.55s ease-in-out infinite;
pointer-events: none;
    }
    .auth-v2-logo-image {
width: 100%;
height: auto;
max-height: 96px;
object-fit: contain;
object-position: center;
background: transparent;
display: block;
margin: 0 auto;
position: relative;
z-index: 1;
    }
    @keyframes auth-logo-orbit {
from { transform: translate(-50%, -50%) rotate(0deg) translateX(9px); }
to { transform: translate(-50%, -50%) rotate(360deg) translateX(9px); }
    }
    @keyframes auth-logo-heartbeat {
0%, 100% { transform: translate(-50%, -50%) scale(0.84); opacity: 0.34; }
18% { transform: translate(-50%, -50%) scale(1.12); opacity: 0.62; }
38% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.4; }
60% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.54; }
    }

    .auth-v2-title {
margin: 0;
text-align: center;
font-family: 'Outfit', sans-serif;
font-size: 1.9rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
    }

    .auth-v2-subtitle {
margin: 0.45rem 0 1.15rem;
text-align: center;
color: var(--text-muted);
line-height: 1.58;
font-size: 0.94rem;
    }

    /* ---- Alerts ---- */
    .auth-alert {
display: flex;
align-items: flex-start;
gap: 0.65rem;
border-radius: 14px;
border: 1px solid transparent;
padding: 0.82rem 0.95rem;
margin-bottom: 1rem;
font-size: 0.9rem;
line-height: 1.45;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
    }

    .auth-alert p { margin: 0; }

    .auth-alert.error {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.35);
background: rgba(239, 68, 68, 0.08);
    }

    .auth-alert.success {
color: #10b981;
border-color: rgba(16, 185, 129, 0.35);
background: rgba(16, 185, 129, 0.08);
    }

    /* ---- Form Elements ---- */
    .auth-form label {
display: block;
margin-bottom: 0.42rem;
color: var(--text-muted);
font-size: 0.88rem;
font-weight: 600;
    }

    .auth-input {
width: 100%;
border: 1px solid var(--auth-glass-border);
border-radius: 14px;
background: var(--auth-glass);
color: var(--text);
padding: 0.82rem 0.95rem;
outline: none;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }

    .auth-input:focus {
border-color: var(--auth-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16), var(--auth-glow);
    }

    .auth-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.78rem;
    }

    .auth-divider {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 1.05rem 0;
color: var(--text-muted);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.04em;
    }

    .auth-divider::before,
    .auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--auth-glass-border), transparent);
    }

    .auth-social {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
width: 100%;
border: 1px solid var(--auth-glass-border);
border-radius: 14px;
background: var(--auth-glass);
color: var(--text);
padding: 0.78rem 0.85rem;
font-size: 0.92rem;
font-weight: 600;
margin-bottom: 0.68rem;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
cursor: pointer;
    }

    .auth-social:hover {
border-color: var(--auth-primary);
transform: translateY(-2px);
box-shadow: var(--auth-glow);
    }

    .auth-submit {
width: 100%;
justify-content: center;
padding: 0.86rem 1rem;
margin-top: 0.25rem;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: 14px;
background: linear-gradient(135deg, var(--auth-primary), var(--auth-accent));
color: #fff !important;
border: none;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
display: inline-flex;
align-items: center;
    }

    .auth-submit:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(99, 102, 241, 0.5);
    }

    .auth-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin: 0.22rem 0 0.95rem;
    }

    .auth-row label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.88rem;
margin: 0;
    }
    .auth-row.is-stack {
justify-content: flex-start;
    }
    .auth-row .auth-check-label {
align-items: flex-start;
line-height: 1.32;
    }
    .auth-row input[type="checkbox"],
    .auth-row .auth-check-box {
width: 18px;
height: 18px;
min-width: 18px;
margin: 0;
accent-color: var(--auth-primary);
cursor: pointer;
border-radius: 4px;
    }
    .auth-row .auth-check-label input[type="checkbox"] {
margin-top: 0.12rem;
    }

    .auth-row a {
color: var(--auth-primary);
font-size: 0.88rem;
text-decoration: none;
font-weight: 600;
    }

    .auth-row a:hover {
text-decoration: underline;
    }

    .auth-meta {
margin: 1rem 0 0;
text-align: center;
color: var(--text-muted);
font-size: 0.92rem;
    }

    .auth-meta a {
color: var(--auth-primary);
text-decoration: none;
font-weight: 600;
    }

    .auth-meta a:hover {
text-decoration: underline;
    }

    .auth-hidden { display: none; }

    /* ---- Responsive ---- */
    @media (max-width: 1024px) {
.auth-hero {
    padding: 110px 0 50px;
    min-height: 32vh;
}
.auth-shell {
    padding: 40px 0 70px;
}
.auth-v2-grid {
    grid-template-columns: 1fr;
}
.auth-v2-showcase {
    order: 2;
    padding: 1.35rem;
}
.auth-v2-panel {
    order: 1;
}
    }

    @media (max-width: 680px) {
.auth-hero {
    padding: 100px 0 40px;
    min-height: 28vh;
}
.auth-hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
}
.auth-shell {
    padding: 30px 0 50px;
}
.auth-v2-panel {
    padding: 1.25rem;
}
.auth-v2-logo-image-wrap {
    min-height: 72px;
    max-width: min(360px, 100%);
}
.auth-v2-logo-image {
    max-height: 76px;
}
.auth-v2-showcase {
    display: none;
}
.auth-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
}
    }


/* ============================================
   ERRORS PAGE
   ============================================ */
/* Error Pages — unified styles */
.error-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    position: relative;
    overflow: hidden;
    padding: 6rem 1rem 2rem;
}
.error-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
    pointer-events: none;
}
.error-code {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(4rem, 10vw, 8rem);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 2rem;
}
.text-warning { color: var(--warning, #f59e0b); }
.text-danger { color: #ef4444; }

.icon-pulse {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    animation: error-pulse 2s infinite;
}
.icon-pulse.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning, #f59e0b);
}
.icon-pulse.danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.icon-pulse.primary {
    width: 100px;
    height: 100px;
    font-size: 3rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    animation: error-float 3s ease-in-out infinite;
}

@keyframes error-pulse {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
    70% { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
@keyframes error-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

#particles-js {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* 500.php — standalone minimal styles */
.error-container {
    background: var(--bg-card, white);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    width: 90%;
    text-align: center;
}
.request-id {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--text-muted, #64748b);
    background: var(--bg-secondary, #f1f5f9);
    padding: 0.5rem;
    border-radius: 4px;
    display: inline-block;
    margin-top: 1rem;
}

/* Maintenance social links */
.social-links { display: flex; gap: 1rem; }
.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s;
}
.social-link:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-3px);
}

/* Mobile */
@media (max-width: 768px) {
    .error-page {
padding: 5rem 1rem 6rem;
    }
    .flex-center {
flex-direction: column;
gap: 0.75rem;
    }
    .flex-center .btn,
    .flex-center .btn-primary,
    .flex-center .btn-outline {
width: 100%;
justify-content: center;
    }
}


/* ============================================
   PAGE PAGE
   ============================================ */
.page-content {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 3rem;
        }
        .page-content h2 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.8rem;
            margin: 2rem 0 1rem;
        }
        .page-content h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1.4rem;
            margin: 1.5rem 0 0.75rem;
        }
        .page-content p {
            color: var(--text-muted);
            margin-bottom: 1rem;
            line-height: 1.8;
        }
        .page-content ul, .page-content ol {
            padding-left: 1.5rem;
            margin-bottom: 1rem;
            color: var(--text-muted);
        }
        .page-content li { margin-bottom: 0.5rem; }
        .page-content a { color: var(--primary); }
        .page-content a:hover { text-decoration: underline; }
        .page-content img {
            max-width: 100%;
            border-radius: 12px;
            margin: 1.5rem 0;
        }
        .page-content blockquote {
            border-left: 4px solid var(--primary);
            padding-left: 1.5rem;
            margin: 1.5rem 0;
            font-style: italic;
            color: var(--text-muted);
        }


/* ============================================
   DREAMCORE PAGE
   ============================================ */
.dc-product {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem 1rem 5rem;
    }
    .dc-hero {
        border: 1px solid var(--border);
        border-radius: 20px;
        background: linear-gradient(140deg, rgba(37,99,235,0.12), rgba(16,185,129,0.09));
        padding: 2.25rem;
        margin-bottom: 1.5rem;
    }
    .dc-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .78rem;
        border: 1px solid var(--border);
        background: var(--bg-card);
        padding: .35rem .7rem;
        border-radius: 999px;
        color: var(--text-muted);
        margin-bottom: 1rem;
    }
    .dc-hero h1 {
        font-size: clamp(1.8rem, 4vw, 2.9rem);
        line-height: 1.15;
        margin: 0 0 .7rem;
    }
    .dc-hero p {
        color: var(--text-muted);
        margin: 0;
        max-width: 760px;
    }
    .dc-actions {
        margin-top: 1.2rem;
        display: flex;
        flex-wrap: wrap;
        gap: .7rem;
    }
    .dc-btn {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .66rem 1rem;
        border-radius: 10px;
        text-decoration: none;
        border: 1px solid var(--border);
        background: var(--bg-card);
        color: var(--text);
        font-weight: 600;
    }
    .dc-btn.primary {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }
    .dc-grid {
        display: grid;
        gap: 1rem;
    }
    .dc-grid.modules {
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    }
    .dc-grid.highlights {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .dc-grid.licenses {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .dc-card {
        border: 1px solid var(--border);
        background: var(--bg-card);
        border-radius: 16px;
        padding: 1rem;
    }
    .dc-card h3 {
        margin: 0 0 .45rem;
        font-size: 1.02rem;
        display: flex;
        align-items: center;
        gap: .55rem;
    }
    .dc-card p {
        margin: 0;
        color: var(--text-muted);
        font-size: .92rem;
    }
    .dc-section {
        margin-top: 1.4rem;
    }
    .dc-section h2 {
        margin: 0 0 .75rem;
        font-size: 1.25rem;
    }
    .dc-list {
        margin: .8rem 0 0;
        padding-left: 1.1rem;
        color: var(--text-muted);
        font-size: .92rem;
    }
    .dc-list li {
        margin: .35rem 0;
    }
    .dc-license {
        position: relative;
    }
    .dc-license.featured {
        border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
        box-shadow: 0 12px 30px rgba(0,0,0,0.12);
    }
    .dc-ribbon {
        position: absolute;
        top: -10px;
        right: 14px;
        background: var(--primary);
        color: #fff;
        font-size: .68rem;
        font-weight: 700;
        border-radius: 999px;
        padding: .2rem .55rem;
    }
    .dc-price {
        font-size: 2rem;
        margin: .4rem 0 .55rem;
        font-weight: 800;
    }
    .dc-price small {
        font-size: .82rem;
        color: var(--text-muted);
        font-weight: 500;
    }
    @media (max-width: 720px) {
        .dc-hero {
            padding: 1.35rem;
        }
    }


/* DreamCore checkout/success pages now use dedicated page stylesheets. */


/* ============================================
   DREAMCORE DOCS PAGE
   ============================================ */
:root {
        --sidebar-width: 300px;
    }
    
    /* Page Layout */
    .docs-wrapper {
        padding: 40px 0 80px;
        background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.05), transparent 40%),
                    radial-gradient(circle at bottom left, rgba(236, 72, 153, 0.05), transparent 40%);
        min-height: 100vh;
    }
    
    .docs-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
        display: grid;
        grid-template-columns: var(--sidebar-width) 1fr;
        gap: 3rem;
        position: relative;
    }

    /* Hero */
    .docs-hero {
        grid-column: 1 / -1;
        text-align: center;
        padding: 40px 0 60px;
        position: relative;
    }
    .docs-hero h1 {
        font-family: 'Outfit', sans-serif;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 800;
        margin-bottom: 1rem;
        background: linear-gradient(135deg, var(--primary) 0%, #ec4899 50%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        letter-spacing: -0.02em;
    }
    .docs-hero p {
        font-size: 1.25rem;
        color: var(--text-muted);
        max-width: 700px;
        margin: 0 auto;
    }
    .docs-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary);
        border-radius: 99px;
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
        border: 1px solid rgba(99, 102, 241, 0.2);
    }

    /* Sidebar */
    .docs-sidebar {
        position: sticky;
        top: 100px;
        height: calc(100vh - 140px);
        overflow-y: auto;
        padding-right: 1rem;
    }
    .docs-nav-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 1.5rem;
        backdrop-filter: blur(10px);
    }
    .docs-nav-title {
        font-family: 'Outfit', sans-serif;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-muted);
        margin-bottom: 1rem;
        font-weight: 700;
    }
    .docs-nav-links {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .docs-nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
        color: var(--text-muted);
        text-decoration: none;
        border-radius: 10px;
        transition: all 0.2s;
        font-weight: 500;
        font-size: 0.95rem;
    }
    .docs-nav-link:hover, .docs-nav-link.active {
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary);
    }
    .docs-nav-link i { width: 20px; text-align: center; }

    /* Content */
    .docs-content {
        min-width: 0; /* Prevent overflow */
    }
    .docs-section {
        margin-bottom: 4rem;
        scroll-margin-top: 100px;
    }
    .docs-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 2.5rem;
        position: relative;
        overflow: hidden;
    }
    .docs-card::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
        opacity: 0.5;
    }
    .section-title {
        font-family: 'Outfit', sans-serif;
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--text);
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .section-title i { color: var(--primary); opacity: 0.8; }
    
    .docs-card h3 {
        font-family: 'Outfit', sans-serif;
        font-size: 1.4rem;
        font-weight: 600;
        margin: 2rem 0 1rem;
        color: var(--text);
    }
    .docs-card h3:first-of-type { margin-top: 0; }
    
    .docs-card p, .docs-card li {
        color: var(--text-muted);
        line-height: 1.7;
        font-size: 1.05rem;
    }
    .docs-card ul { 
        list-style: none; 
        padding: 0; 
        margin: 1rem 0; 
    }
    .docs-card li { 
        position: relative; 
        padding-left: 1.75rem; 
        margin-bottom: 0.75rem; 
    }
    .docs-card li::before {
        content: '\f00c';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        left: 0;
        top: 2px;
        color: var(--success);
        font-size: 0.9rem;
    }

    /* Code Blocks */
    .code-block {
        background: #1e293b;
        border-radius: 12px;
        padding: 1.25rem;
        font-family: 'Fira Code', monospace;
        font-size: 0.9rem;
        color: #e2e8f0;
        overflow-x: auto;
        white-space: pre;
        border: 1px solid rgba(255,255,255,0.1);
        margin: 1rem 0 1.5rem;
        position: relative;
    }
    .code-block::after {
        content: 'CODE';
        position: absolute;
        top: 0.5rem;
        right: 0.75rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: rgba(255,255,255,0.3);
        letter-spacing: 0.1em;
    }
    .k-var { color: #f472b6; } /* pink */
    .k-str { color: #4ade80; } /* green */
    .k-func { color: #60a5fa; } /* blue */
    .k-kw { color: #c084fc; } /* purple */
    .inline-code {
        background: rgba(99, 102, 241, 0.1);
        color: var(--primary);
        padding: 0.1rem 0.4rem;
        border-radius: 6px;
        font-family: monospace;
        font-size: 0.9em;
        font-weight: 600;
    }

    /* Alerts */
    .alert-box {
        padding: 1.25rem 1.5rem;
        border-radius: 12px;
        margin: 1.5rem 0;
        display: flex;
        gap: 1rem;
        align-items: flex-start;
    }
    .alert-info {
        background: rgba(59, 130, 246, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: #93c5fd;
    }
    .alert-warn {
        background: rgba(245, 158, 11, 0.08);
        border: 1px solid rgba(245, 158, 11, 0.2);
        color: #fcd34d;
    }
    .alert-box i { font-size: 1.2rem; margin-top: 2px; }
    .alert-title { font-weight: 700; display: block; margin-bottom: 0.25rem; color: inherit; }

    /* Responsive */
    @media (max-width: 1024px) {
        .docs-container { grid-template-columns: 1fr; }
        .docs-sidebar { display: none; } /* Standard generic hidden sidebar for mobile for now */
        .docs-hero h1 { font-size: 2.5rem; }
    }


/* ============================================
   DEMOS INDEX PAGE
   ============================================ */
.page-hero {
            padding: 120px 0 80px;
            background: radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
                        radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.08) 0%, transparent 40%);
            text-align: center;
        }
        .page-hero h1 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            color: var(--text);
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 1.5rem;
        }
        .demo-card {
            padding: 0;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--border);
            background: var(--bg-card);
        }
        .demo-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            border-color: var(--primary);
        }
        .demo-preview {
            position: relative;
            height: 160px;
            overflow: hidden;
            background: var(--bg-hover);
        }
        .image-mockup {
            width: 100%;
            height: 100%;
            position: relative;
            background: var(--bg-hover);
        }
        .demo-preview-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }
        .demo-card:hover .demo-preview-image {
            transform: scale(1.04);
        }
        .demo-preview-fallback {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            color: var(--text-muted);
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.08));
            font-size: 0.8rem;
            text-align: center;
            padding: 0.5rem;
        }
        .demo-preview-fallback i {
            font-size: 1.2rem;
            color: var(--primary);
        }
        .demo-actions {
            display: flex;
            gap: 0.5rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 20;
        }
        .demo-card:hover .demo-actions {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
        }
        .btn-xs {
            padding: 8px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.9rem;
        }
        .demo-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,0.2);
            backdrop-filter: blur(0px);
            opacity: 0;
            transition: all 0.3s ease;
            z-index: 10;
        }
        .demo-card:hover .demo-overlay {
            opacity: 1;
            backdrop-filter: blur(4px);
            background: rgba(0,0,0,0.4);
        }

        .bg-glass {
            background: rgba(255,255,255,0.9);
            color: var(--text);
            border: none;
        }
        .demo-info {
            padding: 1rem;
        }
        .demo-industry {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--primary);
            font-weight: 700;
            display: block;
            margin-bottom: 0.25rem;
        }
        .demo-info h3 {
            font-family: 'Outfit', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            margin: 0;
            line-height: 1.4;
        }
        .demo-info h3 a {
            color: var(--text);
            text-decoration: none;
            transition: color 0.2s;
        }
        .demo-info h3 a:hover {
            color: var(--primary);
        }
        /* Filter Styles */
.btn-outline.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}
.is-hidden {
    display: none !important;
}
.demo-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}


/* ============================================
   DEMOS DETAILS PAGE
   ============================================ */
.demo-detail-hero {
        padding: 130px 0 70px;
        text-align: center;
        background:
            radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.12), transparent 38%),
            radial-gradient(circle at 90% 15%, rgba(236, 72, 153, 0.1), transparent 40%),
            var(--bg);
        border-bottom: 1px solid var(--border);
    }
    .detail-breadcrumb {
        display: inline-flex;
        gap: 0.5rem;
        align-items: center;
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 1rem;
    }
    .detail-breadcrumb a {
        color: var(--text-muted);
        text-decoration: none;
    }
    .detail-industry-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        border: 1px solid rgba(99, 102, 241, 0.25);
        background: rgba(99, 102, 241, 0.12);
        color: var(--primary);
        font-weight: 600;
        font-size: 0.82rem;
        margin-bottom: 1rem;
    }
    .demo-detail-hero h1 {
        margin: 0 0 0.9rem;
        font-size: clamp(2rem, 3.6vw, 3.2rem);
        line-height: 1.1;
    }
    .demo-detail-hero p {
        margin: 0 auto 1.8rem;
        max-width: 760px;
        color: var(--text-muted);
        font-size: 1.04rem;
    }
    .hero-actions {
        display: flex;
        gap: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .detail-main { padding-top: 2.5rem; }
    .detail-layout {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        gap: 1.4rem;
        align-items: start;
    }
    .detail-preview-card {
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        background: var(--bg-card);
        box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
    }
    .preview-browser {
        height: 40px;
        display: flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0 0.9rem;
        background: rgba(15, 23, 42, 0.85);
    }
    .browser-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        display: inline-block;
    }
    .browser-dot.red { background: #ff5f57; }
    .browser-dot.yellow { background: #ffbd2e; }
    .browser-dot.green { background: #28c840; }
    .browser-url {
        margin-left: 0.45rem;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.78rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .preview-viewport {
        position: relative;
        min-height: 320px;
        background: var(--bg-secondary);
    }
    .preview-viewport img {
        width: 100%;
        height: auto;
        display: block;
    }
    .preview-fallback {
        min-height: 320px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        color: var(--text-muted);
        background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.08));
    }
    .preview-fallback i {
        font-size: 1.3rem;
        color: var(--primary);
    }
    .preview-overlay-actions {
        position: absolute;
        right: 1rem;
        bottom: 1rem;
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .preview-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
        padding: 1rem;
        border-top: 1px solid var(--border);
        background: var(--bg);
    }
    .stat-pill {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 0.7rem 0.8rem;
        text-align: center;
        background: var(--bg-secondary);
    }
    .stat-pill .stat-label {
        display: block;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-bottom: 0.2rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .stat-pill strong {
        font-size: 0.95rem;
        color: var(--text);
        word-break: break-word;
    }
    .detail-side-card {
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 1.2rem;
        background: var(--bg-card);
        position: sticky;
        top: 100px;
    }
    .detail-side-card h2 {
        margin: 0 0 0.65rem;
        font-size: 1.2rem;
    }
    .detail-side-card p {
        margin: 0 0 1rem;
        color: var(--text-muted);
    }
    .detail-side-card ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.55rem;
    }
    .detail-side-card li {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.94rem;
        color: var(--text);
    }
    .detail-side-card li i {
        color: #22c55e;
        margin-top: 0.18rem;
    }
    .side-actions {
        display: grid;
        gap: 0.6rem;
        margin-top: 1rem;
    }

    .section-head {
        text-align: center;
        margin-bottom: 1.4rem;
    }
    .section-head h2 {
        margin: 0 0 0.6rem;
    }
    .section-head p {
        margin: 0;
        color: var(--text-muted);
    }
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
    }
    .feature-item {
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 14px;
        background: var(--bg-card);
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }
    .feature-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--primary), var(--accent, #ec4899));
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
    }
    .feature-item h3 {
        margin: 0;
        font-size: 0.98rem;
        line-height: 1.35;
    }
    .detail-cta {
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 2rem 1.2rem;
        background: radial-gradient(circle at 10% 10%, rgba(99, 102, 241, 0.11), transparent 40%), var(--bg-card);
    }
    .detail-cta h2 {
        margin: 0 0 0.75rem;
        font-size: clamp(1.5rem, 3vw, 2rem);
    }
    .detail-cta p {
        margin: 0 0 1.2rem;
        color: var(--text-muted);
    }

    @media (max-width: 1024px) {
        .detail-layout {
            grid-template-columns: 1fr;
        }
        .detail-side-card {
            position: static;
            top: auto;
        }
    }
    @media (max-width: 680px) {
        .demo-detail-hero {
            padding: 112px 0 52px;
        }
        .preview-stats {
            grid-template-columns: 1fr;
        }
        .preview-overlay-actions {
            left: 0.75rem;
            right: 0.75rem;
            bottom: 0.75rem;
        }
        .preview-overlay-actions .btn {
            width: 100%;
            justify-content: center;
        }
    }


/* ============================================
   DEMOS COMPARE PAGE
   ============================================ */
.compare-hero {
        padding: 120px 0 52px;
        text-align: center;
        background:
            radial-gradient(circle at 10% 15%, rgba(99, 102, 241, 0.14), transparent 36%),
            radial-gradient(circle at 88% 15%, rgba(236, 72, 153, 0.12), transparent 38%),
            var(--bg);
        border-bottom: 1px solid var(--border);
    }
    .compare-kicker {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 0.7rem;
        font-size: 0.8rem;
    }
    .compare-hero h1 {
        margin: 0 0 0.75rem;
        font-size: clamp(2rem, 4vw, 3.1rem);
        line-height: 1.1;
    }
    .compare-hero p {
        margin: 0 auto;
        max-width: 700px;
        color: var(--text-muted);
    }
    .compare-toolbar-wrap {
        padding: 1.2rem 0 0;
    }
    .compare-toolbar {
        padding: 1rem;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
        gap: 0.8rem;
        align-items: end;
    }
    .toolbar-field label {
        display: block;
        font-size: 0.82rem;
        margin-bottom: 0.45rem;
        color: var(--text-muted);
    }
    .compare-select {
        width: 100%;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        border-radius: 12px;
        padding: 0.72rem 0.8rem;
    }
    .swap-btn {
        height: 44px;
        white-space: nowrap;
    }
    .compare-content {
        padding-top: 1.2rem;
    }
    .compare-toolbar-wrap .container,
    .compare-content .container {
        width: min(96vw, 1860px);
        max-width: min(96vw, 1860px);
    }
    .compare-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem;
    }
    .compare-panel {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 18px;
        background: var(--bg-card);
        min-height: 760px;
    }
    .compare-image-wrap {
        position: relative;
        height: clamp(430px, 62vh, 760px);
        overflow: hidden;
        border-bottom: 1px solid var(--border);
        background: var(--bg-hover);
    }
    .compare-live-frame {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        background: #000;
    }
    .compare-image-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .compare-empty-image {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-muted);
        background: linear-gradient(135deg, rgba(99,102,241,.09), rgba(236,72,153,.08));
    }
    .compare-empty-image i {
        font-size: 1.5rem;
    }
    .compare-industry {
        position: absolute;
        top: 0.8rem;
        right: 0.8rem;
        padding: 0.35rem 0.7rem;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.4);
        background: rgba(15,23,42,0.65);
        color: #fff;
        font-size: 0.75rem;
        letter-spacing: 0.03em;
    }
    .compare-body {
        padding: 1rem;
    }
    .compare-body h2 {
        font-size: 1.28rem;
        margin: 0 0 0.5rem;
    }
    .compare-body p {
        color: var(--text-muted);
        margin: 0 0 0.8rem;
        line-height: 1.55;
    }
    .compare-features {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 0.45rem;
    }
    .compare-features li {
        display: flex;
        gap: 0.5rem;
        align-items: flex-start;
        color: var(--text);
        font-size: 0.9rem;
    }
    .compare-features i {
        color: #22c55e;
        margin-top: 0.1rem;
    }
    .compare-actions {
        margin-top: 0.95rem;
        display: flex;
        gap: 0.6rem;
        flex-wrap: wrap;
    }
    .compare-placeholder {
        min-height: 520px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.4rem;
        color: var(--text-muted);
    }
    .compare-placeholder i {
        font-size: 2.3rem;
        margin-bottom: 0.9rem;
        color: var(--primary);
        opacity: 0.9;
    }
    .compare-placeholder h3 {
        margin: 0 0 0.5rem;
        color: var(--text);
    }
    .compare-footer-actions {
        margin-top: 1rem;
        display: flex;
        justify-content: center;
    }
    @media (max-width: 992px) {
        .compare-grid {
            grid-template-columns: 1fr;
        }
        .compare-toolbar {
            grid-template-columns: 1fr;
        }
        .compare-toolbar-wrap .container,
        .compare-content .container {
            width: min(96vw, 900px);
            max-width: min(96vw, 900px);
        }
        .compare-image-wrap {
            height: min(62vh, 560px);
        }
        .compare-panel {
            min-height: 620px;
        }
        .swap-btn {
            width: 100%;
        }
    }


/* ============================================
   DEMOS PREVIEW PAGE
   ============================================ */
:root{
            --dc-demo-accent:#6d5efc;
            --dc-demo-accent2:#22d3ee;
        }
        .preview-bar{
            border-bottom: 1px solid var(--border);
            box-shadow: 0 12px 40px rgba(0,0,0,.35);
        }
        .logo-icon{
            background: linear-gradient(135deg,var(--dc-demo-accent),var(--dc-demo-accent2));
        }
        .preview-logo-img{
            height: 52px;
            width: auto;
            display: block;
            border-radius: 0;
            object-fit: contain;
        }
        .purchase-btn{
            background: linear-gradient(135deg,var(--dc-demo-accent),var(--dc-demo-accent2));
            border: 0;
        }
        .dc-quote-fab{
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 2147483646;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 999px;
            color: #0b0f17;
            background: linear-gradient(135deg,var(--dc-demo-accent),var(--dc-demo-accent2));
            box-shadow: 0 16px 50px rgba(0,0,0,.45);
            cursor: pointer;
            user-select: none;
            font-weight: 700;
        }
        .dc-quote-fab i{color:#0b0f17}
        .dc-quote-modal{
            position: fixed;
            inset: 0;
            z-index: 2147483647;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(0,0,0,.55);
            backdrop-filter: blur(8px);
        }
        .dc-quote-modal.open{display:flex}
        .dc-quote-card{
            width: min(520px, 100%);
            background: rgba(16, 20, 30, .92);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(0,0,0,.6);
        }
        .dc-quote-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid rgba(255,255,255,.10);
        }
        .dc-quote-title{
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .dc-quote-title strong{color:#fff;font-size:15px}
        .dc-quote-title span{color:rgba(255,255,255,.7);font-size:12px}
        .dc-quote-close{
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            color: rgba(255,255,255,.85);
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.06);
        }
        .dc-quote-body{padding: 14px 16px}
        .dc-quote-grid{
            display:grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        .dc-quote-field{display:flex;flex-direction:column;gap:6px}
        .dc-quote-field label{color:rgba(255,255,255,.75);font-size:12px}
        .dc-quote-field input,.dc-quote-field textarea{
            width: 100%;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.06);
            padding: 10px 12px;
            color: #fff;
            outline: none;
        }
        .dc-quote-field textarea{min-height: 110px;resize: vertical}
        .dc-quote-actions{
            display:flex;
            gap: 10px;
            align-items:center;
            justify-content:flex-end;
            padding: 12px 16px 16px;
        }
        .dc-quote-submit{
            border-radius: 12px;
            padding: 10px 14px;
            font-weight: 800;
            color: #0b0f17;
            background: linear-gradient(135deg,var(--dc-demo-accent),var(--dc-demo-accent2));
            cursor: pointer;
            border: 0;
        }
        .dc-quote-status{
            margin-right: auto;
            color: rgba(255,255,255,.78);
            font-size: 12px;
            min-height: 16px;
        }
        .dc-demo-watermark{
            position: fixed;
            left: 16px;
            bottom: 16px;
            z-index: 2147483646;
            padding: 8px 10px;
            border-radius: 12px;
            background: rgba(0,0,0,.35);
            border: 1px solid rgba(255,255,255,.10);
            color: rgba(255,255,255,.88);
            font-size: 12px;
            backdrop-filter: blur(6px);
        }
        .dc-demo-watermark b{color:#fff}
        @media (max-width: 520px){
            .dc-quote-grid{grid-template-columns:1fr}
        }
        body.dc-embed-preview .preview-bar,
        body.dc-embed-preview .dc-demo-watermark,
        body.dc-embed-preview .dc-quote-fab,
        body.dc-embed-preview .dc-quote-modal {
            display: none !important;
        }
        body.dc-embed-preview .iframe-container {
            padding-top: 0 !important;
            height: 100vh !important;
        }
        body.dc-embed-preview .preview-canvas {
            height: 100vh !important;
            border-radius: 0 !important;
            margin-top: 0 !important;
            width: 100% !important;
            box-shadow: none !important;
        }


/* ============================================
   DOCS INDEX PAGE
   ============================================ */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}
.doc-card {
    display: flex;
    align-items: center;
    padding: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s;
}
.doc-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
}
.doc-icon {
    font-size: 24px;
    color: var(--primary);
    margin-right: 20px;
    width: 50px;
    height: 50px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.doc-content h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--text);
}
.read-more {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.doc-card:hover .read-more {
    color: var(--primary);
}


/* ============================================
   DOCS SINGLE PAGE
   ============================================ */
.docs-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 60px;
    align-items: start;
}
.docs-sidebar {
    position: sticky;
    top: 100px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}
.docs-sidebar h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.docs-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.docs-nav li + li {
    margin-top: 0.5rem;
}
.docs-nav a {
    display: block;
    padding: 0.72rem 0.9rem;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.docs-nav a:hover,
.docs-nav a.is-active {
    color: var(--text);
    background: color-mix(in srgb, var(--bg-card) 85%, transparent);
    transform: translateX(2px);
}
.customer-site-layout {
    --site-primary: #4f46e5;
    --site-accent: #22c55e;
    --site-bg: #f8fafc;
    --site-card: rgba(255,255,255,0.88);
    --site-text: #0f172a;
    --site-muted: #475569;
    --site-border: rgba(148,163,184,0.18);
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--site-text);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--site-primary) 18%, transparent) 0, transparent 42%),
        radial-gradient(circle at right 15% top 20%, color-mix(in srgb, var(--site-accent) 18%, transparent) 0, transparent 35%),
        linear-gradient(180deg, #ffffff 0%, var(--site-bg) 100%);
    min-height: 100vh;
}
.customer-site-layout a { color: inherit; text-decoration: none; }
.customer-site-layout .shell { max-width: 1180px; margin: 0 auto; padding: 28px 20px 56px; }
.customer-site-layout .nav {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 18px 22px; border: 1px solid var(--site-border); border-radius: 24px;
    background: rgba(255,255,255,0.76); backdrop-filter: blur(22px);
    box-shadow: 0 14px 40px rgba(15,23,42,0.05);
    margin-bottom: 28px;
}
.customer-site-layout .brand { display:flex; align-items:center; gap:14px; min-width:0; }
.customer-site-layout .brand-mark {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--site-primary) 28%, transparent);
    overflow:hidden;
}
.customer-site-layout .brand-mark img { width:100%; height:100%; object-fit:cover; }
.customer-site-layout .brand-copy { min-width:0; }
.customer-site-layout .brand-copy strong { display:block; font-size:1rem; line-height:1.2; }
.customer-site-layout .brand-copy span { display:block; color:var(--site-muted); font-size:.85rem; margin-top:2px; }
.customer-site-layout .nav-links { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.customer-site-layout .nav-links a {
    padding: 10px 14px; border-radius: 999px; color: var(--site-muted); font-weight: 600;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.customer-site-layout .nav-links a:hover, .customer-site-layout .nav-links a.is-active {
    background: rgba(255,255,255,0.92); color: var(--site-text); transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.customer-site-layout .hero {
    padding: 28px 0 12px;
    display:flex; align-items:end; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.customer-site-layout .hero h1 { margin:0; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing:-0.03em; line-height:1.02; }
.customer-site-layout .hero p { margin:12px 0 0; max-width:760px; color:var(--site-muted); font-size:1rem; line-height:1.7; }
.customer-site-layout .glass {
    border:1px solid var(--site-border); background: rgba(255,255,255,0.74);
    backdrop-filter: blur(24px);
    box-shadow: 0 18px 42px rgba(15,23,42,0.05);
}
.customer-site-layout .panel { border-radius: 30px; padding: 24px; }
.customer-site-layout .grid { display:grid; gap:22px; }
.customer-site-layout .pill {
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
    font-size:.82rem; font-weight:700; color:var(--site-muted);
    background: rgba(255,255,255,0.92); border:1px solid var(--site-border);
}
.customer-site-layout .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 12px 18px;
    border-radius: 999px; background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
    color:#fff; font-weight:700; box-shadow: 0 10px 24px color-mix(in srgb, var(--site-primary) 28%, transparent);
}
.customer-site-layout .meta { display:flex; gap:10px; flex-wrap:wrap; color:var(--site-muted); font-size:.92rem; }
.customer-site-layout .stack { display:flex; flex-direction:column; gap:16px; }
.customer-site-layout .rich-content { color: var(--site-muted); line-height: 1.8; font-size: 1rem; }
.customer-site-layout .rich-content h2, .customer-site-layout .rich-content h3, .customer-site-layout .rich-content h4 { color: var(--site-text); line-height:1.15; letter-spacing:-0.02em; }
.customer-site-layout .rich-content img { max-width:100%; border-radius:24px; }
.customer-site-layout .split { display:grid; grid-template-columns: minmax(0, 1fr) 300px; gap:24px; align-items:start; }
.customer-site-layout .sidebar-card { padding:20px; border-radius:24px; }
@media (max-width: 900px) {
    .customer-site-layout .nav { flex-direction:column; align-items:stretch; }
    .customer-site-layout .split { grid-template-columns: 1fr; }
}
/* Invoice page now uses a dedicated page stylesheet. */


/* ============================================
   TOOLS EMI PAGE
   ============================================ */
.dc-emi-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1.25rem;
}

.dc-emi-card {
    padding: 1.25rem;
}

.dc-emi-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dc-emi-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.dc-emi-input,
.dc-emi-select {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text);
    outline: none;
}

.dc-emi-input:focus,
.dc-emi-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.dc-emi-help {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.dc-emi-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.dc-emi-results-title {
    margin-bottom: 0.75rem;
}

.dc-emi-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.dc-emi-result-label {
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .dc-emi-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .dc-emi-form-grid {
        grid-template-columns: 1fr;
    }
}





/* ============================================
   END OF GLOBAL STYLES
   ============================================ */
.read-more:hover { gap: 0.75rem; }
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
}
.page-info { color: var(--text-muted); }

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .blog-content h2 {
        font-size: 1.2rem;
    }
}

/* End of Consolidated Styles */

/* ============================================
   GLOBAL LAYOUT FIXES (POST-CONSOLIDATION)
   ============================================ */

/* 1. Fix Stuck Preloader Dismissal (Added !important) */
.preloader.hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out !important;
}

/* 1.1 Ensure Spinner also hides if it has a separate class */
.spinner.hide {
    display: none !important;
}

/* 2. Keep shared wrappers fluid without breaking page-specific grid/flex layouts */
.hero-content, 
.about-hero-content,
.pricing-hero .container,
.portfolio-hero .container,
.services-hero .container,
.shell {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    min-width: min(100vw, 320px);
}

.hero-title, 
.about-hero h1,
.pricing-hero h1,
.portfolio-hero h1,
.services-hero h1 {
    width: 100%;
    white-space: normal;
}

/* 3. Navigation Visibility */
.nav-menu a.nav-link.is-active {
    color: var(--primary) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

[data-theme="dark"] .nav-menu a.nav-link.is-active {
    color: #818cf8 !important;
}

/* ============================================
   END OF GLOBAL FIXES
   ============================================ */

/* ============================================
   FINAL PUBLIC HERO + TITLE OVERRIDES
   Keep this block last so the shared marketing pages
   do not get overridden by earlier page-specific rules.
   ============================================ */

.gradient-text,
.hero-gradient,
.services-hero-gradient,
.portfolio-hero-gradient,
.careers-hero-gradient,
.page-hero__title .gradient-text,
.hero .gradient-text,
.about-hero .gradient-text {
    background-image: var(--public-title-gradient) !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
}

.btn-primary,
.purchase-btn,
.portfolio-btn.primary,
.btn-plan.primary,
.dc-quote-submit,

.btn-outline,
.portfolio-btn.secondary,
.btn-plan,

.btn-primary:hover,
.purchase-btn:hover,
.portfolio-btn.primary:hover,
.btn-plan.primary:hover,
.dc-quote-submit:hover,
.btn-outline:hover,
.portfolio-btn.secondary:hover,
.btn-plan:hover,
.btn-outline.active {
    background-image: var(--public-brand-gradient) !important;
    background-color: transparent !important;
    border-color: var(--public-brand-border) !important;
    color: var(--public-brand-ink) !important;
    box-shadow: 0 20px 42px rgba(219, 93, 205, 0.22), 0 12px 28px rgba(239, 195, 145, 0.18) !important;
}

.btn-primary i,
.btn-outline i,
.purchase-btn i,
.portfolio-btn i,
.dc-quote-submit i {
    color: currentColor !important;
}

.card-icon,
.stat-icon,
.ci-icon,
.icon-wrap,
.ab-impact-icon,
.ab-principle-icon,
.service-arrow,
.pf-action-btn,
.portfolio-empty-icon,
.demo-preview-fallback i,
.sale-popup-close {
    background-image: var(--public-brand-gradient) !important;
    background-color: transparent !important;
    border-color: var(--public-brand-border) !important;
    color: var(--public-brand-ink) !important;
    box-shadow: 0 12px 28px rgba(219, 93, 205, 0.16), 0 8px 20px rgba(239, 195, 145, 0.12) !important;
}

.section-label,
.marketing-kicker,
.page-hero__kicker,
.services-hero-label,
.portfolio-kicker,
.careers-hero-label,
.demo-badge,
.portfolio-category,
.lane-step strong,
.faq-question:hover,
.faq-question i,
.service-link:hover,
.pf-industry {
    color: var(--primary) !important;
}

.device-btn.active,
.help-bubble,
.back-to-top,
.tm-pagination .swiper-pagination-bullet-active,
.home-services-pagination .swiper-pagination-bullet-active,
.portfolio-pagination .swiper-pagination-bullet-active {
    background-image: var(--public-brand-gradient) !important;
    background-color: transparent !important;
    border-color: var(--public-brand-border) !important;
    color: var(--public-brand-ink) !important;
}

.hero-title,
.hero .hero-subtitle,
.hero .hero-buttons,
.about-hero-content,
.services-hero-content,
.portfolio-hero-content,
.pricing-hero-content,
.page-hero__inner,
.section-header,
.section-header .section-title,
.section-header .section-subtitle,
.section-header .section-label,
.services-header,
.services-header .section-title,
.services-header .section-subtitle,
.services-header .section-label,
.marketing-panel > div:first-child,
.marketing-panel > div:first-child .marketing-kicker,
.marketing-panel > div:first-child .marketing-title,
.marketing-panel > div:first-child .marketing-copy,
.ab-panel > .section-label,
.ab-panel > .ab-story-title,
.ab-panel > .ab-story-copy,
.ab-cta-box,
.portfolio-cta,
.services-cta,
.proof-strip {
    text-align: center !important;
}

.section-header .section-title,
.services-header .section-title,
.marketing-panel > div:first-child .marketing-title,
.ab-cta-title,
.ab-story-title {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero .hero-subtitle,
.section-header .section-subtitle,
.services-header .section-subtitle,
.marketing-panel > div:first-child .marketing-copy,
.ab-panel > .ab-story-copy,
.portfolio-cta p,
.services-cta p {
    margin-left: auto !important;
    margin-right: auto !important;
}

.hero .hero-buttons,
.ab-badges,
.portfolio-cta-actions,
.services-cta-actions {
    justify-content: center !important;
}

#typed-text {
    min-width: 14ch;
}

.typed-cursor {
    color: var(--accent);
    font-weight: 700;
}

@media (max-width: 768px) {
    #typed-text {
        min-width: 10ch;
    }
}

/* FINAL homepage intro dock overrides */
body.home-page .home-cinematic-intro__lockup {
    --dock-scale: 0.24;
    width: min(760px, 82vw) !important;
    filter: none !important;
    transform: translate(-50%, -50%) scale(0.88) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 18px !important;
}

body.home-page .home-cinematic-intro__lockup.is-visible {
    transform: translate(-50%, -50%) scale(1) !important;
    transition:
        opacity 760ms cubic-bezier(.16, 1, .3, 1),
        filter 760ms cubic-bezier(.16, 1, .3, 1),
        transform 1040ms cubic-bezier(.16, 1, .3, 1) !important;
}

body.home-page .home-cinematic-intro__lockup.is-docking {
    transform: translate(calc(-50% + var(--dock-x)), calc(-50% + var(--dock-y))) scale(var(--dock-scale)) !important;
    transition:
        transform 1680ms cubic-bezier(.16, .96, .18, 1),
        opacity 1080ms ease,
        filter 1080ms ease !important;
}

body.home-page .home-cinematic-intro__lockup::before {
    inset: -18% !important;
}

body.home-page .home-cinematic-intro__mark {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: auto;
    overflow: visible;
}

body.home-page .home-cinematic-intro__mark::before,
body.home-page .home-cinematic-intro__mark::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

body.home-page .home-cinematic-intro__mark::before {
    z-index: 0;
    left: 15%;
    top: 50%;
    width: 24%;
    height: 72%;
    transform: translate(-50%, -50%);
    background:
        conic-gradient(from 0deg, rgba(118, 92, 255, 0.72), rgba(240, 85, 182, 0.76), rgba(239, 195, 145, 0.74), rgba(118, 92, 255, 0.72)),
        radial-gradient(circle at 48% 48%, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.08) 24%, transparent 54%);
    filter: blur(40px);
    opacity: 0.92;
    animation:
        homeIntroMarkPulse 2200ms ease-in-out infinite alternate,
        homeIntroMarkSpin 7200ms linear infinite;
    mix-blend-mode: screen;
}

body.home-page .home-cinematic-intro__mark::after {
    z-index: 1;
    left: 15%;
    top: 50%;
    width: 17%;
    height: 52%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.08) 32%, transparent 68%);
    filter: blur(20px);
    opacity: 0.82;
    animation: homeIntroMarkGlow 1800ms ease-in-out infinite alternate-reverse;
}

body.home-page .home-cinematic-intro__mark img {
    position: relative;
    inset: auto;
    z-index: 2;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.26));
}

body.home-page .navbar .logo-dock-target {
    position: absolute;
    left: 30px;
    top: 50%;
    width: 64px;
    height: 64px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
}

body.home-page.home-intro-active .navbar .logo.has-brand-image .logo-image-wrap {
    opacity: 0 !important;
    transform: translateY(-6px) scale(0.82) !important;
}

body.home-page .navbar .logo.has-brand-image .logo-image-wrap {
    transition: opacity 680ms ease, transform 1180ms cubic-bezier(.16, .96, .18, 1) !important;
}

body.home-page .home-cinematic-intro.is-collapsing {
    clip-path: inset(0 0 calc(100% - 88px) 0);
    background: transparent !important;
    transition:
        clip-path 1360ms cubic-bezier(.16, .96, .18, 1),
        opacity 920ms ease,
        visibility 920ms ease !important;
}

body.home-page .home-cinematic-intro.is-collapsing .home-cinematic-intro__stage,
body.home-page .home-cinematic-intro.is-collapsing .home-cinematic-intro__letterbox,
body.home-page .home-cinematic-intro.is-collapsing .home-cinematic-intro__flash {
    opacity: 0 !important;
    transition: opacity 220ms ease !important;
}

body.home-page.home-intro-docking .navbar .logo.has-brand-image .logo-image-wrap {
    opacity: 1 !important;
    transform: none !important;
}

.navbar .logo-image-wrap::before {
    left: 17px !important;
    top: 46% !important;
    width: 52px !important;
    height: 52px !important;
    filter: blur(17px) !important;
    opacity: 0.68 !important;
    transform: scale(1) !important;
    transition:
        opacity 760ms ease,
        filter 980ms cubic-bezier(.16, 1, .3, 1),
        transform 980ms cubic-bezier(.16, 1, .3, 1) !important;
}

.navbar .logo-image-wrap::after {
    left: 17px !important;
    top: 46% !important;
    width: 36px !important;
    height: 36px !important;
    filter: blur(12px) !important;
    opacity: 0.46 !important;
    transform: scale(1) !important;
    transition:
        opacity 760ms ease,
        filter 980ms cubic-bezier(.16, 1, .3, 1),
        transform 980ms cubic-bezier(.16, 1, .3, 1) !important;
}

.navbar .logo-image-wrap {
    width: clamp(176px, 12.8vw, 210px) !important;
    height: clamp(46px, 3.2vw, 54px) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    isolation: isolate !important;
}

.navbar {
    padding: 0.62rem 1.48rem !important;
}

.navbar.scrolled {
    padding: 0.44rem 1.48rem !important;
}

.navbar .logo-image {
    position: absolute !important;
    inset: 0 !important;
    width: 114% !important;
    height: 112% !important;
    max-width: 100% !important;
    left: -10px !important;
    top: -3px !important;
    transform: scale(1.095) !important;
    transform-origin: left center !important;
    object-fit: contain !important;
    object-position: left center !important;
}

body.home-page.home-intro-docking .navbar .logo-image-wrap::before {
    opacity: 0.96 !important;
    filter: blur(24px) !important;
    transform: scale(1.18) !important;
}

body.home-page.home-intro-docking .navbar .logo-image-wrap::after {
    opacity: 0.74 !important;
    filter: blur(18px) !important;
    transform: scale(1.14) !important;
}

body.home-page .hero,
body.home-page #particles-js,
body.home-page .hero-content > * {
    transition:
        opacity 980ms cubic-bezier(.16, 1, .3, 1),
        transform 1180ms cubic-bezier(.16, 1, .3, 1),
        filter 1180ms cubic-bezier(.16, 1, .3, 1) !important;
}

body.home-page.home-intro-active #particles-js,
body.home-page.home-intro-active .hero-content > * {
    opacity: 0 !important;
    transform: translateY(24px) scale(0.985) !important;
    filter: blur(12px) brightness(0.74) saturate(0.88) !important;
}

body.home-page.home-intro-ready #particles-js {
    animation: homeHeroExposureBg 1180ms cubic-bezier(.16, 1, .3, 1) both;
}

body.home-page.home-intro-ready .hero-content > * {
    opacity: 0;
    animation: homeHeroExposureLift 1180ms cubic-bezier(.16, 1, .3, 1) both;
}

body.home-page.home-intro-ready .hero-content > div:first-child {
    animation-delay: 80ms;
}

body.home-page.home-intro-ready .hero-content > div:nth-child(2) {
    animation-delay: 170ms;
}

body.home-page.home-intro-ready .hero-content > .igp-106 {
    animation-delay: 260ms;
}

.footer-modern .logo-image-wrap {
    width: clamp(238px, 18vw, 292px) !important;
    height: clamp(72px, 5vw, 84px) !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    isolation: isolate !important;
}

.footer-modern .logo-image-wrap::before {
    left: 26px !important;
    width: 72px !important;
    height: 72px !important;
    filter: blur(22px) !important;
    opacity: 0.76 !important;
}

.footer-modern .logo-image-wrap::after {
    left: 26px !important;
    width: 54px !important;
    height: 54px !important;
    filter: blur(16px) !important;
    opacity: 0.54 !important;
}

.footer-modern .logo-image {
    position: absolute !important;
    inset: 0 !important;
    width: 110% !important;
    height: 108% !important;
    max-width: 100% !important;
    left: -8px !important;
    top: -2px !important;
    transform: scale(1.07) !important;
    transform-origin: left center !important;
    object-fit: contain !important;
    object-position: left center !important;
}

@keyframes homeIntroMarkPulse {
    0% {
        opacity: 0.74;
        filter: blur(34px);
    }
    100% {
        opacity: 1;
        filter: blur(44px);
    }
}

@keyframes homeIntroMarkGlow {
    0% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.78;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 1;
    }
}

@keyframes homeIntroMarkSpin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(0.98);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg) scale(1.02);
    }
}

@keyframes homeIntroWordSweep {
    0% {
        opacity: 0;
        transform: translateX(-160%) skewX(-18deg);
    }
    18% {
        opacity: 0.98;
    }
    100% {
        opacity: 0;
        transform: translateX(700%) skewX(-18deg);
    }
}

@keyframes homeIntroWordRise {
    0% {
        opacity: 0;
        filter: blur(22px);
        transform: translate3d(0, 84px, 0) scale(0.88);
        letter-spacing: -0.12em;
    }
    62% {
        opacity: 1;
        filter: blur(0.6px);
        transform: translate3d(0, -8px, 0) scale(1.015);
        letter-spacing: -0.04em;
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
        letter-spacing: -0.045em;
    }
}

@keyframes homeIntroWordLiftOut {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
        letter-spacing: -0.045em;
    }
    100% {
        opacity: 0;
        filter: blur(18px);
        transform: translate3d(0, -56px, 0) scale(1.03);
        letter-spacing: 0.08em;
    }
}

@keyframes homeIntroRewritePulse {
    0% {
        transform: scale(0.94);
        opacity: 0;
    }
    35% {
        opacity: 0.84;
    }
    100% {
        transform: scale(1.08);
        opacity: 0;
    }
}

@keyframes homeIntroGlyphOut {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
        opacity: 0;
        filter: blur(9px);
        transform: translate3d(0, -1.1em, 0) scale(1.04);
    }
}

@keyframes homeIntroGlyphIn {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: translate3d(0, 1.1em, 0) scale(0.96);
    }
    68% {
        opacity: 1;
        filter: blur(0.3px);
        transform: translate3d(0, -0.06em, 0) scale(1.01);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes homeHeroExposureBg {
    0% {
        opacity: 0;
        filter: blur(14px) brightness(0.72) saturate(0.82);
    }
    100% {
        opacity: 1;
        filter: blur(0) brightness(1) saturate(1);
    }
}

@keyframes homeHeroExposureLift {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
        filter: blur(12px) brightness(0.76) saturate(0.88);
    }
    55% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) brightness(1) saturate(1);
    }
}

@media (max-width: 900px) {
    body.home-page .home-cinematic-intro__lockup {
        width: min(620px, 86vw) !important;
        gap: 15px !important;
    }

    .navbar .logo-image-wrap {
        width: clamp(168px, 22vw, 198px) !important;
        height: clamp(44px, 4.4vw, 50px) !important;
    }

    .navbar {
        padding: 0.58rem 1.04rem !important;
    }

    .navbar.scrolled {
        padding: 0.42rem 1.04rem !important;
    }

    .footer-modern .logo-image-wrap {
        width: clamp(226px, 30vw, 270px) !important;
        height: clamp(68px, 6.4vw, 78px) !important;
    }

    .navbar .logo-image-wrap::before,
    .footer-modern .logo-image-wrap::before {
        width: 48px !important;
        height: 48px !important;
    }

    .navbar .logo-image-wrap::after,
    .footer-modern .logo-image-wrap::after {
        width: 34px !important;
        height: 34px !important;
    }
}

@media (max-width: 640px) {
    body.home-page .home-cinematic-intro__lockup {
        width: min(500px, 92vw) !important;
        gap: 12px !important;
    }

    body.home-page .home-cinematic-intro__word.is-tagline {
        font-size: clamp(0.96rem, 3.4vw, 1.22rem);
        letter-spacing: 0.14em;
        max-width: min(18ch, calc(100vw - 52px));
    }

    body.home-page .navbar .logo-dock-target {
        left: 22px;
        width: 48px;
        height: 48px;
    }

    body.home-page .home-cinematic-intro.is-collapsing {
        clip-path: inset(0 0 calc(100% - 74px) 0);
    }

    .navbar .logo-image-wrap {
        width: clamp(150px, 40vw, 176px) !important;
        height: clamp(40px, 9vw, 46px) !important;
    }

    .navbar {
        padding: 0.5rem 0.86rem !important;
    }

    .navbar.scrolled {
        padding: 0.36rem 0.86rem !important;
    }

    .footer-modern .logo-image-wrap {
        width: clamp(198px, 58vw, 244px) !important;
        height: clamp(60px, 14vw, 72px) !important;
    }

    .navbar .logo-image-wrap::before,
    .footer-modern .logo-image-wrap::before,
    .auth-v2-logo-image-wrap::before {
        left: 26px !important;
        top: 47% !important;
        width: 40px !important;
        height: 40px !important;
    }

    .navbar .logo-image-wrap::after,
    .footer-modern .logo-image-wrap::after,
    .auth-v2-logo-image-wrap::after {
        left: 26px !important;
        top: 47% !important;
        width: 28px !important;
        height: 28px !important;
    }
}

.auth-v2-logo-image-wrap {
    position: relative;
    width: min(268px, 100%) !important;
    min-height: 78px !important;
    overflow: visible !important;
}

.auth-v2-logo-image-wrap::before {
    left: 26px !important;
    width: 62px !important;
    height: 62px !important;
    filter: blur(18px) !important;
    opacity: 0.68 !important;
}

.auth-v2-logo-image-wrap::after {
    left: 26px !important;
    width: 44px !important;
    height: 44px !important;
    filter: blur(14px) !important;
    opacity: 0.48 !important;
}

.auth-v2-logo-image {
    position: absolute !important;
    inset: 0 !important;
    width: 110% !important;
    height: 108% !important;
    max-width: 100% !important;
    left: -8px !important;
    top: -2px !important;
    transform: scale(1.065) !important;
    transform-origin: left center !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* FINAL cookie consent overrides */






@media (max-width: 767px) {


}

@media (max-width: 768px) {
    .auth-v2-logo-image-wrap {
        width: min(232px, 100%) !important;
        min-height: 68px !important;
    }
}

/* FINAL intro + cookie enhancement overrides */
body.home-page .home-cinematic-intro__projection,
body.home-page .home-cinematic-intro__grain,
body.home-page .home-cinematic-intro__dock-bloom {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
}

body.home-page .home-cinematic-intro__projection {
    opacity: 0.34 !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 24%),
        radial-gradient(circle at 22% 34%, rgba(122, 92, 255, 0.14), transparent 28%),
        radial-gradient(circle at 78% 48%, rgba(240, 85, 182, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 28%, rgba(255, 255, 255, 0.02) 72%, rgba(0, 0, 0, 0.18));
    mix-blend-mode: screen !important;
    animation: homeIntroProjectionPan 12s linear infinite alternate !important;
}

body.home-page .home-cinematic-intro__grain {
    inset: -16% !important;
    opacity: 0.11 !important;
    background-image:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 3px),
        radial-gradient(circle, rgba(255, 255, 255, 0.09) 0 0.8px, transparent 0.95px),
        radial-gradient(circle, rgba(214, 110, 216, 0.07) 0 0.7px, transparent 0.9px),
        radial-gradient(circle, rgba(122, 92, 255, 0.06) 0 0.85px, transparent 1px);
    background-size: auto, 13px 13px, 17px 17px, 23px 23px !important;
    background-position: 0 0, 0 0, 8px 6px, 3px 9px !important;
    mix-blend-mode: soft-light !important;
    animation:
        homeIntroGrainJitter 260ms steps(2) infinite,
        homeIntroGrainDrift 7.8s linear infinite alternate !important;
}

body.home-page .home-cinematic-intro__dock-bloom {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: min(58vw, 740px) !important;
    height: min(22vw, 290px) !important;
    opacity: 0 !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.24), transparent 30%),
        radial-gradient(circle at 42% 50%, rgba(122, 92, 255, 0.46), transparent 46%),
        radial-gradient(circle at 58% 50%, rgba(240, 85, 182, 0.42), transparent 48%) !important;
    filter: blur(26px) !important;
    mix-blend-mode: screen !important;
}

body.home-page .home-cinematic-intro.is-blooming .home-cinematic-intro__dock-bloom {
    animation: homeIntroDockBloom 560ms cubic-bezier(.16, 1, .3, 1) both !important;
}

body.home-page .home-cinematic-intro__word.is-tagline {
    max-width: min(20ch, calc(100vw - 72px)) !important;
    font-size: clamp(1.45rem, 2.7vw, 2.35rem) !important;
    line-height: 1.12 !important;
    letter-spacing: 0.14em !important;
}

body.home-page.home-intro-active .hero-content > div:nth-child(2) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

body.home-page.home-intro-active .hero-content > div:nth-child(2) .hero-card {
    opacity: 0 !important;
    transform: translateY(34px) scale(0.958) rotateX(7deg) !important;
    transform-origin: center top !important;
    filter: blur(16px) brightness(0.68) saturate(0.82) !important;
}

body.home-page.home-intro-played.home-intro-ready .hero-content > div:nth-child(2) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

body.home-page.home-intro-played.home-intro-ready .hero-content > div:nth-child(2) .hero-card {
    animation: homeHeroCardReveal 1120ms cubic-bezier(.16, 1, .3, 1) 220ms both !important;
}

body.home-page.home-intro-active .hero-content > .igp-106 {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

body.home-page.home-intro-active .tech-ribbon-wrap {
    opacity: 0 !important;
    transform: translateY(20px) scale(0.986) !important;
    filter: blur(10px) brightness(0.76) saturate(0.86) !important;
}

body.home-page.home-intro-played.home-intro-ready .hero-content > .igp-106 {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

body.home-page.home-intro-played.home-intro-ready .tech-ribbon-wrap {
    animation: homeHeroRibbonReveal 920ms cubic-bezier(.2, 1, .24, 1) 380ms both !important;
}

body.home-page.home-intro-reduced .home-cinematic-intro__projection {
    opacity: 0.18 !important;
    animation: none !important;
}

body.home-page.home-intro-reduced .home-cinematic-intro__grain,
body.home-page.home-intro-reduced .home-cinematic-intro__flash,
body.home-page.home-intro-reduced .home-cinematic-intro__dock-bloom {
    display: none !important;
}

body.home-page.home-intro-reduced .home-cinematic-intro__word {
    transition-duration: 360ms !important;
}

body.home-page.home-intro-reduced .home-cinematic-intro__lockup {
    transition-duration: 560ms !important;
}

























@media (max-width: 767px) {
    body.home-page .home-cinematic-intro__word.is-tagline {
        max-width: min(20ch, calc(100vw - 42px)) !important;
        font-size: clamp(1.12rem, 4.1vw, 1.52rem) !important;
        letter-spacing: 0.11em !important;
    }



}

@keyframes homeIntroProjectionPan {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 0.24;
    }
    100% {
        transform: scale(1.06) translate3d(-1.5%, 1%, 0);
        opacity: 0.38;
    }
}

@keyframes homeIntroGrainJitter {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0.5%, -0.5%, 0); }
}

@keyframes homeIntroGrainDrift {
    0% { background-position: 0 0, 0 0, 8px 6px, 3px 9px; }
    100% { background-position: 0 8px, 7px 4px, 14px 12px, 10px 16px; }
}

@keyframes homeIntroDockBloom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
        filter: blur(32px);
    }
    22% {
        opacity: 0.94;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.18);
        filter: blur(54px);
    }
}

@keyframes homeHeroCardReveal {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(0.958) rotateX(7deg);
        filter: blur(16px) brightness(0.68) saturate(0.82);
    }
    58% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0) brightness(1) saturate(1);
    }
}

@keyframes homeHeroRibbonReveal {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.986);
        filter: blur(10px) brightness(0.76) saturate(0.86);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0) brightness(1) saturate(1);
    }
}


/* 2026-04-07 frontend QA fixes */
body.home-page .grid-3d {
    align-items: stretch;
}

body.home-page .tilt-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    padding: 3.15rem 2rem 2rem;
}

body.home-page .tilt-card p {
    margin: 0 auto;
    max-width: 19rem;
}

body.home-page .card-stats {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 1.35rem;
    padding-top: 0.15rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    opacity: 1;
    transform: none;
}

body.home-page .tilt-card:hover .card-stats {
    opacity: 1;
    transform: none;
}

body.home-page .stat-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    padding: 0.42rem 0.85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    color: color-mix(in srgb, var(--text) 82%, var(--primary) 18%);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
}

.demo-search-container {
    margin-top: 1.9rem;
    padding-inline: 1rem;
}

.demo-search-field {
    position: relative;
    width: min(100%, 760px);
    margin-inline: auto;
}

.demo-search-field__input,
.demo-search-container #demoSearch {
    width: 100%;
    min-height: 64px;
    padding: 0.95rem 1.25rem 0.95rem 3.75rem;
    border-radius: 1.1rem;
    line-height: 1.2;
}

.demo-search-field__icon {
    position: absolute;
    left: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 1.05rem;
    line-height: 1;
    color: var(--primary);
    pointer-events: none;
}

.ab-principles-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.35rem;
    align-items: stretch;
}

.ab-principles-grid .ab-principle-card {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.marketing-shell--contact {
    position: relative;
    z-index: 2;
    margin-top: -1.1rem;
    padding-top: 0;
}

.marketing-panel--message {
    padding-top: clamp(1.55rem, 2vw, 2.2rem);
}

.page-hero--legal {
    padding-bottom: 3.4rem;
}

.page-hero--legal .page-hero__inner {
    max-width: 780px;
}

.page-hero--legal .page-hero__title {
    max-width: 16ch;
}

.page-hero--legal .page-hero__subtitle {
    max-width: 56ch;
}

.marketing-shell--legal {
    padding-top: 0;
}

.page-content--legal {
    max-width: 940px;
    margin-inline: auto;
    border-radius: 28px;
    padding: clamp(1.4rem, 2.5vw, 2.6rem);
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .page-content--legal {
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
}

.page-content--legal > :first-child {
    margin-top: 0;
}

.page-content--legal h2,
.page-content--legal h3 {
    text-wrap: balance;
}

.page-content--legal p,
.page-content--legal li {
    font-size: 1rem;
    line-height: 1.85;
}

.page-content--legal .faq-list {
    max-width: none;
}

.auth-v2-logo-image-wrap {
    position: relative;
    overflow: visible !important;
    isolation: isolate;
}

.auth-v2-logo-image-wrap::before,
.auth-v2-logo-image-wrap::after {
    content: "";
    position: absolute;
    left: var(--auth-logo-glow-anchor, min(96px, 24%));
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    pointer-events: none;
}

.auth-v2-logo-image-wrap::before {
    z-index: 0;
    width: var(--auth-logo-glow-outer, clamp(86px, 18vw, 132px));
    height: var(--auth-logo-glow-outer, clamp(86px, 18vw, 132px));
    background: conic-gradient(from 0deg, rgba(236, 72, 153, 0.42), rgba(251, 191, 36, 0.28), rgba(34, 211, 238, 0.22), rgba(236, 72, 153, 0.42));
    opacity: 0.84;
    filter: blur(21px);
    animation: auth-logo-orbit 8s linear infinite;
}

.auth-v2-logo-image-wrap::after {
    z-index: 0;
    width: var(--auth-logo-glow-inner, clamp(72px, 15vw, 110px));
    height: var(--auth-logo-glow-inner, clamp(72px, 15vw, 110px));
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.82) 0%, rgba(236, 72, 153, 0.26) 32%, transparent 72%);
    opacity: 0.64;
    filter: blur(13px);
    animation: auth-logo-heartbeat 1.7s ease-in-out infinite;
}

.auth-v2-logo-image {
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .ab-principles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .marketing-shell--contact {
        margin-top: -0.5rem;
    }

    .page-hero--legal {
        padding-bottom: 2.7rem;
    }

    .page-content--legal {
        border-radius: 24px;
    }
}

@media (max-width: 640px) {
    body.home-page .tilt-card {
        padding: 2.65rem 1.35rem 1.5rem;
    }

    .ab-principles-grid {
        grid-template-columns: 1fr;
    }

    .demo-search-container {
        margin-top: 1.35rem;
        padding-inline: 0.75rem;
    }

    .demo-search-field__input,
    .demo-search-container #demoSearch {
        min-height: 58px;
        padding-left: 3.1rem;
    }

    .demo-search-field__icon {
        left: 1.05rem;
    }
}

/* 2026-04-07 final auth/legal/error fixes */
.marketing-shell--contact {
    margin-top: -1.2rem !important;
    padding-top: 0.95rem;
}

.marketing-grid--content {
    align-items: start;
}

.marketing-panel--message {
    padding-top: 2.15rem !important;
}

.page-hero--legal,
.page-hero--faq,
.page-hero--status {
    padding: clamp(6rem, 10vw, 8.5rem) 0 clamp(3.8rem, 6vw, 4.8rem);
}

.page-hero--legal .page-hero__inner,
.page-hero--faq .page-hero__inner,
.page-hero--status .page-hero__inner {
    max-width: 860px;
}

.page-hero--legal .page-hero__subtitle,
.page-hero--faq .page-hero__subtitle,
.page-hero--status .page-hero__subtitle {
    max-width: 760px;
}

.marketing-shell--legal,
.marketing-shell--faq {
    margin-top: -2.2rem;
    padding-top: 0;
}

.page-content--legal {
    max-width: 940px;
    margin-inline: auto;
    border-radius: 28px;
    padding: clamp(1.85rem, 3vw, 2.7rem) clamp(1.2rem, 3vw, 2.4rem);
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] .page-content--legal {
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
}

.marketing-grid--faq {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(1.2rem, 2.8vw, 2rem);
    align-items: start;
}

.faq-side-panel {
    gap: 1.2rem;
}

.faq-signal-grid {
    display: grid;
    gap: 0.85rem;
}

.faq-signal-card {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.05rem;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.faq-signal-card strong {
    color: #fff;
    font-size: 0.96rem;
    font-weight: 700;
}

.faq-signal-card span {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
    line-height: 1.6;
}

.marketing-panel--faq {
    padding: clamp(1.5rem, 3vw, 2.2rem);
}

.faq-toolbar {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
}

.faq-toolbar .marketing-copy {
    max-width: 56ch;
}

.faq-list {
    max-width: none;
    gap: 0.85rem;
}

.faq-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: rgba(9, 12, 24, 0.45);
    overflow: hidden;
    transition: border-color 0.24s ease, transform 0.24s ease, background 0.24s ease;
}

.faq-item:hover,
.faq-item.active {
    border-color: rgba(203, 95, 232, 0.34);
    background: rgba(20, 24, 40, 0.62);
    transform: translateY(-2px);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.15rem;
    text-align: left;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.faq-question i {
    color: rgba(255, 255, 255, 0.55);
    transition: transform 0.24s ease, color 0.24s ease;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
    color: #fff;
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.24s ease;
}

.faq-answer > * {
    overflow: hidden;
}

.faq-answer p {
    margin: 0;
    padding: 0 1.15rem 1.15rem;
    color: rgba(255, 255, 255, 0.74);
    line-height: 1.72;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.status-card {
    padding: 1.4rem;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.12);
}

.status-card__eyebrow {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.48);
}

.status-card__state {
    margin-top: 0.65rem;
    font-size: 1.28rem;
    font-weight: 800;
    color: #fff;
}

.status-card__copy {
    margin: 0.45rem 0 0;
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.7;
}

.status-card--success .status-card__state { color: #86efac; }
.status-card--info .status-card__state { color: #7dd3fc; }
.status-card--warning .status-card__state { color: #fcd34d; }

.error-page {
    min-height: 100svh;
    padding: 7rem 1rem 3rem;
    align-items: flex-start;
}

.error-experience {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100svh - 8.5rem);
    width: 100%;
}

.error-experience__panel {
    position: relative;
    width: min(760px, 100%);
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
      radial-gradient(circle at top left, rgba(203, 95, 232, 0.16), transparent 38%),
      rgba(8, 12, 24, 0.82);
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.error-experience__panel::before {
    content: "";
    position: absolute;
    inset: auto auto -10% -6%;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(113, 100, 255, 0.26), transparent 72%);
    filter: blur(12px);
    pointer-events: none;
}

.error-page--warning .error-experience__panel::before {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.24), transparent 72%);
}

.error-page--info .error-experience__panel::before {
    background: radial-gradient(circle, rgba(34, 211, 238, 0.24), transparent 72%);
}

.error-state-mark {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin-bottom: 1.15rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    font-size: 1.65rem;
    color: #fff;
    box-shadow: 0 20px 36px rgba(15, 23, 42, 0.2);
}

.error-content {
    position: relative;
    z-index: 1;
}

.error-page .cookie-banner-shell,
.error-page .cookie-banner,
.error-page .cookie-banner-shell__backdrop,
.error-page footer,
.error-page .site-footer,
.error-page .footer-section {
    display: none !important;
}

.error-page .navbar {
    background: rgba(9, 12, 24, 0.88);
    backdrop-filter: blur(16px);
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

.error-page .nav-inner {
    min-height: 74px;
}

.error-state-mark--warning { color: #fcd34d; }
.error-state-mark--info { color: #7dd3fc; }
.error-state-mark--error { color: #fda4af; }

.error-state-mark::before,
.error-state-mark::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

.error-experience__panel::after {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 28px;
    pointer-events: none;
    opacity: 0.34;
    z-index: 0;
}

.error-page--lock .error-state-mark::before {
    inset: 14px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 0 0 8px rgba(113, 100, 255, 0.08);
}

.error-page--lock .error-state-mark::after {
    inset: 4px 28px auto 28px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.16);
    border-bottom: 0;
    border-radius: 999px 999px 0 0;
}

.error-page--lock .error-experience__panel::after {
    background:
      radial-gradient(circle at 12% 85%, rgba(113, 100, 255, 0.32), transparent 32%),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 26px);
}

.error-page--shield .error-state-mark::before {
    inset: 9px;
    clip-path: polygon(50% 0%, 88% 14%, 82% 64%, 50% 100%, 18% 64%, 12% 14%);
    border: 1px solid rgba(125,211,252,0.24);
    background: linear-gradient(180deg, rgba(125,211,252,0.18), rgba(125,211,252,0.04));
}

.error-page--shield .error-state-mark::after {
    inset: 16px;
    background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.18) 40% 48%, transparent 48%);
}

.error-page--shield .error-experience__panel::after {
    background:
      linear-gradient(140deg, rgba(125,211,252,0.14), transparent 30%),
      linear-gradient(320deg, rgba(125,211,252,0.12), transparent 38%);
}

.error-page--search .error-state-mark::before {
    inset: 15px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.18);
}

.error-page--search .error-state-mark::after {
    inset: auto 16px 14px auto;
    width: 18px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    transform: rotate(45deg);
    transform-origin: center;
}

.error-page--search .error-experience__panel::after {
    background:
      radial-gradient(circle at 76% 30%, rgba(236,72,153,0.14), transparent 18%),
      radial-gradient(circle at 72% 28%, transparent 0 42px, rgba(255,255,255,0.06) 42px 43px, transparent 43px);
}

.error-page--timer .error-state-mark::before {
    inset: 12px;
    border-radius: 999px;
    border: 2px solid rgba(251,191,36,0.26);
    box-shadow: inset 0 0 0 6px rgba(251,191,36,0.06);
}

.error-page--timer .error-state-mark::after {
    inset: 18px;
    background:
      linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,0.18) 48% 52%, transparent 52%),
      linear-gradient(180deg, transparent 0 30%, rgba(255,255,255,0.18) 30% 34%, transparent 34%);
    transform: rotate(24deg);
}

.error-page--timer .error-experience__panel::after {
    background:
      radial-gradient(circle at 78% 22%, rgba(251,191,36,0.14), transparent 18%),
      radial-gradient(circle at 78% 22%, transparent 0 54px, rgba(255,255,255,0.05) 54px 55px, transparent 55px);
}

.error-page--core .error-state-mark::before {
    inset: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at center, rgba(244,114,182,0.22), rgba(113,100,255,0.06) 56%, transparent 70%);
}

.error-page--core .error-state-mark::after {
    inset: 10px;
    background:
      linear-gradient(35deg, transparent 0 46%, rgba(255,255,255,0.16) 46% 49%, transparent 49%),
      linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,0.16) 42% 45%, transparent 45%),
      linear-gradient(180deg, transparent 0 55%, rgba(255,255,255,0.1) 55% 57%, transparent 57%);
}

.error-page--core .error-experience__panel::after {
    background:
      radial-gradient(circle at 50% 50%, rgba(244,114,182,0.14), transparent 20%),
      radial-gradient(circle at 50% 50%, transparent 0 82px, rgba(255,255,255,0.05) 82px 83px, transparent 83px);
}

.error-page--gateway .error-state-mark::before {
    inset: 12px 20px;
    border-radius: 14px;
    background:
      linear-gradient(90deg, rgba(125,211,252,0.16) 0 40%, transparent 40% 60%, rgba(125,211,252,0.16) 60% 100%);
}

.error-page--gateway .error-state-mark::after {
    inset: 30px 14px;
    height: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.16), transparent 45%, rgba(255,255,255,0.16) 55%, transparent);
}

.error-page--gateway .error-experience__panel::after {
    background:
      linear-gradient(90deg, rgba(125,211,252,0.09) 0 16%, transparent 16% 48%, rgba(125,211,252,0.09) 48% 52%, transparent 52% 84%, rgba(125,211,252,0.09) 84% 100%);
}

.error-page--maintenance .error-state-mark::before {
    inset: 10px;
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 7px, transparent 7px 14px),
      radial-gradient(circle at center, rgba(251,191,36,0.14), transparent 58%);
}

.error-page--maintenance .error-state-mark::after {
    inset: 16px;
    background:
      linear-gradient(45deg, transparent 0 45%, rgba(255,255,255,0.16) 45% 48%, transparent 48%),
      linear-gradient(-45deg, transparent 0 45%, rgba(255,255,255,0.16) 45% 48%, transparent 48%);
}

.error-page--maintenance .error-experience__panel::after {
    background:
      repeating-linear-gradient(135deg, rgba(251,191,36,0.06) 0 16px, transparent 16px 32px),
      radial-gradient(circle at 84% 22%, rgba(251,191,36,0.12), transparent 24%);
}

.error-kicker {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.error-title {
    margin: 0.5rem 0 0;
    color: #fff;
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    line-height: 1.06;
    letter-spacing: -0.03em;
}

.error-copy {
    margin: 0.85rem 0 0;
    max-width: 54ch;
    color: rgba(255, 255, 255, 0.72);
    font-size: 1rem;
    line-height: 1.72;
}

.error-request-id {
    margin-top: 1rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
}

.error-request-id span {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

.error-request-id code {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
}

.error-action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.4rem;
}

.error-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.8rem 1rem;
    border-radius: 18px;
    border: 1px solid transparent;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.22s ease, filter 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.error-action:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.error-action:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
}

.error-action--primary {
    background: linear-gradient(135deg, #7164ff, #cb5fe8, #f055b6);
    color: #fff;
    box-shadow: 0 18px 36px rgba(122, 92, 255, 0.24);
}

.error-action--secondary {
    background: rgba(125, 211, 252, 0.12);
    border-color: rgba(125, 211, 252, 0.2);
    color: #d8f5ff;
}

.error-action--ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}

@media (max-width: 991px) {
    .marketing-grid--faq {
        grid-template-columns: 1fr;
    }

    .status-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .marketing-shell--contact,
    .marketing-shell--legal,
    .marketing-shell--faq {
        margin-top: -0.45rem !important;
    }

    .page-content--legal {
        padding: 1.25rem 1rem;
    }

    .error-page {
        padding: 5.5rem 1rem 6rem;
    }

    .error-experience__panel {
        border-radius: 28px;
        padding: 1.2rem;
    }

    .error-experience {
        min-height: calc(100svh - 7rem);
        align-items: flex-start;
    }

    .error-page .nav-inner {
        min-height: 64px;
    }

    .error-action-grid {
        flex-direction: column;
    }

    .error-action {
        width: 100%;
    }
}

.about-hero--system .about-hero-content {
    max-width: 860px;
}

.about-hero--system .page-hero__actions {
    justify-content: center;
    margin-top: 1.9rem;
}

.faq-hub {
    display: grid;
    gap: 1.6rem;
    padding: clamp(1.5rem, 3vw, 2.3rem);
}

.faq-hub__hero {
    display: grid;
    gap: 1.2rem;
}

.faq-signal-grid--wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.faq-list--hub {
    display: grid;
    gap: 0.95rem;
}

.faq-hub__actions {
    padding-top: 0.4rem;
}

.faq-hub__actions a {
    min-height: 48px;
    align-items: center;
}

@media (max-width: 991px) {
    .faq-signal-grid--wide {
        grid-template-columns: 1fr;
    }
}

.marketing-shell--faq {
    margin-top: -2rem;
}

.faq-board {
    padding: clamp(1.2rem, 3vw, 2rem);
}

.faq-board__grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(1.2rem, 2.8vw, 2rem);
    align-items: start;
}

.faq-board__aside {
    display: grid;
    gap: 1rem;
}

.faq-board__intro {
    padding: 1.15rem 1.2rem;
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    background:
        radial-gradient(circle at top left, rgba(99, 102, 241, 0.12), transparent 40%),
        radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.1), transparent 42%),
        color-mix(in srgb, var(--bg-card) 92%, transparent 8%);
}

.faq-board__signals {
    display: grid;
    gap: 0.85rem;
}

.faq-board__signals .faq-signal-card {
    min-height: 100%;
}

.faq-board__actions {
    padding-top: 0.2rem;
}

.faq-board__actions a {
    min-height: 48px;
    align-items: center;
}

.faq-board__main {
    display: grid;
    gap: 1rem;
}

.faq-board__stack {
    padding: 1.15rem 1.2rem;
    border-radius: 1.5rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 94%, transparent 6%);
}

.faq-board__eyebrow {
    color: var(--primary);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.faq-board__title {
    margin: 0.55rem 0 0;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 2rem);
    line-height: 1.12;
    text-wrap: balance;
}

.faq-list--board {
    display: grid;
    gap: 0.9rem;
}

.faq-item--board {
    border-radius: 1.55rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 94%, transparent 6%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.faq-item--board .faq-question {
    min-height: 74px;
    padding: 1.25rem 1.3rem;
}

.faq-item--board .faq-answer {
    padding-inline: 1.3rem;
}

body.home-page.home-intro-active .hero-content > div:first-child {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    filter: blur(10px) brightness(0.82);
}

body.home-page.home-intro-active .hero-content > div:nth-child(2),
body.home-page.home-intro-active .hero-content > .igp-106 {
    opacity: 0;
    transform: translateY(34px) scale(0.958);
    filter: blur(16px) brightness(0.68) saturate(0.82);
}

body.home-page.home-intro-active.home-intro-headline-visible .hero-content > div:first-child {
    animation: homeHeroRevealPrimary 840ms cubic-bezier(.16, 1, .3, 1) both;
}

body.home-page.home-intro-active.home-intro-secondary-visible .hero-content > div:nth-child(2) {
    animation: homeHeroRevealSecondary 980ms cubic-bezier(.16, 1, .3, 1) both;
}

body.home-page.home-intro-active.home-intro-secondary-visible .hero-content > .igp-106 {
    animation: homeHeroRevealRibbon 1080ms cubic-bezier(.16, 1, .3, 1) both;
}

body.home-page .home-cinematic-intro__lockup.is-settling {
    animation: homeIntroLockupSettle 520ms cubic-bezier(.18, 1, .32, 1) both;
}

@keyframes homeHeroRevealPrimary {
    0% {
        opacity: 0;
        transform: translateY(26px) scale(0.985);
        filter: blur(10px) brightness(0.82);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes homeHeroRevealSecondary {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(0.958);
        filter: blur(16px) brightness(0.68) saturate(0.82);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes homeHeroRevealRibbon {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        filter: blur(18px) brightness(0.7) saturate(0.8);
    }
    100% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes homeIntroLockupSettle {
    0% {
        transform: translate(-50%, -50%) scale(1.02) rotate(-0.2deg);
    }
    60% {
        transform: translate(calc(-50% + 6px), calc(-50% - 2px)) scale(1.012) rotate(0.25deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@media (max-width: 991px) {
    .faq-board__grid {
        grid-template-columns: 1fr;
    }
}

.faq-board {
    display: grid;
    gap: 1.9rem;
}

.faq-board__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: 1.35rem;
    align-items: start;
}

.faq-board__intro {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.faq-board__signals {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.95rem;
}

.faq-signal-card {
    min-height: 100%;
    display: grid;
    gap: 0.45rem;
    padding: 1rem 1.05rem;
    border-radius: 1.3rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

.faq-signal-card strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.92);
}

.faq-signal-card span {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(226, 232, 240, 0.76);
}

.faq-board__aside-actions {
    display: grid;
    gap: 0.85rem;
}

.faq-board__aside-actions a {
    min-height: 50px;
    justify-content: center;
}

.faq-board__main {
    display: grid;
    gap: 1.05rem;
}

.faq-board__stack {
    max-width: 860px;
}

.faq-board__title {
    margin-bottom: 0;
}

.faq-board__stack .marketing-copy {
    margin-top: 0.7rem;
    max-width: 760px;
}

.faq-list--board {
    display: grid;
    gap: 1rem;
}

.faq-item--board {
    border-radius: 1.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(12, 18, 34, 0.94), rgba(14, 21, 38, 0.9));
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.faq-item--board:hover,
.faq-item--board.active {
    border-color: rgba(139, 99, 255, 0.42);
    box-shadow: 0 26px 56px rgba(76, 29, 149, 0.2);
}

.faq-item--board .faq-question {
    min-height: 76px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.22rem 1.32rem;
}

.faq-item--board .faq-question span {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
    color: #f8fafc;
}

.faq-item--board .faq-question i {
    flex-shrink: 0;
    color: rgba(203, 213, 225, 0.74);
}

.faq-item--board .faq-answer {
    max-height: 0;
    overflow: hidden;
    padding-inline: 1.32rem;
    opacity: 0;
    transition: max-height 420ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease, padding-bottom 260ms ease;
}

.faq-item--board .faq-answer p {
    margin: 0;
    color: rgba(226, 232, 240, 0.84);
    line-height: 1.78;
}

.faq-item--board.active .faq-answer {
    max-height: 560px;
    padding-bottom: 1.32rem;
    opacity: 1;
}

body.home-page.home-intro-active.home-intro-headline-visible .hero-content > div:first-child {
    animation: homeHeroRevealPrimary 820ms cubic-bezier(.18, 1, .28, 1) both;
}

body.home-page.home-intro-active.home-intro-secondary-visible .hero-content > div:nth-child(2) {
    animation: homeHeroRevealSecondary 980ms cubic-bezier(.12, .96, .22, 1) 80ms both;
}

body.home-page.home-intro-active.home-intro-secondary-visible .hero-content > .igp-106 {
    animation: homeHeroRevealRibbon 1120ms cubic-bezier(.12, .96, .22, 1) 200ms both;
}

@media (max-width: 991px) {
    .faq-board__top {
        grid-template-columns: 1fr;
    }

    .faq-board__aside-actions a {
        justify-content: flex-start;
    }
}




/* ============================================================================
   Homepage intro v10 — Skip button + iris-out morph + section title char reveal
   ============================================================================ */

/* Skip Intro button */
body.home-page .home-cinematic-intro__skip {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 14;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
    opacity: 0;
    pointer-events: none;
    animation: homeIntroSkipIn 480ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
}
body.home-page .home-cinematic-intro__skip:hover,
body.home-page .home-cinematic-intro__skip:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.10);
    transform: translateY(-1px);
    outline: none;
}
body.home-page .home-cinematic-intro__skip i { font-size: 9px; }
body.home-page.home-intro-iris-out .home-cinematic-intro__skip,
body.home-page .home-cinematic-intro.is-iris-out .home-cinematic-intro__skip {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 200ms ease;
}
@keyframes homeIntroSkipIn {
    to { opacity: 1; pointer-events: auto; }
}
@media (max-width: 600px) {
    body.home-page .home-cinematic-intro__skip {
        top: 16px;
        right: 16px;
        padding: 7px 14px;
        font-size: 10px;
        letter-spacing: 0.18em;
    }
}

/* Iris-out morph (circle clip-path reveals the homepage beneath) */
body.home-page .home-cinematic-intro.is-iris-out {
    clip-path: circle(0% at 50% 50%);
    -webkit-clip-path: circle(0% at 50% 50%);
    transition:
        clip-path 1100ms cubic-bezier(0.7, 0, 0.3, 1),
        -webkit-clip-path 1100ms cubic-bezier(0.7, 0, 0.3, 1),
        opacity 720ms 380ms ease,
        visibility 1100ms ease !important;
    pointer-events: none;
}
body.home-page .home-cinematic-intro.is-iris-out .home-cinematic-intro__projection,
body.home-page .home-cinematic-intro.is-iris-out .home-cinematic-intro__grain,
body.home-page .home-cinematic-intro.is-iris-out .home-cinematic-intro__dock-bloom,
body.home-page .home-cinematic-intro.is-iris-out .home-cinematic-intro__stage,
body.home-page .home-cinematic-intro.is-iris-out .home-cinematic-intro__lockup {
    opacity: 0 !important;
    transition: opacity 320ms ease !important;
}
/* Letterbox bars retract during iris-out for a real scene reveal */
body.home-page .home-cinematic-intro.is-iris-out .home-cinematic-intro__letterbox--top {
    transform: translateY(-100%) !important;
    transition: transform 900ms cubic-bezier(0.7, 0, 0.3, 1) !important;
}
body.home-page .home-cinematic-intro.is-iris-out .home-cinematic-intro__letterbox--bottom {
    transform: translateY(100%) !important;
    transition: transform 900ms cubic-bezier(0.7, 0, 0.3, 1) !important;
}
@media (prefers-reduced-motion: reduce) {
    body.home-page .home-cinematic-intro.is-iris-out {
        transition: opacity 320ms ease, visibility 320ms ease !important;
        clip-path: none !important;
        -webkit-clip-path: none !important;
        opacity: 0 !important;
    }
}

/* Section title char-by-char reveal on scroll */
.section-title .dc-ch-rev {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.42em) skewY(6deg);
    will-change: transform, opacity;
}
.section-title .dc-ch-rev.is-on {
    opacity: 1;
    transform: translateY(0) skewY(0);
    transition:
        transform 760ms cubic-bezier(0.2, 0.9, 0.2, 1) var(--dc-cd, 0s),
        opacity 560ms ease var(--dc-cd, 0s);
}
.section-title .gradient-text .dc-ch-rev {
    background: var(--brand-grad, linear-gradient(135deg, #6366f1 0%, #a855f7 45%, #ec4899 100%));
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
@media (prefers-reduced-motion: reduce) {
    .section-title .dc-ch-rev { opacity: 1 !important; transform: none !important; }
}


/* Iris-out base state — needed so the circle clip-path transition has a from-value. */
body.home-page .home-cinematic-intro {
    clip-path: circle(150% at 50% 50%);
    -webkit-clip-path: circle(150% at 50% 50%);
}
body.home-page .home-cinematic-intro.is-iris-out {
    clip-path: circle(0% at 50% 50%) !important;
    -webkit-clip-path: circle(0% at 50% 50%) !important;
}
@media (prefers-reduced-motion: reduce) {
    body.home-page .home-cinematic-intro {
        clip-path: none;
        -webkit-clip-path: none;
    }
}

/* Demo detail hero aligned with the services hero treatment */
.demo-detail-hero {
    min-height: 78vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 130px 0 95px;
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 18% 18%, rgba(99, 102, 241, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 84% 16%, rgba(236, 72, 153, 0.1) 0%, transparent 42%),
        var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

#demo-detail-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.demo-detail-hero-glow {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    width: min(74vw, 760px);
    height: min(74vw, 760px);
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.1) 28%, transparent 68%);
    filter: blur(70px);
}

.demo-detail-hero .container {
    position: relative;
    z-index: 2;
    max-width: 860px;
    margin: 0 auto;
}

.demo-detail-hero h1 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 1.5rem;
    color: var(--text);
    word-wrap: break-word;
}

.demo-detail-hero-gradient {
    background: linear-gradient(135deg, var(--text) 5%, var(--primary) 55%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.demo-detail-hero p {
    color: var(--text-muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    max-width: 680px;
    margin: 0 auto 1.8rem;
    line-height: 1.7;
}

.demo-detail-hero .detail-breadcrumb {
    position: relative;
    z-index: 2;
    color: var(--text-muted);
}

.demo-detail-hero .detail-breadcrumb a {
    color: var(--text-muted);
}

.demo-detail-hero .detail-industry-chip {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    border: 0;
    background: transparent;
    padding: 0;
}

.demo-detail-hero .hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.demo-detail-hero .igp-79 {
    font-size: 0.9rem;
    opacity: 0.84;
}

@media (max-width: 640px) {
    .demo-detail-hero {
        min-height: auto;
        padding: 100px 1rem 60px;
    }

    .demo-detail-hero h1 {
        font-size: clamp(2rem, 10vw, 2.6rem);
        line-height: 1.1;
        margin-bottom: 0.75rem;
    }

    .demo-detail-hero .hero-actions .btn {
        width: 100%;
        max-width: 320px;
        margin: 0.25rem 0;
    }
}