/* 涓婚鍙橀噺 */
:root{
  /* 娴呰壊涓婚鍙橀噺 */
  --bg: #f5f6f8;      /* site light gray bg */
  --bg-2: #ffffff;
  --card: #ffffff;
  --line: rgba(0,0,0,.08);
  --text: #1f2933;    /* 娣辩伆鏂囨湰 */
  --muted: #6b7280;   /* 娆＄骇鏂囨湰 */
  --brand: #a3aab2;   /* 娴呯伆涓昏壊 */
  --brand-2: #8b939d; /* deeper brand color */
  --bg-tint: #eef0f3; /* 鍒嗗尯鍔犳繁搴曡壊 */
  --card-tint: #f5f6f8;
  --shadow: 0 10px 24px rgba(15, 23, 42, .10);
  --radius: 14px;
  --radius-lg: 18px;
  --marquee-h: 90px; /* 椤堕儴璺戦┈鐏€婚珮搴︼紙鏇撮珮锛岄伩鍏嶉噸鍙狅級 */
  --marquee-pad: 10px; /* 鏂囨湰涓庝笂涓嬫祦鍏夌殑瀹夊叏闂磋窛 */
}

*{box-sizing:border-box}
/* Ensure page can scroll and anchors are smooth */
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--text);
  /* Subtle, professional base */
  background:
    radial-gradient(1000px 520px at 50% -10%, #f5f7fb, transparent 60%),
    linear-gradient(#f8fafc,#f4f7fb 40%, #f2f5fa 100%);
  padding-top: var(--marquee-h);
}

/* fixed top marquee */
.ticker{position:fixed;top:0;left:0;right:0;height:var(--marquee-h);z-index:9999;background:rgba(255,255,255,.9);backdrop-filter:saturate(120%) blur(6px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--marquee-pad) 0;box-sizing:border-box}
.ticker:before,.ticker:after{content:"";position:absolute;left:0;right:0;height:2px;opacity:.7;background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-1));background-size:300% 100%;animation:line-slide 10s linear infinite;z-index:0}
.ticker:before{top:0}
.ticker:after{bottom:0}
.ticker .marquee{position:relative;overflow:hidden;white-space:nowrap;height:calc((var(--marquee-h) - (var(--marquee-pad)*2)) / 2);z-index:1}
.ticker .marquee:first-child{padding-bottom:calc(var(--marquee-pad) - 2px)}
.ticker .marquee:last-of-type{padding-top:calc(var(--marquee-pad) - 2px)}
.ticker .marquee + .marquee{border-top:none;position:relative}
.ticker .marquee__inner{display:inline-flex;align-items:center;gap:28px;padding:0 8px;height:100%;will-change:transform;position:relative;z-index:1}
.ticker .marquee__inner span{display:inline-flex;align-items:center;gap:8px;color:#4b5563;font-weight:600;border:0;border-radius:999px;background:rgba(255,255,255,.85);padding:6px 12px}
.ticker img{width:18px;height:12px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes line-slide{from{background-position:0 0}to{background-position:300% 0}}
.marquee-1{animation:marquee-left 22s linear infinite}
.marquee-2{animation:marquee-right 26s linear infinite}
.ticker:hover .marquee__inner{animation-play-state:paused}
@keyframes flag-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}
.ticker img{animation:flag-float 3.2s ease-in-out infinite}

/* mid glow separator line (standalone element, avoid text overlap) */
.ticker__midline{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-1));background-size:300% 100%;animation:line-slide 10s linear infinite;z-index:0;pointer-events:none}

