:root{
  --bg0:#070A12;
  --bg1:#0B1022;
  --card:#0E1633;
  --card2:#0B132D;
  --text:#EAF0FF;
  --muted:#A9B4D6;
  --line:rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.55);

  --a:#7C5CFF;  /* violet */
  --b:#2CE8C9;  /* mint */
  --c:#FF4FD8;  /* magenta accent */

  --radius: 18px;
  --radius2: 28px;
  --max: 1120px;

  --font: "Noto Serif KR", ui-serif, Georgia, "Times New Roman", serif;
}

*{box-sizing:border-box}
html,body{height:100%}
html{overflow-x: clip;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 12% -5%, rgba(124,92,255,.32), transparent 55%),
    radial-gradient(900px 500px at 88% 18%, rgba(44,232,201,.22), transparent 60%),
    radial-gradient(850px 520px at 70% 120%, rgba(255,79,216,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x: clip;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit}

/* 防止小屏出现横向溢出：允许 flex/grid 子项收缩 + 文本断词 */
.hero__grid > *,
.grid > *,
.callout > *,
.footer__inner > *,
.step > *{
  min-width:0;
}
.hero__subtitle,
.section__sub,
.card__text,
.step__text,
.footer__disclaimer,
.callout__desc{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.skip-link{
  position:absolute;
  left:-999px;
  top:10px;
  padding:10px 12px;
  background:rgba(0,0,0,.7);
  border:1px solid var(--line);
  border-radius:12px;
  z-index:9999;
}
.skip-link:focus{left:10px}

.container{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(7,10,18,.62);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.2px;
}
.brand__mark{
  width:14px; height:14px;
  border-radius:6px;
  background: linear-gradient(135deg, var(--a), var(--b));
  box-shadow: 0 0 0 6px rgba(124,92,255,.10), 0 0 0 13px rgba(44,232,201,.06);
}
.brand__text{font-weight:700; opacity:.92}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav__link{
  font-weight:600;
  opacity:.80;
  padding:10px 10px;
  border-radius:12px;
  transition:opacity .18s ease, background .18s ease, transform .18s ease;
}
.nav__link:hover{
  opacity:1;
  background:rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.hero{
  padding:54px 0 26px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:start;
}
.hero__copy{padding-top:8px}
.pill{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.92);
  font-weight:600;
}
.hero__title{
  margin:14px 0 10px;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height:1.16;
  letter-spacing:-.2px;
}
.hero__subtitle{
  margin:0;
  color:var(--muted);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height:1.75;
}
.hero__subtitle strong{color:rgba(234,240,255,.96)}

.hero__cta{
  display:flex;
  gap:12px;
  margin-top:18px;
  flex-wrap:wrap;
}

.hero__highlights{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:18px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(234,240,255,.90);
  font-weight:600;
}

.glass-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(900px 400px at 10% 0%, rgba(124,92,255,.18), transparent 50%),
    radial-gradient(700px 380px at 96% 24%, rgba(44,232,201,.12), transparent 55%),
    linear-gradient(180deg, rgba(14,22,51,.92), rgba(10,16,34,.72));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glass-card__top{
  display:flex;
  gap:14px;
  padding:18px 18px 10px;
  align-items:center;
}
.glass-card__badge{
  width:64px; height:64px;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  flex: 0 0 auto;
}
.glass-card__img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.glass-card__kicker{
  font-size:14px;
  color:rgba(234,240,255,.90);
  font-weight:700;
}
.glass-card__desc{
  margin-top:6px;
  color:var(--muted);
  line-height:1.6;
}
.glass-card__list{
  padding:10px 18px 0;
  display:grid;
  gap:10px;
}
.list-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.90);
  line-height:1.55;
}
.list-item i{
  margin-top:2px;
  color: rgba(44,232,201,.95);
}
.glass-card__foot{
  padding:14px 18px 18px;
}
.disclaimer{
  margin:0 0 12px;
  color: rgba(169,180,214,.92);
  font-size:13.5px;
  line-height:1.6;
}

