/* =========================================================
   SERVOMIX — WEB HOSTING
   File: css/pages/web-hosting.css
   Used by: web-hosting/. Markup and copy are the originals;
   this file only lays them out. Every value is a token.
========================================================= */

/* ---------------------------------------------------------
   SHARED
--------------------------------------------------------- */

.web-hero-container,
.cpr-container,
.cpr-included-container,
.web-final-container{
    width:min(var(--container), 100% - var(--gutter) * 2);
    margin-inline:auto;
}

.web-hero,
.cpr-configurator,
.cpr-included,
.web-final-cta{
    position:relative;
    padding-block:var(--s-7);
    scroll-margin-top:var(--nav-h);
}

@media (min-width:1024px){

    .web-hero,
    .cpr-configurator,
    .cpr-included,
    .web-final-cta{
        padding-block:var(--s-8);
    }
}

/* decorative layers from the old design are not used */
.web-hero-grid,
.web-glow,
.web-orbit,
.web-server-glow,
.cpr-plan-glow,
.web-final-glow{
    display:none;
}

.web-hero-badge,
.cpr-step-badge,
.cpr-included-header > span,
.web-final-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
    width:max-content;
    max-width:100%;
    min-height:32px;
    padding:0 var(--s-3);
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--accent-strong);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    letter-spacing:.04em;
}

.web-hero-badge > span{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--up-fill);
}

.cpr-step-badge span{
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent);
    color:var(--ink-on-accent);
    font-size:var(--t-micro);
}

:where(main[class*="page-"]) small{
    font-size:var(--t-small);
}

.web-primary-btn,
.web-secondary-btn,
.cpr-deploy-btn,
.web-final-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-height:var(--btn-h);
    padding:0 var(--btn-pad-x);
    border:1px solid var(--line-strong);
    border-radius:var(--r-pill);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    font-weight:var(--w-strong);
    text-decoration:none;
    cursor:pointer;
    transition:background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.web-primary-btn,
.cpr-deploy-btn,
.web-final-btn{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.web-primary-btn:hover,
.cpr-deploy-btn:hover,
.web-final-btn:hover{
    background:var(--accent-strong);
    color:var(--ink-on-accent);
}

.web-secondary-btn:hover{
    border-color:var(--accent);
    color:var(--accent-strong);
}

:where(.web-primary-btn, .web-secondary-btn, .cpr-deploy-btn, .web-final-btn, .cpr-storage-btn):focus-visible{
    outline:none;
    box-shadow:var(--focus-ring);
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.web-hero-container{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-7);
    align-items:center;
}

@media (min-width:1024px){

    .web-hero-container{
        grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
        gap:var(--s-8);
    }
}

.web-hero-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
    min-width:0;
}

.web-hero h1{
    font-size:min(var(--t-display), 11vw);
    line-height:1;
    font-weight:var(--w-display);
    font-stretch:var(--wd-display);
}

.web-hero h1 span{
    display:block;
    color:var(--accent);
}

.web-hero h2{
    font-size:var(--t-h3);
    line-height:var(--lh-h3);
    font-weight:var(--w-h3);
}

.web-hero-description{
    max-width:54ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
    line-height:1.55;
}

.web-hero-features{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-3) var(--s-5);
    width:100%;
    max-width:560px;
}

.web-hero-feature{
    display:flex;
    align-items:center;
    gap:var(--s-3);
}

.web-hero-feature > span{
    display:grid;
    place-items:center;
    flex:none;
    width:40px;
    height:40px;
    border-radius:var(--r-control);
    background:var(--accent-soft);
    color:var(--accent-strong);
}

.web-hero-feature strong,
.web-hero-feature small{
    display:block;
}

.web-hero-feature small{
    color:var(--ink-2);
}

.web-hero-price-box{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-4) var(--s-6);
    width:100%;
    max-width:620px;
    padding:var(--s-4) var(--s-5);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-card);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:var(--shadow-card);
}

.web-price-main small{
    display:block;
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.web-price-main strong{
    font-size:var(--t-h1);
    line-height:1;
    font-weight:var(--w-h1);
}

.web-price-main span{
    color:var(--ink-2);
}

.web-price-benefits{
    display:grid;
    gap:var(--s-1);
    font-size:var(--t-small);
}

.web-price-benefits span{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.web-price-benefits .icon{
    color:var(--up);
}

.web-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:var(--s-3);
}

.web-hero-visual{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--s-4);
    min-width:0;
    width:100%;
}

.web-cpanel-server{
    width:100%;
    max-width:540px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45));
    transition:transform var(--dur-base) var(--ease);
}

.web-cpanel-server:hover{
    transform:scale(1.02);
}

.web-visual-cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:var(--s-3);
    width:100%;
    max-width:540px;
}

