/* Reconnect Web Co. — the design. Tokens are in base.css.
   Motion rule: anything that moves lives under prefers-reduced-motion: no-preference,
   and only transform / opacity animate. */

/* ---------- nav ---------- */
.site-head { /* solid enough to read over content; Task 4's .scrolled state refines it */
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(rgba(0, 0, 0, .88), rgba(0, 0, 0, .7));
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px;
}
.brand { display: inline-flex; flex: none; border-radius: 8px; }
.brand img { width: 172px; height: auto; }
.nav-links { display: none; gap: 26px; }
.nav-links a { color: #cfd3f5; text-decoration: none; font-size: .95rem; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { min-height: 42px; padding: 8px 16px; border-radius: 999px; font-size: .95rem; }
@media (min-width: 840px) {
  .brand img { width: 215px; }
  .nav-links { display: flex; margin-left: auto; }
  .nav-cta { margin-left: 10px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; display: grid; place-items: center; text-align: center;
  min-height: calc(100svh - 72px); padding-block: 48px 96px;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 52%, rgba(90, 60, 200, .26), rgba(0, 0, 0, 0) 70%);
}
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-title { font-weight: 800; }
.hero-title .line1 {
  display: block; font-size: clamp(32px, 7vw, 80px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1; text-shadow: 0 0 30px rgba(124, 92, 255, .35);
}
.hero-title .line2 {
  display: block; margin-top: .08em; font-size: clamp(46px, 14vw, 128px); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.05; color: var(--violet-2);
  text-shadow: 0 0 24px rgba(124, 92, 255, .55), 0 0 70px rgba(62, 230, 201, .16);
}
/* while JS draws the word from stars, the real text (kept for readers and selection) and its glow hide */
.hero > #word-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
html.starword .hero-title #word { color: transparent; text-shadow: none; }
.sub { margin-top: 22px; color: var(--soft); font-size: clamp(1rem, 1.6vw, 1.2rem); }
.btns { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- sections ---------- */
.section { position: relative; padding-block: clamp(72px, 10vw, 128px); }
/* dim the sky behind text sections so body copy keeps AA contrast over the moving stars */
.section::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .62) 18%, rgba(0, 0, 0, .62) 82%, rgba(0, 0, 0, 0));
}
.kicker {
  color: var(--teal); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.section h2 {
  margin-top: 10px; font-size: clamp(30px, 4.6vw, 52px); font-weight: 900; letter-spacing: -.025em;
  text-shadow: 0 0 34px rgba(124, 92, 255, .28);
}
.lede { margin-top: 14px; color: var(--soft); font-size: 1.08rem; }

/* ---------- live client sites ---------- */
.clients { margin-top: 40px; display: grid; gap: 24px; }
@media (min-width: 840px) { .clients { grid-template-columns: 1fr 1fr; gap: 28px; } }
.client { padding: 16px 16px 22px; }
.client h3 { margin: 20px 6px 0; font-size: 1.35rem; }
.client .what { margin: 8px 6px 0; color: var(--soft); }
.visit {
  display: inline-flex; margin: 16px 6px 0; padding: 6px 0; color: var(--teal);
  font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(62, 230, 201, .4);
}
.visit:hover { border-bottom-color: var(--teal); }
.frame { border-radius: 12px; overflow: hidden; border: 1px solid #2c3160; background: #070816; }
.frame-bar {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: #11132e; border-bottom: 1px solid #22264d;
}
.frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2f3466; }
.frame-url {
  margin-left: 10px; flex: 1; min-width: 0; padding: 3px 10px; border-radius: 6px;
  background: #080918; color: var(--dim); font-size: .78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-screen {
  display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 16px;
  background:
    radial-gradient(80% 70% at 30% 20%, rgba(124, 92, 255, .22), rgba(0, 0, 0, 0) 70%),
    radial-gradient(70% 60% at 80% 90%, rgba(62, 230, 201, .12), rgba(0, 0, 0, 0) 70%),
    #090a1c;
}
.frame-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame-screen:has(img) { padding: 0; }
.frame-screen span { font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 800; color: #d9dcff; text-align: center; }

/* ---------- comes-with cards ---------- */
.cards { margin-top: 40px; display: grid; gap: 18px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.card { padding: 26px 24px 28px; }
.card .icon {
  width: 40px; height: 40px; padding: 8px; border-radius: 12px;
  fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(62, 230, 201, .08); border: 1px solid rgba(62, 230, 201, .22);
}
.card h3 { margin-top: 18px; font-size: 1.2rem; }
.card p { margin-top: 8px; color: var(--soft); }

/* ---------- showcase (filled by js/showcase.js) ---------- */
[hidden] { display: none !important; }
.showcase { margin-top: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--panel-edge); background: var(--panel); color: var(--soft);
  font: inherit; font-size: .92rem; font-weight: 600;
}
.chip:hover { color: var(--ink); border-color: rgba(167, 139, 250, .45); }
.chip[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); }
.tiles { margin-top: 24px; display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.tile { min-width: 0; }
.tile-open {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 10; border-radius: 14px; border: 1px solid var(--panel-edge); background: #070816;
}
.tile-open img, .tile-open video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-open video { opacity: 0; transition: opacity .25s; }
.tile.playing video { opacity: 1; }
.tile-open:hover, .tile-open:focus-visible { border-color: var(--violet-2); }
.tile-name { margin-top: 10px; font-weight: 700; color: var(--ink); }
.showcase-dialog {
  margin: auto; /* base.css's reset zeroes the UA's centring margin */
  width: min(960px, calc(100vw - 2 * var(--gutter))); max-height: calc(100svh - 32px); padding: 18px;
  border: 1px solid var(--panel-edge); border-radius: 16px; background: #0a0b1e; color: var(--ink); overflow: auto;
}
.showcase-dialog::backdrop { background: rgba(0, 0, 0, .78); }
.showcase-dialog h3 { margin: 0 0 12px; font-size: 1.3rem; }
.dlg-media video { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; background: #000; }
.dlg-actions { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dlg-close { min-height: 44px; padding: 8px 18px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; color: var(--soft); background: transparent; border: 1px solid var(--panel-edge); }
.dlg-close:hover { color: var(--ink); }
.note { margin-top: 28px; padding: 20px 22px; color: var(--soft); }

/* ---------- how it works ---------- */
.steps { position: relative; margin-top: 48px; display: grid; gap: 34px; }
.steps::before { /* the constellation line (js/steps.js draws over it) */
  content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(var(--violet-2), var(--teal)); opacity: .55;
}
.step { position: relative; padding-left: 52px; }
.step-star {
  position: absolute; left: 4px; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 22%, var(--violet-2) 38%, rgba(124, 92, 255, 0) 72%);
  box-shadow: 0 0 18px rgba(167, 139, 250, .7);
}
.step:last-child .step-star {
  background: radial-gradient(circle, #fff 0 22%, var(--teal) 38%, rgba(62, 230, 201, 0) 72%);
  box-shadow: 0 0 18px rgba(62, 230, 201, .7);
}
.step-n { color: var(--violet-2); font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
.step-n::before { content: "STEP "; }
.step h3 { margin-top: 4px; font-size: 1.3rem; }
.step p { margin-top: 6px; color: var(--soft); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .steps::before {
    left: 14px; right: calc(25% - 14px); top: 13px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--violet-2), var(--teal));
  }
  .step { padding-left: 0; padding-top: 48px; }
  .step-star { left: 4px; top: 4px; }
}

/* ---------- care plan ---------- */
.care {
  position: relative; overflow: hidden; padding: clamp(30px, 5vw, 56px);
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(124, 92, 255, .26), rgba(0, 0, 0, 0) 70%),
    radial-gradient(60% 80% at 0% 100%, rgba(62, 230, 201, .12), rgba(0, 0, 0, 0) 70%),
    var(--panel);
}
.care h3 {
  margin-top: 22px; font-size: clamp(1.25rem, 2.6vw, 1.7rem); font-weight: 800;
  color: var(--ink);
}
.care-body { margin-top: 12px; color: var(--soft); font-size: 1.08rem; }
.care .btn { margin-top: 26px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 32px; display: grid; gap: 12px; }
.faq details {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 14px;
}
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; min-height: 56px; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translateY(-3px);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq summary:focus-visible { outline-offset: -2px; border-radius: 14px; }
.answer { padding: 0 20px 20px; color: var(--soft); }
@media (prefers-reduced-motion: no-preference) {
  .faq summary::after { transition: transform .2s ease; }
}

/* ---------- quote ---------- */
.quote-form:empty { display: none; }
.quote-form { margin-top: 30px; padding: clamp(20px, 4vw, 34px); display: grid; gap: 20px; background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 16px; position: relative; }
.qtop { display: grid; gap: 20px; }
.qnavbox { display: grid; }
.qprogress { height: 6px; border-radius: 999px; background: #1a1d44; overflow: hidden; }
.qprogress-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--teal)); }
.qstep-h { margin: 0; font-size: 1.25rem; color: var(--ink); font-weight: 800; }
.qstep-h:focus { outline: none; }
.qstep-h:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.quote-form .choice { padding: 6px 14px; border: 1px solid #2b2f66; border-radius: 12px; background: #080918; }
.quote-form .choice:has(input:checked) { border-color: var(--violet-2); color: var(--ink); }
.quote-form .contact-fields { display: grid; gap: 16px; }
.quote-form .other-field[hidden] { display: none; }
.qerror { margin: 0; min-height: 1.4em; color: #ffb4c0; font-weight: 600; }
.qnav { display: flex; gap: 12px; justify-content: space-between; }
.qnav .btn[hidden] { display: none; }
.qnav .qnext { margin-left: auto; min-width: 140px; }
.qnext:disabled { opacity: .6; cursor: progress; }
.style-chip { margin: 0; display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 4px 6px 4px 14px; border-radius: 999px; border: 1px solid var(--violet-2); color: var(--ink); }
.chip-x { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); cursor: pointer; font: inherit; }
.qdone { padding: 8px 0; }
.qdone .qstep-h { font-size: 1.4rem; }
.qref { font-weight: 800; letter-spacing: .06em; color: var(--teal); }
.plain-form { margin-top: 30px; padding: clamp(20px, 4vw, 34px); display: grid; gap: 20px; }
.field { display: grid; gap: 8px; border: 0; min-width: 0; }
.field > label, .field legend { font-weight: 700; }
.field legend { margin-bottom: 8px; }
.field input[type=text], .field input[type=tel], .field select {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 10px;
  background: #080918; border: 1px solid #343a75; color: var(--ink);
}
.choice { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--soft); }
.choice input { width: 20px; height: 20px; accent-color: var(--violet); }
.plain-form .btn { justify-self: start; min-width: 160px; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid #191c3d; background: rgba(0, 0, 0, .7); }
.foot { display: grid; gap: 22px; padding-block: 40px 48px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { display: inline-block; padding: 6px 0; color: #cfd3f5; text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }
.copyright { color: var(--dim); font-size: .9rem; }
@media (min-width: 840px) {
  .foot { grid-template-columns: auto 1fr auto; align-items: center; }
  .foot-links { justify-content: center; }
}

/* ---------- inner pages (privacy, terms, thanks, 404) ---------- */
.page { padding-block: clamp(48px, 8vw, 96px); }
.page h1 { font-size: clamp(34px, 6vw, 60px); font-weight: 900; letter-spacing: -.025em;
  text-shadow: 0 0 34px rgba(124, 92, 255, .3); }
.page .lede { margin-top: 16px; }
.page .btns { justify-content: flex-start; }
.legal { max-width: 760px; }
.legal h2 { margin-top: 38px; font-size: 1.3rem; }
.legal p, .legal li { margin-top: 12px; color: var(--soft); }
.legal ul { padding-left: 1.2em; }
.legal a { color: var(--teal); }
.legal .effective { color: var(--dim); }

/* ---------- nav scrolled state (js/main.js) ---------- */
.site-head.scrolled {
  background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(167, 139, 250, .16);
}
.site-head.scrolled .nav-cta {
  color: #fff; border-color: transparent;
  background: linear-gradient(90deg, var(--btn-a), var(--btn-b));
  box-shadow: 0 0 22px rgba(124, 92, 255, .4);
}

/* ---------- scroll-drawn steps (js/steps.js) ---------- */
.steps-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.steps-line polyline {
  fill: none; stroke: var(--violet-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, .8));
}
.js .steps-armed::before { opacity: .16; } /* the undrawn track */
.js .steps-armed .step:not(.lit) .step-star { opacity: .3; }
/* the step's words never dim: they must stay >= 4.5:1 on black (WCAG-AA) lit or not */
.step-star { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .step-star { transition: opacity .4s ease; }
}

/* ---------- card tilt + spotlight (js/cards.js; desktop mouse only) ---------- */
.tilting { position: relative; will-change: transform; transition: transform .2s linear; }
.tilting::before { /* behind the content, above the panel fill */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
  background:
    radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, .16), transparent 70%),
    radial-gradient(333px circle at var(--mx, 50%) var(--my, 50%), rgba(62, 230, 201, .08), transparent 70%),
    radial-gradient(187px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 92, 255, .07), transparent 70%);
}
.tilting.lit-by-pointer::before { opacity: 1; }
.tilting > * { position: relative; z-index: 1; }

/* ---------- phone tilt chip (js/tilt.js; iOS only: the sensor needs a tap) ---------- */
/* In flow under the buttons, in a slot sized up front (js/early.js sets html.needs-motion-perm only where a chip can appear): it never shifts anything. */
.tilt-slot { display: none; }
@media (pointer: coarse) {
  html.needs-motion-perm .tilt-slot {
    display: flex; align-items: center; justify-content: center; margin-top: 14px;
    min-height: 44px; max-width: 32rem; text-align: center;
  }
}
.tilt-chip {
  min-height: 44px; min-width: 44px; padding: 0 18px; border-radius: 999px;
  font: inherit; font-size: .9rem; color: var(--ink, #eef0ff); cursor: pointer;
  background: rgba(124, 92, 255, .16); border: 1px solid rgba(167, 139, 250, .5);
}
.tilt-note { margin: 0; font-size: .85rem; line-height: 1.35; color: var(--soft, #c4c8e8); animation: tilt-note-in .3s ease both; }
.tilt-note.out { opacity: 0; transition: opacity .6s ease; }
@keyframes tilt-note-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tilt-note { animation: none; } .tilt-note.out { transition: none; } }
.tilt-chip:focus-visible { outline: 2px solid #3ee6c9; outline-offset: 3px; }