.section{
  padding: 46px 0;
}
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section__head{
  margin-bottom: 18px;
}
.section__title{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 32px);
  letter-spacing:-.2px;
}
.section__sub{
  margin:0;
  color: var(--muted);
  line-height:1.75;
}

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

.card{
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(14,22,51,.80), rgba(11,19,45,.62));
  box-shadow: 0 12px 40px rgba(0,0,0,.40);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(620px 220px at 10% 0%, rgba(124,92,255,.15), transparent 60%);
  pointer-events:none;
}
.card--tight{padding:16px}
.card__icon{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  margin-bottom:10px;
}
.card__icon i{
  color: rgba(124,92,255,.95);
}
.card__title{
  margin:0 0 8px;
  font-size: 18px;
  letter-spacing:-.1px;
}
.card__text{
  margin:0 0 12px;
  color: var(--muted);
  line-height:1.72;
}

.bullets{
  margin: 0 0 14px;
  padding-left: 18px;
  color: rgba(234,240,255,.88);
  line-height:1.7;
}
.bullets li{margin: 4px 0}
.bullets--modal{padding-left: 18px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius: 14px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.12);
  cursor:pointer;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.1px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  user-select:none;
  color: rgba(234,240,255,.96);
}
.btn__img{
  width:18px;
  height:18px;
  border-radius:6px;
  object-fit:cover;
  flex: 0 0 auto;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.btn__img--cta{
  width:22px;
  height:22px;
  border-radius:8px;
}
.btn i{opacity:.95}
.btn:active{transform: translateY(1px) scale(.99)}
.btn--full{width:100%}

.btn--primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(44,232,201,.78));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 12px 26px rgba(124,92,255,.22), 0 10px 26px rgba(44,232,201,.14);
}
.btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(124,92,255,.28), 0 16px 40px rgba(44,232,201,.18);
}
.btn--secondary{
  background: rgba(255,255,255,.05);
}
.btn--secondary:hover{
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,.10);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.callout{
  margin-top: 16px;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(700px 320px at 20% 0%, rgba(44,232,201,.14), transparent 56%),
    radial-gradient(760px 360px at 90% 20%, rgba(124,92,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(14,22,51,.70), rgba(11,19,45,.52));
  box-shadow: var(--shadow);
  padding: 18px;
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.callout__title{margin:0 0 6px; font-size:18px}
.callout__desc{margin:0; color:var(--muted); line-height:1.7}
.callout__stats{
  display:flex;
  gap:12px;
  align-items:stretch;
  flex-wrap:wrap;
}
.stat{
  min-width: 110px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 12px 12px;
}
.stat__num{font-weight:800; font-size:18px}
.stat__label{color:var(--muted); margin-top:4px; font-size:13px}

.steps{
  list-style:none;
  padding:0;
  margin: 12px 0 0;
  display:grid;
  gap: 12px;
}
.step{
  display:grid;
  grid-template-columns: 86px 1fr auto;
  gap:14px;
  align-items:center;
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(14,22,51,.64), rgba(11,19,45,.48));
  padding: 14px;
}
.step__num{
  font-weight:800;
  font-size: 22px;
  letter-spacing:.8px;
  color: rgba(234,240,255,.92);
  background: linear-gradient(135deg, rgba(124,92,255,.30), rgba(44,232,201,.18));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  height: 56px;
  display:grid;
  place-items:center;
}
.step__title{margin:0 0 6px; font-size:18px}
.step__text{margin:0; color:var(--muted); line-height:1.7}
.section__cta{margin-top: 16px}

.footer{
  padding: 30px 0 120px; /* leave room for fixed CTA */
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(7,10,18,.55);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.footer__brand{font-weight:800; opacity:.92; margin-bottom:6px}
.footer__disclaimer{margin:0; color:var(--muted); line-height:1.7; max-width: 640px}
.footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.link-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(234,240,255,.92);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:700;
  transition: transform .16s ease, background .16s ease;
}
.link-btn:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

.fixed-cta{
  position:fixed;
  left:50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index:80;
  width: min(680px, calc(100% - 28px));
  pointer-events:none;
}
.fixed-cta__btn{
  width:100%;
  pointer-events:auto;
  border-radius: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.16);
  cursor:pointer;
  font-weight:900;
  letter-spacing:.2px;
  color: rgba(234,240,255,.98);
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(255,79,216,.22), transparent 55%),
    linear-gradient(135deg, rgba(124,92,255,.96), rgba(44,232,201,.78));
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 18px 46px rgba(124,92,255,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  animation: urgentPulse 1.2s ease-in-out infinite;
}
.fixed-cta__btn:hover{
  filter: saturate(1.05);
}
.fixed-cta__btn:active{
  transform: translateY(1px) scale(.99);
}

