/* Sub-page glass layer (about / work / service): the homepage language on a cool base. CTA panels are left untouched. */
:root{--g-base:#f7f8fa;--g-ink:#111827;--g-ink-2:#4b5563;--g-cobalt:#1b62ed;--glass-light:rgba(255,255,255,.66);--glass-light-strong:rgba(255,255,255,.78);--glass-border-light:rgba(15,23,42,.08);--glass-blur:blur(16px) saturate(130%);--glass-shadow:0 24px 64px -36px rgba(16,24,40,.28);--radius-card:24px;--g-motion:200ms}
@media (max-width:700px){:root{--glass-blur:blur(12px) saturate(130%)}}

/* One fixed colour field for the whole page; sections go transparent so glass has something to refract. */
body{background:var(--g-base)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40rem 26rem at 10% 12%,rgba(27,98,237,.10),transparent 64%),radial-gradient(34rem 24rem at 90% 40%,rgba(167,139,250,.08),transparent 64%),radial-gradient(36rem 26rem at 50% 96%,rgba(27,98,237,.06),transparent 64%)}
main > section:not(.cta-section):not(.inquiry-cta),.price-section,.pricing-renewal,.admin-plans,.service-list,.faq-section,.service-notices,.ga-section,.about-chat-preview,.column-list{background:transparent}
.service-list::before{display:none}

/* Glass cards */
.pricing-card,.pricing-additional,.ga-callout,.ga-demo,.ga-explain-cards article,.faq-item{
  border:1px solid var(--glass-border-light);border-radius:20px;background:var(--glass-light);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.pricing-card,.pricing-additional{border-radius:var(--radius-card)}
.pricing-card--featured{border-color:var(--g-cobalt);background:var(--glass-light-strong)}
.pricing-card--renewal{border-color:rgba(27,98,237,.35)}
.faq-item{margin-bottom:12px;padding:6px 20px;border-bottom:1px solid var(--glass-border-light)}
.ga-callout{background:rgba(27,98,237,.08);border-color:rgba(27,98,237,.18)}
.ga-explain-cards article{border-radius:16px}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pricing-card,.pricing-additional,.ga-demo,.ga-explain-cards article,.faq-item{background:#fff}}

/* Contact: the form card and guide block become light glass; inputs stay opaque for legibility. */
.contact-form-section,.contact-hero{background:transparent}
.contact-card,.contact-guide__info,.contact-success{border:1px solid var(--glass-border-light);border-radius:var(--radius-card);background:var(--glass-light);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.contact-consent,.contact-config-unavailable{border-radius:16px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7)}
.contact-card input,.contact-card select,.contact-card textarea{background:#fff}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.contact-card,.contact-guide__info,.contact-success{background:#fff}}

/* Promotion (website-offer) and privacy pages. */
.offer-hero,.offer-section,.offer-tint,.offer-final{background:transparent}
.offer-summary,.offer-work,.offer-device-stage,.offer-steps,.offer-scope{border:1px solid var(--glass-border-light);border-radius:20px;background:var(--glass-light);box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.offer-summary{border-radius:var(--radius-card);border-color:rgba(27,98,237,.35);background:var(--glass-light-strong)}
.offer-work{overflow:hidden}
.offer-device-stage{background:rgba(255,255,255,.5)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.offer-summary,.offer-work,.offer-device-stage,.offer-steps,.offer-scope{background:#fff}}

/* ---------- Final CTA: same treatment as the homepage (navy gradient, dark glass panel, trimmed padding). Copy stays per page. ---------- */
:root{--g-navy-2:#111827;--g-on-dark:#f9fafb;--glass-dark:rgba(255,255,255,.10);--glass-border-dark:rgba(255,255,255,.18);--radius-btn:12px}
.cta-section{position:relative;isolation:isolate;padding-block:120px;background:linear-gradient(180deg,var(--g-navy-2),#0b1220)}
.cta-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48rem 28rem at 20% 20%,rgba(27,98,237,.28),transparent 62%),radial-gradient(40rem 26rem at 85% 85%,rgba(167,139,250,.16),transparent 64%)}
.cta-panel{background:var(--glass-dark);border:1px solid var(--glass-border-dark);border-radius:24px;color:var(--g-on-dark);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);padding-top:68px;padding-bottom:85px}
.cta-panel .eyebrow{color:#bcd3ff}
.cta-panel .motion-cta{border-radius:var(--radius-btn)}
.cta-panel .motion-cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (max-width:960px){.cta-panel{padding-top:41px;padding-bottom:41px}}
@media (max-width:700px){.cta-panel{padding-top:34px;padding-bottom:34px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.cta-panel{background:rgba(16,24,40,.92)}}