/* Social */
        .social-section {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 15% 30%, rgba(76,141,255,.22), transparent 28%),
                radial-gradient(circle at 88% 70%, rgba(139,92,246,.18), transparent 28%),
                var(--ink-950);
            color: white;
        }
        .social-section::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .15;
            background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
            background-size: 64px 64px;
        }
        .social-section .container { position: relative; z-index: 1; }
        .social-section .section-kicker { color: #7db0ff; }
        .social-section .section-heading { color: white; }
        .social-section .section-copy { color: rgba(255,255,255,.62); }
        .social-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 13px;
            margin-top: 38px;
        }
        .social-card {
            display: flex;
            min-height: 192px;
            flex-direction: column;
            padding: 18px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 18px;
            background: rgba(255,255,255,.055);
            color: white;
            text-decoration: none;
            backdrop-filter: blur(12px);
            transition: transform var(--ease), background var(--ease), border-color var(--ease);
        }
        .social-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.27); background: rgba(255,255,255,.09); }
        .social-icon {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            border-radius: 13px;
            background: rgba(255,255,255,.11);
            font-size: 1.15rem;
        }
        .social-card strong { margin-top: 26px; font-size: 1rem; }
        .social-card span { margin-top: 5px; color: rgba(255,255,255,.56); font-size: .82rem; }
        .social-card .external-arrow { margin-top: auto; color: rgba(255,255,255,.75); }

        /* Footer + Modal */
        .site-footer { padding: 34px 0; background: #040710; color: rgba(255,255,255,.48); }
        .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
        .footer-brand { display: flex; align-items: center; gap: 10px; color: white; font-weight: 880; }
        .footer-brand img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
        .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
        .footer-links a { color: rgba(255,255,255,.58); text-decoration: none; font-size: .86rem; }
        .footer-links a:hover { color: white; }
        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 4000;
            display: none;
            flex-direction: column;
            background: #fff;
            opacity: 0;
            transition: opacity var(--ease);
        }
        .modal-overlay.show { opacity: 1; }
        .modal-toolbar {
            display: flex;
            align-items: center;
            gap: 12px;
            min-height: 58px;
            padding: max(8px, env(safe-area-inset-top)) 12px 8px;
            border-bottom: 1px solid var(--line);
            background: white;
        }
        .modal-home {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 42px;
            padding: 7px 12px;
            border: 1px solid var(--line);
            border-radius: 11px;
            background: white;
            color: var(--text-strong);
            cursor: pointer;
            font-weight: 820;
        }
        .modal-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: .9rem; }
        .modal-content-frame { width: 100%; flex: 1; border: 0; background: white; }

        @media (max-width: 1040px) {
            .header-shell { grid-template-columns: auto 1fr; }
            .primary-nav { grid-column: 1 / -1; grid-row: 2; }
            .primary-nav ul { justify-content: flex-start; }
            .hero-inner { grid-template-columns: 1fr; padding-top: 176px; }
            .hero-copy { max-width: 820px; }
            .hero-visual { min-height: 440px; }
            .social-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
        @media (max-width: 820px) {
            .container { width: min(calc(100% - 28px), var(--content)); }
            .section { padding: 68px 0; }
            .hero { min-height: auto; }
            .hero-inner { min-height: auto; padding-bottom: 118px; }
            .hero-title { font-size: clamp(2.8rem, 12vw, 4.9rem); }
            .stats-shell { grid-template-columns: repeat(2, 1fr); }
            .stat:nth-child(2) { border-right: 0; }
            .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
            .subject-card, .subject-card:nth-child(1), .subject-card:nth-child(4) { grid-column: span 6; }
            .featured-grid, .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 620px) {
            .site-header { padding-top: max(8px, env(safe-area-inset-top)); }
            .header-shell { gap: 8px; padding: 6px 7px; border-radius: 15px; }
            .logo-img { width: 34px; height: 34px; }
            .site-title { font-size: .88rem; }
            .home-button span { display: none; }
            .home-button { width: 40px; padding: 6px; }
            .language-switcher button { min-width: 32px; padding: 3px 6px; font-size: .7rem; }
            .hero-inner { padding-top: 160px; gap: 38px; }
            .hero-description { font-size: 1rem; }
            .hero-actions .button { width: 100%; }
            .search-shell { padding-left: 13px; }
            .hero-visual { min-height: 370px; border-radius: 24px; }
            .visual-caption { left: 13px; right: 13px; bottom: 13px; padding: 13px; }
            .visual-equation { display: none; }
            .stats-strip { margin-top: -74px; }
            .stat { padding: 18px; }
            .section-heading-row { align-items: flex-start; flex-direction: column; margin-bottom: 26px; }
            .subject-card, .subject-card:nth-child(1), .subject-card:nth-child(4) { grid-column: 1 / -1; min-height: 210px; }
            .featured-grid, .catalog-grid { grid-template-columns: 1fr; }
            .catalog-toolbar { grid-template-columns: 1fr; }
            .catalog-count { justify-self: start; }
            .social-grid { grid-template-columns: 1fr 1fr; }
            .social-card { min-height: 168px; }
            .footer-inner { align-items: flex-start; flex-direction: column; }
            .footer-links { justify-content: flex-start; }
        }
        @media (max-width: 390px) {
            .site-title { display: none; }
            .social-grid { grid-template-columns: 1fr; }
        }
        @media (prefers-reduced-motion: reduce) {
            html { scroll-behavior: auto; }
            *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
            }
        }

        /* Hero headline line integrity */
        .hero-title {
            font-size: clamp(3rem, 5.2vw, 5.2rem);
            white-space: nowrap;
        }
        html[lang="en"] .hero-title {
            font-size: clamp(2.65rem, 4.3vw, 4.65rem);
            white-space: normal;
        }
        .hero-title .lang-secondary { white-space: normal; }

        @media (max-width: 820px) {
            .hero-title { font-size: clamp(2.35rem, 10.5vw, 4.2rem); }
            html[lang="en"] .hero-title { font-size: clamp(2.15rem, 9vw, 3.4rem); }
        }

        /* The lesson page's own sticky header provides Home navigation. */
        .modal-toolbar { display: none; }
        .modal-content-frame { min-height: 100%; }