/* =========================================================
   SERVOMIX — HOME
   File: css/home.css
   Needs: tokens.css, base.css, components.css, site.css,
   launcher.css. Layout only; every value is a token.
   The copy on the page is the original site's, unchanged.
========================================================= */

/* ---------------------------------------------------------
   SHARED SECTION PARTS
--------------------------------------------------------- */

/* 96 px between sections on phones, 128 px on desktop */
/* 48 + 48 = 96px between sections at every width */
.home-section{
    position:relative;
    padding-block:var(--s-7);
}

.home-anchor{
    position:absolute;
    top:calc(var(--nav-h) * -1);
}

.home-head{
    display:grid;
    gap:var(--s-3);
    margin-bottom:var(--s-6);
}

.home-head > p:not(.home-eyebrow){
    max-width:62ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.home-head__sub{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
    color:var(--ink);
}

.home-eyebrow{
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

@media (min-width:900px){

    .home-head--split{
        grid-template-columns:minmax(0, 1fr) auto;
        column-gap:var(--s-6);
    }

    .home-head--split > :not(.home-head__link){
        grid-column:1;
    }

    /* rows are implicit, so 1 / -1 would cover only the eyebrow:
       span the eyebrow and heading and sit level with the heading */
    .home-head__link{
        grid-column:2;
        grid-row:1 / span 2;
        align-self:end;
    }
}


/* ---------------------------------------------------------
   HERO
   One orchestrated load: copy first, then the Launcher.
--------------------------------------------------------- */

.home-hero{
    display:grid;
    grid-template-columns:minmax(0, 1fr);   /* an auto column grows to the Launcher's widest row */
    gap:clamp(20px, 3.5vw, var(--s-7));
    align-items:center;
    padding-block:clamp(16px, 3vh, var(--s-7));
}

@media (min-width:1024px){

    .home-hero{
        grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
        gap:clamp(24px, 3.5vw, var(--s-8));
        padding-block:clamp(16px, 2.8vh, var(--s-6)) clamp(20px, 3.2vh, var(--s-7));
    }
}

@media (max-height: 880px){
    .home-hero{
        padding-block:clamp(8px, 1.4vh, 18px) clamp(12px, 1.8vh, 22px) !important;
        gap:clamp(16px, 2.5vw, 32px);
    }
    .home-hero__copy{
        gap:clamp(8px, 1.4vh, 14px);
    }
}

@media (max-height: 768px){
    .home-hero{
        padding-block:6px 12px !important;
        gap:14px;
    }
    .home-hero__copy{
        gap:8px;
    }
}

.home-hero__copy{
    display:grid;
    gap:var(--s-4);
    justify-items:start;
    container-type:inline-size;   /* the headline sizes itself to this column */
}

.home-hero__badge{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:36px;
    padding:0 var(--s-4);
    border:1px solid var(--accent-tint);
    border-radius:var(--r-pill);
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:0.04em;
    text-transform:uppercase;
    box-shadow:0 0 16px var(--accent-soft);
}

.home-hero__badge-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 8px var(--accent-glow);
    animation:homeBadgePulse 2s ease-in-out infinite;
}

@keyframes homeBadgePulse{
    0%, 100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.25); opacity:0.75; }
}

.home-status{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.home-status__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
    box-shadow:0 0 0 4px var(--up-soft);
}

/* grid items default to min-width:auto; let them shrink on phones */
.home-hero > *,
.home-viewer > *,
.home-plans > *{
    min-width:0;
}

/* Always two lines. The longest rotating line, "WITHOUT BARRIERS",
   is 12.33em wide in this font, so 7.9% of the column keeps it on
   one line with a little room; the size stays the same for every
   word, so nothing jumps. The vw line is for browsers without
   container units. */
.home-hero__title{
    display:grid;
    font-size:min(var(--t-display), 9.4vw);
    font-size:min(var(--t-display), 7.9cqi);
    line-height:1;
}

.home-hero__line{
    display:block;
    white-space:nowrap;
}

