/* ── STATEMENT ── */
.statement {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:120px 24px; text-align:center;
  background:var(--c-bg); position:relative; overflow:hidden;
}
.statement::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 10%, transparent 75%);
}
.statement-orb {
  position:absolute; width:900px; height:520px;
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(139,92,246,0.14) 0%, rgba(59,130,246,0.05) 45%, transparent 70%);
  border-radius:50%; pointer-events:none;
  animation:stmtOrb 7s ease-in-out infinite;
}
@keyframes stmtOrb {
  0%,100% { opacity:.6; transform:translate(-50%,-50%) scale(1); }
  50%     { opacity:1;  transform:translate(-50%,-50%) scale(1.14); }
}
.statement-inner { max-width:900px; margin:0 auto; position:relative; }
.statement-kicker {
  font-size:11px; font-weight:700; letter-spacing:5px; text-transform:uppercase;
  color:var(--c-violet); margin-bottom:44px;
}
.statement-kicker::after {
  content:''; display:block; width:36px; height:1px; margin:18px auto 0;
  background:linear-gradient(90deg, transparent, var(--c-violet), transparent);
}
.statement-lines { margin-bottom:40px; }
.s-line {
  font-size:clamp(40px, 5.5vw, 72px);
  font-weight:800; letter-spacing:-2.5px; line-height:1.13;
  color:rgba(255,255,255,0.9);
}
.statement-sub {
  font-size:16px; line-height:1.9;
  color:var(--c-text-dim); font-weight:300;
  max-width:440px; margin:0 auto;
}
.hi  { color:#c084fc; }
.hi2 { color:#60a5fa; }

/* ── HOW IT WORKS ── */
.how-section {
  background:var(--c-surface);
  padding:120px 60px; position:relative; overflow:hidden;
}
.how-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,92,246,0.07) 0%, transparent 60%);
}
.how-inner { max-width:1160px; margin:0 auto; }
.how-header { text-align:center; margin-bottom:80px; }
.how-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.how-step {
  background:rgba(255,255,255,0.025);
  border:1px solid var(--c-border);
  border-radius:0; padding:52px 44px;
  position:relative; overflow:hidden;
  transition: background 0.4s, border-color 0.4s;
}
.how-step:first-child { border-radius:20px 0 0 20px; }
.how-step:last-child  { border-radius:0 20px 20px 0; }
.how-step:hover { background:rgba(139,92,246,0.07); border-color:rgba(139,92,246,0.25); }
.how-step::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,0.5), transparent);
  opacity:0; transition:opacity 0.4s;
}
.how-step:hover::before { opacity:1; }
.step-num {
  font-size:11px; font-weight:700; letter-spacing:4px;
  color:var(--c-violet); margin-bottom:24px;
}
.step-icon {
  width:44px; height:44px; margin-bottom:20px;
  color:rgba(255,255,255,0.85);
  transition:transform 0.4s var(--ease-spring);
}
.how-step:hover .step-icon { transform:scale(1.15) translateY(-3px); }
.step-title { font-size:22px; font-weight:700; letter-spacing:-0.6px; margin-bottom:12px; }
.step-desc  { font-size:14px; color:var(--c-text-dim); line-height:1.75; }
.how-step.reveal.visible { animation:stepIn 0.8s cubic-bezier(0.22,1,0.36,1) both; opacity:1; transform:none; }
.how-step.reveal.d1.visible { animation-delay:0.12s; }
.how-step.reveal.d2.visible { animation-delay:0.24s; }

