:root {   --brand-primary: #FF7514; --brand-primary-rgb: 255, 117, 20; --brand-primary-hover: #e5630a; --brand-primary-active: #cc5405; --brand-primary-light: #ff8c3a; --brand-primary-lighter: #ffa463; --brand-primary-subtle: #fff7f2; --brand-primary-border: rgba(var(--brand-primary-rgb), 0.22); --brand-primary-glow: rgba(var(--brand-primary-rgb), 0.32);   --brand-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-light) 100%); --brand-gradient-hover: linear-gradient(135deg, var(--brand-primary-hover) 0%, var(--brand-primary) 100%); --brand-gradient-soft: linear-gradient(135deg, rgba(var(--brand-primary-rgb), 0.1) 0%, rgba(var(--brand-primary-rgb), 0.02) 100%);   --brand-secondary: #2563EB; --brand-secondary-rgb: 37, 99, 235; --brand-secondary-hover: #1d4ed8; --brand-secondary-active: #1e40af; --brand-secondary-light: #60a5fa; --brand-secondary-lighter: #93c5fd; --brand-secondary-subtle: #eff6ff; --brand-secondary-border: rgba(var(--brand-secondary-rgb), 0.22); --brand-secondary-glow: rgba(var(--brand-secondary-rgb), 0.28); --brand-secondary-gradient: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-secondary-light) 100%);   --brand-tertiary: #10B981; --brand-tertiary-rgb: 16, 185, 129; --brand-tertiary-hover: #059669; --brand-tertiary-active: #047857; --brand-tertiary-light: #34d399; --brand-tertiary-lighter: #6ee7b7; --brand-tertiary-subtle: #ecfdf5; --brand-tertiary-border: rgba(var(--brand-tertiary-rgb), 0.22); --brand-tertiary-glow: rgba(var(--brand-tertiary-rgb), 0.25); --brand-tertiary-gradient: linear-gradient(135deg, var(--brand-tertiary) 0%, var(--brand-tertiary-light) 100%);     --btn-primary-bg: var(--brand-primary); --btn-primary-text: #ffffff; --btn-primary-hover-bg: var(--brand-primary-hover); --btn-primary-hover-text: #ffffff; --btn-primary-border: transparent; --btn-primary-shadow: 0 4px 14px var(--brand-primary-glow); --btn-primary-hover-shadow: 0 6px 20px var(--brand-primary-glow);   --btn-secondary-bg: var(--brand-secondary); --btn-secondary-text: #ffffff; --btn-secondary-hover-bg: var(--brand-secondary-hover); --btn-secondary-hover-text: #ffffff; --btn-secondary-border: transparent; --btn-secondary-shadow: 0 4px 14px var(--brand-secondary-glow); --btn-secondary-hover-shadow: 0 6px 20px var(--brand-secondary-glow);   --btn-tertiary-bg: var(--brand-tertiary); --btn-tertiary-text: #ffffff; --btn-tertiary-hover-bg: var(--brand-tertiary-hover); --btn-tertiary-hover-text: #ffffff; --btn-tertiary-border: transparent; --btn-tertiary-shadow: 0 4px 14px var(--brand-tertiary-glow); --btn-tertiary-hover-shadow: 0 6px 20px var(--brand-tertiary-glow);   --btn-dark-bg: var(--bg-dark); --btn-dark-text: #ffffff; --btn-dark-hover-bg: #1e293b; --btn-dark-hover-text: #ffffff; --btn-dark-border: rgba(255, 255, 255, 0.12);   --btn-light-bg: #ffffff; --btn-light-text: var(--text-light-bg-heading); --btn-light-hover-bg: var(--bg-light-muted); --btn-light-hover-text: var(--brand-primary); --btn-light-border: var(--bg-light-border); --btn-light-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);   --btn-outline-border: var(--brand-primary); --btn-outline-text: var(--brand-primary); --btn-outline-hover-bg: var(--brand-primary-subtle); --btn-outline-hover-text: var(--brand-primary);   --bg-dark: #090a0f; --bg-dark-surface: #10121a; --bg-dark-surface-elevated: #151822; --bg-dark-card: #151822; --bg-dark-border: rgba(255, 255, 255, 0.08); --bg-dark-border-subtle: rgba(255, 255, 255, 0.05); --bg-dark-glow: var(--brand-primary-glow);   --text-dark-bg-heading: #ffffff; --text-dark-bg-body: #e2e8f0; --text-dark-bg-muted: #94a3b8; --text-dark-bg-subtle: #64748b;   --bg-light: #f8fafc; --bg-light-surface: #ffffff; --bg-light-card: #ffffff; --bg-light-muted: #f1f5f9; --bg-light-hover: #e2e8f0; --bg-light-border: #e2e8f0; --bg-light-border-subtle: #f1f5f9;   --text-light-bg-heading: #0f172a; --text-light-bg-body: #334155; --text-light-bg-muted: #64748b; --text-light-bg-subtle: #94a3b8;   --color-success: var(--brand-tertiary); --color-success-bg: var(--brand-tertiary-subtle); --color-warning: #f59e0b; --color-warning-bg: #fffbeb; --color-danger: #ef4444; --color-danger-bg: #fef2f2;   --color-dark-bg: var(--bg-dark); --color-dark-surface: var(--bg-dark-surface); --color-dark-card: var(--bg-dark-card); --color-dark-border: var(--bg-dark-border); --color-primary-dark: var(--bg-dark); --color-surface-dark: var(--bg-dark-surface); --color-surface-darker: var(--bg-dark); --color-heading-dark: var(--text-light-bg-heading); --color-text-on-dark: var(--text-dark-bg-body); --color-text-on-dark-muted: var(--text-dark-bg-muted); --color-text-main: var(--text-light-bg-heading); --color-text-primary: var(--text-light-bg-heading); --color-text-body: var(--text-light-bg-body); --color-text-secondary: var(--text-light-bg-muted); --color-text-muted: var(--text-light-bg-muted); --color-text-subtle: var(--text-light-bg-subtle); --color-text-light: var(--text-light-bg-subtle); --color-text-white: #ffffff; --color-white: #ffffff; --color-body-bg: var(--bg-light); --color-light-bg: var(--bg-light); --color-surface-white: var(--bg-light-surface); --color-surface-muted: var(--bg-light-muted); --color-surface-hover: var(--bg-light-hover); --color-border-light: var(--bg-light-border); --color-border: var(--bg-dark-border); --color-accent-blue: var(--brand-primary); --color-accent-blue-hover: var(--brand-primary-hover); --color-accent-blue-light: var(--brand-primary-light); --color-accent-blue-subtle: var(--brand-primary-subtle); --color-accent-blue-border: var(--brand-primary-border); --color-accent-purple: var(--brand-secondary); --color-accent-gradient: var(--brand-gradient); --color-glow-blue: var(--brand-primary-glow); --color-glow-purple: var(--brand-secondary-glow); --brand-purple: var(--brand-secondary); --brand-purple-light: var(--brand-secondary-light); --brand-purple-subtle: var(--brand-secondary-subtle);   --font-heading: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.09), 0 8px 10px -6px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.16); --shadow-mega-menu: 0 24px 60px -12px rgba(15, 23, 42, 0.14), 0 0 1px 1px rgba(15, 23, 42, 0.05); --shadow-glow: 0 0 25px var(--brand-primary-glow); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 9999px; --header-height: 74px; --container-max: 1260px; --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1); --transition-base: 0.28s cubic-bezier(0.16, 1, 0.3, 1); --z-header: 1000; --z-megamenu: 1050; --z-modal: 1200; }   *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: clip; width: 100%; max-width: 100vw; } body { margin: 0; font-family: var(--font-body); color: var(--color-text-body); background-color: var(--color-body-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; width: 100%; max-width: 100vw; position: relative; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; } .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.5rem; }   .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; padding: 0.75rem 1.6rem; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; transition: all var(--transition-fast); white-space: nowrap; border: none; line-height: 1.25; } .btn-primary, .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text) !important; border: 1px solid var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); } .btn-primary:hover, .btn--primary:hover { background: var(--btn-primary-hover-bg); color: var(--btn-primary-hover-text) !important; box-shadow: var(--btn-primary-hover-shadow); transform: translateY(-2px); } .btn-secondary, .btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text) !important; border: 1px solid var(--btn-secondary-border); box-shadow: var(--btn-secondary-shadow); } .btn-secondary:hover, .btn--secondary:hover { background: var(--btn-secondary-hover-bg); color: var(--btn-secondary-hover-text) !important; box-shadow: var(--btn-secondary-hover-shadow); transform: translateY(-2px); } .btn-tertiary, .btn--tertiary { background: var(--btn-tertiary-bg); color: var(--btn-tertiary-text) !important; box-shadow: var(--btn-tertiary-shadow); } .btn-tertiary:hover, .btn--tertiary:hover { background: var(--btn-tertiary-hover-bg); color: var(--btn-tertiary-hover-text) !important; box-shadow: var(--btn-tertiary-hover-shadow); transform: translateY(-2px); } .btn-dark, .btn--dark { background: var(--btn-dark-bg); color: var(--btn-dark-text) !important; border: 1px solid var(--btn-dark-border); } .btn-dark:hover, .btn--dark:hover { background: var(--btn-dark-hover-bg); color: var(--btn-dark-hover-text) !important; transform: translateY(-2px); } .btn-light, .btn--light { background: var(--btn-light-bg); color: var(--btn-light-text) !important; border: 1px solid var(--btn-light-border); box-shadow: var(--btn-light-shadow); } .btn-light:hover, .btn--light:hover { background: var(--btn-light-hover-bg); color: var(--btn-light-hover-text) !important; transform: translateY(-2px); } .btn-outline, .btn--outline { background: transparent; color: var(--btn-outline-text) !important; border: 1.5px solid var(--btn-outline-border); } .btn-outline:hover, .btn--outline:hover { background: var(--btn-outline-hover-bg); color: var(--btn-outline-hover-text) !important; transform: translateY(-2px); } .btn-gradient, .btn--gradient { background: var(--brand-gradient); color: #ffffff !important; box-shadow: var(--btn-primary-shadow); } .btn-gradient:hover, .btn--gradient:hover { background: var(--brand-gradient-hover); box-shadow: var(--btn-primary-hover-shadow); transform: translateY(-2px); } .btn--lg { padding: 0.95rem 2.2rem; font-size: 1.05rem; } .btn--sm { padding: 0.45rem 1rem; font-size: 0.82rem; } .btn__arrow { transition: transform var(--transition-fast); } .btn:hover .btn__arrow { transform: translateX(4px); }   .bg-dark { background-color: var(--bg-dark) !important; color: var(--text-dark-bg-body) !important; } .bg-dark-surface { background-color: var(--bg-dark-surface) !important; } .bg-light { background-color: var(--bg-light) !important; color: var(--text-light-bg-body) !important; } .bg-light-surface { background-color: var(--bg-light-surface) !important; } .text-dark-heading { color: var(--text-dark-bg-heading) !important; } .text-dark-body { color: var(--text-dark-bg-body) !important; } .text-dark-muted { color: var(--text-dark-bg-muted) !important; } .text-light-heading { color: var(--text-light-bg-heading) !important; } .text-light-body { color: var(--text-light-bg-body) !important; } .text-light-muted { color: var(--text-light-bg-muted) !important; }   .section-header { text-align: center; max-width: 740px; margin: 0 auto 3rem auto; } .section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; background: var(--brand-primary-subtle); color: var(--brand-primary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pill); margin-bottom: 1rem; } .section-title { font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; color: var(--color-text-main); line-height: 1.18; margin: 0 0 1rem 0; letter-spacing: -0.025em; } .section-title em { font-style: normal; color: var(--brand-primary); background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-subtitle { font-size: 1.05rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }       .reveal-enabled [data-reveal] { opacity: 0; transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out); will-change: opacity, transform; } .reveal-enabled [data-reveal="up"] { transform: translateY(40px); } .reveal-enabled [data-reveal="down"] { transform: translateY(-40px); } .reveal-enabled [data-reveal="left"] { transform: translateX(-40px); } .reveal-enabled [data-reveal="right"] { transform: translateX(40px); } .reveal-enabled [data-reveal="scale"] { transform: scale(0.9); } .reveal-enabled [data-reveal="fade"] { transform: none; } .reveal-enabled [data-reveal].revealed { opacity: 1; transform: translateY(0) translateX(0) scale(1); }   [data-reveal-delay="1"] { transition-delay: 100ms; } [data-reveal-delay="2"] { transition-delay: 200ms; } [data-reveal-delay="3"] { transition-delay: 300ms; } [data-reveal-delay="4"] { transition-delay: 400ms; } [data-reveal-delay="5"] { transition-delay: 500ms; } [data-reveal-delay="6"] { transition-delay: 600ms; } [data-reveal-delay="7"] { transition-delay: 700ms; } [data-reveal-delay="8"] { transition-delay: 800ms; }   @keyframes wordFadeInUp { 0% { opacity: 0; transform: translateY(100%); } 15%, 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-100%); } }   @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(-12px) rotate(2deg); } 50% { transform: translateY(-6px) rotate(-1deg); } 75% { transform: translateY(-18px) rotate(1deg); } } @keyframes floatReverse { 0%, 100% { transform: translateY(0px) rotate(0deg); } 25% { transform: translateY(12px) rotate(-2deg); } 50% { transform: translateY(6px) rotate(1deg); } 75% { transform: translateY(18px) rotate(-1deg); } }   @keyframes pulseGlow { 0%, 100% { box-shadow: 0 4px 20px var(--color-glow-blue); } 50% { box-shadow: 0 4px 40px var(--color-glow-blue), 0 0 80px var(--color-glow-purple); } }   @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }   @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }   @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }   @keyframes counterPop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } }   @keyframes orbPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.15); } }   @media (prefers-reduced-motion: reduce) { .reveal-enabled [data-reveal] { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }   .site-sketch-bg, .resources-sketch-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .site-sketch, .resources-sketch { position: absolute; width: 105px; height: 105px; opacity: 0.14; filter: drop-shadow(0 2px 8px rgba(var(--brand-primary-rgb), 0.06)); transition: opacity 0.3s ease; pointer-events: none; user-select: none; } .site-sketch-path, .resources-sketch-path { stroke: var(--brand-primary); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }   .site-sketch--1, .resources-sketch--1 { top: 3%; left: 1.5%; animation: sketchFloat 10s ease-in-out infinite alternate; } .site-sketch--2, .resources-sketch--2 { top: 4%; right: 1.5%; width: 110px; height: 110px; animation: sketchFloatReverse 11s ease-in-out infinite alternate; } .site-sketch--3, .resources-sketch--3 { bottom: 4%; left: 1.5%; width: 100px; height: 100px; animation: sketchFloat 12s ease-in-out infinite alternate; } .site-sketch--4, .resources-sketch--4 { bottom: 3%; right: 1.5%; width: 105px; height: 105px; animation: sketchFloatReverse 13s ease-in-out infinite alternate; } .site-sketch--5, .resources-sketch--5 { top: 22%; left: 1%; width: 95px; height: 95px; animation: sketchFloat 9s ease-in-out infinite alternate; } .site-sketch--6, .resources-sketch--6 { top: 78%; right: 1%; width: 95px; height: 95px; animation: sketchFloatReverse 10s ease-in-out infinite alternate; } @keyframes sketchFloat { 0% { transform: translateY(0) rotate(0deg); opacity: 0.12; } 50% { transform: translateY(-10px) rotate(3deg); opacity: 0.18; } 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; } } @keyframes sketchFloatReverse { 0% { transform: translateY(0) rotate(0deg); opacity: 0.12; } 50% { transform: translateY(10px) rotate(-3deg); opacity: 0.18; } 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; } }   .hero__container, .about__header, .about__grid, .about__bottom-banner, .about .container, .subjects__header, .subjects__boards, .subjects__board-btn, .subjects__marquee-wrapper, .subjects__grid, .subjects__footer, .features__header, .features__rows, .comparison-section__header, .comparison-table-wrap, .partners__container, .resources-section__header, .resources-wrap, .faq-container { position: relative; z-index: 2; } @media (max-width: 1100px) { .site-sketch--5, .site-sketch--6, .resources-sketch--5, .resources-sketch--6 { display: none !important; } }   @media (max-width: 768px) { .site-sketch-bg, .resources-sketch-bg { display: none !important; } }   .site-header { position: sticky; top: 0; left: 0; width: 100%; height: var(--header-height, 74px); background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--color-border-light, #e2e8f0); z-index: 1000; transition: background 0.25s ease, box-shadow 0.25s ease; } .site-header.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 1.25rem; }   .header-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .header-logo-img { height: 38px; width: auto; max-height: 42px; object-fit: contain; display: block; transition: transform var(--transition-fast), opacity var(--transition-fast); } .header-logo:hover .header-logo-img { transform: scale(1.02); opacity: 0.95; } .footer-logo-link { display: inline-block; text-decoration: none; margin-bottom: 0.85rem; } .footer-logo-img { height: 42px; width: auto; max-height: 46px; object-fit: contain; display: block; transition: transform var(--transition-fast); } .footer-logo-link:hover .footer-logo-img { transform: scale(1.02); }   .nav-playstore-img { height: 34px; width: auto; object-fit: contain; display: block; transition: transform var(--transition-fast), filter var(--transition-fast); } .nav-playstore-img:hover { transform: translateY(-1px); filter: brightness(1.08); } .mobile-playstore-btn { display: block; width: 100%; margin-top: 1.25rem; text-align: center; text-decoration: none; } .mobile-playstore-img { height: 48px; width: auto; max-width: 200px; object-fit: contain; margin: 0 auto; display: block; transition: transform var(--transition-fast); } .mobile-playstore-btn:active .mobile-playstore-img { transform: scale(0.97); } .footer-playstore-wrap { margin-top: 0.5rem; margin-bottom: 0.5rem; } .footer-playstore-link { display: inline-block; text-decoration: none; transition: transform var(--transition-fast), filter var(--transition-fast); } .footer-playstore-link:hover { transform: translateY(-2px); filter: brightness(1.1); } .footer-playstore-img { height: 40px; width: auto; object-fit: contain; display: block; } .hero__playstore-link, .hero__play-link { display: inline-flex; align-items: center; justify-content: center; height: 54px; box-sizing: border-box; text-decoration: none; line-height: 0; transition: transform var(--transition-fast), filter var(--transition-fast); } .hero__playstore-link:hover, .hero__play-link:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 24px var(--brand-primary-glow)); } .hero__playstore-img, .hero__play-badge-img { height: 54px; width: auto; max-width: 190px; object-fit: contain; display: block; border-radius: 12px; }   .header-nav { display: flex; align-items: center; gap: 0.4rem; } .nav-item { position: relative; } .nav-link, .nav-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.52rem 0.85rem; font-size: 0.92rem; font-weight: 600; color: var(--color-text-body); border-radius: var(--radius-md); transition: all var(--transition-fast); cursor: pointer; white-space: nowrap; } .nav-link:hover, .nav-btn:hover { color: var(--brand-primary); background: var(--brand-primary-subtle); } .nav-btn.active, .nav-link.active { color: var(--brand-primary); background: var(--brand-primary-subtle); } .nav-icon { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; } .nav-chevron { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none; transition: transform var(--transition-fast); } .nav-btn[aria-expanded="true"] .nav-chevron, .nav-item.open .nav-chevron { transform: rotate(180deg); }   .header-dropdown { position: absolute; top: calc(100% + 8px); left: 0; min-width: 240px; background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); padding: 0.6rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition-fast); z-index: var(--z-megamenu); } .nav-item.open .header-dropdown, .nav-item:hover .header-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; border-radius: var(--radius-md); color: var(--color-text-body); font-size: 0.9rem; font-weight: 500; transition: all var(--transition-fast); } .dropdown-link:hover { color: var(--brand-primary); background: var(--brand-primary-subtle); } .dropdown-link-icon { width: 20px; height: 20px; color: var(--brand-primary); flex-shrink: 0; }   .header-search-wrap { position: relative; flex: 1; max-width: 320px; margin-left: 0.5rem; } .header-search-input { width: 100%; height: 42px; padding: 0 2.5rem 0 2.4rem; background: var(--color-surface-muted); border: 1px solid transparent; border-radius: var(--radius-pill); font-family: inherit; font-size: 0.86rem; color: var(--color-text-main); transition: all var(--transition-fast); } .header-search-input:focus { outline: none; background: var(--color-surface-white); border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-border); } .header-search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--color-text-muted); pointer-events: none; } .header-search-badge { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; font-weight: 600; background: #e2e8f0; color: #64748b; padding: 2px 6px; border-radius: 4px; cursor: pointer; user-select: none; transition: all var(--transition-fast); } .header-search-badge:hover { background: #cbd5e1; color: #334155; }   .header-search-dropdown { position: absolute; top: calc(100% + 8px); left: 0; width: 380px; max-width: 92vw; background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.05); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all var(--transition-fast); z-index: 1100; } .header-search-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); } .search-dropdown-content { max-height: 380px; overflow-y: auto; padding: 0.5rem; } .search-dropdown-header { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-text-muted); text-transform: uppercase; padding: 0.45rem 0.65rem 0.25rem; } .search-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: var(--radius-md); text-decoration: none; color: var(--color-text-main); font-size: 0.88rem; font-weight: 500; transition: all var(--transition-fast); cursor: pointer; } .search-dropdown-item:hover, .search-dropdown-item.focused { background: var(--brand-primary-subtle); color: var(--brand-primary); } .search-dropdown-item-title { display: flex; flex-direction: column; gap: 2px; text-align: left; } .search-dropdown-item-text { font-weight: 600; line-height: 1.3; } .search-dropdown-badge { font-size: 0.7rem; font-weight: 600; background: #f1f5f9; color: #64748b; padding: 0.15rem 0.5rem; border-radius: 9999px; white-space: nowrap; flex-shrink: 0; } .search-dropdown-item:hover .search-dropdown-badge, .search-dropdown-item.focused .search-dropdown-badge { background: var(--brand-primary-subtle); color: var(--brand-primary); } .search-dropdown-empty { padding: 1.5rem 1rem; text-align: center; color: var(--color-text-muted); font-size: 0.88rem; } .search-dropdown-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: #f8fafc; border-top: 1px solid #f1f5f9; font-size: 0.75rem; color: #64748b; } .search-dropdown-footer-kbd { display: inline-flex; align-items: center; gap: 0.25rem; } .search-dropdown-footer-kbd kbd { font-family: inherit; font-size: 0.7rem; background: #e2e8f0; padding: 1px 4px; border-radius: 3px; color: #475569; }   .header-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }   .btn-nav-cta { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.58rem 1.25rem; background: var(--brand-primary); color: #ffffff !important; font-weight: 600; font-size: 0.88rem; letter-spacing: -0.01em; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 14px var(--brand-primary-glow), 0 1px 3px rgba(0, 0, 0, 0.08); text-decoration: none; white-space: nowrap; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .btn-nav-cta:hover { background: var(--brand-primary-hover); transform: translateY(-1.5px); box-shadow: 0 6px 20px var(--brand-primary-glow), 0 2px 6px rgba(0, 0, 0, 0.12); color: #ffffff !important; } .btn-nav-cta:active { background: var(--brand-primary-hover); transform: translateY(0); box-shadow: 0 2px 8px var(--brand-primary-glow); } .nav-cta-text { font-weight: 600; color: #ffffff; } .nav-cta-arrow { width: 14px; height: 14px; stroke: currentColor; transition: transform 0.2s ease; } .btn-nav-cta:hover .nav-cta-arrow { transform: translateX(3px); }   .mobile-drawer-cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.85rem 1.5rem; background: var(--brand-primary); color: #ffffff !important; font-weight: 600; font-size: 0.95rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 16px var(--brand-primary-glow); text-decoration: none; margin-top: 0.5rem; transition: all 0.2s ease; } .mobile-drawer-cta:hover { background: var(--brand-primary-hover); transform: translateY(-1.5px); box-shadow: 0 6px 22px var(--brand-primary-glow); color: #ffffff !important; } .mobile-drawer-cta .mobile-cta-arrow { transition: transform 0.2s ease; } .mobile-drawer-cta:hover .mobile-cta-arrow { transform: translateX(4px); }   .header-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--color-surface-muted); gap: 5px; cursor: pointer; } .header-hamburger span { width: 22px; height: 2px; background: var(--color-text-main); border-radius: 2px; transition: all var(--transition-fast); } .header-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header-hamburger.active span:nth-child(2) { opacity: 0; } .header-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }   .megamenu-backdrop { position: fixed; top: var(--header-height); left: 0; width: 100vw; height: calc(100vh - var(--header-height)); background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: all var(--transition-fast); z-index: calc(var(--z-megamenu) - 1); } .megamenu-backdrop.open { opacity: 1; visibility: visible; } .megamenu-container { position: fixed; top: calc(var(--header-height) + 8px); left: 50%; transform: translateX(-50%) translateY(8px); width: min(1140px, calc(100vw - 2rem)); max-height: calc(100vh - var(--header-height) - 24px); background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); box-shadow: var(--shadow-mega-menu); opacity: 0; visibility: hidden; transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base); z-index: var(--z-megamenu); overflow-y: auto; overscroll-behavior: contain; } .megamenu-container.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }   .megamenu-body { display: grid; grid-template-columns: 240px 1fr; min-height: 440px; background: #ffffff; }   .megamenu-sidebar { background: #fbfcfe; border-right: 1px solid var(--color-border-light); padding: 1.25rem 0.9rem; display: flex; flex-direction: column; overflow: hidden; } .megamenu-sidebar-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-text-muted); text-transform: uppercase; margin-bottom: 0.75rem; padding-left: 0.25rem; display: flex; align-items: center; justify-content: space-between; } .megamenu-board-search-wrap { position: relative; margin-bottom: 0.65rem; } .megamenu-board-search { width: 100%; padding: 0.45rem 0.65rem 0.45rem 1.9rem; font-size: 0.78rem; font-family: inherit; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); background: #ffffff; color: var(--color-text-main); outline: none; transition: all var(--transition-fast); } .megamenu-board-search:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px var(--brand-primary-border); } .megamenu-board-search-icon { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--color-text-muted); pointer-events: none; } .megamenu-board-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 330px; overflow-y: auto; padding-right: 0.25rem; } .megamenu-board-list::-webkit-scrollbar { width: 4px; } .megamenu-board-list::-webkit-scrollbar-track { background: transparent; } .megamenu-board-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .megamenu-board-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.45rem 0.65rem; font-size: 0.84rem; font-weight: 500; font-family: inherit; color: var(--color-text-body); border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; transition: all var(--transition-fast); text-align: left; } .megamenu-board-btn:hover { background: var(--color-surface-muted); color: var(--color-text-main); } .megamenu-board-btn.active { background: var(--brand-primary-subtle); color: var(--brand-primary); font-weight: 700; } .megamenu-board-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0.25rem; } .megamenu-board-tag { font-size: 0.64rem; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: #f1f5f9; color: #64748b; flex-shrink: 0; } .megamenu-board-btn.active .megamenu-board-tag { background: var(--brand-primary-subtle); color: var(--brand-primary); }   .megamenu-class-list { display: flex; flex-direction: column; gap: 0.4rem; } .megamenu-class-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.65rem 0.9rem; font-size: 0.92rem; font-weight: 600; color: var(--color-text-body); border-radius: var(--radius-md); transition: all var(--transition-fast); text-align: left; } .megamenu-class-btn-left { display: flex; align-items: center; gap: 0.65rem; } .megamenu-class-icon { width: 18px; height: 18px; color: var(--color-text-muted); } .megamenu-class-btn:hover { background: var(--color-surface-muted); color: var(--color-text-main); } .megamenu-class-btn.active { background: var(--brand-primary-subtle); color: var(--brand-primary); font-weight: 700; } .megamenu-class-btn.active .megamenu-class-icon { color: var(--brand-primary); } .megamenu-class-btn .megamenu-class-arrow { width: 14px; height: 14px; opacity: 0; transform: translateX(-4px); transition: all var(--transition-fast); } .megamenu-class-btn.active .megamenu-class-arrow { opacity: 1; transform: translateX(0); }   .megamenu-main { padding: 1.4rem 1.6rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; } .megamenu-main-header { margin-bottom: 0.2rem; } .megamenu-header-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.25rem; } .megamenu-main-title { font-size: 1.25rem; font-weight: 800; color: var(--color-text-main); margin: 0; letter-spacing: -0.02em; } .megamenu-curriculum-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 9999px; background: #ecfdf5; color: #059669; border: 1px solid rgba(5, 150, 105, 0.25); white-space: nowrap; } .megamenu-main-subtitle { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; line-height: 1.4; }   .megamenu-classes-container { display: flex; flex-direction: column; gap: 0.35rem; } .megamenu-classes-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-text-muted); text-transform: uppercase; } .megamenu-classes-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem; background: #f1f5f9; border: 1px solid var(--color-border-light); border-radius: var(--radius-md); } .megamenu-class-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 0.5rem; font-size: 0.85rem; font-weight: 600; font-family: inherit; color: var(--color-text-muted); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; } .megamenu-class-pill:hover { color: var(--color-text-main); background: rgba(255, 255, 255, 0.6); } .megamenu-class-pill.active { background: #ffffff; color: var(--brand-primary); font-weight: 700; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06); }   .megamenu-columns { display: grid; grid-template-columns: 175px 1fr; gap: 1.5rem; } .megamenu-col-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; font-weight: 700; color: var(--color-text-main); margin-bottom: 0.75rem; } .megamenu-col-title--chapters { justify-content: space-between; } .megamenu-col-title-left { display: flex; align-items: center; gap: 0.5rem; } .megamenu-view-subject-hub { font-size: 0.76rem; font-weight: 700; color: var(--brand-primary); text-decoration: none; transition: all var(--transition-fast); } .megamenu-view-subject-hub:hover { text-decoration: underline; transform: translateX(2px); } .megamenu-col-icon { width: 16px; height: 16px; color: var(--brand-primary); } .megamenu-link-list { display: flex; flex-direction: column; gap: 0.25rem; }   .megamenu-subject-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.5rem 0.65rem; font-size: 0.86rem; font-weight: 600; font-family: inherit; color: var(--color-text-body); border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; transition: all var(--transition-fast); text-align: left; } .megamenu-subject-btn:hover { background: var(--color-surface-muted); color: var(--color-text-main); } .megamenu-subject-btn.active { background: var(--brand-primary-subtle); color: var(--brand-primary); font-weight: 700; } .megamenu-subject-chevron { width: 14px; height: 14px; opacity: 0.4; transition: transform 0.15s ease, opacity 0.15s ease; } .megamenu-subject-btn:hover .megamenu-subject-chevron, .megamenu-subject-btn.active .megamenu-subject-chevron { opacity: 1; transform: translateX(2px); } .megamenu-subject-btn.active .megamenu-subject-chevron { color: var(--brand-primary); }   .megamenu-chapters-list { display: flex; flex-direction: column; gap: 0.25rem; max-height: 250px; overflow-y: auto; padding-right: 0.35rem; } .megamenu-chapters-list::-webkit-scrollbar { width: 4px; } .megamenu-chapters-list::-webkit-scrollbar-track { background: transparent; } .megamenu-chapters-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } .megamenu-chapter-item { display: flex; align-items: center; justify-content: space-between; padding: 0.42rem 0.6rem; border-radius: 6px; font-size: 0.83rem; color: #334155; text-decoration: none; transition: all 0.15s ease; gap: 0.5rem; } .megamenu-chapter-item:hover { background: #f1f5f9; color: var(--brand-primary); transform: translateX(2px); } .megamenu-chapter-num { font-size: 0.68rem; font-weight: 700; color: #94a3b8; width: 18px; flex-shrink: 0; } .megamenu-chapter-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } .megamenu-chapter-arrow { width: 13px; height: 13px; opacity: 0; color: var(--brand-primary); transition: all 0.15s ease; flex-shrink: 0; } .megamenu-chapter-item:hover .megamenu-chapter-arrow { opacity: 1; transform: translateX(2px); } .megamenu-item-link { display: flex; align-items: center; justify-content: space-between; padding: 0.42rem 0.55rem; border-radius: var(--radius-sm); color: var(--color-text-body); font-size: 0.86rem; font-weight: 500; transition: all var(--transition-fast); text-decoration: none; } .megamenu-item-link:hover { color: var(--brand-primary); background: var(--brand-primary-subtle); transform: translateX(2px); } .megamenu-item-link-left { display: flex; align-items: center; gap: 0.55rem; } .megamenu-item-icon { width: 16px; height: 16px; flex-shrink: 0; } .megamenu-item-chevron { width: 12px; height: 12px; color: #94a3b8; transition: transform var(--transition-fast); } .megamenu-item-link:hover .megamenu-item-chevron { transform: translateX(2px); color: var(--brand-primary); } .megamenu-item-desc { display: block; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 400; }   .megamenu-promo { padding: 1.25rem 1.15rem; background: #fbfcfe; border-left: 1px solid var(--color-border-light); display: flex; align-items: stretch; justify-content: center; } .megamenu-promo-card { background: linear-gradient(165deg, #f8faff 0%, #edf3fe 100%); border: 1px solid #dbeafe; border-radius: 16px; padding: 1.4rem 1.2rem; width: 100%; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 8px 24px -4px rgba(var(--brand-primary-rgb), 0.12), 0 2px 6px rgba(0, 0, 0, 0.02); } .megamenu-promo-badge { align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--brand-primary); background: var(--brand-primary-subtle); border: 1px solid var(--brand-primary-border); padding: 0.25rem 0.65rem; border-radius: 999px; margin-bottom: 0.75rem; } .megamenu-promo-title { font-size: 1.12rem; font-weight: 800; color: #0f172a; line-height: 1.3; margin: 0 0 0.4rem 0; letter-spacing: -0.015em; } .megamenu-promo-desc { font-size: 0.82rem; color: #475569; line-height: 1.5; margin: 0 0 0.85rem 0; } .megamenu-promo-icon-wrap { width: 62px; height: 62px; border-radius: 50%; background: #ffffff; border: 1.5px solid var(--brand-primary-border); box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.12); display: flex; align-items: center; justify-content: center; margin: 0.35rem auto 0.75rem auto; transition: transform 0.22s ease; } .megamenu-promo-card:hover .megamenu-promo-icon-wrap { transform: translateY(-2px) scale(1.06); } .megamenu-promo-graphic { width: 34px; height: 34px; color: var(--brand-primary); stroke: var(--brand-primary); } .megamenu-promo-features { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; margin-bottom: 1rem; } .megamenu-promo-tag { font-size: 0.72rem; font-weight: 600; color: #334155; background: rgba(255, 255, 255, 0.85); border: 1px solid #e2e8f0; padding: 0.2rem 0.5rem; border-radius: 6px; white-space: nowrap; } .megamenu-promo-btn { display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; padding: 0.72rem 1rem; background: var(--brand-primary); color: #ffffff !important; font-size: 0.88rem; font-weight: 600; letter-spacing: -0.01em; border-radius: 10px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px var(--brand-primary-glow); transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .megamenu-promo-btn:hover { background: var(--brand-primary-hover); transform: translateY(-1.5px); box-shadow: 0 6px 18px var(--brand-primary-glow); color: #ffffff !important; } .megamenu-promo-btn:active { background: var(--brand-primary-hover); transform: translateY(0); }   .megamenu-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.8rem; background: #f8fafc; border-top: 1px solid var(--color-border-light); } .megamenu-quick-links { display: flex; align-items: center; gap: 1.5rem; } .megamenu-quick-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-text-muted); text-transform: uppercase; } .megamenu-quick-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; font-weight: 600; color: var(--color-text-body); transition: color var(--transition-fast); } .megamenu-quick-item:hover { color: var(--brand-primary); } .megamenu-quick-item span { font-size: 0.78rem; font-weight: 400; color: var(--color-text-muted); } .megamenu-view-all { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; font-weight: 700; color: var(--brand-primary); transition: transform var(--transition-fast); } .megamenu-view-all:hover { transform: translateX(3px); }   .search-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: var(--z-modal); display: flex; align-items: flex-start; justify-content: center; padding-top: min(15vh, 120px); padding-inline: 1rem; opacity: 0; visibility: hidden; transition: all var(--transition-fast); } .search-modal-backdrop.open { opacity: 1; visibility: visible; } .search-modal { width: min(640px, 100%); background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25); overflow: hidden; transform: scale(0.96) translateY(-10px); transition: all var(--transition-fast); } .search-modal-backdrop.open .search-modal { transform: scale(1) translateY(0); } .search-modal-header { display: flex; align-items: center; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--color-border-light); gap: 0.75rem; } .search-modal-header svg { width: 20px; height: 20px; color: var(--color-text-muted); } .search-modal-input { flex: 1; font-size: 1.05rem; border: none; outline: none; color: var(--color-text-main); background: transparent; font-family: inherit; } .search-modal-close { font-size: 0.75rem; font-weight: 600; background: var(--color-surface-muted); color: var(--color-text-muted); padding: 4px 8px; border-radius: var(--radius-sm); cursor: pointer; } .search-modal-results { max-height: 400px; overflow-y: auto; padding: 0.75rem; }   .search-modal-filters { display: flex; align-items: center; gap: 0.45rem; padding: 0.65rem 1.25rem; background: #f8fafc; border-bottom: 1px solid var(--color-border-light); overflow-x: auto; scrollbar-width: none; } .search-modal-filters::-webkit-scrollbar { display: none; } .search-filter-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; font-size: 0.76rem; font-weight: 600; font-family: inherit; color: var(--color-text-muted); background: #ffffff; border: 1px solid var(--color-border-light); border-radius: 9999px; cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); } .search-filter-chip:hover { color: var(--color-text-main); border-color: #cbd5e1; } .search-filter-chip.active { background: var(--brand-primary); color: #ffffff; border-color: var(--brand-primary); box-shadow: 0 2px 6px var(--brand-primary-glow); }   .search-highlight { background: var(--brand-primary-subtle); color: var(--brand-primary); font-weight: 700; padding: 0 2px; border-radius: 3px; }   .search-modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 1.25rem; background: #f8fafc; border-top: 1px solid var(--color-border-light); font-size: 0.74rem; color: var(--color-text-muted); } .search-footer-hints { display: flex; align-items: center; gap: 0.85rem; } .search-footer-hints kbd { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 4px; padding: 1px 5px; font-size: 0.7rem; font-family: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .search-footer-count { font-weight: 600; font-size: 0.72rem; color: #64748b; }   .search-zero-state { padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 1.2rem; } .search-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; padding-inline: 0.5rem; } .search-section-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-text-muted); text-transform: uppercase; display: flex; align-items: center; gap: 0.4rem; } .search-clear-btn { font-size: 0.72rem; color: var(--color-text-muted); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--transition-fast); } .search-clear-btn:hover { color: #ef4444; } .search-trending-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-inline: 0.5rem; } .search-trending-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 500; color: var(--color-text-body); background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; transition: all var(--transition-fast); } .search-trending-chip:hover { background: var(--brand-primary-subtle); border-color: #bfdbfe; color: var(--brand-primary); transform: translateY(-1px); } .search-recent-list { display: flex; flex-direction: column; gap: 0.25rem; } .search-recent-item { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.65rem; border-radius: 6px; font-size: 0.82rem; color: var(--color-text-body); cursor: pointer; transition: all var(--transition-fast); } .search-recent-item:hover { background: #f1f5f9; color: var(--brand-primary); } .search-recent-left { display: flex; align-items: center; gap: 0.5rem; } .search-recent-remove { background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 0.8rem; padding: 2px 6px; border-radius: 4px; } .search-recent-remove:hover { color: #ef4444; background: #fee2e2; } .search-group-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-text-muted); text-transform: uppercase; padding: 0.4rem 0.6rem; } .search-result-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem; border-radius: 12px; color: var(--color-text-main); text-decoration: none; transition: all var(--transition-fast); border: 1px solid transparent; } .search-result-item:hover, .search-result-item.selected { background: #f8fafc; border-color: #e2e8f0; color: var(--color-text-main); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .search-result-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #f1f5f9; color: #64748b; flex-shrink: 0; transition: all var(--transition-fast); } .search-result-icon svg { width: 18px; height: 18px; max-width: 18px; max-height: 18px; flex-shrink: 0; } .search-result-item:hover .search-result-icon, .search-result-item.selected .search-result-icon { background: var(--brand-primary-subtle); color: var(--brand-primary); } .search-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .search-result-title { font-size: 0.93rem; font-weight: 600; color: #0f172a; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-item:hover .search-result-title, .search-result-item.selected .search-result-title { color: var(--brand-primary); } .search-result-meta { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; color: #64748b; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; display: inline-block; align-self: flex-start; border: 1px solid #e2e8f0; } .search-result-arrow { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; flex-shrink: 0; color: #94a3b8; transition: transform var(--transition-fast), color var(--transition-fast); } .search-result-item:hover .search-result-arrow, .search-result-item.selected .search-result-arrow { color: var(--brand-primary); transform: translateX(4px); } .search-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; } .search-empty-state svg { width: 36px; height: 36px; color: #94a3b8; margin-bottom: 0.75rem; } .search-empty-state p { font-size: 0.95rem; font-weight: 600; color: #334155; margin-bottom: 0.35rem; } .search-empty-state span { font-size: 0.8rem; color: #94a3b8; }   .mobile-drawer { position: fixed; top: var(--header-height); left: 0; right: 0; width: 100%; max-width: 100%; height: calc(100vh - var(--header-height)); background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); z-index: var(--z-header); transform: translateX(100%); visibility: hidden; pointer-events: none; transition: transform var(--transition-base), visibility var(--transition-base); overflow-y: auto; overflow-x: hidden; padding: 1.5rem 1.25rem 3rem 1.25rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 1.5rem; } .mobile-drawer.open { transform: translateX(0); visibility: visible; pointer-events: auto; } .mobile-search-wrap { position: relative; width: 100%; } .mobile-search-input { width: 100%; height: 46px; padding: 0 1rem 0 2.6rem; background: var(--color-surface-muted); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); font-family: inherit; font-size: 0.92rem; } .mobile-search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-text-muted); } .mobile-nav-group { display: flex; flex-direction: column; gap: 0.4rem; } .mobile-nav-heading { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-text-muted); text-transform: uppercase; padding-left: 0.5rem; margin-bottom: 0.3rem; } .mobile-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 0.85rem; font-size: 1rem; font-weight: 600; color: var(--color-text-main); border-radius: var(--radius-md); transition: all var(--transition-fast); } .mobile-nav-link:hover, .mobile-nav-link.active { background: var(--brand-primary-subtle); color: var(--brand-primary); } .mobile-class-pills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.3rem; } .mobile-class-pill { text-align: center; padding: 0.6rem 0.4rem; background: var(--color-surface-muted); border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600; color: var(--color-text-main); transition: all var(--transition-fast); } .mobile-class-pill:hover, .mobile-class-pill.active { background: var(--brand-primary); color: var(--color-text-white); }   .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: inherit; font-size: 0.95rem; font-weight: 700; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: all var(--transition-fast); white-space: nowrap; } .btn-primary { background: var(--brand-primary); color: var(--color-text-white); box-shadow: 0 4px 14px var(--brand-primary-glow); } .btn-primary:hover { background: var(--brand-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px var(--brand-primary-glow); } .btn-gradient { background: var(--brand-gradient); color: var(--color-text-white); box-shadow: 0 4px 16px rgba(124, 58, 237, 0.25); } .btn-gradient:hover { background: var(--brand-gradient-hover); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.35); } .btn-outline { background: transparent; color: var(--brand-primary); border: 1.5px solid var(--brand-primary); } .btn-outline:hover { background: var(--brand-primary-subtle); }   .section-header { text-align: center; max-width: 740px; margin: 0 auto 3rem auto; } .section-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; background: var(--brand-primary-subtle); color: var(--brand-primary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-pill); margin-bottom: 1rem; } .section-title { font-family: var(--font-heading); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 800; color: var(--color-text-main); line-height: 1.18; margin: 0 0 1rem 0; letter-spacing: -0.025em; } .section-title em { font-style: normal; color: var(--brand-primary); background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-subtitle { font-size: 1.05rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }   @media (max-width: 1080px) { .header-search-wrap { max-width: 220px; } .megamenu-body { grid-template-columns: 200px 1fr; min-height: auto; } .megamenu-columns { grid-template-columns: 150px 1fr; gap: 1rem; } } @media (max-width: 960px) { .header-nav, .header-search-wrap, .megamenu-container, .megamenu-backdrop { display: none !important; } .header-hamburger { display: flex; } .header-actions .btn-nav-cta { padding: 0.45rem 0.95rem; font-size: 0.82rem; } } @media (max-width: 480px) { .header-container { padding-inline: 0.85rem; gap: 0.5rem; } .header-logo img, .header-logo svg { height: 32px; width: auto; } .header-actions { gap: 0.5rem; } .header-actions .btn-nav-cta { padding: 0.38rem 0.7rem; font-size: 0.76rem; gap: 0.3rem; } .header-actions .btn-nav-cta .nav-cta-arrow { display: none; } .header-hamburger { width: 38px; height: 38px; } } @media (max-width: 360px) { .header-container { padding-inline: 0.6rem; gap: 0.35rem; } .header-logo img, .header-logo svg { height: 28px; } .header-actions { gap: 0.35rem; } .header-actions .btn-nav-cta { padding: 0.32rem 0.55rem; font-size: 0.72rem; } .header-hamburger { width: 34px; height: 34px; } }       .hero { position: relative; background: radial-gradient(circle at 50% 30%, rgba(255, 117, 20, 0.04) 0%, transparent 65%), #f4f7fe; overflow: hidden; padding-top: 0; padding-bottom: 0; } .hero__container { max-width: 1040px; margin: 0 auto; padding-top: 2.75rem; padding-bottom: 2.75rem; text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 3; }   .hero__badge { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; border-radius: 9999px; background: rgba(255, 117, 20, 0.08); border: 1px solid rgba(255, 117, 20, 0.25); font-size: 0.78rem; font-weight: 700; color: #ea580c; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0; margin-bottom: 1.25rem; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .hero__badge:hover { transform: translateY(-1px); border-color: rgba(234, 88, 12, 0.45); box-shadow: 0 4px 12px rgba(234, 88, 12, 0.1); }   .hero__title { font-family: var(--font-heading); font-size: clamp(2.35rem, 5vw, 4.1rem); font-weight: 800; color: #0f172a; line-height: 1.12; margin-top: 0; margin-bottom: 1.25rem; letter-spacing: -0.03em; text-align: center; width: 100%; max-width: 900px; } .hero__title em { font-style: italic; font-weight: 800; color: #0f172a; }   .hero__rotating-wrapper { display: block; position: relative; width: 100%; height: 1.35em; line-height: 1.25; overflow: hidden; margin-top: 0.1em; padding: 0.05em 0; text-align: center; } .hero__rotating-word { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; width: 100%; height: 100%; text-align: center; color: var(--brand-primary, #ea580c); font-weight: 850; font-style: italic; opacity: 0; transform: translateY(105%); transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); pointer-events: none; white-space: nowrap; } .hero__rotating-word.active { opacity: 1; transform: translateY(0); pointer-events: auto; } .hero__rotating-word.exit { opacity: 0; transform: translateY(-105%); pointer-events: none; }   .hero__subtitle { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #475569; line-height: 1.68; margin-bottom: 1.75rem; max-width: 740px; margin-inline: auto; font-weight: 400; text-align: center; }   .hero__actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }   .hero__play-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 0; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease; } .hero__play-link:hover { transform: translateY(-2px); filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.12)); } .hero__play-badge-img { height: 54px; width: auto; max-width: 190px; display: block; object-fit: contain; border-radius: 12px; }   .hero__btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; height: 54px; min-height: 54px; box-sizing: border-box; padding: 0 1.65rem; background: #ffffff; color: #1e293b; font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; border: 1.5px solid #cbd5e1; border-radius: 12px; text-decoration: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04); white-space: nowrap; cursor: pointer; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .hero__btn-secondary:hover { background: #f8fafc; border-color: #ea580c; color: #ea580c; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(234, 88, 12, 0.1); } .hero__btn-secondary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .hero__btn-secondary svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; flex-shrink: 0; transition: transform 0.25s ease; animation: heroArrowBounce 2.4s ease-in-out infinite; } .hero__btn-secondary:hover svg { transform: translateY(3px); animation: none; } @keyframes heroArrowBounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(3px); } 60% { transform: translateY(1.5px); } }   .hero__chips { display: flex; align-items: center; justify-content: center; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 1.25rem; width: 100%; max-width: 980px; } .hero__chip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.44rem 0.95rem; background: rgba(255, 255, 255, 0.96); border: 1px solid #e2e8f0; border-radius: 9999px; font-size: 0.82rem; font-weight: 600; color: #334155; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: nowrap; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; cursor: default; } .hero__chip:hover { background: #ffffff; border-color: #cbd5e1; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .hero__chip svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform 0.25s ease; } .hero__chip:hover svg { transform: scale(1.15) rotate(4deg); }   .hero__chip:nth-child(1) svg { stroke: #ea580c; color: #ea580c; } .hero__chip:nth-child(2) svg { stroke: #f59e0b; color: #f59e0b; } .hero__chip:nth-child(3) svg { stroke: #16a34a; color: #16a34a; } .hero__chip:nth-child(4) svg { stroke: #8b5cf6; color: #8b5cf6; }   .hero__note { font-size: 0.85rem; color: #64748b; font-weight: 500; margin-bottom: 0; text-align: center; }   @media (max-width: 768px) { .hero__container { padding-top: 2.25rem; padding-bottom: 2.25rem; } .hero__badge { margin-bottom: 1.1rem; } .hero__title { font-size: clamp(2.1rem, 6vw, 3rem); } .hero__chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; max-width: 480px; } .hero__chip { justify-content: center; text-align: center; font-size: 0.78rem; padding: 0.4rem 0.75rem; } } @media (max-width: 480px) { .hero__container { padding-top: 1.75rem; padding-bottom: 1.75rem; padding-inline: 1rem; } .hero__badge { font-size: 0.76rem; padding: 0.35rem 0.85rem; margin-bottom: 1rem; } .hero__title { font-size: clamp(1.75rem, 7.8vw, 2.2rem); line-height: 1.15; margin-bottom: 1rem; } .hero__subtitle { font-size: 0.94rem; line-height: 1.55; margin-bottom: 1.35rem; } .hero__actions { flex-direction: column; align-items: center; gap: 0.75rem; width: 100%; } .hero__play-badge-img { height: 50px; } .hero__btn-secondary { height: 50px; min-height: 50px; width: 100%; max-width: 250px; font-size: 0.95rem; border-radius: 12px; } .hero__chips { grid-template-columns: 1fr 1fr; gap: 0.45rem; max-width: 100%; } .hero__chip { font-size: 0.72rem; padding: 0.38rem 0.45rem; gap: 0.35rem; } .hero__note { font-size: 0.78rem; } } @media (max-width: 360px) { .hero__title { font-size: 1.6rem; } .hero__chips { grid-template-columns: 1fr; } }     .stats { position: relative; background: var(--bg-dark); padding-block: 3.5rem 3rem; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 1px 400px; }   .stats__glow { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } .stats__glow--1 { width: 380px; height: 380px; background: rgba(var(--brand-primary-rgb), 0.1); top: -100px; left: -80px; animation: glowPulse 10s ease-in-out infinite alternate; } .stats__glow--2 { width: 320px; height: 320px; background: rgba(14, 165, 233, 0.08); bottom: -80px; right: -60px; animation: glowPulse 12s ease-in-out infinite alternate-reverse; } @keyframes glowPulse { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 0.9; transform: scale(1.1); } }   .stats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; z-index: 0; }   .stats__header { text-align: center; max-width: 760px; margin: 0 auto 2.4rem; padding-inline: 1.5rem; position: relative; z-index: 1; } .stats__badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.95rem; border-radius: 9999px; background: rgba(var(--brand-primary-rgb), 0.12); border: 1px solid rgba(var(--brand-primary-rgb), 0.28); color: var(--brand-primary-light); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0; margin-bottom: 1.25rem; } .stats__badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 8px #38bdf8; animation: statsDotPulse 2s infinite ease-in-out; } @keyframes statsDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .stats__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; color: #ffffff; line-height: 1.2; letter-spacing: -0.025em; margin: 0; } .stats__title em { font-style: italic; font-weight: 800; color: var(--brand-primary-light); }   .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.35rem; max-width: 1240px; margin: 0 auto; padding-inline: 1.5rem; position: relative; z-index: 1; }   .stats__card { background: linear-gradient(165deg, rgba(20, 32, 58, 0.7) 0%, rgba(10, 17, 34, 0.92) 100%); border: 1px solid rgba(var(--brand-primary-rgb), 0.16); border-radius: 20px; padding: 1.6rem 1.4rem 1.5rem; text-align: left; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; }   .stats__card::before { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), 0.4), transparent); transition: all 0.3s ease; } .stats__card:hover { transform: translateY(-5px); border-color: rgba(var(--brand-primary-rgb), 0.4); box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.6), 0 0 25px -5px rgba(var(--brand-primary-rgb), 0.22); } .stats__card:hover::before { left: 5%; right: 5%; background: linear-gradient(90deg, transparent, rgba(var(--brand-primary-rgb), 0.8), transparent); }   .stats__card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; } .stats__card-icon { width: 34px; height: 34px; border-radius: 9px; background: rgba(var(--brand-primary-rgb), 0.14); border: 1px solid rgba(var(--brand-primary-rgb), 0.24); display: flex; align-items: center; justify-content: center; color: var(--brand-primary-light); transition: transform 0.3s ease; } .stats__card:hover .stats__card-icon { transform: scale(1.08); background: rgba(var(--brand-primary-rgb), 0.24); color: var(--brand-primary-lighter); } .stats__card-icon svg { width: 16px; height: 16px; } .stats__card-tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light-bg-subtle); }   .stats__number-wrap { margin-bottom: 0.65rem; } .stats__number { font-family: var(--font-heading); font-size: clamp(2.3rem, 3.2vw, 2.75rem); font-weight: 900; color: #ffffff; line-height: 1; letter-spacing: -0.03em; display: inline-block; background: linear-gradient(135deg, #ffffff 40%, var(--brand-primary-lighter) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px rgba(var(--brand-primary-rgb), 0.3)); }   .stats__card-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #ffffff; line-height: 1.3; margin-bottom: 0.45rem; letter-spacing: -0.01em; } .stats__card-desc { font-size: 0.84rem; color: var(--text-light-bg-subtle); line-height: 1.5; margin: 0; }   @media (max-width: 1080px) { .stats__grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; gap: 1.2rem; } } @media (max-width: 640px) { .stats { padding-block: 2.8rem 2.4rem; } .stats__header { margin-bottom: 1.8rem; } .stats__grid { grid-template-columns: 1fr; max-width: 380px; gap: 1rem; } .stats__card { padding: 1.4rem 1.25rem 1.3rem; } .stats__number { font-size: 2.2rem; } } @media (max-width: 480px) { .stats { padding-block: 2.4rem 2rem; } .stats__header { padding-inline: 1rem; margin-bottom: 1.5rem; } .stats__title { font-size: clamp(1.6rem, 6.5vw, 2rem); } .stats__grid { padding-inline: 1rem; max-width: 100%; gap: 0.85rem; } .stats__card { padding: 1.25rem 1.1rem; border-radius: 16px; } .stats__number { font-size: 2rem; } }     .about { position: relative; background: var(--bg-light); padding-block: 6rem; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 1px 550px; } .about__header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; padding-inline: 1.5rem; } .about__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary); margin-top: 0; margin-bottom: 1.25rem; } .about__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; color: var(--text-light-bg-heading); margin-top: 0; margin-bottom: 0.85rem; line-height: 1.2; letter-spacing: -0.025em; } .about__title em { font-style: italic; font-weight: 800; color: var(--brand-primary); } .about__subtitle { font-size: clamp(0.98rem, 1.1vw, 1.05rem); color: var(--text-light-bg-muted); line-height: 1.62; font-weight: 400; }   .about__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 3.5rem; } .about__grid-card { background: #ffffff; border: 1px solid var(--bg-light-border); border-radius: 20px; padding: 2rem 1.5rem; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02); display: flex; flex-direction: column; align-items: flex-start; } .about__grid-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(var(--brand-primary-rgb), 0.08); border-color: var(--color-text-subtle); } .about__grid-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--brand-primary-subtle); border: 1px solid rgba(var(--brand-primary-rgb), 0.16); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .about__grid-icon svg { width: 22px; height: 22px; stroke: var(--brand-primary); fill: none; stroke-width: 2; } .about__grid-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--text-light-bg-heading); margin-bottom: 0.5rem; line-height: 1.3; } .about__grid-text { font-size: 0.92rem; color: var(--text-light-bg-muted); line-height: 1.6; }   .about__banner { background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-card) 100%); border-radius: 24px; padding: 3rem; text-align: center; color: #ffffff; box-shadow: 0 20px 40px rgba(13, 21, 39, 0.12); position: relative; overflow: hidden; } .about__banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-light), var(--brand-primary)); } .about__banner-badge { display: inline-block; padding: 0.35rem 0.9rem; border-radius: 9999px; background: rgba(var(--brand-primary-rgb), 0.15); border: 1px solid rgba(var(--brand-primary-rgb), 0.3); color: var(--brand-primary-light); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 1rem; } .about__banner-title { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.5vw, 1.8rem); font-weight: 700; color: #ffffff; margin-bottom: 0.8rem; } .about__banner-text { font-size: 0.98rem; color: var(--text-light-bg-subtle); line-height: 1.65; max-width: 800px; margin: 0 auto; }   @media (max-width: 1024px) { .about__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .about__grid { grid-template-columns: 1fr; } .about__banner { padding: 2rem 1.5rem; } }   .about__visual { position: relative; padding-block: 2rem; } .about__card { background: #ffffff; border-radius: 28px; padding: 3.5rem 3rem 3rem 3.5rem; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.04); position: relative; border: 1px solid var(--bg-light-muted); } .about__card::before { content: ''; position: absolute; top: 2.5rem; left: 0; bottom: 2.5rem; width: 4px; background: var(--brand-primary); border-radius: 0 4px 4px 0; } .about__card-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--brand-primary-subtle); display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; } .about__card-icon svg { width: 24px; height: 24px; stroke: var(--brand-primary); fill: none; stroke-width: 2; } .about__card-title { font-size: 1.6rem; font-weight: 800; margin-bottom: 1.2rem; color: var(--text-light-bg-heading); letter-spacing: -0.01em; } .about__card-text { font-size: 1.02rem; color: var(--text-light-bg-muted); line-height: 1.75; }   .about__mini-stat { position: absolute; background: #ffffff; border-radius: 16px; padding: 0.85rem 1.25rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); display: flex; align-items: center; gap: 0.85rem; z-index: 3; border: 1px solid var(--bg-light-muted); } .about__mini-stat--1 { top: -5px; right: -15px; animation: float 6s ease-in-out infinite; } .about__mini-stat--2 { bottom: -5px; left: -15px; animation: floatReverse 7s ease-in-out infinite; } .about__mini-stat-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .about__mini-stat-icon--blue { background: var(--brand-primary-subtle); } .about__mini-stat-icon--blue svg { width: 20px; height: 20px; stroke: #ef4444; fill: none; stroke-width: 2; } .about__mini-stat-icon--green { background: var(--brand-tertiary-subtle); } .about__mini-stat-icon--green svg { width: 20px; height: 20px; stroke: var(--brand-tertiary); fill: none; stroke-width: 2; } .about__mini-stat-value { font-family: var(--font-body); font-weight: 800; font-size: 1.15rem; color: var(--text-light-bg-heading); line-height: 1.1; } .about__mini-stat-label { font-size: 0.78rem; color: var(--text-light-bg-subtle); font-weight: 500; }   @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes floatReverse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }   @media (max-width: 1024px) { .about__wrapper { grid-template-columns: 1fr; gap: 3rem; } .about__mini-stat--1 { right: 10px; } .about__mini-stat--2 { left: 10px; } } @media (max-width: 480px) { .about { padding-block: 3.5rem; } .about__header { padding-inline: 1rem; margin-bottom: 2rem; } .about__title { font-size: clamp(1.65rem, 6.5vw, 2.1rem); } .about__grid { gap: 1rem; margin-bottom: 2rem; } .about__grid-card { padding: 1.4rem 1.1rem; border-radius: 16px; } .about__banner { padding: 1.6rem 1.1rem; border-radius: 18px; } .about__banner-title { font-size: 1.3rem; } .about__banner-text { font-size: 0.9rem; } .about__highlights { grid-template-columns: 1fr; } .about__mini-stat { display: none; } .about__card { padding: 1.6rem 1.1rem; } }     .subjects { background: var(--bg-light); padding-block: 6rem; position: relative; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 1px 700px; } .subjects__header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; padding-inline: 1.5rem; } .subjects__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary); margin-top: 0; margin-bottom: 1.25rem; } .subjects__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; color: var(--text-light-bg-heading); line-height: 1.2; margin-top: 0; margin-bottom: 0.85rem; letter-spacing: -0.025em; } .subjects__title em { font-style: italic; font-weight: 800; color: var(--brand-primary); } .subjects__subtitle { font-size: clamp(0.98rem, 1.1vw, 1.05rem); color: var(--text-light-bg-muted); line-height: 1.62; font-weight: 400; }   .subjects__boards { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin-bottom: 2.8rem; flex-wrap: wrap; } .subjects__board-btn { position: relative; z-index: 2; padding: 0.5rem 1.25rem; border-radius: 9999px; font-size: 0.82rem; font-weight: 600; color: var(--text-light-bg-body); background: #ffffff; border: 1px solid var(--bg-light-border); cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02); } .subjects__board-btn:hover { color: var(--text-light-bg-heading); background: #ffffff; border-color: var(--color-text-subtle); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); } .subjects__board-btn.active { color: var(--brand-primary); background: var(--brand-primary-subtle); border: 1.5px solid var(--brand-primary); box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.14); }   .subjects__marquee-wrapper { position: relative; width: 100%; overflow: hidden; margin-bottom: 2.5rem; mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 18%, black 82%, transparent); } .subjects__marquee-track { display: flex; gap: 1rem; width: max-content; animation: scrollMarquee 35s linear infinite; padding-block: 0.5rem; } .subjects__marquee-track:hover { animation-play-state: paused; } @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }   .subjects__card { flex-shrink: 0; width: 195px; height: 155px; background: #ffffff; border: 1px solid var(--bg-light-border); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); text-decoration: none; display: flex; flex-direction: column; cursor: pointer; } .subjects__card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06); border-color: var(--color-text-subtle); }   .subjects__card-header { width: 100%; height: 85px; background: var(--brand-primary-subtle); display: flex; align-items: center; justify-content: center; padding: 0.6rem; position: relative; border-bottom: 1px solid var(--bg-light-muted); } .subjects__card-header svg { width: 54px; height: 44px; stroke: var(--brand-primary); fill: none; stroke-width: 1.6; }   .subjects__card-body { height: 70px; background: #ffffff; padding: 0.4rem 0.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; } .subjects__card-title { font-family: var(--font-body); font-size: 0.84rem; font-weight: 700; color: var(--text-light-bg-heading); line-height: 1.25; white-space: normal; text-align: center; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; } .subjects__badge { display: inline-block; padding: 0.1rem 0.45rem; border-radius: 4px; background: var(--brand-tertiary-subtle); color: var(--brand-tertiary); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; } .subjects__badge--soon { background: #fffbeb; color: #d97706; }   .subjects__footer-text { text-align: center; font-size: 0.92rem; color: var(--text-light-bg-subtle); font-weight: 400; } .subjects__footer-link { color: var(--brand-primary); font-weight: 600; text-decoration: none; } .subjects__footer-link:hover { text-decoration: underline; } @media (max-width: 768px) { .subjects { padding-block: 4rem; } .subjects__card { width: 180px; height: 165px; } .subjects__card-header { height: 105px; } .subjects__card-header svg { width: 75px; height: 55px; } } @media (max-width: 480px) { .subjects { padding-block: 3rem; } .subjects__header { padding-inline: 1rem; margin-bottom: 2rem; } .subjects__title { font-size: clamp(1.65rem, 6.5vw, 2.1rem); } .subjects__boards { gap: 0.45rem; margin-bottom: 2rem; } .subjects__board-btn { padding: 0.42rem 0.9rem; font-size: 0.78rem; } .subjects__card { width: 160px; height: 150px; } .subjects__card-header { height: 90px; } .subjects__card-header svg { width: 60px; height: 46px; } .subjects__card-title { font-size: 0.8rem; } }     .features { position: relative; background: var(--bg-light); padding-block: 6rem; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 1px 1100px; } .features__header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; padding-inline: 1.5rem; } .features__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 0.6rem; } .features__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; color: var(--text-light-bg-heading); line-height: 1.2; margin-bottom: 0.85rem; letter-spacing: -0.025em; } .features__title em { font-style: italic; font-weight: 800; color: var(--brand-primary); } .features__subtitle { font-size: clamp(0.98rem, 1.1vw, 1.05rem); color: var(--text-light-bg-muted); line-height: 1.62; font-weight: 400; }   .features__rows { display: flex; flex-direction: column; gap: 4.5rem; max-width: 1240px; margin: 0 auto; padding-inline: 1.5rem; } .features__row { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; scroll-margin-top: calc(var(--header-height, 74px) + 2rem); }   .features__row--reverse { grid-template-columns: 1fr 1fr; } .features__row--reverse .features__row-content { order: 2; } .features__row--reverse .features__row-visual { order: 1; }   .features__row-badge-wrap { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.2rem; } .features__row-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-primary-subtle); color: var(--brand-primary); font-size: 0.85rem; font-weight: 700; } .features__row-tag { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); } .features__row-pill { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 9999px; background: var(--brand-primary-subtle); color: var(--brand-primary); font-size: 0.78rem; font-weight: 600; } .features__row-title { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 800; color: var(--text-light-bg-heading); line-height: 1.28; margin-bottom: 0.85rem; letter-spacing: -0.02em; } .features__row-desc { font-size: clamp(0.95rem, 1.05vw, 1rem); color: var(--text-light-bg-muted); line-height: 1.65; margin-bottom: 1.6rem; font-weight: 400; }   .features__checklist { display: flex; flex-direction: column; gap: 0.85rem; } .features__check-item { display: flex; align-items: center; gap: 0.85rem; font-size: 0.92rem; font-weight: 600; color: var(--text-light-bg-body); } .features__check-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-tertiary-subtle); display: flex; align-items: center; justify-content: center; color: var(--brand-tertiary); } .features__check-icon svg { width: 14px; height: 14px; stroke: var(--brand-tertiary); stroke-width: 2.5; }   .features__visual-frame { position: relative; width: 100%; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.9); border-radius: 28px; padding: 2.2rem 1.5rem 1.8rem; box-shadow: 0 12px 35px -8px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(241, 245, 249, 0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: radial-gradient(circle at 50% 45%, rgba(var(--brand-primary-rgb), 0.05) 0%, transparent 68%); } .features__slider-container { width: 100%; max-width: 250px; position: relative; overflow: hidden; border-radius: 34px; background: var(--text-light-bg-heading); border: 6px solid var(--text-light-bg-heading); box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.35); } .features__slider-container::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 72px; height: 15px; background: var(--text-light-bg-heading); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 10; pointer-events: none; } .features__slider-track { display: flex; width: 100%; transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); } .features__slide { min-width: 100%; width: 100%; flex: 0 0 100%; flex-shrink: 0; aspect-ratio: 722 / 1600; position: relative; display: flex; flex-direction: column; background: var(--text-light-bg-heading); overflow: hidden; } .features__slide img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; background: var(--text-light-bg-heading); }   .features__slider-arrow { display: none !important; }   .features__frame-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 1.25rem; z-index: 2; } .features__frame-dot { width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-text-subtle); cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .features__frame-dot:hover { background-color: var(--text-light-bg-subtle); } .features__frame-dot.active { width: 26px; border-radius: 999px; background-color: var(--brand-primary); box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.35); }   @media (max-width: 1024px) { .features__rows { gap: 3.5rem; } .features__row, .features__row--reverse { grid-template-columns: 1fr; gap: 2.8rem; } .features__row--reverse .features__row-content { order: 1; } .features__row--reverse .features__row-visual { order: 2; } .features__visual-frame { padding: 1.8rem 1.2rem 1.5rem; } } @media (max-width: 640px) { .features__slider-container { max-width: 220px; border-width: 5px; border-radius: 28px; } } @media (max-width: 480px) { .features { padding-block: 3.5rem; } .features__header { padding-inline: 1rem; margin-bottom: 2rem; } .features__title { font-size: clamp(1.65rem, 6.5vw, 2.1rem); } .features__rows { padding-inline: 1rem; gap: 2.5rem; } .features__row-title { font-size: 1.35rem; } .features__checklist { gap: 0.65rem; } .features__check-item { font-size: 0.88rem; } .features__visual-frame { padding: 1.4rem 0.8rem 1.2rem; border-radius: 20px; } .features__slider-container { max-width: 200px; border-width: 4px; border-radius: 24px; } .features__slider-container::before { width: 55px; height: 12px; } }     .buddy-section { position: relative; background: var(--bg-dark); padding-block: 3.2rem 2.6rem; overflow: hidden; color: #ffffff; content-visibility: auto; contain-intrinsic-size: 1px 650px; }   .buddy-section::before { content: ''; position: absolute; top: -12%; left: 50%; transform: translateX(-50%); width: 680px; height: 300px; background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.12) 0%, transparent 70%); pointer-events: none; z-index: 1; } .buddy-section__header { text-align: center; max-width: 720px; margin: 0 auto 1.8rem; padding-inline: 1.5rem; position: relative; z-index: 2; } .buddy-section__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary-light); margin-top: 0; margin-bottom: 1.25rem; } .buddy-section__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; color: #ffffff; line-height: 1.2; margin-top: 0; margin-bottom: 0.85rem; letter-spacing: -0.025em; } .buddy-section__title em { font-style: italic; font-weight: 800; color: var(--brand-primary-light); } .buddy-section__subtitle { font-size: clamp(0.98rem, 1.1vw, 1.05rem); color: var(--text-light-bg-subtle); line-height: 1.62; font-weight: 400; margin: 0; }   .buddy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.15rem; max-width: 1240px; margin: 0 auto 1.5rem; padding-inline: 1.5rem; position: relative; z-index: 2; } .buddy-card { background: var(--bg-dark); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.35rem 1.25rem; display: flex; flex-direction: column; position: relative; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; } .buddy-card:hover { transform: translateY(-3px); border-color: rgba(var(--brand-primary-rgb), 0.35); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } .buddy-card__meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; } .buddy-card__step { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; color: var(--brand-primary-light); letter-spacing: 0.04em; } .buddy-card__tag { font-family: var(--font-heading); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-light-bg-subtle); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); padding: 0.18rem 0.5rem; border-radius: 6px; text-transform: uppercase; } .buddy-card__icon-box { width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--brand-primary-rgb), 0.12); border: 1px solid rgba(var(--brand-primary-rgb), 0.25); display: flex; align-items: center; justify-content: center; margin-bottom: 0.85rem; color: var(--brand-primary-light); flex-shrink: 0; } .buddy-card__icon-box svg { width: 18px; height: 18px; stroke: var(--brand-primary-light); } .buddy-card__title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--bg-light); line-height: 1.3; margin-bottom: 0.45rem; } .buddy-card__desc { font-size: 0.84rem; color: var(--text-light-bg-subtle); line-height: 1.55; margin: 0 0 1rem; flex: 1; } .buddy-card__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: auto; } .buddy-chip { font-size: 0.68rem; font-weight: 600; color: var(--brand-primary-lighter); background: rgba(var(--brand-primary-rgb), 0.1); border: 1px solid rgba(var(--brand-primary-rgb), 0.2); padding: 0.22rem 0.55rem; border-radius: 100px; white-space: nowrap; }   .buddy-status-bar { max-width: 1240px; margin: 0 auto; padding: 0.7rem 1.4rem; background: rgba(14, 23, 46, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 1.6rem; flex-wrap: wrap; position: relative; z-index: 2; } .buddy-status-item { display: flex; align-items: center; gap: 0.5rem; } .buddy-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand-tertiary); box-shadow: 0 0 8px rgba(16, 185, 129, 0.5); flex-shrink: 0; } .buddy-status-text { font-size: 0.78rem; font-weight: 500; color: var(--color-text-subtle); letter-spacing: 0.01em; } .buddy-status-divider { width: 1px; height: 12px; background: rgba(255, 255, 255, 0.12); }   @media (max-width: 1024px) { .buddy-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .buddy-status-bar { gap: 1rem; } } @media (max-width: 640px) { .buddy-section { padding-block: 2.2rem 1.8rem; } .buddy-grid { grid-template-columns: 1fr; gap: 0.9rem; } .buddy-card { padding: 1.2rem 1.1rem; } .buddy-status-bar { flex-direction: column; gap: 0.45rem; text-align: center; padding: 0.8rem 1rem; } .buddy-status-divider { display: none; } } @media (max-width: 480px) { .buddy-section { padding-block: 2rem 1.6rem; } .buddy-section__header { padding-inline: 1rem; margin-bottom: 1.4rem; } .buddy-section__title { font-size: clamp(1.65rem, 6.5vw, 2.1rem); } .buddy-grid { padding-inline: 1rem; gap: 0.8rem; } .buddy-card { padding: 1.15rem 1rem; border-radius: 14px; } .buddy-status-bar { margin-inline: 1rem; padding: 0.75rem 0.85rem; } }     .comparison-section { position: relative; background: var(--bg-light); padding-block: 5rem 4.5rem; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 1px 750px; } .comparison-section__header { text-align: center; max-width: 780px; margin: 0 auto 2.75rem; padding-inline: 1.5rem; position: relative; z-index: 2; } .comparison-section__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary); margin-top: 0; margin-bottom: 1.25rem; } .comparison-section__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.75rem); font-weight: 800; color: var(--text-light-bg-heading); line-height: 1.25; margin-top: 0; margin-bottom: 0.85rem; letter-spacing: -0.025em; } .comparison-section__title em { font-style: italic; font-weight: 800; color: var(--brand-primary); } .comparison-section__subtitle { font-size: 1.05rem; color: var(--text-light-bg-body); line-height: 1.6; margin: 0.5rem auto 0; max-width: 640px; }   .comparison-table-wrap { max-width: 1240px; margin: 0 auto; padding-inline: 1.5rem; position: relative; z-index: 2; overflow-x: auto; -webkit-overflow-scrolling: touch; } .comparison-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; background: #ffffff; border-radius: 20px; border: 1px solid var(--bg-light-border); box-shadow: 0 12px 36px rgba(var(--brand-primary-rgb), 0.06); overflow: hidden; }   .comparison-table thead tr:first-child th:first-child { border-top-left-radius: 20px; } .comparison-table thead tr:first-child th:last-child { border-top-right-radius: 20px; } .comparison-table tbody tr:last-child td:first-child { border-bottom-left-radius: 20px; } .comparison-table tbody tr:last-child td:last-child { border-bottom-right-radius: 20px; }   .comp-col-feature { width: 27%; min-width: 210px; } .comp-col-krutsha { width: 35%; min-width: 260px; } .comp-col-tuition { width: 19%; min-width: 170px; } .comp-col-chatbots { width: 19%; min-width: 170px; }   .comparison-table th { padding: 1.25rem 1.15rem; font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-light-bg-muted); background: var(--bg-light); border-bottom: 2px solid var(--bg-light-border); text-align: left; vertical-align: middle; }   .comparison-table th.highlight-col { background: var(--brand-primary-subtle); border-left: 2px solid var(--brand-primary-light); border-right: 2px solid var(--brand-primary-light); border-top: 3px solid var(--brand-primary); position: relative; } .comp-header-badge { display: inline-block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; color: #ffffff; background: var(--brand-primary); padding: 0.2rem 0.6rem; border-radius: 9999px; margin-bottom: 0.45rem; } .comp-header-brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: #1e3a8a; letter-spacing: -0.01em; } .comp-header-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: var(--brand-primary); color: #ffffff; border-radius: 7px; flex-shrink: 0; } .comp-header-icon svg { width: 13px; height: 13px; fill: currentColor; }   .comparison-table td { padding: 1.15rem 1.15rem; font-size: 0.88rem; border-bottom: 1px solid var(--bg-light-muted); vertical-align: middle; transition: background 0.15s ease; } .comparison-table tr:last-child td { border-bottom: none; } .comparison-table td.feature-title { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--text-light-bg-heading); line-height: 1.4; }   .comparison-table td.highlight-col { background: var(--brand-primary-subtle); border-left: 2px solid var(--brand-primary-light); border-right: 2px solid var(--brand-primary-light); } .comparison-table tbody tr:last-child td.highlight-col { border-bottom: 2px solid var(--brand-primary-light); }   .comparison-table tbody tr:hover td { background: var(--bg-light); } .comparison-table tbody tr:hover td.highlight-col { background: var(--brand-primary-subtle); }   .comp-val { display: flex; align-items: flex-start; gap: 0.7rem; } .comp-val--winner { color: var(--text-light-bg-heading); } .comp-val--winner strong { display: block; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: #1e3a8a; line-height: 1.3; margin-bottom: 3px; } .comp-val--winner span { display: block; font-size: 0.8rem; color: var(--text-light-bg-body); line-height: 1.45; } .comp-val--loser { color: var(--text-light-bg-muted); font-size: 0.84rem; line-height: 1.45; align-items: center; }   .comp-icon { width: 22px; height: 22px; min-width: 22px; min-height: 22px; display: inline-block; flex-shrink: 0; margin-top: 2px; } .comp-icon--check { filter: drop-shadow(0 1px 2px rgba(22, 163, 74, 0.15)); } .comp-icon--cross { filter: drop-shadow(0 1px 2px rgba(148, 163, 184, 0.12)); }   .comparison-scroll-hint { display: none; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--text-light-bg-body); margin-bottom: 1rem; text-align: center; background: #ffffff; padding: 0.45rem 1rem; border-radius: 9999px; width: fit-content; margin-inline: auto; border: 1px solid var(--bg-light-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .comparison-scroll-hint svg { width: 16px; height: 16px; stroke: var(--brand-primary); stroke-width: 2.2; flex-shrink: 0; }   @media (max-width: 960px) { .comparison-section { padding-block: 4rem 3.5rem; } .comparison-scroll-hint { display: flex; } } @media (max-width: 480px) { .comparison-section { padding-block: 3rem 2.5rem; } .comparison-section__header { padding-inline: 1rem; margin-bottom: 1.75rem; } .comparison-section__title { font-size: clamp(1.75rem, 6.8vw, 2.2rem); } .comparison-section__subtitle { font-size: 0.95rem; } .comparison-table-wrap { padding-inline: 1rem; } .comparison-table { min-width: 820px; border-radius: 16px; } .comparison-table thead tr:first-child th:first-child { border-top-left-radius: 16px; } .comparison-table thead tr:first-child th:last-child { border-top-right-radius: 16px; } .comparison-table tbody tr:last-child td:first-child { border-bottom-left-radius: 16px; } .comparison-table tbody tr:last-child td:last-child { border-bottom-right-radius: 16px; } .comparison-table th, .comparison-table td { padding: 0.95rem 0.9rem; } }     .partners-section { position: relative; background: var(--bg-light); padding-block: 6rem; overflow: hidden; content-visibility: auto; contain-intrinsic-size: 1px 450px; } .partners-section__header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; padding-inline: 1.5rem; } .partners-section__label { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-primary); margin-top: 0; margin-bottom: 1.25rem; } .partners-section__title { font-family: var(--font-heading); font-size: clamp(2.2rem, 3.8vw, 3.2rem); font-weight: 800; color: var(--text-light-bg-heading); line-height: 1.15; margin-top: 0; margin-bottom: 1rem; letter-spacing: -0.025em; } .partners-section__title em { font-style: italic; font-weight: 800; color: var(--brand-primary); } .partners-section__subtitle { font-size: 1.05rem; color: var(--text-light-bg-muted); line-height: 1.6; font-weight: 400; }   .partners-tabs { display: flex; justify-content: center; gap: 0.5rem; background: #ffffff; padding: 0.4rem; border-radius: 9999px; max-width: max-content; margin: 0 auto 3.5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); border: 1px solid var(--bg-light-muted); } .partners-tab-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.6rem; border-radius: 9999px; font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; color: var(--text-light-bg-muted); background: transparent; border: none; cursor: pointer; transition: all 0.25s ease; } .partners-tab-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; } .partners-tab-btn.active { background: var(--brand-primary); color: #ffffff; box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.3); }   .partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 1240px; margin: 0 auto; padding-inline: 1.5rem; } .partners-card { background: #ffffff; border-radius: 20px; padding: 2.2rem 2.4rem; border: 1px solid var(--bg-light-border); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); display: grid; grid-template-columns: 140px 1fr; gap: 2rem; align-items: center; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .partners-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(var(--brand-primary-rgb), 0.08); border-color: var(--color-text-subtle); }   .partners-card__logo-box { width: 140px; height: 140px; border-radius: 16px; background: #ffffff; border: 1px solid var(--bg-light-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); display: flex; align-items: center; justify-content: center; padding: 1.2rem; overflow: hidden; } .partners-card__logo-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; transition: transform 0.25s ease; } .partners-card:hover .partners-card__logo-img { transform: scale(1.04); } .partners-card__logo-text { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text-light-bg-heading); text-align: center; line-height: 1.2; } .partners-card__content { display: flex; flex-direction: column; } .partners-card__name { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; color: var(--text-light-bg-heading); margin-bottom: 0.35rem; line-height: 1.25; } .partners-card__name a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .partners-card__name a:hover { color: var(--brand-primary); } .partners-card__category { font-size: 0.88rem; font-weight: 600; color: var(--brand-primary); margin-bottom: 0.85rem; } .partners-card__desc { font-size: 0.92rem; color: var(--text-light-bg-muted); line-height: 1.65; margin: 0; } @media (max-width: 900px) { .partners-grid { grid-template-columns: 1fr; } } @media (max-width: 540px) { .partners-card { grid-template-columns: 1fr; } .partners-card__logo-box { width: 100%; height: 100px; } } @media (max-width: 480px) { .partners-section { padding-block: 3.5rem; } .partners-section__header { padding-inline: 1rem; margin-bottom: 2rem; } .partners-section__title { font-size: clamp(1.65rem, 6.5vw, 2.1rem); } .partners-tabs { width: 100%; max-width: 100%; margin-bottom: 2rem; justify-content: stretch; } .partners-tab-btn { flex: 1; justify-content: center; padding: 0.6rem 0.8rem; font-size: 0.84rem; } .partners-grid { padding-inline: 1rem; gap: 1.2rem; } .partners-card { padding: 1.4rem 1.1rem; gap: 1rem; border-radius: 16px; } .partners-card__logo-box { height: 80px; } .partners-card__name { font-size: 1.25rem; } }     .resources-section { position: relative; background: var(--bg-light); padding-block: 3.5rem 3rem; overflow: hidden; scroll-margin-top: 5rem; } .resources-container { max-width: 1240px; margin: 0 auto; padding-inline: 1.5rem; position: relative; z-index: 2; } .resources-section__header { text-align: center; max-width: 700px; margin: 0 auto 2.2rem; padding-inline: 1.5rem; } .resources-section__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-primary); margin-top: 0; margin-bottom: 1.25rem; } .resources-section__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; color: var(--text-light-bg-heading); line-height: 1.2; margin-top: 0; margin-bottom: 0.85rem; letter-spacing: -0.025em; } .resources-section__title em { font-style: italic; font-weight: 800; color: var(--brand-primary); } .resources-section__subtitle { font-size: clamp(0.98rem, 1.1vw, 1.05rem); color: var(--text-light-bg-muted); line-height: 1.62; font-weight: 400; margin: 0; }   .resources-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }   .resources-card { background: #ffffff; border: 1px solid var(--bg-light-border); border-radius: 20px; padding: 1.8rem 1.8rem; box-shadow: 0 10px 30px rgba(var(--brand-primary-rgb), 0.05); display: flex; flex-direction: column; position: relative; z-index: 2; } .resources-card__badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.26rem 0.7rem; border-radius: 9999px; background: var(--brand-primary-subtle); border: 1px solid var(--brand-primary-lighter); color: var(--brand-primary); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 0.75rem; width: fit-content; } .resources-card__badge svg { width: 14px; height: 14px; stroke: var(--brand-primary); } .resources-card__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text-light-bg-heading); margin-bottom: 0.35rem; line-height: 1.25; } .resources-card__desc { font-size: 0.86rem; color: var(--text-light-bg-muted); line-height: 1.5; margin: 0 0 1.1rem; }   .resources-form { display: flex; flex-direction: column; gap: 0.95rem; } .resources-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem 0.9rem; } .resources-form__group { display: flex; flex-direction: column; gap: 0.32rem; } .resources-form__group--full { grid-column: 1 / -1; } .resources-form__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-light-bg-body); } .resources-form__input, .resources-form__select { width: 100%; height: 42px; padding-inline: 0.85rem; border-radius: 10px; border: 1.2px solid var(--color-text-subtle); background: var(--bg-light); font-family: var(--font-body); font-size: 0.85rem; color: var(--text-light-bg-heading); outline: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .resources-form__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 14px; padding-right: 2rem; cursor: pointer; } .resources-form__input:focus, .resources-form__select:focus { background: #ffffff; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12); } .resources-form__input::placeholder { color: var(--text-light-bg-subtle); } .resources-form__submit { width: 100%; height: 44px; border-radius: 10px; background: var(--brand-primary); color: #ffffff; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.25s ease; box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.25); margin-top: 0.25rem; } .resources-form__submit:hover { background: var(--brand-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.35); } .resources-form__submit svg { width: 16px; height: 16px; stroke: currentColor; } .resources-form-trust { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-light-bg-muted); font-weight: 500; text-align: center; } .resources-form-trust svg { width: 13px; height: 13px; flex-shrink: 0; }   .resources-split-faq { width: 100%; scroll-margin-top: 5rem; } .resources-faq__header { margin-bottom: 0.95rem; } .resources-faq__title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--text-light-bg-heading); margin-bottom: 0.25rem; line-height: 1.25; } .resources-faq__subtitle { font-size: 0.86rem; color: var(--text-light-bg-muted); line-height: 1.45; margin: 0; } .faq-list { display: flex; flex-direction: column; gap: 0.6rem; } .faq-card { background: #ffffff; border-radius: 14px; border: 1px solid var(--bg-light-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq-card:hover { border-color: var(--color-text-subtle); box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.05); } .faq-card.open { border-color: var(--brand-primary-lighter); box-shadow: 0 6px 18px rgba(var(--brand-primary-rgb), 0.08); } .faq-card__trigger { width: 100%; padding: 0.9rem 1.2rem; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; cursor: pointer; text-align: left; gap: 0.75rem; } .faq-card__question { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--text-light-bg-heading); line-height: 1.35; } .faq-card__chevron { width: 16px; height: 16px; color: var(--text-light-bg-subtle); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease; flex-shrink: 0; } .faq-card__chevron svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; } .faq-card.open .faq-card__chevron { transform: rotate(180deg); color: var(--brand-primary); } .faq-card__content { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease; padding-inline: 1.2rem; } .faq-card.open .faq-card__content { max-height: 250px; padding-bottom: 1rem; } .faq-card__body { font-size: 0.84rem; color: var(--text-light-bg-muted); line-height: 1.55; margin: 0; }   @media (max-width: 1024px) { .resources-split-grid { grid-template-columns: 1fr; gap: 2rem; } } @media (max-width: 640px) { .resources-section { padding-block: 2.5rem 2rem; } .resources-card { padding: 1.4rem 1.2rem; } .resources-form__grid { grid-template-columns: 1fr; gap: 0.75rem; } .faq-card__trigger { padding: 0.85rem 1rem; } .faq-card__question { font-size: 0.88rem; } } @media (max-width: 480px) { .resources-section { padding-block: 2.2rem 1.8rem; } .resources-container { padding-inline: 1rem; } .resources-section__header { padding-inline: 1rem; margin-bottom: 1.6rem; } .resources-section__title { font-size: clamp(1.65rem, 6.5vw, 2.1rem); } .resources-card { padding: 1.25rem 1rem; border-radius: 16px; } .resources-card__title { font-size: 1.15rem; } .resources-form__input, .resources-form__select { height: 40px; font-size: 0.84rem; } .resources-faq__title { font-size: 1.15rem; } .faq-card__trigger { padding: 0.8rem 0.9rem; } .faq-card__content { padding-inline: 0.9rem; } }     .faq-list { display: flex; flex-direction: column; gap: 0.6rem; } .faq-card { background: #ffffff; border-radius: 14px; border: 1px solid var(--bg-light-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .faq-card:hover { border-color: var(--color-text-subtle); box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.05); } .faq-card.open { border-color: var(--brand-primary-lighter); box-shadow: 0 6px 18px rgba(var(--brand-primary-rgb), 0.08); } .faq-card__trigger { width: 100%; padding: 0.9rem 1.2rem; display: flex; align-items: center; justify-content: space-between; background: transparent; border: none; cursor: pointer; text-align: left; gap: 0.75rem; } .faq-card__question { font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; color: var(--text-light-bg-heading); line-height: 1.35; } .faq-card__chevron { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-light-bg-subtle); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s ease; } .faq-card__chevron svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; } .faq-card.open .faq-card__chevron { transform: rotate(180deg); color: var(--brand-primary); } .faq-card__content { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease; padding-inline: 1.2rem; } .faq-card.open .faq-card__content { max-height: 250px; padding-bottom: 1rem; } .faq-card__body { font-size: 0.84rem; color: var(--text-light-bg-muted); line-height: 1.55; margin: 0; } @media (max-width: 640px) { .faq-card__trigger { padding: 0.85rem 1rem; } .faq-card__question { font-size: 0.88rem; } }     .pricing-hero { background: linear-gradient(180deg, #090a0f 0%, #10121a 100%); color: #ffffff; padding: 4.5rem 0 7rem 0; text-align: center; position: relative; overflow: hidden; } .pricing-hero::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 700px; height: 350px; background: radial-gradient(circle, var(--brand-primary-glow) 0%, transparent 70%); pointer-events: none; } .pricing-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; background: rgba(var(--brand-primary-rgb), 0.18); color: var(--brand-primary-light); border: 1px solid var(--brand-primary-border); border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.2rem; } .pricing-title { font-family: var(--font-heading); font-size: clamp(2.3rem, 4.5vw, 3.6rem); font-weight: 800; color: #ffffff; line-height: 1.15; margin: 0 0 1rem 0; letter-spacing: -0.025em; } .pricing-title em { font-style: normal; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pricing-subtitle { font-size: 1.1rem; color: var(--text-light-bg-subtle); max-width: 640px; margin: 0 auto 2.5rem auto; line-height: 1.6; }   .billing-toggle-wrap { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.07); padding: 0.35rem; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.12); gap: 0.35rem; } .billing-btn { background: transparent; border: none; color: var(--color-text-subtle); padding: 0.6rem 1.25rem; border-radius: var(--radius-pill); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); display: flex; align-items: center; gap: 0.4rem; } .billing-btn.active { background: #ffffff; color: var(--bg-dark); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .billing-discount { background: var(--brand-tertiary); color: #ffffff; font-size: 0.68rem; font-weight: 800; padding: 0.15rem 0.45rem; border-radius: var(--radius-pill); letter-spacing: 0.04em; }   .pricing-section { padding: 0 0 5rem 0; margin-top: -3.5rem; position: relative; z-index: 2; } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: stretch; } .pricing-card { background: #ffffff; border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); padding: 2.5rem 2rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform var(--transition-medium), box-shadow var(--transition-medium); position: relative; } .pricing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .pricing-card--popular { border: 2px solid var(--brand-primary); box-shadow: 0 12px 32px var(--brand-primary-glow); transform: scale(1.03); } .pricing-card--popular:hover { transform: scale(1.03) translateY(-4px); box-shadow: 0 16px 40px var(--brand-primary-glow); } .pricing-popular-pill { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--brand-gradient); color: #ffffff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); text-transform: uppercase; box-shadow: 0 4px 10px var(--brand-primary-glow); } .pricing-plan-name { font-size: 1.35rem; font-weight: 800; color: var(--color-text-main); margin: 0 0 0.5rem 0; } .pricing-plan-desc { font-size: 0.9rem; color: var(--color-text-muted); margin: 0 0 1.5rem 0; min-height: 44px; line-height: 1.5; } .pricing-price-box { display: flex; align-items: baseline; gap: 0.25rem; padding-bottom: 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border-light); } .pricing-currency { font-size: 1.5rem; font-weight: 700; color: var(--color-text-main); } .pricing-amount { font-family: var(--font-heading); font-size: 3rem; font-weight: 800; color: var(--color-text-main); line-height: 1; } .pricing-cycle { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 500; } .pricing-features-list { list-style: none; padding: 0; margin: 0 0 2rem 0; flex-grow: 1; display: flex; flex-direction: column; gap: 0.9rem; } .pricing-feature-item { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.92rem; color: var(--color-text-main); line-height: 1.45; } .pricing-feature-item svg { width: 18px; height: 18px; color: var(--color-success); flex-shrink: 0; margin-top: 2px; } .pricing-card-btn { width: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1.5rem; border-radius: var(--radius-md); font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: all var(--transition-fast); cursor: pointer; box-sizing: border-box; } .pricing-card-btn--free { background: var(--bg-light-muted); color: var(--color-text-main); border: 1px solid var(--color-border-light); } .pricing-card-btn--free:hover { background: var(--bg-light-border); } .pricing-card-btn--popular { background: var(--brand-primary); color: #ffffff; border: 1px solid var(--brand-primary); box-shadow: 0 4px 14px var(--brand-primary-glow); } .pricing-card-btn--popular:hover { background: var(--brand-primary-hover); transform: translateY(-1px); } .pricing-card-btn--proplus { background: var(--bg-dark); color: #ffffff; border: 1px solid var(--bg-dark); } .pricing-card-btn--proplus:hover { background: var(--text-light-bg-heading); }   .matrix-section { padding: 3rem 0 6rem 0; background: #ffffff; } .section-header { text-align: center; margin-bottom: 3.5rem; } .section-badge { display: inline-block; font-size: 0.78rem; font-weight: 800; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.08); padding: 0.35rem 0.85rem; border-radius: var(--radius-pill); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.8rem; } .section-title { font-family: var(--font-heading); font-size: clamp(1.9rem, 3.5vw, 2.75rem); font-weight: 800; color: var(--color-text-main); margin: 0 0 0.8rem 0; letter-spacing: -0.02em; } .section-title em { font-style: normal; color: var(--brand-primary); } .section-subtitle { font-size: 1.05rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; } .matrix-table-wrap { overflow-x: auto; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .matrix-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.95rem; } .matrix-table th, .matrix-table td { padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--color-border-light); } .matrix-table th { background: var(--bg-light); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-muted); } .matrix-table th.col-popular { background: var(--brand-primary-subtle); color: var(--brand-primary); } .matrix-table tr:hover td { background: #fbfcfe; } .matrix-check { width: 20px; height: 20px; color: var(--color-success); } .matrix-cross { width: 20px; height: 20px; color: var(--color-text-subtle); } @media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .pricing-card--popular { transform: none; } .pricing-card--popular:hover { transform: translateY(-4px); } } @media (max-width: 640px) { .pricing-hero { padding: calc(var(--header-height) + 1.5rem) 1rem 4.5rem 1rem; } .pricing-title { font-size: clamp(1.85rem, 7vw, 2.6rem); } .pricing-subtitle { font-size: 0.98rem; margin-bottom: 1.75rem; } .billing-toggle-wrap { display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 360px; margin-inline: auto; padding: 0.25rem; gap: 0.25rem; } .billing-btn { flex: 1 1 auto; padding: 0.5rem 0.65rem; font-size: 0.82rem; justify-content: center; text-align: center; } .billing-discount { font-size: 0.62rem; padding: 0.12rem 0.35rem; } .matrix-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); } .matrix-table { min-width: 520px; } .matrix-table th, .matrix-table td { padding: 0.85rem 0.9rem; font-size: 0.86rem; } } @media (max-width: 380px) { .billing-toggle-wrap { border-radius: var(--radius-lg); } .billing-btn { font-size: 0.76rem; padding: 0.45rem 0.5rem; } }   .pricing-card-btn--free { background: var(--btn-light-bg) !important; color: var(--btn-light-text) !important; border: 1.5px solid var(--btn-light-border) !important; } .pricing-card-btn--free:hover { background: var(--btn-light-hover-bg) !important; color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; } .pricing-card-btn--popular { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; box-shadow: var(--btn-primary-shadow) !important; border: 1.5px solid var(--btn-primary-border) !important; } .pricing-card-btn--popular:hover { background: var(--btn-primary-hover-bg) !important; color: var(--btn-primary-hover-text) !important; box-shadow: var(--btn-primary-hover-shadow) !important; } .pricing-card-btn--proplus { background: var(--btn-dark-bg) !important; color: var(--btn-dark-text) !important; box-shadow: 0 4px 14px rgba(11, 15, 30, 0.22) !important; border: 1.5px solid var(--btn-dark-bg) !important; } .pricing-card-btn--proplus:hover { background: var(--btn-dark-hover-bg) !important; border-color: var(--btn-dark-hover-bg) !important; color: var(--btn-dark-hover-text) !important; box-shadow: 0 6px 20px rgba(11, 15, 30, 0.35) !important; transform: translateY(-2px); }     .faq-hero { background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-surface) 100%); color: #ffffff; padding: 4.5rem 0 6rem 0; text-align: center; position: relative; overflow: hidden; } .faq-hero::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 700px; height: 350px; background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.25) 0%, transparent 70%); pointer-events: none; } .faq-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.9rem; background: rgba(var(--brand-primary-rgb), 0.2); color: var(--brand-primary-lighter); border: 1px solid rgba(var(--brand-primary-rgb), 0.3); border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.2rem; } .faq-hero__title { font-family: var(--font-heading); font-size: clamp(2.3rem, 4.5vw, 3.6rem); font-weight: 800; color: #ffffff; line-height: 1.15; margin: 0 0 1rem 0; letter-spacing: -0.025em; } .faq-hero__title em { font-style: normal; background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary-lighter) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .faq-hero__subtitle { font-size: 1.1rem; color: var(--text-light-bg-subtle); max-width: 620px; margin: 0 auto 2.5rem auto; line-height: 1.6; }   .faq-search-box { max-width: 580px; margin: 0 auto; position: relative; } .faq-search-icon { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-light-bg-subtle); pointer-events: none; } .faq-search-input { width: 100%; padding: 1.1rem 1.4rem 1.1rem 3.2rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-pill); color: #ffffff; font-size: 1rem; outline: none; backdrop-filter: blur(8px); transition: all var(--transition-fast); } .faq-search-input:focus { background: rgba(255, 255, 255, 0.14); border-color: var(--brand-primary-light); box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.25); } .faq-search-input::placeholder { color: var(--text-light-bg-subtle); }   .faq-filter-section { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; padding: 2.5rem 0 2rem 0; } .faq-filter-pill { background: #ffffff; border: 1px solid var(--color-border-light); color: var(--color-text-muted); padding: 0.55rem 1.25rem; border-radius: var(--radius-pill); font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all var(--transition-fast); } .faq-filter-pill:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .faq-filter-pill.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #ffffff; box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.25); }   .faq-main-section { padding: 0 0 6rem 0; max-width: 860px; margin-inline: auto; } .faq-accordion-list { display: flex; flex-direction: column; gap: 1rem; } .faq-item { background: #ffffff; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .faq-item:hover { border-color: rgba(var(--brand-primary-rgb), 0.35); } .faq-item.open { border-color: var(--brand-primary); box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.08); } .faq-question-btn { width: 100%; padding: 1.35rem 1.6rem; background: none; border: none; text-align: left; font-size: 1.05rem; font-weight: 700; color: var(--color-text-main); display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; cursor: pointer; transition: color var(--transition-fast); } .faq-question-btn:hover { color: var(--brand-primary); } .faq-chevron { width: 20px; height: 20px; color: var(--text-light-bg-subtle); flex-shrink: 0; transition: transform var(--transition-medium), color var(--transition-fast); } .faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--brand-primary); } .faq-answer-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .faq-item.open .faq-answer-panel { max-height: 800px; } .faq-answer-text { padding: 0 1.6rem 1.5rem 1.6rem; font-size: 0.96rem; color: var(--text-light-bg-body); line-height: 1.65; margin: 0; }   .faq-help-card { margin-top: 3.5rem; background: linear-gradient(135deg, var(--brand-primary-subtle) 0%, #f0fdf4 100%); border: 1px solid var(--brand-primary-lighter); border-radius: var(--radius-xl); padding: 2.5rem 2rem; text-align: center; } .faq-help-card h3 { font-size: 1.3rem; font-weight: 800; color: var(--color-text-main); margin: 0 0 0.5rem 0; } .faq-help-card p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0 0 1.5rem 0; } .faq-help-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; } @media (max-width: 768px) { .faq-hero { padding: calc(var(--header-height) + 1.5rem) 1rem 4rem 1rem; } .faq-hero__title { font-size: clamp(1.85rem, 6.5vw, 2.6rem); } .faq-hero__subtitle { font-size: 0.98rem; margin-bottom: 1.75rem; } .faq-filter-section { padding: 1.75rem 1rem 1.25rem 1rem; gap: 0.45rem; } .faq-filter-pill { padding: 0.45rem 0.95rem; font-size: 0.82rem; } .faq-main-section { padding: 0 1rem 4rem 1rem; } .faq-question-btn { padding: 1.15rem 1.2rem; font-size: 0.98rem; } .faq-answer-text { padding: 0 1.2rem 1.25rem 1.2rem; font-size: 0.92rem; } .faq-help-card { padding: 1.75rem 1.25rem; margin-top: 2.5rem; } } @media (max-width: 480px) { .faq-search-input { padding: 0.95rem 1.2rem 0.95rem 2.75rem; font-size: 0.92rem; } .faq-search-icon { left: 1rem; width: 17px; height: 17px; } .faq-question-btn { padding: 1rem 1rem; font-size: 0.92rem; } .faq-answer-text { padding: 0 1rem 1.15rem 1rem; font-size: 0.88rem; } }   .direct-answer-capsule { background: linear-gradient(135deg, #ffffff 0%, var(--brand-primary-subtle) 100%); border: 1px solid var(--brand-primary-border); border-left: 5px solid var(--brand-primary); border-radius: 12px; padding: 1.5rem 1.75rem; margin-bottom: 2rem; box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), 0.08); } .direct-answer-capsule__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 800; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .direct-answer-capsule p { font-size: 1.05rem; line-height: 1.75; color: var(--text-light-bg-heading); margin: 0; } .key-takeaways-card { background: var(--bg-light); border: 1px solid var(--bg-light-border); border-radius: 14px; padding: 1.75rem 2rem; margin: 2rem 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .key-takeaways-card h3 { margin-top: 0; margin-bottom: 1rem; color: var(--text-light-bg-heading); font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; } .key-takeaways-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; } .key-takeaways-list li { position: relative; padding-left: 1.75rem; font-size: 1rem; line-height: 1.65; color: var(--text-light-bg-body); } .key-takeaways-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--brand-tertiary-hover); font-weight: 800; font-size: 1.1rem; } .edu-table-responsive { overflow-x: auto; margin: 1.75rem 0; border-radius: 10px; border: 1px solid var(--bg-light-border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02); } .edu-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; text-align: left; background: #ffffff; } .edu-table th { background: var(--bg-light-muted); color: var(--text-light-bg-heading); font-weight: 700; padding: 0.9rem 1.15rem; border-bottom: 2px solid var(--color-text-subtle); white-space: nowrap; } .edu-table td { padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--bg-light-border); color: var(--text-light-bg-body); vertical-align: middle; } .edu-table tr:last-child td { border-bottom: none; } .edu-table tr:hover td { background: var(--bg-light); } .identity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; margin: 1.75rem 0; } .identity-card { background: #ffffff; border: 1px solid var(--bg-light-border); border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); border-top: 4px solid var(--brand-primary, var(--brand-primary)); transition: transform 0.2s ease, box-shadow 0.2s ease; } .identity-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--brand-primary-rgb), 0.12); } .identity-card__tag { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--brand-primary, var(--brand-primary)); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; } .identity-card__formula { font-size: 1.2rem; font-weight: 700; color: var(--text-light-bg-heading); margin-bottom: 0.5rem; } .identity-card__desc { font-size: 0.9rem; color: var(--text-light-bg-muted); line-height: 1.5; margin: 0; } .example-box { background: #ffffff; border: 1px solid var(--bg-light-border); border-radius: 12px; padding: 1.5rem 1.75rem; margin: 1.75rem 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); } .example-box__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--bg-light-muted); } .example-box__badge { font-size: 0.78rem; font-weight: 800; padding: 0.25rem 0.6rem; border-radius: 6px; background: var(--brand-primary-subtle); color: var(--brand-primary); text-transform: uppercase; } .example-box__question { font-weight: 700; color: var(--text-light-bg-heading); font-size: 1.05rem; margin-bottom: 1rem; } .example-box__solution { background: var(--bg-light); border-radius: 8px; padding: 1.2rem 1.4rem; border-left: 3px solid var(--brand-primary-light); font-size: 0.98rem; line-height: 1.75; color: var(--text-light-bg-heading); } .pitfall-box { background: #fff5f5; border: 1px solid #fed7d7; border-left: 4px solid #e53e3e; border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; } .pitfall-box h4 { color: #c53030; margin-top: 0; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .faq-accordion { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; } .faq-accordion-item { background: #ffffff; border: 1px solid var(--bg-light-border); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); } .faq-accordion-item summary { padding: 1.15rem 1.4rem; font-weight: 700; color: var(--text-light-bg-heading); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: var(--bg-light); user-select: none; font-size: 1.02rem; } .faq-accordion-item summary::-webkit-details-marker { display: none; } .faq-accordion-item summary::after { content: "＋"; font-size: 1.2rem; color: var(--text-light-bg-muted); font-weight: 400; transition: transform 0.2s ease; } .faq-accordion-item[open] summary::after { content: "−"; } .faq-accordion-item .faq-answer { padding: 1.25rem 1.4rem; color: var(--text-light-bg-body); line-height: 1.7; font-size: 0.98rem; background: #ffffff; border-top: 1px solid var(--bg-light-muted); }     mjx-container[display="true"], mjx-container[jax="CHTML"][display="true"], mjx-container[jax="SVG"][display="true"], .MathJax_Display { max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; display: block !important; margin: 1.25rem auto !important; padding-block: 0.35rem !important; box-sizing: border-box !important; text-align: center; }   mjx-container:not([display="true"]), mjx-container[jax="CHTML"]:not([display="true"]), mjx-container[jax="SVG"]:not([display="true"]), .MathJax:not(.MathJax_Display) { display: inline-block !important; max-width: 100% !important; overflow-x: visible !important; overflow-y: visible !important; vertical-align: -0.22ex !important; white-space: normal !important; line-height: normal !important; margin: 0 0.08em !important; padding: 0 !important; } @media (max-width: 820px) { .chapter-reader-layout { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; padding: 1.5rem 1rem 3.5rem 1rem !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .chapter-reader-sidebar { position: static !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 1.15rem 1rem !important; border-radius: var(--radius-md) !important; background: var(--bg-light) !important; } .chapter-content-body { padding: 1.5rem 1.15rem !important; border-radius: var(--radius-lg) !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; min-width: 0 !important; overflow-x: hidden !important; } .identity-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .direct-answer-capsule { padding: 1.25rem 1.15rem !important; margin-bottom: 1.5rem !important; } .key-takeaways-card { padding: 1.25rem 1.15rem !important; margin: 1.5rem 0 !important; } .example-box { padding: 1.15rem 1rem !important; } .example-box__solution { padding: 1rem 0.9rem !important; } } @media (max-width: 480px) { .chapter-reader-layout { padding: 1rem 0.6rem 3rem 0.6rem !important; gap: 1.25rem !important; } .chapter-content-body { padding: 1.25rem 0.75rem !important; border-radius: var(--radius-md) !important; } .direct-answer-capsule, .key-takeaways-card, .example-box { padding: 1rem 0.85rem !important; } .key-takeaways-list li { padding-left: 1.5rem !important; font-size: 0.92rem !important; } .pitfall-box { padding: 1rem 0.85rem !important; } .faq-accordion-item summary { padding: 0.9rem 0.85rem !important; font-size: 0.94rem !important; } .faq-accordion-item .faq-answer { padding: 0.9rem 0.85rem !important; font-size: 0.92rem !important; } }   .cta-banner { position: relative; background: #060b18; padding-block: 3.5rem; overflow: hidden; color: #ffffff; display: block; } .cta-banner__container { max-width: 1140px; margin: 0 auto; padding-inline: 1.5rem; position: relative; z-index: 2; } .cta-card { background: linear-gradient(145deg, #10121a 0%, #08090d 100%); border: 1px solid var(--brand-primary-border); border-radius: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); overflow: hidden; position: relative; width: 100%; max-width: 100%; box-sizing: border-box; opacity: 1 !important; transform: none !important; visibility: visible !important; } .cta-card__grid { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: 3rem; align-items: center; padding: 2.75rem 3.25rem; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .cta-card__content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .cta-card__badge { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), 0.12); border: 1px solid rgba(var(--brand-primary-rgb), 0.3); border-radius: 9999px; padding: 0.35rem 0.95rem; margin-top: 0; margin-bottom: 1.25rem; text-transform: uppercase; max-width: 100%; box-sizing: border-box; } .cta-card__title { font-family: var(--font-heading); font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; color: #ffffff; line-height: 1.2; margin-top: 0; margin-bottom: 0.85rem; letter-spacing: -0.025em; word-break: break-word; overflow-wrap: break-word; max-width: 100%; } .cta-card__title em { font-style: italic; font-weight: 800; color: var(--brand-primary); } .cta-card__description { font-size: clamp(0.98rem, 1.1vw, 1.05rem); color: #94a3b8; line-height: 1.62; margin-bottom: 1.6rem; max-width: 500px; font-weight: 400; word-break: break-word; overflow-wrap: break-word; } .cta-card__actions { display: flex; align-items: center; margin-bottom: 1.6rem; max-width: 100%; } .cta-card__play-link { display: inline-flex; align-items: center; text-decoration: none; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease; max-width: 100%; } .cta-card__play-link:hover { transform: translateY(-2px); filter: brightness(1.08); } .cta-play-badge-img { height: 52px; width: auto; max-width: 100%; display: block; border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .cta-card__trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(0.6rem, 1.2vw, 1.2rem); width: 100%; max-width: 100%; } .cta-card__trust-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: clamp(0.74rem, 0.9vw, 0.84rem); color: #94a3b8; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .cta-card__trust-item svg { width: 14px; height: 14px; color: var(--brand-primary); stroke: var(--brand-primary); flex-shrink: 0; } .cta-card__visual { display: flex; justify-content: center; align-items: center; position: relative; } .cta-card__visual-glow { position: absolute; width: 250px; height: 250px; background: radial-gradient(circle, rgba(var(--brand-primary-rgb), 0.35) 0%, transparent 70%); border-radius: 50%; filter: blur(45px); pointer-events: none; z-index: 1; } .cta-phone-container { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 2; } .cta-phone-frame { width: 200px; height: 443px; background: #090a0f; border-radius: 32px; border: 6px solid #1a1a24; box-shadow: 0 25px 55px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 35px rgba(var(--brand-primary-rgb), 0.22); overflow: hidden; position: relative; } .cta-phone-frame__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 65px; height: 14px; background: #090a0f; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 25; display: flex; align-items: center; justify-content: center; pointer-events: none; } .cta-phone-frame__camera { width: 5px; height: 5px; border-radius: 50%; background: #1a1a24; box-shadow: inset 0 0 2px rgba(var(--brand-primary-rgb), 0.6); } .cta-slider-track { display: flex; width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); } .cta-slide { flex: 0 0 100%; min-width: 100%; width: 100%; height: 100%; position: relative; background: #090a0f; overflow: hidden; } .cta-slide__img { width: 100%; height: 100%; aspect-ratio: 722 / 1600; object-fit: cover; object-position: top center; display: block; background: #090a0f; } .cta-phone-frame__glare { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 45%); pointer-events: none; z-index: 12; }   .cta-slider-arrow, .features__slider-arrow { display: none !important; } .cta-phone-dots { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 1rem; z-index: 2; } .cta-phone-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .cta-phone-dot:hover { background: rgba(255, 255, 255, 0.6); } .cta-phone-dot.active { width: 20px; border-radius: 999px; background: var(--brand-primary); box-shadow: 0 0 10px rgba(var(--brand-primary-rgb), 0.5); } @media (max-width: 900px) { .cta-card__grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; padding: 2.2rem 2rem; text-align: center; } .cta-card__content { align-items: center; text-align: center; } .cta-card__description { max-width: 100%; } .cta-card__actions { justify-content: center; } .cta-card__trust-row { justify-content: center; flex-wrap: wrap; } .cta-phone-frame { width: 185px; height: 410px; } } @media (max-width: 640px) { .cta-banner { padding-block: 2.2rem; } .cta-banner__container { padding-inline: 1rem; } .cta-card { border-radius: 18px; } .cta-card__grid { grid-template-columns: minmax(0, 1fr); padding: 1.6rem 1rem; gap: 1.5rem; } .cta-card__title { font-size: clamp(1.35rem, 5.8vw, 1.75rem); text-align: center; width: 100%; } .cta-card__description { font-size: 0.92rem; line-height: 1.55; margin-bottom: 1.35rem; text-align: center; width: 100%; } .cta-card__actions { justify-content: center; margin-bottom: 1.35rem; } .cta-card__trust-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; max-width: 100%; padding-inline: 0; } .cta-card__trust-item { font-size: 0.76rem; justify-content: center; } .cta-play-badge-img { height: 48px; } .cta-phone-frame { width: 165px; height: 366px; border-width: 4px; border-radius: 26px; } } @media (max-width: 480px) { .cta-banner__container { padding-inline: 0.75rem; } .cta-card__grid { padding: 1.4rem 0.8rem; gap: 1.35rem; } .cta-card__badge { font-size: 0.72rem; padding: 0.3rem 0.8rem; } .cta-card__title { font-size: clamp(1.22rem, 5.4vw, 1.55rem); line-height: 1.25; } .cta-card__description { font-size: 0.88rem; line-height: 1.55; } .cta-card__trust-item { font-size: 0.73rem; } .cta-play-badge-img { height: 45px; } .cta-phone-frame { width: 155px; height: 344px; border-width: 4px; border-radius: 24px; } } @media (max-width: 360px) { .cta-banner__container { padding-inline: 0.5rem; } .cta-card__grid { padding: 1.2rem 0.6rem; gap: 1.2rem; } .cta-card__title { font-size: 1.18rem; } .cta-card__description { font-size: 0.82rem; } .cta-card__trust-item { font-size: 0.68rem; } .cta-phone-frame { width: 145px; height: 322px; border-width: 3px; border-radius: 20px; } }   .footer-section { position: relative; background: #f4f7fe; padding-top: 5rem; padding-bottom: 3.5rem; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 0.92rem; content-visibility: auto; contain-intrinsic-size: 1px 450px; } .footer-section__container { max-width: 1240px; margin: 0 auto; padding-inline: 1.5rem; }   .footer-classes-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.1rem 1.4rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; margin-bottom: 3.25rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .footer-classes-label { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; } .footer-classes-label svg { color: var(--brand-primary); } .footer-classes-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; } .footer-class-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.95rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9999px; font-size: 0.82rem; font-weight: 600; color: #334155; text-decoration: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .footer-class-btn:hover { background: var(--brand-primary-subtle); border-color: rgba(var(--brand-primary-rgb), 0.35); color: var(--brand-primary); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--brand-primary-rgb), 0.12); } .footer-class-btn--highlight { background: var(--brand-primary); border-color: var(--brand-primary); color: #ffffff; } .footer-class-btn--highlight:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: #ffffff; box-shadow: 0 4px 14px var(--brand-primary-glow); } .footer-section__grid { display: grid; grid-template-columns: 1.8fr 1.15fr 1.15fr 1fr 1.35fr; gap: 2.25rem; margin-bottom: 3.5rem; } .footer-section__brand { display: flex; flex-direction: column; gap: 1rem; } .footer-section__logo { height: 38px; width: auto; object-fit: contain; align-self: flex-start; } .footer-section__tagline { font-size: 0.92rem; color: #64748b; line-height: 1.65; max-width: 380px; } .footer-section__badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }   .footer-newsletter-wrap { margin-bottom: 2.25rem; } .footer-newsletter-card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.5rem; align-items: center; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 2.25rem 2.5rem; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04); position: relative; overflow: hidden; } .footer-newsletter-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #FF7515, #ff944d, #f97316); } .footer-newsletter-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.8rem; background: rgba(255, 117, 21, 0.08); border: 1px solid rgba(255, 117, 21, 0.25); border-radius: 9999px; font-size: 0.78rem; font-weight: 600; color: #FF7515; margin-bottom: 0.65rem; } .footer-newsletter-title { font-size: 1.35rem; font-weight: 800; color: #000000; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.45rem; } .footer-newsletter-subtitle { font-size: 0.9rem; color: #64748b; line-height: 1.55; margin: 0; } .footer-newsletter-form-col { display: flex; flex-direction: column; } .footer-newsletter-form { display: flex; flex-direction: column; gap: 0.65rem; } .footer-newsletter-input-box { display: flex; align-items: center; background: #f8fafc; border: 1.5px solid #cbd5e1; border-radius: 14px; padding: 0.35rem 0.4rem 0.35rem 1rem; transition: all 0.2s ease; } .footer-newsletter-input-box:focus-within { background: #ffffff; border-color: #FF7515; box-shadow: 0 0 0 3px rgba(255, 117, 21, 0.18); } .footer-newsletter-input { flex: 1; border: none; background: transparent; font-size: 0.92rem; color: #0f172a; outline: none; padding: 0.5rem 0.25rem; } .footer-newsletter-input::placeholder { color: #94a3b8; } .footer-newsletter-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.7rem 1.35rem; background: #FF7515; color: #ffffff; font-size: 0.88rem; font-weight: 600; border: none; border-radius: 10px; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; box-shadow: 0 2px 10px rgba(255, 117, 21, 0.28); } .footer-newsletter-submit-btn:hover { background: #ea6005; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255, 117, 21, 0.38); } .footer-newsletter-submit-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; } .footer-newsletter-consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; color: #64748b; cursor: pointer; margin: 0; } .footer-newsletter-consent input { margin-top: 0.15rem; cursor: pointer; accent-color: #FF7515; } .footer-newsletter-consent a { color: #FF7515; text-decoration: underline; } .footer-newsletter-consent a:hover { color: #ea6005; } .footer-newsletter-success { display: flex; align-items: center; gap: 0.65rem; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; padding: 0.85rem 1.1rem; border-radius: 12px; font-size: 0.88rem; font-weight: 500; } .footer-newsletter-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.85rem; margin-top: 0.5rem; } @media (max-width: 900px) { .footer-newsletter-card { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; } } @media (max-width: 580px) { .footer-newsletter-input-box { flex-direction: column; align-items: stretch; padding: 0.75rem; gap: 0.65rem; } .footer-newsletter-submit-btn { width: 100%; padding: 0.75rem; } } .footer-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 9999px; font-size: 0.74rem; font-weight: 600; color: #475569; } .footer-section__col-title { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #0f172a; margin-bottom: 1.25rem; } .footer-section__links { display: flex; flex-direction: column; gap: 0.75rem; } .footer-section__link { color: #475569; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.2s ease, transform 0.2s ease; display: inline-block; } .footer-section__link:hover { color: var(--brand-primary); transform: translateX(2px); } .footer-section__connect { display: flex; flex-direction: column; gap: 1rem; } .footer-section__socials { display: flex; gap: 0.65rem; } .footer-section__social-btn { width: 40px; height: 40px; border-radius: 10px; background: #ffffff; border: 1px solid #e2e8f0; color: #64748b; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .footer-section__social-btn:hover { background: var(--brand-primary-subtle); border-color: var(--brand-primary-border); color: var(--brand-primary); transform: translateY(-2px); box-shadow: 0 4px 12px var(--brand-primary-glow); } .footer-section__social-btn svg { width: 18px; height: 18px; fill: currentColor; } .footer-section__social-btn[aria-label*="WhatsApp"] svg { fill: #25d366; } .footer-section__social-btn[aria-label*="WhatsApp"]:hover { background: #f0fdf4; border-color: #bbf7d0; color: #25d366; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25); } .footer-section__social-btn[aria-label*="Instagram"] svg { fill: #e1306c; } .footer-section__social-btn[aria-label*="Instagram"]:hover { background: #fdf2f8; border-color: #fbcfe8; color: #e1306c; box-shadow: 0 4px 12px rgba(225, 48, 108, 0.25); } .footer-section__social-btn[aria-label*="Facebook"] svg { fill: #1877f2; } .footer-section__social-btn[aria-label*="Facebook"]:hover { background: #eff6ff; border-color: #bfdbfe; color: #1877f2; box-shadow: 0 4px 12px rgba(24, 119, 242, 0.25); } .footer-section__social-btn[aria-label*="X"] svg, .footer-section__social-btn[aria-label*="Twitter"] svg { fill: #0f172a; } .footer-section__social-btn[aria-label*="X"]:hover, .footer-section__social-btn[aria-label*="Twitter"]:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25); } .footer-section__contact-item { display: inline-flex; align-items: center; gap: 0.55rem; color: #475569; text-decoration: none; font-weight: 500; font-size: 0.88rem; transition: color 0.2s ease; } .footer-section__contact-item:hover { color: var(--brand-primary); } .footer-section__contact-item svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; } .footer-section__whatsapp-chat { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.95rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; color: #16a34a; text-decoration: none; transition: all 0.2s ease; align-self: flex-start; } .footer-section__whatsapp-chat:hover { background: #dcfce7; border-color: #86efac; color: #15803d; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(34, 197, 94, 0.15); } .footer-section__hours { font-size: 0.78rem; color: #94a3b8; line-height: 1.5; } .footer-section__divider { height: 1px; background: #e2e8f0; margin-bottom: 2.25rem; } .footer-section__disclaimer { max-width: 960px; margin: 0 auto 1.5rem; text-align: center; font-size: 0.78rem; color: #94a3b8; line-height: 1.65; } .footer-section__copyright { text-align: center; font-size: 0.82rem; color: #94a3b8; } @media (max-width: 1080px) { .footer-section__grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 2.2rem; } } @media (max-width: 840px) { .footer-classes-bar { flex-direction: column; align-items: flex-start; padding: 1rem; gap: 0.85rem; } .footer-classes-buttons { width: 100%; } .footer-section__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } @media (max-width: 540px) { .footer-section { padding-top: 3.5rem; padding-bottom: 2.5rem; } .footer-section__grid { grid-template-columns: 1fr; gap: 2.2rem; } .footer-section__brand { max-width: 100%; } .footer-section__tagline { max-width: 100%; } .footer-class-btn { flex: 1 1 calc(50% - 0.55rem); justify-content: center; text-align: center; } } @media (max-width: 480px) { .footer-section { padding-top: 3rem; padding-bottom: 2rem; } .footer-section__container { padding-inline: 1rem; } .footer-section__grid { gap: 1.8rem; margin-bottom: 2.5rem; } .footer-section__contact-item { word-break: break-word; } .footer-section__social-btn { width: 38px; height: 38px; } .footer-class-btn { flex: 1 1 100%; } }   .legal-page { min-height: 100vh; background: var(--color-body-bg); display: flex; flex-direction: column; } .legal-hero { padding-top: calc(var(--header-height) + 2.5rem); padding-bottom: 2rem; background: linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.05) 0%, transparent 100%); border-bottom: 1px solid var(--color-border-light); } .legal-hero__container { max-width: var(--container-max); margin: 0 auto; padding-inline: 1.5rem; } .legal-hero__badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.32rem 0.85rem; border-radius: var(--radius-pill); background: var(--brand-primary-subtle); border: 1px solid var(--brand-primary-border); color: var(--brand-primary); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.85rem; } .legal-hero__title { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: var(--color-text-main); line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 0.65rem; } .legal-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; font-size: 0.88rem; color: var(--color-text-muted); font-weight: 500; } .legal-hero__meta-item { display: inline-flex; align-items: center; gap: 0.4rem; } .legal-hero__meta-item svg { width: 15px; height: 15px; color: var(--brand-primary); stroke-width: 2.2; } .legal-main { flex: 1; padding-top: 2.5rem; padding-bottom: 5rem; } .legal-container { max-width: var(--container-max); margin: 0 auto; padding-inline: 1.5rem; display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 2.5rem; align-items: start; } .legal-sidebar { position: -webkit-sticky; position: sticky; top: calc(var(--header-height) + 1rem); background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-xs); z-index: 10; } .legal-sidebar__title { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-subtle); margin-bottom: 0.85rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border-subtle); } .legal-sidebar__nav { display: flex; flex-direction: column; gap: 0.25rem; max-height: calc(100vh - 270px); overflow-y: auto; padding-right: 0.25rem; scrollbar-width: thin; } .legal-sidebar__link { font-size: 0.86rem; color: var(--color-text-body); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-weight: 500; line-height: 1.4; transition: all var(--transition-fast); display: block; position: relative; } .legal-sidebar__link:hover { color: var(--brand-primary); background: var(--brand-primary-subtle); transform: translateX(2px); } .legal-sidebar__link.active { color: var(--brand-primary); background: var(--brand-primary-subtle); font-weight: 700; } .legal-sidebar__link.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--brand-primary); border-radius: var(--radius-pill); } .legal-sidebar__quick-box { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border-subtle); font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.5; } .legal-sidebar__quick-box strong { color: var(--color-text-main); display: block; margin-bottom: 0.25rem; } .legal-content-column { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; } .legal-card { background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); padding: 2.25rem 2.5rem; box-shadow: var(--shadow-xs); scroll-margin-top: calc(var(--header-height) + 1rem); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .legal-card:hover { border-color: #cbd5e1; box-shadow: var(--shadow-md); } .legal-card h2 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-text-main); margin-bottom: 1.1rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--color-border-subtle); display: flex; align-items: center; gap: 0.6rem; } .legal-card h3 { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin-top: 1.4rem; margin-bottom: 0.6rem; } .legal-card p { font-size: 0.95rem; color: var(--color-text-body); line-height: 1.75; margin-bottom: 1rem; } .legal-card p:last-child { margin-bottom: 0; } .legal-card ul { list-style: none; padding: 0; margin-bottom: 1rem; } .legal-card ul li { position: relative; padding-left: 1.5rem; font-size: 0.93rem; color: var(--color-text-body); line-height: 1.7; margin-bottom: 0.55rem; } .legal-card ul li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); } .legal-card strong { color: var(--color-text-main); font-weight: 700; } .legal-card a { color: var(--brand-primary); text-decoration: none; font-weight: 600; transition: color var(--transition-fast); } .legal-card a:hover { color: var(--brand-primary-hover); text-decoration: underline; } .legal-highlight-box { background: #f8fafc; border-left: 4px solid var(--brand-primary); padding: 1.1rem 1.35rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; margin: 1.25rem 0; font-size: 0.92rem; color: var(--color-text-body); line-height: 1.65; } @media (max-width: 991px) { .legal-container { grid-template-columns: 1fr; gap: 2rem; } .legal-sidebar { position: static; width: 100%; max-width: 100%; max-height: none; order: -1; } .legal-sidebar__nav { max-height: 220px; } .legal-card { padding: 1.75rem 1.35rem; } } @media (max-width: 480px) { .legal-container { padding-inline: 1rem; gap: 1.5rem; } .legal-card { padding: 1.35rem 1rem; border-radius: var(--radius-lg); } .legal-card h2 { font-size: 1.2rem; } .legal-highlight-box { padding: 0.85rem 1rem; font-size: 0.88rem; } }   .edu-breadcrumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #94a3b8; margin-bottom: 1.25rem; flex-wrap: wrap; } .edu-breadcrumbs a { color: var(--brand-primary-light); text-decoration: none; transition: color var(--transition-fast); } .edu-breadcrumbs a:hover { color: #ffffff; text-decoration: underline; } .edu-breadcrumbs .separator { color: rgba(255, 255, 255, 0.35); user-select: none; } .edu-breadcrumbs .current { color: #cbd5e1; font-weight: 600; } .edu-hero-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(var(--brand-primary-rgb), 0.18); color: var(--brand-primary-light); border: 1px solid var(--brand-primary-border); padding: 0.35rem 0.9rem; border-radius: var(--radius-pill); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1rem; } .edu-stats-strip { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .edu-stat-item { display: flex; flex-direction: column; } .edu-stat-item .stat-value { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; color: #ffffff; } .edu-stat-item .stat-label { font-size: 0.8rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.05em; }   .board-hero { background: linear-gradient(135deg, var(--color-dark-bg) 0%, #000000 100%); color: #ffffff; padding: calc(var(--header-height) + 2rem) 0 3.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; } .board-hero__container { max-width: var(--container-max); margin: 0 auto; padding-inline: 1.5rem; } .board-hero__title { font-family: var(--font-heading); font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 800; color: #ffffff; line-height: 1.15; margin: 0 0 1rem 0; letter-spacing: -0.025em; } .board-hero__desc { font-size: 1.1rem; color: #cbd5e1; max-width: 780px; line-height: 1.65; margin: 0; } @media (max-width: 768px) { .board-hero { padding: calc(var(--header-height) + 1.25rem) 0 2.25rem 0; } .board-hero__container { padding-inline: 1rem; } .board-hero__title { font-size: clamp(1.6rem, 5.8vw, 2.3rem); word-break: break-word; overflow-wrap: break-word; letter-spacing: -0.015em; } .board-hero__desc { font-size: 0.98rem; line-height: 1.55; } } .board-section { padding: 3.5rem 0 5rem 0; background: var(--color-body-bg); } .board-container { max-width: var(--container-max); margin: 0 auto; padding-inline: 1.5rem; } .board-section-header { margin-bottom: 2.5rem; } .board-section-title { font-family: var(--font-heading); font-size: 1.85rem; font-weight: 800; color: var(--color-text-main); margin: 0 0 0.5rem 0; } .board-section-subtitle { font-size: 1rem; color: var(--color-text-muted); margin: 0; } .board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.75rem; } @media (max-width: 640px) { .board-grid { grid-template-columns: 1fr; gap: 1.25rem; } .board-container { padding-inline: 1rem; } .subject-card { padding: 1.5rem 1.15rem; } .board-section-title { font-size: 1.5rem; } } .subject-card { background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); padding: 2rem; display: flex; flex-direction: column; text-decoration: none; transition: all var(--transition-base); position: relative; box-shadow: var(--shadow-xs); overflow: hidden; } .subject-card:hover { transform: translateY(-4px); border-color: var(--brand-primary-border); box-shadow: var(--shadow-lg); } .subject-card__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--brand-primary-subtle); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; transition: transform var(--transition-fast); } .subject-card:hover .subject-card__icon { background: var(--brand-gradient); color: #ffffff; transform: scale(1.05); } .subject-card__icon svg { width: 26px; height: 26px; stroke-width: 2.2; } .subject-card__title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-text-main); margin: 0 0 0.5rem 0; transition: color var(--transition-fast); } .subject-card:hover .subject-card__title { color: var(--brand-primary); } .subject-card__desc { font-size: 0.92rem; color: var(--color-text-body); line-height: 1.6; margin: 0 0 1.25rem 0; flex: 1; } .subject-card__footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; border-top: 1px solid var(--color-border-subtle); font-size: 0.85rem; font-weight: 600; color: var(--brand-primary); } .subject-card__badge { background: var(--color-surface-muted); color: var(--color-text-muted); font-size: 0.78rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); }   .ncert-curriculum-container { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem; } .ncert-section-heading-wrap { text-align: center; max-width: 820px; margin: 0 auto 3rem auto; } .ncert-section-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); background: var(--brand-primary-subtle); border: 1px solid var(--brand-primary-border); padding: 0.3rem 0.85rem; border-radius: 9999px; margin-bottom: 0.85rem; } .ncert-section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; color: var(--color-text-main); line-height: 1.25; margin: 0 0 0.85rem 0; letter-spacing: -0.02em; } .ncert-section-desc { font-size: 1.05rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; } .ncert-tier-block { margin-bottom: 3rem; } .ncert-tier-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border-light); } .ncert-tier-title-wrap { display: flex; align-items: center; gap: 0.75rem; } .ncert-tier-icon { width: 22px; height: 22px; color: var(--brand-primary); } .ncert-tier-title { font-size: 1.35rem; font-weight: 800; color: var(--color-text-main); margin: 0; } .ncert-tier-badge { font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 9999px; background: var(--brand-primary-subtle); color: var(--brand-primary); border: 1px solid var(--brand-primary-border); } .ncert-classes-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .ncert-classes-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 992px) { .ncert-classes-grid-3, .ncert-classes-grid-2 { grid-template-columns: 1fr; } } .ncert-card { background: #ffffff; border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); padding: 1.85rem; display: flex; flex-direction: column; justify-content: space-between; transition: all var(--transition-base); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03); position: relative; overflow: hidden; } .ncert-card:hover { transform: translateY(-5px); border-color: var(--brand-primary-border); box-shadow: 0 16px 36px -10px var(--brand-primary-glow); } .ncert-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; } .ncert-card-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--brand-primary-subtle); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } .ncert-card:hover .ncert-card-icon { background: var(--brand-primary); color: #ffffff; transform: scale(1.05); } .ncert-card-icon svg { width: 24px; height: 24px; } .ncert-card-badge { font-size: 0.72rem; font-weight: 700; color: var(--brand-primary); background: var(--brand-primary-subtle); border: 1px solid var(--brand-primary-border); padding: 0.2rem 0.65rem; border-radius: 9999px; white-space: nowrap; } .ncert-card-badge--gold { color: #b45309; background: #fefce8; border-color: #fef08a; } .ncert-card-badge--purple { color: #6b21a8; background: #faf5ff; border-color: #e9d5ff; } .ncert-card-title { font-size: 1.35rem; font-weight: 800; color: var(--color-text-main); margin: 0 0 0.5rem 0; line-height: 1.25; } .ncert-card-desc { font-size: 0.88rem; color: #475569; line-height: 1.6; margin: 0 0 1.25rem 0; flex: 1; } .ncert-card-subjects { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; } .ncert-subject-chip { font-size: 0.74rem; font-weight: 600; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 0.25rem 0.6rem; border-radius: 6px; white-space: nowrap; } .ncert-card-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.8rem 1rem; background: var(--brand-primary); color: #ffffff !important; font-size: 0.92rem; font-weight: 700; border-radius: var(--radius-md); text-decoration: none; box-shadow: 0 4px 12px var(--brand-primary-glow); transition: all var(--transition-fast); } .ncert-card-btn:hover { background: var(--brand-primary-hover); transform: translateY(-1.5px); box-shadow: 0 6px 18px var(--brand-primary-glow); } .ncert-card-btn svg { width: 16px; height: 16px; transition: transform var(--transition-fast); } .ncert-card-btn:hover svg { transform: translateX(4px); }   .ncert-adoption-section { background: linear-gradient(180deg, #ffffff 0%, var(--brand-primary-subtle) 100%); border: 1px solid var(--brand-primary-border); border-radius: var(--radius-2xl); padding: 3rem 2.5rem; margin: 3.5rem 0; } .ncert-adoption-badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary); background: #ffffff; border: 1px solid var(--brand-primary-border); padding: 0.3rem 0.85rem; border-radius: 9999px; margin-bottom: 1rem; } .ncert-adoption-title { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 800; color: #0f172a; line-height: 1.25; margin: 0 0 1rem 0; letter-spacing: -0.02em; } .ncert-adoption-lead { font-size: 1.05rem; color: #334155; line-height: 1.7; max-width: 950px; margin: 0 0 2rem 0; } .ncert-boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; margin-bottom: 2.5rem; } .ncert-board-pill { background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius-md); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); transition: all var(--transition-fast); } .ncert-board-pill:hover { border-color: var(--brand-primary); transform: translateY(-2px); box-shadow: 0 6px 14px var(--brand-primary-glow); } .ncert-board-name { font-size: 0.92rem; font-weight: 700; color: #0f172a; } .ncert-board-sub { font-size: 0.74rem; color: #64748b; } .ncert-adoption-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 860px) { .ncert-adoption-highlights { grid-template-columns: 1fr; } } .ncert-highlight-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); } .ncert-highlight-box h4 { font-size: 1.05rem; font-weight: 700; color: var(--color-text-main); margin: 0 0 0.5rem 0; display: flex; align-items: center; gap: 0.5rem; } .ncert-highlight-box p { font-size: 0.88rem; color: #475569; line-height: 1.6; margin: 0; }   .ncert-faq-wrap { margin: 4.5rem 0 3rem 0; width: 100%; }   .ncert-faq-accordion-list { display: flex; flex-direction: column; gap: 1rem; max-width: 920px; margin: 0 auto; width: 100%; } .ncert-faq-item { background: #ffffff; border: 1px solid var(--color-border-light, #e2e8f0); border-radius: 1.15rem; overflow: hidden; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03); } .ncert-faq-item:hover { border-color: #FF7515; box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.08), 0 2px 6px rgba(0, 0, 0, 0.02); } .ncert-faq-item[open] { border-color: var(--color-primary, #FF7515); box-shadow: 0 12px 28px -6px rgba(99, 102, 241, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.03); } .ncert-faq-trigger { display: flex; align-items: center; gap: 1.15rem; padding: 1.25rem 1.5rem; cursor: pointer; user-select: none; list-style: none; outline: none; background: transparent; transition: background-color 0.2s ease; } .ncert-faq-trigger::-webkit-details-marker { display: none; } .ncert-faq-trigger::marker { display: none; } .ncert-faq-trigger:hover { background-color: rgba(99, 102, 241, 0.025); } .ncert-faq-trigger:focus-visible { outline: 2px solid var(--color-primary, #FF7515); outline-offset: -2px; } .ncert-faq-badge-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.35rem; height: 2.35rem; border-radius: 0.75rem; background: #f1f5f9; color: var(--color-primary, #FF7515); font-weight: 700; font-size: 0.85rem; letter-spacing: -0.01em; transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .ncert-faq-item[open] .ncert-faq-badge-num { background: linear-gradient(135deg, var(--color-primary, #6366f1) 0%, #FF7515 100%); color: #ffffff; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35); } .ncert-faq-question { flex: 1; font-size: 1.05rem; font-weight: 600; color: var(--color-text-main, #000000); line-height: 1.45; letter-spacing: -0.01em; margin: 0; text-align: left; transition: color 0.2s ease; } .ncert-faq-item[open] .ncert-faq-question { color: var(--color-primary, #FF7515); } .ncert-faq-chevron { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.15rem; height: 2.15rem; border-radius: 50%; background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .ncert-faq-item:hover .ncert-faq-chevron { color: var(--color-primary, #FF7515); background: #f1f5f9; border-color: rgba(99, 102, 241, 0.3); } .ncert-faq-item[open] .ncert-faq-chevron { transform: rotate(180deg); background: rgba(99, 102, 241, 0.1); color: var(--color-primary, #FF7515); border-color: rgba(99, 102, 241, 0.4); } .ncert-faq-body { padding: 0 1.5rem 1.5rem 5rem; border-top: 1px dashed rgba(226, 232, 240, 0.9); animation: faqFadeSlide 0.28s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes faqFadeSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .ncert-faq-answer { font-size: 0.95rem; color: #475569; line-height: 1.7; margin: 1rem 0 0 0; } .ncert-faq-answer p { margin: 0; } @media (max-width: 640px) { .ncert-faq-trigger { padding: 1rem 1.15rem; gap: 0.85rem; } .ncert-faq-badge-num { width: 1.9rem; height: 1.9rem; font-size: 0.78rem; border-radius: 0.55rem; } .ncert-faq-question { font-size: 0.95rem; line-height: 1.4; } .ncert-faq-chevron { width: 1.85rem; height: 1.85rem; } .ncert-faq-chevron svg { width: 16px; height: 16px; } .ncert-faq-body { padding: 0 1.15rem 1.25rem 1.15rem; } .ncert-faq-answer { font-size: 0.88rem; line-height: 1.6; margin: 0.85rem 0 0 0; } }   .ncert-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } @media (max-width: 820px) { .ncert-faq-grid { grid-template-columns: 1fr; } } .ncert-faq-card { background: #ffffff; border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .ncert-faq-q { font-size: 1.05rem; font-weight: 700; color: var(--color-text-main); margin: 0 0 0.6rem 0; line-height: 1.35; } .ncert-faq-a { font-size: 0.9rem; color: #475569; line-height: 1.6; margin: 0; }   .subject-hub-hero { background: linear-gradient(135deg, var(--color-dark-bg) 0%, var(--color-dark-surface) 100%); color: #ffffff; padding: calc(var(--header-height) + 2rem) 0 3.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1.5rem; } @media (max-width: 640px) { .chapter-grid { grid-template-columns: 1fr; gap: 1.25rem; } .chapter-card { padding: 1.35rem 1.15rem; } } .chapter-card { background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 1.75rem; display: flex; flex-direction: column; transition: all var(--transition-base); box-shadow: var(--shadow-xs); position: relative; } .chapter-card:hover { transform: translateY(-3px); border-color: var(--brand-primary-border); box-shadow: var(--shadow-md); } .chapter-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; } .chapter-num-pill { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-primary-subtle); color: var(--brand-primary); padding: 0.28rem 0.75rem; border-radius: var(--radius-pill); } .chapter-card__title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--color-text-main); line-height: 1.3; margin: 0 0 0.65rem 0; } .chapter-card__desc { font-size: 0.9rem; color: var(--color-text-body); line-height: 1.6; margin: 0 0 1.25rem 0; flex: 1; } .chapter-card__actions { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; } .chapter-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; flex: 1; background: var(--brand-primary); color: #ffffff; text-decoration: none; font-size: 0.88rem; font-weight: 600; padding: 0.6rem 1rem; border-radius: var(--radius-md); transition: all var(--transition-fast); } .chapter-btn-primary:hover { background: var(--brand-primary-hover); }   .chapter-reader-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2.5rem; padding: 2.5rem 0 5rem 0; max-width: var(--container-max); margin: 0 auto; padding-inline: 1.5rem; width: 100%; box-sizing: border-box; } .chapter-reader-sidebar { position: sticky; top: calc(var(--header-height) + 1.5rem); height: fit-content; max-height: calc(100vh - var(--header-height) - 3rem); overflow-y: auto; background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-xs); box-sizing: border-box; min-width: 0; } .chapter-reader-sidebar h4 { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); margin: 0 0 1rem 0; } .chapter-content-body { background: var(--color-surface-white); border: 1px solid var(--color-border-light); border-radius: var(--radius-xl); padding: 2.75rem 2.5rem; box-shadow: var(--shadow-xs); line-height: 1.8; color: var(--color-text-body); box-sizing: border-box; min-width: 0; width: 100%; max-width: 100%; overflow-x: hidden; word-break: break-word; overflow-wrap: break-word; } .chapter-content-body h2 { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 800; color: var(--color-text-main); margin: 2.2rem 0 1rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-border-subtle); word-break: break-word; overflow-wrap: break-word; } .chapter-content-body h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: #1e293b; margin: 1.75rem 0 0.75rem 0; word-break: break-word; overflow-wrap: break-word; } .chapter-content-body h4 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #334155; margin: 1.5rem 0 0.5rem 0; word-break: break-word; overflow-wrap: break-word; } .chapter-content-body p { font-size: 1.05rem; margin-bottom: 1.25rem; word-break: break-word; overflow-wrap: break-word; } .chapter-content-body ul, .chapter-content-body ol { margin: 1rem 0 1.25rem 0; padding-left: 1.5rem; box-sizing: border-box; } .chapter-content-body li { font-size: 1rem; line-height: 1.7; margin-bottom: 0.5rem; word-break: break-word; overflow-wrap: break-word; } .chapter-content-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 1.5rem 0; } .chapter-content-body pre, .chapter-content-body code { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; word-break: break-word; } .chapter-content-body pre { white-space: pre-wrap; word-wrap: break-word; background: #0f172a; color: #e2e8f0; padding: 1.25rem; border-radius: var(--radius-md); margin: 1.5rem 0; }     mjx-container[display="true"], mjx-container[jax="CHTML"][display="true"], mjx-container[jax="SVG"][display="true"], .MathJax_Display { display: block !important; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; margin: 1.25rem auto !important; padding-block: 0.35rem !important; box-sizing: border-box !important; text-align: center; }   mjx-container:not([display="true"]), mjx-container[jax="CHTML"]:not([display="true"]), mjx-container[jax="SVG"]:not([display="true"]), .MathJax:not(.MathJax_Display) { display: inline-block !important; max-width: 100% !important; overflow-x: visible !important; overflow-y: visible !important; vertical-align: -0.22ex !important; white-space: normal !important; line-height: normal !important; margin: 0 0.08em !important; padding: 0 !important; }   .direct-answer-capsule { background: linear-gradient(135deg, #ffffff 0%, var(--brand-primary-subtle) 100%); border: 1px solid var(--brand-primary-border); border-left: 5px solid var(--brand-primary); border-radius: 12px; padding: 1.5rem 1.75rem; margin-bottom: 2rem; box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), 0.08); box-sizing: border-box; width: 100%; max-width: 100%; } .direct-answer-capsule__title { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 800; color: var(--brand-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } .direct-answer-capsule p { font-size: 1.05rem; line-height: 1.75; color: #0f172a; margin: 0; }   .key-takeaways-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.75rem 2rem; margin: 2rem 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); box-sizing: border-box; width: 100%; max-width: 100%; } .key-takeaways-card h3 { margin-top: 0; margin-bottom: 1rem; color: #0f172a; font-size: 1.25rem; display: flex; align-items: center; gap: 0.5rem; } .key-takeaways-list { list-style: none; padding-left: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 0.85rem; } .key-takeaways-list li { position: relative; padding-left: 1.75rem; font-size: 1rem; line-height: 1.65; color: #334155; margin-bottom: 0; } .key-takeaways-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #059669; font-weight: 800; font-size: 1.1rem; }   .edu-table-responsive, .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; margin: 1.75rem 0 !important; border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02); width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .edu-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; text-align: left; background: #ffffff; } .edu-table th { background: #f1f5f9; color: #1e293b; font-weight: 700; padding: 0.9rem 1.15rem; border-bottom: 2px solid #cbd5e1; white-space: nowrap; } .edu-table td { padding: 0.85rem 1.15rem; border-bottom: 1px solid #e2e8f0; color: #334155; vertical-align: middle; } .edu-table tr:last-child td { border-bottom: none; } .edu-table tr:hover td { background: #f8fafc; }   .chapter-content-body table:not(.edu-table) { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-collapse: collapse !important; margin: 1.5rem 0 !important; }   .identity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.75rem 0; width: 100%; box-sizing: border-box; } .identity-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem 1.5rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); border-top: 4px solid var(--brand-primary, #6366f1); transition: transform 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .identity-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.12); } .identity-card__tag { display: inline-block; font-size: 0.75rem; font-weight: 700; color: var(--brand-primary, #6366f1); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; } .identity-card__formula { font-size: 1.2rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; word-break: break-word; } .identity-card__desc { font-size: 0.9rem; color: #64748b; line-height: 1.5; margin: 0; }   .example-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem 1.75rem; margin: 1.75rem 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03); box-sizing: border-box; width: 100%; max-width: 100%; } .example-box__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; gap: 0.5rem; } .example-box__badge { font-size: 0.78rem; font-weight: 800; padding: 0.25rem 0.6rem; border-radius: 6px; background: var(--brand-primary-subtle); color: var(--brand-primary); text-transform: uppercase; } .example-box__question { font-weight: 700; color: #0f172a; font-size: 1.05rem; margin-bottom: 1rem; word-break: break-word; } .example-box__solution { background: #f8fafc; border-radius: 8px; padding: 1.2rem 1.4rem; border-left: 3px solid var(--brand-primary); font-size: 0.98rem; line-height: 1.75; color: #1e293b; box-sizing: border-box; overflow-x: auto; word-break: break-word; } .pitfall-box { background: #fff5f5; border: 1px solid #fed7d7; border-left: 4px solid #e53e3e; border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; box-sizing: border-box; width: 100%; max-width: 100%; } .pitfall-box h4 { color: #c53030; margin-top: 0; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }   .faq-accordion { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; } .faq-accordion-item { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02); } .faq-accordion-item summary { padding: 1.15rem 1.4rem; font-weight: 700; color: #0f172a; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; background: #f8fafc; user-select: none; font-size: 1.02rem; word-break: break-word; } .faq-accordion-item summary::-webkit-details-marker { display: none; } .faq-accordion-item summary::after { content: "＋"; font-size: 1.2rem; color: #64748b; font-weight: 400; transition: transform 0.2s ease; margin-left: 0.5rem; flex-shrink: 0; } .faq-accordion-item[open] summary::after { content: "−"; } .faq-accordion-item .faq-answer { padding: 1.25rem 1.4rem; color: #334155; line-height: 1.7; font-size: 0.98rem; background: #ffffff; border-top: 1px solid #f1f5f9; box-sizing: border-box; } .chapter-pager { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--color-border-light); flex-wrap: wrap; } .chapter-pager-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-text-main); text-decoration: none; font-weight: 600; font-size: 0.92rem; transition: all var(--transition-fast); } .chapter-pager-btn:hover { background: var(--brand-primary-subtle); color: var(--brand-primary); }   .chapter-callout { padding: 1.25rem 1.5rem; border-radius: var(--radius-md); margin: 1.5rem 0; border-left: 4px solid; font-size: 0.96rem; line-height: 1.65; box-sizing: border-box; width: 100%; } .chapter-callout--note { background: var(--brand-primary-subtle); border-color: var(--brand-primary); color: var(--color-text-main); } .chapter-callout--important { background: #fef2f2; border-color: #ef4444; color: #991b1b; } .chapter-callout--tip { background: #ecfdf5; border-color: #10b981; color: #065f46; }   @media (max-width: 1080px) { .chapter-reader-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 1.75rem; padding: 2rem 1.25rem 4rem 1.25rem; } .chapter-content-body { padding: 2.25rem 1.75rem; } } @media (max-width: 820px) { .chapter-reader-layout { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem 1rem 3.5rem 1rem; width: 100%; max-width: 100%; box-sizing: border-box; } .chapter-reader-sidebar { position: static; width: 100%; max-width: 100%; box-sizing: border-box; padding: 1.15rem 1rem; border-radius: var(--radius-md); background: #f8fafc; } .chapter-reader-sidebar h4 { margin-bottom: 0.6rem; font-size: 0.8rem; } .chapter-content-body { padding: 1.5rem 1.15rem; border-radius: var(--radius-lg); width: 100%; max-width: 100%; box-sizing: border-box; } .chapter-content-body h2 { font-size: 1.4rem; margin: 1.75rem 0 0.75rem 0; } .chapter-content-body h3 { font-size: 1.2rem; margin: 1.5rem 0 0.6rem 0; } .identity-grid { grid-template-columns: 1fr; gap: 1rem; } .direct-answer-capsule { padding: 1.25rem 1.15rem; margin-bottom: 1.5rem; } .key-takeaways-card { padding: 1.25rem 1.15rem; margin: 1.5rem 0; } .example-box { padding: 1.15rem 1rem; } .example-box__solution { padding: 1rem 0.9rem; } } @media (max-width: 480px) { .chapter-reader-layout { padding: 1rem 0.6rem 3rem 0.6rem; gap: 1.25rem; } .chapter-reader-sidebar { padding: 1rem 0.85rem; } .chapter-content-body { padding: 1.25rem 0.75rem; border-radius: var(--radius-md); } .chapter-content-body h2 { font-size: 1.28rem; } .chapter-content-body h3 { font-size: 1.12rem; } .chapter-content-body p, .chapter-content-body li { font-size: 0.95rem; } .direct-answer-capsule { padding: 1rem 0.85rem; border-radius: 10px; } .key-takeaways-card { padding: 1rem 0.85rem; border-radius: 10px; } .key-takeaways-list li { padding-left: 1.5rem; font-size: 0.92rem; } .example-box { padding: 1rem 0.85rem; border-radius: 10px; } .example-box__solution { padding: 0.85rem 0.75rem; font-size: 0.92rem; } .pitfall-box { padding: 1rem 0.85rem; border-radius: 8px; } .faq-accordion-item summary { padding: 0.9rem 0.85rem; font-size: 0.94rem; } .faq-accordion-item .faq-answer { padding: 0.9rem 0.85rem; font-size: 0.92rem; } .chapter-pager { flex-direction: column; gap: 0.75rem; } .chapter-pager-btn { width: 100%; justify-content: center; text-align: center; } }   .site-sketch-bg, .resources-sketch-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .site-sketch, .resources-sketch { position: absolute; width: 105px; height: 105px; color: var(--brand-primary); stroke: var(--brand-primary); opacity: 0.16; filter: drop-shadow(0 2px 8px rgba(var(--brand-primary-rgb), 0.08)); transition: opacity 0.3s ease; pointer-events: none; user-select: none; } .site-sketch-path, .resources-sketch-path, .site-sketch path, .site-sketch circle, .site-sketch polygon, .site-sketch ellipse, .site-sketch line, .resources-sketch path, .resources-sketch circle, .resources-sketch polygon, .resources-sketch ellipse, .resources-sketch line { stroke: var(--brand-primary); } .site-sketch--1, .resources-sketch--1 { top: 3%; left: 1.5%; animation: sketchFloat 10s ease-in-out infinite alternate; } .site-sketch--2, .resources-sketch--2 { top: 4%; right: 1.5%; width: 110px; height: 110px; animation: sketchFloatReverse 11s ease-in-out infinite alternate; } .site-sketch--3, .resources-sketch--3 { bottom: 4%; left: 1.5%; width: 100px; height: 100px; animation: sketchFloat 12s ease-in-out infinite alternate; } .site-sketch--4, .resources-sketch--4 { bottom: 3%; right: 1.5%; width: 105px; height: 105px; animation: sketchFloatReverse 13s ease-in-out infinite alternate; } .site-sketch--5, .resources-sketch--5 { top: 22%; left: 1%; width: 95px; height: 95px; animation: sketchFloat 9s ease-in-out infinite alternate; } .site-sketch--6, .resources-sketch--6 { top: 78%; right: 1%; width: 95px; height: 95px; animation: sketchFloatReverse 10s ease-in-out infinite alternate; } @keyframes sketchFloat { 0% { transform: translateY(0) rotate(0deg); opacity: 0.12; } 50% { transform: translateY(-10px) rotate(3deg); opacity: 0.18; } 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; } } @keyframes sketchFloatReverse { 0% { transform: translateY(0) rotate(0deg); opacity: 0.12; } 50% { transform: translateY(10px) rotate(-3deg); opacity: 0.18; } 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; } } @media (max-width: 1024px) { .site-sketch, .resources-sketch { width: 80px; height: 80px; opacity: 0.1; } .site-sketch--5, .site-sketch--6 { display: none; } }   .error-hero { padding: 7rem 0 4rem; background: radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.12) 0%, rgba(11, 15, 30, 0) 70%), linear-gradient(180deg, #0B0F1E 0%, #0F172A 100%); color: #f8fafc; text-align: center; position: relative; overflow: hidden; } .error-hero__container { max-width: 820px; margin: 0 auto; padding: 0 1.5rem; } .error-hero__badge { display: inline-block; background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.35rem 1rem; border-radius: 9999px; margin-bottom: 1.25rem; text-transform: uppercase; } .error-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.25rem; letter-spacing: -0.02em; color: #ffffff; } .error-hero__desc { font-size: 1.1rem; line-height: 1.6; color: #94a3b8; margin-bottom: 2.5rem; } .error-search-box { max-width: 520px; margin: 0 auto 2.5rem; position: relative; } .error-search-box input { width: 100%; padding: 1rem 1.25rem 1rem 3rem; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; color: #ffffff; font-size: 1rem; outline: none; transition: all 0.2s ease; } .error-search-box input:focus { border-color: var(--brand-primary); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); } .error-search-box svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #94a3b8; } .error-quick-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 3.5rem; } .error-grid-section { padding: 3.5rem 0 5rem; background: #f8fafc; } .error-grid-container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; } .error-grid-title { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; text-align: center; } .error-grid-subtitle { font-size: 0.95rem; color: #64748b; margin-bottom: 2rem; text-align: center; } .error-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; } .error-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.5rem; transition: all 0.25s ease; text-decoration: none; color: inherit; display: flex; flex-direction: column; } .error-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.08); border-color: #cbd5e1; } .error-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .error-card__badge { font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 6px; background: #eef2ff; color: #4f46e5; } .error-card__title { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin-bottom: 0.4rem; } .error-card__desc { font-size: 0.88rem; color: #64748b; line-height: 1.5; margin-bottom: 1.25rem; flex-grow: 1; } .error-card__link { font-size: 0.88rem; font-weight: 600; color: var(--brand-primary); display: inline-flex; align-items: center; gap: 0.4rem; }   .class-nav-strip { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; flex-wrap: wrap; margin: 1.5rem 0 2.5rem 0; } .class-nav-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1.15rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 600; color: var(--color-text-body); background: var(--color-surface-white); border: 1px solid var(--color-border-light); text-decoration: none; transition: all var(--transition-fast); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .class-nav-pill:hover { color: var(--brand-primary); border-color: var(--brand-primary-border); background: #f8fafc; transform: translateY(-1px); } .class-nav-pill.active { background: var(--brand-primary); color: #ffffff; border-color: var(--brand-primary); box-shadow: 0 4px 12px var(--brand-primary-glow); } .subject-card__topics-wrap { margin-bottom: 1.25rem; } .subject-card__topics-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 0.45rem; } .subject-card__topic-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .subject-card__topic-chip { font-size: 0.75rem; font-weight: 500; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 0.18rem 0.55rem; border-radius: 6px; line-height: 1.35; transition: background var(--transition-fast); } .subject-card:hover .subject-card__topic-chip { background: #e2e8f0; color: #0f172a; } .subject-card__book-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; color: #475569; background: #f8fafc; border: 1px solid #e2e8f0; padding: 0.2rem 0.55rem; border-radius: 6px; margin-bottom: 0.65rem; width: fit-content; } .class-guide-section { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border: 1px solid #e2e8f0; border-radius: 20px; padding: 3rem 2rem; margin: 3.5rem auto; max-width: 1200px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05); } .class-guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .class-guide-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 1.5rem; transition: transform var(--transition-fast); } .class-guide-box:hover { transform: translateY(-2px); border-color: #cbd5e1; } .class-guide-box h4 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0 0 0.6rem 0; } .class-guide-box p { font-size: 0.88rem; color: #64748b; line-height: 1.6; margin: 0; }   .social-fab-container { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: 24px; z-index: 9980; display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; pointer-events: none; font-family: var(--font-body, system-ui, -apple-system, sans-serif); } .social-fab-container * { box-sizing: border-box; }   .social-fab-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 9975; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; pointer-events: auto; } .social-fab-backdrop.active { opacity: 1; visibility: visible; }   .social-fab-trigger { width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer; pointer-events: auto; background: var(--brand-gradient); color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px -4px var(--brand-primary-glow), 0 4px 10px rgba(0, 0, 0, 0.15); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.3s ease; position: relative; outline: none; -webkit-tap-highlight-color: transparent; } .social-fab-trigger:hover { transform: scale(1.08); box-shadow: 0 14px 30px -4px var(--brand-primary-glow), 0 6px 14px rgba(0, 0, 0, 0.2); } .social-fab-trigger:active { transform: scale(0.95); }   .social-fab-trigger::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, var(--brand-primary-glow) 0%, transparent 70%); animation: fab-pulse 2.8s infinite cubic-bezier(0.4, 0, 0.6, 1); z-index: -1; pointer-events: none; } .social-fab-container.open .social-fab-trigger::before { display: none; } @keyframes fab-pulse { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.22); opacity: 0; } 100% { transform: scale(0.95); opacity: 0; } }   .social-fab-icon { width: 26px; height: 26px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; position: absolute; } .social-fab-icon--close { opacity: 0; transform: rotate(-90deg) scale(0.6); } .social-fab-container.open .social-fab-icon--default { opacity: 0; transform: rotate(90deg) scale(0.6); } .social-fab-container.open .social-fab-icon--close { opacity: 1; transform: rotate(0deg) scale(1); }   .social-fab-menu { display: flex; flex-direction: column-reverse; align-items: center; gap: 12px; margin-bottom: 4px; pointer-events: none; }   .social-fab-item { display: flex; align-items: center; justify-content: flex-end; position: relative; text-decoration: none; pointer-events: none; opacity: 0; transform: translateY(20px) scale(0.7); transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); }   .social-fab-container.open .social-fab-item { pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); } .social-fab-container.open .social-fab-item:nth-child(1) { transition-delay: 0.04s; } .social-fab-container.open .social-fab-item:nth-child(2) { transition-delay: 0.08s; } .social-fab-container.open .social-fab-item:nth-child(3) { transition-delay: 0.12s; } .social-fab-container.open .social-fab-item:nth-child(4) { transition-delay: 0.16s; }   .social-fab-btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease; border: 1.5px solid rgba(255, 255, 255, 0.25); flex-shrink: 0; } .social-fab-btn svg { width: 24px; height: 24px; fill: currentColor; } .social-fab-item:hover .social-fab-btn { transform: scale(1.12); filter: brightness(1.08); }   .social-fab-btn--whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); box-shadow: 0 8px 20px -2px rgba(37, 211, 102, 0.45); } .social-fab-btn--instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 8px 20px -2px rgba(220, 39, 67, 0.45); } .social-fab-btn--facebook { background: linear-gradient(135deg, #1877F2 0%, #0d65d9 100%); box-shadow: 0 8px 20px -2px rgba(24, 119, 242, 0.45); } .social-fab-btn--x { background: linear-gradient(135deg, #0f172a 0%, #000000 100%); box-shadow: 0 8px 20px -2px rgba(15, 23, 42, 0.45); }   .social-fab-tooltip { position: absolute; right: calc(100% + 14px); white-space: nowrap; background: rgba(15, 23, 42, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #ffffff; font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 9999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.12); opacity: 0; transform: translateX(8px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .social-fab-tooltip::after { content: ''; position: absolute; top: 50%; right: -4px; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; background: rgba(15, 23, 42, 0.88); border-right: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid rgba(255, 255, 255, 0.12); }   @media (min-width: 640px) { .social-fab-container.open .social-fab-tooltip { opacity: 0.95; transform: translateX(0); } .social-fab-item:hover .social-fab-tooltip { opacity: 1; background: #0f172a; transform: translateX(-3px); } } @media (max-width: 639px) { .social-fab-container { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 18px; } .social-fab-trigger { width: 52px; height: 52px; } .social-fab-btn { width: 44px; height: 44px; } .social-fab-btn svg { width: 20px; height: 20px; } .social-fab-container.open .social-fab-tooltip { opacity: 0.95; transform: translateX(0); font-size: 0.75rem; padding: 0.3rem 0.65rem; } }   .features-hero { padding: calc(var(--nav-height, 80px) + 3.5rem) 0 3rem; text-align: center; position: relative; background: radial-gradient(circle at 50% 10%, rgba(13, 148, 136, 0.08) 0%, rgba(15, 23, 42, 0) 70%), var(--bg-surface); border-bottom: 1px solid var(--border-subtle); } .features-hero__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); background: rgba(13, 148, 136, 0.08); border: 1px solid rgba(13, 148, 136, 0.2); margin-bottom: 1.25rem; } .features-hero__badge svg { animation: pulse 2s infinite ease-in-out; } .features-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: var(--text-primary); max-width: 860px; margin: 0 auto 1.25rem; } .features-hero__title em { font-style: normal; background: linear-gradient(135deg, var(--brand-primary) 0%, #10B981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .features-hero__subtitle { font-size: clamp(1rem, 2vw, 1.15rem); color: var(--text-secondary); max-width: 720px; margin: 0 auto 2.5rem; line-height: 1.65; }   .features-filter-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; } .features-filter-btn { padding: 0.55rem 1.15rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 600; background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border-subtle); cursor: pointer; transition: all 0.25s ease; white-space: nowrap; user-select: none; } .features-filter-btn:hover { color: var(--text-primary); border-color: var(--brand-primary); transform: translateY(-1px); } .features-filter-btn.active { background: var(--brand-primary); color: #ffffff; border-color: var(--brand-primary); box-shadow: 0 4px 14px rgba(13, 148, 136, 0.28); }   .features-metrics-strip { padding: 2.5rem 0 3.5rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); } .features-metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } .features-metric-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 1.5rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .features-metric-card:hover { transform: translateY(-3px); border-color: rgba(13, 148, 136, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); } .features-metric-val { font-size: clamp(1.8rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--brand-primary); line-height: 1.1; margin-bottom: 0.4rem; } .features-metric-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.35rem; } .features-metric-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }   .features-detail-section { padding: 4rem 0 5rem; }   .features-tech-section { padding: 5rem 0; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); } .features-tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .features-tech-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 18px; padding: 2rem; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .features-tech-card:hover { transform: translateY(-3px); border-color: rgba(13, 148, 136, 0.35); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); } .features-tech-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(13, 148, 136, 0.1); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .features-tech-icon svg { width: 24px; height: 24px; } .features-tech-title { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.75rem; line-height: 1.3; } .features-tech-desc { font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }   .features-comp-section { padding: 5rem 0; }   .features-faq-section { padding: 5rem 0; background: var(--bg-surface); border-top: 1px solid var(--border-subtle); } .features-faq-grid { display: flex; flex-direction: column; gap: 1rem; max-width: 840px; margin: 2.5rem auto 0; }   .features__cta-banner { margin-top: 4rem; background: linear-gradient(135deg, rgba(13, 148, 136, 0.08) 0%, rgba(16, 185, 129, 0.05) 100%), var(--bg-card); border: 1px solid rgba(13, 148, 136, 0.25); border-radius: 20px; padding: 2.5rem 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); } .features__cta-banner-content { max-width: 600px; } .features__cta-banner-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-primary); margin-bottom: 0.5rem; } .features__cta-banner-title { font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-weight: 800; color: var(--text-primary); margin-bottom: 0.5rem; line-height: 1.25; } .features__cta-banner-desc { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.55; margin: 0; } .features__cta-banner-action { flex-shrink: 0; } .features__cta-banner-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--brand-primary); color: #ffffff !important; font-size: 0.95rem; font-weight: 600; padding: 0.85rem 1.6rem; border-radius: 12px; text-decoration: none; transition: all 0.25s ease; box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3); } .features__cta-banner-btn:hover { background: var(--brand-hover, #0f766e); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13, 148, 136, 0.45); } @media (max-width: 991px) { .features-metrics-grid { grid-template-columns: repeat(2, 1fr); } .features__cta-banner { flex-direction: column; text-align: center; padding: 2rem 1.5rem; } .features__cta-banner-action { width: 100%; } .features__cta-banner-btn { width: 100%; justify-content: center; } } @media (max-width: 639px) { .features-hero { padding-top: calc(var(--nav-height, 70px) + 2rem); } .features-metrics-grid { grid-template-columns: 1fr; gap: 1rem; } .features-filter-nav { gap: 0.4rem; } .features-filter-btn { font-size: 0.8rem; padding: 0.45rem 0.85rem; } .features-tech-grid { grid-template-columns: 1fr; } }   .features-split { padding: 6rem 0 7rem; position: relative; background: #ffffff; border-top: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.8)); border-bottom: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.8)); scroll-margin-top: var(--header-height, 74px); } .features-split__layout { display: grid; grid-template-columns: 380px 1fr; gap: 4.5rem; align-items: start; position: relative; }   .features-split__left { position: sticky; top: calc(var(--header-height, 74px) + 2.5rem); display: flex; flex-direction: column; align-items: flex-start; padding-right: 1rem; } .features-split__badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; border-radius: 9999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-primary, #ea580c); background: rgba(234, 88, 12, 0.08); border: 1px solid rgba(234, 88, 12, 0.25); margin-top: 0; margin-bottom: 1.25rem; } .features-split__badge svg { color: var(--brand-primary, #ea580c); } .features-split__title { font-size: clamp(2rem, 3.2vw, 2.65rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.03em; color: var(--text-primary, #0f172a); margin-top: 0; margin-bottom: 1.25rem; } .features-split__title em { font-style: italic; color: var(--brand-primary, #ea580c); } .features-split__desc { font-size: 1.02rem; color: var(--text-secondary, #475569); line-height: 1.65; margin: 0 0 2rem; } .features-split__cta-btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.45rem; border-radius: 12px; font-size: 0.92rem; font-weight: 600; color: var(--text-primary, #0f172a); background: #ffffff; border: 1.5px solid var(--border-subtle, #cbd5e1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); text-decoration: none; transition: all 0.25s ease; } .features-split__cta-btn:hover { color: var(--brand-primary, #ea580c); border-color: var(--brand-primary, #ea580c); box-shadow: 0 4px 16px rgba(234, 88, 12, 0.15); transform: translateY(-2px); } .features-split__cta-btn svg { transition: transform 0.25s ease; } .features-split__cta-btn:hover svg { transform: translateX(4px); }   .features-split__right { display: flex; flex-direction: column; } .features-split__item { display: grid; grid-template-columns: 48px 1fr auto; gap: 1.75rem; align-items: flex-start; padding: 2.5rem 0; border-top: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.9)); transition: background 0.25s ease, padding 0.25s ease; } .features-split__item:last-child { border-bottom: 1px solid var(--border-subtle, rgba(226, 232, 240, 0.9)); } .features-split__item-num { font-size: 1.15rem; font-weight: 800; color: var(--brand-primary, #ea580c); line-height: 1.3; letter-spacing: -0.01em; padding-top: 0.15rem; } .features-split__item-body { min-width: 0; } .features-split__item-tag { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary, #ea580c); margin-bottom: 0.45rem; display: inline-block; } .features-split__item-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary, #0f172a); margin: 0 0 0.5rem; line-height: 1.3; transition: color 0.2s ease; } .features-split__item-desc { font-size: 0.96rem; color: var(--text-secondary, #475569); line-height: 1.6; margin: 0; max-width: 620px; } .features-split__item-link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--brand-primary, #ea580c); text-decoration: none; padding-top: 0.25rem; white-space: nowrap; transition: color 0.2s ease, transform 0.2s ease; } .features-split__item-link svg { transition: transform 0.25s ease; } .features-split__item:hover .features-split__item-title { color: var(--brand-primary, #ea580c); } .features-split__item:hover .features-split__item-link svg { transform: translateX(4px); }   @media (max-width: 991px) { .features-split { padding: 5.5rem 0 5rem; } .features-split__layout { grid-template-columns: 1fr; gap: 3rem; } .features-split__left { position: static; padding-right: 0; } .features-split__item { grid-template-columns: 40px 1fr; gap: 1.25rem; padding: 2rem 0; } .features-split__item-link { grid-column: 2; margin-top: 0.5rem; } } @media (max-width: 639px) { .features-split { padding: 3.5rem 0 4rem; } .features-split__title { font-size: 1.85rem; } .features-split__item { grid-template-columns: 32px 1fr; gap: 0.85rem; padding: 1.6rem 0; } .features-split__item-title { font-size: 1.15rem; } .features-split__item-desc { font-size: 0.9rem; } }   .celebration-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(6, 9, 18, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .celebration-overlay.is-open { opacity: 1; pointer-events: auto; } .celebration-confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .celebration-card-wrapper { position: relative; max-width: 500px; width: 100%; z-index: 2; } .celebration-glow-aura { position: absolute; inset: -20px; background: radial-gradient(circle, rgba(255, 117, 21, 0.45) 0%, rgba(255, 117, 21, 0) 70%); filter: blur(30px); border-radius: 40px; pointer-events: none; animation: celebrationPulseAura 3s ease-in-out infinite alternate; } @keyframes celebrationPulseAura { 0% { transform: scale(0.92); opacity: 0.6; } 100% { transform: scale(1.08); opacity: 0.95; } } .celebration-card { position: relative; background: #ffffff; border-radius: 28px; padding: 2.75rem 2.25rem 2.25rem; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 117, 21, 0.25); text-align: center; transform: scale(0.85) translateY(20px); opacity: 0; transition: all 0.45s cubic-bezier(0.16, 1.3, 0.3, 1); overflow: hidden; } .celebration-overlay.is-open .celebration-card { transform: scale(1) translateY(0); opacity: 1; } .celebration-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #FF7515 0%, #ff9d55 50%, #FF7515 100%); } .celebration-close-btn { position: absolute; top: 1.25rem; right: 1.25rem; width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; border: none; display: inline-flex; align-items: center; justify-content: center; color: #64748b; cursor: pointer; transition: all 0.2s ease; z-index: 5; } .celebration-close-btn:hover { background: #e2e8f0; color: #0f172a; transform: rotate(90deg); } .celebration-badge-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 117, 21, 0.08); border: 1px solid rgba(255, 117, 21, 0.25); color: #FF7515; padding: 0.35rem 0.9rem; border-radius: 9999px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.25rem; } .celebration-live-dot { width: 7px; height: 7px; background: #FF7515; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 117, 21, 0.3); animation: celebrationDotPulse 1.5s infinite; } @keyframes celebrationDotPulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 0 6px rgba(255, 117, 21, 0); } 100% { transform: scale(0.9); opacity: 0.7; } } .celebration-hero-icon { position: relative; width: 86px; height: 86px; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; } .celebration-hero-circle { width: 86px; height: 86px; background: linear-gradient(135deg, #FF7515 0%, #ff8c3a 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(255, 117, 21, 0.45); animation: celebrationBounce 0.6s cubic-bezier(0.16, 1.4, 0.3, 1); } @keyframes celebrationBounce { 0% { transform: scale(0) rotate(-45deg); } 70% { transform: scale(1.15) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); } } .celebration-emoji-float { position: absolute; font-size: 1.6rem; user-select: none; animation: celebrationFloat 2.6s ease-in-out infinite alternate; } .celebration-emoji-float.f-1 { top: -8px; left: -12px; animation-delay: 0s; } .celebration-emoji-float.f-2 { bottom: -4px; right: -10px; animation-delay: 0.4s; } .celebration-emoji-float.f-3 { top: -2px; right: -14px; font-size: 1.3rem; animation-delay: 0.8s; } @keyframes celebrationFloat { 0% { transform: translateY(0) rotate(-6deg); } 100% { transform: translateY(-9px) rotate(8deg); } } .celebration-title { font-family: var(--font-heading, 'Figtree', sans-serif); font-size: 1.65rem; font-weight: 800; color: #0f172a; letter-spacing: -0.025em; line-height: 1.2; margin: 0 0 0.65rem 0; } .celebration-message { font-size: 0.95rem; color: #475569; line-height: 1.55; margin: 0 0 1.5rem 0; } .celebration-perks-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 18px; padding: 1rem 1.15rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; text-align: left; } .celebration-perk { display: flex; align-items: center; gap: 0.85rem; } .celebration-perk-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .celebration-perk-text { display: flex; flex-direction: column; gap: 0.15rem; } .celebration-perk-text strong { font-size: 0.85rem; font-weight: 700; color: #0f172a; } .celebration-perk-text span { font-size: 0.78rem; color: #64748b; line-height: 1.35; } .celebration-cta-group { display: flex; flex-direction: column; gap: 0.65rem; } .celebration-primary-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.95rem 1.5rem; background: linear-gradient(135deg, #FF7515 0%, #f76300 100%); color: #ffffff !important; font-size: 0.98rem; font-weight: 700; text-decoration: none !important; border-radius: 14px; box-shadow: 0 10px 25px -5px rgba(255, 117, 21, 0.45); transition: all 0.25s ease; overflow: hidden; } .celebration-primary-cta::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); transform: skewX(-20deg); animation: celebrationShimmer 3s infinite; } @keyframes celebrationShimmer { 0% { left: -100%; } 30%, 100% { left: 160%; } } .celebration-primary-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -4px rgba(255, 117, 21, 0.55); } .celebration-dismiss-btn { background: transparent; border: none; color: #64748b; font-size: 0.85rem; font-weight: 600; padding: 0.5rem; cursor: pointer; transition: color 0.2s ease; } .celebration-dismiss-btn:hover { color: #0f172a; } @media (max-width: 540px) { .celebration-card { padding: 2.25rem 1.35rem 1.75rem; border-radius: 22px; } .celebration-title { font-size: 1.4rem; } .celebration-message { font-size: 0.88rem; } }   .btn-nav-cta, .btn-nav-cta:hover { color: #172033 !important; } .subjects__badge, .features-split__badge, .features-split__title em, .features-split__item-num, .features-split__item-tag, .features-split__item-link, .subjects__footer-link { color: #a63e00; } .subjects__footer-text { color: #475569; } .comp-header-badge { color: #172033; } .partners-card__category { color: #64748b; } .footer-class-btn--highlight, .footer-section__whatsapp-chat { color: #172033 !important; } .footer-section__hours, .footer-section__copyright { color: #bac3d0; } .cta-phone-dot { padding: 0; border: 0; } .cta-phone-dot:focus-visible { outline: 2px solid #172033; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }