/* BarPhone — Cabinet Grotesk · warm bar palette */

:root {
  --brand-crimson: #8b1538;
  --brand-bone: #f5efe6;
  --brand-brass: #c9a961;
  --brand-charcoal: #1a1612;
  --brand-charcoal-soft: #2a2420;
  --brand-line: rgba(26, 22, 18, 0.12);
}

body {
  font-family: "Cabinet Grotesk", system-ui, sans-serif;
  background: var(--brand-bone);
  color: var(--brand-charcoal);
}

/* ============ NAV ============ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 239, 230, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--brand-line);
}
.nav__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s-4);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--brand-charcoal);
}
.nav__logo svg {
  color: var(--brand-crimson);
}
.nav__links {
  display: flex;
  gap: var(--s-6);
  font-size: var(--t-sm);
  font-weight: 500;
}
.nav__links a {
  color: var(--brand-charcoal);
  opacity: 0.7;
  transition: opacity var(--d-1);
}
.nav__links a:hover {
  opacity: 1;
}
@media (max-width: 640px) {
  .nav__links {
    display: none;
  }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--t-sm);
  letter-spacing: -0.005em;
  transition: transform var(--d-2) var(--ease-out-expo),
    background var(--d-2), color var(--d-2);
  will-change: transform;
}
.btn--primary {
  background: var(--brand-charcoal);
  color: var(--brand-bone);
}
.btn--primary:hover {
  background: var(--brand-crimson);
  transform: translateY(-2px);
}
.btn--ghost {
  border: 1px solid var(--brand-charcoal);
  color: var(--brand-charcoal);
  padding-block: calc(var(--s-4) - 1px);
}
.btn--ghost:hover {
  background: var(--brand-charcoal);
  color: var(--brand-bone);
}
.btn--link {
  background: none;
  padding: var(--s-3) 0;
  color: var(--brand-charcoal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.btn--link:hover {
  color: var(--brand-crimson);
}
.btn--full {
  width: 100%;
  justify-content: center;
}
.btn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-brass);
  box-shadow: 0 0 0 0 var(--brand-brass);
  animation: pulse-dot 1.6s var(--ease-out-quart) infinite;
}
@keyframes pulse-dot {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.6);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(201, 169, 97, 0);
  }
}

/* ============ HERO ============ */
.hero {
  position: relative;
  padding-block: var(--s-10) var(--s-8);
  overflow: hidden;
}
.hero__eyebrow {
  color: var(--brand-crimson);
  display: inline-block;
  margin-bottom: var(--s-5);
}
.hero__h1 {
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-6);
  max-width: 18ch;
}
.hero__line {
  display: block;
  overflow: hidden;
}
.hero__line--accent {
  color: var(--brand-crimson);
  font-style: italic;
}
.hero__lead {
  font-size: clamp(var(--t-lg), 1.6vw, var(--t-xl));
  max-width: 56ch;
  margin-bottom: var(--s-7);
  color: var(--brand-charcoal-soft);
}
.hero__cta {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap;
}

/* Phone ring (floating right) */
.hero__phone {
  position: absolute;
  top: 8%;
  right: -4%;
  width: clamp(280px, 38vw, 540px);
  pointer-events: none;
  opacity: 0.92;
}
@media (max-width: 900px) {
  .hero__phone {
    position: relative;
    top: 0;
    right: 0;
    margin-block: var(--s-7);
    width: 60%;
  }
}
.ring {
  width: 100%;
  height: auto;
}
.ring__core {
  fill: var(--brand-crimson);
}
.ring__handset {
  fill: var(--brand-bone);
  transform-origin: 200px 200px;
  animation: handset-tilt 4s var(--ease-in-out-quart) infinite;
}
@keyframes handset-tilt {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
.ring__wave {
  fill: none;
  stroke: var(--brand-crimson);
  stroke-width: 2;
  opacity: 0;
  transform-origin: 200px 200px;
  animation: ring-pulse 2.4s var(--ease-out-expo) infinite;
}
.ring__wave--2 { animation-delay: 0.4s; }
.ring__wave--3 { animation-delay: 0.8s; }
@keyframes ring-pulse {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* Marquee */
.hero__marquee {
  margin-top: var(--s-9);
  border-block: 1px solid var(--brand-line);
  padding-block: var(--s-5);
  overflow: hidden;
}
.marquee {
  overflow: hidden;
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex;
  gap: var(--s-5);
  animation: marquee 30s linear infinite;
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  font-weight: 500;
  color: var(--brand-charcoal-soft);
  letter-spacing: -0.02em;
}
.marquee__track span:nth-child(even) {
  color: var(--brand-brass);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============ DEMO ============ */
.demo {
  padding-block: var(--s-10);
  background: var(--brand-charcoal);
  color: var(--brand-bone);
}
.demo .t-eyebrow {
  color: var(--brand-brass);
  display: block;
  margin-bottom: var(--s-5);
}
.demo h2 {
  max-width: 22ch;
  margin-bottom: var(--s-8);
}
.demo h2 em {
  color: var(--brand-brass);
  font-style: italic;
  font-weight: 500;
}
.demo__panel {
  background: var(--brand-charcoal-soft);
  border: 1px solid rgba(245, 239, 230, 0.1);
  border-radius: var(--r-xl);
  padding: var(--s-7);
  max-width: 900px;
}
.demo__caller {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-sm);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: rgba(245, 239, 230, 0.6);
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px dashed rgba(245, 239, 230, 0.15);
}
.demo__transcript p {
  margin-bottom: var(--s-4);
  font-size: var(--t-lg);
  line-height: 1.5;
}
.demo__transcript p strong {
  color: var(--brand-brass);
  font-weight: 600;
  margin-right: var(--s-3);
}
.demo__transcript p:nth-child(even) strong {
  color: var(--brand-bone);
}
.demo__wave {
  height: 64px;
  margin-block: var(--s-6);
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--brand-brass) 50%,
    transparent 100%
  );
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'><path d='M0 32 L4 32 L4 18 L8 18 L8 46 L12 46 L12 8 L16 8 L16 56 L20 56 L20 22 L24 22 L24 42 L28 42 L28 14 L32 14 L32 50 L36 50 L36 28 L40 28 L40 36 L44 36 L44 20 L48 20 L48 44 L52 44 L52 16 L56 16 L56 48 L60 48 L60 24 L64 24 L64 40 L68 40 L68 12 L72 12 L72 52 L76 52 L76 30 L80 30 L80 34 L84 34 L84 22 L88 22 L88 42 L92 42 L92 28 L96 28 L96 36 L100 36 Z' fill='black'/></svg>");
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'><path d='M0 32 L4 32 L4 18 L8 18 L8 46 L12 46 L12 8 L16 8 L16 56 L20 56 L20 22 L24 22 L24 42 L28 42 L28 14 L32 14 L32 50 L36 50 L36 28 L40 28 L40 36 L44 36 L44 20 L48 20 L48 44 L52 44 L52 16 L56 16 L56 48 L60 48 L60 24 L64 24 L64 40 L68 40 L68 12 L72 12 L72 52 L76 52 L76 30 L80 30 L80 34 L84 34 L84 22 L88 22 L88 42 L92 42 L92 28 L96 28 L96 36 L100 36 Z' fill='black'/></svg>");
  mask-size: 200% 100%;
  -webkit-mask-size: 200% 100%;
  animation: wave-shift 3s linear infinite;
}
@keyframes wave-shift {
  from { mask-position: 0% 0; -webkit-mask-position: 0% 0; }
  to { mask-position: 200% 0; -webkit-mask-position: 200% 0; }
}
.demo__meta {
  display: flex;
  gap: var(--s-6);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-sm);
  color: rgba(245, 239, 230, 0.7);
  flex-wrap: wrap;
}
.demo__meta span span {
  color: var(--brand-brass);
  font-weight: 600;
}

