/*  THE SHOWCASE PAGE.
 *
 *  Layered on top of style.css so the palette, the font and the buttons are
 *  literally the same objects the licence site uses - a buyer who lands here
 *  and later signs in should not feel he changed products.
 */

body.landing { padding-bottom: 0; }

/* ---------------- header ---------------- */

.lhead {
    position: sticky; top: 0; z-index: 30;
    background: rgba(11, 7, 20, .82);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.lhead-in {
    max-width: 1180px; margin: 0 auto; padding: 0 26px;
    display: flex; align-items: center; gap: 20px; min-height: 70px; flex-wrap: wrap;
}
.lnav { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; }
.lnav a { padding: 9px 15px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
          color: var(--textFaint); transition: all .18s ease; }
.lnav a:hover { color: var(--text); background: rgba(167, 139, 250, .09); }
.lnav a.btn { color: #fff; }
.lnav a.btn.ghost { color: var(--textFaint); }

/* ---------------- hero ---------------- */

.hero { padding: 86px 26px 66px; text-align: center; position: relative; z-index: 1; }
.hero-in { max-width: 860px; margin: 0 auto; }

.eyebrow {
    display: inline-block; padding: 7px 17px; border-radius: 999px;
    background: var(--accentDim); border: 1px solid var(--border);
    color: var(--accentLight); font-size: 13.5px; font-weight: 600;
    margin-bottom: 24px;
    animation: rise .6s cubic-bezier(.2, .8, .3, 1) both;
}

.hero h1 {
    font-size: clamp(34px, 6vw, 58px); line-height: 1.22; margin: 0 0 20px;
    font-weight: 800; letter-spacing: -.5px;
    animation: rise .6s cubic-bezier(.2, .8, .3, 1) .08s both;
}
.grad {
    background: linear-gradient(120deg, var(--accentLight), #d8b4fe, var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lead {
    font-size: clamp(15px, 2vw, 18px); color: var(--textFaint);
    max-width: 700px; margin: 0 auto 34px; line-height: 1.9;
    animation: rise .6s cubic-bezier(.2, .8, .3, 1) .16s both;
}

.cta { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap;
       animation: rise .6s cubic-bezier(.2, .8, .3, 1) .24s both; }
.btn.big { padding: 15px 34px; font-size: 16px; border-radius: 13px; }
.btn.full { width: 100%; justify-content: center; margin-top: auto; }

/* ---------------- the numbers ---------------- */

.stats-band { padding: 0 26px 70px; position: relative; z-index: 1; }
.lstats {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 14px;
}
.lstat {
    background: linear-gradient(180deg, rgba(30, 19, 48, .72), rgba(22, 13, 36, .82));
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 22px 16px; text-align: center;
    transition: transform .22s ease, border-color .22s ease;
}
.lstat:hover { transform: translateY(-4px); border-color: var(--glow); }
.lstat .n {
    font-size: clamp(24px, 3.4vw, 33px); font-weight: 800; line-height: 1.15;
    background: linear-gradient(120deg, var(--text), var(--accentLight));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    direction: ltr; unicode-bidi: embed;
}
.lstat .l { color: var(--textFaint); font-size: 12.5px; margin-top: 4px; }

.counted { text-align: center; color: var(--faint, var(--textFaint));
           font-size: 12.5px; margin: 22px 0 0; opacity: .75; }

/* ---------------- sections ---------------- */

.sect { padding: 76px 26px; position: relative; z-index: 1; }
.sect.alt { background: rgba(22, 13, 36, .42); border-block: 1px solid var(--border); }
.sect-title {
    text-align: center; font-size: clamp(25px, 4vw, 35px); font-weight: 800;
    margin: 0 0 46px; letter-spacing: -.3px;
}

/* ---------------- features ---------------- */

.feats {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 18px;
}
.feat {
    background: linear-gradient(180deg, rgba(30, 19, 48, .68), rgba(22, 13, 36, .8));
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 26px 24px; transition: transform .22s ease, border-color .22s ease;
}
.feat:hover { transform: translateY(-4px); border-color: var(--border2); }
.feat .ic { font-size: 30px; margin-bottom: 13px; line-height: 1; }
.feat h3 { font-size: 18px; margin: 0 0 9px; font-weight: 700; }
.feat p { color: var(--textFaint); font-size: 14.5px; margin: 0; line-height: 1.85; }
.feat b { color: var(--text); }
.tag {
    display: inline-block; background: var(--accentDim); border: 1px solid var(--border2);
    color: var(--accentLight); font-size: 11.5px; padding: 2px 9px;
    border-radius: 999px; margin-inline-start: 4px;
}

/* ---------------- steps ---------------- */

.steps { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 15px; }
.step {
    display: flex; gap: 19px; align-items: flex-start;
    background: linear-gradient(180deg, rgba(30, 19, 48, .62), rgba(22, 13, 36, .74));
    border: 1px solid var(--border); border-radius: var(--radius); padding: 21px 24px;
    transition: transform .2s ease, border-color .2s ease;
}
.step:hover { transform: translateX(-5px); border-color: var(--border2); }
.step .num {
    flex: 0 0 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(180deg, var(--accentLight), var(--accent));
    display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff;
}
.step h4 { margin: 0 0 5px; font-size: 16.5px; }
.step p { margin: 0; color: var(--textFaint); font-size: 14.5px; line-height: 1.8; }

/* ---------------- technical ---------------- */

.tech {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px;
}
.tcard {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 13px; padding: 21px 22px;
}
.tcard h4 { margin: 0 0 7px; font-size: 15.5px; color: var(--accentLight); }
.tcard p { margin: 0; color: var(--textFaint); font-size: 14px; line-height: 1.8; }

/* ---------------- editions ---------------- */

.eds {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px; align-items: stretch;
}
.ed {
    position: relative; display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(30, 19, 48, .74), rgba(22, 13, 36, .86));
    border: 1px solid var(--border); border-radius: 19px; padding: 30px 26px;
    transition: transform .22s ease, border-color .22s ease;
}
.ed:hover { transform: translateY(-5px); }
.ed.best { border-color: var(--accent); box-shadow: 0 0 42px rgba(139, 92, 246, .2); }
.badge {
    position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(50%);
    background: linear-gradient(180deg, var(--accentLight), var(--accent));
    color: #fff; font-size: 12.5px; font-weight: 800;
    padding: 5px 17px; border-radius: 999px; white-space: nowrap;
}
.ed-head { margin-bottom: 19px; }
.ed-head h3 { margin: 0 0 5px; font-size: 22px; font-weight: 800; }
.ed-for { margin: 0; color: var(--textFaint); font-size: 13.5px; }
.ed-list { list-style: none; padding: 0; margin: 0 0 24px; }
.ed-list li { padding: 8px 0; font-size: 14.5px; border-bottom: 1px solid var(--border); }
.ed-list li:last-child { border-bottom: none; }
.ed-list li.off { color: var(--faint, var(--textFaint)); opacity: .55; }
.ed-list b { color: var(--accentLight); }

/* ---------------- closing ---------------- */

.final { padding: 82px 26px; text-align: center; position: relative; z-index: 1; }
.final h2 { font-size: clamp(26px, 4vw, 36px); margin: 0 0 11px; font-weight: 800; }
.final p { color: var(--textFaint); margin: 0 0 28px; font-size: 16px; }

.lfoot {
    border-top: 1px solid var(--border); padding: 40px 26px;
    text-align: center; color: var(--textFaint); font-size: 13.5px;
    position: relative; z-index: 1;
}
.lfoot .brand { justify-content: center; margin-bottom: 13px; }
.lfoot p { margin: 5px 0; }

/* ---------------- reveal on scroll ---------------- */

.reveal { opacity: 0; transform: translateY(22px);
          transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 640px) {
    .hero { padding: 54px 18px 44px; }
    .sect { padding: 54px 18px; }
    .final { padding: 58px 18px; }
    .lhead-in { padding: 0 16px; min-height: 62px; }
    .lnav { width: 100%; padding-bottom: 10px; }
    .step { padding: 17px 16px; gap: 14px; }
    .ed { padding: 26px 20px; }
}

/* ---------------- the interface tour ----------------
   Added when the showcase stopped being a sales page and started being an
   explanation. Screenshots are the point of this section, so the frame around
   them stays quiet: a thin border, a soft shadow, no decoration competing with
   the picture. */

.sect-lead {
    text-align: center; color: var(--textFaint); font-size: 15px;
    margin: -32px 0 42px; line-height: 1.8;
}

.shots {
    max-width: 1180px; margin: 0 auto;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px;
}
.shot { margin: 0; display: flex; flex-direction: column; }
.shot-img {
    display: block; width: 100%; padding: 0; border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden; background: #0b0714;
    cursor: zoom-in; position: relative; line-height: 0;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.shot-img:hover { transform: translateY(-4px); border-color: var(--accent);
                  box-shadow: 0 14px 40px rgba(0,0,0,.5); }
.shot-img img { width: 100%; height: auto; display: block; }

.shot-zoom {
    position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
    width: 32px; height: 32px; border-radius: 9px;
    background: rgba(11,7,20,.72); backdrop-filter: blur(6px);
    color: var(--accentLight); font-size: 15px; line-height: 32px; text-align: center;
    opacity: 0; transition: opacity .2s ease;
}
.shot-img:hover .shot-zoom { opacity: 1; }

.shot figcaption { padding: 14px 4px 0; }
.shot figcaption h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; }
.shot figcaption p { margin: 0; color: var(--textFaint); font-size: 14px; line-height: 1.8; }
.shot kbd {
    background: var(--accentDim); border: 1px solid var(--border);
    color: var(--accentLight); border-radius: 6px; padding: 1px 7px;
    font-size: 12.5px; font-family: inherit; font-weight: 700;
}

/* ---------------- lightbox ---------------- */

.lb {
    position: fixed; inset: 0; z-index: 100; display: none;
    background: rgba(6,3,12,.93); backdrop-filter: blur(8px);
    place-items: center; padding: 40px 24px;
}
.lb.on { display: grid; }
.lb-in { margin: 0; max-width: min(1400px, 94vw); text-align: center; }
.lb-in img {
    max-width: 100%; max-height: 76vh; border-radius: 12px;
    border: 1px solid var(--border); display: block; margin: 0 auto;
}
.lb-in figcaption { margin-top: 16px; }
.lb-in h3 { margin: 0 0 5px; font-size: 19px; }
.lb-in p { margin: 0; color: var(--textFaint); font-size: 14.5px; }

.lb-x, .lb-nav {
    position: absolute; background: rgba(30,19,48,.85); color: var(--text);
    border: 1px solid var(--border); cursor: pointer;
    display: grid; place-items: center; transition: all .18s ease;
}
.lb-x { inset-block-start: 20px; inset-inline-end: 22px;
        width: 42px; height: 42px; border-radius: 11px; font-size: 17px; }
.lb-nav { inset-block-start: 50%; transform: translateY(-50%);
          width: 50px; height: 50px; border-radius: 50%; font-size: 26px; }
/* Logical properties so the arrows sit correctly on an RTL page. */
.lb-prev { inset-inline-end: 22px; }
.lb-next { inset-inline-start: 22px; }
.lb-x:hover, .lb-nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 640px) {
    .shots { grid-template-columns: 1fr; }
    .lb { padding: 20px 12px; }
    .lb-nav { width: 40px; height: 40px; font-size: 21px; }
    .sect-lead { margin: -24px 0 30px; }
}

/* ---------------- the live interface ----------------
   The frame is a browser chrome around a game overlay: a title bar so the
   visitor reads it as an application rather than as part of the page, and a
   16:9 stage because that is the shape the menu was designed inside. */

.live-wrap {
    max-width: 1180px; margin: 0 auto;
    border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
    background: #0b0714; box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
.live-wrap:fullscreen { border-radius: 0; max-width: none; }
.live-wrap:fullscreen .live-frame { padding-bottom: 0; height: calc(100vh - 48px); }

.live-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; background: rgba(30,19,48,.9);
    border-bottom: 1px solid var(--border);
}
.live-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: sdPulse 2.2s infinite;
}
@keyframes sdPulse {
    70%  { box-shadow: 0 0 0 9px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.live-label { color: var(--textFaint); font-size: 13.5px; margin-inline-end: auto; }
.live-btn {
    background: var(--accentDim); border: 1px solid var(--border);
    color: var(--accentLight); border-radius: 9px; padding: 6px 13px;
    font-size: 13px; font-family: inherit; cursor: pointer; transition: all .18s ease;
}
.live-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* THE STAGE IS A CROP OF A 1920x1080 SCREEN.
   The iframe keeps a real 1080p viewport - anything smaller makes the menu
   compute its own scale down to the 0.75 floor and render a cinema panel
   inside a postcard. The transform in live.js shrinks the PICTURE to fit,
   which the browser does at full sharpness, and the box shows only the
   right-hand 1320px where the panel is docked. 1080/1320 = 81.8%. */
.live-frame {
    position: relative; padding-bottom: 81.8%; height: 0; overflow: hidden;
    /* The box changes shape when a full-width panel opens; easing it stops
       the page below from jumping. */
    transition: padding-bottom .28s ease;
    background: radial-gradient(120% 120% at 80% 20%, #1a1030 0%, #0b0714 70%);
}
.live-frame iframe {
    /* PHYSICAL right, not inline-end. The showcase is an RTL document, where
       inset-inline-end resolves to the LEFT - which would pin the stage to
       the wrong side and crop away the very panel it exists to show. The
       game screen inside has its own direction and does not care about
       this page's. */
    position: absolute; top: 0; right: 0;
    width: 1920px; height: 1080px;
    transform-origin: top right;
    border: 0; display: block; background: transparent;
}

.live-note {
    max-width: 900px; margin: 20px auto 0; text-align: center;
    color: var(--textFaint); font-size: 13.5px; line-height: 1.9;
}
.live-note b { color: var(--text); }

@media (max-width: 640px) {
    .live-bar { padding: 9px 11px; gap: 7px; }
    .live-label { display: none; }
    .live-btn { font-size: 12px; padding: 5px 10px; }
}

/* ---------------- the explanation beside the demo ----------------
   Side by side rather than underneath: reading what a menu does WHILE looking
   at it is the whole point, and a visitor who has to scroll away to find the
   text stops reading it. The section is allowed to run wider than the rest of
   the page so that giving the words a column does not shrink the menu - the
   menu being too small was the complaint that started this. */

.live-split {
    max-width: 1420px; margin: 0 auto;
    display: grid; gap: 20px; align-items: start;
}
.live-split > .live-wrap { max-width: none; margin: 0; }

.live-help {
    background: linear-gradient(180deg, rgba(30, 19, 48, .72), rgba(22, 13, 36, .84));
    border: 1px solid var(--border); border-radius: 16px;
    padding: 24px 22px;
}
.live-help-in { transition: opacity .14s ease; }
.live-help h3 {
    margin: 0 0 10px; font-size: 19px; font-weight: 800;
    color: var(--accentLight);
}
.live-help .lead {
    margin: 0 0 16px; font-size: 14.5px; line-height: 1.9; color: var(--text);
    padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.live-help ul { list-style: none; padding: 0; margin: 0; }
.live-help li {
    position: relative; padding: 0 20px 14px 0;
    font-size: 13.8px; line-height: 1.95; color: var(--textFaint);
}
.live-help li:last-child { padding-bottom: 0; }
.live-help li::before {
    content: '◂'; position: absolute; inset-inline-start: 2px; top: 1px;
    color: var(--accent); font-size: 13px;
}
.live-help b { color: var(--text); }

/* A thin scrollbar so a long explanation does not put a fat grey bar next to
   the menu it is describing. */
.live-help::-webkit-scrollbar { width: 6px; }
.live-help::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 3px;
}

/* SIDE BY SIDE ONLY WHEN THERE IS ROOM TO SPARE.
   A 340px column costs the menu 340px, and on a normal laptop that took the
   panel from 456px back down to 329 - undoing the very fix that made it big
   enough to read. So the default is stacked, with the explanation underneath
   at full width and its points in columns so it stays short. Only a genuinely
   wide screen gets both at once, where the menu loses nothing it needs. */
.live-split { grid-template-columns: 1fr; }
.live-help { position: static; max-height: none; }
.live-help ul { columns: 2; column-gap: 28px; }
.live-help li { break-inside: avoid; }

@media (min-width: 1560px) {
    .live-split { grid-template-columns: minmax(0, 1fr) 340px; }
    .live-help {
        position: sticky; top: 88px;
        max-height: calc(100vh - 120px); overflow-y: auto;
    }
    .live-help ul { columns: 1; }
}

@media (max-width: 700px) {
    .live-help ul { columns: 1; }
}

/* ---------------- the clip in a help card ----------------
   Above the words, because a five-second clip explains a menu faster than a
   paragraph and the paragraph is what people skip. */

.clip {
    margin: 0 0 16px; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border); background: #0b0714; line-height: 0;
}
.clip video { width: 100%; height: auto; display: block; }

@media (min-width: 1560px) {
    /* Beside the menu the column is narrow; the clip keeps its place at the
       top of the card and simply gets narrower with it. */
    .clip { margin-bottom: 14px; }
}