/* ============================================================
   DPO Premium Theme - Enterprise Edition
   Inspired by AIOR & Aigocy templates
   PeopleWorks Services & Xari Technologies
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

/* ============ PREMIUM VARIABLES ============ */
:root {
    --primary: #0a0f1a;
    --primary-light: #141d2f;
    --accent: #2ea3f2;
    --accent-glow: #47b5ff;
    --gold: #f0a500;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --bg: #f8f9fc;
    --card-bg: #ffffff;
    --text: #1e293b;
    --text-light: #64748b;
    --border: #e2e8f0;
    --glass: rgba(255,255,255,0.04);
    --glass-border: rgba(255,255,255,0.08);
    --glow-accent: rgba(46,163,242,0.15);
    --glow-gold: rgba(240,165,0,0.1);
}

/* ============ PREMIUM BASE ============ */
body {
    font-family: 'Urbanist', 'Inter', -apple-system, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ============ PREMIUM HERO ============ */
.hero {
    background: radial-gradient(ellipse at 20% 50%, rgba(46,163,242,0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(240,165,0,0.05) 0%, transparent 50%),
                linear-gradient(180deg, #0a0f1a 0%, #0d1929 50%, #111b2e 100%) !important;
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
}
.hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232ea3f2' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}
.hero::after {
    background: radial-gradient(circle at 80% 30%, rgba(46,163,242,0.12) 0%, transparent 60%) !important;
    width: 800px !important;
    height: 800px !important;
}
.hero-inner { padding: 80px 0 72px !important; }

.hero h1 {
    font-family: 'Sora', sans-serif !important;
    font-size: 52px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
}

.hero-sub {
    font-size: 20px !important;
    line-height: 1.6 !important;
    max-width: 640px !important;
}

/* Animated gradient on accent text */
.hero h1 .accent {
    background: linear-gradient(135deg, #2ea3f2 0%, #47b5ff 50%, #2ea3f2 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* ============ HERO MOBILE MOCKUP ============ */
.hero-mockup {
    position: absolute;
    right: -265px;
    top: 50%;
    transform: translateY(-50%) perspective(800px) rotateY(-8deg);
    z-index: 3;
    pointer-events: none;
    animation: mockupFloat 4s ease-in-out infinite;
}

.hero-mockup img {
    height: 520px;
    width: auto;
    filter: drop-shadow(0 20px 60px rgba(0,0,0,0.5)) drop-shadow(0 0 40px rgba(46,163,242,0.15));
    border-radius: 32px;
}

@keyframes mockupFloat {
    0%, 100% { transform: translateY(-50%) perspective(800px) rotateY(-8deg) translateZ(0); }
    50% { transform: translateY(-52%) perspective(800px) rotateY(-6deg) translateZ(10px); }
}

/* Make hero-inner relative for mockup positioning */
.hero-inner {
    position: relative !important;
    z-index: 2 !important;
}

/* Adjust hero text to not overlap with mockup on desktop */
.hero h1 {
    max-width: 600px !important;
}

.hero-sub {
    max-width: 560px !important;
}

/* ============ PREMIUM STATS ============ */
.hero-stat .num {
    font-family: 'Sora', sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    text-shadow: 0 0 20px rgba(46,163,242,0.3);
}

.hero-stat .label {
    font-size: 10px !important;
    letter-spacing: 2px !important;
}

/* ============ PREMIUM NAV ============ */
.nav {
    background: rgba(10,15,26,0.95) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(46,163,242,0.1) !important;
}

.nav a {
    font-family: 'Urbanist', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    padding: 16px 16px !important;
    transition: all 0.3s ease !important;
}

.nav a:hover {
    color: var(--accent) !important;
    text-shadow: 0 0 10px rgba(46,163,242,0.3);
}

/* ============ PREMIUM SECTIONS ============ */
.section {
    padding: 64px 0 !important;
}

/* Sections with mega-card: subtle bg to make the card pop */
#pillars, #iqp, #portal {
    background: linear-gradient(180deg, #f0f4f8 0%, var(--bg) 100%) !important;
}

h2.sec-title {
    font-family: 'Sora', sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

.section-tag {
    font-family: 'Urbanist', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    border-radius: 20px !important;
    padding: 6px 16px !important;
}

/* ============ PREMIUM 3D CARDS (Aigocy-inspired) ============ */
.pillar-card, .sec-card, .del-card, .iqp-card, .portal-card, .ai-level {
    border: none !important;
    border-radius: 24px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: var(--card-bg) !important;
    box-shadow:
        0px 7.77px 2.21px 0px rgba(0,0,0,0.04),
        0px 3px 3px 0px rgba(0,0,0,0.08),
        0px -6px 0px 0px rgba(0,0,0,0.03) inset,
        0px 3px 0px 0px rgba(255,255,255,0.5) inset !important;
}

.pillar-card:hover, .sec-card:hover, .del-card:hover, .portal-card:hover, .ai-level:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        0px 12px 24px 0px rgba(46,163,242,0.08),
        0px 4px 8px 0px rgba(0,0,0,0.06),
        0px -6px 0px 0px rgba(46,163,242,0.06) inset,
        0px 3px 0px 0px rgba(255,255,255,0.6) inset !important;
}

/* ============ PREMIUM KILLER BOX (Aigocy 3D) ============ */
.killer-box {
    border-radius: 24px !important;
    border: 2px solid var(--gold) !important;
    background: linear-gradient(135deg, rgba(240,165,0,0.03) 0%, rgba(46,163,242,0.02) 100%) !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.04),
        0px 3px 3px 0px rgba(0,0,0,0.06),
        0px -6px 0px 0px rgba(240,165,0,0.04) inset,
        0px 3px 0px 0px rgba(255,255,255,0.5) inset !important;
    padding: 28px 32px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.killer-box:hover {
    box-shadow:
        0px 16px 32px 0px rgba(240,165,0,0.1),
        0px 4px 8px 0px rgba(0,0,0,0.06),
        0px -6px 0px 0px rgba(240,165,0,0.06) inset,
        0px 3px 0px 0px rgba(255,255,255,0.6) inset !important;
    transform: translateY(-4px);
}

.killer-box::before {
    height: 3px !important;
    background: linear-gradient(90deg, var(--gold), var(--accent), var(--gold)) !important;
    background-size: 200% auto;
    animation: gradientShift 3s ease infinite;
}

.killer-content h3 {
    font-family: 'Sora', sans-serif !important;
    font-size: 19px !important;
}

/* ============ PREMIUM SCORE DEMO (3D) ============ */
.score-demo {
    border-radius: 24px !important;
    border: none !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.15),
        0px 3px 3px 0px rgba(0,0,0,0.08),
        0px -8px 0px 0px rgba(46,163,242,0.1) inset,
        0px 4px 0px 0px rgba(255,255,255,0.1) inset !important;
}

/* ============ PREMIUM COMPARISON TABLE (3D) ============ */
.comp-table {
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.04),
        0px 3px 3px 0px rgba(0,0,0,0.06),
        0px -6px 0px 0px rgba(0,0,0,0.03) inset,
        0px 3px 0px 0px rgba(255,255,255,0.4) inset !important;
}

.comp-table thead tr {
    background: linear-gradient(135deg, #0a0f1a 0%, #141d2f 100%) !important;
}

.comp-table tbody tr:hover {
    background: rgba(46,163,242,0.04) !important;
}

/* ============ PREMIUM CTA ============ */
.cta-section {
    background: radial-gradient(ellipse at 30% 50%, rgba(46,163,242,0.08) 0%, transparent 50%),
                linear-gradient(135deg, #0a0f1a 0%, #0d1929 100%) !important;
    padding: 72px 0 !important;
}

.cta-btn {
    font-family: 'Sora', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 40px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #47b5ff 0%, #2ea3f2 100%) !important;
    box-shadow:
        0px -3px 0px 0px rgba(0,0,0,0.15) inset,
        0px 2px 0px 0px rgba(255,255,255,0.3) inset,
        0px 7.77px 16px 0px rgba(46,163,242,0.25),
        0px 3px 6px 0px rgba(0,0,0,0.1) !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    letter-spacing: 0.5px;
}

.cta-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow:
        0px -3px 0px 0px rgba(0,0,0,0.15) inset,
        0px 2px 0px 0px rgba(255,255,255,0.4) inset,
        0px 12px 24px 0px rgba(46,163,242,0.35),
        0px 4px 8px 0px rgba(0,0,0,0.12) !important;
}

/* ============ PREMIUM PARTNER BADGES ============ */
.partner-badge {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(20px) !important;
    padding: 10px 20px !important;
}

/* ============ PREMIUM LANG TOGGLE ============ */
.lang-toggle {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 8px !important;
}

.lang-btn.active {
    background: linear-gradient(135deg, #2ea3f2, #0066cc) !important;
    box-shadow: 0 2px 12px rgba(46,163,242,0.4) !important;
}

/* ============ PREMIUM BODY SHIFT (room for side tabs) ============ */
body {
    padding-right: 48px !important;
}

.hero, .nav, .cta-section, .footer, #simulator, .section-dark {
    margin-right: -48px !important;
    padding-right: 48px !important;
}

/* ============ PREMIUM SIDE TABS (right side, no overlap) ============ */
.side-tabs {
    right: 0 !important;
    width: 44px !important;
}

.side-tab {
    border-radius: 12px 0 0 12px !important;
    box-shadow: -4px 4px 20px rgba(0,0,0,0.2) !important;
    padding: 16px 8px !important;
    font-size: 10px !important;
}

.side-tab .tab-icon { margin-bottom: 6px !important; }

.side-tab:hover {
    padding-right: 12px !important;
}

/* ============ PREMIUM SLIDE PANEL ============ */
.slide-panel {
    box-shadow: -12px 0 60px rgba(0,0,0,0.3) !important;
}

/* ============ PREMIUM DARK SECTIONS ============ */
.section-dark {
    background: linear-gradient(180deg, #0a0f1a 0%, #0d1929 60%, #111b2e 100%) !important;
    color: #e2e8f0 !important;
    position: relative;
}

.section-dark::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232ea3f2' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
}

.section-dark > .container { position: relative; z-index: 1; }

.section-dark h2.sec-title,
.section-dark h3,
.section-dark h4 {
    color: #fff !important;
}

.section-dark p,
.section-dark .sec-desc {
    color: rgba(226,232,240,0.8) !important;
}

.section-dark .section-tag {
    background: rgba(46,163,242,0.15) !important;
    color: var(--accent-glow) !important;
    border-color: rgba(46,163,242,0.2) !important;
}

/* Dark cards: Aigocy dark-gray 3D style */
.section-dark .pillar-card,
.section-dark .sec-card,
.section-dark .del-card,
.section-dark .portal-card,
.section-dark .region-card {
    background: #1e2330 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.3),
        0px 3px 3px 0px rgba(0,0,0,0.2),
        0px -8px 0px 0px #171c28 inset,
        0px 4px 0px 0px rgba(255,255,255,0.06) inset !important;
}

.section-dark .pillar-card:hover,
.section-dark .sec-card:hover,
.section-dark .portal-card:hover {
    background: #242a38 !important;
    border-color: rgba(46,163,242,0.15) !important;
    box-shadow:
        0px 16px 32px 0px rgba(0,0,0,0.35),
        0px 4px 8px 0px rgba(0,0,0,0.2),
        0px -8px 0px 0px rgba(46,163,242,0.08) inset,
        0px 4px 0px 0px rgba(255,255,255,0.08) inset !important;
}

.section-dark .pillar-card p,
.section-dark .sec-card p,
.section-dark .portal-card p {
    color: rgba(226,232,240,0.6) !important;
}

.section-dark .pillar-icon {
    background: rgba(46,163,242,0.12) !important;
}

.section-dark .sec-icon {
    background: rgba(46,163,242,0.1) !important;
}

.section-dark .sec-icon .material-icons-round {
    color: var(--accent-glow) !important;
}

/* Dark comparison table - Aigocy dark-gray 3D */
.section-dark .comp-table {
    background: #1e2330 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.3),
        0px 3px 3px 0px rgba(0,0,0,0.2),
        0px -8px 0px 0px #171c28 inset,
        0px 4px 0px 0px rgba(255,255,255,0.06) inset !important;
}

.section-dark .comp-table thead tr {
    background: linear-gradient(135deg, #141825 0%, #1a1f2e 100%) !important;
}

.section-dark .comp-table tbody tr {
    background: #1e2330 !important;
}

.section-dark .comp-table tbody tr:nth-child(even) {
    background: #222838 !important;
}

.section-dark .comp-table tbody tr:hover {
    background: rgba(46,163,242,0.08) !important;
}

.section-dark .comp-table td {
    color: rgba(226,232,240,0.85) !important;
    border-color: rgba(255,255,255,0.05) !important;
}

.section-dark .comp-table td strong {
    color: #fff !important;
}

/* Dark killer boxes */
.section-dark .killer-box {
    background: #1e2330 !important;
    border-color: rgba(240,165,0,0.25) !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.3),
        0px -8px 0px 0px #171c28 inset,
        0px 4px 0px 0px rgba(255,255,255,0.04) inset !important;
}

.section-dark .killer-content p {
    color: rgba(226,232,240,0.6) !important;
}

.section-dark .killer-content strong {
    color: var(--accent-glow) !important;
}

/* Dark quote box */
.section-dark .quote-box {
    background: #1e2330 !important;
    color: rgba(255,255,255,0.9) !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.3),
        0px -8px 0px 0px #171c28 inset,
        0px 4px 0px 0px rgba(255,255,255,0.04) inset !important;
}

/* Dark timeline - Aigocy dark-gray cards */
.section-dark .tl-card {
    background: #1e2330 !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.3),
        0px 3px 3px 0px rgba(0,0,0,0.2),
        0px -8px 0px 0px #171c28 inset,
        0px 4px 0px 0px rgba(255,255,255,0.06) inset !important;
}

.section-dark .tl-card h3 { color: #fff !important; }
.section-dark .tl-card p { color: rgba(226,232,240,0.6) !important; }
.section-dark .tl-card .tl-week { color: var(--accent-glow) !important; }
.section-dark .tl-task {
    color: rgba(226,232,240,0.85) !important;
    background: rgba(46,163,242,0.08) !important;
    border: 1px solid rgba(46,163,242,0.12) !important;
}
.section-dark .tl-deliverable {
    color: rgba(226,232,240,0.5) !important;
    border-color: rgba(255,255,255,0.06) !important;
}

.section-dark .tl-dot {
    color: #fff !important;
    border-color: var(--accent) !important;
    background: var(--accent) !important;
    box-shadow: 0 0 12px rgba(46,163,242,0.4);
}

.section-dark .tl-item:nth-child(2) .tl-dot { border-color: var(--accent) !important; background: transparent !important; color: var(--accent) !important; }
.section-dark .tl-item:nth-child(3) .tl-dot { border-color: #8b5cf6 !important; background: transparent !important; color: #8b5cf6 !important; }
.section-dark .tl-item:nth-child(4) .tl-dot { border-color: var(--gold) !important; background: transparent !important; color: var(--gold) !important; }
.section-dark .tl-item:nth-child(5) .tl-dot { border-color: #f97316 !important; background: transparent !important; color: #f97316 !important; }
.section-dark .tl-item:nth-child(6) .tl-dot { border-color: var(--success) !important; background: transparent !important; color: var(--success) !important; }

.section-dark .timeline::before {
    opacity: 0.6;
}

/* Data classification title */
.data-class-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 32px 0 16px;
}

/* Dark data classification - text visibility */
.section-dark .data-class-title {
    color: #fff !important;
}

.section-dark .data-col ul li {
    color: rgba(226,232,240,0.85) !important;
}

.section-dark .data-col.yes h4 {
    background: rgba(16,185,129,0.12) !important;
    color: #34d399 !important;
    border-radius: 8px !important;
}

.section-dark .data-col.no h4 {
    background: rgba(239,68,68,0.12) !important;
    color: #f87171 !important;
    border-radius: 8px !important;
}

.section-dark .data-col.yes ul li::before { color: #34d399 !important; }
.section-dark .data-col.no ul li::before { color: #f87171 !important; }

/* ============ PREMIUM EVOLUTION ============ */
.evo-phase.active {
    background: linear-gradient(135deg, #0a0f1a 0%, #141d2f 100%) !important;
    border-color: rgba(46,163,242,0.2) !important;
}

/* ============ PREMIUM FOOTER ============ */
.footer {
    background: #060a12 !important;
    padding: 36px 0 !important;
}

/* ============ PREMIUM QUOTE BOX (3D) ============ */
.quote-box {
    font-family: 'Sora', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    border-left: 4px solid var(--accent) !important;
    border-radius: 0 24px 24px 0 !important;
    background: linear-gradient(135deg, rgba(46,163,242,0.04) 0%, rgba(240,165,0,0.03) 100%) !important;
    padding: 24px 28px !important;
    box-shadow:
        0px 7.77px 2.21px 0px rgba(0,0,0,0.03),
        0px 3px 3px 0px rgba(0,0,0,0.06),
        0px -4px 0px 0px rgba(0,0,0,0.02) inset,
        0px 2px 0px 0px rgba(255,255,255,0.4) inset !important;
}

/* ============ PREMIUM TECH BADGES ============ */
.tech-badge {
    border-radius: 24px !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease !important;
}

.tech-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(46,163,242,0.2);
}

/* ============ PREMIUM SCREENSHOT CARDS (3D) ============ */
.screenshot-card {
    border-radius: 24px !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.04),
        0px 3px 3px 0px rgba(0,0,0,0.06),
        0px -6px 0px 0px rgba(0,0,0,0.03) inset,
        0px 3px 0px 0px rgba(255,255,255,0.4) inset !important;
}

.screenshot-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0px 16px 32px 0px rgba(0,0,0,0.08),
        0px 4px 8px 0px rgba(0,0,0,0.04),
        0px -6px 0px 0px rgba(46,163,242,0.04) inset,
        0px 3px 0px 0px rgba(255,255,255,0.5) inset !important;
}

/* ============ PREMIUM LIGHTBOX ============ */
.dpo-lightbox img {
    border-radius: 16px !important;
    box-shadow: 0 16px 80px rgba(0,0,0,0.5) !important;
}

/* ============ PREMIUM SIMULATOR ============ */
#simulator {
    background: radial-gradient(ellipse at 20% 80%, rgba(46,163,242,0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 20%, rgba(240,165,0,0.04) 0%, transparent 50%),
                linear-gradient(180deg, #0a0f1a 0%, #0d1929 100%) !important;
}

#simulator input, #simulator select {
    border-radius: 10px !important;
    transition: border-color 0.3s ease !important;
}

#simulator input:focus, #simulator select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 16px rgba(46,163,242,0.15);
}

/* ============ SMOOTH SCROLL ============ */
html { scroll-behavior: smooth; }

/* ============ MATERIAL ICONS PREMIUM STYLING ============ */
.pillar-icon .material-icons-round {
    font-size: 32px !important;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-glow) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.killer-icon .material-icons-round {
    font-size: 28px !important;
}

.sec-icon .material-icons-round {
    font-size: 24px !important;
    color: inherit;
}

.portal-icon .material-icons-round {
    font-size: 28px !important;
    background: linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============ PREMIUM MEGA-CARD (Aigocy section-as-card) ============ */
.mega-card {
    background: var(--card-bg);
    border-radius: 32px;
    padding: 48px 40px 40px;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.05),
        0px 3px 3px 0px rgba(0,0,0,0.08),
        0px -8px 0px 0px rgba(0,0,0,0.03) inset,
        0px 4px 0px 0px rgba(255,255,255,0.6) inset;
    position: relative;
    overflow: hidden;
}

.mega-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), #8b5cf6, var(--gold), var(--success));
    border-radius: 32px 32px 0 0;
}

.mega-card-header {
    text-align: center;
    margin-bottom: 32px;
}

.mega-card-header .section-tag {
    background: rgba(46,163,242,0.08) !important;
    color: var(--accent) !important;
    border: 1px solid rgba(46,163,242,0.15) !important;
}

.mega-card-header .sec-title {
    color: var(--text) !important;
}

.mega-card-header .sec-desc {
    color: var(--text-light) !important;
    max-width: 600px;
    margin: 0 auto;
}

/* Cards inside mega-card: lighter, nested style */
.mega-card .pillar-card,
.mega-card .iqp-card,
.mega-card .portal-card {
    background: var(--bg) !important;
    box-shadow:
        0px 2px 4px 0px rgba(0,0,0,0.03),
        0px -3px 0px 0px rgba(0,0,0,0.02) inset,
        0px 2px 0px 0px rgba(255,255,255,0.8) inset !important;
    border: 1px solid rgba(226,232,240,0.6) !important;
    border-radius: 20px !important;
}

.mega-card .pillar-card:hover,
.mega-card .iqp-card:hover,
.mega-card .portal-card:hover {
    background: #fff !important;
    box-shadow:
        0px 8px 20px 0px rgba(46,163,242,0.08),
        0px 2px 4px 0px rgba(0,0,0,0.04),
        0px -3px 0px 0px rgba(46,163,242,0.04) inset,
        0px 2px 0px 0px rgba(255,255,255,0.9) inset !important;
    border-color: rgba(46,163,242,0.15) !important;
}

.mega-card .iqp-card {
    border-radius: 16px !important;
}

/* Tech badges inside mega-card */
.mega-card .tech-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ============ PREMIUM INNOVATION DUO CARDS ============ */
.inno-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

/* White card */
.inno-card.inno-light {
    background: #fff;
    border-radius: 28px;
    padding: 36px 32px 28px;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.05),
        0px 3px 3px 0px rgba(0,0,0,0.08),
        0px -8px 0px 0px rgba(0,0,0,0.03) inset,
        0px 4px 0px 0px rgba(255,255,255,0.7) inset;
    border: 1px solid rgba(226,232,240,0.6);
}

/* Dark card */
.inno-card.inno-dark {
    background: #18181b;
    border-radius: 28px;
    padding: 36px 32px 28px;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.3),
        0px 3px 3px 0px rgba(0,0,0,0.2),
        0px -8px 0px 0px #111114 inset,
        0px 4px 0px 0px rgba(255,255,255,0.06) inset;
    border: 1px solid rgba(255,255,255,0.06);
}

