:root {
  --navy: #10275c;
  --blue: #1e3a8a;
  --bright: #267cf2;
  --sky: #8fd8ff;
  --cyan: #4ed6ed;
  --paper: #f7fbff;
  --white: #fff;
  --ink: #18264a;
  --muted: #64718d;
  --line: #dbe8fa;
  --gold: #ffc857;
  --coral: #ff6b70;
  --shadow: 0 18px 45px rgba(16, 39, 92, .10);
  --radius: 24px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
a { color: var(--blue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--bright); }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.skip-link { position: absolute; top: -80px; left: 16px; z-index: 1000; padding: 12px 18px; background: var(--white); border-radius: 12px; }
.skip-link:focus { top: 12px; }
.container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(219,232,250,.9); backdrop-filter: blur(16px); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; gap: 24px; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font-size: 1.17rem; font-weight: 900; letter-spacing: -.04em; white-space: nowrap; }
.brand-mark { width: 48px; height: 48px; object-fit: cover; border-radius: 14px; box-shadow: 0 5px 16px rgba(30,58,138,.15); }
.brand span span { color: var(--bright); }
.nav-links { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 2vw, 24px); }
.nav-links a { color: #405174; font-size: .92rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--bright); }
.nav-cta { background: var(--blue); color: var(--white) !important; padding: 10px 16px; border-radius: 999px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--navy); font-size: 1.25rem; }
.hero { position: relative; overflow: hidden; padding: 66px 0 56px; background: radial-gradient(circle at 80% 15%, rgba(143,216,255,.45), transparent 27%), linear-gradient(145deg,#fff 0%,#eff7ff 58%,#e7f8ff 100%); }
.hero:before { content: ""; position: absolute; width: 380px; height: 380px; right: -180px; bottom: -230px; border: 46px solid rgba(38,124,242,.07); border-radius: 50%; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 44px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #c7e7ff; color: var(--blue); background: #f3fbff; font-size: .79rem; font-weight: 900; text-transform: uppercase; letter-spacing: .11em; padding: 8px 12px; border-radius: 100px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(255,107,112,.13); }
h1, h2, h3, h4 { margin-top: 0; color: var(--navy); line-height: 1.12; letter-spacing: -.045em; }
h1 { font-size: clamp(2.6rem, 5.8vw, 5rem); margin: 20px 0; max-width: 700px; }
h1 .accent, .gradient-text { color: var(--bright); }
.hero-copy { max-width: 590px; color: #51617f; font-size: clamp(1rem,1.5vw,1.17rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 999px; padding: 13px 20px; background: var(--blue); color: white; font-weight: 850; text-decoration: none; box-shadow: 0 8px 18px rgba(30,58,138,.16); transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { color: white; transform: translateY(-2px); box-shadow: 0 12px 22px rgba(30,58,138,.22); }
.btn.secondary { background: white; color: var(--blue); border: 1px solid #cadcf8; box-shadow: none; }
.btn.small { padding: 9px 14px; font-size: .9rem; }
.hero-note { display: flex; gap: 9px; color: #6c7892; font-size: .9rem; align-items: center; }
.hero-note strong { color: var(--navy); }
.hero-art { position: relative; max-width: 540px; margin: 0 auto; }
.hero-art:before { content: ""; position: absolute; inset: 9% 6% 7%; background: linear-gradient(140deg,#5ccfff,#1e78ef); border-radius: 48% 52% 43% 57% / 48% 44% 56% 52%; transform: rotate(-5deg); box-shadow: inset 0 0 0 12px rgba(255,255,255,.5), 0 25px 60px rgba(24,101,210,.18); }
.hero-logo { position: relative; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 32px; filter: drop-shadow(0 24px 24px rgba(16,39,92,.10)); }
.floating-note { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); color: var(--navy); font-size: .88rem; font-weight: 850; }
.note-top { top: 10%; left: -6%; transform: rotate(-5deg); }
.note-bottom { right: -4%; bottom: 15%; transform: rotate(4deg); }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: rgba(255,255,255,.8); border: 1px solid var(--line); border-radius: 100px; color: #485979; font-size: .86rem; font-weight: 750; }
.section { padding: 76px 0; }
.section.compact { padding: 48px 0; }
.section.soft { background: #edf6ff; }
.section.dark { background: var(--navy); color: #eaf4ff; }
.section.dark h2, .section.dark h3 { color: white; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.section-head > div { max-width: 680px; }
.kicker { display: block; color: var(--bright); font-size: .78rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 950; margin-bottom: 9px; }
h2 { font-size: clamp(2rem,3.3vw,3.1rem); margin-bottom: 13px; }
h3 { font-size: 1.35rem; margin-bottom: 10px; }
.lead { font-size: 1.06rem; color: var(--muted); max-width: 740px; margin: 0; }
.section.dark .lead { color: #c6d5f3; }
.text-link { font-weight: 850; text-decoration: none; white-space: nowrap; }
.card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.card { background: white; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 7px 24px rgba(16,39,92,.045); }
.card-body { padding: 23px; }
.card p { color: var(--muted); margin: 0 0 15px; }
.card-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 17px; background: #e8f5ff; font-size: 1.65rem; margin-bottom: 17px; }
.card-icon.violet { background: #efedff; }
.card-icon.gold { background: #fff5d7; }
.card-icon.coral { background: #fff0ed; }
.card-icon.mint { background: #e2faf7; }
.card .tag { display: inline-flex; background: #f1f7ff; border: 1px solid #dbe9ff; border-radius: 999px; padding: 5px 9px; color: var(--blue); font-size: .74rem; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.split { display: grid; grid-template-columns: .94fr 1.06fr; gap: 44px; align-items: center; }
.feature-panel { background: linear-gradient(145deg,#153982,#257cf4); border-radius: 32px; padding: 30px; color: white; position: relative; overflow: hidden; }
.feature-panel:after { content: ""; position: absolute; width: 180px; height: 180px; right: -45px; top: -70px; border: 26px solid rgba(255,255,255,.13); border-radius: 50%; }
.feature-panel h3 { color: white; font-size: 1.8rem; }
.feature-panel p { color: #deedff; }
.feature-panel .big-emoji { font-size: 3.7rem; margin-bottom: 15px; }
.quote-card { background: white; border: 1px solid var(--line); border-radius: 24px; padding: 22px; box-shadow: var(--shadow); }
.quote-card blockquote { margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.quote-card figcaption { color: var(--muted); font-size: .9rem; }
.video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.video-card { background: white; border: 1px solid var(--line); border-radius: 20px; padding: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(16,39,92,.055); }
.video-frame { aspect-ratio: 9 / 16; width: 100%; border: 0; display: block; border-radius: 13px; background: #eaf5ff; }
.video-card.youtube .video-frame { aspect-ratio: 16 / 9; }
.video-title { font-size: .96rem; font-weight: 850; color: var(--navy); padding: 12px 5px 4px; margin: 0; }
.video-meta { color: var(--muted); font-size: .8rem; padding: 0 5px 6px; }
.empty-state { padding: 28px; border: 1px dashed #aac8f2; background: rgba(255,255,255,.75); border-radius: 20px; color: #526181; }
.empty-state strong { display: block; color: var(--navy); font-size: 1.04rem; margin-bottom: 5px; }
.empty-state p { margin: 0; }
.embed-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: start; }
.embed-shell { background: white; padding: 10px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; min-height: 210px; }
.embed-label { color: var(--muted); font-size: .8rem; font-weight: 850; padding: 8px 6px; }
.lesson-list { display: grid; gap: 12px; }
.lesson { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; padding: 19px 22px; background: white; border: 1px solid var(--line); border-radius: 18px; }
.lesson .guj { font-size: 1.14rem; font-weight: 900; color: var(--blue); }
.lesson .eng { font-weight: 800; color: var(--navy); }
.lesson small { display: block; font-weight: 600; color: var(--muted); font-size: .82rem; }
.joke-box { border-radius: 30px; background: white; border: 1px solid var(--line); padding: 30px; max-width: 820px; box-shadow: var(--shadow); }
.joke-box .emoji-line { font-size: 2.1rem; margin-bottom: 5px; }
.joke-text { font-size: clamp(1.35rem,2.2vw,1.85rem); font-weight: 850; color: var(--navy); line-height: 1.35; }
.joke-answer { color: var(--bright); font-weight: 800; margin: 14px 0 22px; }
.idea-tools { background: white; padding: 28px; border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.idea-result { background: #f2f9ff; border: 1px solid #d7ebff; border-radius: 18px; padding: 22px; margin: 18px 0; }
.idea-result h3 { margin-bottom: 9px; }
.idea-result p { color: var(--muted); margin: 0; }
.idea-result .format { font-size: .8rem; font-weight: 900; color: var(--blue); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.travel-card { min-height: 260px; border-radius: 24px; background: linear-gradient(145deg,#fff,#edf7ff); padding: 25px; border: 1px solid var(--line); position: relative; overflow: hidden; }
.travel-card .travel-emoji { font-size: 3.2rem; }
.travel-card:after { content: ""; position: absolute; width: 140px; height: 140px; border: 20px solid rgba(38,124,242,.07); border-radius: 50%; right: -45px; bottom: -45px; }
.notice { font-size: .9rem; color: #6b5a24; background: #fff8dc; border: 1px solid #f5df8b; padding: 13px 16px; border-radius: 14px; }
.cta-band { border-radius: 32px; padding: 38px; background: linear-gradient(115deg,#10275c,#247cf2); color: white; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.cta-band h2 { color: white; margin-bottom: 8px; font-size: clamp(1.8rem,3vw,2.6rem); }
.cta-band p { color: #dceaff; margin: 0; }
.cta-band .btn { background: white; color: var(--blue); flex-shrink: 0; }
.ad-slot { display: none; min-height: 95px; margin: 22px auto; max-width: 970px; text-align: center; }
.ad-slot.is-visible { display: block; }
.ad-caption { color: #8b96ab; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.page-hero { padding: 55px 0 45px; background: linear-gradient(130deg,#eff8ff,#e5f5ff); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.5rem,5vw,4rem); margin: 15px 0 12px; }
.page-hero p { color: var(--muted); max-width: 740px; font-size: 1.08rem; margin: 0; }
.copy-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.copy-status { font-size: .88rem; color: var(--muted); }
.site-footer { background: #0b1e49; color: #cbd9f3; padding: 48px 0 22px; }
.footer-grid { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 42px; padding-bottom: 35px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: white; font-weight: 950; font-size: 1.3rem; text-decoration: none; margin-bottom: 12px; }
.footer-brand img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; }
.site-footer p { color: #aabce0; max-width: 420px; margin: 0 0 14px; }
.site-footer h4 { font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: white; margin-bottom: 15px; }
.footer-links { display: grid; gap: 9px; }
.footer-links a, .social-links a { color: #d0def8; text-decoration: none; font-size: .92rem; }
.footer-links a:hover, .social-links a:hover { color: white; }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: .85rem; color: #93a8d0; }
.footer-bottom a { color: #cbd9f3; }
.prose { max-width: 820px; }
.prose h2 { margin-top: 38px; font-size: 1.75rem; }
.prose h3 { margin-top: 28px; }
.prose p, .prose li { color: #566584; }
.prose li { margin-bottom: 8px; }
.form-field { display: grid; gap: 7px; margin-bottom: 16px; }
.form-field label { font-weight: 800; color: var(--navy); }
.form-field input, .form-field textarea { width: 100%; border: 1px solid #cbdcf4; border-radius: 12px; padding: 12px 14px; background: white; color: var(--ink); }
.form-field textarea { min-height: 135px; resize: vertical; }
#contact-form { max-width: 700px; }
.mobile-only { display: none; }
@media (max-width: 960px) {
  .nav-wrap { min-height: 72px; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .nav-links { position: absolute; top: 71px; left: 0; right: 0; display: none; align-items: stretch; flex-direction: column; padding: 16px 22px 22px; border-bottom: 1px solid var(--line); background: white; box-shadow: 0 20px 28px rgba(16,39,92,.08); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 9px 4px; }
  .nav-cta { text-align: center; }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .note-top { left: -2%; }
  .note-bottom { right: -1%; }
  .card-grid, .video-grid, .embed-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .container { width: min(100% - 28px, 560px); }
  .hero { padding: 42px 0 35px; }
  .hero-grid, .split { grid-template-columns: 1fr; }
  .hero-copy { font-size: 1rem; }
  .hero-art { max-width: 430px; margin-top: 3px; }
  .floating-note { font-size: .78rem; padding: 8px 11px; }
  .note-top { top: 8%; left: 0; }
  .note-bottom { bottom: 12%; right: 0; }
  .section { padding: 55px 0; }
  .section-head { display: block; }
  .section-head .text-link { display: inline-block; margin-top: 14px; }
  .card-grid, .video-grid, .embed-grid { grid-template-columns: 1fr; }
  .lesson { grid-template-columns: 1fr; gap: 3px; padding: 17px; }
  .feature-panel { padding: 25px; }
  .cta-band { display: block; padding: 28px; }
  .cta-band .btn { margin-top: 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { display: block; }
  .footer-bottom span { display: block; margin-bottom: 8px; }
  .brand { font-size: 1.03rem; }
  .brand-mark { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { transition: none !important; } }