.container{max-width:1120px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.eyebrow{letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:700}

/* 椤堕儴鏉′笌瀵艰埅 */
.brand{font-weight:800;color:#111827;text-decoration:none;letter-spacing:.3px}


.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;border:1px solid transparent;text-decoration:none;font-weight:700}
.btn--small{padding:8px 14px}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .container{padding:84px 20px;min-height:clamp(520px,76vh,760px);display:flex;align-items:center}
.hero__content{text-align:center;position:relative;z-index:1;max-width:760px;margin:0 auto}
.hero__actions{justify-content:center;align-items:center}
.hero__stats{justify-content:center}
.hero .sub{text-align:center;margin:0 auto 20px}
.hero__stats li div{ text-align:left }
@media (max-width: 920px){
  .hero__actions{justify-content:flex-start}
  .hero__stats{justify-content:flex-start}
}

/* homepage bg animation only for hero */
.hero__bg-embed{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__bg-embed iframe{width:100%;height:100%;border:0;display:block}
@media (prefers-reduced-motion: reduce){.hero__bg-embed{display:none}}
.hero h1{font-size:var(--h1-size,44px);line-height:1.15;margin:.25em 0 .4em}
.hero .sub{max-width:720px;margin:0 auto 20px;color:var(--muted)}
.hero__actions{display:flex;gap:12px;justify-content:center;margin-top:10px}
.hero__stats{list-style:none;padding:0;margin:32px auto 0;display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.hero__stats li div{ text-align:center }
.hero__stats li{display:flex;gap:10px;align-items:center;background:rgba(9,31,47,.55);border:1px solid var(--line);padding:10px 14px;border-radius:999px;box-shadow:var(--shadow)}
.hero__stats .icon{font-size:18px}
.hero__stats .stat{font-weight:800}

/* 鏄熺┖鑳屾櫙 */
.hero .stars{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(2px 2px at 20% 30%, rgba(0,0,0,.08), transparent 60%),
  radial-gradient(1.5px 1.5px at 60% 40%, rgba(0,0,0,.08), transparent 60%),
  radial-gradient(1.2px 1.2px at 80% 20%, rgba(0,0,0,.06), transparent 60%),
  radial-gradient(1px 1px at 35% 70%, rgba(0,0,0,.06), transparent 60%),
  radial-gradient(1px 1px at 75% 75%, rgba(0,0,0,.06), transparent 60%),
  linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(17,24,39,.04) 100%);
  opacity:.6
}

/* 閫氱敤鍖哄潡 */
.section{padding:72px 0;border-bottom:1px solid var(--line)}
.section--tint{background:linear-gradient(180deg, var(--bg-tint), #eff7fb)}
.section__title{text-align:center;font-size:26px;margin:0 0 8px}
.section__sub{text-align:center;color:var(--muted);margin:0 0 28px}

/* Offset anchor scrolling for fixed nav + ticker */
#destinations{ scroll-margin-top: calc(var(--top-nav-h, 64px) + var(--marquee-h, 90px) + 20px); }

.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}

.cards .card{background:linear-gradient(180deg,#ffffff,#f7f8fa);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px;box-shadow:var(--shadow)}
.section--tint .cards .card{background:linear-gradient(180deg, var(--card-tint), #eef0f3)}
.cards .card h3{margin:2px 0 6px;font-size:18px}
.cards .card .badge{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:linear-gradient(180deg,#f2f3f6,#ebeef2);border:1px solid #dcdfe4;margin-bottom:8px}

/* destinations */
.country{display:flex;align-items:center;gap:12px}
.country__flag{display:inline-flex;align-items:center;justify-content:center;width:32px;height:22px}
.country__flag img{width:32px;height:22px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* 鏈嶅姟 */
.service .list{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.service .list li{margin:4px 0}

/* 鐗规€т笌鏁呬簨 */
.feature p{margin:6px 0 0}
.story .tagline{margin-top:12px;color:#374151;background:rgba(0,0,0,.06);border:1px solid #d1d5db;padding:6px 10px;border-radius:999px;display:inline-block}

/* CTA and footer */
.cta{padding:64px 0;background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,0));border-top:1px solid var(--line)}
.cta__inner{text-align:center}
.cta h2{margin:0 0 10px}

.footer{background:linear-gradient(180deg,#eceff2,#f6f7f9);border-top:1px solid var(--line);padding:32px 0 18px}
.footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.footer h4{margin:0 0 8px}
.links-col{list-style:none;padding:0;margin:0}
.links-col a{color:#4b5563;text-decoration:none}
.links-col a:hover{color:#111827}
.footer__copy{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:#5f7485;text-align:center}

/* 鍝嶅簲寮?*/
@media (max-width: 920px){
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero h1{font-size:36px}
}

@media (max-width: 600px){
  .links{display:none}
  .grid-3{grid-template-columns:1fr}
  .hero__content{padding:72px 16px 100px}
}

/* Center hero content in one line where appropriate */
.hero .container{ justify-content:center; }
.hero__content{ text-align:center; margin:0 auto; }
.hero__actions{ display:flex; gap:16px; justify-content:center; flex-wrap:nowrap; }
/* === Vibrant Accents === */
:root{
  --accent-1:#06b6d4; /* cyan */
  --accent-2:#3b82f6; /* blue */
  --accent-3:#a855f7; /* purple */
  --accent-4:#f59e0b; /* amber */
}

/* Brand gradient text */
.brand{background:linear-gradient(90deg,var(--accent-2),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Nav link underline glow */


/* Section titles with gradient and underline */
.section__title{color:transparent;background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));-webkit-background-clip:text;background-clip:text}
.section__title::after{content:"";display:block;width:84px;height:3px;margin:10px auto 0;border-radius:2px;background:linear-gradient(90deg,var(--accent-1),var(--accent-3));box-shadow:0 0 16px rgba(168,85,247,.45)}

/* Buttons: brighter and animated gradient */
.btn--primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));background-size:200% 100%;box-shadow:0 14px 28px rgba(59,130,246,.28)}
.btn--primary:hover{background-position:100% 0;box-shadow:0 16px 34px rgba(59,130,246,.36)}
.btn--primary:focus{outline:2px solid rgba(56,189,248,.5);outline-offset:2px}

.btn--ghost{color:var(--accent-2);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--accent-1),var(--accent-3)) border-box;border:1px solid transparent}
.btn--ghost:hover{background:linear-gradient(rgba(56,189,248,.08),rgba(56,189,248,.08)) padding-box,linear-gradient(90deg,var(--accent-1),var(--accent-3)) border-box}

/* Cards: subtle colorful border + lift */
.cards .card{position:relative;transition:transform .25s ease, box-shadow .25s ease}
.cards .card::before{content:"";position:absolute;inset:-1px;border-radius:var(--radius);padding:1px;background:linear-gradient(90deg,rgba(99,102,241,.5),rgba(56,189,248,.5),rgba(236,72,153,.5));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cards .card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(2,132,199,.22)}

/* Badges more vivid */
.cards .card .badge{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(16,185,129,.18));border:1px solid rgba(56,189,248,.45);box-shadow:inset 0 0 10px rgba(56,189,248,.28),0 8px 22px rgba(2,132,199,.18)}

/* Hero soft neon blobs (behind iframe, non-blocking) */
.hero{position:relative}
.hero::before,.hero::after{content:"";position:absolute;z-index:-2;filter:blur(20px)}
.hero::before{top:-80px;left:-60px;width:420px;height:420px;background:radial-gradient(closest-side,rgba(56,189,248,.28),transparent 60%);animation:float1 12s ease-in-out infinite alternate}
.hero::after{right:-40px;bottom:10px;width:360px;height:360px;background:radial-gradient(closest-side,rgba(168,85,247,.25),transparent 60%);animation:float2 14s ease-in-out infinite alternate}
@keyframes float1{from{transform:translateY(0)}to{transform:translateY(18px)}}
@keyframes float2{from{transform:translateY(0)}to{transform:translateY(-14px)}}

/* Stats: brighter borders */
.hero__stats li{border-color:rgba(56,189,248,.45)}
.hero__stats .stat{color:#0b1f35}
/* Orange accent trial removed to keep blue theme consistent */
/* === Professional Polish: layout, rhythm, contrast === */
:root{
  --space-1: 8px;  --space-2: 12px;  --space-3: 16px;  --space-4: 20px;  --space-5: 24px;  --space-6: 32px;  --space-7: 40px;  --space-8: 56px;  --space-9: 72px;
}

/* Typographic rhythm */
body{line-height:1.6}
.hero h1{letter-spacing:.2px}
.section__sub{max-width:760px;margin:0 auto var(--space-5);font-size:15px;line-height:1.7}

/* Spacing and grid */
.section{padding:var(--space-9) 0 var(--space-8)}
.grid{gap:var(--space-5)}
.cards .card{padding:22px 22px;border-radius:16px}

/* Better hero readability over video/bg */
.hero__bg-embed::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%)}
.hero__content{max-width:820px}

/* Buttons sizing and focus */
.btn{min-height:44px;padding:12px 20px;border-radius:999px;font-weight:700}


/* Footer tidy */
.footer__grid{gap:28px}
.footer .brand{font-size:18px;font-weight:800}

/* Card titles weight */
.cards .card h3{font-weight:700}

/* Subtle divider to separate sections */
.section{border-bottom:1px solid rgba(0,0,0,.06)}

/* Data chips refinement */
.hero__stats{gap:18px}
.hero__stats li{backdrop-filter:saturate(130%) blur(2px)}

/* Ticker readability tweak */
.ticker .marquee__inner span{box-shadow:0 2px 8px rgba(0,0,0,.05)}

/* === Brand Accents: Professional Blue (final overrides) === */
:root{
  --accent-1:#0ea5e9; /* sky-500 */
  --accent-2:#2563eb; /* blue-600 */
  --accent-3:#1d4ed8; /* blue-700 */
  --accent-4:#93c5fd; /* blue-300 */
}

/* Buttons: blue glow */
.btn--primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));background-size:200% 100%;box-shadow:0 14px 28px rgba(59,130,246,.28)}
.btn--primary:hover{background-position:100% 0;box-shadow:0 16px 34px rgba(59,130,246,.36)}
.btn--primary:focus{outline:2px solid rgba(56,189,248,.5);outline-offset:2px}
.btn:focus-visible{outline:3px solid rgba(59,130,246,.45);outline-offset:2px}

/* Ghost button hover */
.btn--ghost{color:var(--accent-2);background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,var(--accent-1),var(--accent-3)) border-box;border:1px solid transparent}
.btn--ghost:hover{background:linear-gradient(rgba(59,130,246,.08),rgba(59,130,246,.08)) padding-box,linear-gradient(90deg,var(--accent-1),var(--accent-3)) border-box}

/* Cards: edge + hover */
.cards .card::before{background:linear-gradient(90deg,rgba(99,102,241,.5),rgba(59,130,246,.5),rgba(14,165,233,.5))}
.cards .card:hover{box-shadow:0 18px 44px rgba(59,130,246,.22)}
.cards .card .badge{background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(14,165,233,.18));border:1px solid rgba(59,130,246,.45);box-shadow:inset 0 0 10px rgba(59,130,246,.28),0 8px 22px rgba(59,130,246,.18)}

/* Section underline glow */
.section__title::after{background:linear-gradient(90deg,var(--accent-1),var(--accent-3));box-shadow:0 0 16px rgba(59,130,246,.45)}

/* Hero blobs to blue hues */
.hero::before{background:radial-gradient(closest-side,rgba(59,130,246,.26),transparent 60%)}
.hero::after{background:radial-gradient(closest-side,rgba(14,165,233,.22),transparent 60%)}

/* Stats border to blue */
.hero__stats li{border-color:rgba(59,130,246,.45)}

/* === Typography Refinements === */
/* 提升对比与可读性：更深的 muted 色 */
:root{ --muted:#475569; }

/* 基础字号在桌面略增大，移动端略减小 */
html{font-size:16px}
@media (min-width:1280px){html{font-size:17px}}
@media (max-width:600px){html{font-size:15.5px}}

/* 标题与段落层级统一 */
.hero h1{font-size:clamp(34px,6.2vw,56px);line-height:1.12;margin:.25em 0 .45em;font-weight:900;color:#0b1f35}
.section__title{font-size:clamp(22px,2.8vw,30px);font-weight:800}
.section__sub{font-size:16px;line-height:1.75;color:var(--muted)}
.cards .card h3{font-size:18px}
.cards .card p{font-size:15.5px}

/* === Stronger Hero Copy Colors === */
/* 顶部小标题更高对比、更稳重 */
.hero .eyebrow{color:#0a0a0a;font-weight:900;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.hero .sub{color:#334155}



/* === Neutral Section Titles (black) === */
/* 热门留学目的地 / 一站式留学服务 / 为什么选择我们 / 学员成功故事 */
.section__title{
  color:#0a0a0a !important;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
}
.section__title::after{
  background:#0a0a0a !important;
  box-shadow:none !important;
}
/* Typography vars: define font sizes here */
:root{
  --topbar-font-size: 12px;
  --nav-font-size: 14px;
  --h1-size: 44px;
}
/* Unified sizing: tweak title/nav sizes via variables */
.hero h1{font-size:var(--h1-size)}

/* === Request: Hero stats frames to vivid orange === */
.hero__stats li{
  border-color:#ff8a00 !important;
  box-shadow:0 0 0 1px rgba(255,138,0,.14), 0 10px 26px rgba(255,138,0,.18) !important;
  background:linear-gradient(180deg, rgba(255,138,0,.08), rgba(255,138,0,.04)) !important;
}

/* === Final Theme Override: Orange === */
:root{
  --accent-1:#ffb703; /* amber */
  --accent-2:#ff8a00; /* orange */
  --accent-3:#ff5a00; /* deep orange */
  --accent-4:#ffd166; /* light amber */
}

/* Buttons: orange glow and focus */
.btn--primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));background-size:200% 100%;box-shadow:0 14px 28px rgba(255,138,0,.28)}
.btn--primary:hover{background-position:100% 0;box-shadow:0 16px 34px rgba(255,138,0,.36)}
.btn--primary:focus{outline:2px solid rgba(255,138,0,.5);outline-offset:2px}
.btn:focus-visible{outline:3px solid rgba(255,138,0,.45);outline-offset:2px}

/* Hero blobs to orange hues */
.hero::before{background:radial-gradient(closest-side,rgba(255,138,0,.28),transparent 60%)}
.hero::after{background:radial-gradient(closest-side,rgba(255,183,3,.25),transparent 60%)}

/* Section underline glow to orange */
.section__title::after{background:linear-gradient(90deg,var(--accent-1),var(--accent-3));box-shadow:0 0 16px rgba(255,138,0,.45)}

/* Cards: orange edge + hover */
.cards .card::before{background:linear-gradient(90deg,rgba(255,183,3,.5),rgba(255,138,0,.5),rgba(255,90,0,.5))}
.cards .card:hover{box-shadow:0 18px 44px rgba(255,138,0,.22)}
.cards .card .badge{background:linear-gradient(135deg,rgba(255,138,0,.18),rgba(255,183,3,.18));border:1px solid rgba(255,138,0,.45);box-shadow:inset 0 0 10px rgba(255,138,0,.28),0 8px 22px rgba(255,138,0,.18)}

/* contact banner */
#contact-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(720px, calc(100vw - 24px));
  background: #0b1319; /* dark background */
  color: #e5eef7;
  border-radius: 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  z-index: 1100; /* above chat widget z=1000 */
  padding: 18px 18px 18px 22px;
}
#contact-banner .cb-inner { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
#contact-banner .cb-title { font-size: 20px; font-weight: 700; line-height: 1.2; color: #fff; }
#contact-banner .cb-sub { font-size: 13px; opacity: 0.8; margin-top: 4px; }

#contact-banner .cb-form { display: flex; align-items: center; gap: 10px; }
#contact-banner .cb-input {
  flex: 1;
  height: 48px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #1b2228;
  color: #e8f1f8;
  padding: 0 16px;
  font-size: 15px;
  outline: none;
}
#contact-banner .cb-input::placeholder { color: #97a6b2; opacity: 0.9; }
#contact-banner .cb-input:focus { border-color: #38bdf8; box-shadow: 0 0 0 3px rgba(56,189,248,0.25); }
#contact-banner .cb-input.cb-invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.25); }

#contact-banner .cb-send {
  width: 52px;
  height: 48px;
  border-radius: 24px;
  background: #253039;
  border: 1px solid rgba(255,255,255,0.12);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease;
}
#contact-banner .cb-send:hover { transform: translateY(-1px); background: #2f3c47; box-shadow: 0 6px 14px rgba(0,0,0,0.25); }
#contact-banner .cb-send:active { transform: translateY(0); }
#contact-banner .cb-send[disabled] { opacity: .6; cursor: not-allowed; }

