/* GxRadar interaction layer (fx.css)
 * Adapted components: React Bits (reactbits.dev, MIT + Commons Clause) — SpotlightCard, StarBorder, GradualBlur, AnimatedList, ShinyText;
 * Uiverse.io (MIT) — check-draw checkbox (LeonKohli), radar loader (mrhyddenn), hamburger morph (JulanDeAlb);
 * Mobbin pattern references — bottom tab bar and bottom-sheet filters. */

/* ---------- Hero background (Unicorn Studio-style fluted gradient) ---------- */
.front.fx-has-bg { position: relative; isolation: isolate; }
.fx-hero-bg { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; overflow: hidden; }
.fx-hero-bg.on, .fx-hero-bg.fx-static, .fx-hero-bg[data-us-project] { opacity: 1; }
.fx-hero-bg canvas { width: 100%; height: 100%; display: block; }
.fx-hero-bg.fx-static { background: radial-gradient(60% 80% at 85% 20%, rgba(156, 201, 189, .55), transparent 70%), radial-gradient(40% 60% at 60% 90%, rgba(11, 107, 95, .12), transparent 70%); }
.front.fx-has-bg .panel, .front.fx-has-bg .hero-chart, .front.fx-has-bg .front-side > * { background-color: color-mix(in srgb, var(--card, #fff) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ---------- SpotlightCard (React Bits) ---------- */
.fx-spot { background-image: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), rgba(11, 107, 95, .075), transparent 62%); }
.fx-spot:hover { border-color: color-mix(in srgb, var(--brand, #0B6B5F) 45%, var(--rule, #d9d3c4)); }
.desk-tile.fx-spot { background-image: radial-gradient(220px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--dc, #0B6B5F) 14%, transparent), transparent 62%); }

/* ---------- Magnet + Tilt ---------- */
.btn.primary, .search-btn { transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .2s, color .2s; will-change: transform; }
.fx-tilt { transition: transform .45s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; will-change: transform; }

/* ---------- StarBorder (React Bits) on search focus ---------- */
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hub-search, .sx-box, .ph-search { position: relative; }
.hub-search::after, .ph-search::after { content: ""; position: absolute; inset: -2px; padding: 2px; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: conic-gradient(from var(--fx-a), transparent 0 62%, var(--brand, #0B6B5F) 78%, #9CC9BD 86%, transparent 94%);
  -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); }
.hub-search:focus-within::after, .ph-search:focus-within::after { opacity: 1; animation: fxSpin 3.2s linear infinite; }
@keyframes fxSpin { to { --fx-a: 360deg; } }

/* ---------- ShinyText (React Bits) on the live indicator ---------- */
.topbar .live > span:last-child { background: linear-gradient(110deg, currentColor 42%, var(--brand, #0B6B5F) 50%, currentColor 58%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: fxShine 5s linear infinite; }
@keyframes fxShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---------- Check-draw checkbox (Uiverse, LeonKohli) ---------- */
.check input[type="checkbox"], .hf-opt input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border: 2px solid var(--ink, #16191F); background: var(--card, #fff); display: grid; place-items: center; cursor: pointer; transition: background-color .25s, border-color .25s; position: relative; }
.check input[type="checkbox"]::after { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-1px) rotate(-45deg); clip-path: inset(0 100% 0 0); transition: clip-path .35s cubic-bezier(.45, .05, .55, .95) .05s; }
.check input[type="checkbox"]:checked { background: var(--brand, #0B6B5F); border-color: var(--brand, #0B6B5F); }
.check input[type="checkbox"]:checked::after { clip-path: inset(0 0 0 0); }
.check input[type="checkbox"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand, #0B6B5F) 35%, transparent); outline-offset: 2px; }
.check:has(input:checked) { border-color: var(--brand, #0B6B5F); box-shadow: inset 4px 0 0 var(--brand, #0B6B5F); transition: box-shadow .3s, border-color .3s; }

/* ---------- Radar loader (Uiverse, mrhyddenn) ---------- */
.loader { display: flex; align-items: center; gap: 14px; }
.loader::before { content: ""; flex: 0 0 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule, #d9d3c4);
  background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--brand, #0B6B5F) 55%, transparent) 100%), radial-gradient(circle, transparent 0 7px, var(--rule, #d9d3c4) 7px 8px, transparent 8px 13px, var(--rule, #d9d3c4) 13px 14px, transparent 14px);
  animation: fxRadar 1.4s linear infinite; }
@keyframes fxRadar { to { transform: rotate(360deg); } }

/* ---------- Hamburger morph (Uiverse, JulanDeAlb) ---------- */
.fx-burger-btn { gap: 6px; align-items: center; }
.fx-burger { width: 22px; height: 22px; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.fx-burger .l { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; transition: stroke-dasharray .6s cubic-bezier(.4, 0, .2, 1), stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1); }
.fx-burger .tb { stroke-dasharray: 12 63; }
.fx-burger-btn.is-open .fx-burger { transform: rotate(-45deg); }
.fx-burger-btn.is-open .fx-burger .tb { stroke-dasharray: 20 300; stroke-dashoffset: -32.42; }

/* ---------- GradualBlur (React Bits) ---------- */
.fx-blur { position: sticky; bottom: 0; left: 0; right: 0; height: 56px; margin-top: -56px; pointer-events: none; z-index: 2; transition: opacity .3s; }
.fx-blur.off { opacity: 0; }
.fx-blur i { position: absolute; inset: 0; }
.fx-blur i:nth-child(1) { backdrop-filter: blur(.5px); -webkit-backdrop-filter: blur(.5px); mask: linear-gradient(to bottom, transparent 0%, #000 25%, #000 50%, transparent 75%); }
.fx-blur i:nth-child(2) { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); mask: linear-gradient(to bottom, transparent 25%, #000 50%, #000 75%, transparent 100%); }
.fx-blur i:nth-child(3) { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); mask: linear-gradient(to bottom, transparent 50%, #000 75%, #000 100%); }
.fx-blur i:nth-child(4) { background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--paper, #F7F4EC) 85%, transparent)); }
.ph-list { position: relative; }

/* ---------- AnimatedList (React Bits) ---------- */
.fx-li { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .5s cubic-bezier(.2, .8, .2, 1) calc(var(--fx-i, 0) * 45ms), transform .5s cubic-bezier(.2, .8, .2, 1) calc(var(--fx-i, 0) * 45ms); }
.fx-li.fx-in { opacity: 1; transform: none; }
.feed-item { transition: background-color .2s, box-shadow .25s; }
.feed-item:hover { background-color: color-mix(in srgb, var(--brand, #0B6B5F) 4%, transparent); box-shadow: inset 3px 0 0 var(--brand, #0B6B5F); }

/* ---------- Mobile bottom tab bar (Mobbin pattern) ---------- */
.fx-tabbar { display: none; }
@media (max-width: 760px) {
  .fx-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--paper, #F7F4EC) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--rule, #d9d3c4); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
  .fx-tabbar.hide { transform: translateY(110%); }
  .fx-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 48px; font: 600 11.5px var(--f-sans); color: var(--muted, #5E6573); text-decoration: none; background: none; border: 0; cursor: pointer; position: relative; }
  .fx-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .fx-tab.on { color: var(--brand, #0B6B5F); }
  .fx-tab.on::before { content: ""; position: absolute; top: -6px; width: 26px; height: 3px; background: var(--brand, #0B6B5F); border-radius: 0 0 3px 3px; }
  .fx-has-tabbar body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .fx-menu-open .fx-tabbar, .fx-sheet-open .fx-tabbar, html:has(.gate:not([hidden])) .fx-tabbar, html:has(.sx:not([hidden])) .fx-tabbar { transform: translateY(110%); }

  /* Bottom-sheet filters (Mobbin pattern) */
  .hub-filters.open { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; z-index: 80; max-height: 82vh; overflow: auto; background: var(--paper, #F7F4EC);
    border-top: 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -18px 50px rgba(22, 25, 31, .22); animation: fxSheet .38s cubic-bezier(.2, .8, .2, 1); }
  .fx-sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--rule, #d9d3c4); margin: 4px auto 10px; }
  .fx-sheet-done { display: flex; width: 100%; justify-content: center; margin-top: 16px; position: sticky; bottom: 0; }
  .fx-sheet-bd { position: fixed; inset: 0; z-index: 79; background: rgba(22, 25, 31, .38); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .fx-sheet-bd.on { opacity: 1; pointer-events: auto; }
  .fx-sheet-open body { overflow: hidden; }
  @keyframes fxSheet { from { transform: translateY(100%); } }
}
@media (min-width: 761px) { .fx-sheet-grip, .fx-sheet-done, .fx-sheet-bd { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx-li { opacity: 1; transform: none; transition: none; }
  .topbar .live > span:last-child { animation: none; -webkit-text-fill-color: currentColor; background: none; }
  .hub-search:focus-within::after, .ph-search:focus-within::after { animation: none; }
  .loader::before { animation-duration: 4s; }
}

/* ---------- Price explainer box and cost breakdown ---------- */
.pricebox { margin: 22px 0; padding: 16px 18px 6px; border: 1px solid var(--rule, #d9d3c4); border-left: 4px solid var(--brand, #0B6B5F); background: color-mix(in srgb, var(--brand, #0B6B5F) 4%, var(--card, #fff)); }
.pricebox h3 { margin: 0 0 8px; font-size: 1rem; }
.pricebox-list { margin: 0; padding-left: 18px; font: 400 14.5px/1.55 var(--f-sans); }
.pricebox-list li { margin-bottom: 10px; }
.prose .pricebox-list { font-size: 15px; }
table.breakdown td { padding: 9px 12px; border-bottom: 1px solid var(--rule, #d9d3c4); }
table.breakdown tr.total td { border-top: 2px solid var(--ink, #16191F); background: color-mix(in srgb, var(--brand, #0B6B5F) 6%, transparent); }
@media (max-width: 760px) { .ptable .c-est { order: 2; text-align: right; font-weight: 600; flex-basis: 100%; } .pricebox { padding: 14px 14px 4px; } }

/* ---------- Contact form ---------- */
.contact-form { display: grid; gap: 8px; max-width: 640px; margin: 8px 0 28px; }
.contact-form label { font: 600 14px var(--f-sans); margin-top: 8px; }
.contact-form textarea.input { resize: vertical; min-height: 140px; font: 400 15px/1.5 var(--f-sans); }
.contact-form .btn { justify-self: start; margin-top: 6px; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }