/* CSS Variables */
:root {
  --c-bg: #F5F9FF;
  --c-surface: #FFFFFF;
  --c-surface-alt: #F0F6FF;
  --c-line: #E2E8F0;
  --c-brand: #FF8A5C;
  --c-brand-accent: #FFCA3A;
  --c-brand-alt: #6EC3FF;
  --c-brand-alt2: #A777FF;
  --c-text: #2D3440;
  --c-text-soft: #5A6475;
  --rad-xl: 34px;
  --rad-lg: 22px;
  --rad-md: 14px;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,.12);
  --shadow-lg: 0 18px 42px -10px rgba(40,40,80,.25);
  --gradient-rainbow: linear-gradient(120deg,#FF8A5C,#FFCA3A,#6EC3FF,#A777FF);
  --speed-fast: .25s;
  font-size: clamp(15px, 1.05vw + 10px, 18px);
}

/* Global Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,202,58,.38),transparent 60%),
    radial-gradient(circle at 88% 72%,rgba(110,195,255,.32),transparent 65%),
    var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
img,svg { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.skip-link {
  position: absolute; left: -999px; top: -999px;
}
.skip-link:focus {
  left: 8px; top: 8px; background: #000; color:#fff; padding:.6rem 1rem; border-radius: 6px; z-index: 1000;
}

/* Top Contact Bar Styles */
.top-contact-bar {
  background: linear-gradient(90deg, var(--c-brand-alt), var(--c-brand-alt2));
  padding: 0.5rem 0;
  font-size: 0.85rem;
  color: white;
}

.top-contact-bar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.2rem;
  display: flex;
  justify-content: flex-end;
}

.contact-info {
  display: flex;
  gap: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-2px);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
}

.contact-item .icon {
  font-size: 1rem;
}

