/* CSS Variables - Design System */
:root {
  --background: #FAFAFC;
  --foreground: #1F1F2E;
  --primary: #df597b;
  --primary-hover: #963744;
  --light-purple: #f3d3ec;
  --card: #FFFFFF;
  --secondary-text: #6E6E80;
  --border: #E8E8EF;
  --success: #21C87A;
  --warning: #F5B301;
  --error: #F05252;

  --spacing-section: 120px;
  --spacing-card: 32px;
  --spacing-button: 16px;
  --spacing-padding: 24px;

  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Dark Mode Variables */
[data-theme="dark"] {
  --background: #1A1A2E;
  --foreground: #FAFAFC;
  --primary: #ff7aa2;
  --primary-hover: #df597b;
  --light-purple: #2d2d4a;
  --card: #252542;
  --secondary-text: #A0A0B0;
  --border: #3d3d5c;
  --success: #34D399;
  --warning: #FBBF24;
  --error: #F87171;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(250, 250, 252, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo {
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
}

.navbar-links {
  display: flex;
  gap: 32px;
}

.navbar-links a {
  color: var(--foreground);
  transition: color 0.2s ease;
}

.navbar-links a:hover {
  color: var(--primary);
}

.navbar-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.navbar-toggle svg,
.navbar-toggle i {
  width: 24px;
  height: 24px;
  color: var(--foreground);
}

.navbar-menu {
  display: none;
  margin-top: 16px;
  flex-direction: column;
  gap: 16px;
}

.navbar-menu.active {
  display: flex;
}

@media (max-width: 768px) {
  .navbar-links {
    display: none;
  }

  .navbar-toggle {
    display: block;
  }
}

/* Main Content */
main {
  flex: 1;
}

/* Sections */
section {
  padding: 80px 24px;
}

section:nth-child(even) {
  background: var(--light-purple);
}

/* Hero */
.hero {
  padding-top: 160px;
  padding-bottom: 80px;
  text-align: center;
}

.hero h1 {
  font-size: 56px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--foreground);
}

.hero p {
  font-size: 24px;
  color: var(--secondary-text);
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn:hover {
  transform: scale(1.05);
}

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

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-secondary {
  background: var(--light-purple);
  color: var(--primary);
}

.btn-secondary:hover {
  background: #e0d0ff;
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

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

.btn-lg {
  padding: 16px 32px;
  font-size: 18px;
}

/* Cards */
.card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(108, 62, 244, 0.1);
}

.card-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon i,
.card-icon svg {
  width: 48px;
  height: 48px;
  color: var(--primary);
}

.card h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--primary);
}

.card p {
  color: var(--secondary-text);
  margin-bottom: 16px;
}

/* Grid */
.grid {
  display: grid;
  gap: 32px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Section Titles */
.section-title {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 64px;
  color: var(--foreground);
}

/* Features */
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--secondary-text);
}

.feature-item::before {
  content: '•';
  color: var(--primary);
}

/* Timeline */
.timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.timeline-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 24px;
  text-align: center;
  min-width: 160px;
}

.timeline-step p {
  font-weight: 600;
  color: var(--primary);
}

.timeline-arrow {
  font-size: 24px;
  color: var(--primary);
}

@media (max-width: 768px) {
  .timeline-arrow {
    display: none;
  }

  .timeline {
    flex-direction: column;
  }
}

/* Reviews */
.review-stars {
  color: #fbbf24;
  font-size: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-stars i,
.review-stars svg {
  width: 20px;
  height: 20px;
  color: #fbbf24;
}

.review-text {
  color: var(--secondary-text);
  font-style: italic;
  margin-bottom: 16px;
}

.review-author {
  font-weight: 600;
  color: var(--foreground);
}

/* About Card */
.about-card {
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.about-avatar {
  width: 96px;
  height: 96px;
  background: rgba(108, 62, 244, 0.1);
  border-radius: 50%;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.about-avatar i,
.about-avatar svg {
  width: 48px;
  height: 48px;
  color: var(--primary);
}

/* CTA Section */
.cta {
  text-align: center;
  padding: 80px 24px;
}

.cta h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--foreground);
}

.cta p {
  font-size: 20px;
  color: var(--secondary-text);
  margin-bottom: 40px;
}

/* Footer */
.footer {
  background: var(--card);
  border-top: 1px solid var(--border);
  margin-top: 128px;
  padding: 48px 24px;
}

.footer .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.footer h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 16px;
}

