/* ---------- HERO ---------- */
.hero{position:relative;text-align:center;padding:var(--space-20) 0;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--c-neutral-900) 0%,var(--c-bg) 70%),url(/assets/images/hero-banner.webp) center/cover no-repeat;opacity:.3;animation:marquee-pulse 2s var(--timing) 1}
@keyframes marquee-pulse{0%{opacity:.15}100%{opacity:.3}}
.hero-inner{position:relative;z-index:1}
.hero-title{font-family:var(--ff-mono);color:var(--c-primary);text-shadow:var(--shadow-glow)}
.hero-sub{font-size:var(--fs-lg);max-width:65ch;margin-inline:auto}

/* ---------- MATRIX ---------- */
.contact-matrix{padding-block:var(--space-16)}
.matrix-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.matrix-col{text-align:center}
.pixel-icon{font-size:var(--fs-4xl);line-height:1;margin-bottom:var(--space-4)}
.reply{font-size:var(--fs-sm);color:var(--c-neutral-600);margin-bottom:var(--space-4)}

/* ---------- CONCIERGE ---------- */
.concierge{padding-block:var(--space-16)}
.concierge-form{max-width:44rem;margin-inline:auto}
.step{display:none}
.step.active{display:block}
.step-label{font-size:var(--fs-xs);color:var(--c-neutral-600);margin-bottom:var(--space-4)}
.checkbox-group{display:flex;align-items:center;gap:var(--space-2);margin-block:var(--space-4)}
.step-nav{display:flex;justify-content:space-between;margin-top:var(--space-6)}

/* ---------- HOTLINE ---------- */
.hotline{text-align:center;padding-block:var(--space-16)}
.hotline-number{font-family:var(--ff-mono);font-size:var(--fs-5xl);color:var(--c-primary);text-shadow:var(--shadow-glow)}
.hotline-label{font-size:var(--fs-lg);margin-bottom:var(--space-6)}
.ticker{height:1.5rem;overflow:hidden;position:relative}
.ticker-item{display:block;animation:ticker 9s linear infinite}
@keyframes ticker{0%{transform:translateY(0)}33%{transform:translateY(-100%)}66%{transform:translateY(-200%)}100%{transform:translateY(-300%)}}

/* ---------- ROUTE ---------- */
.route-finder{padding-block:var(--space-16)}
.map-wrapper{position:relative;height:16rem;background:radial-gradient(circle at center,var(--c-neutral-200) 1px,transparent 1px);background-size:1rem 1rem;border:1px solid var(--c-neutral-300);border-radius:var(--radius-lg)}
.map-tooltip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--radius);padding:var(--space-4);box-shadow:var(--shadow-lg);pointer-events:none;opacity:0;transition:opacity var(--duration)}
.map-wrapper:hover .map-tooltip{opacity:1;pointer-events:auto}

/* ---------- FAQ ---------- */
.faq{padding-block:var(--space-16)}
.accordion dt{margin-bottom:var(--space-2)}
.accordion-trigger{width:100%;text-align:left;display:flex;align-items:center;gap:var(--space-2);background:transparent;border:0;font-size:var(--fs-lg);cursor:pointer;padding:var(--space-2) 0}
.accordion-panel{margin-left:var(--space-8);margin-bottom:var(--space-4);display:none}
.accordion-panel.open{display:block}
.power-up{font-size:var(--fs-base)}

/* ---------- SOCIAL ---------- */
.social-strip{padding-block:var(--space-16)}
.social-list{display:flex;justify-content:center;gap:var(--space-6)}
.social-list a{display:grid;place-content:center;width:3rem;height:3rem;border-radius:50%;background:var(--c-neutral-200);color:var(--c-bg);transition:background var(--duration),box-shadow var(--duration)}
.social-list a:hover{animation:rgb-glow 1.2s infinite}
@keyframes rgb-glow{0%,100%{box-shadow:0 0 8px var(--c-primary)}33%{box-shadow:0 0 8px var(--c-success)}66%{box-shadow:0 0 8px var(--c-warning)}}

/* ---------- PRESS ---------- */
.press-kit{padding-block:var(--space-16);text-align:center}
.press-btn{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--c-danger);--btn-bg:var(--c-danger)}

/* ---------- CARBON ---------- */
.carbon-counter{padding-block:var(--space-16);text-align:center}
.lcd-counter{display:inline-block;background:var(--c-neutral-100);border:2px solid var(--c-neutral-300);border-radius:var(--radius);padding:var(--space-4) var(--space-6);font-family:var(--ff-mono)}
.lcd-label{font-size:var(--fs-sm);color:var(--c-neutral-600)}
.lcd-value{font-size:var(--fs-3xl);color:var(--c-success)}

/* ---------- SATISFACTION ---------- */
.satisfaction{padding-block:var(--space-16)}
.satisfaction-box{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}
.pixel-thumb{font-size:var(--fs-5xl)}

/* ---------- CHAT TOKEN ---------- */
.chat-token{position:fixed;bottom:var(--space-6);right:var(--space-6);width:4rem;height:4rem;border-radius:50%;background:var(--c-warning);color:#000;border:0;cursor:pointer;box-shadow:var(--shadow-lg);z-index:100;transition:transform var(--duration)}
.chat-token:hover{transform:scale(1.1)}
.chat-panel{position:fixed;bottom:var(--space-6);right:var(--space-6);width:20rem;background:var(--c-neutral-50);border:1px solid var(--c-neutral-300);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:101;transform:translateY(120%);transition:transform var(--duration);padding:var(--space-4)}
.chat-panel.open{transform:translateY(0)}
.chat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4)}
.chat-close{background:transparent;border:0;font-size:var(--fs-2xl);cursor:pointer}
.chat-form{display:grid;gap:var(--space-3)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
.hero{padding:var(--space-16) 0}
.hotline-number{font-size:var(--fs-4xl)}
.ticker-item{font-size:var(--fs-sm)}
.step-nav{flex-direction:column;gap:var(--space-4)}
}