/* ── GLOBE / MAP CARDS ── */
.globe-section {
  background:linear-gradient(to bottom, var(--c-bg) 0%, var(--c-surface) 100%);
  padding:80px 0 140px; overflow:hidden;
}
.img-card {
  position:relative; border-radius:24px; overflow:hidden;
  aspect-ratio:9/19; max-height:640px; margin:0 auto;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.22),
    0 40px 100px rgba(0,0,0,0.75),
    0 0 60px rgba(109,40,217,0.15);
}
.img-card img { width:100%; height:100%; object-fit:cover; }
.img-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,12,0.45) 100%);
}
.map-section {
  background:linear-gradient(to bottom, var(--c-surface) 0%, var(--c-bg) 100%);
  padding:80px 0 140px; overflow:hidden;
}
.map-img-card {
  position:relative; border-radius:24px; overflow:hidden;
  aspect-ratio:9/19; max-height:640px; margin:0 auto;
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.22),
    0 40px 100px rgba(0,0,0,0.75),
    0 0 60px rgba(59,130,246,0.12);
}
.map-img-card img { width:100%; height:100%; object-fit:cover; }
.map-img-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 50%, rgba(0,0,12,0.4) 100%);
}

/* ── INTERLUDE ── */
.interlude {
  background:var(--c-surface);
  padding:130px 24px; text-align:center; position:relative; overflow:hidden;
}
.interlude-orb {
  position:absolute; width:500px; height:280px;
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(139,92,246,0.1) 0%, transparent 70%);
  border-radius:50%; pointer-events:none;
}
.interlude-text {
  position:relative;
  font-size:clamp(26px, 3.8vw, 48px);
  font-weight:700; letter-spacing:-1.5px; line-height:1.3;
  color:rgba(255,255,255,0.85);
}
.interlude-text em {
  font-style:normal;
  background:var(--grad-text);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── GALLERY ── */
.gallery-section { background:var(--c-surface); padding:130px 0; }
.gallery-track {
  display:flex; gap:16px;
  padding:8px 60px 24px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; user-select:none;
}
.gallery-track::-webkit-scrollbar { display:none; }
.gallery-track:active { cursor:grabbing; }
.g-card {
  flex:0 0 220px; height:476px; border-radius:24px; overflow:hidden;
  position:relative; background:#0a0812;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s;
}
.g-card:hover {
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 40px 90px rgba(0,0,0,0.7), 0 0 0 1px rgba(139,92,246,0.3);
}
.g-card img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.8s var(--ease-out); pointer-events:none;
}
.g-card:hover img { transform:scale(1.06); }
.g-overlay {
  position:absolute; bottom:0; left:0; right:0;
  padding:56px 24px 24px;
  background:linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
}
.g-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(109,40,217,0.35);
  border:1px solid rgba(192,132,252,0.3);
  backdrop-filter:blur(16px);
  padding:4px 12px; border-radius:20px;
  font-size:11.5px; font-weight:600; margin-bottom:9px;
}
.g-title { font-size:17px; font-weight:700; letter-spacing:-0.3px; }
.g-meta  { font-size:12px; color:rgba(255,255,255,0.48); margin-top:4px; }

/* ── FEATURES ── */
.features-section {
  background:var(--c-bg); padding:140px 60px; position:relative; overflow:hidden;
}
.features-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:40px 40px;
}
.feat-inner { max-width:1160px; margin:0 auto; position:relative; }
.feat-grid {
  margin-top:72px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  border:1px solid var(--c-border); border-radius:20px; overflow:hidden;
}
.feat-cell {
  background:rgba(12,12,20,0.98); padding:48px 40px;
  position:relative; overflow:hidden;
  transition:background 0.4s;
}
.feat-cell::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(139,92,246,0.07) 0%, rgba(59,130,246,0.03) 100%);
  opacity:0; transition:opacity 0.4s;
}
.feat-cell::after {
  content:''; position:absolute; top:0; left:20%; right:20%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,0.7), transparent);
  opacity:0; transition:opacity 0.4s;
}
.feat-cell:hover { background:rgba(18,14,30,0.99); }
.feat-cell:hover::before, .feat-cell:hover::after { opacity:1; }
.feat-icon {
  width:36px; height:36px; margin-bottom:20px;
  color:rgba(255,255,255,0.85);
  transition:transform 0.4s var(--ease-spring);
}
.feat-cell:hover .feat-icon { transform:scale(1.2) translateY(-4px); }
.feat-name { font-size:20px; font-weight:700; letter-spacing:-0.5px; margin-bottom:10px; }
.feat-desc { font-size:13.5px; color:var(--c-text-dim); line-height:1.75; }
.feat-cell.reveal.visible { animation:cellIn 0.7s cubic-bezier(0.22,1,0.36,1) both; opacity:1; transform:none; }
.feat-cell.reveal.d1.visible { animation-delay:0.08s; }
.feat-cell.reveal.d2.visible { animation-delay:0.16s; }
.feat-cell.reveal.d3.visible { animation-delay:0.24s; }
.feat-cell.reveal.d4.visible { animation-delay:0.32s; }
.feat-cell.reveal.d5.visible { animation-delay:0.40s; }