.footer h4 {
  font-weight: 600;
  margin-bottom: 16px;
}

.footer ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer a {
  color: var(--secondary-text);
  font-size: 14px;
  transition: color 0.2s ease;
}

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

.footer p {
  color: var(--secondary-text);
  font-size: 14px;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding-top: 32px;
  text-align: center;
  color: var(--secondary-text);
  font-size: 14px;
}

@media (max-width: 768px) {
  .footer .container {
    grid-template-columns: 1fr;
  }
}

/* Form */
.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--foreground);
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  font-family: inherit;
  font-size: 16px;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(108, 62, 244, 0.1);
}

.form-textarea {
  resize: none;
  min-height: 150px;
}

.form-card {
  max-width: 600px;
  margin: 0 auto;
}

/* Contact Options */
.contact-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.contact-option {
  text-align: center;
}

.contact-option-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-option-icon i,
.contact-option-icon svg {
  width: 48px;
  height: 48px;
  color: var(--primary);
}

.contact-option h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--foreground);
}

.contact-option p {
  color: var(--secondary-text);
  margin-bottom: 8px;
}

.contact-option a {
  color: var(--primary);
}

/* Social Links */
.social-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 32px;
}

.social-link {
  width: 56px;
  height: 56px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  transition: all 0.2s ease;
}

.social-link i,
.social-link svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.social-link:hover {
  border-color: var(--primary);
  transform: scale(1.1);
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.stat-value {
  font-size: 48px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.stat-label {
  color: var(--secondary-text);
}

@media (max-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* FAQ */
.faq-item {
  margin-bottom: 24px;
}

.faq-question {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--foreground);
}

.faq-answer {
  color: var(--secondary-text);
}

/* App Detail */
.app-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.app-hero-content {
  flex: 1;
}

.app-hero-visual {
  background: var(--light-purple);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.app-hero-visual .emoji {
  font-size: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-hero-visual .emoji i,
.app-hero-visual .emoji svg {
  width: 64px;
  height: 64px;
  color: var(--primary);
}

@media (max-width: 768px) {
  .app-hero {
    grid-template-columns: 1fr;
  }
}

/* How It Works Steps */
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
}

.step-number {
  width: 48px;
  height: 48px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
  flex-shrink: 0;
}

.step-content h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--foreground);
}

.step-content p {
  color: var(--secondary-text);
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 40px;
  }

  .hero p {
    font-size: 18px;
  }

  .section-title {
    font-size: 32px;
  }

  .contact-options {
    grid-template-columns: 1fr;
  }

  .cta h2 {
    font-size: 32px;
  }
}

