/* Techstein page-specific styles (extends css/site.css) */
.champ .with .ecell-chip{width:28px; height:28px}
.hero-badge{display:inline-flex; align-items:center; gap:10px; margin-top:28px; padding:8px 16px 8px 8px; border:1px solid var(--line); background:rgba(255,255,255,.03); border-radius:999px; font-size:.85rem; opacity:0; animation:rise .8s .85s cubic-bezier(.2,.7,.2,1) forwards}
.hero-badge b{color:var(--c2)}
.ecell-chip{width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center; overflow:hidden; flex:0 0 auto}
.ecell-chip img{width:100%; height:100%; object-fit:cover}
.plate.ec{background:#fff}
.plate.ec img{height:52px}
/* HOW IT WORKS — big USP flow */
.usp-facts{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px}
.uf{font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; border:1px solid var(--line); background:var(--panel); padding:9px 15px; border-radius:9px; display:flex; align-items:center; gap:8px}
.uf svg{width:16px;height:16px;color:var(--c1)}
.cstep .mini{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px}
.cstep .mini span{font-size:.72rem; color:var(--c1); border:1px solid var(--line); border-radius:6px; padding:3px 8px}
/* WHY SCHOOLS */
.why{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.wcard{background:linear-gradient(160deg,var(--panel),var(--panel2)); border:1px solid var(--line); border-radius:18px; padding:30px 24px; transition:transform .3s,border-color .3s}
.wcard:hover{transform:translateY(-5px); border-color:rgba(255,184,77,.4)}
.wcard .ic{width:50px; height:50px; border-radius:13px; display:grid; place-items:center; color:var(--c2); background:rgba(255,184,77,.1); border:1px solid rgba(255,184,77,.25); margin-bottom:18px}
.wcard h4{font-size:1.1rem; margin-bottom:8px}
.wcard p{color:var(--muted); font-size:.9rem}
.stu-strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px; justify-content:center}
.stu-strip span{font-size:.85rem; color:var(--muted); border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:8px 15px}
.stu-strip span b{color:var(--fg); font-weight:600}
/* GRAND FINALE — hero band */
.finale{position:relative; border-radius:26px; overflow:hidden; border:1px solid var(--line); min-height:520px; display:flex; align-items:flex-end}
.finale>img{position:absolute; inset:0; width:100%; height:118%; object-fit:cover; opacity:.5; will-change:transform}
.finale .veil{position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,11,22,.55),rgba(7,11,22,.35) 40%,rgba(7,11,22,.94))}
.finale .fin-in{position:relative; z-index:2; padding:48px 44px; width:100%}
.finale h2{font-size:clamp(2rem,5.5vw,3.6rem); margin:14px 0 30px; max-width:16ch}
.finale h2 .g{background:linear-gradient(120deg,var(--c2),var(--c1)); -webkit-background-clip:text; background-clip:text; color:transparent}
.fin-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; backdrop-filter:blur(4px)}
.fin-stat{background:rgba(12,19,34,.78); padding:26px 18px; text-align:center}
.fin-stat .big{font-family:var(--disp); font-weight:700; font-size:clamp(1.8rem,4.4vw,2.9rem); background:linear-gradient(120deg,var(--c1),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1}
.fin-stat .cap{font-size:.78rem; color:var(--muted); margin-top:8px}
.cert-line{margin-top:22px; text-align:center; font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; color:var(--muted)}
.cert-line b{color:var(--c1)}
@media(max-width:980px){
  .why{grid-template-columns:1fr 1fr}
  .fin-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .why{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .hero .word,.hero p,.hero-cta,.hero-badge{opacity:1; transform:none}
}