/* show/hide transitions */
#contact-banner.cb-hide { opacity: 0; transform: translate(-50%, 20px); transition: opacity .25s ease, transform .25s ease; }
#contact-banner.cb-show { opacity: 1; transform: translate(-50%, 0); transition: opacity .25s ease, transform .25s ease; }

@media (max-width: 640px) {
  #contact-banner { padding: 14px; border-radius: 18px; bottom: 16px; width: min(95vw, 560px); }
  #contact-banner .cb-inner { grid-template-columns: 1fr; gap: 10px; }
  #contact-banner .cb-title { font-size: 18px; }
}
/* ===========================
   折叠动画与交互样式（只作用于 Services）
   =========================== */

   .service-block {
    border-top: 1px solid var(--accent-2);
    padding-top: 24px;
    cursor: pointer;
  }
  
  .service-block h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 22px;
    margin: 0;
    color: #1a1a2e;
    transition: color .25s;
  }
  
  .service-block h3:hover {
    color: var(--accent-2);
  }
  
  .service-block::after {
    content: "＋";
    font-weight: bold;
    color: var(--accent-2);
    font-size: 22px;
    float: right;
    transition: transform .3s;
  }
  
  .service-block.active::after {
    content: "－";
    transform: rotate(180deg);
  }
  
  /* 折叠内容过渡 */
  .service-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .4s ease, opacity .4s ease;
  }
  
  .service-block.active .service-content {
    max-height: 500px;
    opacity: 1;
    margin-top: 10px;
  }

/* ===========================
   cases cards + modals
   =========================== */
.story-grid{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.story-image{
  margin:-20px -20px 16px;
  overflow:hidden;
  border-radius:12px 12px 0 0;
}
.story-image img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:transform .3s ease;
}
.card.story{
  padding:20px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  transition:all .3s ease;
  cursor:pointer;
  position:relative;
}
.card.story:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.card.story h3{
  font-size:20px;
  font-weight:600;
  margin-bottom:12px;
  color:#1a1a2e;
}
.card.story .muted{
  color:#666;
  line-height:1.6;
  margin-bottom:16px;
}
.card.story .tagline{
  display:inline-block;
  padding:6px 12px;
  background:rgba(255,138,0,0.1);
  color:#ff8a00;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}
.click-hint{
  margin-top:12px;
  font-size:13px;
  color:#ff8a00;
  font-weight:600;
  opacity:0;
  transition:opacity .3s;
}
.card.story:hover .click-hint{
  opacity:1;
}
.card.story:hover .story-image img{
  transform:scale(1.05);
}

.modal{
  display:none;
  position:fixed;
  z-index:10000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.8);
  justify-content:center;
  align-items:center;
  padding:20px;
  overflow-y:auto;
}
.modal-content{
  background:#fff;
  border-radius:16px;
  max-width:900px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  animation:modalSlideIn .3s ease;
}
@keyframes modalSlideIn{
  from{opacity:0;transform:translateY(-50px);}
  to{opacity:1;transform:translateY(0);}
}
.modal-close{
  position:absolute;
  right:20px;
  top:20px;
  font-size:36px;
  font-weight:700;
  color:#666;
  cursor:pointer;
  z-index:1;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  transition:all .2s;
}
.modal-close:hover{
  color:#ff8a00;
  background:#f5f5f5;
  transform:rotate(90deg);
}
.modal-image{
  width:100%;
  background:#f5f5f5;
}
.modal-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px 16px 0 0;
}
.modal-details{
  padding:32px;
}
.modal-details h2{
  font-size:28px;
  font-weight:600;
  color:#1a1a2e;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:3px solid #ff8a00;
}
.modal-info{
  margin-bottom:32px;
}
.modal-info p{
  margin:12px 0;
  font-size:16px;
  line-height:1.6;
  color:#333;
}
.modal-info strong{
  color:#1a1a2e;
  font-weight:600;
  display:inline-block;
  min-width:120px;
}
.modal-conditions{
  background:#f8f9fa;
  padding:24px;
  border-radius:12px;
  margin-bottom:24px;
}
.modal-conditions h3{
  font-size:20px;
  font-weight:600;
  color:#1a1a2e;
  margin-bottom:16px;
}
.modal-conditions ul{
  list-style:none;
  padding:0;
  margin:0;
}
.modal-conditions > ul > li{
  margin-bottom:16px;
  padding-left:24px;
  position:relative;
  color:#333;
  line-height:1.8;
}
.modal-conditions > ul > li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:#2d6a4f;
  font-weight:700;
  font-size:18px;
}
.modal-conditions ul ul{
  margin-top:8px;
  padding-left:20px;
}
.modal-conditions ul ul li{
  margin-bottom:8px;
  padding-left:20px;
  position:relative;
}
.modal-conditions ul ul li::before{
  content:"•";
  position:absolute;
  left:0;
  color:#ff8a00;
}
.modal-note{
  background:#fff3e0;
  padding:20px;
  border-radius:12px;
  border-left:4px solid #ff8a00;
}
.modal-note p{
  margin:8px 0;
  color:#333;
  line-height:1.6;
}
.modal-note strong{
  color:#ff8a00;
  font-weight:600;
}
@media (max-width:768px){
  .modal-content{
    max-height:95vh;
  }
  .modal-details{
    padding:24px 20px;
  }
  .modal-details h2{
    font-size:22px;
  }
  .modal-close{
    right:15px;
    top:15px;
    font-size:28px;
    width:35px;
    height:35px;
  }
}