/* ── EMOTION ── */
.emotion-section {
  background:var(--c-surface);
  padding:140px 60px; position:relative; overflow:hidden;
}
.emotion-section::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 80% 50%, rgba(139,92,246,0.08) 0%, transparent 60%);
}
.emotion-inner {
  max-width:1160px; margin:0 auto; position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center;
}
.emotion-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.emotion-card {
  background:rgba(255,255,255,0.04);
  border:1px solid var(--c-border);
  border-radius:14px; padding:28px 22px;
  transition: transform 0.3s var(--ease-out), background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.emotion-card:hover {
  transform:translateY(-6px);
  background:rgba(139,92,246,0.09);
  border-color:rgba(139,92,246,0.3);
  box-shadow:0 20px 50px rgba(139,92,246,0.12);
}
.ec-icon {
  width:34px; height:34px; margin-bottom:12px;
  color:rgba(255,255,255,0.75);
}
.ec-label { font-size:14px; font-weight:600; color:rgba(255,255,255,0.8); margin-bottom:4px; }
.ec-sub   { font-size:12px; color:var(--c-text-dim); }
.intensity-wrap  { margin-top:36px; }
.intensity-label { font-size:11px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--c-text-dim); margin-bottom:16px; }
.intensity-dots  { display:flex; gap:8px; }
.i-dot {
  flex:1; height:6px; border-radius:3px;
  background:rgba(255,255,255,0.08);
  transition:background 0.3s;
}
.i-dot.active { background:linear-gradient(90deg, var(--c-violet), var(--c-blue)); }