.inno-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(226,232,240,0.3);
}

.inno-dark .inno-card-header {
    border-bottom-color: rgba(255,255,255,0.06);
}

.inno-label {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.inno-dark .inno-label {
    color: rgba(226,232,240,0.9);
}

/* Feature rows */
.inno-feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.inno-feat-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inno-feat-icon.light {
    background: rgba(46,163,242,0.08);
}

.inno-feat-icon.light .material-icons-round {
    font-size: 20px;
    color: var(--accent);
}

.inno-feat-icon.dark {
    background: linear-gradient(180deg, #2a2a2e 0%, #1e1e22 100%);
    box-shadow:
        0px -1px 0px 0px rgba(255,255,255,0.08) inset,
        0px 1px 0px 0px rgba(0,0,0,0.3) inset;
}

.inno-feat-icon.dark .material-icons-round {
    font-size: 20px;
    color: var(--accent-glow);
}

.inno-feature h4 {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.inno-light .inno-feature h4 { color: var(--text); }
.inno-dark .inno-feature h4 { color: #fff; }

.inno-feature p {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.inno-light .inno-feature p { color: var(--text-light); }
.inno-dark .inno-feature p { color: rgba(226,232,240,0.55); }

.inno-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(226,232,240,0) 0%, rgba(226,232,240,0.4) 50%, rgba(226,232,240,0) 100%);
    margin: 4px 0 16px;
}

.inno-divider.dark {
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%);
}

.inno-footer-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-align: center;
}

.inno-light .inno-footer-text { color: var(--text-light); }
.inno-dark .inno-footer-text { color: rgba(226,232,240,0.4); }

/* ============ PREMIUM SCROLL REVEAL ============ */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.pillars-grid .reveal-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.pillars-grid .reveal-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.pillars-grid .reveal-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.pillars-grid .reveal-on-scroll:nth-child(5) { transition-delay: 0.32s; }
.pillars-grid .reveal-on-scroll:nth-child(6) { transition-delay: 0.40s; }
.pillars-grid .reveal-on-scroll:nth-child(7) { transition-delay: 0.48s; }

.portal-grid .reveal-on-scroll:nth-child(2) { transition-delay: 0.06s; }
.portal-grid .reveal-on-scroll:nth-child(3) { transition-delay: 0.12s; }
.portal-grid .reveal-on-scroll:nth-child(4) { transition-delay: 0.18s; }
.portal-grid .reveal-on-scroll:nth-child(5) { transition-delay: 0.24s; }
.portal-grid .reveal-on-scroll:nth-child(6) { transition-delay: 0.30s; }
.portal-grid .reveal-on-scroll:nth-child(7) { transition-delay: 0.36s; }
.portal-grid .reveal-on-scroll:nth-child(8) { transition-delay: 0.42s; }
.portal-grid .reveal-on-scroll:nth-child(9) { transition-delay: 0.48s; }

.security-grid .reveal-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.security-grid .reveal-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.security-grid .reveal-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.security-grid .reveal-on-scroll:nth-child(5) { transition-delay: 0.32s; }
.security-grid .reveal-on-scroll:nth-child(6) { transition-delay: 0.40s; }
.security-grid .reveal-on-scroll:nth-child(7) { transition-delay: 0.48s; }

/* ============ PREMIUM REGION CARDS (3D) ============ */
.region-card {
    border-radius: 24px !important;
    box-shadow:
        0px 7.77px 2.21px 0px rgba(0,0,0,0.03),
        0px 3px 3px 0px rgba(0,0,0,0.06),
        0px -4px 0px 0px rgba(0,0,0,0.02) inset,
        0px 2px 0px 0px rgba(255,255,255,0.4) inset !important;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.region-card:hover {
    transform: translateY(-4px) !important;
}

.region-emoji .material-icons-round {
    font-size: 36px !important;
    color: var(--accent);
}

/* ============ PREMIUM PILLAR ICON CONTAINER ============ */
.pillar-icon {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(46,163,242,0.08) 0%, rgba(46,163,242,0.03) 100%) !important;
}

.portal-icon {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, rgba(46,163,242,0.06) 0%, rgba(139,92,246,0.04) 100%) !important;
}