.web-floating-card,
.web-floating-security{
    position:relative;
    border:1px solid var(--line-strong);
    border-radius:var(--r-card);
    background:var(--surface);
    box-shadow:var(--shadow-card);
    transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.web-floating-card:hover,
.web-floating-security:hover{
    transform:translateY(-2px);
    border-color:var(--accent);
    box-shadow:var(--shadow-float), 0 0 20px rgba(0, 212, 255, 0.08);
}

.unlimited-card{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--s-2) var(--s-3);
    padding:var(--s-3) var(--s-4);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.unlimited-card > div{
    display:flex;
    align-items:center;
    gap:var(--s-2);
}

.unlimited-card .icon{
    color:var(--accent);
    flex-shrink:0;
}

.web-floating-security{
    display:flex;
    align-items:center;
    gap:var(--s-3);
    padding:var(--s-3) var(--s-4);
}

.web-security-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:var(--r-control);
    background:var(--up-soft);
    color:var(--up);
    flex-shrink:0;
}

.web-security-body{
    display:grid;
    gap:2px;
}

.web-security-body strong{
    font-size:var(--t-small);
    font-weight:var(--w-strong);
    color:var(--ink);
    line-height:1.2;
}

.web-security-body small{
    color:var(--ink-2);
    font-size:var(--t-micro);
    line-height:1.3;
}


/* ---------------------------------------------------------
   CONFIGURATOR
--------------------------------------------------------- */

.cpr-config-header,
.cpr-included-header{
    display:grid;
    justify-items:start;
    gap:var(--s-3);
    max-width:760px;
    margin-bottom:var(--s-6);
}

.cpr-config-header h2,
.cpr-included-header h2,
.web-final-content h2{
    font-size:var(--t-h1);
    line-height:var(--lh-heading);
    font-weight:var(--w-h1);
}

.cpr-config-header h2 span{
    color:var(--accent);
}

.cpr-included-header h2 strong{
    display:block;
    color:var(--accent);
    font-weight:inherit;
}

.cpr-config-header p{
    max-width:60ch;
    color:var(--ink-2);
    font-size:var(--t-lead);
}

.cpr-config-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-5);
    align-items:start;
}

@media (min-width:1024px){

    .cpr-config-layout{
        grid-template-columns:minmax(0, 1fr) 380px;
    }

    .cpr-order-summary{
        position:sticky;
        top:calc(var(--nav-h) + var(--s-5));
    }
}

.cpr-config-left{
    display:grid;
    gap:var(--s-4);
    min-width:0;
}

.cpr-storage-title{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.cpr-storage-title .icon{
    color:var(--accent);
}

.cpr-storage-selector{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
    gap:var(--s-2);
}

@media (min-width:1024px){

    .cpr-storage-selector{
        grid-template-columns:repeat(11, minmax(0, 1fr));
    }
}

.cpr-storage-btn{
    display:grid;
    justify-items:center;
    gap:2px;
    min-height:64px;
    padding:var(--s-2);
    border:1px solid var(--line);
    border-radius:var(--r-control);
    background:var(--surface);
    color:var(--ink);
    font:inherit;
    cursor:pointer;
    transition:border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.cpr-storage-btn strong{
    font-size:var(--t-h3);
    line-height:1.1;
    font-variant-numeric:tabular-nums;
}

.cpr-storage-btn span{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
}

.cpr-storage-btn:hover{
    border-color:var(--accent);
}

.cpr-storage-btn.active{
    border-color:transparent;
    background:var(--accent);
    color:var(--ink-on-accent);
}

.cpr-storage-btn.active span{
    color:var(--ink-on-accent);
}

.cpr-plan-preview{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-5);
    align-items:center;
    padding:var(--card-pad-lg);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

@media (min-width:768px){

    .cpr-plan-preview{
        grid-template-columns:200px minmax(0, 1fr);
    }
}

.cpr-plan-visual img{
    width:100%;
    height:auto;
}

.cpr-plan-details{
    display:grid;
    gap:var(--s-3);
}

.cpr-plan-label{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.cpr-plan-details h3{
    font-size:var(--t-h2);
    line-height:1.1;
    font-weight:var(--w-h2);
}

.cpr-plan-details h3 span{
    color:var(--accent);
}

.cpr-main-storage{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    color:var(--accent-strong);
}

.cpr-plan-feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
    gap:var(--s-2);
}

.cpr-plan-feature{
    display:flex;
    align-items:center;
    gap:var(--s-2);
    padding:var(--s-3);
    border-radius:var(--r-control);
    background:var(--surface-sunken);
}

.cpr-plan-feature > .icon{
    flex:none;
    color:var(--accent);
}

.cpr-plan-feature strong,
.cpr-plan-feature span{
    display:block;
    line-height:1.3;
}

.cpr-plan-feature span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.infinite-feature{
    gap:var(--s-3);
}

.infinite-feature strong{
    color:var(--accent);
    font-size:var(--t-h3);
}

.cpr-order-summary{
    display:grid;
    gap:var(--s-3);
    padding:var(--card-pad-lg);
    border:1px solid var(--glass-edge);
    border-radius:var(--r-panel);
    background:var(--glass);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    backdrop-filter:blur(var(--glass-blur)) saturate(160%);
    box-shadow:var(--shadow-float);
}

.cpr-summary-eyebrow{
    color:var(--ink-2);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    letter-spacing:.08em;
}

.cpr-summary-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--s-3);
}