/* ============ HANDLES ============ */
.handles {
  padding-block: var(--s-10);
}
.handles .t-eyebrow {
  color: var(--brand-crimson);
  display: block;
  margin-bottom: var(--s-5);
}
.handles h2 {
  max-width: 20ch;
  margin-bottom: var(--s-8);
}
.handles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--brand-line);
  border: 1px solid var(--brand-line);
}
.card {
  background: var(--brand-bone);
  padding: var(--s-7);
  transition: background var(--d-2);
}
.card:hover {
  background: #ebe4d7;
}
.card__num {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-sm);
  color: var(--brand-brass);
  display: block;
  margin-bottom: var(--s-5);
}
.card__h {
  font-size: var(--t-xl);
  font-weight: 700;
  margin-bottom: var(--s-3);
  letter-spacing: -0.01em;
}
.card p {
  color: var(--brand-charcoal-soft);
  font-size: var(--t-base);
  line-height: 1.55;
}

/* ============ METRICS ============ */
.metrics {
  background: var(--brand-crimson);
  color: var(--brand-bone);
  padding-block: var(--s-9);
}
.metrics__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-7);
}
.metrics__num {
  display: block;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--brand-brass);
  margin-bottom: var(--s-3);
}
.metrics__label {
  display: block;
  font-size: var(--t-base);
  opacity: 0.85;
  max-width: 30ch;
}

/* ============ PRICING ============ */
.pricing {
  padding-block: var(--s-10);
  background: var(--brand-bone);
}
.pricing .t-eyebrow {
  color: var(--brand-crimson);
  display: block;
  margin-bottom: var(--s-5);
}
.pricing h2 {
  margin-bottom: var(--s-8);
}
.pricing__card {
  max-width: 540px;
  background: var(--brand-charcoal);
  color: var(--brand-bone);
  padding: var(--s-8);
  border-radius: var(--r-xl);
  border: 1px solid var(--brand-brass);
  position: relative;
}
.pricing__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r-xl);
  background: linear-gradient(140deg, var(--brand-brass), transparent 60%);
  z-index: -1;
}
.pricing__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px dashed rgba(245, 239, 230, 0.2);
}
.pricing__tag {
  font-size: var(--t-sm);
  color: var(--brand-brass);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pricing__price {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pricing__price small {
  font-size: var(--t-base);
  font-weight: 400;
  opacity: 0.6;
  margin-left: 4px;
}
.pricing__list {
  list-style: none;
  margin-bottom: var(--s-7);
}
.pricing__list li {
  padding-block: var(--s-3);
  border-bottom: 1px solid rgba(245, 239, 230, 0.08);
  padding-left: var(--s-5);
  position: relative;
}
.pricing__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-brass);
  font-weight: 700;
}
.pricing__fine {
  margin-top: var(--s-5);
  font-size: var(--t-sm);
  opacity: 0.6;
  text-align: center;
}

/* ============ BOOK ============ */
.book {
  padding-block: var(--s-10);
  background: var(--brand-charcoal);
  color: var(--brand-bone);
}
.book__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center;
}
@media (max-width: 768px) {
  .book__row {
    grid-template-columns: 1fr;
    gap: var(--s-7);
  }
}
.book__h {
  margin-bottom: var(--s-5);
}
.book__h em {
  color: var(--brand-brass);
  font-style: italic;
}
.book__form {
  display: grid;
  gap: var(--s-4);
}
.book__form label {
  display: grid;
  gap: var(--s-2);
}
.book__form label span {
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.book__form input {
  background: transparent;
  border: 1px solid rgba(245, 239, 230, 0.2);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  color: var(--brand-bone);
  font: inherit;
  font-size: var(--t-base);
  transition: border-color var(--d-1);
}
.book__form input:focus {
  outline: none;
  border-color: var(--brand-brass);
}
.book__form .btn {
  margin-top: var(--s-3);
  background: var(--brand-brass);
  color: var(--brand-charcoal);
}
.book__form .btn:hover {
  background: var(--brand-bone);
}

/* ============ FOOTER ============ */
.foot {
  background: var(--brand-charcoal);
  color: var(--brand-bone);
  padding-block: var(--s-6);
  border-top: 1px solid rgba(245, 239, 230, 0.08);
}
.foot__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-sm);
  opacity: 0.6;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.foot a {
  color: var(--brand-brass);
}

/* ============ KINETIC HEADLINE — char-level animation ============ */
.hero__h1 .char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
}