/* Home page: deep black with a teal-to-amber spectrum, glass and watermarks. Dark by default for visitors; follows Light / Dark / Auto once a theme is chosen. */
.hm { --bg:#04050d; --ink:#eef6f6; --mute:#a3afbd; --line:rgba(120,150,255,.10); --edge:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.055); --chip:rgba(14,20,34,.7); --shine:rgba(255,255,255,.14);
  --gold:#ffb33d; --gold2:#ff6a2b; --goldglow:rgba(255,130,40,.5); --goldsoft:rgba(255,150,50,.14);
  --cyan:#2ee6c0; --cyansoft:rgba(46,230,192,.14); --orb1:#0e8f86; --orb2:#c8321e; --onGold:#12090a; --wm:rgba(255,255,255,.05);
  position:relative; overflow:hidden; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; line-height:1.55; }
.hm.hm-light { --bg:#f5f4f0; --ink:#0d1620; --mute:#4a5663; --line:rgba(16,26,58,.07); --edge:rgba(13,22,32,.14);
  --glass:rgba(255,255,255,.62); --chip:rgba(255,255,255,.9); --shine:rgba(255,150,50,.25);
  --gold:#8f5206; --gold2:#e0792a; --goldglow:rgba(224,121,42,.45); --goldsoft:rgba(224,121,42,.14);
  --cyan:#077364; --cyansoft:rgba(11,138,120,.12); --orb1:#7fe0cf; --orb2:#ffb27a; --wm:rgba(13,22,32,.05); }
@media (prefers-color-scheme: light) {
  .hm.hm-auto { --bg:#f5f4f0; --ink:#0d1620; --mute:#4a5663; --line:rgba(16,26,58,.07); --edge:rgba(13,22,32,.14);
    --glass:rgba(255,255,255,.62); --chip:rgba(255,255,255,.9); --shine:rgba(255,150,50,.25);
    --gold:#8f5206; --gold2:#e0792a; --goldglow:rgba(224,121,42,.45); --goldsoft:rgba(224,121,42,.14);
    --cyan:#077364; --cyansoft:rgba(11,138,120,.12); --orb1:#7fe0cf; --orb2:#ffb27a; --wm:rgba(13,22,32,.05); }
}
body { background:#04050d; }
html[data-theme="light"] body.hm-body-light, body.hm-body-light { background:#f5f4f0; }
.hm *, .hm *::before, .hm *::after { box-sizing:border-box; }
.hm a { text-decoration:none; color:inherit; }
.hm h1, .hm h2, .hm h3 { margin:0; }
.hm-wrap { position:relative; max-width:1560px; margin:0 auto; padding:0 56px; }

/* backdrop: spectrum horizon of vertical glass ribs, aurora, grain, watermarks */
.hm-grid { display:none; }
.hm-spectrum { position:absolute; left:0; right:0; top:150px; height:600px; pointer-events:none; opacity:.92;
  background:none;
  filter:blur(16px); animation:hmspec 14s ease-in-out infinite alternate; }
.hm-spectrum::after { content:none; }
@keyframes hmspec { from { transform:translateX(-2%) scaleY(1); } to { transform:translateX(2%) scaleY(1.08); } }
.hm-orb { position:absolute; border-radius:50%; filter:blur(90px); opacity:.35; pointer-events:none; animation:hmorb 12s ease-in-out infinite alternate; }
.hm-orb.a { width:520px; height:520px; left:-160px; top:-120px; background:var(--orb1); }
.hm-orb.b { width:460px; height:460px; right:-140px; top:900px; background:var(--orb2); animation-delay:-5s; }
@keyframes hmorb { from { transform:translate(0,0) scale(1); } to { transform:translate(40px,-30px) scale(1.15); } }
.hm::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.hm > * { position:relative; z-index:1; }
.hm > .hm-spectrum, .hm > .hm-orb, .hm > .hm-grid, .hm > .hm-wm, .hm > .hm-statue { position:absolute; z-index:0; }
.hm-wm { display:none; left:0; right:0; text-align:center; font-weight:900; letter-spacing:.04em; line-height:.85; white-space:nowrap; overflow:hidden; pointer-events:none; user-select:none;
  color:transparent; -webkit-text-stroke:1.5px var(--wm); }
.hm-wm.w1 { top:70px; font-size:clamp(120px,22vw,330px); }
.hm-wm.w2 { top:1180px; font-size:clamp(100px,17vw,250px); -webkit-text-stroke-width:1px; }
.hm-wm.w3 { bottom:60px; font-size:clamp(90px,16vw,230px); }
.hm-wmsvg { display:none; position:absolute; right:-80px; top:2500px; width:520px; height:520px; opacity:.05; pointer-events:none; }

/* hero */
.hm-hero { position:relative; padding:104px 0 70px; }
.hm-hero .hm-wrap { display:flex; align-items:center; gap:40px; min-height:640px; }
.hm-copy { flex:1 1 520px; min-width:0; }
.hm-tag { backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:999px; border:1px solid var(--edge); background:var(--glass); font-size:14px; color:var(--gold); }
.hm-tag i { width:8px; height:8px; border-radius:50%; background:var(--gold); animation:hmpulse 3.2s ease-in-out infinite; }
@keyframes hmpulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
.hm h1 { margin:22px 0 0; font-size:64px; line-height:1.07; font-weight:700; letter-spacing:-1.6px; color:var(--ink); max-width:760px; }
.hm h1 em { font-style:normal; font-weight:700; background:linear-gradient(100deg,var(--cyan),#c9dc9a 50%,#f2b45a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hm-lead { margin:22px 0 0; font-size:19px; line-height:1.6; color:var(--mute); max-width:540px; }
.hm-cta { display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hm-btn { display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:8px; font-weight:700; font-size:16px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.hm-btn:hover { transform:translateY(-3px); }
.hm-p { background:linear-gradient(135deg,#f4fffd,#d9f7ef 55%,#ffe7c4); color:#07120f !important; box-shadow:0 10px 30px -8px var(--goldglow); }
.hm-p:hover { box-shadow:0 16px 40px -6px var(--goldglow); }
.hm-s { border:1px solid var(--edge); color:var(--ink) !important; background:var(--glass); }
.hm-s:hover { border-color:var(--gold); }
.hm-note { margin:16px 0 0; color:var(--mute); font-size:13.5px; }
.hm-stats { display:flex; gap:34px; margin-top:40px; flex-wrap:wrap; }
.hm-stats b { display:block; font-size:28px; font-weight:600; color:var(--gold); }
.hm-stats span { font-size:13px; color:var(--mute); }

/* soft statue watermark behind the hero */
.hm-statue { position:absolute; z-index:0; left:50%; top:60px; height:820px; width:auto; transform:translateX(-8%); color:var(--ink); opacity:.07; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%); mask-image:linear-gradient(180deg,#000 55%,transparent 98%); }
.hm.hm-light .hm-statue { opacity:.08; }
@media (max-width:1000px) { .hm-statue { left:50%; height:620px; transform:translateX(-50%); opacity:.06; } }

/* glass workspace panel (replaces the 3D scales) */
.hm-mock { position:relative; flex:1 1 560px; min-width:0; height:580px; }
.hm-mock::before { content:""; position:absolute; inset:8% 6% 6% 10%; border-radius:50%; background:radial-gradient(ellipse at 50% 50%, rgba(46,230,192,.16), transparent 68%); filter:blur(30px); pointer-events:none; }
.hm-gl { position:absolute; border-radius:20px; padding:20px 22px; border:1px solid rgba(255,255,255,.26); background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 55%,rgba(255,255,255,.06)); backdrop-filter:blur(8px) saturate(1.7) brightness(1.08); -webkit-backdrop-filter:blur(8px) saturate(1.7) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 36px rgba(255,255,255,.05), 0 18px 40px -24px rgba(0,0,0,.6); }
.hm-gl::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 32%); -webkit-mask:linear-gradient(#000,transparent 70%); mask:linear-gradient(#000,transparent 70%); }
.hm-gl small { display:block; color:var(--mute); font-size:12.5px; letter-spacing:.4px; margin-bottom:6px; }
.hm-gl b { display:block; font-size:30px; font-weight:700; color:var(--ink); }
.hm-gl .ok { color:var(--cyan); font-size:13px; font-weight:600; margin-top:6px; display:flex; gap:8px; align-items:center; }
.hm-gl .ok::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.hm-gl.g1 { z-index:1; left:4%; top:0; width:68%; animation:hmfloat 7s ease-in-out infinite; }
.hm-gl.g2 { right:0; top:37.5%; width:62%; animation:hmfloat 8s ease-in-out -2s infinite; }
.hm-gl.g3 { left:8%; bottom:0; width:66%; animation:hmfloat 9s ease-in-out -4s infinite; }
.hm-gl .docs { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hm-gl .docs li { display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:15px; color:var(--ink); padding-bottom:10px; border-bottom:1px solid var(--edge); }
.hm-gl .docs li:last-child { border-bottom:0; padding-bottom:0; }
.hm-gl .docs em { font-style:normal; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.hm-gl .docs em.r { color:var(--cyan); background:var(--cyansoft); }
.hm-gl .docs em.d { color:var(--gold); background:var(--goldsoft); }
.hm-gl .bar { height:8px; border-radius:6px; margin-top:10px; background:linear-gradient(90deg,var(--cyan),var(--gold) 70%,var(--gold2)); opacity:.85; }
.hm-gl .bar.s { width:62%; opacity:.45; }
.hm-gl .msg { display:flex; gap:10px; align-items:center; font-size:14px; color:var(--ink); }
.hm-gl .msg i { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--gold)); flex:none; }
.hm-gl .lock { display:flex; align-items:center; gap:10px; margin-top:12px; color:var(--mute); font-size:13px; }
.hm-gl .lock svg { width:18px; height:18px; stroke:var(--gold); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes hmfloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

/* the 3D globe (no longer used) */
.hm-stage { position:relative; flex:1 1 470px; min-width:0; height:600px; }
.hm-stage [data-lex3d-hint] { position:absolute; left:50%; bottom:6px; transform:translateX(-50%); display:flex; align-items:center; gap:10px; padding:9px 16px; border-radius:999px;
  border:1px solid var(--edge); background:var(--chip); color:var(--ink); font-size:14px; pointer-events:none; transition:opacity .6s; white-space:nowrap; z-index:2; }
.hm-stage [data-lex3d-hint] svg { animation:hmsway 2.4s ease-in-out infinite; stroke:var(--gold); }
@keyframes hmsway { 0%,100% { transform:translateX(-4px); } 50% { transform:translateX(4px); } }
.hm-stage .hm-fallback { position:absolute; inset:0; display:grid; place-items:center; }
.hm-stage .hm-fallback svg { width:min(80%,380px); height:auto; }
.hm-stage[data-lex3d="on"] .hm-fallback { display:none; }
.hm-stage canvas { position:relative; z-index:1; }

/* moving belt of glass chips */
.hm-belt { position:relative; padding:26px 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.hm-belt::before, .hm-belt::after { content:""; position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),var(--gold),transparent); opacity:.55; }
.hm-belt::before { top:0; } .hm-belt::after { bottom:0; }
.hm-track { display:flex; gap:16px; width:max-content; animation:hmmarq 40s linear infinite; }
.hm-belt:hover .hm-track { animation-play-state:paused; }
.hm-chipx { display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; border:1px solid var(--edge); background:var(--glass); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14); color:var(--ink); font-weight:600; font-size:15px; white-space:nowrap; }
.hm-chipx svg { width:20px; height:20px; fill:none; stroke:var(--cyan); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hm-chipx:nth-child(even) svg { stroke:var(--gold); }
@keyframes hmmarq { to { transform:translateX(calc(-50% - 8px)); } }

/* sections */
.hm-sec { position:relative; padding:100px 0 30px; }
.hm-head { text-align:center; max-width:760px; margin:0 auto 54px; }
.hm-eyebrow { color:var(--gold); font-weight:700; letter-spacing:3px; font-size:13px; text-transform:uppercase; }
.hm h2 { margin:14px 0 0; font-size:42px; line-height:1.15; font-weight:600; letter-spacing:-.5px; color:var(--ink); }
.hm-left { text-align:left !important; }
.hm-grid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.hm-card { backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 20px 50px -30px rgba(0,0,0,.6); position:relative; border-radius:10px; padding:30px 26px; background:var(--glass); border:1px solid var(--edge); transition:transform .3s, border-color .3s, box-shadow .3s; overflow:hidden; }
.hm-card:hover { transform:translateY(-8px); border-color:var(--gold); box-shadow:0 24px 50px -24px var(--goldglow); }
.hm-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 30%,var(--shine) 50%,transparent 70%); transform:translateX(-120%); transition:transform .9s; }
.hm-card:hover::before { transform:translateX(120%); }
.hm-ico { width:52px; height:52px; border-radius:8px; display:grid; place-items:center; margin-bottom:20px; background:var(--goldsoft); }
.hm-ico.c { background:var(--cyansoft); }
.hm-ico svg { width:28px; height:28px; fill:none; stroke:var(--gold); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hm-ico.c svg { stroke:var(--cyan); }
.hm-card h3 { margin:0 0 10px; font-size:20px; font-weight:700; color:var(--ink); }
.hm-card p { margin:0; font-size:15px; line-height:1.6; color:var(--mute); }

/* steps */
.hm-steps { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.hm-steps::before { content:""; position:absolute; left:6%; right:6%; top:30px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),var(--cyan),transparent); opacity:.5; }
.hm-step { position:relative; text-align:center; padding:0 10px; }
.hm-num { width:62px; height:62px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center; font-weight:800; font-size:22px; background:var(--bg); border:2px solid var(--gold); color:var(--gold); box-shadow:0 0 30px -4px var(--goldglow); animation:hmpulse 3.2s ease-in-out infinite; }
.hm-step:nth-child(2) .hm-num { animation-delay:-.8s; }
.hm-step:nth-child(3) .hm-num { animation-delay:-1.6s; border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 30px -4px var(--cyansoft); }
.hm-step:nth-child(4) .hm-num { animation-delay:-2.4s; border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 30px -4px var(--cyansoft); }
.hm-step h3 { margin:0 0 8px; font-size:19px; color:var(--ink); }
.hm-step p { margin:0; color:var(--mute); font-size:15px; }

/* security */
.hm-radar { position:relative; border-radius:10px; border:0; background:transparent; height:430px; overflow:hidden; display:grid; place-items:center; }
.hm-radar svg { width:340px; max-width:90%; height:auto; }
.hm-sweep { transform-origin:170px 170px; animation:hmspin 6s linear infinite; }
@keyframes hmspin { to { transform:rotate(360deg); } }

/* security: text on the left, one tidy list on the right */
.hm-sec2 { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:64px; align-items:center; }
.hm-sec2-l h2 { font-size:40px; }
.hm-sec2-l p { margin:18px 0 0; color:var(--mute); font-size:17px; line-height:1.65; max-width:440px; }
.hm-sec2-list { list-style:none; margin:0; padding:6px 28px; border-radius:18px; border:1px solid var(--edge); background:var(--glass); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 24px 50px -34px rgba(0,0,0,.7); }
.hm-sec2-list li { display:flex; align-items:center; gap:18px; padding:18px 0; border-bottom:1px solid var(--edge); }
.hm-sec2-list li:last-child { border-bottom:0; }
.hm-sec2-list i { flex:none; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--cyansoft); }
.hm-sec2-list li:nth-child(even) i { background:var(--goldsoft); }
.hm-sec2-list svg { width:22px; height:22px; fill:none; stroke:var(--cyan); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hm-sec2-list li:nth-child(even) svg { stroke:var(--gold); }
.hm-sec2-list b { display:block; font-size:16.5px; font-weight:600; color:var(--ink); }
.hm-sec2-list span { display:block; margin-top:2px; font-size:14.5px; color:var(--mute); }

/* pricing band, FAQ, final */
.hm-band { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border-radius:18px; padding:34px 40px; border:1px solid var(--gold); background:linear-gradient(120deg,var(--goldsoft),var(--cyansoft)); }
.hm-big { font-size:32px; font-weight:800; line-height:1.2; color:var(--ink); }
.hm-band p { margin:10px 0 0; color:var(--mute); font-size:16px; }
.hm-faq { max-width:900px; margin:0 auto; border-radius:18px; border:1px solid var(--edge); background:var(--glass); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); overflow:hidden; }
.hm-q { padding:0 28px; border-bottom:1px solid var(--edge); }
.hm-q:last-child { border-bottom:0; }
.hm-q summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; font-size:17px; font-weight:600; color:var(--ink); }
.hm-q summary::-webkit-details-marker { display:none; }
.hm-q summary::after { content:"+"; flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--goldsoft); color:var(--gold); font-size:18px; font-weight:500; transition:transform .25s; }
.hm-q[open] summary::after { transform:rotate(45deg); }
.hm-q p { margin:0 0 20px; color:var(--mute); font-size:15.5px; line-height:1.65; max-width:720px; }
.hm-final { position:relative; text-align:center; padding:100px 20px 80px; }
.hm-final h2 { font-size:46px; }
.hm-final p { margin:16px 0 30px; color:var(--mute); font-size:18px; }
.hm-contact { margin-top:44px; display:flex; gap:10px 22px; justify-content:center; flex-wrap:wrap; align-items:center; color:var(--mute); font-size:14.5px; }
.hm-contact a { color:var(--gold) !important; font-weight:600; }
.hm-contact a:hover { text-decoration:underline; }

/* contact and company footer */
.hm-foot { position:relative; margin-top:30px; padding:70px 0 26px; background:transparent; overflow:hidden; }
.hm-foot::before { content:""; position:absolute; left:0; right:0; top:10px; bottom:0; pointer-events:none; opacity:.85; filter:blur(30px);
  background:radial-gradient(ellipse 34% 55% at 14% 45%, rgba(46,230,192,.32), transparent 70%), radial-gradient(ellipse 36% 60% at 90% 55%, rgba(200,50,30,.34), transparent 72%); }
.hm-foot .hm-wrap { z-index:1; }
.hm-fgrid { display:grid; grid-template-columns:1.5fr 1fr 1.2fr 1.2fr; gap:0; border-radius:20px; border:1px solid var(--edge); background:var(--glass); backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 60px -34px rgba(0,0,0,.7); overflow:hidden; }
.hm-fcol { display:flex; flex-direction:column; gap:10px; font-size:15px; color:var(--mute); min-width:0; padding:30px 32px 32px; }
.hm-fcol h4 { margin:0 0 6px; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--cyan); font-weight:700; }
.hm-fcol a { transition:color .2s, transform .2s; }
.hm-fcol a:hover { color:var(--ink); transform:translateX(3px); }
.hm-fcol strong { color:var(--ink); font-weight:600; }
.hm-fcol span { line-height:1.55; }
.hm-flogo { height:40px; width:auto; align-self:flex-start; }
.hm-fbrand p { margin:6px 0 0; max-width:340px; line-height:1.6; }
.hm-fbar { position:relative; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:40px; padding-top:20px; border-top:1px solid var(--edge); font-size:13.5px; color:var(--mute); }

@media (max-width:1000px) {
  .hm-fgrid { grid-template-columns:1fr 1fr; }
  .hm-hero .hm-wrap { flex-direction:column; min-height:0; }
  .hm h1 { font-size:42px; }
  .hm-mock { width:100%; flex:none; height:420px; }
  .hm-grid4, .hm-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hm-steps::before { display:none; }
    .hm-sec2 { grid-template-columns:1fr; gap:30px; }
  .hm-sec2-l h2 { font-size:34px; }
  .hm h2 { font-size:34px; }
}
@media (max-width:560px) {
  .hm-fgrid { grid-template-columns:1fr; }
  .hm-wrap { padding:0 16px; }
  .hm-grid4, .hm-steps { grid-template-columns:1fr; }
  .hm h1 { font-size:36px; }
  .hm-mock { height:380px; }
  .hm-band { padding:30px 22px; }
  .hm-final h2 { font-size:34px; }
}
@media (prefers-reduced-motion: reduce) { .hm *, .hm *::before, .hm *::after { animation:none !important; transition:none !important; } }
.hm-dark .hm-flogo { filter:brightness(2.1) saturate(1.2); }
@media (prefers-color-scheme: dark) { .hm-auto .hm-flogo { filter:brightness(2.1) saturate(1.2); } }

/* small icons */
.hm-i { width:18px; height:18px; flex:none; fill:none; stroke:var(--cyan); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hm-fcol a, .hm-fcol .hm-row { display:flex; align-items:flex-start; gap:10px; }
.hm-fcol .hm-row .hm-i, .hm-fcol a .hm-i { margin-top:3px; }
.hm-fcol a[href^="#"] .hm-i, .hm-fcol a[href$=".php"] .hm-i { width:14px; height:14px; margin-top:5px; stroke:var(--mute); transition:transform .2s, stroke .2s; }
.hm-fcol a[href^="#"]:hover .hm-i, .hm-fcol a[href$=".php"]:hover .hm-i { stroke:var(--cyan); }
.hm-fcol .hm-row > span { line-height:1.55; }
.hm-bandic { flex:none; width:60px; height:60px; border-radius:16px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--edge); }
.hm-bandic .hm-i { width:30px; height:30px; stroke:var(--gold); }
.hm-band { gap:22px; }

.hm-fcol h4 { display:flex; align-items:center; gap:10px; }
.hm-fcol h4 .hm-i { width:18px; height:18px; }
.hm-trust { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.hm-trust li { display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--ink); }
.hm-trust .hm-i { width:30px; height:30px; padding:6px; border-radius:9px; background:var(--cyansoft); box-sizing:border-box; }

/* motion: reveal, mouse light, live panels, back to top */
.hm-js .hm-rv { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.hm-js .hm-rv.in { opacity:1; transform:none; }
.hm-card::after, .hm-sec2-list::after, .hm-fgrid::after, .hm-band::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 60%); }
.hm-card:hover::after, .hm-sec2-list:hover::after, .hm-fgrid:hover::after, .hm-band:hover::after { opacity:1; }
.hm-sec2-list, .hm-fgrid, .hm-band { position:relative; }
.hm-gl .docs em { transition:background .3s, color .3s; }
.hm-pop { animation:hmpop .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes hmpop { 0% { transform:scale(.85); opacity:.4; } 100% { transform:none; opacity:1; } }
.hm-gl .msg span { transition:opacity .3s; }
.hm-gl .dots { display:flex; gap:6px; margin-top:12px; }
.hm-gl .dots i { width:26px; height:4px; border-radius:4px; background:var(--edge); transition:background .4s; }
.hm-gl .dots i.on { background:var(--cyan); }
.hm-top { position:fixed; right:22px; bottom:22px; z-index:50; width:46px; height:46px; border-radius:50%; border:1px solid var(--edge); cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.08); backdrop-filter:blur(14px) saturate(1.5); -webkit-backdrop-filter:blur(14px) saturate(1.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 14px 30px -14px rgba(0,0,0,.7);
  opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .3s, transform .3s; }
.hm-top.show { opacity:1; transform:none; pointer-events:auto; }
.hm-top svg { width:20px; height:20px; fill:none; stroke:#eef6f6; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.hm-top:hover { border-color:var(--cyan); }
.hm-stats b span { font-size:inherit; color:inherit; display:inline; }

/* team access panel */
.hm-gl .team { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
.hm-gl .team li { display:flex; align-items:center; gap:14px; color:var(--ink); font-size:15px; }
.hm-gl .team .av { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:700; color:#07120f; background:linear-gradient(135deg,var(--cyan),#b8f5e6); }
.hm-gl .team li:nth-child(2) .av { background:linear-gradient(135deg,#f5bd5c,#ffe2a8); }
.hm-gl .team li:nth-child(3) .av { background:linear-gradient(135deg,#9fb4ff,#d8e0ff); }
.hm-gl .team span { flex:1; min-width:0; line-height:1.25; }
.hm-gl .team span small { display:block; margin:2px 0 0; font-size:12.5px; letter-spacing:0; color:var(--mute); }
.hm-gl .sw { flex:none; position:relative; width:42px; height:24px; border-radius:999px; background:var(--edge); transition:background .3s; }
.hm-gl .sw::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .3s cubic-bezier(.3,1.3,.5,1); }
.hm-gl .sw.on { background:var(--cyan); }
.hm-gl .sw.on::after { transform:translateX(18px); }

/* drop-down menus inside the panels */
.hm-gl .hd { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hm-gl .hd small { margin:0; }
.hm-gl .dd { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 12px; border-radius:999px; border:1px solid var(--edge); background:rgba(255,255,255,.06); color:var(--ink); font:600 12.5px/1 inherit; font-family:inherit; cursor:pointer; transition:border-color .2s, background .2s; }
.hm-gl .dd svg { width:14px; height:14px; fill:none; stroke:var(--cyan); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s; }
.hm-gl .dd.open { border-color:var(--cyan); background:rgba(46,230,192,.1); }
.hm-gl .dd.open svg { transform:rotate(180deg); }
.hm-gl .menu { position:absolute; z-index:5; top:52px; right:16px; min-width:200px; padding:6px; border-radius:14px; border:1px solid rgba(255,255,255,.22);
  background:rgba(12,18,30,.96); backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6); box-shadow:0 24px 50px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0; transform:translateY(-8px) scale(.97); transform-origin:top right; pointer-events:none; transition:opacity .22s, transform .22s; }
.hm-gl .menu.open { opacity:1; transform:none; pointer-events:auto; }
.hm-gl .menu ul { list-style:none; margin:0; padding:0; }
.hm-gl .menu li { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:9px; font-size:14px; color:var(--ink); cursor:pointer; transition:background .2s; }
.hm-gl .menu li.hot { background:rgba(46,230,192,.14); }
.hm-gl .ck { flex:none; width:16px; height:16px; border-radius:5px; border:1.5px solid rgba(255,255,255,.4); position:relative; transition:background .2s, border-color .2s; }
.hm-gl .ck.on { background:var(--cyan); border-color:var(--cyan); }
.hm-gl .ck.on::after { content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #07120f; border-width:0 2px 2px 0; transform:rotate(40deg); }
.hm-gl.g2 { z-index:1; } .hm-gl.g1 { z-index:3; } .hm-gl.g3 { z-index:2; }

/* one workspace menu box */
.hm-mock { display:flex; align-items:center; justify-content:center; }
.hm-wk { position:relative; width:min(100%,560px); border-radius:22px; padding:18px 18px 14px; border:1px solid rgba(255,255,255,.26);
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 55%,rgba(255,255,255,.06)); backdrop-filter:blur(10px) saturate(1.7); -webkit-backdrop-filter:blur(10px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 40px rgba(255,255,255,.04), 0 30px 60px -30px rgba(0,0,0,.7); animation:hmfloat 8s ease-in-out infinite; }
.hm-wk-top { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
.hm-wk-sel { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px; border:1px solid var(--cyan); background:rgba(46,230,192,.1); color:var(--ink); font-size:14px; font-weight:600; }
.hm-wk-sel em { font-style:normal; }
.hm-wk-sel svg { width:17px; height:17px; fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hm-wk-q { flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px; border:1px solid var(--edge); background:rgba(255,255,255,.04); color:var(--mute); font-size:13.5px; white-space:nowrap; overflow:hidden; }
.hm-wk-q svg { flex:none; width:16px; height:16px; fill:none; stroke:var(--mute); stroke-width:2; stroke-linecap:round; }
.hm-wk-list { list-style:none; margin:0; padding:6px; border-radius:16px; background:rgba(8,12,22,.55); border:1px solid var(--edge); display:flex; flex-direction:column; gap:2px; }
.hm-wk-list li { display:flex; align-items:center; gap:14px; padding:11px 12px; border-radius:11px; cursor:default; transition:background .25s; }
.hm-wk-list li.hot { background:rgba(46,230,192,.13); }
.hm-wk-list i { flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--cyansoft); transition:background .25s; }
.hm-wk-list li:nth-child(even) i { background:var(--goldsoft); }
.hm-wk-list li.hot i { background:var(--cyan); }
.hm-wk-list li.hot svg { stroke:#07120f; }
.hm-wk-list svg { width:20px; height:20px; fill:none; stroke:var(--cyan); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s; }
.hm-wk-list li:nth-child(even) svg { stroke:var(--gold); }
.hm-wk-list span { display:block; min-width:0; }
.hm-wk-list b { display:block; font-size:15.5px; font-weight:600; color:var(--ink); }
.hm-wk-list small { display:block; margin-top:1px; font-size:13px; color:var(--mute); }
@media (max-width:560px) { .hm-wk-q { display:none; } }
.hm-wk-list li.hot svg, .hm-wk-list li.hot:nth-child(even) svg { stroke:#07120f; }
.hm-wk-list li.hot i, .hm-wk-list li.hot:nth-child(even) i { background:var(--cyan); }

/* group switcher inside the workspace box */
.hm-wk-top { position:relative; }
.hm-wk-sel { cursor:pointer; font-family:inherit; }
.hm-wk-sel svg:last-child { transition:transform .25s; }
.hm-wk-sel.open svg:last-child { transform:rotate(180deg); }
.hm-wk-menu { position:absolute; z-index:6; left:0; top:calc(100% + 8px); min-width:230px; margin:0; padding:6px; list-style:none; border-radius:14px; border:1px solid rgba(255,255,255,.24);
  background:rgba(12,18,30,.96); box-shadow:0 24px 50px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.18);
  opacity:0; transform:translateY(-8px) scale(.97); transform-origin:top left; pointer-events:none; transition:opacity .22s, transform .22s; }
.hm-wk-menu.open { opacity:1; transform:none; pointer-events:auto; }
.hm-wk-menu li { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; font-size:14.5px; color:var(--ink); cursor:pointer; transition:background .2s; }
.hm-wk-menu li.hot, .hm-wk-menu li:hover { background:rgba(46,230,192,.14); }
.hm-wk-menu li.cur { font-weight:700; }
.hm-wk-menu svg { width:18px; height:18px; flex:none; fill:none; stroke:var(--cyan); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.hm-wk-list { min-height:432px; transition:opacity .22s, transform .22s; }
.hm-wk-list.swap { opacity:0; transform:translateY(6px); }

/* smooth: one sliding highlight bar, staggered rows */
.hm-wk-list { position:relative; transition:opacity .3s ease, transform .3s ease; }
.hm-wk-bar { position:absolute; left:6px; right:6px; top:0; height:60px; border-radius:11px; background:rgba(46,230,192,.13); transition:transform .6s cubic-bezier(.65,0,.25,1), height .4s ease; pointer-events:none; will-change:transform; }
.hm-wk-list li { position:relative; animation:hmWkIn .5s cubic-bezier(.2,.7,.2,1) both; }
.hm-wk-list li.hot { background:none; }
.hm-wk-list li i, .hm-wk-list svg { transition:background .5s ease, stroke .5s ease; }
@keyframes hmWkIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.hm-wk-menu { transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce) { .hm-wk-list li { animation:none; } .hm-wk-bar { transition:none; } }

.hm-wk-cta { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; padding:13px 16px; border-radius:12px; font-size:15px; font-weight:600; color:var(--ink); text-decoration:none;
  border:1px solid var(--edge); background:rgba(255,255,255,.05); transition:background .3s, border-color .3s; }
.hm-wk-cta:hover { background:rgba(46,230,192,.12); border-color:rgba(46,230,192,.45); }
.hm-wk-cta span { transition:transform .3s; }
.hm-wk-cta:hover span { transform:translateX(4px); }
.hm-wk-list { min-height:370px; }

/* pricing: copy + live seat planner */
.hm-price { padding-top:70px; }
.hm-price-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.hm-price-copy h2 { font-size:40px; line-height:1.15; font-weight:700; margin:12px 0 14px; letter-spacing:-.01em; }
.hm-price-copy p { color:var(--mute); font-size:17px; line-height:1.6; max-width:520px; margin:0 0 22px; }
.hm-price-ticks { list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; }
.hm-price-ticks li { display:flex; align-items:center; gap:12px; font-size:16px; color:var(--ink); }
.hm-price-ticks .hm-i { width:20px; height:20px; padding:3px; border-radius:50%; background:var(--cyansoft); stroke:var(--cyan); stroke-width:2.6; }
.hm-price-copy .hm-btn .hm-i { width:18px; height:18px; margin-left:8px; stroke:currentColor; fill:none; }
.hm-plan { position:relative; padding:30px 32px 26px; border-radius:22px; border:1px solid var(--edge); background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 30px 70px -30px rgba(0,0,0,.7); }
.hm-plan-top { display:flex; justify-content:space-between; align-items:baseline; color:var(--mute); font-size:15px; }
.hm-plan-top b { color:var(--ink); font-size:20px; font-weight:600; }
.hm-plan-top em { font-style:normal; color:var(--gold); font-size:34px; font-weight:700; margin-right:4px; display:inline-block; min-width:1.2em; text-align:right; }
.hm-seats { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; margin:22px 0 24px; }
.hm-seats i { aspect-ratio:1; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.16); transition:background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.hm-seats svg { width:55%; height:55%; fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.8; stroke-linecap:round; transition:stroke .45s ease; }
.hm-seats i.on { background:var(--cyansoft); border:1px solid rgba(46,230,192,.5); transform:translateY(-2px); }
.hm-seats i.on svg { stroke:var(--cyan); }
.hm-seats i.on:nth-child(3n) { background:var(--goldsoft); border-color:rgba(255,179,61,.5); }
.hm-seats i.on:nth-child(3n) svg { stroke:var(--gold); }
.hm-range { position:relative; height:6px; border-radius:6px; background:rgba(255,255,255,.1); margin:6px 8px 26px; }
.hm-range-fill { position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:width .8s cubic-bezier(.65,0,.25,1); }
.hm-range-dot { position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#fff; box-shadow:0 0 0 5px rgba(46,230,192,.2), 0 4px 10px rgba(0,0,0,.5); transition:left .8s cubic-bezier(.65,0,.25,1); }
.hm-plan-line { display:flex; justify-content:space-between; font-size:14.5px; color:var(--mute); margin-bottom:10px; }
.hm-plan-line span:last-child { color:var(--cyan); font-weight:600; }
.hm-meter { height:12px; border-radius:12px; background:rgba(255,255,255,.08); overflow:hidden; }
.hm-meter-fill { height:100%; width:70%; border-radius:12px; background:linear-gradient(90deg,#0e8f86,var(--cyan)); transition:width 1.2s cubic-bezier(.65,0,.25,1); }
.hm-plan-note { display:flex; align-items:center; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.08); font-size:14.5px; color:var(--ink); }
.hm-plan-note .hm-i { width:20px; height:20px; stroke:var(--cyan); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:900px) { .hm-price-grid { grid-template-columns:1fr; gap:36px; } .hm-price-copy h2 { font-size:32px; } .hm-plan { padding:22px 18px; } .hm-seats { gap:6px; } }
@media (max-width:1000px) { .hm-mock, .hm-mock { height:auto; } .hm-wk { width:100%; } .hm-wk-list { min-height:0; } }

/* footer slots that the owner has not filled in yet */
.hm-soon { opacity:.55; }
.hm-soon em { font-style:normal; margin-left:8px; padding:2px 9px; border-radius:7px; font-size:12px; border:1px solid var(--edge); background:var(--glass); }

/* Light theme: the workspace preview stays a dark glass card with light wording, like a real app window */
.hm.hm-light .hm-wk { --ink:#eef6f6; --mute:#a3afbd; --edge:rgba(255,255,255,.14); --cyan:#2ee6c0; --cyansoft:rgba(46,230,192,.14); --gold:#ffb33d; --goldsoft:rgba(255,150,50,.14);
  background:linear-gradient(145deg,#121a2a,#0a1019 60%,#0d1624); border-color:rgba(255,255,255,.18); box-shadow:0 30px 60px -28px rgba(13,22,32,.55); }
@media (prefers-color-scheme: light) {
  .hm.hm-auto .hm-wk { --ink:#eef6f6; --mute:#a3afbd; --edge:rgba(255,255,255,.14); --cyan:#2ee6c0; --cyansoft:rgba(46,230,192,.14); --gold:#ffb33d; --goldsoft:rgba(255,150,50,.14);
    background:linear-gradient(145deg,#121a2a,#0a1019 60%,#0d1624); border-color:rgba(255,255,255,.18); box-shadow:0 30px 60px -28px rgba(13,22,32,.55); }
}
.hm.hm-light .hm-wk-menu { background:#0f1726; }
body.hm-body-light .dev-credit { color:#566170; }
.hm.hm-light h1 em { background-image:linear-gradient(100deg,#077364,#5f8a2e 52%,#b3600b); }
@media (prefers-color-scheme: light) { .hm.hm-auto h1 em { background-image:linear-gradient(100deg,#077364,#5f8a2e 52%,#b3600b); } }