/* Synergy HQ companion app section + /app/ page. App palette: navy #0B1B33, cyan #2EC4FF. */
.hq{
  --hq-navy:#0B1B33;
  --hq-navy-2:#0f2442;
  --hq-cyan:#2EC4FF;
  --hq-hair:rgba(46,196,255,.28);
  --hq-hair-soft:rgba(46,196,255,.14);
  --hq-glass:rgba(255,255,255,.035);
  --hq-ink:#e8edf4;
  --hq-muted:rgba(232,237,244,.70);
  --hq-ok:#16a34a;--hq-wait:#ca8a04;--hq-bad:#dc2626;--hq-slate:#475569;
  position:relative;color:var(--hq-ink);
  background:
    radial-gradient(900px 520px at 85% 0%,rgba(46,196,255,.10),transparent 60%),
    linear-gradient(180deg,var(--hq-navy) 0%,#081426 100%);
  border-top:1px solid var(--hq-hair);
  overflow:hidden;
}
.hq::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(46,196,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(46,196,255,.05) 1px,transparent 1px);
  background-size:64px 64px;mask-image:linear-gradient(#000,transparent 70%)}
.hq .wrap{position:relative}
.hq .eyebrow{color:var(--hq-cyan)}
.hq-mark{display:inline-block;width:8px;height:8px;background:var(--hq-cyan)}
.hq h1,.hq h2{text-transform:uppercase}
.hq-h1{margin:0 0 18px;font:800 clamp(42px,6.4vw,78px)/.9 var(--display);letter-spacing:.01em;max-width:15ch}
.hq-h2{margin:0 0 14px;font:800 clamp(34px,4.6vw,54px)/.92 var(--display);letter-spacing:.02em;max-width:20ch}
.hq-lede{margin:0 0 24px;color:var(--hq-muted);max-width:60ch}
.hq-note{margin:0 0 22px;display:flex;gap:10px;align-items:center;color:var(--hq-ink);font:700 14px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase}
.hq-note::before{content:"";width:22px;height:1px;background:var(--hq-cyan)}
.hq .btn-primary{background:var(--hq-cyan);border-color:var(--hq-cyan);color:#04121f}
.hq .btn-primary:hover{background:var(--hq-cyan);filter:brightness(1.06)}
.hq .btn{border-color:var(--hq-hair)}
.hq .btn:not(.btn-primary):hover{border-color:var(--hq-cyan);background:rgba(46,196,255,.06)}

/* Phone frame */
.phone{position:relative;margin:0;width:100%;max-width:280px;aspect-ratio:600/1367;padding:9px;border-radius:40px;
  background:linear-gradient(160deg,#1b2a40,#060c16 60%);border:1px solid var(--hq-hair);
  box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.6) inset}
.phone::before{content:"";position:absolute;z-index:2;top:17px;left:50%;transform:translateX(-50%);width:30%;height:20px;border-radius:12px;background:#02050a}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:31px;background:var(--hq-navy)}

/* Hero */
.hq-hero{padding:72px 0 56px}
.hq-hero-inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.hq-fan{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:0;padding-bottom:28px}
.hq-fan .phone{flex:none;width:36%;max-width:none}
.hq-fan .phone:nth-child(1){margin-right:-7%;transform:translateY(28px) rotate(-6deg);z-index:1;opacity:.9}
.hq-fan .phone:nth-child(2){width:42%;z-index:3}
.hq-fan .phone:nth-child(3){margin-left:-7%;transform:translateY(28px) rotate(6deg);z-index:1;opacity:.9}

/* How it works */
.hq-how{padding:64px 0;border-top:1px solid var(--hq-hair-soft)}
.hq-how-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:start}
.hq-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:14px;counter-reset:hq}
.hq-step{position:relative;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:start;padding:20px 22px;
  background:var(--hq-glass);border:1px solid var(--hq-hair-soft);border-left:2px solid var(--hq-cyan);border-radius:8px;backdrop-filter:blur(10px)}
.hq-step-num{font:800 34px/1 var(--display);color:var(--hq-cyan);letter-spacing:.04em}
.hq-step h3{margin:2px 0 6px;font:800 24px/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.hq-step p{margin:0;color:var(--hq-muted)}
.hq-sync{display:flex;align-items:center;gap:10px;margin:18px 0 0;padding:12px 14px;border:1px solid var(--hq-hair-soft);border-radius:8px;
  font:700 13px/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--hq-muted);flex-wrap:wrap}
.hq-sync b{color:var(--hq-ink);font-weight:800}
.hq-sync i{flex:1 1 40px;min-width:40px;height:1px;background:linear-gradient(90deg,var(--hq-cyan),rgba(46,196,255,.2),var(--hq-cyan))}
.hq-how-phone figcaption,.hq-card figcaption{margin-top:12px;font:700 13px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--hq-muted)}

/* Feature grid */
.hq-features{padding:64px 0 24px;border-top:1px solid var(--hq-hair-soft)}
.hq-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:22px}
@media (max-width:1000px){.hq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hq-card{margin:0;padding:22px 20px 20px;background:var(--hq-glass);border:1px solid var(--hq-hair-soft);border-radius:8px;backdrop-filter:blur(10px);
  display:flex;flex-direction:column;align-items:center;position:relative}
.hq-card::before{content:"";position:absolute;left:0;top:0;width:48px;height:2px;background:var(--hq-cyan)}
.hq-card .phone{max-width:230px;margin-bottom:18px}
.hq-card h3{align-self:stretch;margin:0 0 6px;font:800 22px/1.05 var(--display);letter-spacing:.04em;text-transform:uppercase}
.hq-card p{align-self:stretch;margin:0;color:var(--hq-muted);font-size:15px}
.hq-status{align-self:stretch;display:flex;gap:6px;margin:0 0 10px}
.hq-status span{width:18px;height:6px;border-radius:2px}
.s-ok{background:var(--hq-ok)}.s-wait{background:var(--hq-wait)}.s-bad{background:var(--hq-bad)}.s-slate{background:var(--hq-slate)}

/* Also list */
.hq-also{padding:40px 0 64px}
.hq-also-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.hq-also-list li{padding:14px 16px;border:1px solid var(--hq-hair-soft);border-radius:8px;background:rgba(255,255,255,.02);color:var(--hq-muted);font-size:15px}
.hq-also-list b{display:block;color:var(--hq-ink);font:800 17px/1.1 var(--display);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.hq-foot{margin:18px 0 0;color:var(--hq-muted);font-size:13px}

/* CTA */
.hq-cta{padding:64px 0 72px;border-top:1px solid var(--hq-hair-soft)}
.hq-cta-box{padding:32px 28px;border:1px solid var(--hq-hair);border-radius:8px;background:linear-gradient(135deg,rgba(46,196,255,.10),rgba(255,255,255,.02))}

/* Homepage teaser */
.hq-teaser{padding:72px 0}
.hq-teaser-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.hq-mini-steps{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px}
.hq-mini-steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:baseline;padding:12px 14px;border:1px solid var(--hq-hair-soft);border-left:2px solid var(--hq-cyan);border-radius:8px;background:var(--hq-glass);color:var(--hq-muted)}
.hq-mini-steps b{font:800 20px/1 var(--display);color:var(--hq-cyan)}
.hq-mini-steps strong{color:var(--hq-ink)}

@media (max-width:900px){
  .hq-hero-inner,.hq-teaser-inner{grid-template-columns:1fr}
  .hq-fan{min-height:0;margin-top:8px}
  .hq-how-grid{grid-template-columns:1fr}
  .hq-how-phone{max-width:210px;margin:0 auto;text-align:center}
}
@media (max-width:520px){
  .hq-hero{padding:40px 0 36px}
  .hq-step{grid-template-columns:40px 1fr;padding:16px}
  .hq-step-num{font-size:28px}
  .hq-grid{grid-template-columns:1fr}
  .hq-sync{flex-wrap:nowrap;gap:6px;font-size:11px;letter-spacing:.06em;padding:10px}
  .hq-sync i{min-width:14px}
  .hq-card .phone{max-width:240px}
}
.hq-teaser,.hq-how{scroll-margin-top:84px}
@media (max-width:800px){.hq-teaser,.hq-how{scroll-margin-top:190px}}