/* Nav */
.site-nav {
  position: sticky; top:0; z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(90deg,rgba(255,255,255,.82),rgba(255,255,255,.7));
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.nav-inner {
  max-width: 1180px; margin:0 auto; padding:.75rem 1.2rem;
  display:flex; align-items: center; justify-content: space-between; gap:1rem;
}
.brand {
  display:flex; align-items: center; font-weight:800; font-size:1.4rem; letter-spacing:.5px;
  color: var(--c-text);
}
.brand-mark { display:inline-flex; margin-right:.55rem; }
.brand-text { background:var(--gradient-rainbow); -webkit-background-clip:text; color:transparent; }
.primary-nav ul { display:flex; gap:1.6rem; font-weight:600; }
.primary-nav a { position:relative; padding:.3rem .2rem; color:var(--c-text-soft); }
.primary-nav a:after {
  content:""; position:absolute; left:0; bottom:-3px; width:0; height:3px;
  background: linear-gradient(90deg,var(--c-brand),var(--c-brand-accent));
  border-radius:2px; transition: width var(--speed-fast) ease;
}
.primary-nav a:hover { color: var(--c-text); }
.primary-nav a:hover:after { width:100%; }
.nav-toggle {
  display:none;
  background:var(--c-surface); border:1px solid var(--c-line);
  padding:.55rem .9rem; border-radius: var(--rad-md);
  font-weight:600; cursor:pointer;
  box-shadow: var(--shadow-sm);
}

/* Responsive Menu */
@media (max-width: 840px) {
  .nav-toggle { display:block; }
  .primary-nav ul {
    position:absolute; top:100%; right:1rem;
    flex-direction: column;
    background: var(--c-surface);
    padding: .9rem 1.1rem;
    border:1px solid var(--c-line);
    box-shadow: var(--shadow-md);
    border-radius: var(--rad-md);
    min-width: 170px;
    opacity:0; transform: translateY(-10px); pointer-events:none;
    transition: .35s cubic-bezier(.4,.6,.3,1);
  }
  .primary-nav ul.open {
    opacity:1; transform: translateY(0); pointer-events:auto;
  }
}

/* Hero */
.hero {
  padding: clamp(4rem, 12vh, 9rem) 1.2rem 4rem;
  position:relative;
}
.hero:before, .hero:after {
  content:""; position:absolute; inset:0; pointer-events:none;
}
.hero:before {
  background:
    radial-gradient(circle at 25% 30%,rgba(255,138,92,.18),transparent 60%),
    radial-gradient(circle at 80% 70%,rgba(167,119,255,.18),transparent 65%);
  mix-blend-mode: multiply;
}
.hero-grid {
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: clamp(2rem,5vw,5rem); align-items: center;
}
.hero-text h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.45rem);
  line-height:1.15;
  background: linear-gradient(100deg,var(--c-brand) 10%,var(--c-brand-accent),var(--c-brand-alt2) 85%);
  -webkit-background-clip: text; color: transparent;
  font-weight: 800;
}
.tagline { font-size:1.1rem; margin:1rem 0 1.6rem; color: var(--c-text-soft); }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.hero-graphic {
  aspect-ratio: 1.1 / 1;
  background:
    linear-gradient(145deg,#FFFFFF 0%,#F0F6FF 56%,#E3EEFF 100%);
  border:1px solid #E3ECF8;
  border-radius: var(--rad-xl);
  padding:1.1rem;
  position:relative;
  box-shadow: 0 10px 40px -12px rgba(50,70,160,.25), 0 4px 18px -6px rgba(50,60,140,.18);
  overflow:hidden;
}
.hero-graphic .scene { width:100%; height:100%; }
.hero-graphic .bouncer { animation: floatY 4s ease-in-out infinite; transform-origin: center; }

@keyframes floatY {
  0%,100% { transform: translateY(-6px); }
  50% { transform: translateY(8px); }
}

/* Buttons */
.btn {
  --btn-bg: var(--c-brand);
  --btn-bg-end: var(--c-brand-accent);
  --btn-color: #fff;
  font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  padding:.85rem 1.4rem;
  border-radius: 999px;
  font-size:.95rem;
  letter-spacing:.5px;
  position:relative;
  overflow:hidden;
  transition: background .35s, transform .35s, box-shadow .35s;
  text-decoration:none;
  border: none;
  cursor:pointer;
  box-shadow: var(--shadow-sm);
}
.btn-solid {
  background: linear-gradient(100deg,var(--btn-bg),var(--btn-bg-end));
  color: var(--btn-color);
}
.btn-solid:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-ghost {
  background: var(--c-surface);
  color: var(--c-brand);
  border:2px solid var(--c-brand);
}
.btn-ghost:hover { background: var(--c-brand); color:#fff; }

/* Section Generic */
.section {
  padding: clamp(3.2rem, 8vw, 6rem) 1.2rem;
  position:relative;
}
.section.alt {
  background: linear-gradient(180deg,#FFFFFF 0%, #F3F7FF 100%);
  border-top:1px solid #E2EAF3;
  border-bottom:1px solid #DCE5F1;
}
.section-title {
  font-size: clamp(1.7rem, 3.3vw, 2.4rem);
  font-weight:800;
  text-align:center;
  background: linear-gradient(90deg,var(--c-brand),var(--c-brand-alt2));
  -webkit-background-clip:text; color:transparent;
  margin:0 auto 2.4rem;
  position:relative;
  width: fit-content;
}
.section-title:after {
  content:"";
  display:block; height:6px; border-radius:3px;
  background: linear-gradient(90deg,var(--c-brand),var(--c-brand-accent));
  margin:.65rem auto 0; width:60%;
  box-shadow:0 2px 6px -2px rgba(255,138,92,.6);
}

/* Cards (课程) */
.card-grid {
  max-width:1180px; margin:0 auto;
  display:grid; gap:1.8rem;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
}
.card {
  background: var(--c-surface);
  border:1px solid #E4EDF6;
  border-radius: 26px;
  padding:1.55rem 1.4rem 1.9rem;
  position:relative;
  overflow:hidden;
  display:flex; flex-direction: column; gap: .9rem;
  box-shadow: var(--shadow-sm);
  transition:.5s cubic-bezier(.5,.8,.2,1);
}
.card:before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 78% 18%,rgba(255,202,58,.26),transparent 60%),
    radial-gradient(circle at 12% 82%,rgba(110,195,255,.24),transparent 65%);
  opacity:.65; pointer-events:none;
  transition:.6s ease;
}
.card:hover {
  transform: translateY(-6px) rotate(.4deg);
  box-shadow: var(--shadow-lg);
}
.card:hover:before { transform: scale(1.06); }
.card h3 { font-size:1.1rem; font-weight:700; }
.card p { font-size:.9rem; line-height:1.5; color: var(--c-text-soft); }

.icon-bubble {
  width:70px; height:70px; display:grid; place-items:center;
  font-size:1.65rem;
  border-radius: 24px;
  background: linear-gradient(140deg,#FFFFFF,#F4F9FF);
  border:1px solid #E2E8F0;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.18);
  position:relative;
  isolation: isolate;
  font-weight: 700;
}
.icon-bubble:after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 30%,rgba(255,202,58,.6),transparent 70%);
  mix-blend-mode: color-dodge; opacity:.7;
}

