/* ==========================================================
   pages.css — Recap, IMTI Center, Contact, Dashboard/404, Checklist
   ========================================================== */

.sq { display: inline-block; width: .13em; height: .13em; margin-left: .06em; background: var(--yellow); vertical-align: baseline; }
button.chip { background: transparent; color: var(--text-2); cursor: pointer; font-family: inherit; }
button.chip.is-active { color: var(--navy); }
.backlink {
  display: inline-flex; align-items: center; gap: .6rem; height: 2.7rem; padding: 0 1.2rem 0 1rem; border-radius: 99rem; border: 1px solid rgba(198, 224, 255, .35);
  font-size: .82rem; font-weight: 700; letter-spacing: .08em; transition: background .35s, color .35s;
}
.backlink svg { width: 1.1rem; height: 1.1rem; transition: translate .4s var(--ease); }
.backlink:hover { background: var(--mist); color: var(--navy); }
.backlink:hover svg { translate: -.3rem 0; }

/* ---------------------------- RECAP ---------------------------- */
.page--recap > .backlink { margin-bottom: 2.4rem; }
.recap-head { display: flex; align-items: baseline; gap: 1.6rem; flex-wrap: wrap; }
.recap-head__title { font-weight: 800; font-size: 9rem; line-height: .95; letter-spacing: -0.04em; }
.recap-head__tag { font-size: 3.6rem; color: var(--yellow); letter-spacing: -0.03em; }
.recap-sub { margin-top: .8rem; font-size: 1.15rem; color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.recap-list { display: grid; gap: 3.4rem; margin-top: 4rem; }
.ritem { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.2rem; align-items: center; }
.ritem[hidden] { display: none; }
.ritem[data-side="right"] .ritem__img { order: 2; }
.ritem__img { margin: 0; aspect-ratio: 16 / 10; border-radius: 2.2rem; overflow: hidden; border: 1px solid var(--line); background: var(--blue-700); box-shadow: 0 1.6rem 3.4rem rgba(1, 26, 56, .45); }
.ritem__ph { width: 100%; height: 100%; }
.ritem__ph .ph__img { transition: transform 1.2s var(--ease), opacity .8s; }
.ritem:hover .ritem__ph .ph__img { transform: scale(1.07); }
.ritem__text { display: grid; gap: .8rem; justify-items: start; }
.ritem__by { color: var(--yellow); font-size: 1.15rem; }
.ritem__title { font-size: 3.1rem; font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
.ritem__desc { color: var(--text-2); font-size: 1.05rem; line-height: 1.7; max-width: 30rem; }
.ritem__tri { font-size: .95rem; line-height: 1.6; max-width: 30rem; padding-left: 1rem; border-left: 2px solid var(--yellow); color: var(--mist); }
.ritem.is-swap { animation: swap-in .8s var(--swap-d, 0ms) var(--ease) backwards; }
@keyframes swap-in { from { opacity: 0; transform: translateY(2rem) scale(.98); } }
.recap-empty { margin-top: 4rem; text-align: center; color: var(--text-2); }

/* ---------------------------- IMTI CENTER ---------------------------- */
.chero {
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: 1.1rem; padding: 4rem 3.6rem 4.2rem; border-radius: 3rem;
  background: radial-gradient(60rem 30rem at 100% 0%, rgba(5, 101, 219, .7), transparent 65%), linear-gradient(135deg, #033f8a 0%, #022d61 100%); border: 1px solid rgba(198, 224, 255, .22);
}
.chero__title { font-weight: 800; font-size: 8.4rem; line-height: .9; letter-spacing: -0.035em; display: grid; }
.chero__title .ts { font-weight: 400; }
.chero__lead { max-width: 33rem; font-size: 1.15rem; line-height: 1.65; color: var(--text-2); }
.chero__rings { position: absolute; right: -6rem; top: -6rem; width: 30rem; color: rgba(198, 224, 255, .25); z-index: -1; animation: spin-slow 60s linear infinite; }
.chero__rings2 { position: absolute; right: 7rem; bottom: -8rem; width: 22rem; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 245, 155, .35); z-index: -1; transition: scale 1s var(--ease); }
.chero:hover .chero__rings2 { scale: 1.25; }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
.qcard {
  display: grid; gap: 3.4rem; align-content: space-between; min-height: 14rem; padding: 1.3rem 1.4rem 1.5rem; border-radius: 2rem; background: var(--mist); color: var(--navy);
  transition: translate .5s var(--ease), box-shadow .5s var(--ease), background .4s;
}
.qcard:hover { translate: 0 -.55rem; box-shadow: 0 1.8rem 3.4rem rgba(1, 26, 56, .5); background: #fff; }
.qcard--yellow { background: var(--yellow); }
.qcard--yellow:hover { background: #fffacb; }
.qcard__top { display: flex; align-items: center; justify-content: space-between; }
.qcard strong { font-size: 1.7rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.025em; }

.svc { margin-top: 8rem; }
.svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.4rem; }
.scard {
  display: grid; gap: .9rem; padding: 1.2rem; border-radius: 2rem; background: linear-gradient(160deg, #033f8a, #022d61); border: 1px solid rgba(198, 224, 255, .2);
  transition: translate .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.scard:hover { translate: 0 -.5rem; border-color: rgba(255, 245, 155, .6); box-shadow: 0 1.6rem 3rem rgba(1, 26, 56, .5); }
.scard__head { display: flex; align-items: center; gap: .9rem; }
.scard__head h3 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.scard__avatar { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; overflow: hidden; border: 2px solid rgba(198, 224, 255, .4); }
.scard__ph { width: 100%; height: 100%; }
.scard__link {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem .85rem .85rem 1.2rem; border-radius: 1.3rem; background: var(--mist); color: var(--navy);
  font-size: .95rem; font-weight: 600; transition: background .35s, translate .4s var(--ease);
}
.scard__link:hover { background: var(--yellow); translate: .25rem 0; }
.scard__profile { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600; color: var(--sky); transition: color .3s, gap .3s var(--ease); }
.scard__profile svg { width: 1rem; height: 1rem; }
.scard__profile:hover { color: var(--yellow); gap: .8rem; }

/* ---------------------------- CONTACT ---------------------------- */
.contact-top { display: grid; grid-template-columns: 1fr 1fr; gap: 3.4rem; align-items: center; min-height: 36rem; }
.contact-top__text { display: grid; justify-items: start; gap: 1.3rem; }
.contact-top__title { font-weight: 800; font-size: 8.6rem; line-height: .9; letter-spacing: -0.04em; display: grid; }
.contact-top__text p { max-width: 28rem; color: var(--text-2); font-size: 1.12rem; line-height: 1.7; }
.cform {
  display: grid; gap: 1rem; padding: 2.2rem; border-radius: 2.4rem; background: var(--mist); color: var(--navy); box-shadow: 0 2rem 4rem rgba(1, 26, 56, .45);
}
.cform__title { font-size: 2.2rem; color: var(--blue-500); margin-bottom: .2rem; }
.field { display: grid; gap: .35rem; }
.field span { font-size: .72rem; font-weight: 800; letter-spacing: .14em; color: var(--blue-600); }
.field input, .field textarea {
  width: 100%; padding: .9rem 1.1rem; border-radius: 1rem; border: 1.5px solid transparent; background: #fff; color: var(--navy); font: inherit; font-size: 1rem; resize: vertical;
  transition: border-color .3s, box-shadow .3s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(3, 63, 138, .45); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 .25rem rgba(5, 101, 219, .18); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform__error { padding: .7rem 1rem; border-radius: .9rem; background: #ffe9e4; color: #8a1d0a; font-size: .9rem; font-weight: 600; }
.cform__submit {
  position: relative; overflow: hidden; height: 3.5rem; border-radius: 99rem; border: 0; background: var(--blue-500); color: #fff; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: background .35s, scale .35s var(--ease);
}
.cform__submit::before { content: ''; position: absolute; inset: 0; background: var(--yellow); translate: -101% 0; transition: translate .6s var(--ease); }
.cform__submit:hover::before { translate: 0 0; }
.cform__submit:hover { color: var(--navy); }
.cform__submit > span { position: relative; display: inline-flex; align-items: center; gap: .5rem; transition: translate .5s var(--ease), opacity .3s; }
.cform__done { position: absolute !important; inset: 0; justify-content: center; translate: 0 120%; opacity: 0; }
.cform__submit.is-done { background: var(--blue-600); color: #fff; }
.cform__submit.is-done .cform__label { translate: 0 -120%; opacity: 0; }
.cform__submit.is-done .cform__done { translate: 0 0; opacity: 1; }
.cform__submit.is-loading { pointer-events: none; opacity: .75; }
.cform__submit.is-loading .cform__label::after { content: ''; display: inline-block; width: 1em; height: 1em; margin-left: .6rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -.15em; animation: spin-slow .7s linear infinite; }

.channels, .persons { margin-top: 8rem; }
.channels__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.1rem; margin-top: 2.4rem; }
.chcard {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.2rem 1.4rem; border-radius: 1.8rem; background: var(--mist); color: var(--navy);
  transition: translate .5s var(--ease), background .4s, box-shadow .5s var(--ease);
}
.chcard:hover { translate: 0 -.45rem; background: var(--yellow); box-shadow: 0 1.5rem 3rem rgba(1, 26, 56, .5); }
.chcard__ico { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--blue-500); color: #fff; transition: rotate .6s var(--ease); }
.chcard__ico svg { width: 1.5rem; height: 1.5rem; }
.chcard:hover .chcard__ico { rotate: 360deg; }
.chcard__txt { display: grid; gap: .1rem; min-width: 0; }
.chcard__txt strong { font-size: 1.1rem; font-weight: 800; }
.chcard__txt small { font-size: .85rem; color: var(--blue-600); overflow-wrap: anywhere; }

.persons__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.4rem; }
.person {
  position: relative; display: grid; grid-template-columns: 11.5rem 1fr; gap: 1.2rem; align-items: end; padding: 1.4rem 1.6rem 0; min-height: 15rem; border-radius: 2.2rem; overflow: hidden;
  background: linear-gradient(160deg, #0350ad, #033f8a); border: 1px solid rgba(198, 224, 255, .25); transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.person:hover { translate: 0 -.5rem; box-shadow: 0 1.8rem 3.4rem rgba(1, 26, 56, .5); }
.person__photo { height: 14rem; }
.person__ph { width: 100%; height: 100%; }
.person__ph .ph__img { transform-origin: 50% 100%; transition: transform .7s var(--ease), opacity .8s; }
.person:hover .person__ph .ph__img { transform: scale(1.07); }
.person__info { align-self: center; padding-bottom: 1.4rem; display: grid; gap: .6rem; }
.person__info h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--yellow); }
.person dl { display: grid; gap: .3rem; font-size: .92rem; }
.person dl div { display: grid; grid-template-columns: 4rem 1fr; gap: .4rem; }
.person dt { color: var(--text-3); }
.person dd { font-weight: 600; overflow-wrap: anywhere; }
.person dd a:hover { color: var(--yellow); text-decoration: underline; }
.person__role { font-size: .95rem; color: var(--sky); }

/* ---------------------------- Dashboard / 404 ---------------------------- */
.soon {
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: center; align-content: center; gap: 1.2rem; min-height: 38rem; padding: 4rem 2rem; text-align: center; border-radius: 3rem;
  background: radial-gradient(50rem 26rem at 50% 0%, rgba(5, 101, 219, .6), transparent 70%), linear-gradient(160deg, #033f8a, #022d61); border: 1px solid rgba(198, 224, 255, .22);
}
.soon__logo { width: 11rem; aspect-ratio: 4 / 3; }
.soon__title { font-weight: 800; font-size: 6.4rem; line-height: 1; letter-spacing: -0.035em; }
.soon__title .ts { font-weight: 400; }
.soon p { max-width: 30rem; color: var(--text-2); font-size: 1.1rem; line-height: 1.65; }
.soon__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .6rem; }
.soon__flower { position: absolute; z-index: -1; color: rgba(198, 224, 255, .3); animation: spin-slow 50s linear infinite; }
.soon__flower--a { left: -5rem; bottom: -5rem; width: 18rem; }
.soon__flower--b { right: -4rem; top: -4rem; width: 14rem; animation-direction: reverse; }
.soon__spark { position: absolute; z-index: -1; right: 18%; bottom: 20%; width: 4rem; color: var(--yellow); animation: twinkle 3.4s ease-in-out infinite; }

/* ---------------------------- Checklist ---------------------------- */
.page--checklist { max-width: 60rem; }
.ck-head { display: grid; justify-items: start; gap: .9rem; margin-bottom: 2.4rem; }
.ck-title { font-weight: 800; font-size: 4rem; line-height: 1.05; letter-spacing: -0.03em; }
.ck-title .ts { font-weight: 400; }
.ck-head p { color: var(--text-2); }
.ck-head code, .ck-item code { padding: .1em .45em; border-radius: .4rem; background: rgba(227, 239, 255, .1); color: var(--yellow); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.ck-sum strong { color: var(--yellow); }
.ck-filter { display: flex; gap: .5rem; flex-wrap: wrap; }
.ck-group { margin-top: 2rem; }
.ck-group h2 { font-size: 1.3rem; font-weight: 800; margin-bottom: .7rem; }
.ck-group ul { display: grid; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.ck-item { display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); gap: .8rem; align-items: center; padding: .6rem .9rem; border-radius: .9rem; background: rgba(227, 239, 255, .05); font-size: .85rem; }
.ck-item[hidden] { display: none; }
.ck-item code { overflow-wrap: anywhere; }
.ck-note { color: var(--text-3); }
.ck-note em { font-style: normal; color: var(--sky); }
.ck-dot { width: .75rem; height: .75rem; border-radius: 50%; background: var(--text-3); }
.ck-item[data-state="found"] .ck-dot { background: #7be0a3; box-shadow: 0 0 0 .25rem rgba(123, 224, 163, .2); }
.ck-item[data-state="missing"] .ck-dot { background: var(--yellow); }

/* ---------------------------- responsive ---------------------------- */
@media (max-width: 1100px) {
  .quick { grid-template-columns: repeat(2, 1fr); }
  .svc__grid { grid-template-columns: repeat(2, 1fr); }
  .recap-head__title, .contact-top__title, .chero__title { font-size: 6.6rem; }
}
@media (max-width: 860px) {
  .recap-head__title { font-size: clamp(3.8rem, 18vw, 5.6rem); }
  .recap-head__tag { font-size: 1.9rem; }
  .recap-list { gap: 2.4rem; margin-top: 2.4rem; }
  .ritem { grid-template-columns: 1fr; gap: 1.1rem; }
  .ritem[data-side="right"] .ritem__img { order: 0; }
  .ritem__title { font-size: 2rem; }
  .chero { padding: 2.2rem 1.4rem; border-radius: 2rem; }
  .chero__title { font-size: clamp(3.6rem, 16vw, 5.2rem); }
  .quick { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .qcard { min-height: 10.5rem; gap: 1.8rem; padding: 1rem; border-radius: 1.5rem; }
  .qcard strong { font-size: 1.15rem; }
  .qcard .pill { font-size: .6rem; padding-inline: .6rem; }
  .svc { margin-top: 4.5rem; }
  .svc__grid { grid-template-columns: 1fr; }
  .contact-top { grid-template-columns: 1fr; gap: 2rem; min-height: 0; }
  .contact-top__title { font-size: clamp(3.8rem, 17vw, 5.6rem); }
  .cform { padding: 1.4rem; border-radius: 1.8rem; }
  .channels, .persons { margin-top: 4.5rem; }
  .persons__grid { grid-template-columns: 1fr; }
  .person { grid-template-columns: 8.5rem 1fr; padding: 1rem 1.1rem 0; }
  .person__photo { height: 11rem; }
  .soon { min-height: 30rem; border-radius: 2rem; }
  .soon__title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .ck-item { grid-template-columns: auto 1fr; }
  .ck-note { grid-column: 2; }
}