/* Glassmorphism v2: vivid violet backdrop with glossy floating 3D shapes, and clearer frosted glass
   (stronger blur, light sheen, bright hairline edges) so the shapes visibly show through the panels.
   Loaded after app.css. Text contrast is protected by a tinted glass base under the sheen. */

/* ---------- tokens ---------- */
:root {
  --bg: #efeaff;
  --bg-base: linear-gradient(155deg, #f3eeff 0%, #e8e6fd 40%, #e6effc 75%, #f6effa 100%);
  --blob-1: transparent; --blob-2: transparent; --blob-3: transparent;
  --glass-bg: rgba(255, 255, 255, .46);
  --glass-bg-strong: rgba(255, 255, 255, .70);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .22) 100%);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-edge: rgba(76, 29, 149, .10);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .95), inset 1px 0 0 rgba(255, 255, 255, .45);
  --blur: 26px;
  --input-bg: rgba(255, 255, 255, .62);
  --shadow: 0 2px 6px -1px rgba(46, 16, 101, .08), 0 18px 40px -16px rgba(46, 16, 101, .28);
  --shadow-lg: 0 30px 70px -24px rgba(46, 16, 101, .38);
  --shape-opacity: .95;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #120a2e; --surface: #1a1438; --surface-2: #211a46; --surface-3: #2b2356;
    --bg-base: linear-gradient(155deg, #1a0d40 0%, #140b33 40%, #0e0f33 75%, #1a0c38 100%);
    /* tinted base keeps white text legible even over a bright shape; the sheen supplies the "glass" */
    --glass-bg: rgba(24, 16, 58, .48);
    --glass-bg-strong: rgba(24, 16, 58, .74);
    --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .08) 100%);
    --glass-border: rgba(255, 255, 255, .20);
    --glass-edge: rgba(0, 0, 0, .25);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .10);
    --input-bg: rgba(14, 9, 36, .55);
    --border: rgba(255, 255, 255, .11); --border-strong: rgba(255, 255, 255, .22);
    --shadow: 0 2px 6px -1px rgba(0, 0, 0, .4), 0 20px 44px -18px rgba(0, 0, 0, .75);
    --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .85);
    --shape-opacity: .9;
  }
}
:root[data-theme="dark"] {
  --bg: #120a2e; --surface: #1a1438; --surface-2: #211a46; --surface-3: #2b2356;
  --bg-base: linear-gradient(155deg, #1a0d40 0%, #140b33 40%, #0e0f33 75%, #1a0c38 100%);
  --glass-bg: rgba(24, 16, 58, .48);
  --glass-bg-strong: rgba(24, 16, 58, .74);
  --glass-sheen: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .08) 100%);
  --glass-border: rgba(255, 255, 255, .20);
  --glass-edge: rgba(0, 0, 0, .25);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .28), inset 1px 0 0 rgba(255, 255, 255, .10);
  --input-bg: rgba(14, 9, 36, .55);
  --border: rgba(255, 255, 255, .11); --border-strong: rgba(255, 255, 255, .22);
  --shadow: 0 2px 6px -1px rgba(0, 0, 0, .4), 0 20px 44px -18px rgba(0, 0, 0, .75);
  --shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, .85);
  --shape-opacity: .9;
}
/* Clean theme and reduced transparency: solid surfaces, no shapes. */
:root[data-style="clean"] { --glass-sheen: none; --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --blur: 0px; }
:root[data-style="clean"] .bg-shapes { display: none; }
@media (prefers-reduced-transparency: reduce) {
  :root { --glass-sheen: none; }
  .bg-shapes { opacity: .35 !important; }
}