/* Personal project hub */
.personal-site { --ink: #171720; --paper: #fffdf7; --lime: #d9ff62; --purple: #c9b8ff; --pink: #ffcad9; --yellow: #ffe580; background: var(--paper); color: var(--ink); }
.personal-site section { background: transparent; }
.personal-nav { position: fixed; inset: 0 0 auto; z-index: 100; background: rgba(255,253,247,.92); border-bottom: 1px solid rgba(23,23,32,.12); backdrop-filter: blur(14px); }
.personal-nav-inner { height: 76px; display: flex; align-items: center; gap: 38px; }
.personal-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; }
.logo-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--ink); color: #fff; transform: rotate(-4deg); }
.personal-nav-links { display: flex; gap: 28px; margin-left: auto; font-weight: 600; }
.personal-nav-links a:hover { color: #6846d6; }
.nav-note { padding: 11px 17px; border: 2px solid var(--ink); border-radius: 12px; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); }
.site-preferences { display: flex; align-items: center; gap: 8px; }
.language-picker { height: 42px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid rgba(23,23,32,.2); border-radius: 11px; background: white; }
.language-picker svg { width: 17px; }
.language-picker select { border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.personal-theme-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(23,23,32,.2); border-radius: 11px; background: white; color: var(--ink); cursor: pointer; }
.personal-theme-button svg { width: 19px; }
.personal-menu-button { display: none; border: 0; background: transparent; padding: 8px; }
.personal-mobile-menu { display: none; padding: 8px 24px 22px; font-weight: 700; }
.personal-mobile-menu.active { display: flex; flex-direction: column; gap: 15px; }
.personal-hero { min-height: 760px; padding: 170px 24px 100px; overflow: hidden; }
.personal-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); align-items: center; gap: 56px; }
.eyebrow { font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 18px; }
.hero-copy h1 { max-width: 620px; font-size: clamp(42px, 5vw, 68px); line-height: 1.02; letter-spacing: -.045em; margin-bottom: 28px; }
.hero-copy h1 span { position: relative; z-index: 0; white-space: normal; }
.hero-copy h1 span::after { content: ''; position: absolute; z-index: -1; height: 22%; left: -1%; right: -1%; bottom: 4%; background: var(--lime); transform: rotate(-1deg); }
.hero-intro { max-width: 670px; font-size: 20px; line-height: 1.65; color: #51515f; }
.personal-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.personal-btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 15px 21px; border: 2px solid var(--ink); border-radius: 13px; font-weight: 750; }
.personal-btn svg { width: 18px; }
.personal-btn-dark { background: var(--ink); color: white; }
.personal-btn-light { background: white; box-shadow: 3px 3px 0 var(--ink); }
.personal-btn-green { background: var(--lime); box-shadow: 4px 4px 0 var(--ink); flex-shrink: 0; }
.hero-visual { position: relative; min-height: 430px; display: grid; place-items: center; }
.hero-visual::before { content: ''; position: absolute; width: 410px; height: 410px; border-radius: 43% 57% 52% 48%; background: var(--purple); transform: rotate(8deg); }
.visual-card { position: relative; z-index: 2; width: min(340px, 80vw); padding: 34px; background: white; border: 2px solid var(--ink); border-radius: 24px; box-shadow: 9px 9px 0 var(--ink); transform: rotate(-3deg); }
.visual-card strong { display: block; font-size: 33px; margin: 14px 0 2px; }
.visual-card > span:not(.visual-label) { color: #666; }
.visual-label { display: inline-block; padding: 6px 10px; background: var(--yellow); border-radius: 20px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.sound-line { margin-top: 24px; padding: 12px 15px; border-radius: 12px; background: #f1eff8; display: flex; align-items: center; gap: 6px; }
.sound-line span { width: 5px; border-radius: 5px; background: #6a4ed1; height: 18px; }.sound-line span:nth-child(2n){height:28px}.sound-line span:nth-child(3){height:12px}
.visual-orbit { position: absolute; z-index: 3; display: grid; place-items: center; border: 2px solid var(--ink); background: white; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.orbit-one { left: 4%; top: 15%; padding: 11px 17px; border-radius: 12px; transform: rotate(-9deg); background: var(--lime); }
.orbit-two { right: 2%; top: 9%; width: 58px; height: 58px; border-radius: 50%; background: var(--yellow); }
.orbit-three { right: 3%; bottom: 7%; width: 65px; height: 65px; border-radius: 18px; background: var(--pink); transform: rotate(8deg); }
.projects-section { padding: 115px 24px; background: #f2f0eb !important; border-block: 1px solid #dedbd3; }
.personal-section-heading { text-align: left; max-width: 720px; margin-bottom: 55px; }
.personal-section-heading h2, .about-copy h2, .lesson-note h2, .connect-section h2 { font-size: clamp(38px, 5vw, 60px); line-height: 1.06; letter-spacing: -.04em; margin-bottom: 20px; }
.personal-section-heading > p:last-child { color: #5b5b67; font-size: 18px; }
.project-list { display: grid; gap: 20px; }
.project-card { min-height: 290px; padding: 36px; display: grid; grid-template-columns: 60px 180px 1fr; align-items: center; gap: 35px; border: 2px solid var(--ink); border-radius: 24px; box-shadow: 6px 6px 0 var(--ink); }
.project-yellow { background: var(--yellow); }.project-pink { background: var(--pink); }.project-purple { background: var(--purple); }
.project-number { align-self: start; font-weight: 800; }
.project-icon { width: 150px; height: 150px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255,255,255,.72); }
.project-icon svg { width: 61px; height: 61px; stroke-width: 1.7; }
.project-type { margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-copy h3 { font-size: 38px; letter-spacing: -.03em; margin-bottom: 10px; }
.project-copy > p:not(.project-type) { max-width: 720px; font-size: 17px; }
.project-copy a { display: inline-flex; gap: 8px; align-items: center; margin-top: 20px; padding-bottom: 3px; border-bottom: 2px solid var(--ink); font-weight: 800; }
.project-copy a svg { width: 17px; }
.about-personal { padding: 130px 24px; }
.about-personal-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 100px; align-items: center; }
.about-symbol { position: relative; min-height: 430px; display: grid; place-items: center; }
.about-symbol::before { content: ''; position: absolute; width: 350px; height: 350px; border-radius: 46% 54% 38% 62%; background: var(--lime); transform: rotate(-10deg); }
.about-symbol-inner { position: relative; z-index: 1; width: 190px; height: 190px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font-size: 88px; font-weight: 800; }
.symbol-word { position: absolute; z-index: 2; padding: 8px 13px; border: 2px solid var(--ink); border-radius: 10px; background: white; font-weight: 800; box-shadow: 3px 3px 0 var(--ink); }
.word-one { top: 9%; right: 4%; transform: rotate(7deg); }.word-two { left: 3%; bottom: 16%; transform: rotate(-8deg); }.word-three { right: 8%; bottom: 4%; transform: rotate(4deg); background: var(--pink); }
.about-copy > p:not(.eyebrow) { margin-bottom: 17px; color: #555563; font-size: 18px; }
.language-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px; }
.language-chips span { padding: 8px 12px; background: #f1eff8; border-radius: 10px; font-weight: 700; font-size: 13px; }
.lesson-note { padding: 40px 24px 115px; }
.lesson-note-card { padding: 55px 60px; display: flex; align-items: center; justify-content: space-between; gap: 60px; border: 2px solid var(--ink); border-radius: 26px; background: #e9e1ff; box-shadow: 7px 7px 0 var(--ink); }
.lesson-note-card > div { max-width: 760px; }.lesson-note-card h2 { font-size: clamp(34px,4vw,50px); }.lesson-note-card p:last-child { font-size: 17px; color: #51515f; }
.lesson-note-card > .lesson-actions { max-width: none; display: flex; flex-direction: column; align-items: stretch; gap: 14px; flex-shrink: 0; }
.connect-section { padding: 110px 24px; background: var(--ink) !important; color: white; }
.connect-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.connect-links { display: grid; }
.connect-links a, .social-coming { display: flex; justify-content: space-between; align-items: center; padding: 21px 4px; border-bottom: 1px solid #555560; font-weight: 700; }
.connect-links span { display: flex; align-items: center; gap: 12px; }.connect-links svg { width: 20px; }.social-coming small { color: var(--lime); text-transform: uppercase; font-weight: 800; letter-spacing: .06em; }
.personal-footer { padding: 35px 0; background: var(--ink); color: #aaaab3; border-top: 1px solid #33333d; }
.personal-footer .container { display: flex; justify-content: center; gap: 20px; }
.preply-reputation { display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; font-weight: 700; flex-wrap: wrap; }
.preply-logo { width: 153px; height: 70px; display: block; flex: 0 0 auto; background: url("images/preply-logo.png") -33px -53px / 729px 410px no-repeat; border-radius: 7px; }
.preply-reputation strong { color: #ffe03d; font-size: 20px; }

/* Dark theme */
[data-theme="dark"] .personal-site { --ink: #f6f3ff; --paper: #17161c; --lime: #b8e64b; --purple: #806bc4; --pink: #ba6680; --yellow: #c19f3c; background: var(--paper); color: var(--ink); }
[data-theme="dark"] .personal-nav { background: rgba(23,22,28,.92); border-color: #3b3943; }
[data-theme="dark"] .logo-mark { background: #f6f3ff; color: #17161c; }
[data-theme="dark"] .language-picker, [data-theme="dark"] .personal-theme-button { background: #242229; color: #f6f3ff; border-color: #4b4853; }
[data-theme="dark"] .language-picker select { color: #f6f3ff; color-scheme: dark; }
[data-theme="dark"] .hero-intro, [data-theme="dark"] .personal-section-heading > p:last-child, [data-theme="dark"] .about-copy > p:not(.eyebrow), [data-theme="dark"] .lesson-note-card p:last-child { color: #c5c1cc; }
[data-theme="dark"] .personal-btn-dark { background: #f6f3ff; color: #17161c; border-color: #f6f3ff; }
[data-theme="dark"] .personal-btn-light, [data-theme="dark"] .visual-card, [data-theme="dark"] .visual-orbit, [data-theme="dark"] .symbol-word { background: #25232b; color: #f6f3ff; }
[data-theme="dark"] .personal-btn-light { box-shadow: 3px 3px 0 #f6f3ff; }
[data-theme="dark"] .visual-card { box-shadow: 9px 9px 0 #f6f3ff; }
[data-theme="dark"] .visual-orbit, [data-theme="dark"] .symbol-word { box-shadow: 3px 3px 0 #f6f3ff; }
[data-theme="dark"] .projects-section { background: #211f26 !important; border-color: #393640; }
[data-theme="dark"] .project-card, [data-theme="dark"] .lesson-note-card { color: #17161c; border-color: #f6f3ff; box-shadow: 6px 6px 0 #f6f3ff; }
[data-theme="dark"] .project-icon { background: rgba(255,255,255,.35); border-color: #17161c; }
[data-theme="dark"] .about-symbol-inner { background: #f6f3ff; color: #17161c; }
[data-theme="dark"] .language-chips span, [data-theme="dark"] .sound-line { background: #2b2932; }
[data-theme="dark"] .lesson-note-card { box-shadow: 7px 7px 0 #f6f3ff; }
[data-theme="dark"] .connect-section, [data-theme="dark"] .personal-footer { background: #0d0c10 !important; }

@media (max-width: 900px) {
  .personal-nav-inner { gap: 12px; }.personal-nav-links { display: none; }.personal-menu-button { display: grid; place-items: center; }.site-preferences { margin-left: auto; }.nav-note { display: none; }
  .personal-hero-grid, .about-personal-grid, .connect-grid { grid-template-columns: 1fr; }.personal-hero-grid { gap: 30px; }.personal-hero { padding-top: 135px; }
  .hero-visual { min-height: 390px; }.about-personal-grid { gap: 30px; }.about-symbol { order: 2; }
  .project-card { grid-template-columns: 45px 130px 1fr; }.project-icon { width: 120px; height: 120px; }
  .lesson-note-card { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
  .personal-nav-inner { height: 68px; padding-inline: 16px; gap: 7px; }.personal-logo > span:last-child { display: none; }.language-picker { padding-inline: 6px; }.language-picker svg { display: none; }.personal-hero { padding: 118px 20px 70px; min-height: auto; }.hero-copy h1 { font-size: 42px; }.hero-copy h1 span { white-space: normal; }.hero-intro { font-size: 17px; }
  .personal-actions, .personal-actions a { width: 100%; }.hero-visual::before { width: 310px; height: 310px; }.visual-card { padding: 26px; }.orbit-one { left: 0; }.orbit-two { right: 0; }.orbit-three { right: 0; }
  .projects-section, .about-personal, .connect-section { padding: 80px 20px; }.project-card { padding: 25px; grid-template-columns: 1fr; gap: 18px; }.project-number { position: absolute; }.project-icon { margin-left: auto; width: 90px; height: 90px; }.project-icon svg { width: 42px; }.project-copy h3 { font-size: 31px; }
  .about-symbol { min-height: 330px; }.about-symbol::before { width: 280px; height: 280px; }.about-symbol-inner { width: 150px; height: 150px; font-size: 70px; }
  .lesson-note { padding: 20px 20px 80px; }.lesson-note-card { padding: 32px 25px; gap: 28px; }.lesson-note-card .personal-btn, .lesson-actions { width: 100%; }
  .connect-grid { gap: 35px; }.social-coming { align-items: flex-start; gap: 10px; }.social-coming small { text-align: right; }.personal-footer .container { flex-direction: column; }
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}