/* ============ PREMIUM GLOW ACCENTS ============ */
.hero-stat .num {
    position: relative;
}

.hero-stat.killer-stat .num .material-icons-round {
    color: var(--gold) !important;
    -webkit-text-fill-color: var(--gold) !important;
    filter: drop-shadow(0 0 8px rgba(240,165,0,0.4));
}

/* ============ PREMIUM SECTION DIVIDERS ============ */
.section + .section {
    border-top: 1px solid rgba(226,232,240,0.5);
}

.section-dark + .section {
    border-top: none !important;
}

.section + .section-dark {
    border-top: none !important;
}

/* Override base even/odd backgrounds for dark sections */
.section-dark:nth-child(even),
.section-dark:nth-child(odd) {
    background: linear-gradient(180deg, #0a0f1a 0%, #0d1929 60%, #111b2e 100%) !important;
}

/* ============ PREMIUM NAV ACTIVE STATE ============ */
.nav a.active {
    color: var(--accent) !important;
    position: relative;
}

.nav a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}

/* ============ PREMIUM HERO GLOW ORB ============ */
.hero::after {
    content: '' !important;
    position: absolute !important;
    top: -200px !important;
    right: -200px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.hero-inner { position: relative; z-index: 1; }

/* ============ PREMIUM GOLD ACCENT ============ */
.hero h1 .gold {
    color: var(--gold) !important;
    text-shadow: 0 0 20px rgba(240,165,0,0.2);
}

/* ============ PREMIUM PARTNER GLOW ============ */
.partner-badge {
    transition: all 0.3s ease !important;
}

.partner-badge:hover {
    border-color: rgba(46,163,242,0.2) !important;
    box-shadow: 0 0 20px rgba(46,163,242,0.1) !important;
}

/* ============ PREMIUM TABLE ENHANCEMENTS ============ */
.comp-table th {
    font-family: 'Sora', sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
}

.comp-table .check {
    color: var(--success) !important;
    font-weight: 700 !important;
}

.comp-table .cross {
    color: var(--danger) !important;
    opacity: 0.6;
}

/* ============ PREMIUM CTA GLOW ============ */
.cta-section h2 {
    font-family: 'Sora', sans-serif !important;
    font-size: 36px !important;
    font-weight: 800 !important;
}

/* ============ ALL-IN-ONE CONNECTED FEATURES ============ */
.allinone-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.aio-tl { grid-column: 1; grid-row: 1; }
.aio-tr { grid-column: 3; grid-row: 1; }
.aio-ml { grid-column: 1; grid-row: 2; }
.aio-center { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; }
.aio-mr { grid-column: 3; grid-row: 2; }
.aio-bl { grid-column: 1; grid-row: 3; }
.aio-br { grid-column: 3; grid-row: 3; }

.aio-card {
    background: #1e2330;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 24px;
    padding: 28px 24px;
    box-shadow:
        0px 7.77px 16px 0px rgba(0,0,0,0.3),
        0px 3px 3px 0px rgba(0,0,0,0.2),
        0px -8px 0px 0px #171c28 inset,
        0px 4px 0px 0px rgba(255,255,255,0.06) inset;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.aio-card:hover {
    background: #242a38;
    border-color: rgba(46,163,242,0.15);
    transform: translateY(-4px);
    box-shadow:
        0px 16px 32px 0px rgba(0,0,0,0.35),
        0px 4px 8px 0px rgba(0,0,0,0.2),
        0px -8px 0px 0px rgba(46,163,242,0.08) inset,
        0px 4px 0px 0px rgba(255,255,255,0.08) inset;
}

.aio-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(180deg, #2a3040 0%, #1a1f2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow:
        0px -2px 0px 0px rgba(255,255,255,0.08) inset,
        0px 2px 0px 0px rgba(0,0,0,0.4) inset,
        0px 4px 12px rgba(0,0,0,0.4);
}

.aio-icon .material-icons-round {
    font-size: 22px;
    color: var(--accent-glow);
}

.aio-card h4 {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff !important;
    margin-bottom: 8px;
}

.aio-card p {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(226,232,240,0.65) !important;
    margin: 0;
}

/* Center DPO logo */
.aio-logo-ring {
    width: 120px;
    height: 120px;
    border-radius: 28px;
    background: linear-gradient(135deg, var(--accent) 0%, #0066cc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0px -4px 0px 0px rgba(0,0,0,0.15) inset,
        0px 4px 0px 0px rgba(255,255,255,0.2) inset,
        0px 8px 32px rgba(46,163,242,0.4),
        0px 0px 60px rgba(46,163,242,0.15);
    position: relative;
    z-index: 3;
    animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% { box-shadow: 0px -4px 0px 0px rgba(0,0,0,0.15) inset, 0px 4px 0px 0px rgba(255,255,255,0.2) inset, 0px 8px 32px rgba(46,163,242,0.4), 0px 0px 60px rgba(46,163,242,0.15); }
    50% { box-shadow: 0px -4px 0px 0px rgba(0,0,0,0.15) inset, 0px 4px 0px 0px rgba(255,255,255,0.2) inset, 0px 12px 48px rgba(46,163,242,0.5), 0px 0px 80px rgba(46,163,242,0.25); }
}

.aio-logo-text {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1px;
}

/* SVG connection lines */
.aio-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.aio-line {
    stroke: rgba(46,163,242,0.15);
    stroke-width: 2;
    stroke-dasharray: 8 4;
    animation: dashFlow 2s linear infinite;
}

@keyframes dashFlow {
    to { stroke-dashoffset: -24; }
}

#allinone > .container {
    position: relative;
}

/* ============ PREMIUM HOW-TO TAB ============ */
.side-tab.tab-howto {
    background: linear-gradient(180deg, #10b981, #059669) !important;
}

/* ============ PREMIUM HOW-TO TIMELINE ============ */
.howto-timeline {
    position: relative;
}

.howto-step {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 36px;
}

.howto-step.last {
    padding-bottom: 0;
}

.howto-number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent) 0%, #0066cc 100%);
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0px -2px 0px 0px rgba(0,0,0,0.15) inset,
        0px 2px 0px 0px rgba(255,255,255,0.3) inset,
        0px 4px 16px rgba(46,163,242,0.3);
    position: relative;
    z-index: 2;
}

.howto-connector {
    position: absolute;
    left: 23px;
    top: 48px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), rgba(46,163,242,0.15));
    z-index: 1;
}

