/* landing.css — the exact Imperium Sanctus design, sharp & live.
   Backgrounds are the Krea-enhanced design slices (assets/is/bg-*.jpg, 3x res)
   with baked text inpainted away; all text is real HTML absolutely positioned
   to the design's 700px-reference coordinates. The hero emblem is the animated
   alpha-webm (still PNG as fallback), layered over the baked emblem.
   Sizes use cqw (1cqw = 1% of .is-doc width): px_at_700 / 7 = cqw. */

.landing { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; background: #050403; }
.landing.hidden { display: none; }
.landing * { box-sizing: border-box; }

.is-doc { width: 100%; max-width: 1220px; margin: 0 auto; container-type: inline-size;
  font-family: "Cinzel", Georgia, serif; }

/* each section = its sharp text-free slice at its true aspect ratio */
.is-sec { position: relative; width: 100%; background: #050403 no-repeat center / 100% 100%; }
.is-sec-nav      { aspect-ratio: 700 / 47;  background-image: url("../assets/is/bg-nav.jpg"); }
.is-sec-hero     { aspect-ratio: 700 / 348;
  background:
    radial-gradient(ellipse 55% 45% at 50% 62%, rgba(4,3,2,.45), transparent 75%),
    linear-gradient(180deg, rgba(5,4,3,.25) 0%, rgba(5,4,3,.35) 55%, rgba(6,4,3,.88) 92%, #070503 100%),
    url("../assets/is/hero-bg.jpg") center 38% / cover no-repeat #070503; }
.is-sec-alliance { aspect-ratio: 700 / 123; background-image: url("../assets/is/bg-alliance.jpg"); }
.is-sec-clans    { aspect-ratio: 700 / 203; background-image: url("../assets/is/bg-clans.jpg"); }
.is-sec-features { aspect-ratio: 700 / 132; background-image: url("../assets/is/bg-features.jpg"); }
.is-sec-recruit  { aspect-ratio: 700 / 84;  background-image: url("../assets/is/bg-recruit.jpg"); }
.is-sec-footer   { aspect-ratio: 700 / 61;  background-image: url("../assets/is/bg-footer.jpg"); }

.is-sec h1, .is-sec h2, .is-sec h3, .is-sec p { margin: 0; }

/* shared */
.is-h1, .is-h2, .is-rec-h {
  background: linear-gradient(180deg, #f2d795 0%, #d9b163 55%, #b98a3e 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.is-dc { width: 1.9cqw; height: 1.45cqw; fill: currentColor; margin-right: .8cqw; flex: none; }
.is-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  text-transform: uppercase; cursor: pointer; white-space: nowrap; }

/* ---- 01 countdown bar (pure HTML) ---- */
.is-sec-cd { aspect-ratio: 700 / 49; background: #060504; border-bottom: 1px solid rgba(142,98,31,.35);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4%; gap: 2%; }
.is-cd-label { color: #b98f43; letter-spacing: .16em; text-transform: uppercase; font-size: 1.35cqw; white-space: nowrap; }
.is-timer { display: flex; align-items: center; justify-content: center; }
.is-u { text-align: center; padding: 0 2.4cqw; border-left: 1px solid rgba(142,98,31,.32);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.is-u:first-child { border-left: 0; }
.is-u span { color: #d5ad5e; font-size: 2.85cqw; line-height: 1; letter-spacing: .03em; }
.is-u small { color: #9b793d; font-size: .8cqw; letter-spacing: .1em; text-transform: uppercase; margin-top: .3em; }
.is-cd-date { text-align: right; color: #b98f43; letter-spacing: .08em; text-transform: uppercase;
  font-size: 1.05cqw; line-height: 1.4; white-space: nowrap; }
.is-cd-date b { color: #d5ad5e; font-weight: 700; }

/* ---- 02 navigation (logo emblem baked in slice) ---- */
.is-nav-name { position: absolute; left: 11.7%; top: 50%; transform: translateY(-50%);
  font-size: 1.43cqw; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #e6cf9d; white-space: nowrap; }
.is-nav-links { position: absolute; left: 29.4%; top: 0; height: 100%; display: flex; align-items: center; gap: 2.2cqw; }
.is-nav-links a { position: relative; color: #d3c6ad; text-decoration: none; font-size: 1.05cqw;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding: 1cqw 0; }
.is-nav-links a:hover { color: #e2b25c; }
.is-nav-links a.active { color: #e2b25c; }
.is-nav-links a.active::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: .1cqw; width: 3.7cqw; height: 1.1cqw;
  background: url("../assets/is/ornament-active.png") no-repeat center / contain; }
.is-nav-discord { position: absolute; right: 4%; top: 19%; height: 62%; padding: 0 1.7cqw;
  border: 1px solid #8a6a33; border-radius: .4cqw; background: linear-gradient(180deg, #251912, #150e09);
  color: #e2ba6a; font-size: 1.03cqw; letter-spacing: .07em; }
.is-nav-discord:hover { border-color: #c79b4d; color: #f0cf8b; box-shadow: 0 0 1.6cqw rgba(200,150,60,.25); }

/* ---- 03 hero (elf/castle baked; animated knight + emblem layered on top) ---- */
.is-sec-hero { text-align: center; overflow: hidden; }
.is-hero-sorc { position: absolute; right: -7%; bottom: -2%; height: 90%; width: auto; z-index: 1;
  filter: drop-shadow(0 .4cqw 1cqw rgba(0,0,0,.4)); }
video.is-hero-sorc { z-index: 2; }
.is-hero-knightv { position: absolute; left: -4%; bottom: -1%; height: 96%; width: auto; z-index: 1;
  filter: drop-shadow(0 .4cqw 1cqw rgba(0,0,0,.4)); }
video.is-hero-knightv { z-index: 2; }
.is-hero-emblem { position: absolute; left: 50%; transform: translateX(-50%); top: 1.5%; height: 56%; width: auto; z-index: 2; }
.is-emblem-vid { z-index: 3; }
.is-h1 { position: absolute; left: 0; right: 0; top: 56%; font-size: 5.4cqw; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1; z-index: 4;
  filter: drop-shadow(0 .3cqw .9cqw rgba(0,0,0,.85)); }
.is-tagline { position: absolute; left: 0; right: 0; top: 67.5%; font-size: 1.6cqw; letter-spacing: .34em;
  text-transform: uppercase; color: #cbb381; text-shadow: 0 1px 4px rgba(0,0,0,.8); z-index: 4; }
.is-hero-body { position: absolute; left: 0; right: 0; top: 75%; font-size: 1.36cqw; line-height: 1.55;
  color: #b3a795; font-family: "Inter", sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.8); z-index: 4; }
.is-join-line { position: absolute; left: 0; right: 0; top: 82.8%; font-size: 1.4cqw; letter-spacing: .3em;
  text-transform: uppercase; color: #d9b878; text-shadow: 0 1px 4px rgba(0,0,0,.85); z-index: 4; }
.is-hero-btns { position: absolute; left: 0; right: 0; top: 87.6%; height: 8.6%;
  display: flex; align-items: stretch; justify-content: center; gap: 1.4cqw; z-index: 4; }
.is-btn-red { padding: 0 2.6cqw; border: 1px solid #d9a94e; border-radius: .3cqw;
  background: linear-gradient(180deg, #832020 0%, #5c1212 100%);
  color: #f5e3b3; font-size: 1.31cqw; letter-spacing: .09em;
  box-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.55); }
.is-btn-red:hover { background: linear-gradient(180deg, #9a2626 0%, #6d1616 100%); box-shadow: 0 0 1.8cqw rgba(220,120,60,.35); }
.is-arrow { font-size: 1cqw; margin-left: .7cqw; }
.is-btn-dark { padding: 0 2.4cqw; border: 1px solid #8a6a33; border-radius: .3cqw;
  background: rgba(16,11,8,.88); color: #e2ba6a; font-size: 1.31cqw; letter-spacing: .09em; }
.is-btn-dark:hover { border-color: #c79b4d; color: #f0cf8b; box-shadow: 0 0 1.8cqw rgba(200,150,60,.25); }

/* ---- 04 alliance intro (icons + divider lines baked) ---- */
.is-sec-alliance { text-align: center; }
.is-kicker { position: absolute; left: 0; right: 0; top: 6.5%; font-size: 1.29cqw; letter-spacing: .3em;
  text-transform: uppercase; color: #ad8747; }
.is-h2 { position: absolute; left: 0; right: 0; top: 15.5%; font-size: 3.35cqw; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; }
.is-alliance-body { position: absolute; left: 0; right: 0; top: 37.5%; font-size: 1.29cqw; line-height: 1.35;
  color: #afa393; font-family: "Inter", sans-serif; }
.is-alliance-body .is-alliance-name { color: #c9b083; }
.is-pill { position: absolute; top: 58.5%; text-align: left; width: 15%; }
.is-pill-1 { left: 23.6%; } .is-pill-2 { left: 44.2%; } .is-pill-3 { left: 65.9%; }
.is-pill h3 { font-size: 1.57cqw; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d9b878; }
.is-pill p { margin-top: .6cqw; font-size: 1.17cqw; line-height: 1.5; color: #9d9282; font-family: "Inter", sans-serif; }

/* ---- 05 clans (cards + crests baked; texts fill from the API) ---- */
.is-sec-clans { text-align: center; }
.is-clans-h { top: 2.5%; font-size: 2.9cqw; }
.is-clans-sub { position: absolute; left: 0; right: 0; top: 13%; font-size: 1.29cqw; color: #b1a48d;
  font-family: "Inter", sans-serif; }
.is-card { position: absolute; top: 19.2%; height: 76.8%; width: 16.9%; }
.is-card-1 { left: 5.3%; } .is-card-2 { left: 23.6%; } .is-card-3 { left: 41.7%; }
.is-card-4 { left: 59.9%; } .is-card-5 { left: 78%; }
.is-card-crestv { position: absolute; left: 50%; transform: translateX(-50%); top: 1%; height: 55%; width: auto; z-index: 1;
  filter: drop-shadow(0 .4cqw 1cqw rgba(0,0,0,.6)); }
video.is-card-crestv { z-index: 2; }
.is-card-name { position: absolute; left: 3%; right: 3%; top: 55%; font-size: 1.33cqw; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: #d9b878; }
.is-card-role { position: absolute; left: 3%; right: 3%; top: 64.5%; font-size: 1.07cqw;
  letter-spacing: .14em; text-transform: uppercase; color: #a8935f; }
.is-card-divider { position: absolute; left: 12%; right: 12%; top: 73%; height: 1px;
  background: linear-gradient(90deg, transparent, #4a3a22 20%, #4a3a22 80%, transparent); }
.is-card-stats { position: absolute; left: 9%; right: 6%; top: 77%; font-family: "Inter", sans-serif; text-align: left; }
.is-row { display: flex; font-size: .96cqw; line-height: 1.8; }
.is-row span { color: #8d8371; width: 34%; flex: none; }
.is-row b { color: #cfc3ab; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-card-body { position: absolute; left: 8%; right: 8%; top: 77%; font-size: 1.13cqw; line-height: 1.5;
  color: #9d9282; font-family: "Inter", sans-serif; }

/* ---- 06 features (scene panels baked) ---- */
.is-feat { position: absolute; top: 0; height: 100%; text-align: center; }
.is-feat-1 { left: 1.7%;  width: 30.4%; }
.is-feat-2 { left: 33.9%; width: 30.7%; }
.is-feat-3 { left: 66.4%; width: 31.7%; }
.is-feat h3 { position: absolute; left: 0; right: 0; top: 50.5%; font-size: 1.6cqw; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #e3c383; text-shadow: 0 1px 4px rgba(0,0,0,.9); }
.is-feat p { position: absolute; left: 7%; right: 7%; top: 63%; font-size: 1.14cqw; line-height: 1.5;
  color: #b3a795; font-family: "Inter", sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.9); }

/* ---- 07 recruitment (ember slice; knight overlaps both borders) ---- */
.is-rec-knight { position: absolute; left: 2%; bottom: -13%; height: 131%; width: auto; z-index: 6;
  filter: drop-shadow(0 .8cqw 2cqw rgba(0,0,0,.75)); }
.is-rec-h { position: absolute; left: 28%; top: 13%; font-size: 2.2cqw; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.14; text-align: left; }
.is-rec-body { position: absolute; left: 28%; top: 56%; font-size: 1.21cqw; line-height: 1.5;
  color: #b3a08a; font-family: "Inter", sans-serif; text-align: left; }
.is-rpanel { position: absolute; top: 9.5%; height: 79%; display: flex; gap: 1cqw; align-items: flex-start;
  text-decoration: none; border: 1px solid #6b5326; border-radius: .5cqw; padding: 1.1cqw 1.2cqw;
  background: linear-gradient(180deg, #100c08, #0a0705); box-shadow: inset 0 0 1.6cqw rgba(0,0,0,.5); }
.is-rpanel-1 { left: 50.7%; width: 21.5%; }
.is-rpanel-2 { left: 73.4%; width: 21.2%; }
.is-rpanel:hover { border-color: #c79b4d; box-shadow: 0 0 1.8cqw rgba(200,150,60,.22); }
.is-rp-ic { height: 3.2cqw; width: auto; margin-top: .2cqw; opacity: .9; flex: none; }
.is-rpanel h3 { font-size: 1.24cqw; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #e3c383; white-space: nowrap; }
.is-rpanel p { margin-top: .6cqw; font-size: 1.09cqw; line-height: 1.5; color: #b0a695; font-family: "Inter", sans-serif; text-align: left; }
.is-rpanel .is-alliance-name { color: #c9b083; }

/* ---- 08 final CTA + footer (sword, winged emblem, Lineage II baked) ---- */
.is-sec-footer { text-align: center; }
.is-foot-h { position: absolute; left: 0; right: 0; top: 5%; font-size: 2cqw; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: #e8cd93; text-shadow: 0 1px 5px rgba(0,0,0,.8); }
.is-foot-sub { position: absolute; left: 0; right: 0; top: 31%; font-size: 1.29cqw; letter-spacing: .3em;
  text-transform: uppercase; color: #c9a55f; }
.is-banner { position: absolute; left: 50%; transform: translateX(-50%); top: 51%; width: 27%; height: 35%;
  clip-path: polygon(2.5% 0, 97.5% 0, 100% 50%, 97.5% 100%, 2.5% 100%, 0 50%);
  background: #c69d4c; text-decoration: none; }
.is-banner-in { position: absolute; inset: 1px; clip-path: polygon(2.5% 0, 97.5% 0, 100% 50%, 97.5% 100%, 2.5% 100%, 0 50%);
  background: linear-gradient(180deg, #86201d 0%, #571110 100%);
  display: flex; align-items: center; justify-content: center;
  color: #f2ddb0; font-size: 1.14cqw; letter-spacing: .1em; text-transform: uppercase; font-family: "Cinzel", serif; }
.is-banner:hover .is-banner-in { background: linear-gradient(180deg, #9c2724 0%, #671514 100%); }
.is-copy { position: absolute; left: 1.3%; top: 73%; font-size: .93cqw; color: #7d7365;
  font-family: "Inter", sans-serif; letter-spacing: .02em; }

@media (max-width: 640px) { .is-doc { max-width: 100vw; } }