/* ---------- glass panels ---------- */
.card, .glass, .stat, .steps li, .sec-list li, .announce {
  background: var(--glass-sheen), var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(165%); backdrop-filter: blur(var(--blur)) saturate(165%);
}
.site-header { background: var(--glass-sheen), var(--glass-bg-strong); }
.site-footer { background: var(--glass-sheen), var(--glass-bg); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
/* bright top-left rim, like light catching the glass edge */
.card::after, .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .7; }
:root[data-theme="dark"] .card::after, :root[data-theme="dark"] .glass::after { opacity: .35; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card::after, :root:not([data-theme="light"]) .glass::after { opacity: .35; } }
:root[data-style="clean"] .card::after, :root[data-style="clean"] .glass::after { display: none; }
/* cards that already use ::after for decoration keep it */
.mt-card::after { padding: 0; -webkit-mask: none; mask: none; opacity: 1; background: var(--brand-soft); inset: -40px -40px auto auto; width: 120px; height: 120px; border-radius: 50%; }
/* round glass icon buttons (theme toggle, menu) */
.icon-btn, .site-header .icon-btn { border-radius: 50% !important; background: var(--glass-sheen), var(--glass-bg) !important; border: 1px solid var(--glass-border) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--glass-highlight), var(--shadow-sm) !important; }

/* ---------- floating glossy 3D shapes ---------- */
.bg-shapes { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: var(--shape-opacity); }
.bg-shapes.quiet { opacity: calc(var(--shape-opacity) * .6); }
.bg-shapes .shp { position: absolute; display: block; will-change: transform; animation: drift 26s ease-in-out infinite alternate; }
.bg-shapes .sphere { --c: #f97316; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 5%, color-mix(in srgb, var(--c) 45%, #fff) 16%, var(--c) 46%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: inset -14px -18px 34px rgba(0, 0, 0, .22), 0 30px 60px -22px color-mix(in srgb, var(--c) 70%, transparent); }
.bg-shapes .ring { --c: #14b8a6; border-radius: 50%;
  background: radial-gradient(circle, transparent 0 36%, color-mix(in srgb, var(--c) 55%, #000) 37%, var(--c) 44%, color-mix(in srgb, var(--c) 40%, #fff) 49%, var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000) 62%, transparent 63%);
  filter: drop-shadow(0 22px 30px color-mix(in srgb, var(--c) 45%, transparent)); }
.bg-shapes .pill { --c: #14b8a6; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 50%, #000) 0%, var(--c) 28%, color-mix(in srgb, var(--c) 35%, #fff) 44%, var(--c) 62%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: 0 30px 50px -24px color-mix(in srgb, var(--c) 70%, transparent); }
.bg-shapes .blob { --c: #7c3aed; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff) 0%, var(--c) 45%, color-mix(in srgb, var(--c) 50%, #000) 100%); filter: blur(1px); opacity: .85; }
.bg-shapes .shp.warm { --c: #f97316; } .bg-shapes .shp.pink { --c: #ec4899; }
.bg-shapes .shp.brand { --c: var(--brand); } .bg-shapes .shp.accent { --c: var(--accent); }
.bg-shapes .s1 { width: clamp(150px, 19vw, 280px); aspect-ratio: 1; left: -3vw; top: 8vh; }
.bg-shapes .s2 { width: clamp(180px, 24vw, 360px); aspect-ratio: 1; right: -6vw; top: 38vh; animation-duration: 32s; animation-delay: -8s; }
.bg-shapes .s3 { width: clamp(150px, 17vw, 250px); aspect-ratio: 1; left: 16vw; bottom: -6vh; animation-duration: 30s; animation-delay: -4s; }
.bg-shapes .s4 { width: clamp(46px, 4.2vw, 64px); height: clamp(150px, 15vw, 220px); right: 22vw; top: -4vh; transform: rotate(32deg); animation-name: drift-tilt; animation-duration: 28s; }
.bg-shapes .s5 { width: clamp(40px, 4vw, 64px); aspect-ratio: 1; left: 42vw; top: 18vh; animation-duration: 20s; animation-delay: -6s; }
.bg-shapes .s6 { width: clamp(70px, 7vw, 110px); aspect-ratio: 1; right: 8vw; bottom: 6vh; animation-duration: 24s; animation-delay: -12s; }
.bg-shapes .s7 { width: clamp(80px, 8vw, 130px); aspect-ratio: 1; right: 36vw; bottom: 26vh; animation-duration: 34s; animation-delay: -3s; }
.bg-shapes .s8 { width: clamp(160px, 20vw, 300px); aspect-ratio: 1; left: 52vw; top: 62vh; animation-duration: 36s; animation-delay: -15s; }
@keyframes drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(2vw, -3vh, 0) rotate(8deg); } 100% { transform: translate3d(-1.5vw, 2vh, 0) rotate(-6deg); } }
@keyframes drift-tilt { 0% { transform: translate3d(0, 0, 0) rotate(32deg); } 100% { transform: translate3d(-2vw, 4vh, 0) rotate(44deg); } }
@media (max-width: 640px) { .bg-shapes .s5, .bg-shapes .s7, .bg-shapes .s8 { display: none; } .bg-shapes .s2 { top: 55vh; } }
@media (prefers-reduced-motion: reduce) { .bg-shapes .shp { animation: none !important; } }
@media print, (forced-colors: active) { .bg-shapes { display: none; } }

/* Readability: shapes stay vivid in the side gutters but fade behind the central text column,
   so body text never sits on a fully saturated shape (WCAG contrast), while glass panels still frost them. */
.bg-shapes {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 9%, rgba(0, 0, 0, .3) 25%, rgba(0, 0, 0, .3) 75%, #000 91%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 9%, rgba(0, 0, 0, .3) 25%, rgba(0, 0, 0, .3) 75%, #000 91%, #000 100%);
}
@media (max-width: 760px) {
  .bg-shapes {
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .26) 22%, rgba(0, 0, 0, .26) 78%, rgba(0, 0, 0, .5) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .26) 22%, rgba(0, 0, 0, .26) 78%, rgba(0, 0, 0, .5) 100%);
  }
}
/* free-standing feature lists become small glass tiles */
.why-grid .feature { padding: 14px; border-radius: var(--r); background: var(--glass-sheen), var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight), var(--shadow-sm); -webkit-backdrop-filter: blur(var(--blur)) saturate(165%); backdrop-filter: blur(var(--blur)) saturate(165%); }

