/* Holty glass layer: homepage surface map. Load after glass-core.css. Body needs class="glass". */
/* Holty glass layer: 4 treatments applied on top of the live styles.
     G1 frost (light translucent surface) · G2 sheen (gloss on dark/green) · G3 glow (section aura) · G4 glass pill (buttons). */
  body.glass {
    --g-frost: rgba(255,255,255,0.56);
    --g-frost-strong: rgba(255,255,255,0.74);
    --g-edge: rgba(255,255,255,0.82);
    --g-blur: blur(22px) saturate(170%);
    --g-blur-sm: blur(12px) saturate(160%);
    --g-hi: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(255,255,255,0.35);
    --g-depth: 0 1px 1px rgba(18,22,36,0.03), 0 8px 20px rgba(18,40,60,0.05), 0 28px 56px -16px rgba(20,70,60,0.16);
    --g-gloss: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.06) 46%, rgba(255,255,255,0) 52%);
  }
  /* G1 frost */
  body.glass :is(.insight-card, .roi-card, .pf-card, .pf-base, .comp-table, .pricing-card, .gl-chip) {
    background-color: var(--g-frost) !important;
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    border: 1px solid var(--g-edge) !important;
    box-shadow: var(--g-hi), var(--g-depth) !important;
  }
  body.glass .pf-mod {
    background: var(--g-frost-strong) !important;
    -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
    border: 1px solid rgba(255,255,255,0.95) !important;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18,22,36,0.04), 0 12px 28px -8px rgba(20,70,60,0.14) !important;
  }
  body.glass .pf-mod:hover { border-color: rgba(63,186,115,0.45) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(18,22,36,0.05), 0 22px 44px -12px rgba(20,90,60,0.24) !important; }
  body.glass .pf-mod-list { border-top-color: rgba(18,22,36,0.07); }

  /* G3 glow: page sections */
  body.glass .hero { --hb-fade: none; --hb-blend: none; --hb-glows: radial-gradient(34% 44% at 6% 18%, rgba(63,186,115,0.18) 0%, transparent 70%),
      radial-gradient(30% 40% at 26% 56%, rgba(84,203,136,0.12) 0%, transparent 70%),
      radial-gradient(32% 38% at 18% 88%, rgba(63,186,115,0.16) 0%, transparent 70%),
      radial-gradient(48% 64% at 70% 52%, rgba(70,180,205,0.28) 0%, rgba(70,180,205,0.12) 50%, transparent 78%);
    position: relative; isolation: isolate;
    background: var(--hb-fade), var(--hb-blend), var(--hb-glows), #fff !important; }
  body.glass .hero { --hb-blend: radial-gradient(24% 50% at 50% 50%, rgba(110,200,180,0.16) 0%, transparent 74%); }
  body.glass .hero { --hb-fade: linear-gradient(180deg, rgba(248,249,251,0) calc(100% - 180px), #F8F9FB 100%); }
  body.glass .insights { border-top-color: transparent !important; }
  body.glass .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: multiply; background-size: 160px 160px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  body.glass .hero > .container { position: relative; z-index: 1; }
  @media (max-width: 640px) {
    body.glass .hero { --hb-blend: none !important; --hb-glows:
      radial-gradient(420px 360px at 0% 6%, rgba(63,186,115,0.18) 0%, transparent 70%),
      radial-gradient(360px 300px at 100% 30%, rgba(63,186,115,0.10) 0%, transparent 70%),
      radial-gradient(520px 560px at 50% 74%, rgba(70,180,205,0.24) 0%, rgba(70,180,205,0.08) 50%, transparent 72%); }
  }
  body.glass .insights { background:
      radial-gradient(44% 34% at 50% 66%, rgba(224,68,60,0.16) 0%, rgba(224,68,60,0.06) 50%, transparent 76%),
      radial-gradient(64% 46% at 50% 68%, rgba(242,104,95,0.07) 0%, transparent 80%), #F8F9FB !important; }
  body.glass .roi { background:
      radial-gradient(36% 50% at 22% 62%, rgba(63,186,115,0.16) 0%, transparent 70%),
      radial-gradient(40% 56% at 80% 50%, rgba(70,180,205,0.18) 0%, transparent 70%), #fff !important; }
  body.glass .platform { background:
      radial-gradient(36% 40% at 14% 36%, rgba(63,186,115,0.18) 0%, transparent 70%),
      radial-gradient(40% 46% at 88% 72%, rgba(70,180,205,0.20) 0%, transparent 70%), #fff !important; }
  body.glass .competitors { background:
      radial-gradient(30% 50% at 46% 58%, rgba(63,186,115,0.15) 0%, transparent 70%),
      radial-gradient(36% 50% at 90% 40%, rgba(70,180,205,0.13) 0%, transparent 70%), #F8FAFB !important; }
  body.glass .pricing { background:
      radial-gradient(34% 56% at 30% 34%, rgba(63,186,115,0.24) 0%, transparent 70%),
      radial-gradient(36% 60% at 72% 46%, rgba(70,180,205,0.24) 0%, transparent 70%), #F7F9FB !important; }

  /* Insights: keep the red accent as an inner top edge */
  body.glass .insight-card { box-shadow: inset 0 3px 0 #E0443C, var(--g-hi), 0 1px 1px rgba(18,22,36,0.03), 0 8px 20px rgba(60,20,20,0.04), 0 30px 60px -18px rgba(224,68,60,0.26) !important; }
  body.glass .insight-card:hover { transform: translateY(-2px); }

  /* ROI */
  body.glass .roi-results { background: linear-gradient(150deg, rgba(232,248,239,0.78) 0%, rgba(229,244,249,0.66) 100%) !important; border-left: 1px solid rgba(255,255,255,0.85) !important; box-shadow: inset 1px 0 0 rgba(47,144,168,0.10); }
  body.glass .roi-results::after { display: none !important; }
  body.glass .roi-results {
    background: linear-gradient(160deg, #DDF4E7 0%, #CDEEDB 55%, #D2EDEA 100%) !important;
    border-left: 1px solid rgba(63,186,115,0.18) !important;
    box-shadow: none !important; }
  body.glass .roi-card { border-color: rgba(63,186,115,0.20) !important; box-shadow: var(--g-depth) !important; }
  body.glass .roi-bd { background: rgba(255,255,255,0.32); border-top: 1px solid rgba(63,186,115,0.20) !important; box-shadow: none; }
  body.glass .roi-num { background: rgba(255,255,255,0.7); }

  /* Products panel */
  body.glass .pf-card { background: linear-gradient(180deg, rgba(234,247,240,0.62) 0%, rgba(238,247,250,0.50) 100%) !important; }
  body.glass .pf-base { border-style: solid !important; background: rgba(255,255,255,0.55) !important; }
  body.glass .pf-card-ic, body.glass .pf-base-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 20px rgba(47,158,91,0.28) !important; }

  /* Why Holty table: G2 sheen on the dark head row */
  body.glass .comp-table thead th { background: linear-gradient(180deg, #2A3348 0%, #121A2C 55%, #0F172A 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
  body.glass .comp-table thead th:nth-child(2) { background: linear-gradient(180deg, rgba(84,203,136,0.38) 0%, rgba(63,186,115,0.14) 55%, rgba(63,186,115,0.08) 100%), #0F172A !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -3px 0 #3FBA73 !important; }
  body.glass .comp-table tbody tr.comp-group td { background: rgba(241,245,249,0.55) !important; }
  body.glass .comp-table tbody tr:not(.comp-group) td:nth-child(2) { background: rgba(63,186,115,0.07); }
  body.glass .comp-table tbody tr:not(.comp-group) td { border-bottom-color: rgba(18,22,36,0.07) !important; }

  /* G4 glass pills */
  body.glass :is(.hero-cta, .pricing-cta, .roi-cta, .nav-cta, .blog-latest-cta a:not(.alt), .contact-submit) {
    background: var(--g-gloss), linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.10), inset 0 0 0 1px rgba(255,255,255,0.14), 0 2px 6px rgba(47,158,91,0.22), 0 12px 30px -6px rgba(47,158,91,0.45) !important;
  }
  body.glass :is(.hero-cta, .pricing-cta, .roi-cta, .nav-cta, .blog-latest-cta a:not(.alt), .contact-submit):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(0,0,0,0.10), 0 4px 10px rgba(47,158,91,0.25), 0 20px 44px -8px rgba(47,158,91,0.55) !important; }
  body.glass .pf-card-cta { background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 52%), #121624 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 24px -8px rgba(18,22,36,0.45); }
  body.glass .hfaq-roles { background: rgba(255,255,255,0.55) !important; -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm); border: 1px solid rgba(255,255,255,0.9) !important; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18,22,36,0.05), 0 10px 24px -8px rgba(20,70,60,0.16); }
  body.glass .hfaq-role:hover { background: rgba(255,255,255,0.7); }
  body.glass .hfaq-role.on { background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 52%), #121624 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 6px 16px -6px rgba(18,22,36,0.45); }
  body.glass .pf-card-cta:hover { background: linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 52%), #2F8F58 !important; }
  body.glass :is(.hero-cta-ghost, .ai-ask-btn, .blog-latest-cta a.alt, .contact-cancel) {
    background: rgba(255,255,255,0.5) !important;
    -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
    border: 1px solid rgba(255,255,255,0.9) !important;
    box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18,22,36,0.05), 0 10px 24px -8px rgba(20,70,60,0.18) !important;
  }
  body.glass .hero-cta-ghost { background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(229,244,249,0.55) 100%) !important; border-color: rgba(18,22,36,0.16) !important; }
  body.glass :is(.hero-cta-ghost, .ai-ask-btn, .blog-latest-cta a.alt, .contact-cancel):hover { background: rgba(255,255,255,0.92) !important; border-color: var(--dark) !important; }

  /* Hero floating chips */
  .gl-chip { display: none; }
  .gl-chips { display: contents; }
  body.glass .gl-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 9px; border-radius: 16px; white-space: nowrap; animation: glFloat 7s ease-in-out infinite; }
  body.glass .gl-chip--a { left: -34px; bottom: -34px; }
  body.glass .gl-chip--b { right: -24px; top: -22px; animation-delay: -3.5s; }
  body.glass .gl-chip { background: linear-gradient(180deg, rgba(255,255,255,0.80) 0%, rgba(229,244,249,0.62) 100%) !important; border-color: rgba(255,255,255,0.95) !important; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(18,22,36,0.06), 0 10px 26px -8px rgba(20,70,60,0.22) !important; }
  body.glass .gl-chip { gap: 12px; padding: 10px 16px; border-radius: 999px; }
  body.glass .gl-chip--a { gap: 10px; }
  .gl-chip-l { font-size: 14px; font-weight: 700; color: var(--dark); letter-spacing: -0.01em; line-height: 22px; }
  .gl-os { width: 22px; height: 22px; display: block; }
  .gl-os-div { width: 1px; height: 18px; background: rgba(18,22,36,0.12); }
  .gl-chip-ic { width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--g-gloss), linear-gradient(150deg, #54CB88 0%, #2F9E5B 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 10px rgba(47,158,91,0.3); }
  .gl-chip--b .gl-chip-ic { background: var(--g-gloss), linear-gradient(150deg, #5CC6DD 0%, #2F90A8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 4px 10px rgba(47,144,168,0.3); }
  .gl-chip-ic svg { width: 17px; height: 17px; }
  .gl-chip-t { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
  .gl-chip-t strong { font-size: 13.5px; font-weight: 700; color: var(--dark); letter-spacing: -0.01em; }
  .gl-chip-t span { font-size: 12px; font-weight: 500; color: var(--gray-700); }
  @keyframes glFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

  /* Footer: glow on navy + glass badge */
  body.glass footer { background:
      radial-gradient(40% 90% at 8% 0%, rgba(63,186,115,0.20) 0%, transparent 70%),
      radial-gradient(36% 80% at 94% 100%, rgba(70,180,205,0.16) 0%, transparent 70%), #0F172A !important;
    border-top: 1px solid rgba(255,255,255,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); }
  body.glass .footer-eu-badge { background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%) !important; border: 1px solid rgba(255,255,255,0.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.14); -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm); }

  /* Lighter on phones: smaller blur, no floating chips */
  @media (max-width: 640px) {
    body.glass .gl-chip { padding: 8px 13px; gap: 10px; -webkit-backdrop-filter: none; backdrop-filter: none; }
    body.glass .hx { height: 900px; }
    body.glass .hp { top: 530px; }
    body.glass .gl-chips { position: absolute; left: 0; right: 0; top: 343px; z-index: 4; display: flex; justify-content: center; gap: 8px; }
    body.glass .gl-chips .gl-chip { position: static; }
    body.glass .gl-chips .gl-chip--b { position: absolute; left: 0; right: 0; margin: 0 auto; width: max-content; top: 498px; }
    body.glass .gl-chip-l { font-size: 13px; }
    body.glass .gl-chip .gl-os { width: 20px; height: 20px; }
    body.glass .gl-chip--a .gl-os { width: 27px !important; height: 18px !important; }
  }
  @media (max-width: 640px) {
    body.glass { --g-blur: blur(10px) saturate(150%); --g-blur-sm: blur(6px) saturate(140%); --g-depth: 0 1px 1px rgba(18,22,36,0.03), 0 12px 28px -12px rgba(20,70,60,0.14); }
    body.glass .pf-mod { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.86) !important; }
  }
  @media (prefers-reduced-motion: reduce) { body.glass .gl-chip { animation: none; } }
  @media (prefers-reduced-transparency: reduce) {
    body.glass :is(.insight-card, .roi-card, .pf-card, .pf-base, .comp-table, .pricing-card, .gl-chip, .pf-mod, .hero-cta-ghost, .ai-ask-btn) { background-color: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  }

  /* Phones: section glows + review switch (kept last so they win over desktop rules) */
  @media (max-width: 640px) {
    body.glass .insights { background:
      radial-gradient(420px 900px at 50% 62%, rgba(224,68,60,0.13) 0%, rgba(224,68,60,0.04) 55%, transparent 75%), #F8F9FB !important; }
    body.glass .roi { background:
      radial-gradient(380px 420px at 0% 30%, rgba(63,186,115,0.16) 0%, transparent 70%),
      radial-gradient(400px 460px at 100% 70%, rgba(70,180,205,0.18) 0%, transparent 70%), #fff !important; }
    body.glass .platform { background:
      radial-gradient(400px 480px at 0% 18%, rgba(63,186,115,0.18) 0%, transparent 70%),
      radial-gradient(420px 520px at 100% 55%, rgba(70,180,205,0.18) 0%, transparent 70%),
      radial-gradient(400px 480px at 0% 90%, rgba(63,186,115,0.14) 0%, transparent 70%), #fff !important; }
    body.glass .competitors { background:
      radial-gradient(420px 460px at 30% 64%, rgba(63,186,115,0.15) 0%, transparent 70%),
      radial-gradient(360px 400px at 100% 40%, rgba(70,180,205,0.13) 0%, transparent 70%), #F8FAFB !important; }
    body.glass .pricing { background:
      radial-gradient(380px 420px at 10% 30%, rgba(63,186,115,0.22) 0%, transparent 70%),
      radial-gradient(400px 460px at 95% 62%, rgba(70,180,205,0.22) 0%, transparent 70%), #F7F9FB !important; }
    body.glass footer { background:
      radial-gradient(360px 300px at 0% 0%, rgba(63,186,115,0.20) 0%, transparent 70%),
      radial-gradient(340px 300px at 100% 100%, rgba(70,180,205,0.16) 0%, transparent 70%), #0F172A !important; }
    body.glass .hero { --hb-fade: linear-gradient(180deg, rgba(248,249,251,0) calc(100% - 120px), #F8F9FB 100%); }
  }