/* main.css — SuperEdu modern tech style (blue→purple gradient) */
:root{
  --brand-1:#4B89FF;
  --brand-2:#6E4BFF;
  --grad: linear-gradient(135deg,var(--brand-1) 0%,var(--brand-2) 100%);
  --bg:#F7F9FF;
  --muted:#6B7280;
  --text:#0A0A0A;
  --card:#ffffff;
  --glass: rgba(255,255,255,0.65);
  --radius:14px;
  --maxw:1200px;
}


html, body {
  background-color: #FAF5E9;
}



/* Reset basics */
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;font-family:Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}



:root {
    --font-main: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}
html, body { 
    font-family: var(--font-main);
}
nav a {
    font-family: var(--font-main);
    font-weight: 500;
}

/* NAV */
nav#topNav{position:fixed;top:0;left:0;width:100%;z-index:60;transition:all .25s ease}
nav#topNav.nav--transparent{background:transparent;border-bottom:0}
nav#topNav.nav--solid{background:rgba(255,255,255,0.96);border-bottom:1px solid #e6eaf3;box-shadow:0 6px 18px rgba(20,30,60,0.04);backdrop-filter: blur(6px)}
nav .nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{height:36px;width:auto;border-radius:8px;padding:4px;background:#fff}
.brand-text{font-weight:700;color:var(--brand-2);font-size:18px;line-height:1;transform:translateY(-2px)} /* lift text a bit to align with logo */

.menu{display:flex;gap:8px;align-items:center}
.menu a{padding:6px 12px;border-radius:8px;font-weight:600;color:#222;transition:all .15s}
.menu a:hover{color:var(--brand-1);transform:translateY(-1px)}
.nav-right{display:flex;align-items:center;gap:12px}
.lang-toggle{padding:8px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);background:#fff;cursor:pointer}
.hamburger{display:none;background:none;border:0;padding:6px;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#222;margin:4px 0;border-radius:2px;transition:all .2s}

/* mobile menu (slide) */
.mobile-menu{display:none;max-width:var(--maxw);margin:0 auto;padding:10px 20px;}

/* ===============================
   Prevent nav flicker on load
=============================== */
.nav-preload #topNav {
  transition: none !important;
}


/* HERO */
.hero{max-width:var(--maxw);margin:0 auto;padding:140px 20px 80px;display:grid;grid-template-columns:1fr 460px;gap:36px;align-items:center}
.hero-left{}
.hero-title{font-size:44px;line-height:1.08;margin:0 0 12px;font-weight:800}
.hero-desc{color:var(--muted);margin:0 0 18px;font-size:16px;max-width:640px}
.hero-ctas{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.btn{cursor:pointer;border-radius:12px;padding:12px 18px;font-weight:700;transition:all .15s;display:inline-block}
.btn-primary{background:var(--grad);color:#fff;border:0;box-shadow:0 8px 28px rgba(75,137,255,0.14)}
.btn-outline{background:transparent;border:2px solid var(--brand-1);color:var(--brand-1)}
.btn-link{background:transparent;border:0;color:var(--brand-2);font-weight:700}
.hero-subitems{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}
.sub-link{color:var(--muted);font-weight:600}

/* hero graphic */

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
.hero-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-graphic {
  width: 100%;
  height: 100%;
  max-height: 380px;
}
.hero-graphic.hero-photo {
  max-width: 600px;
  max-height: 380px;
}


/* SECTIONS */
.section {
  width: 100%;       /* 必须让 section 占满整屏宽度 */
  margin: 0;         /* 不要再用 auto 居中，内容由 inner 控制 */
  padding: 40px 0;   /* 上下间距 */
}

section .section-inner {
  max-width: var(--maxw);
  margin: 0 auto;    /* 内容居中 */
  padding: 0 20px;   /* 内容左右内边距 */
}

.section-title{font-size:30px;font-weight:800;color:var(--#5A47E0);text-align:center;margin:0}
.section-sub{text-align:center;color:var(--muted);margin-top:8px;margin-bottom:28px}

/* services grid */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:20px;
}

/* service card */
.service-card{
  background:linear-gradient(180deg,#fff,#FAF5E9);
  border-radius:12px;
  padding:18px;
  border:1px solid rgba(10,10,10,0.03);
  box-shadow:0 8px 24px rgba(9,30,66,0.04);
  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;

  /* 🔒 防止 Grid 自动跨列 */
  grid-column:auto;
}

/* card content */
.service-card h3{
  margin:0 0 8px;
  font-size:18px;
  color:#5A47E0;
}

.service-card .desc{
  color:var(--muted);
  line-height:1.45;
  margin-bottom:12px;
}

.services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.service-card{
  display:flex;      /* OK */
  cursor:pointer;    /* OK */
  min-width:0;       /* ⭐ 必须 */
}


.service-card:hover {
  transform: scale(1.02);
  border: 2px solid #3B82F6; /* 蓝色边框 */
}

/* tools area: three columns -> stacked on mobile */
.tools-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);padding:18px;border-radius:12px;border:1px solid rgba(0,0,0,0.04);box-shadow:0 6px 18px rgba(0,0,0,0.03)}
.card.wide{grid-column:1/-1}
.registration-card label{display:block;font-size:13px;margin-top:10px}
.registration-card input{width:100%;padding:10px;border-radius:8px;border:1px solid #e8e8e8;margin-top:6px}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:12px}
.form-status{font-size:13px;color:var(--muted)}

/* quick unlock vertical */
.quick-unlock-vertical input{width:100%;padding:10px;border-radius:8px;border:1px solid #e8e8e8;margin-top:8px}

/* resources */
.resources-grid{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.resource-pill{padding:10px 14px;border-radius:10px;background:linear-gradient(180deg,#fff,#FAF5E9);border:1px solid rgba(0,0,0,0.04);color:var(--brand-2);font-weight:700}

/* footer */
footer{background:#0f1724;color:#cbd5e1;padding:40px 20px;margin-top:40px}
.footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;gap:36px;flex-wrap:wrap}
.footer-col{flex:1;min-width:160px}
.footer-col h4{color:#fff;margin:0 0 8px}
.footer-copy{text-align:center;color:#94a3b8;margin-top:20px;padding-top:10px;border-top:1px solid rgba(255,255,255,0.02)}

/* responsive */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr 360px;padding:100px 20px 60px}
  .tools-wrap{grid-template-columns:1fr}
}
@media(max-width:720px){
  .menu{display:none}
  .hamburger{display:block}
  .hero{grid-template-columns:1fr;padding:110px 16px 40px}
  .brand-text{display:inline-block}
  .hero-title{font-size:28px}
  .hero-right{display:none}
  .services-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
  .mobile-menu{display:block}
  .mobile-menu a{display:block;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.03)}
  .mobile-actions{padding:12px 0;display:flex;gap:12px;flex-direction:column}
}

/* small niceties */
.btn:active{transform:translateY(1px)}

/* Ensure mobile menu is hidden by default */
.mobile-menu[aria-hidden="true"] {
  display: none;
}

/* === 强制：移动端基于 aria-hidden 隐藏/显示移动菜单 === */
/* 放在 main.css 最底部，确保覆盖 media 查询 */
@media (max-width: 720px) {
  /* 默认收起（当 aria-hidden="true"） */
  .mobile-menu[aria-hidden="true"] {
    display: none !important;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }

  /* 展开（当 aria-hidden="false"） */
  .mobile-menu[aria-hidden="false"] {
    display: block !important;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* 让汉堡 open 状态更明显（可选美化） */
  .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Section big icons */
.section-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

/* Small icons with h3 */
.card-title-with-icon,
.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title-with-icon svg,
.contact-item svg {
  flex-shrink: 0;
}

/* Increase clarity on mobile */
@media (max-width: 600px) {
  .section-icon svg {
    width: 56px;
    height: 56px;
  }
}

/* =========================================
   SECTION BACKGROUND COLORS (Enhanced Contrast)
   ========================================= */
/* 色彩更明显：蓝系、紫系交替，提升视觉区隔 */
 /*section#about { background: #E8EEFF; }        /* 更亮的浅蓝 */
 /*section#services { background: #EFE4FF; }     /* 明显浅紫 */
 /*section#planning { background: #E4F1FF; }     /* 更清的浅蓝 */
 /*section#tax { background: #F0E8FF; }          /* 淡紫更明显 */
 /*section#legal { background: #E9F3FF; }        /* 亮浅蓝白混合 */
 /*section#real-estate { background: #EDF1FF; }  /* 淡灰蓝 */
 /*section#contact { background: #EEE9FF; }      /* 更明显的浅灰紫 */
 /*section#faq { background: #E9F0FF; }          /* 亮浅蓝紫 */
 /*section#hero { background: #FFFFFF; }         /* 保持纯白，不变 */

/* =========================================
   SECTION SPACING (Reduced More)
   ========================================= */
section {
  padding: 40px 0;   /* 再次缩小 —— 更紧凑、专业 */
}

@media(max-width: 768px) {
  section {
    padding: 32px 0; /* 手机段更紧凑，但仍保持呼吸感 */
  }
}

/* =========================================
   ICON & TITLE SPACING TWEAKS
   ========================================= */
.section-icon {
  margin-bottom: 8px !important;
  width: 56px;
  height: 56px;
}

section h2.section-title {
  margin: 0 0 16px 0;   /* 再缩一丢丢 */
}

/* Small card icons */
.card-icon {
  margin-right: 8px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Card padding & margin refined */
.service-card,
.feature-card,
.info-card {
  padding: 18px 20px;   /* 略再小一点 */
  margin-bottom: 16px;
}

/* ========================================================
   5. SECTION SPACING OPTIMIZED（稍微更紧凑）
   ======================================================== */
@media (min-width: 1024px) {
  section {
    padding: 48px 0;
  }
}

@media (max-width: 768px) {
  section {
    padding: 36px 0;
  }
}


/* ========================================================
   FIX 2 — Mobile spacing for Webinar buttons
   ======================================================== */
@media (max-width: 768px) {
  .cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px !important; /* 按钮之间的间距 */
  }

  .cta-row .btn {
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ICON sizing + spacing for section and card icons */
.section-title-wrapper { text-align:center; margin-bottom:12px; position:relative; }
.section-title-icon { width:68px; height:68px; display:block; margin:0 auto 10px; }
.section-title-wrapper h2 { margin-top: 6px; font-size:28px; }

/* card icon (left of title) - keep compact and vertically centered */
.service-card { display:flex; gap:12px; align-items:flex-start; padding:16px; }
.card-icon { width:36px; height:36px; flex:0 0 36px; margin-top:6px; }

/* ensure small service-content doesn't collapse on narrow screens */
.service-content { flex:1; min-width:0; }

/* mobile tweaks: give webinar CTA buttons breathing room */
.card.wide .cta-row .btn { display:inline-block; margin-bottom:10px; }

/* if you want the section icon to be slightly elevated visually (subtle shadow) */
.section-title-icon rect,
.section-title-icon circle { filter: drop-shadow(0 6px 18px rgba(40,55,120,0.08)); }

/* =========================================
   SECTION BACKGROUND COLORS — FULL WIDTH
   ========================================= */
section#about { background-color: #E8EEFF; }
section#services { background-color: #EFE4FF; }
section#planning { background-color: #E4F1FF; }
section#tax { background-color: #F0E8FF; }
section#legal { background-color: #E9F3FF; }
section#real-estate { background-color: #EDF1FF; }
section#contact { background-color: #EEE9FF; }
section#faq { background-color: #E9F0FF; }
section#hero { background-color: #FFFFFF; }

/* =========================================
   SECTION INNER CONTAINER — 保持内容居中
   ========================================= */
section .section-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 20px; /* 可根据需要调整上下和左右内边距 */
}

/* 可选：针对响应式，手机段稍微减小内边距 */
@media (max-width: 768px) {
  section .section-inner {
    padding: 32px 16px;
  }
}


/* ==== TOP BANNER OPTIMIZED ==== */
.top-banner {
  width: 100%;             /* 占满屏幕宽度 */
  display: flex;
  justify-content: center; /* 居中内容 */
  overflow: hidden;
  max-height: 780px;       /* Desktop 高度 */
  background: #f7f9ff;     /* 防止图片加载慢时空白 */
}

.top-banner img {
  max-width: 1920px;       /* Desktop 最大宽度 */
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 保持比例裁剪 */
  display: block;
}

/* 手机适配 */
@media (max-width: 768px) {
  .top-banner {
    max-height: 200px;      /* 手机高度 */
  }
  .top-banner img {
    max-width: 100%;        /* 手机宽度 */
    height: 100%;
  }
}

/* ==== HERO RIGHT IMAGE OPTIMIZED ==== */
.hero-right {
  max-width: 480px;        /* Desktop 宽度 */
  width: 100%;
}

.hero-right .hero-graphic {
  width: 100%;
  max-height: 360px;       /* 控制高度 */
  object-fit: cover;       /* 保持比例 */
  border-radius: 22px;     /* 圆角保持原样 */
}

/* 手机隐藏 hero-right */
@media (max-width: 768px) {
  .hero-right {
    display: none;
  }
}


/* --- ONLY resize the 3 tool-card small icons --- */

.card h3 .sub-icon,
.registration-card h3 .sub-icon,
.unlock-card h3 .sub-icon,
.apply-card h3 .sub-icon {
  width: 38px;     /* 你可以设为 16px / 18px / 20px */
  height: 38px;
  flex: 0 0 38px;
  margin-right: 10px;    /* 图标与文字的间距 */
  vertical-align: middle;
}


/* 手机端（可选，但建议保留） */
@media (max-width: 720px) {
  .card h3 .sub-icon,
  .registration-card h3 .sub-icon,
  .unlock-card h3 .sub-icon,
  .apply-card h3 .sub-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
}

/* ===== Hero Title Final Recommended Style ===== */
.hero-title {
  font-family: 'Noto Sans SC', sans-serif;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 1.1px;
  line-height: 1.32;
  text-align: center;

  background: linear-gradient(90deg, #0057ff, #00c6ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow: 0 2px 5px rgba(0,0,0,0.08);
  animation: heroFadeIn 1.3s ease-out;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 28px;
    letter-spacing: 0.4px;
  }
}

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================
   SUBPAGE NAV COMPATIBILITY FIX
   放在 main.css 最底部
   ============================ */

/* 保证品牌区域内部链接显示为 flex（避免样式错位） */
.brand { display:flex; align-items:center; }
.brand-link { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand-link .logo-img { display:block; }

/* 确保 .nav-inner 保持居中容器行为（子页面也一样） */
nav#topNav .nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-sizing:border-box;
}

/* 当使用 nav--solid（子页面）时给出稳定背景和边框 */
nav#topNav.nav--solid {
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid #e6eaf3;
  box-shadow: 0 6px 18px rgba(20,30,60,0.04);
}

/* 菜单项保持 inline-flex 且不要折行，防止在子页上错位 */
.menu { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; }

/* 确保移动菜单在默认 aria-hidden=true 时被隐藏（与现有规则兼容） */
.mobile-menu[aria-hidden="true"] { display:none; opacity:0; transform:translateY(-6px); pointer-events:none; }

/* 给汉堡按钮与 mobileMenu 交互留出可访问性特性（JS 负责切换 aria-expanded/aria-hidden） */
.hamburger[aria-expanded="true"] { outline: none; }

/* 防止 logo-img 在不同页面大小突变（约束高度，保持一致） */
.logo-img { height:36px; width:auto; max-width:160px; object-fit:contain; }

/* 小屏幕下菜单折叠行为（如你已有的样式，确保此处不被覆盖） */
@media (max-width: 720px) {
  .menu { display:none; }
  .hamburger { display:block; }
  .mobile-menu[aria-hidden="false"] { display:block; opacity:1; transform:translateY(0); pointer-events:auto; }
}


/* ============================
   Mobile (narrow) spacing tune
   ============================ */
@media (max-width: 720px) {
  /* Make hero more compact on phones */
  .hero {
    padding: 80px 16px 32px; /* 减小顶部/底部空间 */
    grid-template-columns: 1fr; /* already applied, but keep */
    gap: 18px;
  }

  /* Sections: reduce vertical spacing and internal padding */
  .section {
    margin: 20px auto;      /* 原来 60px -> 20px，更紧凑 */
    padding: 18px 16px;     /* 原来 40px -> 18px */
  }

  /* Make section titles sit closer to their content */
  .section-title {
    margin-bottom: 8px;
    font-size: 22px;
  }
  .section-sub { margin-top: 6px; margin-bottom: 12px; }

  /* Cards: slightly smaller padding and tighter stacked gaps */
  .card {
    padding: 12px;
    border-radius: 12px;
  }

  /* Grid gaps */
  .services-grid { gap: 12px; }
  .tools-wrap { gap: 12px; }
  .resources-grid { gap: 8px; }

  /* Service card internals */
  .service-card { padding: 14px; }
  .service-card .desc { margin-bottom: 8px; font-size: 14px; }

  /* Tools CTA spacing — ensure the two webinar buttons are not touching */
  .cta-row { display:flex; gap:12px; flex-direction:column; align-items:stretch; }
  .cta-row .btn { margin-bottom: 8px; }

  /* Hero CTA spacing */
  .hero-ctas { gap: 10px; flex-direction:column; align-items:stretch; }
  .hero-ctas .btn { width:100%; }

  /* Mobile menu items spacing */
  .mobile-menu a { padding: 10px 0; }
  .mobile-actions { gap:10px; padding-top:10px; }

  /* Footer compact */
  footer { padding: 24px 12px; }
  .footer-inner { gap:18px; }

  /* Small niceties */
  .apply-cta, .btn { padding: 10px 12px; font-size: 15px; }
}

.menu a {
  position: relative;
  padding-bottom: 4px;
  text-decoration: none;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: #007aff;
  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

/* ===============================
   Desktop Navigation Typography
   =============================== */
@media (min-width: 992px) {

  .menu a {
    font-family:
      Inter,
      -apple-system,
      BlinkMacSystemFont,
      "PingFang SC",
      "Hiragino Sans GB",
      "Microsoft YaHei",
      "Noto Sans SC",
      sans-serif;

    font-size: 15.5px;          /* 比现在略大一点 */
    font-weight: 500;           /* 比默认更稳重 */
    letter-spacing: 0.02em;     /* 英文更高级 */
    padding: 10px 14px;
    color: #1f2937;             /* 深灰而非纯黑 */
    transition: color 0.2s ease;
  }

  /* 中文在视觉上略微紧凑一点 */
  .menu a[data-zh] {
    letter-spacing: 0.01em;
  }

  /* Hover 状态 */
  .menu a:hover {
    color: var(--brand-green);
  }

}

/* ===============================
   Nav Hover Color Sync with Underline
   =============================== */

@media (min-width: 992px) {

  /* 菜单 hover / focus 时文字变蓝 */
  .menu a:hover,
  .menu a:focus {
    color: var(--accent-blue, #2563eb);
  }

  /* 当前激活项（如果你有 active 状态） */
  .menu a.active {
    color: var(--accent-blue, #2563eb);
  }

}

/* ===============================
   Page offset for fixed nav
   =============================== */

/* Apply 页面整体下移 */
body.page-apply .container {
  margin-top: 120px; /* 或根据 header 高度调整 */
}


/* Education 页面整体下移 */
body.page-education main.container {
  margin-top: 120px; /* 根据 header 高度调整 */
}

/* Thank-you 页面 */
body.page-thankyou{
  padding-top:120px;
}

/* =====================================================
   TOOLS & QUICK ACTIONS — visual upgrade
   ===================================================== */

/* Tools 区卡片统一基类 */
.tools-section .tool-card{
  position:relative;
  background:linear-gradient(180deg,#fff,#FAF5E9); /* 与服务卡片一致 */
  border-radius:12px;
  padding:20px;
  border:1px solid rgba(10,10,10,0.04);
  box-shadow:0 8px 24px rgba(9,30,66,0.05);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

/* hover 整体微抬升 */
.tools-section .tool-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(9,30,66,0.08);
}

/* clickable（服务申请卡） */
.tools-section .tool-card.clickable{
  cursor:pointer;
}

/* clickable hover：服务卡片级反馈 */
.tools-section .tool-card.clickable:hover{
  transform:scale(1.03);
  border:2px solid #3B82F6; /* 蓝色高亮线 */
}

/* Apply 卡片标题放大 */
.tools-section .apply-card h3{
  transition:transform .2s ease;
}

.tools-section .apply-card:hover h3{
  transform:scale(1.05);
}

/* Apply 卡片箭头提示 */
.tools-section .apply-card::after{
  content:"→";
  position:absolute;
  right:18px;
  bottom:18px;
  font-size:22px;
  opacity:.35;
  transition:transform .2s ease, opacity .2s ease;
}

.tools-section .apply-card:hover::after{
  transform:translateX(6px);
  opacity:.8;
}


/* === Tools cards: unified hover style === */
.tools-section .tool-card {
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
  border: 2px solid transparent;
}

/* hover – all tool cards */
.tools-section .tool-card:hover {
  transform: scale(1.02);
  border-color: #3B82F6; /* 与 Services 卡片一致的蓝色 */
  box-shadow: 0 12px 28px rgba(59,130,246,0.18);
}

/* clickable card – stronger affordance */
.tools-section .tool-card.clickable {
  cursor: pointer;
}

/* === About section card (calm & trustful) === */
.about-section .card.wide {
  background: linear-gradient(180deg, #fff, #FAF5E9);
  border: 1px solid rgba(10,10,10,0.04);
  box-shadow: 0 6px 18px rgba(9,30,66,0.06);
}

/* subtle hover – no scale, no blue line */
.about-section .card.wide:hover {
  box-shadow: 0 10px 26px rgba(9,30,66,0.08);
}


/* ===============================
   WEBINAR section styling
   =============================== */

/* Webinar card container */
.webinar-section .card.wide {
  background: linear-gradient(180deg, #fff, #FAF5E9);
  border: 1px solid rgba(10,10,10,0.04);
  box-shadow: 0 6px 18px rgba(9,30,66,0.06);
}

/* Subtle hover — no scaling */
.webinar-section .card.wide:hover {
  box-shadow: 0 10px 26px rgba(9,30,66,0.08);
}

/* CTA row layout */
.webinar-section .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

/* Button hover emphasis */
.webinar-section .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(59,130,246,0.25);
}


/* ===============================
   QUICK RESOURCES section
   =============================== */

/* Resources container card */
.resources-section .card.wide {
  background: linear-gradient(180deg, #fff, #FAF5E9);
  border: 1px solid rgba(10,10,10,0.04);
  box-shadow: 0 6px 18px rgba(9,30,66,0.06);
}

/* Resource grid */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

/* Resource pill buttons */
.resource-pill {
  display: block;
  text-align: center;
  padding: 12px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 600;
  text-decoration: none;
  color: inherit;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

/* Hover effect */
.resource-pill:hover {
  transform: scale(1.03);
  border-color: #3B82F6;
  box-shadow: 0 8px 22px rgba(59,130,246,0.25);
}

.resource-pill {
  border: 1px solid rgba(216,176,76,0.5); /* 淡金色 */
}


/* Mobile stacking */
@media (max-width: 720px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }
}


/* Contact Section Grid */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}


/* Contact Cards (WeChat + Form) */
.contact-card {
  background: linear-gradient(180deg, #fffdfa, #fff5e9); /* 上浅下稍深的淡棕黄色渐变 */
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 8px 24px rgba(9,30,66,0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
  border: 2px solid transparent;
  cursor: default;
  font-family: Inter, Arial, sans-serif; /* 原先字体 */
}

.contact-card:hover {
  transform: scale(1.03);
  border: 2px solid #3B82F6; /* 蓝色边框 */
}

.contact-form-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--brand-2); /* 与卡片标题颜色一致 */
}

/* WeChat QR Card */
.wechat-card {
  text-align: center;
}

.wechat-qr {
  width: 280px;
  height: 380px;
  margin-bottom: 12px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.wechat-card p {
  margin: 6px 0;
  font-size: 14px;
  color: #444;
}

/* Consultation Form Card */
.form-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-card label {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.form-card input,
.form-card textarea {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
  font-size: 14px;
  width: 100%;
  box-sizing: border-box;
}

.form-card textarea {
  resize: vertical;
}

.form-card .btn {
  margin-top: 10px;
  align-self: flex-start;
}

/* Responsive: stack on mobile */
@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .wechat-qr {
    width: 280px;
    height: 380px;
  }
}

/* =========================
   Contact – Visual Refinement (Override Only)
   基于原有结构与尺寸的轻度优化
========================= */

/* 卡片背景：更淡、更克制 */
.contact-card {
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #FBF7F0 100%
  );
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.03);
}

/* 取消 Contact 卡片的放大与强交互感 */
.contact-card:hover {
  transform: none;
  border-color: transparent;
}

/* WeChat 文本更轻 */
.wechat-card p {
  font-weight: 400;
  color: #555;
  line-height: 1.55;
}

/* 表单标题更安静 */
.contact-form-title {
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* 表单标签与输入框间距更自然 */
.form-card label {
  margin-top: 14px;
  margin-bottom: 4px;
  font-weight: 400;
}

.form-card input,
.form-card textarea {
  border-color: #e5e5e5;
}

/* 按钮与表单拉开一点距离 */
.form-card .btn {
  margin-top: 18px;
}

/* Send Button – Gentle Emphasis */
.form-card .btn {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.form-card .btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(59,130,246,0.18);
}

/* WeChat text vertical adjustment */
.wechat-card {
  padding-top: 14px;
}

/* Contact section spacing refinement */
.contact-section {
  padding-bottom: 90px;
}

/* =========================
   Footer – Final Polished
========================= */

footer {
  background: linear-gradient(180deg, #0a0a0a 0%, #1c1c1c 100%);
  color: #ffffff;
  padding: 48px 20px 28px;
  font-family: Inter, Arial, sans-serif;
  font-size: 15px;              /* 整体略大，提升可读性 */
  line-height: 1.7;
  position: relative;
}

/* Soft transition from Contact */
footer::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 0;
  right: 0;
  height: 36px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0),
    rgba(10,10,10,0.85)
  );
}

/* Inner layout */
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
}

/* Column */
.footer-col {
  flex: 1 1 200px;
}

/* Column titles */
.footer-col h4 {
  font-size: 17px;
  font-weight: 500;              /* 不加粗 */
  margin-bottom: 10px;
  color: #f7f7f7;
  letter-spacing: 0.4px;
}

/* Links & text */
.footer-col a,
.footer-col .muted {
  display: block;
  font-size: 14.5px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 6px;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

/* Subtle hover */
.footer-col a:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* Copyright */
.footer-copy {
  text-align: center;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* =========================
   Mobile Optimization
========================= */

@media (max-width: 720px) {
  footer {
    padding: 32px 16px 20px;
  }

  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;                  /* 👈 关键：压缩四段之间的距离 */
  }

  .footer-col {
    flex: none;
  }

  .footer-col h4 {
    margin-bottom: 6px;
  }

  .footer-col a,
  .footer-col .muted {
    margin-bottom: 4px;         /* 👈 再压一点 */
  }
}


/* Quick Resources – emphasized pills */
.resource-pill.resource-emphasis {
  color: var(--brand-2);
  font-weight: 500; /* 非粗体，但更有存在感 */
}

/* Hover 时保持高级、不侵入 */
.resource-pill.resource-emphasis:hover {
  color:#6E4BFF; /* hover 才用原亮色 */
  transform: translateY(-2px);
}


/* =========================
   Hero CTA hover enhancement
========================= */

.hero-cta:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(59,130,246,0.18);
}



.membership-page .card {
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    #fbf7ef 55%,
    #f3ebdd 100%
  );
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
  border: 1px solid rgba(160,140,110,0.25);
}

.membership-page .card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
  border-color: rgba(44,156,71,0.3);
}

/* =========================
   Register page – light & refined (Quick Unlock aligned)
========================= */

/* Card – soft paper-like contrast */
body.register-page .register-card {
    background: linear-gradient(
    135deg,
    #ffffff 0%,
    #fbf7ef 55%,
    #f3ebdd 100%
  );
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
  border: 1px solid rgba(160,140,110,0.25);
}


.register-card:hover,
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.16);
}

/* =====================================================
   Our Services – Final Polished Version
===================================================== */

/* ===============================
   Section Background
================================ */
/*#services.section--services {
  background: linear-gradient(180deg, #f1f3f6 0%, #eef1f5 100%);
  padding: 64px 0;
}

/* ===============================
   Core Cards (大卡片) – 明显色差版
================================ */
.core-card {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f2f6fb 100%
  ); /* 冷白 + 微蓝灰，与小卡片暖黄形成明显对比 */

  border-radius: 22px;
  padding: 34px;
  margin-bottom: 44px;

  border: 1px solid rgba(59, 130, 246, 0.12);
  box-shadow: 0 18px 42px rgba(9, 30, 66, 0.10);

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease;
}

/* Hover：明确可点击，但不浮夸 */
.core-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 64px rgba(9, 30, 66, 0.16);
  border-color: #3B82F6;
}

/* ===============================
   Core Card Header（含 Emoji）
================================ */
.core-card-header h3 {
  font-size: 1.42rem;
  margin-bottom: 10px;
  color:#5A47E0;
  line-height: 1.35;

  transition:
    color 0.2s ease,
    font-weight 0.2s ease,
    letter-spacing 0.2s ease;
}

/* Hover 时强调标题（不位移） */
.core-card:hover .core-card-header h3 {
  color:#6E4BFF;
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* 副标题 */
.core-card-header p {
  font-size: 0.96rem;
  color: #555;
  line-height: 1.6;
  transition: color 0.2s ease;
}

.core-card:hover .core-card-header p {
  color: #333;
}


/* ===============================
   Sub Services Grid (小卡片容器)
================================ */
.sub-services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 22px;
}

/* ===============================
   Service Cards (小卡片)
   —— 原先淡黄棕色渐变，完全恢复
================================ */
.sub-services-grid .service-card {
  background: linear-gradient(180deg, #ffffff 0%, #FAF5E9 100%);
  border-radius: 12px;
  padding: 18px;

  border: 1px solid rgba(10, 10, 10, 0.03);
  box-shadow: 0 8px 24px rgba(9, 30, 66, 0.04);

  display: flex;
  flex-direction: column;
  min-width: 0;
  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.sub-services-grid .service-card:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 30px rgba(9, 30, 66, 0.08);
  border-color: #3B82F6;
}

/* 小卡片文字 */
.sub-services-grid .service-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color:#5A47E0;
}

.sub-services-grid .service-card .desc {
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 12px;
}

/* ===============================
   Responsive (Mobile)
================================ */
@media (max-width: 768px) {
  #services.section--services {
    padding: 48px 0;
  }

  .core-card {
    padding: 28px;
  }

  .sub-services-grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   NAV MENU – FINAL STABLE & NO-JITTER VERSION
====================================================== */

/* Desktop only */
@media (min-width: 1024px) {

  .menu {
    margin-left: 0;     /* 不整体推 */
    gap: 16px;
  }

  /* 只调整 Home */
  .menu > a[href*="#home"] {
    margin-left: 46px;  /* 微调即可 */
  }


  .menu a,
  .dropdown-toggle {
    white-space: nowrap;
  }

  /* -------------------------------
     Dropdown container (KEY FIX)
  -------------------------------- */
  .nav-item.dropdown {
    position: relative;
    display: inline-block;    /* ❗ 不用 inline-flex */
  }

  /* Hover 判定扩大为整个容器 */
  .nav-item.dropdown::before {
    content: "";
    position: absolute;
    inset: -8px -12px;
  }

  .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px;
    cursor: pointer;
  }

  /* -------------------------------
     Dropdown menu (NO GAP)
  -------------------------------- */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;

    margin-top: 2px;          /* 几乎无缝 */
    padding: 8px 0;
    min-width: 220px;

    background: rgba(245, 247, 250, 0.97);
    backdrop-filter: blur(10px);

    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 999;
  }

  .nav-item.dropdown:hover .dropdown-menu,
  .nav-item.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .dropdown-menu a {
    display: block;
    padding: 10px 20px;
    white-space: nowrap;
  }

  /* -------------------------------
     Login special
  -------------------------------- */
  .menu a[href*="login"] {
    margin-left: 40px;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid rgba(80,130,255,0.35);
  }

  /* -------------------------------
     Language toggle FIX
  -------------------------------- */
  .lang-toggle {
    white-space: nowrap;
    line-height: 1;
    height: 32px;
    display: inline-flex;
    align-items: center;
  }
}

/* ======================================================
   MOBILE NAV
   👉 完全不碰，用你原来稳定版本
====================================================== */

/* ==============================
   Logo hover (SAFE, no jitter)
============================== */
.brand a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.brand a:hover {
  transform: scale(1.04);
  opacity: 0.92;
}

/* Logo image */
.logo-img {
  transition: transform 0.18s ease;
}

.brand a:hover .logo-img {
  transform: scale(1.05);
}
/* ===============================
   Language toggle (stable hover)
=============================== */
.lang-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25); /* ⭐ 先给一个“存在的边框” */
  border-radius: 16px;
  padding: 6px 12px;

  color: inherit;
  cursor: pointer;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

.lang-toggle:hover {
  background-color: rgba(255, 255, 255, 0.18); /* ⭐ 比之前稍微明显 */
  border-color: rgba(255, 255, 255, 0.45);
  opacity: 0.9;
}

/* 可选：轻微抬起（和 Logo 一致） */
.lang-toggle:hover {
  transform: translateY(-1px);
}


/*主页 第二个大功能区 三个卡片的题目 文字 颜色*/

.registration-card h3 {
  color: #5A47E0;
}

.registration-card h3 .sub-icon {
  fill: currentColor;
}

.registration-card:hover h3 span {
  color: #6E4BFF;
}

.unlock-card h3 {
  color: #5A47E0;
}

.unlock-card h3 .sub-icon {
  fill: currentColor;
}

.unlock-card:hover h3 span {
  color: #6E4BFF;
}

.apply-card h3 {
  color: #5A47E0;
}

.apply-card h3 .sub-icon {
  fill: currentColor;
}

.apply-card:hover h3 span {
  color: #6E4BFF;
}
/* =========================================================
   Tablet Touch Dropdown + Mid-width Drawer (NON-breaking)
   Put at the VERY END of main.css
========================================================= */

/* 1) Touch-friendly dropdown: allow JS to open with .open */
@media (min-width: 721px) {
  .nav-item.dropdown.open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* 2) Mid-width breakpoint (tablet / narrow desktop):
   switch to hamburger + drawer WITHOUT changing phone mode.
   - Desktop: > 980px keep your current desktop menu
   - Mid: 721px ~ 980px use drawer
   - Phone: <= 720px keep your current phone mode
*/
@media (min-width: 721px) and (max-width: 980px) {
  /* hide desktop menu */
  nav#topNav .menu { display: none !important; }
  nav#topNav .hamburger { display: block !important; }

  /* Drawer: reuse your existing #mobileMenu */
  #mobileMenu.mobile-menu {
    /* IMPORTANT: do NOT change your transparency scheme; this is only for the panel */
    position: fixed;
    top: 64px; /* 如果你 nav 高度不是 64px，把这里改成你实际 nav 高度 */
    right: 0;
    width: min(360px, 92vw);
    height: calc(100vh - 64px);
    overflow-y: auto;

    margin: 0 !important;
    padding: 14px 14px !important;

    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(10px);
    border-left: 1px solid rgba(0,0,0,0.06);
    box-shadow: -18px 0 40px rgba(20,30,60,0.10);

    display: block !important; /* panel always exists; aria-hidden controls visibility */
    transform: translateX(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .18s ease;
    border-radius: 16px 0 0 16px;
  }

  #mobileMenu.mobile-menu[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* nicer tap targets */
  #mobileMenu.mobile-menu a,
  #mobileMenu.mobile-menu summary {
    padding: 12px 10px;
    border-radius: 12px;
  }

  #mobileMenu.mobile-menu a:hover {
    background: rgba(59,130,246,0.08);
  }

  /* keep your mobile-actions comfortable */
  #mobileMenu .mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 12px;
  }
}

/* ===============================
   Inline Field Hint (Email etc.)
================================ */
.field-hint{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.9;
}

.field-hint.error{
  color: #dc2626;
}

.field-hint.success{
  color: #15803d;
}