.cpr-summary-heading h3{
    font-size:var(--t-h2);
    font-weight:var(--w-h2);
}

.cpr-summary-badge{
    min-height:24px;
    padding:0 var(--s-2);
    border-radius:var(--r-pill);
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-size:var(--t-micro);
    font-weight:var(--w-strong);
    line-height:24px;
}

.cpr-summary-divider{
    height:1px;
    background:var(--line);
}

.cpr-summary-line{
    display:flex;
    justify-content:space-between;
    gap:var(--s-3);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.cpr-summary-line strong{
    color:var(--ink);
}

.cpr-summary-line .unlimited{
    color:var(--up);
}

.cpr-summary-price{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--s-3);
}

.cpr-summary-price > span{
    color:var(--ink-2);
}

.cpr-summary-price strong{
    font-size:var(--t-h1);
    line-height:1;
    font-weight:var(--w-h1);
    font-variant-numeric:tabular-nums;
}

.cpr-summary-price small{
    color:var(--ink-2);
}

.cpr-deploy-btn{
    width:100%;
}

.cpr-summary-guarantee{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    color:var(--ink-2);
    font-size:var(--t-small);
}

.cpr-summary-guarantee .icon{
    color:var(--up);
}


/* ---------------------------------------------------------
   INCLUDED
--------------------------------------------------------- */

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

@media (min-width:768px){

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

@media (min-width:1200px){

    .cpr-included-grid{
        grid-template-columns:repeat(7, minmax(0, 1fr));
    }
}

.cpr-included-card{
    display:grid;
    align-content:start;
    gap:var(--s-1);
    padding:var(--s-4);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    background:var(--surface);
}

.cpr-included-card > .icon{
    width:var(--icon-lg);
    height:var(--icon-lg);
    margin-bottom:var(--s-2);
    color:var(--accent);
}

.cpr-included-card strong{
    font-size:var(--t-small);
}

.cpr-included-card span{
    color:var(--ink-2);
    font-size:var(--t-small);
}

.cpr-included-bottom{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--s-3) var(--s-6);
    margin-top:var(--s-5);
    padding-top:var(--s-5);
    border-top:1px solid var(--line);
    color:var(--ink-2);
    font-size:var(--t-small);
    font-weight:var(--w-strong);
}

.cpr-included-bottom span{
    display:inline-flex;
    align-items:center;
    gap:var(--s-2);
}

.cpr-included-bottom .icon{
    color:var(--accent);
}


/* ---------------------------------------------------------
   FINAL CTA
--------------------------------------------------------- */

.web-final-panel{
    display:grid;
    grid-template-columns:minmax(0, 1fr);
    gap:var(--s-5);
    align-items:center;
    padding:var(--card-pad-lg);
    overflow:hidden;
    border-radius:var(--r-panel);
    background:var(--console);
    color:var(--console-ink);
}

@media (min-width:1024px){

    .web-final-panel{
        grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
        gap:var(--s-7);
        padding:var(--s-8);
    }
}

.web-final-content{
    display:grid;
    justify-items:start;
    gap:var(--s-4);
}

.web-final-eyebrow{
    border-color:transparent;
    background:var(--on-accent-tint);
    color:var(--console-ink);
}

.web-final-content h2{
    color:var(--console-ink);
}

.web-final-content h2 span{
    display:block;
    color:var(--console-ink);
}

.web-final-content p{
    max-width:52ch;
    color:var(--console-ink-2);
    font-size:var(--t-lead);
}

.web-final-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--s-4);
}

.web-final-price{
    color:var(--console-ink-2);
}

.web-final-price small{
    display:block;
}

.web-final-price strong{
    color:var(--console-ink);
    font-size:var(--t-h2);
}

.web-final-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.web-final-visual img{
    display:block;
    width:min(420px, 100%);
    height:auto;
    margin-inline:auto;
    filter:drop-shadow(0 20px 40px rgba(0, 0, 0, 0.45));
}