/* HEXA CONNECT — home page and the animated HEXA "H". Loaded after layout.css, so it wins where they overlap. */

/* The page colour reaches the very top of the screen, behind the phone's status bar. */
html { background: var(--bg); }

/* ---------- The animated H (also the loading screen) ---------- */
.hmark { overflow: visible; }
.hmark path { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.hm-hero .hm-hex { animation: hm-draw 1.2s cubic-bezier(.65, 0, .35, 1) both; }
.hm-hero .hm-h { animation: hm-draw .8s cubic-bezier(.65, 0, .35, 1) .85s both; }
.hm-hero { filter: drop-shadow(0 0 0 rgba(var(--accent-rgb), 0)); animation: hm-glow 4.5s ease-in-out 2.2s infinite; }
@keyframes hm-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hm-glow { 50% { filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), .75)); } }

/* Loading screen: the mark draws itself again and again until the app is ready. */
.boot .hm-loop { filter: drop-shadow(0 0 10px rgba(var(--accent-rgb), .5)); }
.hm-loop .hm-hex { animation: hm-loop-hex 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
.hm-loop .hm-h { animation: hm-loop-h 2.2s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes hm-loop-hex { 0% { stroke-dashoffset: 100; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes hm-loop-h { 0%, 30% { stroke-dashoffset: 100; } 70%, 100% { stroke-dashoffset: 0; } }

/* ---------- Page ---------- */
#view-landing.home { position: relative; max-width: 1080px; padding: 0 20px 56px; }
/* One glow that starts at the very top edge of the page, so there is no dark band above the header. */
.home::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; left: 50%; width: 100vw; height: 620px; transform: translateX(-50%);
  background:
    radial-gradient(70% 70% at 15% 0, rgba(var(--accent-rgb), .34), transparent 70%),
    radial-gradient(55% 60% at 95% 12%, rgba(var(--cyan-rgb), .16), transparent 72%);
}
.home .landing-head { padding-top: calc(14px + var(--safe-t)); }

.home .hero { display: grid; gap: 40px; padding: 36px 0 24px; align-items: center; }
.home .hero::before { content: none; }
.hero-copy { display: grid; gap: 18px; justify-items: start; }
.hero-copy h1 {
  font-size: clamp(2.6rem, 12.5vw, 4.75rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; text-wrap: balance;
}
.hero-copy h1 span { display: block; }
.hero-copy > p { color: var(--muted); font-size: 1.0625rem; max-width: 32rem; }
.home .hero-actions { margin-top: 4px; }
.hero-note { font-size: .8125rem !important; color: var(--faint) !important; }

@media (min-width: 880px) {
  .home .hero { grid-template-columns: 1.15fr .85fr; gap: 56px; padding-top: 64px; }
}

/* ---------- Chat preview (illustration; the people in it are made up) ---------- */
.preview {
  margin: 0; width: min(100%, 340px); justify-self: center; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 26px;
  box-shadow: 0 30px 80px -30px rgba(var(--accent-rgb), .55), 0 0 0 6px rgba(255, 255, 255, .02);
}
.pv-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--card); }
.pv-av {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--grad); color: #05050a; font-weight: 800;
}
.pv-who { display: grid; line-height: 1.25; }
.pv-name { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .9375rem; }
.pv-sub { color: var(--cyan); font-size: .75rem; }
.pv-body { display: grid; gap: 8px; padding: 18px 14px 20px; min-height: 230px; align-content: end; }
.pv-msg { max-width: 82%; padding: 9px 13px; border-radius: 18px; font-size: .9375rem; }
.pv-in { justify-self: start; background: var(--card-2); border-bottom-left-radius: 6px; }
.pv-out { justify-self: end; background: var(--violet-600); color: #fff; border-bottom-right-radius: 6px; }
.pv-voice { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.pv-play { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #fff; color: var(--violet-700); }
.pv-wave { display: flex; align-items: center; gap: 2px; flex: 1; height: 26px; }
.pv-wave i { flex: 1; min-width: 2px; max-width: 4px; border-radius: 2px; background: rgba(255, 255, 255, .85); height: 40%; }
.pv-wave i:nth-child(4n+1) { height: 30%; }
.pv-wave i:nth-child(4n+2) { height: 70%; }
.pv-wave i:nth-child(4n+3) { height: 100%; }
.pv-wave i:nth-child(5n) { height: 55%; }
.pv-dur { font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .9; }
.pv-typing { padding: 12px 14px; }

/* ---------- Bands under the hero ---------- */
.band { display: grid; gap: 18px; padding: 36px 0 0; margin-top: 36px; border-top: 1px solid var(--line); }
.band h2 { font-size: 1.375rem; letter-spacing: -.02em; }
.rows { margin: 0; display: grid; }
.rows > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.rows > div:first-child { padding-top: 0; }
.rows dt { font-weight: 700; }
.rows dd { margin: 0; color: var(--muted); max-width: 38rem; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; position: relative; padding: 4px 0 0 44px; min-height: 32px; color: var(--muted); }
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(var(--accent-rgb), .18); color: var(--text); font-weight: 700; border: 1px solid rgba(var(--accent-rgb), .5);
}
.steps strong { color: var(--text); }
.band-quiet p { color: var(--muted); max-width: 38rem; }
.cta { margin-top: 44px; }
.cta .btn { min-width: 220px; }

@media (min-width: 760px) {
  .band { grid-template-columns: 220px 1fr; gap: 32px; }
  .rows > div { grid-template-columns: 200px 1fr; gap: 24px; }
}