/* ── COLLECTION / BADGE ── */
.badge-section {
  background:linear-gradient(to bottom, var(--c-surface) 0%, var(--c-surface2) 100%);
  padding:140px 24px; text-align:center; overflow:hidden;
}
.badge-inner { max-width:960px; margin:0 auto; }
.progression {
  margin-top:72px;
  display:flex; align-items:flex-start; justify-content:center;
}
.prog-step { display:flex; flex-direction:column; align-items:center; }
.prog-row  { display:flex; align-items:center; }
.prog-dot {
  width:48px; height:48px; border-radius:50%;
  background:var(--grad-main);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  color:#fff;
  box-shadow:0 0 0 1px rgba(139,92,246,0.4), 0 0 30px rgba(139,92,246,0.4);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s;
  cursor:default;
}
.prog-dot:hover {
  transform:scale(1.2) translateY(-5px);
  box-shadow:0 0 0 2px rgba(139,92,246,0.6), 0 0 50px rgba(139,92,246,0.6);
}
.prog-dot .icon-svg { width:22px; height:22px; }
.prog-line { flex:1; height:1px; min-width:28px; max-width:80px; background:linear-gradient(90deg, rgba(139,92,246,0.5), rgba(59,130,246,0.5)); }
.prog-spacer { flex:1; height:1px; max-width:8px; }
.prog-info   { margin-top:12px; text-align:center; }
.prog-name   { font-size:12px; font-weight:600; color:rgba(255,255,255,0.8); }
.prog-req    { font-size:11px; color:rgba(255,255,255,0.28); margin-top:2px; }
.badge-grid {
  margin-top:72px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.b-item {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:28px 14px 22px;
  transition: transform 0.35s var(--ease-spring), background 0.35s, border-color 0.35s, box-shadow 0.35s;
  cursor:default;
}
.b-item:hover {
  transform:translateY(-8px);
  background:rgba(139,92,246,0.1);
  border-color:rgba(139,92,246,0.3);
  box-shadow:0 20px 50px rgba(139,92,246,0.15);
}
.b-emoji {
  width:34px; height:34px; margin:0 auto 10px;
  color:rgba(255,255,255,0.85);
}
.b-emoji.is-emoji { font-size:32px; width:auto; height:auto; }
.b-name  { font-size:12.5px; font-weight:600; color:rgba(255,255,255,0.72); letter-spacing:-0.1px; }
.badge-grid.reveal.visible .b-item          { animation:popIn 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.badge-grid.reveal.visible .b-item:nth-child(1)  { animation-delay:0.04s; }
.badge-grid.reveal.visible .b-item:nth-child(2)  { animation-delay:0.09s; }
.badge-grid.reveal.visible .b-item:nth-child(3)  { animation-delay:0.14s; }
.badge-grid.reveal.visible .b-item:nth-child(4)  { animation-delay:0.19s; }
.badge-grid.reveal.visible .b-item:nth-child(5)  { animation-delay:0.24s; }
.badge-grid.reveal.visible .b-item:nth-child(6)  { animation-delay:0.29s; }
.badge-grid.reveal.visible .b-item:nth-child(7)  { animation-delay:0.34s; }
.badge-grid.reveal.visible .b-item:nth-child(8)  { animation-delay:0.39s; }
.badge-grid.reveal.visible .b-item:nth-child(9)  { animation-delay:0.44s; }
.badge-grid.reveal.visible .b-item:nth-child(10) { animation-delay:0.49s; }
.badge-grid.reveal.visible .b-item:nth-child(11) { animation-delay:0.54s; }
.badge-grid.reveal.visible .b-item:nth-child(12) { animation-delay:0.59s; }

/* ── SOCIAL ── */
.social-section {
  background:linear-gradient(to bottom, var(--c-surface) 0%, var(--c-surface2) 100%);
  padding:100px 60px; overflow:hidden;
}
.social-inner {
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.social-phones {
  display:flex; gap:16px; align-items:flex-end; justify-content:center;
}
.social-phone-card {
  border-radius:24px; overflow:hidden;
  flex:1; max-width:210px;
  aspect-ratio:9/19.5;
  box-shadow:
    0 0 0 1px rgba(139,92,246,0.22),
    0 32px 80px rgba(0,0,0,0.75),
    0 0 50px rgba(109,40,217,0.15);
  transition: transform 0.5s var(--ease-out);
}
.social-phone-card img { width:100%; height:100%; object-fit:cover; }
.social-phone-card:nth-child(1) { transform:rotate(-2.5deg) translateY(18px); }
.social-phone-card:nth-child(2) { transform:rotate(1.5deg); }
.social-phones.visible .social-phone-card:nth-child(1) { transform:rotate(-2.5deg) translateY(18px); }
.social-phones.visible .social-phone-card:nth-child(2) { transform:rotate(1.5deg); }
.social-chips {
  display:flex; flex-wrap:wrap; gap:8px; margin-top:32px;
}
.social-chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:20px;
  background:rgba(139,92,246,0.1);
  border:1px solid rgba(139,92,246,0.25);
  font-size:12px; font-weight:600; color:rgba(255,255,255,0.75);
  letter-spacing:-0.1px;
}
@media (max-width:960px) {
  .social-section { padding:80px 20px; }
  .social-inner { grid-template-columns:1fr; gap:48px; }
  .social-phones { justify-content:center; }
  .social-phone-card { max-width:160px; }
}

/* ── ROUTE ── */
.route-section {
  position:relative; min-height:680px; display:flex; align-items:center; overflow:hidden;
}
.route-bg {
  position:absolute; inset:0;
  background-image:url('../../assets/images/map_route.png');
  background-size:cover; background-position:center top;
  filter:brightness(0.14) saturate(1.8) hue-rotate(220deg);
  will-change:transform;
}
.route-overlay {
  position:absolute; inset:0;
  background:
    linear-gradient(110deg, rgba(0,0,0,0.96) 0%, rgba(0,0,0,0.78) 42%, rgba(0,0,0,0.04) 100%),
    linear-gradient(to right, rgba(8,4,20,0.6) 0%, transparent 55%);
}
.route-content {
  position:relative; z-index:2; padding:80px 110px; max-width:620px;
}
.route-content .sec-title { margin:18px 0 26px; }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  .statement { min-height:80vh; }
  .s-line { letter-spacing:-1.5px; }
  .how-section, .features-section, .emotion-section { padding:100px 20px; }
  .how-steps { grid-template-columns:1fr; gap:1px; }
  .how-step:first-child { border-radius:20px 20px 0 0; }
  .how-step:last-child  { border-radius:0 0 20px 20px; }
  .feat-grid { grid-template-columns:1fr 1fr; }
  .emotion-inner { grid-template-columns:1fr; gap:48px; }
  .badge-grid { grid-template-columns:repeat(2,1fr); }
  .gallery-track { padding:8px 20px 20px; }
  .g-card { flex:0 0 290px; height:420px; }
  .route-content { padding:60px 24px; }
}
@media (max-width:560px) {
  .feat-grid { grid-template-columns:1fr; }
  .emotion-cards { grid-template-columns:1fr 1fr; }
}

/* ── GALLERY FILTER BAR ── */
.g-filter-bar {
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:0 24px; margin-bottom:48px;
}
.g-filter-btn {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:8px 18px;
  font-size:12px; font-weight:600; color:rgba(255,255,255,0.55);
  cursor:pointer; letter-spacing:0.2px;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}
.g-filter-btn:hover {
  background:rgba(255,255,255,0.09);
  border-color:rgba(255,255,255,0.2);
  color:rgba(255,255,255,0.85);
  transform:translateY(-2px);
}
.g-filter-btn.active {
  background:rgba(139,92,246,0.2);
  border-color:rgba(139,92,246,0.5);
  color:#c084fc;
  box-shadow:0 0 18px rgba(139,92,246,0.2);
}

/* ── GALLERY LIGHTBOX ── */
.g-lightbox {
  position:fixed; inset:0; z-index:9990;
  background:rgba(0,0,0,0.92);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(24px);
  animation:fadeIn 0.25s ease;
}
.g-lightbox-inner {
  position:relative;
  display:flex; align-items:center; gap:40px;
  max-width:min(900px, 92vw);
  padding:0 16px;
}
.g-lightbox-inner img {
  width:260px; flex-shrink:0;
  border-radius:28px;
  box-shadow:0 0 0 1px rgba(139,92,246,0.3), 0 40px 100px rgba(0,0,0,0.9);
}
.g-lightbox-info { flex:1; }
.g-lightbox-info .g-badge { display:inline-flex; margin-bottom:16px; }
.g-lightbox-info h3 {
  font-size:clamp(22px, 3vw, 32px);
  font-weight:700; letter-spacing:-1px; margin-bottom:12px;
}
.g-lightbox-info p {
  font-size:14px; color:var(--c-text-dim); line-height:1.7;
}
.g-lightbox-close {
  position:absolute; top:-48px; right:0;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff; font-size:20px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s;
}
.g-lightbox-close:hover { background:rgba(255,255,255,0.18); }
@media (max-width:640px) {
  .g-lightbox-inner { flex-direction:column; gap:24px; }
  .g-lightbox-inner img { width:200px; }
}