/* ============================================================
   WEBNOVA — Services page
   Sections: detail (the eight) · process (dark) · hosting pricing
   Relies on page.css for hero + section heading chrome.
   ============================================================ */

/* ─── Service detail rows ───────────────────────────────── */
.wn-svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wn-line); }
.wn-svc-item {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: clamp(2.4rem, 4vw, 3.6rem) 0;
    border-bottom: 1px solid var(--wn-line);
    scroll-margin-top: 6rem;
}
.wn-svc-head { display: flex; gap: 1.4rem; align-items: flex-start; }
.wn-svc-num {
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--wn-ink-faint);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    flex-shrink: 0;
}
.wn-svc-headings { display: flex; flex-direction: column; gap: 0.7rem; }
.wn-svc-title {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--wn-ink);
    margin: 0;
}
.wn-svc-tagline {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--wn-accent);
    margin: 0;
    max-width: 26ch;
}
.wn-svc-body {
    font-size: var(--wn-t-lead);
    font-weight: 300;
    line-height: 1.65;
    color: var(--wn-ink-2);
    margin: 0 0 1.6rem;
    max-width: 58ch;
}
.wn-svc-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem 1.6rem;
    max-width: 44ch;
}
.wn-svc-points li {
    position: relative;
    padding-left: 1.3rem;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--wn-ink-2);
    line-height: 1.4;
}
.wn-svc-points li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.5em;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--wn-accent);
}
.wn-svc-jump { margin-top: 1.6rem; }

/* ─── Process (dark band) ───────────────────────────────── */
.wn-process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--wn-line-inv);
    border-top: 1px solid var(--wn-line-inv);
    border-bottom: 1px solid var(--wn-line-inv);
}
.wn-process-step {
    background: #0a0d14;
    padding: 2.6rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.wn-process-num {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: var(--wn-accent);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}
.wn-process-num::before {
    content: '';
    width: 22px; height: 1px;
    background: var(--wn-accent);
}
.wn-process-title {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--wn-ink-inv);
    margin: 0;
}
.wn-process-copy {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--wn-ink-inv-muted);
    margin: 0;
    max-width: 38ch;
}

/* ─── Hosting pricing ───────────────────────────────────── */
.wn-hosting-group { margin-top: 3rem; }
.wn-hosting-group:first-of-type { margin-top: 0; }
.wn-hosting-group-head {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wn-line);
}
.wn-hosting-group-label {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--wn-ink);
    margin: 0;
}
.wn-hosting-group-note {
    font-size: 0.92rem;
    font-weight: 300;
    color: var(--wn-ink-muted);
    margin: 0;
}
.wn-hosting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}
.wn-plan {
    position: relative;
    padding: 2.2rem 2rem;
    background: var(--wn-bg);
    border: 1px solid var(--wn-line);
    border-radius: var(--wn-r-lg);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    transition: transform var(--wn-t-med) var(--wn-ease), box-shadow var(--wn-t-med) var(--wn-ease), border-color var(--wn-t-med) var(--wn-ease);
}
.wn-plan:hover {
    transform: translateY(-3px);
    box-shadow: var(--wn-glass-shadow);
    border-color: var(--wn-line-strong);
}
.wn-plan.is-popular {
    border-color: var(--wn-accent);
    box-shadow: 0 0 0 1px var(--wn-accent), var(--wn-glass-shadow);
}
.wn-plan-flag {
    position: absolute;
    top: -0.7rem;
    right: 1.4rem;
    padding: 0.3rem 0.7rem;
    background: var(--wn-accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--wn-r-pill);
}
.wn-plan-name {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wn-ink-muted);
    margin: 0;
}
.wn-plan-price {
    font-size: clamp(2.4rem, 4vw, 3rem);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--wn-ink);
    margin: 0;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}
.wn-plan-currency { font-size: 0.45em; font-weight: 500; color: var(--wn-ink-muted); }
.wn-plan-per { font-size: 0.32em; font-weight: 400; color: var(--wn-ink-muted); letter-spacing: 0; }
.wn-plan-specs {
    list-style: none;
    margin: 0;
    padding: 0 0 1.1rem;
    border-bottom: 1px solid var(--wn-line);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.95rem;
    color: var(--wn-ink-2);
}
.wn-plan-specs strong { font-weight: 600; color: var(--wn-ink); }
.wn-plan-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    flex: 1;
}
.wn-plan-features li {
    position: relative;
    padding-left: 1.6rem;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--wn-ink-2);
    line-height: 1.4;
}
.wn-plan-features li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.15em;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--wn-accent-tint);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233f98a6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
.wn-plan-cta { justify-content: center; margin-top: 0.4rem; }
.wn-plan.is-popular .wn-plan-cta {
    background: var(--wn-ink);
    color: var(--wn-ink-inv);
    border-color: var(--wn-ink);
}
.wn-plan.is-popular .wn-plan-cta:hover { background: var(--wn-ink-2); }
.wn-hosting-foot {
    margin: 2.6rem 0 0;
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--wn-ink-muted);
    max-width: 60ch;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .wn-svc-item { grid-template-columns: 1fr; gap: 1.4rem; }
    .wn-process-grid { grid-template-columns: repeat(2, 1fr); }
    .wn-hosting-grid { grid-template-columns: 1fr; gap: 1rem; max-width: 30rem; }
    .wn-plan-flag { right: 1.4rem; }
}
@media (max-width: 720px) {
    .wn-process-grid { grid-template-columns: 1fr; }
    .wn-svc-points { grid-template-columns: 1fr; }
    .wn-hosting-grid { max-width: none; }
}