.icon-science { --glow: #FFCA3A; }
.icon-art { --glow:#FF8A5C; }
.icon-code { --glow:#6EC3FF; }
.icon-math { --glow:#A777FF; }
.icon-bubble {
  box-shadow: 0 4px 18px -4px var(--glow), 0 2px 4px rgba(0,0,0,.15);
}

/* 活动 */
.activities-strip {
  max-width:1180px; margin:0 auto;
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  gap:1.5rem;
  overflow-x:auto;
  padding-bottom:.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.activities-strip::-webkit-scrollbar { height:10px; }
.activities-strip::-webkit-scrollbar-track { background: #E6EEF7; border-radius: 99px; }
.activities-strip::-webkit-scrollbar-thumb {
  background: linear-gradient(160deg,var(--c-brand),var(--c-brand-accent));
  border-radius: 99px;
}
.activity-card {
  background: var(--c-surface);
  border:1px solid #E1E9F2;
  border-radius: 26px;
  padding:1rem 1rem 1.4rem;
  scroll-snap-align: start;
  display:flex; flex-direction: column;
  gap:.7rem;
  position:relative;
  overflow:hidden;
  min-height:260px;
  transition: .5s cubic-bezier(.4,.8,.2,1);
  box-shadow: var(--shadow-sm);
}
.activity-card:before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 80% 20%,rgba(167,119,255,.27),transparent 65%),
             radial-gradient(circle at 20% 85%,rgba(255,138,92,.27),transparent 60%);
  opacity:.8; pointer-events:none;
}
.activity-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.activity-thumb {
  border-radius: 20px;
  height:130px;
  background: linear-gradient(135deg,#fff,#F1F7FF);
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem;
  font-weight: 700;
  letter-spacing:1px;
  color:#fff;
}
.activity-thumb:after, .activity-thumb:before {
  content:""; position:absolute; border-radius:50%;
  filter: blur(10px);
  opacity:.85;
  animation: morph 8s linear infinite;
}
@keyframes morph {
  0%,100% { transform: translate(0) scale(1); }
  50% { transform: translate(18px,-10px) scale(1.15); }
}
.at1 { background: linear-gradient(120deg,#6EC3FF,#A777FF); }
.at1:before { width:120px; height:120px; background:#FFCA3A55; left:-20px; top:-10px;}
.at1:after { width:100px; height:100px; background:#FFFFFF40; right:-25px; bottom:-25px;}
.at2 { background: linear-gradient(120deg,#FF8A5C,#FFCA3A);}
.at2:before { width:100px;height:100px;background:#FFFFFF35; left:-10px; top:15px;}
.at2:after { width:110px;height:110px;background:#6EC3FF55; right:-25px; bottom:-30px;}
.at3 { background: linear-gradient(120deg,#6EC3FF,#6BCB77);}
.at3:before { width:120px;height:120px;background:#FF8A5C55; left:-20px; top:-10px;}
.at3:after { width:100px;height:100px;background:#FFFFFF25; right:-20px; bottom:-25px;}
.at4 { background: linear-gradient(120deg,#A777FF,#6EC3FF);}
.at4:before { width:110px;height:110px;background:#FFCA3A50; left:-15px; top:0;}
.at4:after { width:100px;height:100px;background:#FFFFFF30; right:-15px; bottom:-25px;}

.activity-title { font-size:1.05rem; font-weight:700; }
.activity-desc { font-size:.85rem; color: var(--c-text-soft); line-height:1.5; }

/* About & List */
.about-flex {
  max-width: 980px;
  margin: 0 auto;
  display:grid; gap:2.2rem;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}
.about-flex p {
  background: var(--c-surface);
  padding:1.6rem 1.4rem;
  border: 1px solid #E4ECF5;
  border-radius: 24px;
  line-height:1.65;
  font-size:.95rem;
  box-shadow: var(--shadow-sm);
}
.check-list {
  display:grid; gap:.85rem;
  padding: .2rem;
}
.check-list li {
  background: var(--c-surface);
  border:1px solid #E4ECF5;
  padding:.8rem 1rem .8rem 2.3rem;
  border-radius: 20px;
  font-weight:600;
  position:relative;
  font-size:.9rem;
}
.check-list li:before {
  content:""; width:16px; height:16px; border-radius:50%;
  background: linear-gradient(140deg,var(--c-brand),var(--c-brand-accent));
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  box-shadow:0 0 0 4px #FFFFFF;
}

/* Contact Form */
.contact-form {
  max-width: 640px;
  margin:0 auto;
  background: var(--c-surface);
  border:1px solid #E4ECF5;
  padding:2rem 1.6rem 2.4rem;
  border-radius: 30px;
  display:grid; gap:1.2rem;
  box-shadow: var(--shadow-sm);
}
.field {
  display:grid; gap:.4rem;
}
.field label { font-weight:600; font-size:.85rem; letter-spacing:.5px; color: var(--c-text-soft); text-transform: uppercase; }
.field input, .field textarea {
  font: inherit;
  border:1.5px solid #D4DEEA;
  padding:.75rem .9rem;
  border-radius: 16px;
  resize: vertical;
  background:#FAFCFF;
  transition: border-color .35s, box-shadow .35s, background .35s;
}
.field input:focus, .field textarea:focus {
  outline:none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 4px rgba(255,138,92,.25);
  background:#FFFFFF;
}
.form-tip {
  font-size:.75rem;
  color: var(--c-brand);
  font-weight:600;
  min-height:1em;
  margin-top:-.2rem;
}

/* Footer */
.site-footer {
  padding: 3.2rem 1.2rem 2.4rem;
  background: linear-gradient(180deg,#FFFFFF,#F3F7FF);
  border-top: 2px solid #E2EAF3;
  margin-top: 2rem;
  position:relative;
}
.site-footer:before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 10% 12%,rgba(255,138,92,.18),transparent 60%),
    radial-gradient(circle at 90% 85%,rgba(167,119,255,.18),transparent 65%);
  pointer-events:none;
}
.footer-grid {
  max-width:1180px; margin:0 auto 1.8rem;
  display:grid; gap:2rem;
  grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
}
.footer-grid h4 {
  font-size:.95rem; font-weight:800; letter-spacing:.5px;
  margin-bottom:.9rem;
  background: linear-gradient(90deg,var(--c-brand),var(--c-brand-alt2));
  -webkit-background-clip:text; color:transparent;
}
.footer-grid p, .footer-grid li, .footer-grid a {
  font-size:.8rem; line-height:1.55;
  color: var(--c-text-soft);
  text-decoration:none;
}
.footer-grid a:hover { color: var(--c-brand); }
.plain { list-style:none; display:grid; gap:.4rem; }

copyright {
  display:block;
}
copyright, .copyright {
  text-align:center; font-size:.7rem; color: #7B889A;
}

.copyright {
  font-weight:600;
}

/* Motion Reduction */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* High Contrast (forced-colors) */
@media (forced-colors: active) {
  :root {
    --c-brand: CanvasText;
    --c-brand-accent: Highlight;
  }
  .btn-solid, .btn-ghost {
    forced-color-adjust: none;
    border:1px solid Highlight;
    background: Canvas;
    color: CanvasText;
  }
  .btn-solid:hover {
    background: Highlight;
    color: HighlightText;
  }
  .icon-bubble, .card, .activity-card, .contact-form {
    border: 1px solid CanvasText;
  }
}

/* Utility */
::-moz-selection { background: var(--c-brand); color:#fff; }
::selection { background: var(--c-brand); color:#fff; }
.process-step:hover {
    transform: translateY(-5px);
}

.step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 20px;
}

.process-step h5 {
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.process-step p {
    color: #666;
    line-height: 1.6;
}

/* Tuition Cards */
.tuition-card {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    height: 100%;
}

.tuition-card:hover {
    transform: translateY(-5px);
}

.tuition-card h4 {
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.tuition-amount {
    font-size: 2.5rem;
    font-weight: bold;
    color: #667eea;
    margin-bottom: 5px;
}

.tuition-card ul li {
    color: #666;
    margin-bottom: 5px;
}

/* Application Form */
.application-form, .contact-form {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-control, .form-select {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    padding: 12px 15px;
    transition: border-color 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.form-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

/* Contact Info Cards */
.contact-info-card {
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease;
}

.contact-info-card:hover {
    transform: translateY(-5px);
}

.contact-icon {
    font-size: 2.5rem;
    color: #667eea;
    margin-bottom: 15px;
}

.contact-info-card h5 {
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.contact-info-card p {
    color: #666;
    line-height: 1.6;
}

.contact-info-card a {
    color: #667eea;
    text-decoration: none;
}

.contact-info-card a:hover {
    text-decoration: underline;
}

/* Map Container */
.map-container {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.map-info h5 {
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.map-info p {
    color: #666;
    margin-bottom: 15px;
}

/* FAQ Accordion */
.accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 15px !important;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.accordion-button {
    background: white;
    border: none;
    font-weight: 600;
    color: #333;
    padding: 20px;
}

.accordion-button:not(.collapsed) {
    background: #667eea;
    color: white;
}

.accordion-button:focus {
    box-shadow: none;
    border: none;
}

.accordion-body {
    background: #f8f9fa;
    padding: 20px;
    color: #666;
    line-height: 1.6;
}

/* Social Links */
.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-link {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
    color: white;
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

.footer h5 {
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer p {
    color: #bdc3c7;
    line-height: 1.6;
}

.footer ul li {
    margin-bottom: 10px;
}

.footer ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer ul li a:hover {
    color: #667eea;
}

.footer hr {
    border-color: #34495e;
    margin: 30px 0 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .top-header .text-end {
        text-align: left !important;
        margin-top: 10px;
    }
    
    .navbar-nav {
        text-align: center;
        margin-top: 20px;
    }
    
    .social-links {
        flex-wrap: wrap;
        gap: 15px;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 60px 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .feature-card, .news-card, .mission-card, .vision-card,
    .value-card, .team-card, .grade-card, .subject-card,
    .program-card, .requirement-card, .process-step,
    .tuition-card, .contact-info-card {
        margin-bottom: 30px;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Lab Facilities Section */
.lab-facilities {
    background: #f8f9fa;
}

.facility-item {
    transition: transform 0.3s ease;
    padding: 15px;
    border-radius: 10px;
}

.facility-item:hover {
    transform: translateX(10px);
    background: white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.facility-item i {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 50%;
}

.lab-gallery img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px;
}

.lab-gallery img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* CTA Section */
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>') repeat;
    opacity: 0.3;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

.cta-buttons .btn {
    margin: 5px;
    min-width: 150px;
}

.btn-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255,255,255,0.3);
}

.btn-outline-light {
    border: 2px solid white;
    color: white;
    font-weight: 600;
}

.btn-outline-light:hover {
    background: white;
    color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255,255,255,0.3);
}

/* Enhanced Animations */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-slide-left {
    animation: slideInLeft 0.6s ease-out;
}

.animate-slide-right {
    animation: slideInRight 0.6s ease-out;
}

.animate-fade-scale {
    animation: fadeInScale 0.6s ease-out;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a6fd8;
}

/* Language Switcher Styles */
.language-switcher {
  margin-left: 1rem;
}

.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-accent) 100%);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.lang-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.lang-btn:active {
  transform: translateY(1px);
}

.lang-btn::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(45deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
  transform: rotate(45deg) translateX(-100%);
  transition: transform 0.5s;
}

.lang-btn:hover::before {
  transform: rotate(45deg) translateX(100%);
}

.lang-text {
  position: relative;
  z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-inner {
    justify-content: space-between;
  }
  
  .language-switcher {
    margin-left: auto;
    margin-right: 1rem;
  }
}

/* Animation for language transition */
[data-i18n] {
  transition: opacity 0.3s;
}

html[lang="zh"] [data-i18n],
html[lang="en"] [data-i18n] {
  animation: fadeTranslation 0.5s forwards;
}

@keyframes fadeTranslation {
  0% {
    opacity: 0.7;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}