/* ================= full-width layout: use the whole screen on large monitors ================= */
.wrap { max-width: 1760px; padding-left: clamp(16px, 3.5vw, 64px); padding-right: clamp(16px, 3.5vw, 64px); }
.content { max-width: none; }
@media (min-width: 1024px) { .content { padding: 24px clamp(24px, 2.5vw, 44px); } }
@media (min-width: 1400px) {
  .hero-grid { gap: clamp(48px, 5vw, 96px); grid-template-columns: 1.1fr 1fr; }
  .hero-xl h1 { max-width: 18ch; font-size: clamp(3.4rem, 4.2vw, 4.6rem); }
  .hero .lead { max-width: 62ch; font-size: 1.18rem; }
  .tenant-net svg { max-width: 720px; }
  .section-head { max-width: 820px; }
  .svc-grid { grid-template-columns: repeat(6, 1fr); }
  .includes { grid-template-columns: repeat(6, 1fr); }
  .isp-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
  .quotes { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .mt-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .why-grid { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1.25fr; gap: clamp(56px, 5vw, 96px); }
  .plans { grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 22px; }
  .cov-layout { grid-template-columns: 2fr 1fr; } #cov-map { height: 560px; }
  .contact-layout { grid-template-columns: 1.6fr 1fr; }
  .page-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .arch-tenants { gap: 18px; }
}
@media (min-width: 1800px) { .svc-grid { gap: 18px; } .stats { gap: 18px; } }
/* keep long reading text at a comfortable line length even on wide screens */
.prose, .faq-list, .page-hero p { max-width: 80ch; }
.faq-split .faq-list { max-width: none; }
/* shapes: content now spans the screen, so fade them behind nearly all of it and keep the vivid edge narrow */
@media (min-width: 761px) {
  .bg-shapes {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .34) 7%, rgba(0, 0, 0, .34) 93%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .34) 7%, rgba(0, 0, 0, .34) 93%, #000 100%);
  }
}