/* HAON · Spatial Light · v1
 * Floating glassmorphic control center, light theme.
 * Tokens are inlined in index.html <style>; this file owns layout, components, motion.
 */

/* ---------- Nav ---------- */
.hn-nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-2);
}
.hn-nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.hn-brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.5px;
}
.hn-brand-word{font-size:18px; color:var(--ink-0)}
.hn-brand-mark{
  position:relative; width:22px; height:22px;
  display:inline-block;
}
.hn-brand-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px solid #c8d4ee;
  box-shadow:0 0 0 3px rgba(59,109,255,.08);
}
.hn-brand-dot{
  position:absolute; left:50%; top:50%;
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(140deg,#3b6dff,#7c5cff);
  transform:translate(-50%,-50%);
  box-shadow:0 0 12px rgba(59,109,255,.55);
}
.hn-nav-links{display:flex; align-items:center; gap:28px}
.hn-nav-links a{
  color:var(--ink-1); font-weight:500; font-size:15px;
  transition:color .2s ease;
}
.hn-nav-links a:hover{color:var(--accent)}
.hn-burger{
  display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px;
  background:#fff; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.hn-burger span{display:block; width:18px; height:2px; background:var(--ink-1); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.hn-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hn-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hn-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.hn-mobile{
  display:none;
  padding:14px 24px 22px;
  border-bottom:1px solid var(--line-2);
  background:#fff;
}
.hn-mobile a{
  display:block; padding:14px 4px; font-weight:600; color:var(--ink-1);
  border-bottom:1px solid var(--line-2);
  font-size:16px;
}
.hn-mobile a:last-child{border-bottom:none; margin-top:10px}
.hn-mobile.is-open{display:block}

/* ---------- Buttons ---------- */
.hn-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px; border-radius:12px; font-weight:600; font-size:15px;
  border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  min-height:44px;
  white-space:nowrap;
}
.hn-btn-sm{padding:9px 16px; font-size:14px; min-height:38px}
.hn-btn-lg{padding:14px 24px; font-size:16px; min-height:52px}
.hn-btn-block{width:100%}
.hn-btn-primary{
  background:linear-gradient(140deg,#3b6dff,#5b7dff);
  color:#fff;
  box-shadow:0 8px 22px rgba(59,109,255,.32), 0 2px 6px rgba(59,109,255,.18), inset 0 1px 0 rgba(255,255,255,.25);
}
.hn-btn-primary:hover{transform:translateY(-1px); box-shadow:0 12px 28px rgba(59,109,255,.4), 0 3px 8px rgba(59,109,255,.22)}
.hn-btn-ghost{
  background:#fff; color:var(--ink-1); border-color:var(--line);
  box-shadow:var(--shadow-sm);
}
.hn-btn-ghost:hover{border-color:#c8d4ee; transform:translateY(-1px); box-shadow:var(--shadow-md)}

/* ---------- Hero ---------- */
.hn-hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 480px at 50% 110%, rgba(155,184,255,.18), transparent 65%),
    linear-gradient(180deg,#f7f9fc 0%, #ffffff 80%);
  padding:64px 0 96px;
}
.hn-earth{
  position:absolute; left:50%; bottom:-220px;
  transform:translateX(-50%);
  width:min(1400px, 130%);
  pointer-events:none;
  opacity:.7;
}
.hn-hero-inner{position:relative; z-index:1}
.hn-hero-head{text-align:center; max-width:760px; margin:0 auto 56px}
.hn-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--ink-2); letter-spacing:.3px;
  box-shadow:var(--shadow-sm);
}
.hn-eyebrow-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px rgba(34,197,94,.18);
  animation:hn-pulse 1.6s ease-in-out infinite;
}
.hn-hero-title{
  font-size:clamp(36px,6vw,56px);
  line-height:1.05; letter-spacing:-.02em; font-weight:800;
  margin:18px 0 14px; color:var(--ink-0);
}
.hn-hero-sub{
  font-size:clamp(16px,2vw,19px); color:var(--ink-2);
  margin:0 0 28px;
}
.hn-hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ---------- Orbital control center ---------- */
.hn-orbital{
  position:relative;
  height:560px;
  max-width:980px;
  margin:0 auto;
}
.hn-emblem{
  position:absolute; left:50%; top:50%;
  width:170px; height:170px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.hn-emblem-ring{
  position:absolute; inset:-22px;
  border-radius:50%;
  border:1px dashed rgba(59,109,255,.35);
  animation:hn-spin 60s linear infinite;
}
.hn-emblem-ring::before, .hn-emblem-ring::after{
  content:""; position:absolute; width:8px; height:8px; border-radius:50%;
  background:#3b6dff;
  box-shadow:0 0 12px rgba(59,109,255,.6);
}
.hn-emblem-ring::before{top:-4px; left:50%; transform:translateX(-50%)}
.hn-emblem-ring::after{bottom:-4px; left:50%; transform:translateX(-50%); background:#7c5cff}
.hn-emblem-ring-2{
  inset:-44px;
  border:1px solid rgba(124,92,255,.18);
  animation:hn-spin 90s linear infinite reverse;
}
.hn-emblem-core{
  width:100%; height:100%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #ffffff, #eef2fb 70%);
  box-shadow:
    0 22px 50px rgba(59,109,255,.18),
    0 6px 14px rgba(15,23,42,.08),
    inset 0 0 0 1px rgba(255,255,255,.9),
    inset 0 -10px 20px rgba(155,184,255,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
}
.hn-emblem-word{
  font-size:22px; font-weight:800; letter-spacing:1px;
  background:linear-gradient(140deg,#3b6dff,#7c5cff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hn-emblem-sub{
  font-size:11px; color:var(--ink-2); letter-spacing:.6px; text-transform:uppercase;
  margin-top:4px; font-weight:600;
}

/* Cards */
.hn-card{
  position:absolute;
  left:50%; top:50%;
  transform:translate(calc(-50% + var(--x,0)), calc(-50% + var(--y,0)));
  width:200px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px;
  display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow-md);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  --x:0; --y:0;
}
.hn-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.hn-card:hover{
  transform:translate(calc(-50% + var(--x,0)), calc(-50% + var(--y,0) - 4px));
  box-shadow:var(--shadow-lg), 0 0 0 3px var(--card-glow,rgba(59,109,255,.10));
  border-color:var(--card-accent,#c8d4ee);
}
.hn-card-dot{
  position:absolute; top:10px; right:10px;
  width:8px; height:8px; border-radius:50%;
  background:var(--card-accent,#3b6dff);
  box-shadow:0 0 0 3px var(--card-glow,rgba(59,109,255,.18));
  animation:hn-pulse 1.6s ease-in-out infinite;
}
.hn-card-icon{
  flex:0 0 36px; width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:var(--card-bg,#eef4ff);
  color:var(--card-accent,#3b6dff);
}
.hn-card-body{min-width:0; flex:1}
.hn-card-label{
  font-weight:600; font-size:14px; color:var(--ink-0);
  line-height:1.2; margin-bottom:3px;
}
.hn-card-stat{
  font-family:'JetBrains Mono','Plus Jakarta Sans',monospace;
  font-size:11px; color:var(--ink-3); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Card accents */
.hn-card--green{--card-accent:var(--green); --card-bg:#e7f9ee; --card-glow:rgba(34,197,94,.16)}
.hn-card--cyan{--card-accent:var(--cyan); --card-bg:#e3f7fa; --card-glow:rgba(6,182,212,.16)}
.hn-card--gold{--card-accent:var(--gold); --card-bg:#fdf3d6; --card-glow:rgba(245,180,0,.18)}
.hn-card--violet{--card-accent:var(--violet); --card-bg:#ece6ff; --card-glow:rgba(124,92,255,.16)}
.hn-card--orange{--card-accent:var(--orange); --card-bg:#ffe9d6; --card-glow:rgba(249,115,22,.16)}
.hn-card--red{--card-accent:var(--red); --card-bg:#fde0e0; --card-glow:rgba(239,68,68,.16)}
.hn-card--gray{--card-accent:var(--gray); --card-bg:#eef1f7; --card-glow:rgba(148,163,184,.18)}
.hn-card--pink{--card-accent:var(--pink); --card-bg:#fce0ee; --card-glow:rgba(236,72,153,.16)}

/* ---------- Sections ---------- */
.hn-section-head{text-align:center; max-width:680px; margin:0 auto 48px}
.hn-section-title{
  font-size:clamp(28px,4vw,40px); line-height:1.1; letter-spacing:-.015em;
  font-weight:800; margin:14px 0 10px;
}
.hn-section-sub{color:var(--ink-2); font-size:17px; margin:0}
.hn-grad{
  background:linear-gradient(140deg,#3b6dff,#7c5cff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- How it works ---------- */
.hn-how{padding:88px 0; background:#fff}
.hn-steps{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.hn-step{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.hn-step:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.hn-step-num{
  display:inline-block; padding:5px 12px; border-radius:999px;
  background:#eef4ff; color:#3b6dff; font-family:'JetBrains Mono',monospace;
  font-size:12px; font-weight:600; letter-spacing:.5px;
  margin-bottom:14px;
}
.hn-step-thumb{
  border-radius:14px; overflow:hidden; margin-bottom:18px;
  border:1px solid var(--line-2);
}
.hn-step-title{font-size:20px; font-weight:700; margin:0 0 8px}
.hn-step-text{color:var(--ink-2); margin:0; font-size:15px}

/* ---------- Products ---------- */
.hn-products{padding:88px 0; background:linear-gradient(180deg,#f7f9fc,#fff)}
.hn-products-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.hn-prod{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hn-prod:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#c8d4ee}
.hn-prod--featured{
  border-color:#c8d4ee;
  box-shadow:0 18px 40px rgba(59,109,255,.12), var(--shadow-md);
}
.hn-prod-icon{
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.hn-prod-icon--blue{background:#eef4ff; color:#3b6dff}
.hn-prod-icon--violet{background:#ece6ff; color:#7c5cff}
.hn-prod-icon--cyan{background:#e3f7fa; color:#06b6d4}
.hn-prod-title{font-size:22px; font-weight:700; margin:0 0 8px}
.hn-prod-body{color:var(--ink-2); margin:0 0 22px; font-size:15px; flex:1}
.hn-prod-price{margin-bottom:18px}
.hn-prod-amt{display:block; font-size:22px; font-weight:700; color:var(--ink-0)}
.hn-prod-unit{font-size:14px; color:var(--ink-2); font-weight:500}
.hn-prod-note{display:block; font-size:13px; color:var(--ink-3); margin-top:4px}
.hn-prod-link{
  color:#3b6dff; font-weight:600; font-size:15px;
  display:inline-flex; align-items:center; gap:4px;
  transition:gap .2s ease;
}
.hn-prod-link:hover{gap:8px}

/* ---------- Pricing ---------- */
.hn-pricing{padding:88px 0; background:#fff}
.hn-price-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin-bottom:32px;
}
.hn-plan{
  position:relative;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.hn-plan:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.hn-plan--featured{
  border:1px solid #c8d4ee;
  box-shadow:0 22px 50px rgba(59,109,255,.14), var(--shadow-md);
  background:linear-gradient(180deg,#fbfcff,#fff);
}
.hn-plan-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(140deg,#3b6dff,#7c5cff); color:#fff;
  padding:5px 14px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.4px;
  box-shadow:0 6px 18px rgba(59,109,255,.32);
}
.hn-plan-tier{
  font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:#3b6dff; margin-bottom:10px;
}
.hn-plan-price{
  font-size:38px; font-weight:800; letter-spacing:-.02em; color:var(--ink-0);
  margin-bottom:4px;
}
.hn-plan-price span{font-size:15px; font-weight:500; color:var(--ink-2)}
.hn-plan-desc{font-size:14px; color:var(--ink-2); margin-bottom:20px}
.hn-plan-feats{
  list-style:none; padding:0; margin:0 0 20px;
  display:flex; flex-direction:column; gap:10px; flex:1;
}
.hn-plan-feats li{
  position:relative; padding-left:24px;
  font-size:14.5px; color:var(--ink-1); line-height:1.45;
}
.hn-plan-feats li::before{
  content:""; position:absolute; left:0; top:7px;
  width:14px; height:14px; border-radius:50%;
  background:#e7f9ee url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6.5l2 2 4-5'/></svg>") center/10px no-repeat;
}
.hn-plan-tag{
  font-size:13px; color:var(--ink-3); font-style:italic;
  margin-bottom:18px;
}
.hn-price-note{
  text-align:center; max-width:720px; margin:0 auto;
  color:var(--ink-2); font-size:14.5px;
}

/* ---------- Footer ---------- */
.hn-footer{
  border-top:1px solid var(--line-2);
  padding:28px 0;
  background:#fafbfd;
}
.hn-footer-inner{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.hn-footer-brand{display:inline-flex; align-items:center; gap:10px}
.hn-footer-word{font-weight:800; font-size:16px}
.hn-footer-status{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  font-size:13px; color:var(--ink-2); font-weight:500;
}
.hn-status-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.18);
  animation:hn-pulse 1.6s ease-in-out infinite;
}
.hn-footer-links{
  display:flex; gap:18px; flex-wrap:wrap;
  margin-left:auto;
}
.hn-footer-links a{font-size:14px; color:var(--ink-2); transition:color .2s ease}
.hn-footer-links a:hover{color:var(--accent)}
.hn-footer-copy{
  width:100%; text-align:center;
  font-size:13px; color:var(--ink-3);
  border-top:1px solid var(--line-2);
  padding-top:18px; margin-top:6px;
}

/* ---------- Animations ---------- */
@keyframes hn-pulse{
  0%,100%{transform:scale(1); opacity:1}
  50%{transform:scale(1.18); opacity:.65}
}
@keyframes hn-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .hn-emblem-ring, .hn-emblem-ring-2{animation:none}
  .hn-eyebrow-dot, .hn-card-dot, .hn-status-dot{animation:none}
  *{transition:none !important}
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .hn-orbital{height:520px; max-width:760px}
  .hn-card{width:180px}
}

@media (max-width: 720px){
  .hn-nav-links{display:none}
  .hn-burger{display:inline-flex}

  .hn-hero{padding:36px 0 56px}
  .hn-hero-head{margin-bottom:32px}

  /* Collapse orbit into linear stack */
  .hn-orbital{
    position:static;
    height:auto;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:12px;
    max-width:560px;
    padding:0;
  }
  .hn-emblem{
    position:static; transform:none;
    width:140px; height:140px;
    grid-column:1 / -1;
    margin:0 auto 12px;
  }
  .hn-emblem-ring{inset:-16px}
  .hn-emblem-ring-2{inset:-32px}
  .hn-card{
    position:static; transform:none;
    width:auto;
  }
  .hn-card:hover{transform:translateY(-3px)}

  .hn-how, .hn-products, .hn-pricing{padding:56px 0}
  .hn-steps, .hn-products-grid, .hn-price-grid{
    grid-template-columns:1fr; gap:16px;
  }
  .hn-section-head{margin-bottom:32px}

  .hn-footer-links{margin-left:0; width:100%; justify-content:center}
  .hn-footer-status{order:-1}
}

@media (max-width: 480px){
  html{font-size:16px}
  .hn-orbital{grid-template-columns:1fr; max-width:360px}
  .hn-hero-actions .hn-btn{width:100%}
  .hn-prod, .hn-plan, .hn-step{padding:22px}
}

/* ═══ HAON brand-dot → glowing purple HAON icon (replaces 8px dot) ═══ */
.hn-brand-dot {
  position: absolute !important;
  left: 50% !important; top: 50% !important;
  width: 24px !important; height: 24px !important;
  border-radius: 0 !important;
  background: linear-gradient(135deg, #a855f7 0%, #7c5cff 100%) !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: none !important;
  -webkit-mask: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22white%22 stroke=%22white%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%2250,10 84.64,30 84.64,70 50,90 15.36,70 15.36,30%22 fill=%22none%22 stroke-width=%226%22/%3E%3Ccircle cx=%2250%22 cy=%2210%22 r=%226%22/%3E%3Ccircle cx=%2284.64%22 cy=%2230%22 r=%226%22/%3E%3Ccircle cx=%2284.64%22 cy=%2270%22 r=%226%22/%3E%3Ccircle cx=%2250%22 cy=%2290%22 r=%226%22/%3E%3Ccircle cx=%2215.36%22 cy=%2270%22 r=%226%22/%3E%3Ccircle cx=%2215.36%22 cy=%2230%22 r=%226%22/%3E%3Cline x1=%2236%22 y1=%2236%22 x2=%2236%22 y2=%2264%22 stroke-width=%226%22/%3E%3Ccircle cx=%2236%22 cy=%2236%22 r=%224%22/%3E%3Ccircle cx=%2236%22 cy=%2264%22 r=%224%22/%3E%3Cline x1=%2264%22 y1=%2236%22 x2=%2264%22 y2=%2264%22 stroke-width=%226%22/%3E%3Ccircle cx=%2264%22 cy=%2236%22 r=%224%22/%3E%3Ccircle cx=%2264%22 cy=%2264%22 r=%224%22/%3E%3Cline x1=%2236%22 y1=%2250%22 x2=%2264%22 y2=%2250%22 stroke-width=%226%22/%3E%3C/svg%3E') no-repeat center / contain;
  mask: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 fill=%22white%22 stroke=%22white%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpolygon points=%2250,10 84.64,30 84.64,70 50,90 15.36,70 15.36,30%22 fill=%22none%22 stroke-width=%226%22/%3E%3Ccircle cx=%2250%22 cy=%2210%22 r=%226%22/%3E%3Ccircle cx=%2284.64%22 cy=%2230%22 r=%226%22/%3E%3Ccircle cx=%2284.64%22 cy=%2270%22 r=%226%22/%3E%3Ccircle cx=%2250%22 cy=%2290%22 r=%226%22/%3E%3Ccircle cx=%2215.36%22 cy=%2270%22 r=%226%22/%3E%3Ccircle cx=%2215.36%22 cy=%2230%22 r=%226%22/%3E%3Cline x1=%2236%22 y1=%2236%22 x2=%2236%22 y2=%2264%22 stroke-width=%226%22/%3E%3Ccircle cx=%2236%22 cy=%2236%22 r=%224%22/%3E%3Ccircle cx=%2236%22 cy=%2264%22 r=%224%22/%3E%3Cline x1=%2264%22 y1=%2236%22 x2=%2264%22 y2=%2264%22 stroke-width=%226%22/%3E%3Ccircle cx=%2264%22 cy=%2236%22 r=%224%22/%3E%3Ccircle cx=%2264%22 cy=%2264%22 r=%224%22/%3E%3Cline x1=%2236%22 y1=%2250%22 x2=%2264%22 y2=%2250%22 stroke-width=%226%22/%3E%3C/svg%3E') no-repeat center / contain;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.6));
  animation: hnBrandGlow 2.6s ease-in-out infinite;
}
@keyframes hnBrandGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.40)); }
  50%      { filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.85))
                    drop-shadow(0 0 24px rgba(124, 92, 255, 0.35)); }
}
/* hide the outer ring on mobile so icon is centered cleanly */
@media (max-width: 720px) {
  .hn-brand-ring { display: none; }
  .hn-brand-dot { width: 22px !important; height: 22px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hn-brand-dot { animation: none !important; filter: drop-shadow(0 0 8px rgba(168,85,247,0.6)) !important; }
}