@keyframes urgentPulse{
  0%{transform: scale(1); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 18px 46px rgba(124,92,255,.20)}
  35%{transform: scale(1.07); box-shadow: 0 22px 64px rgba(0,0,0,.58), 0 22px 62px rgba(44,232,201,.18)}
  65%{transform: scale(.99); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 18px 46px rgba(124,92,255,.20)}
  100%{transform: scale(1); box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 18px 46px rgba(124,92,255,.20)}
}

.hero-image-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
  min-height: 420px;
  position:relative;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(124,92,255,.26), transparent 60%),
    radial-gradient(820px 520px at 90% 18%, rgba(44,232,201,.18), transparent 60%),
    linear-gradient(180deg, rgba(14,22,51,.86), rgba(11,19,45,.66));
}
.hero-image-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../images/hero-panel.jpg');
  background-size: cover;
  background-position: center;
  opacity: .95;
}
.hero-image-card__overlay{
  position:relative;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:flex-end;
  min-height: 420px;
}
.hero-image-card__tag{
  align-self:flex-start;
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  color: rgba(234,240,255,.94);
  font-weight:800;
}
.hero-image-card__title{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.2px;
}
.hero-image-card__sub{
  color: rgba(234,240,255,.86);
  line-height: 1.7;
}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:120;
}
.modal[aria-hidden="false"]{display:block}
.modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
}
.modal__panel{
  position:relative;
  width: min(720px, calc(100% - 28px));
  margin: 7vh auto;
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(14,22,51,.92), rgba(11,19,45,.82));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal__title{margin:0; font-size: 18px}
.modal__body{
  padding: 14px 16px 4px;
  color: rgba(234,240,255,.92);
  line-height: 1.75;
}
.modal__foot{
  padding: 12px 16px 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.icon-btn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,240,255,.92);
  border-radius: 14px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .16s ease, background .16s ease;
}
.icon-btn:hover{background: rgba(255,255,255,.07); transform: translateY(-1px)}
.muted{color: var(--muted)}

@media (max-width: 920px){
  .hero__grid{grid-template-columns: 1fr; gap:16px}
  .nav{display:none}
  .grid--3{grid-template-columns: 1fr}
  .grid--2{grid-template-columns: 1fr}
  .step{grid-template-columns: 74px 1fr; grid-auto-flow:row; }
  .step > .btn{grid-column: 1 / -1; justify-self:stretch}
  .hero-image-card{min-height: 360px}
  .hero-image-card__overlay{min-height: 360px}
}

@media (max-width: 560px){
  .container{width: min(var(--max), calc(100% - 28px))}
  .hero{padding: 40px 0 18px}
  .hero__cta{gap:10px}
  .hero__highlights{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero__highlights::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap}
  .fixed-cta__btn{
    padding: 13px 14px;
    border-radius: 18px;
    font-weight: 900;
  }
  .footer{padding-bottom: 132px}
}

@media (max-width: 380px){
  .fixed-cta{width: calc(100% - 18px)}
  .fixed-cta__btn{font-size: 15px}
  .btn__img--cta{width:20px; height:20px}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .fixed-cta__btn{animation:none}
  .btn, .nav__link, .link-btn, .icon-btn{transition:none}
}