.home-hero__word{
    display:inline-block;
    color:var(--accent);
    transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.home-hero__word.is-leaving{
    opacity:0;
    transform:translate3d(0, -.18em, 0);
}

.home-hero__word.is-entering{
    opacity:0;
    transform:translate3d(0, .18em, 0);
    transition:none;
}

.home-hero__lead{
    max-width:50ch;
}

.home-hero__launcher{
    width:100%;
    max-width:540px;
    justify-self:center;
}

@media (min-width:1024px){

    .home-hero__launcher{
        justify-self:end;
    }
}

/* Proportional smart scaling for laptop / short viewports */
@media (max-height: 840px) and (min-width: 900px){
    .home-hero__launcher{
        transform-origin: top right;
        transform: scale(0.92);
        margin-bottom: -36px;
    }
}

@media (max-height: 740px) and (min-width: 900px){
    .home-hero__launcher{
        transform-origin: top right;
        transform: scale(0.85);
        margin-bottom: -60px;
    }
}

.home-hero__copy > *,
.home-hero__launcher{
    animation:home-rise var(--dur-reveal) var(--ease) both;
}

.home-hero__copy > :nth-child(2){ animation-delay:60ms; }
.home-hero__copy > :nth-child(3){ animation-delay:120ms; }
.home-hero__copy > :nth-child(4){ animation-delay:180ms; }
.home-hero__copy > :nth-child(5){ animation-delay:240ms; }
.home-hero__launcher{ animation-delay:300ms; }

@keyframes home-rise{
    from{ opacity:0; transform:translate3d(0, 12px, 0); }
    to{ opacity:1; transform:none; }
}


/* ---------------------------------------------------------
   HERO HIGHLIGHTS STRIP
--------------------------------------------------------- */

.home-proof{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-4) var(--s-6);
    padding:var(--s-4) 0;
    border-block:1px solid var(--line);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-proof__item{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.home-proof__item .icon{
    color:var(--accent);
}

.home-proof__item strong{
    color:var(--ink);
}

.home-trust{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-2) var(--s-3);
    margin-left:auto;
    min-height:44px;
    padding:var(--s-1) var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink-2);
    text-decoration:none;
}

.home-trust:hover{
    border-color:var(--accent);
    color:var(--ink-2);
}

.home-trust__faces{
    display:flex;
}

.home-trust__faces img{
    width:28px;
    height:28px;
    border:2px solid var(--surface);
    border-radius:50%;
}

.home-trust__faces img + img{
    margin-left:-8px;
}

.home-trust__brand{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.home-trust__star,
.home-trust__stars{
    color:var(--up);
}

.home-trust__copy strong{
    color:var(--ink);
}

@media (max-width:899px){

    .home-trust{
        margin-left:0;
        border-radius:var(--r-card);
    }
}


/* ---------------------------------------------------------
   GAMES
--------------------------------------------------------- */

.home-games{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-4);
}