.howto-step.last .howto-connector { display: none; }

.howto-content {
    flex: 1;
    padding-top: 4px;
}

.howto-content h4 {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.howto-content p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-light);
    margin-bottom: 10px;
}

.howto-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(46,163,242,0.08);
    margin-bottom: 10px;
}

.howto-icon .material-icons-round {
    font-size: 20px;
    color: var(--accent);
}

.howto-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(46,163,242,0.08);
    color: var(--accent);
    border: 1px solid rgba(46,163,242,0.15);
}

.howto-badge.gold {
    background: rgba(240,165,0,0.08);
    color: var(--gold);
    border-color: rgba(240,165,0,0.2);
}

/* ============ MOBILE NAV HAMBURGER ============ */
.nav-burger {
    display: none !important;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    z-index: 10;
}

.nav-burger .material-icons-round {
    font-size: 28px;
}

/* Ensure nav-inner visible on desktop */
#nav-inner {
    display: flex !important;
}

/* ============ MOBILE FAB (Side Panel Access) ============ */
.mobile-fab {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 250;
}

.fab-toggle {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(135deg, var(--accent) 0%, #0066cc 100%);
    color: #fff;
    cursor: pointer;
    box-shadow:
        0px -3px 0px 0px rgba(0,0,0,0.15) inset,
        0px 2px 0px 0px rgba(255,255,255,0.3) inset,
        0px 8px 24px rgba(46,163,242,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.fab-toggle:active { transform: scale(0.92); }

.fab-toggle .material-icons-round { font-size: 26px; }

.fab-menu {
    position: absolute;
    bottom: 64px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.9);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.fab-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.fab-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: none;
    border-radius: 12px;
    background: #1e2330;
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow:
        0px 4px 16px rgba(0,0,0,0.3),
        0px -4px 0px 0px #171c28 inset,
        0px 2px 0px 0px rgba(255,255,255,0.06) inset;
    transition: all 0.2s ease;
}

.fab-menu button:active {
    transform: scale(0.95);
}

.fab-menu button .material-icons-round {
    font-size: 20px;
    color: var(--fab-color, var(--accent));
}

/* ============ PREMIUM RESPONSIVE ============ */

/* === Tablet (max 1024px) === */
@media (max-width: 1024px) {
    body { padding-right: 0 !important; }
    .hero, .nav, .cta-section, .footer, #simulator, .section-dark,
    #innovation, .section:has(.killer-box) {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
    .side-tabs { display: none !important; }
    .mobile-fab { display: block !important; }
    .hero-mockup { display: none !important; }
    .hero h1 { max-width: none !important; }
    .hero-sub { max-width: none !important; }
}

/* === Mobile (max 768px) === */
@media (max-width: 768px) {
    /* Typography */
    .hero h1 { font-size: 28px !important; letter-spacing: -0.5px !important; }
    .hero-sub { font-size: 15px !important; line-height: 1.5 !important; }
    .hero-inner { padding: 40px 0 32px !important; }
    h2.sec-title { font-size: 24px !important; }
    .section { padding: 40px 0 !important; }
    .section-tag { font-size: 10px !important; padding: 4px 12px !important; }

    /* Hero stats */
    .hero-stats { gap: 12px !important; justify-content: center !important; }
    .hero-stat .num { font-size: 24px !important; }
    .hero-stat .label { font-size: 9px !important; letter-spacing: 1px !important; }

    /* === HAMBURGER NAV === */
    .nav-burger { display: block !important; }

    .nav .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .nav #nav-inner {
        display: none !important;
        width: 100%;
        flex-direction: column;
        padding: 8px 0 4px;
        order: 2;
    }

    .nav #nav-inner.open {
        display: flex !important;
    }

    .nav a {
        font-size: 12px !important;
        padding: 10px 16px !important;
        letter-spacing: 0.8px !important;
        border-bottom: none !important;
        border-left: 3px solid transparent !important;
    }

    .nav a:hover, .nav a.active {
        border-left-color: var(--accent) !important;
        background: rgba(46,163,242,0.08) !important;
    }

    /* Mega-cards */
    .mega-card {
        padding: 24px 16px 20px !important;
        border-radius: 20px !important;
    }
    .mega-card::before { border-radius: 20px 20px 0 0 !important; }
    .mega-card-header .sec-desc { font-size: 13px !important; }

    /* All cards */
    .pillar-card, .sec-card, .portal-card, .killer-box, .quote-box,
    .screenshot-card, .region-card, .comp-table, .iqp-card, .aio-card,
    .inno-card, .tl-card {
        border-radius: 16px !important;
    }

    /* Icons */
    .pillar-icon, .portal-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }
    .pillar-icon .material-icons-round { font-size: 22px !important; }
    .portal-icon .material-icons-round { font-size: 20px !important; }

    /* Grids → single column */
    .pillars-grid,
    .portal-grid,
    .security-grid,
    .iqp-features {
        grid-template-columns: 1fr !important;
    }

    /* Timeline two-track → stack */
    #timeline div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Innovation duo → stack */
    .inno-duo { grid-template-columns: 1fr !important; }
    .inno-card { padding: 24px 18px 18px !important; border-radius: 20px !important; }

    /* All-in-One → stack */
    .allinone-grid { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
    .aio-tl, .aio-tr, .aio-ml, .aio-mr, .aio-bl, .aio-br { grid-column: 1 !important; grid-row: auto !important; }
    .aio-center { grid-row: auto !important; margin: 12px 0 !important; }
    .aio-lines { display: none !important; }
    .aio-logo-ring { width: 72px !important; height: 72px !important; border-radius: 18px !important; }
    .aio-logo-text { font-size: 22px !important; }
    .aio-card { padding: 20px 16px !important; }

    /* Killer boxes */
    .killer-box { padding: 20px 16px !important; }
    .killer-content h3 { font-size: 16px !important; }

    /* Quote box */
    .quote-box { font-size: 15px !important; padding: 18px 20px !important; }

    /* CTA */
    .cta-section { padding: 48px 0 !important; }
    .cta-section h2 { font-size: 24px !important; }
    .cta-btn { padding: 14px 28px !important; font-size: 14px !important; }

    /* Comparison table scroll */
    .comp-table { display: block !important; overflow-x: auto !important; }
    .comp-table table { min-width: 600px; }

    /* Score demo */
    .score-demo { border-radius: 16px !important; }

    /* Footer */
    .footer { padding: 24px 0 !important; }
    .footer-logos { flex-direction: column !important; gap: 8px !important; }

    /* Hero partners */
    .hero-partners { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
    .partner-sep { display: none !important; }

    /* Region grid */
    .region-grid { grid-template-columns: 1fr !important; }

    /* Data classification */
    .data-cols { grid-template-columns: 1fr !important; }

    /* Deliverables */
    .del-grid { grid-template-columns: 1fr !important; }

    /* Evolution track */
    .evo-track { flex-direction: column !important; }
    .evo-phase { border-radius: 12px !important; }

    /* Slide panels full width */
    .slide-panel { width: 100% !important; }

    /* Container padding */
    .container { padding: 0 16px !important; }
}

/* === Small phones (max 480px) === */
@media (max-width: 480px) {
    .hero h1 { font-size: 24px !important; }
    h2.sec-title { font-size: 20px !important; }
    .hero-stat .num { font-size: 20px !important; }
    .nav a { font-size: 9px !important; padding: 10px 6px !important; }
    .mega-card { padding: 20px 14px 16px !important; }
    .inno-feature { flex-direction: column !important; gap: 8px !important; }
}