/* Bridge: harmonises the legacy product pages (Aurion 24, Scheme App, Owners App, BillBook24)
   with the new look without rewriting their feature-rich sections. Everything is scoped under .pgl. */
.pgl{ font-family:'Inter',system-ui,sans-serif; }
.pgl .section-title,.pgl h1,.pgl h2,.pgl h3{ font-family:'Bricolage Grotesque','Inter',sans-serif; letter-spacing:-.025em; }
.pgl .section-title{ font-weight:800; line-height:1.06; }
.pgl .text-highlight{ background:linear-gradient(100deg,#f5821f,#ff5e8a 45%,#7c5cff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent!important; animation:pgShift 6s ease-in-out infinite alternate; }
.pgl .section-tag{ display:inline-flex; align-items:center; gap:.6rem; font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#f5821f; }
.pgl .section-tag .tag-dash{ width:8px; height:8px; border-radius:50%; background:#f5821f; box-shadow:0 0 0 4px rgba(245,130,31,.2); animation:pgPing 2s infinite; }
.pgl .btn-get-started{ border-radius:99px!important; border:0!important; background:linear-gradient(135deg,#f5821f,#ff5e8a)!important; color:#fff!important; box-shadow:0 12px 30px rgba(255,94,58,.35); transition:transform .25s,box-shadow .25s!important; }
.pgl .btn-get-started:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(255,94,58,.5); }
.pgl .btn-outline-dark-custom,.pgl .btn-outline-light{ border-radius:99px!important; }
.pgl .why-item,.pgl .service-card,.pgl .stat-item{ border-radius:26px; }
.pgl .why-item,.pgl .service-card{ background:rgba(255,255,255,.72)!important; backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.9)!important; box-shadow:0 18px 44px rgba(120,70,40,.12)!important; transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s!important; }
.pgl .why-item:hover,.pgl .service-card:hover{ transform:translateY(-8px); box-shadow:0 28px 56px rgba(255,94,58,.2)!important; }
.pgl img{ max-width:100%; }
.pgl section{ position:relative; }
/* ===== Product pages: let the site-wide animated background (network + glow) show behind every section ===== */
.pg > section:not(.pg-hero){ background-color:transparent !important; }
.own-how, .sch-roles, .bb24-fit, .a24-run{ background-image:linear-gradient(135deg, rgba(18,21,29,.6) 0%, rgba(245,130,31,.26) 100%) !important; background-color:transparent !important; }
.prod-faq, .demo-section, .stats-section{ background-image:none !important; }
.sch-roles h5{ color:#fff; }
.bb24-fit h4{ color:#fff; }
.own-how h5{ color:#fff; }

/* Scheme App sections sit outside the .pg wrapper, so make them transparent by class too (site background animation shows through) */
.sch-sides, .sch-cap, .sch-gallery, .prod-faq, .demo-section, .stats-section{ background-color:transparent !important; background-image:none !important; }

/* Owners App and BillBook24 sections also sit outside the .pg wrapper: transparent by class so the site background animation shows */
.own-bento, .own-reports, .own-modules, .own-devices, .bb24-about, .bb24-features, .bb24-faq{ background-color:transparent !important; background-image:none !important; }

/* ===== layout upgrades ===== */
/* Scheme App: hide the developer note shown under the screens wall */
.sch-wall-note{ display:none; }
/* BillBook24 features: plain icon+text list -> glass cards in a grid */
.bb24-features-grid{ gap:1.4rem; }
.bb24-feature-item{ position:relative; padding:1.5rem 1.4rem; border-radius:24px; align-items:flex-start; background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.72)); border:1px solid rgba(27,31,42,.1); box-shadow:0 22px 50px -28px rgba(120,70,40,.45); transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s; }
.bb24-feature-item:hover{ translate:0 -6px; border-color:rgba(247,148,29,.65); box-shadow:0 30px 60px -24px rgba(247,148,29,.55); }
.bb24-feature-icon{ width:56px; height:56px; border-radius:18px; box-shadow:0 10px 24px -8px rgba(0,0,0,.4); }

/* Product pages: use the home page's accent system (orange -> pink -> violet gradient on highlighted words, glowing orange tag dot) */
.section-title .text-highlight, .section-title span.text-highlight{ background:linear-gradient(100deg,#f5821f,#ff5e8a 45%,#7c5cff); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; -webkit-text-fill-color:transparent; animation:pgShift 6s ease-in-out infinite alternate; }
.section-tag{ display:inline-flex; align-items:center; gap:.6rem; font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#f5821f; }
.section-tag .tag-dash{ width:8px; height:8px; border-radius:50%; background:#f5821f; box-shadow:0 0 0 4px rgba(245,130,31,.2); animation:pgPing 2s infinite; }
@keyframes pgShift{ to{ background-position:100% 0; } }
@keyframes pgPing{ 70%{ box-shadow:0 0 0 10px rgba(245,130,31,0); } 100%{ box-shadow:0 0 0 0 rgba(245,130,31,0); } }

/* last coloured bands removed: product pages show only the site background animation */
.a24-run, .own-how, .sch-roles, .bb24-fit, .stats-section, .stats-overlay{ background:none !important; background-color:transparent !important; background-image:none !important; }

/* stats strip (no band behind it now): authored for light mode; the dark-mode invert renders them light */
.stats-section .stat-number{ color:#1b1f2a !important; -webkit-text-fill-color:#1b1f2a; text-shadow:none; }
.stats-section .stat-label{ color:#555d72 !important; }
.stats-section .stat-item:not(:last-child)::after{ background:rgba(27,31,42,.15) !important; }

/* decorative corner art (hexagons, polygons, dot grids, rings, blobs) removed from product pages */
.deco-art{ display:none !important; }

/* Scheme App "Two sides, one app": original layout kept; only small touches (panel fade-in, gradient icons/badge, softer image) */
.sch-tab-panel.active{ animation:schPanelIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes schPanelIn{ from{ opacity:0; translate:0 18px; } }
.sch-panel-img{ border:0 !important; box-shadow:0 30px 60px -28px rgba(0,0,0,.5); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.sch-panel-grid:hover .sch-panel-img{ transform:scale(1.015); }
.sch-panel-grid:not(.reverse) .sch-feat-list li .ico{ background:linear-gradient(135deg,#22c55e,#0b6b6f) !important; }
.sch-panel-grid.reverse .sch-feat-list li .ico{ background:linear-gradient(135deg,#14b8cf,#2563eb) !important; }
#sch-panel-admin .sch-feat-list li .ico{ background:linear-gradient(135deg,#ff8a1f,#ff4f7b) !important; }
#sch-panel-salesman .sch-feat-list li .ico{ background:linear-gradient(135deg,#f6a623,#d9244e) !important; }
html.dark-mode .sch-feat-list li .ico, html.dark-mode .sch-feat-list li .ico i{ color:#000 !important; }
.sch-feat-list li{ transition:translate .3s; } .sch-feat-list li:hover{ translate:6px 0; }
/* Scheme App sides: image alternates sides: Admin = right, Customer = left, Agent = right, Salesman = left */
#sch-panel-admin .sch-panel-grid, #sch-panel-agent .sch-panel-grid{ grid-template-columns:1.1fr .9fr !important; }
#sch-panel-customer .sch-panel-grid, #sch-panel-salesman .sch-panel-grid{ grid-template-columns:.9fr 1.1fr !important; }
#sch-panel-admin .sch-panel-img, #sch-panel-agent .sch-panel-img{ order:2 !important; }
#sch-panel-customer .sch-panel-img, #sch-panel-salesman .sch-panel-img{ order:0 !important; }
@media (max-width:850px){ #sch-panel-admin .sch-panel-grid, #sch-panel-agent .sch-panel-grid, #sch-panel-customer .sch-panel-grid, #sch-panel-salesman .sch-panel-grid{ grid-template-columns:1fr !important; } #sch-panel-admin .sch-panel-img, #sch-panel-agent .sch-panel-img{ order:0 !important; } }

/* ===== Product pages: new hover effect =====
   The old orange/yellow fill-on-hover is gone. Hover now = card lifts, a spinning orange-pink-violet light runs around its edge,
   a soft glow appears and the icon pops. Text colours never change on hover. */
@property --pga{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes pgaSpin{ to{ --pga:360deg; } }
.sch-flow-item, .sch-cap-card, .own-bento-item, .own-report-list li, .own-how-item, .own-module-tile, .bb24-fit-card, .a24-plan, .a24-run-item{ transition:translate .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s !important; }
.sch-flow-item::before, .sch-cap-card::before, .own-bento-item::before, .own-report-list li::before, .own-how-item::before, .own-module-tile::before, .bb24-fit-card::before, .a24-plan::before, .a24-run-item::before{
  content:'' !important; position:absolute !important; inset:0 !important; top:0 !important; right:0 !important; left:0 !important; bottom:0 !important; width:auto !important; height:auto !important; border-radius:inherit !important; padding:1.5px; z-index:3 !important; pointer-events:none;
  background:conic-gradient(from var(--pga),transparent 0 55%,#ff8a1f 72%,#ff5e8a 86%,#7c5cff 96%,transparent) !important;
  -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:0 !important; transform:none !important; animation:pgaSpin 4s linear infinite; transition:opacity .4s !important; }
.sch-flow-item:hover::before, .sch-cap-card:hover::before, .own-bento-item:hover::before, .own-report-list li:hover::before, .own-how-item:hover::before, .own-module-tile:hover::before, .bb24-fit-card:hover::before, .a24-plan:hover::before, .a24-run-item:hover::before,
.own-bento-item.b2:hover::before, .own-bento-item.b3:hover::before, .own-bento-item.b5:hover::before{ opacity:1 !important; width:auto !important; height:auto !important; }
.sch-flow-item:hover, .sch-cap-card:hover, .own-bento-item:hover, .own-module-tile:hover, .bb24-fit-card:hover, .a24-plan:hover, .a24-run-item:hover, .own-how-item:hover{ transform:none !important; translate:0 -7px; box-shadow:0 30px 60px -24px rgba(255,94,138,.55) !important; }
.own-report-list li:hover{ transform:none !important; translate:6px 0; box-shadow:0 20px 44px -20px rgba(255,94,138,.5) !important; }
.a24-plan.featured:hover{ transform:none !important; translate:0 -14px; }
.sch-cap-card:hover .sch-cap-icon, .own-module-tile:hover .own-module-icon, .own-bento-item:hover .own-bento-icon, .a24-run-item:hover .a24-run-icon, .own-how-item:hover .own-how-icon, .own-report-list li:hover i{ transform:scale(1.12) rotate(-6deg) !important; }
/* keep text colours exactly as at rest (single-inverted cards would otherwise turn black in dark mode) */
.sch-cap-card:hover h4{ color:#1b1f2a !important; } .sch-cap-card:hover p{ color:#6c757d !important; } .sch-cap-card:hover .sch-cap-tags span{ color:var(--accent) !important; background:color-mix(in srgb,var(--accent) 10%,#fff) !important; }
.sch-cap-card:hover .sch-cap-icon{ background:color-mix(in srgb,var(--accent) 14%,#fff) !important; color:var(--accent) !important; }
.own-bento-item.b2:hover p, .own-bento-item.b3:hover p, .own-bento-item.b5:hover p{ color:inherit !important; }
.own-bento-item.b2:hover .own-bento-icon, .own-bento-item.b3:hover .own-bento-icon, .own-bento-item.b5:hover .own-bento-icon{ background:#fdf2e8 !important; color:var(--orange) !important; }
.own-report-list li:hover{ color:inherit !important; } .own-report-list li:hover small{ color:#6c757d !important; }
.own-module-tile:hover h6{ color:var(--dark) !important; } .own-module-tile:hover p{ color:#6c757d !important; }
.a24-plan:hover h3{ color:#1b1f2a !important; } .a24-plan:hover p.a24-plan-desc{ color:#8a8f98 !important; } .a24-plan:hover .a24-plan-features li{ color:#1b1f2a !important; } .a24-plan:hover .a24-plan-features li i, .a24-plan:hover .a24-plan-price, .a24-plan:hover .a24-plan-features li.a24-plan-cat{ color:var(--tier) !important; }
.a24-plan:hover .a24-plan-badge{ color:var(--tier) !important; background:color-mix(in srgb,var(--tier) 12%,#fff) !important; } .a24-plan:hover .a24-plan-cta{ color:var(--tier) !important; border-color:var(--tier) !important; }
.a24-plan.featured .a24-plan-cta, .a24-plan.featured:hover .a24-plan-cta{ color:#fff !important; border-color:#fff !important; }

/* ===== LIGHT THEME ONLY (scoped with html:not(.dark-mode); dark theme untouched) =====
   The four former dark bands now sit on the light background, so their white text and dark cards are restyled. */
html:not(.dark-mode) .a24-run .section-title, html:not(.dark-mode) .a24-run-lead, html:not(.dark-mode) .own-how .section-title, html:not(.dark-mode) .sch-roles .section-title, html:not(.dark-mode) .bb24-fit .section-title{ color:#1b1f2a !important; }
html:not(.dark-mode) .a24-run-lead span{ color:#f5821f; }
html:not(.dark-mode) .a24-run-sub, html:not(.dark-mode) .a24-run .section-subtitle, html:not(.dark-mode) .own-how .section-subtitle, html:not(.dark-mode) .sch-roles .section-subtitle, html:not(.dark-mode) .bb24-fit .section-subtitle{ color:#555d72 !important; }
html:not(.dark-mode) .a24-run-item, html:not(.dark-mode) .own-how-item, html:not(.dark-mode) .sch-flow-item, html:not(.dark-mode) .bb24-fit-card{ background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(255,255,255,.72)) !important; border:1px solid rgba(27,31,42,.1) !important; box-shadow:0 22px 50px -28px rgba(120,70,40,.45); backdrop-filter:blur(8px); }
html:not(.dark-mode) .a24-run-item h5, html:not(.dark-mode) .own-how-item h5, html:not(.dark-mode) .sch-flow-item h5, html:not(.dark-mode) .bb24-fit-card h4{ color:#1b1f2a !important; }
html:not(.dark-mode) .a24-run-item p, html:not(.dark-mode) .own-how-item p, html:not(.dark-mode) .sch-flow-item p, html:not(.dark-mode) .bb24-fit-card p{ color:#555d72 !important; }
html:not(.dark-mode) .own-how-item .own-how-step{ color:#f5821f; }
/* stats strip text on Scheme App */
html:not(.dark-mode) .stats-section .stat-number{ color:#1b1f2a !important; -webkit-text-fill-color:#1b1f2a; }
html:not(.dark-mode) .stats-section .stat-label{ color:#555d72 !important; }
/* WhatsApp icon stays white in light mode */
html:not(.dark-mode) .whatsapp-float i{ color:#fff; }