@media (min-width:900px){

    .home-games{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

@media (max-width:479px){

    .home-games{
        grid-template-columns:minmax(0, 1fr);
    }
}

.home-game{
    text-decoration:none;
}

.home-game__body{
    position:relative;
    display:grid;
    gap:var(--s-2);
    padding:var(--s-6) var(--s-4) var(--s-4);
}

.home-game__logo{
    position:absolute;
    top:-24px;
    left:var(--s-4);
    width:44px;
    height:44px;
    padding:4px;
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    object-fit:contain;
}

.home-game__name{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
    line-height:1.3;
}

.home-game__desc{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-game__tag{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    margin-top:var(--s-1);
    color:var(--up);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.home-game__dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--up-fill);
}


/* ---------------------------------------------------------
   ECOSYSTEM (a list, not a card grid)
--------------------------------------------------------- */

.home-eco{
    display:grid;
    gap:var(--s-6);
}

@media (min-width:1024px){

    .home-eco{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:var(--s-7);
    }
}

.home-eco__group{
    margin-bottom:var(--s-3);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.home-cloud{
    margin:0;
    border-top:1px solid var(--line);
}

.home-cloud li{
    border-bottom:1px solid var(--line);
}

.home-cloud__row{
    display:grid;
    grid-template-columns:48px minmax(0, 1fr) auto;
    align-items:center;
    gap:var(--s-2) var(--s-4);
    padding:var(--s-4) var(--s-3);
    color:var(--ink);
    text-decoration:none;
    border-radius:var(--r-control);
    transition:background-color var(--dur-fast) var(--ease);
}

.home-cloud__row:hover{
    background:var(--surface);
    color:var(--ink);
}

.home-cloud__row:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:-2px;
}

.home-cloud__icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}

.home-cloud__icon--logo{
    border:1px solid var(--line);
    background:var(--surface);
}

.home-cloud__icon img{
    width:26px;
    height:26px;
    object-fit:contain;
}

/* Plesk's wordmark is white, so its tile is dark */
.home-cloud__icon--dark{
    background:var(--console);
}

.home-cloud__icon--dark img{
    width:34px;
}

.home-cloud__text{
    display:grid;
    gap:2px;
    min-width:0;
}

.home-cloud__name{
    font-weight:var(--w-strong);
}

.home-cloud__desc{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-cloud__meta{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    white-space:nowrap;
}

@media (max-width:719px){

    .home-cloud__row{
        grid-template-columns:48px minmax(0, 1fr);
    }

    .home-cloud__meta{
        grid-column:2;
    }
}


/* ---------------------------------------------------------
   BENTO (what every server includes)
--------------------------------------------------------- */

.home-bento .bento__tile h3{
    font-size:var(--t-body);
    font-weight:var(--w-strong);
    line-height:1.3;
}

.home-bento .bento__tile p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-bento .bento__tile--media{
    min-height:220px;
}

.home-bento figure{
    margin:0;
}


/* ---------------------------------------------------------
   WHY SERVOMIX: deployment demo + you control / we handle
--------------------------------------------------------- */

/* demo box on top at full width, the two lists side by side under it */
.home-why{
    display:grid;
    gap:var(--s-7);
}

.home-deploy{
    display:grid;
    gap:var(--s-4);
    padding:var(--s-5);
    border-radius:var(--r-panel);
}

.home-deploy__head,
.home-deploy__foot{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2) var(--s-4);
}

.home-deploy__label{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.home-deploy__id,
.home-deploy__time{
    color:var(--ink-2);
    font-family:ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size:var(--t-micro);
}

.home-deploy__track{
    height:4px;
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    overflow:hidden;
}

.home-deploy__bar{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    transition:width 700ms var(--ease);
}

.home-deploy__steps{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2);
    margin:0;
}

@media (min-width:600px){

    .home-deploy__steps{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

.home-deploy__step{
    display:grid;
    align-content:start;
    gap:2px;
    width:100%;
    min-height:100%;
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink-2);
    font-size:var(--t-small);
    text-align:left;
    cursor:default;
    transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.home-deploy__step strong{
    color:var(--ink);
}

.home-deploy__step.is-active{
    border-color:var(--accent);
    cursor:pointer;
}

.home-deploy__step.is-active:hover{
    background:var(--accent-soft);
}

.home-deploy__step.is-processing{
    border-style:dashed;
    border-color:var(--accent);
}

.home-deploy__step.is-done{
    border-color:var(--up-fill);
    background:var(--up-soft);
}

.home-deploy__step:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.home-deploy__status{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.home-split{
    display:grid;
    gap:var(--s-5);
}

@media (min-width:600px){

    .home-split{
        /* The grid shrinks to its content and both 1fr columns take the
           wider list's width, so the VS is on the page's centre line and
           the same distance from both lists' text. */
        grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
        width:fit-content;
        max-width:100%;
        margin-inline:auto;
        align-items:start;
        gap:var(--s-7);
    }

    .home-split__vs{
        align-self:center;
    }
}

.home-split h3{
    margin-bottom:var(--s-3);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.home-split ul{
    display:grid;
    gap:var(--s-3);
    margin:0;
}

.home-split li{
    display:grid;
    grid-template-columns:24px minmax(0, 1fr);
    gap:var(--s-3);
    align-items:start;
}

.home-split li .icon{
    margin-top:2px;
    color:var(--accent);
}

.home-split strong{
    display:block;
    color:var(--ink);
}

.home-split span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-split__vs{
    display:grid;
    place-items:center;
    justify-self:center;
    width:48px;
    height:48px;
    border:1px solid var(--line-strong);
    border-radius:50%;
    background:var(--surface);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}


/* ---------------------------------------------------------
   CONTROL PANEL VIEWER
--------------------------------------------------------- */

.home-viewer{
    display:grid;
    gap:var(--s-4);
    padding:var(--s-4);
    border-radius:var(--r-panel);
}

.home-viewer__head{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-2);
    padding:0 var(--s-2);
}

.home-viewer__title{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.home-viewer__body{
    display:grid;
    gap:var(--s-4);
}

@media (min-width:1024px){

    .home-viewer__body{
        grid-template-columns:220px minmax(0, 1fr);
        align-items:start;
    }
}

.home-viewer__body > *{
    min-width:0;
}

.home-viewer__tabs{
    display:flex;
    gap:var(--s-2);
    overflow-x:auto;
    scrollbar-width:none;
}

@media (min-width:1024px){

    .home-viewer__tabs{
        flex-direction:column;
        overflow:visible;
    }
}

.home-viewer__tab{
    display:grid;
    flex:0 0 auto;
    gap:2px;
    min-height:44px;
    padding:var(--s-2) var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font-size:var(--t-small);
    text-align:left;
}

.home-viewer__tab span{
    color:var(--ink-2);
}

.home-viewer__tab:hover{
    border-color:var(--accent);
}

.home-viewer__tab[aria-selected="true"]{
    border-color:var(--accent);
    background:var(--accent-soft);
}

.home-viewer__tab[aria-selected="true"] strong{
    color:var(--accent-strong);
}

.home-viewer__tab:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.home-panel__shot{
    width:100%;
    height:auto;
    border:1px solid var(--line);
    border-radius:var(--r-card);
}


/* ---------------------------------------------------------
   GLOBAL NETWORK
--------------------------------------------------------- */

.home-locations{
    display:grid;
    gap:var(--s-6);
    align-items:center;
}

@media (min-width:900px){

    .home-locations{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    }
}

.home-locations__list{
    display:grid;
    gap:var(--s-2);
    margin:0;
}

.home-location{
    display:grid;
    grid-template-columns:28px minmax(0, 1fr) auto;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
}

.home-location img{
    width:28px;
    height:21px;
    border-radius:3px;
    object-fit:cover;
}

.home-location__place,
.home-location__ping{
    display:grid;
    line-height:1.3;
}

.home-location__place span,
.home-location__ping span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-location__ping{
    text-align:right;
}

.home-location__ping strong{
    color:var(--up);
    font-variant-numeric:tabular-nums;
}

.home-stats{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-4) var(--s-7);
    margin-top:var(--s-5);
}

.home-stats p{
    display:grid;
}

.home-stats strong{
    color:var(--ink);
    font-size:var(--t-h2);
    font-weight:var(--w-h2);
    font-stretch:var(--wd-h2);
    line-height:1.1;
    font-variant-numeric:tabular-nums;
}

.home-stats span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-globe{
    position:relative;
    width:100%;
    max-width:520px;
    aspect-ratio:1 / 1;
    overflow:hidden;      /* without it the canvas can stretch the box past square */
    justify-self:center;
    border-radius:50%;
    background:radial-gradient(circle at 50% 45%, var(--accent-soft) 0%, transparent 70%);
}

.home-globe canvas{
    display:block;
    border-radius:50%;
}

@media (max-width:899px){

    .home-globe{
        max-width:340px;
    }
}


/* ---------------------------------------------------------
   PLANS
--------------------------------------------------------- */

.home-plans__tabs{
    margin-bottom:var(--s-5);
    overflow-x:auto;
    scrollbar-width:none;
}

.home-plans__bar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-3);
    margin-bottom:var(--s-4);
}

.home-plans__bar h3{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}

.home-plans__langs{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
}

.home-plans__grid{
    display:grid;
    gap:var(--s-4);
}

@media (min-width:900px){

    .home-plans__grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .home-plans__grid--4{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

@media (min-width:600px) and (max-width:899px){

    .home-plans__grid--4{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

.home-series{
    position:relative;
    color:var(--ink);
    text-decoration:none;
    transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.home-series:hover{
    border-color:var(--accent);
    color:var(--ink);
    box-shadow:var(--shadow-card);
}

.home-series__art{
    width:72px;
    height:72px;
    object-fit:contain;
}

.home-series__icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}

.home-series__kicker{
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
    text-transform:uppercase;
}

.home-series__desc{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-series__price{
    margin-top:auto;
    color:var(--ink-2);
    font-variant-numeric:tabular-nums;
}

.home-series__price strong{
    color:var(--ink);
    font-size:var(--t-h2);
    font-weight:var(--w-h2);
    line-height:1;
}

.home-series__price small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.home-series__badge{
    position:absolute;
    top:var(--s-4);
    right:var(--s-4);
}

.home-bot__specs{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-2);
    margin:0;
}

.home-bot__specs li{
    padding:2px var(--s-2);
    border-radius:var(--r-pill);
    background:var(--surface-sunken);
    color:var(--ink);
    font-size:var(--t-small);
}

.home-plans__perks{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3) var(--s-5);
    margin:var(--s-5) 0 0;
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-plans__perks li{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.home-plans__perks .icon{
    color:var(--up);
}

.home-plans__tagline{
    margin-top:var(--s-6);
    color:var(--ink-2);
    font-weight:var(--w-strong);
    text-align:center;
    max-width:none;
}


/* ---------- CPR web hosting ---------- */

.home-cpr{
    display:grid;
    gap:var(--s-5);
    padding:var(--s-5);
    border-radius:var(--r-panel);
}

@media (min-width:900px){

    .home-cpr{
        grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
        align-items:start;
    }
}

.home-cpr__sizes{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(76px, 1fr));
    gap:var(--s-2);
    margin:0;
    padding:0;
    border:0;
}

.home-cpr__sizes legend{
    grid-column:1 / -1;
    margin-bottom:var(--s-3);
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.06em;
}

.home-cpr__sizes label{
    position:relative;
}

.home-cpr__sizes input{
    position:absolute;
    opacity:0;
}

.home-cpr__sizes label span{
    display:grid;
    place-items:center;
    min-height:52px;
    border:1px solid var(--line-strong);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font-weight:var(--w-strong);
    cursor:pointer;
}

.home-cpr__sizes small{
    color:var(--ink-2);
    font-size:var(--t-micro);
}

.home-cpr__sizes input:checked + span{
    border:2px solid var(--accent);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.home-cpr__sizes input:focus-visible + span{
    box-shadow:var(--focus-ring);
}

.home-cpr__plan{
    display:grid;
    gap:var(--s-3);
    padding:var(--s-5);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.home-cpr__specs{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--s-2);
    margin:0;
}

.home-cpr__specs li{
    display:grid;
    padding:var(--s-2);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
    text-align:center;
}

.home-cpr__specs span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-cpr__extras{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-1) var(--s-3);
    margin:0;
    color:var(--ink-2);
    font-size:var(--t-small);
}


/* ---------------------------------------------------------
   COMPARISON
--------------------------------------------------------- */

.home-compare{
    display:grid;
    gap:var(--s-6);
}

.home-compare__table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    font-size:var(--t-small);
}

.home-compare__table th,
.home-compare__table td{
    padding:var(--s-3) var(--s-4);
    border-bottom:1px solid var(--line);
    text-align:left;
    vertical-align:middle;
}

.home-compare__table tbody tr:last-child > *{
    border-bottom:0;
}

.home-compare__table thead th{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.home-compare__table tbody th{
    color:var(--ink);
    font-weight:var(--w-strong);
}

.home-compare__table td{
    color:var(--ink-2);
}

.home-compare__table .home-compare__us{
    background:var(--accent-soft);
    color:var(--ink);
    font-weight:var(--w-strong);
}

.home-compare__table thead .home-compare__us img{
    width:120px;
    height:auto;
}

@media (max-width:599px){

    .home-compare__table th,
    .home-compare__table td{
        padding:var(--s-2) var(--s-3);
    }

    .home-compare__table thead .home-compare__us img{
        width:84px;
    }
}

.home-stats--four{
    justify-content:space-between;
    margin-top:0;
}


/* ---------------------------------------------------------
   FAQ: question list + answer viewer
--------------------------------------------------------- */

.home-faq{
    display:grid;
    gap:var(--s-5);
}

@media (min-width:1024px){

    .home-faq{
        grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
        align-items:start;
    }
}

.home-faq__list{
    display:grid;
    gap:var(--s-2);
    margin:0;
}

.home-faq__q{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
    width:100%;
    min-height:52px;
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font-weight:var(--w-strong);
    text-align:left;
}

.home-faq__q:hover{
    border-color:var(--accent);
}

.home-faq__q[aria-expanded="true"]{
    border-color:var(--accent);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.home-faq__q:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}

.home-faq__viewer{
    padding:var(--s-6);
    border-radius:var(--r-panel);
    scroll-margin-top:calc(var(--nav-h) + var(--s-5));
}

.home-faq__welcome,
.home-faq__answer{
    display:grid;
    gap:var(--s-4);
}

.home-faq__answer[hidden],
.home-faq__welcome[hidden]{
    display:none;
}

.home-faq__brand{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-3);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.home-faq__brand img{
    height:22px;
    width:auto;
}

.home-faq__viewer h3{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
}

.home-faq__viewer p{
    color:var(--ink-2);
}

.home-faq__features{
    display:grid;
    gap:var(--s-3);
    margin:0;
}

.home-faq__features--grid{
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
}

.home-faq__features li{
    display:grid;
    grid-template-columns:40px minmax(0, 1fr);
    gap:var(--s-3);
    align-items:start;
    padding:var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
}

.home-faq__features .icon{
    width:40px;
    height:40px;
    padding:10px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent);
}

.home-faq__features strong{
    display:block;
    color:var(--ink);
}

.home-faq__features span,
.home-faq__features p{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-viewer p.home-faq__hint,
.home-faq__hint,
.home-faq__note{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.home-faq__note{
    padding-top:var(--s-3);
    border-top:1px solid var(--line);
}


/* ---------------------------------------------------------
   NEED HELP
--------------------------------------------------------- */

.home-contact{
    display:grid;
    gap:var(--s-6);
    padding:var(--s-7) var(--s-6);
    border-radius:var(--r-panel);
}

@media (min-width:1024px){

    .home-contact{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        align-items:center;
        padding:var(--s-8);
    }
}

.home-contact p:not(.home-eyebrow){
    color:var(--ink-2);
}

.home-contact__channels{
    display:grid;
    gap:var(--s-3);
    margin:0;
}

.home-contact__channel{
    display:grid;
    grid-template-columns:48px minmax(0, 1fr);
    align-items:center;
    gap:var(--s-4);
    min-height:72px;
    padding:var(--s-3) var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
    color:var(--ink);
    text-decoration:none;
}

.home-contact__channel > span:last-child{
    display:grid;
}

.home-contact__channel > span:last-child span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

a.home-contact__channel[href]:hover{
    border-color:var(--accent);
    color:var(--ink);
}

a.home-contact__channel[href]:focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


/* =========================================================
   GLASS THEME ENHANCEMENTS (FROSTED GLASS EFFECT)
========================================================= */

/* Hero luminous ambient light */
.home-hero{
    position:relative;
}

.home-hero::before{
    display:none !important;
}

/* Glass Panels and Containers */
.glass{
    background:var(--glass) !important;
    -webkit-backdrop-filter:var(--glass-blur) !important;
    backdrop-filter:var(--glass-blur) !important;
    border:1px solid var(--glass-edge) !important;
    box-shadow:var(--glass-highlight), 0 20px 50px -16px rgba(0, 0, 0, 0.55) !important;
}

/* Servomix Launcher — Frosted Glass Centerpiece */
.launcher{
    background:var(--glass) !important;
    -webkit-backdrop-filter:var(--glass-blur) !important;
    backdrop-filter:var(--glass-blur) !important;
    border:1px solid var(--glass-edge) !important;
    border-radius:var(--r-panel) !important;
    box-shadow:var(--glass-highlight), 0 24px 64px -16px rgba(0, 0, 0, 0.7), 0 0 40px -10px rgba(59, 130, 246, 0.18) !important;
}

.launcher__step{
    background:rgba(255, 255, 255, 0.04) !important;
    border:1px solid var(--line) !important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}

.launcher__step.is-done{
    background:rgba(43, 196, 111, 0.10) !important;
    border-color:rgba(43, 196, 111, 0.3) !important;
}

.launcher__step:hover{
    border-color:var(--accent) !important;
    background:rgba(59, 130, 246, 0.12) !important;
}

.launcher__panel{
    background:transparent !important;
    border:none !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    padding:0 !important;
}

.launcher__card{
    background:rgba(10, 16, 30, 0.60) !important;
    border:1px solid var(--line) !important;
    border-radius:12px !important;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
}

/* Cards across the homepage */
.card,
.home-game,
.home-review,
.home-faq__item,
.home-contact__channel,
.home-cpr__plan{
    background:var(--glass) !important;
    -webkit-backdrop-filter:var(--glass-blur) !important;
    backdrop-filter:var(--glass-blur) !important;
    border:1px solid var(--glass-edge) !important;
    box-shadow:var(--glass-highlight), 0 10px 30px -10px rgba(0, 0, 0, 0.4) !important;
    transition:transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

.card:hover,
.home-game:hover,
.home-contact__channel:hover,
.home-cpr__plan:hover{
    transform:translateY(-3px);
    border-color:rgba(96, 165, 250, 0.45) !important;
    box-shadow:var(--glass-highlight), 0 20px 45px -12px rgba(0, 0, 0, 0.6), 0 0 24px -4px rgba(59, 130, 246, 0.25) !important;
    background:var(--glass-strong) !important;
}

/* Game Cards */
.home-game__logo{
    background:var(--glass) !important;
    border:1px solid var(--glass-edge) !important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

/* Badges & Trust bar */
.home-trust,
.home-status{
    background:var(--glass) !important;
    -webkit-backdrop-filter:var(--glass-blur) !important;
    backdrop-filter:var(--glass-blur) !important;
    border:1px solid var(--glass-edge) !important;
    box-shadow:var(--glass-highlight), 0 4px 16px -4px rgba(0, 0, 0, 0.3) !important;
}

.home-trust:hover{
    border-color:var(--accent) !important;
    box-shadow:var(--glass-highlight), 0 8px 24px -6px rgba(59, 130, 246, 0.25) !important;
}

/* Deploy and Viewer sub-elements */
.home-deploy__step,
.home-viewer__tab{
    background:rgba(255, 255, 255, 0.035) !important;
    border:1px solid var(--line) !important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

.home-deploy__step.is-active,
.home-viewer__tab[aria-selected="true"]{
    background:rgba(59, 130, 246, 0.16) !important;
    border-color:var(--accent) !important;
    box-shadow:0 0 16px -2px rgba(59, 130, 246, 0.3) !important;
}

.home-cpr__sizes label span{
    background:rgba(255, 255, 255, 0.04) !important;
    border:1px solid var(--line) !important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

.home-cpr__sizes input:checked + span{
    background:rgba(59, 130, 246, 0.20) !important;
    border-color:var(--accent) !important;
    box-shadow:0 0 16px -2px rgba(59, 130, 246, 0.35) !important;
}

/* Plans on homepage */
.plan.glass{
    background:var(--glass) !important;
    -webkit-backdrop-filter:var(--glass-blur) !important;
    backdrop-filter:var(--glass-blur) !important;
    border:1px solid var(--glass-edge) !important;
    box-shadow:var(--glass-highlight), 0 12px 36px -12px rgba(0, 0, 0, 0.45) !important;
}

.plan.glass:hover{
    border-color:rgba(96, 165, 250, 0.45) !important;
    box-shadow:var(--glass-highlight), 0 20px 48px -12px rgba(0, 0, 0, 0.6), 0 0 24px -4px rgba(59, 130, 246, 0.25) !important;
}

/* Light Theme overrides for glass */
html[data-theme="light"] .glass,
html[data-theme="light"] .launcher,
html[data-theme="light"] .card,
html[data-theme="light"] .home-game,
html[data-theme="light"] .home-review,
html[data-theme="light"] .home-contact__channel,
html[data-theme="light"] .home-cpr__plan,
html[data-theme="light"] .home-trust,
html[data-theme="light"] .home-status,
html[data-theme="light"] .plan.glass{
    background:rgba(255, 255, 255, 0.76) !important;
    backdrop-filter:blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter:blur(20px) saturate(180%) !important;
    border-color:rgba(15, 23, 42, 0.08) !important;
    box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 8px 28px -6px rgba(15, 23, 42, 0.05) !important;
}

html[data-theme="light"] .launcher__step,
html[data-theme="light"] .home-deploy__step,
html[data-theme="light"] .home-viewer__tab,
html[data-theme="light"] .home-cpr__sizes label span{
    background:rgba(241, 245, 249, 0.70) !important;
    border-color:rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .launcher__tile,
html[data-theme="light"] .launcher__location{
    background:rgba(255, 255, 255, 0.72) !important;
    border-color:rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"] .launcher__tile:has(input:checked),
html[data-theme="light"] .launcher__location:has(input:checked){
    background:rgba(37, 99, 235, 0.08) !important;
    border-color:var(--accent) !important;
}

html[data-theme="light"] .launcher__readout{
    background:rgba(255, 255, 255, 0.75) !important;
    border-color:rgba(15, 23, 42, 0.08) !important;
}

/* Light mode Launcher panel: borderless, transparent, seamless */
html[data-theme="light"] .launcher__panel{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

/* Light mode active launcher step: vibrant blue background & crisp text */
html[data-theme="light"] .launcher__step[aria-current="step"]{
    background:var(--accent) !important;
    border-color:var(--accent) !important;
    color:#ffffff !important;
}

html[data-theme="light"] .launcher__step[aria-current="step"] .launcher__num{
    background:#ffffff !important;
    color:var(--accent) !important;
}

html[data-theme="light"] .launcher__step{
    color:var(--ink) !important;
}