/* ─── Custom / bare-metal hosting band (hosting page only) ───
   Mirrors the wn-ctamid look: tinted cyan→purple band + frosted glass panel,
   so the premium bare-metal offering gets the site's most beautiful treatment. */
.wn-hostcustom {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(2, 217, 255, 0.18), transparent 58%),
        radial-gradient(ellipse at 88% 84%, rgba(123, 97, 255, 0.16), transparent 58%),
        linear-gradient(135deg, rgba(2, 217, 255, 0.11), rgba(123, 97, 255, 0.11));
}
.wn-hostcustom-panel {
    border-radius: var(--wn-r-lg);
    border: 1px solid var(--wn-glass-border);
    background: var(--wn-glass-bg);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: var(--wn-glass-shadow);
    padding: clamp(2rem, 4vw, 3.4rem);
}
@media (prefers-reduced-transparency: reduce) {
    .wn-hostcustom-panel { background: var(--wn-glass-bg-strong); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.wn-hostcustom-grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.wn-hostcustom-copy .wn-section-title { max-width: 14ch; }
.wn-hostcustom-lead {
    font-size: var(--wn-t-lead);
    font-weight: 300;
    line-height: 1.65;
    color: var(--wn-ink-2);
    margin: 1.4rem 0 0;
    max-width: 46ch;
}
.wn-hostcustom-cta { margin-top: 1.8rem; }

.wn-hostcustom-feats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wn-hostcustom-feat { display: flex; flex-direction: column; gap: 0.7rem; }
.wn-hostcustom-ic {
    width: 42px; height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--wn-line);
    background: rgba(2, 217, 255, 0.10);
    color: var(--wn-accent);
}
.wn-hostcustom-ic svg { width: 21px; height: 21px; }
.wn-hostcustom-feat-text { display: flex; flex-direction: column; gap: 0.25rem; }
.wn-hostcustom-feat-text strong { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--wn-ink); }
.wn-hostcustom-feat-text span { font-size: 0.88rem; font-weight: 300; line-height: 1.5; color: var(--wn-ink-2); }

@media (max-width: 1024px) {
    .wn-hostcustom-grid { grid-template-columns: 1fr; gap: 2.4rem; }
    .wn-hostcustom-copy .wn-section-title { max-width: none; }
}
@media (max-width: 560px) {
    .wn-hostcustom-feats { grid-template-columns: 1fr; }
}

/* ─── Dark "sexy" treatment for the hosting packages (dedicated page) ─── */
.wn-hosting--dark { position: relative; overflow: hidden; }
.wn-hosting-glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.wn-hosting-glow.is-1 { top: -120px; left: 8%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(2, 217, 255, 0.16), transparent 70%); }
.wn-hosting-glow.is-2 { bottom: -140px; right: 6%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(123, 97, 255, 0.14), transparent 70%); }
.wn-hosting--dark .wn-container { position: relative; z-index: 1; }

.wn-hosting--dark .wn-hosting-group-head { border-bottom-color: var(--wn-line-inv); }
.wn-hosting--dark .wn-hosting-group-label { color: var(--wn-ink-inv); }
.wn-hosting--dark .wn-hosting-group-note { color: var(--wn-ink-inv-muted); }

.wn-hosting--dark .wn-plan {
    background: var(--wn-glass-bg-dark);
    border-color: var(--wn-glass-border-dark);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: var(--wn-glass-shadow-dark);
}
@media (prefers-reduced-transparency: reduce) {
    .wn-hosting--dark .wn-plan { background: rgba(16, 20, 28, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.wn-hosting--dark .wn-plan:hover { box-shadow: var(--wn-glass-shadow-dark); border-color: rgba(247, 246, 242, 0.20); }
.wn-hosting--dark .wn-plan.is-popular {
    border-color: var(--wn-accent);
    box-shadow: var(--wn-glass-shadow-dark), 0 30px 70px -28px rgba(2, 217, 255, 0.32);
}
.wn-hosting--dark .wn-plan-flag { background: var(--wn-accent); color: #06222a; }
.wn-hosting--dark .wn-plan-name { color: rgba(247, 246, 242, 0.5); }
.wn-hosting--dark .wn-plan-price { color: var(--wn-ink-inv); }
.wn-hosting--dark .wn-plan-currency,
.wn-hosting--dark .wn-plan-per { color: var(--wn-ink-inv-muted); }
.wn-hosting--dark .wn-plan-specs { border-bottom-color: var(--wn-line-inv); color: var(--wn-ink-inv-muted); }
.wn-hosting--dark .wn-plan-specs strong { color: var(--wn-ink-inv); }
.wn-hosting--dark .wn-plan-features li { color: var(--wn-ink-inv-muted); }
.wn-hosting--dark .wn-plan-features li::before {
    background-color: rgba(2, 217, 255, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2302d9ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.wn-hosting--dark .wn-plan-cta {
    background: transparent;
    border-color: rgba(247, 246, 242, 0.20);
    color: var(--wn-ink-inv);
}
.wn-hosting--dark .wn-plan-cta:hover { background: rgba(247, 246, 242, 0.08); }
.wn-hosting--dark .wn-plan.is-popular .wn-plan-cta {
    background: var(--wn-ink-inv);
    color: var(--wn-ink);
    border-color: transparent;
}
.wn-hosting--dark .wn-plan.is-popular .wn-plan-cta:hover { filter: brightness(1.05); background: var(--wn-ink-inv); }
.wn-hosting--dark .wn-hosting-foot { color: var(--wn-ink-inv-muted); }