/* ===== Mobile refinements ===== */
@media (max-width: 640px){
  :root{
    --marquee-h: 60px;
    --marquee-pad: 4px;
  }
  body{
    font-size: 14px;
  }
  .topnav-dark .nav-inner{
    padding: 8px 12px;
  }
  .container{
    padding: 0 12px;
  }
  .hero .container{
    padding: 44px 12px 24px;
    min-height: auto;
  }
  .hero h1{
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .hero .sub{
    font-size: 14px;
    line-height: 1.45;
    margin-bottom: 12px;
  }
  .hero__actions{
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero__actions .btn{
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }
  .hero__stats{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 14px;
  }
  .hero__stats li{
    padding: 9px 12px;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
  }
  section.section{
    padding: 36px 0;
  }
  .section__title{
    font-size: 22px;
  }
  .section__sub{
    font-size: 14px;
  }
  .services-uniguru-style{
    gap: 14px;
  }
  .services-uniguru-style .services-left{
    padding-right: 0;
    margin-top: 0;
  }
  .services-uniguru-style .services-title{
    font-size: 22px;
    margin-bottom: 12px;
  }
  .services-uniguru-style .btn-learn-more{
    width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 10px 16px;
  }
  .services-uniguru-style .services-right{
    margin-top: 0;
    padding-left: 0;
  }
  .services-uniguru-style .service-block{
    padding: 8px 0;
    border-top-width: 0.5px;
  }
  .services-uniguru-style .service-block ul{
    margin: 4px 0 0;
  }
  .services-uniguru-style .service-content li{
    font-size: 17px;
    margin: 6px 0;
    line-height: 1.7;
  }
  .services-uniguru-style .service-block h3{
    flex-direction: column;
    gap: 3px;
    font-size: 16px;
    font-weight: 600;
  }
  .services-uniguru-style .service-block h3 .en{
    font-size: 15px;
  }
  .services-uniguru-style .service-content{
    font-size: 19px;
    line-height: 1.7;
  }
  .services-uniguru-style .service-content ul{
    padding-left: 12px;
  }
  .globe-frame{
    height: 280px;
    margin: 20px 0;
  }
  .cards{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  #whyus .grid-3,
  #stories .grid-3{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  #whyus .card,
  #stories .card{
    padding: 14px;
  }
  #stories .story-image img{
    height: 150px;
  }
  .cards .card{
    padding: 16px;
  }
  .faq-question{
    font-size: 15px;
    padding: 14px 16px;
  }
  .cta{
    padding: 28px 0;
  }
  .cta h2{
    font-size: 22px;
  }
  .footer__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .footer{
    padding: 24px 0 16px;
  }
}

@media (max-width: 480px){
  body{
    font-size: 13.5px;
  }
  .hero h1{
    font-size: 22px;
  }
  .hero__actions .btn{
    font-size: 14px;
  }
  .services-uniguru-style .service-block h3{
    font-size: 14px;
  }
  .services-uniguru-style .service-content{
    font-size: 12.5px;
  }
  .cards .card{
    padding: 14px;
  }
  .cta h2{
    font-size: 20px;
  }
}