/* ==========================================================================
   DigitalProfile.lk — Home page sections
   Every colour, size, radius and shadow below resolves to a token in
   tokens.css. Raw numbers appear only for component geometry (widths,
   aspect ratios, transforms, blur radii) which are not design tokens.
   ========================================================================== */


/* ==========================================================================
   SHARED MOCKUP PARTS  (browser frame, phone, profile preview, NFC card)
   ========================================================================== */

/* ---- Browser frame ---- */
.browser {
  position: relative;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-float), var(--shadow-inset-top);
  overflow: hidden;
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-muted);
}

.browser__dots {
  display: flex;
  gap: var(--space-1);
  flex: none;
}

.browser__dots i {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
}

.browser__url {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.browser__url .icon {
  width: 12px;
  height: 12px;
  color: var(--color-success);
}

.browser__body {
  max-height: 520px;
  overflow: hidden;
}


/* ---- Phone frame ----
   The bezel is a physical object, so it stays dark in both themes. */
.phone {
  position: relative;
  width: min(300px, 76vw);
  margin-inline: auto;
  padding: var(--space-2);
  border-radius: var(--radius-3xl);
  background: var(--slate-900);
  box-shadow: var(--shadow-float);
}

.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgb(var(--rgb-white) / 0.14);
  pointer-events: none;
}

.phone__notch {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  width: 76px;
  height: 5px;
  border-radius: var(--radius-full);
  background: rgb(var(--rgb-white) / 0.22);
  z-index: var(--z-raised);
}

.phone__screen {
  height: 520px;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
}


/* ---- Profile preview (the generated page itself) ---- */
.pp {
  position: relative;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}

.pp__cover {
  height: 92px;
  background: var(--gradient-accent);
}

.pp__cover--a { background: linear-gradient(135deg, var(--violet-600), var(--blue-500)); }
.pp__cover--b { background: linear-gradient(135deg, var(--blue-600), var(--blue-400)); }

.pp__cover--photo {
  height: 104px;
  overflow: hidden;
}

.pp__cover--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-2);
  margin-top: -36px;
}

.pp__head--tight { gap: var(--space-3); margin-top: -28px; }

.pp__avatar {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-md);
}

.pp__head--tight .pp__avatar { width: 56px; height: 56px; }

.pp__avatar--center {
  display: block;
  width: 72px;
  height: 72px;
  margin: -36px auto var(--space-3);
}

.pp__avatar--overlap {
  display: block;
  width: 64px;
  height: 64px;
  margin: -32px 0 var(--space-2) var(--space-5);
}

.pp__name {
  margin: 0;
  padding-inline: var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.pp__role {
  margin: var(--space-1) 0 0;
  padding-inline: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.pp__head .pp__name,
.pp__head .pp__role { padding-inline: 0; }

.pp__name--center,
.pp__role--center { text-align: center; }

.pp__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
}

.pp__meta .icon { width: 12px; height: 12px; }

.pp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-1);
}

.pp__chips--tight { padding-top: var(--space-2); }

.pp__chips span {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-soft-border);
  color: var(--color-accent-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.pp__links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
}

.pp__links--stack {
  grid-template-columns: 1fr;
  padding-top: var(--space-3);
}

.pp__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.pp__link .icon { width: 14px; height: 14px; color: var(--color-accent-text); }

.pp__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: 0 var(--space-5) var(--space-5);
}

.pp__gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.pp__section { padding: var(--space-3) var(--space-5) 0; }

.pp__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-subtle);
}

.pp__label .icon { width: 13px; height: 13px; color: var(--color-accent-text); }

.pp__timeline {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-accent-soft-border);
}

.pp__event b {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.pp__event i {
  font-style: normal;
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
}

.pp__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}

.pp__grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

.pp__form {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

.pp__field {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
}

.pp__send {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--gradient-button);
  color: var(--color-text-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-align: center;
}


/* ---- The NFC card object ---- */
.nfc-card {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--space-1);
  width: clamp(168px, 46vw, 230px);
  aspect-ratio: 1.6;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--slate-800) 0%, var(--slate-900) 55%, var(--violet-700) 160%);
  border: 1px solid rgb(var(--rgb-white) / 0.16);
  box-shadow: var(--shadow-float);
  color: var(--slate-50);
  overflow: hidden;
}

.nfc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgb(var(--rgb-white) / 0.12) 50%, transparent 62%);
}

.nfc-card__chip {
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  width: 30px;
  height: 22px;
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, var(--amber-400), #d99a1d);
  opacity: 0.9;
}

.nfc-card__wave {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 26px;
  height: 26px;
  color: var(--blue-400);
}

.nfc-card__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.nfc-card__tag {
  font-size: var(--text-2xs);
  color: var(--slate-400);
}


/* ---- Small live indicator ---- */
.live-dot {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--green-500);
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  border: 2px solid var(--green-500);
  animation: pulse-ring 2s var(--ease-out) infinite;
}


/* ==========================================================================
   SECTION COPY BLOCKS
   Sections 2, 4 and 6 lay their copy out in flow rather than in .section-head,
   so the eyebrow and the lede carry their own vertical rhythm here. Everything
   below the lede already sets its own larger margin.
   ========================================================================== */
.problem__copy .eyebrow,
.nfc__copy .eyebrow,
.story__copy .eyebrow {
  margin-bottom: var(--space-4);
}

.problem__copy .lede,
.nfc__copy .lede,
.story__copy .lede {
  margin-top: var(--space-5);
}


/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  padding-top: calc(var(--header-height) + var(--space-12));
  padding-bottom: var(--space-section-sm);
  overflow-x: clip;
}

.hero__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.hero__title {
  margin: var(--space-6) 0 0;
  font-size: var(--text-h1);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
}

.hero__lede {
  max-width: 36ch;
  margin: var(--space-6) 0 0;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.hero__trust .icon {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-success);
}

/* -- Stage: browser frame plus floating objects -- */
.hero__stage {
  position: relative;
  perspective: 1400px;
}

.hero__glow {
  position: absolute;
  inset: -12% -10% -18%;
  border-radius: var(--radius-full);
  background: radial-gradient(60% 55% at 55% 45%, rgb(var(--rgb-blue-500) / 0.35), transparent 70%),
              radial-gradient(45% 50% at 25% 80%, rgb(var(--rgb-violet-600) / 0.3), transparent 72%);
  filter: blur(46px);
  z-index: -1;
}

.hero__stage .browser {
  transform: rotateX(6deg) rotateY(-7deg) rotateZ(1deg);
  transform-origin: center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.hero__stage:hover .browser { transform: rotateX(2deg) rotateY(-3deg); }

.hero__float {
  position: absolute;
  z-index: var(--z-raised);
}

/* On a phone the card tucks against the left edge of the stage; it only
   breaks out past the mockup once there is room either side of it. */
.hero__float--card {
  left: 0;
  bottom: -4%;
  transform: rotate(-8deg);
  animation: float-y 7s var(--ease-in-out) infinite;
}

.hero__float--chip {
  top: 8%;
  right: -4%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  color: var(--color-text);
  animation: float-y-sm 5.5s var(--ease-in-out) infinite 0.6s;
}

/* -- Stats row -- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: var(--space-8) 0 0;
  border-top: 1px solid var(--color-border);
}

.hero__stats li {
  display: grid;
  gap: var(--space-1);
}

.hero__stats strong {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__stats span {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}


/* ==========================================================================
   "Works with" marquee strip
   ========================================================================== */
.appstrip {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}

.appstrip__label {
  margin: 0 0 var(--space-8);
  padding-inline: var(--gutter);
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-subtle);
}

.appstrip__track {
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 12%, var(--black) 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--black) 12%, var(--black) 88%, transparent);
}

.appstrip__row {
  display: flex;
  flex: none;
  gap: var(--space-12);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0 var(--space-6);
  animation: marquee 38s linear infinite;
}

.appstrip__track:hover .appstrip__row { animation-play-state: paused; }

.appstrip__row li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-subtle);
  opacity: 0.7;
  transition: opacity var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.appstrip__row li:hover {
  opacity: 1;
  color: var(--color-text);
}

.appstrip__row .icon { width: 22px; height: 22px; }


/* ==========================================================================
   2. THE PROBLEM  (dark full-bleed band)
   ========================================================================== */
.problem__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.problem__pains {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.problem__pains li {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.problem__pains strong {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.problem__pains .icon {
  flex: none;
  margin-top: 3px;
  color: var(--color-accent-text);
}

/* -- Scattered links resolving into one -- */
.scatter {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-xl);
}

.scatter__pile {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  max-width: 420px;
}

.scatter__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  animation: float-y-sm 6s var(--ease-in-out) infinite;
}

.scatter__item .icon { width: 15px; height: 15px; color: var(--color-text-subtle); }

.scatter__item--1 { rotate: -4deg; animation-delay: 0s; }
.scatter__item--2 { rotate: 3deg;  animation-delay: 0.5s; }
.scatter__item--3 { rotate: -2deg; animation-delay: 1s; }
.scatter__item--4 { rotate: 5deg;  animation-delay: 1.5s; }
.scatter__item--5 { rotate: -3deg; animation-delay: 2s; }

.scatter__arrow {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

.scatter__arrow .icon {
  color: var(--color-text-on-accent);
  rotate: 90deg;
}

.scatter__result {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 360px;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border-accent);
  box-shadow: var(--shadow-lg), var(--shadow-accent);
}

.scatter__result > .icon {
  width: 26px;
  height: 26px;
  color: var(--color-accent-text);
}

.scatter__result-url {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.scatter__result-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* -- Pull quote -- */
.pullquote {
  position: relative;
  max-width: var(--container-narrow);
  margin: var(--space-section-sm) auto 0;
  padding: var(--space-10) var(--space-4) 0;
  text-align: center;
}

.pullquote__mark {
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-5);
  color: var(--color-accent-text);
  opacity: 0.85;
}

.pullquote blockquote {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  text-wrap: balance;
}

.pullquote blockquote::before { content: open-quote; }
.pullquote blockquote::after  { content: close-quote; }

.pullquote figcaption {
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.pullquote--inline {
  margin-inline: 0;
  padding-inline: 0;
  text-align: left;
}


/* ==========================================================================
   3. TEMPLATES  (interactive tabs)
   ========================================================================== */
.templates__head {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}

.tabs__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  box-shadow: var(--shadow-xs);
}

.tabs__tab {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.tabs__tab .icon { width: 20px; height: 20px; }

.tabs__tab-name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.tabs__tab-sub {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.tabs__tab-flag {
  position: absolute;
  top: calc(var(--space-2) * -1);
  right: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  color: var(--color-text-on-accent);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  box-shadow: var(--shadow-accent);
}

.tabs__tab:hover {
  color: var(--color-text);
  background: var(--color-surface);
}

.tabs__tab[aria-selected="true"] {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
  box-shadow: var(--shadow-md), var(--shadow-inset-top);
  transform: translateY(-1px);
}

.tabs__tab[aria-selected="true"] .icon { color: var(--color-accent-text); }

.tabs__panel {
  margin-top: var(--space-10);
  animation: panel-in var(--duration-slow) var(--ease-out) both;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.tplcard {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.tplcard__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.tplcard__sub {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tplcard__body {
  margin: var(--space-4) 0 var(--space-6);
  max-width: 48ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.tplcard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.tplcard__preview {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--space-6) 0;
}

.tplcard__preview::before {
  content: "";
  position: absolute;
  inset: 8% 10%;
  border-radius: var(--radius-full);
  background: radial-gradient(55% 55% at 50% 45%, rgb(var(--rgb-blue-500) / 0.3), transparent 70%);
  filter: blur(42px);
  z-index: -1;
}

.templates__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  max-width: 58ch;
  margin: var(--space-12) auto 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  text-align: center;
}

.templates__note .icon { flex: none; color: var(--color-accent-text); }


/* ==========================================================================
   4. NFC SMART CARD  (dark full-bleed band + bento grid)
   ========================================================================== */
.nfc__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.nfc__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}

.nfc__price-amount {
  font-size: var(--text-h3);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.nfc__price-note {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}

.nfc__actions { margin-top: var(--space-8); }

/* -- Overlapping photo stack -- */
.nfc__visual {
  position: relative;
  padding-bottom: var(--space-16);
}

.nfc__photo {
  margin: 0;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-float);
}

.nfc__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nfc__photo--main {
  aspect-ratio: 4 / 3.4;
  rotate: -1.5deg;
}

.nfc__photo--inset {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 46%;
  aspect-ratio: 1;
  rotate: 4deg;
  animation: float-y-sm 7s var(--ease-in-out) infinite;
}

.nfc__ping {
  position: absolute;
  top: 8%;
  left: -5%;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-accent-lg);
  color: var(--color-text-on-accent);
  animation: float-y 6s var(--ease-in-out) infinite;
}

.nfc__ping-ring {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-accent);
  animation: pulse-ring 2.4s var(--ease-out) infinite;
}

/* -- Bento grid -- */
.bento {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-section-sm);
}

.bento__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bento__media {
  margin: var(--space-6) 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.bento__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.bento__cell:hover .bento__media img { transform: scale(1.05); }

.bento__media--fill { flex: 1; }
.bento__media--fill img { height: 100%; aspect-ratio: 4 / 3; }


/* ==========================================================================
   5. HOW IT WORKS + 3-HOUR TRIAL
   ========================================================================== */
.steps__list {
  display: grid;
  gap: var(--space-10);
  list-style: none;
  margin: var(--space-section-sm) 0 0;
  padding: 0;
}

.steps__item {
  position: relative;
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.steps__num {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface);
  background-image: var(--gradient-accent-soft);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm), var(--shadow-inset-top);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-accent-text);
}

.steps__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-h5);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
}

.steps__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

/* -- Trial breakout panel -- */
.trial {
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-section-sm);
  padding: var(--space-8);
  border-radius: var(--radius-3xl);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  background-image: var(--gradient-accent-soft);
  box-shadow: var(--shadow-xl), var(--shadow-inset-top);
}

.trial__title {
  margin: var(--space-5) 0 0;
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.trial__text {
  margin: var(--space-4) 0 var(--space-8);
  max-width: 46ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.trial__prices {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.trial__price {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.trial__price--accent {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-md), var(--shadow-accent);
}

.trial__price-label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-subtle);
}

.trial__price-value {
  margin: var(--space-2) 0 0;
  font-size: var(--text-h4);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.trial__price-value span {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
}

.trial__price-note {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.trial__incl { margin-top: var(--space-2); }


/* ==========================================================================
   6. SUCCESS STORY
   ========================================================================== */
.story__inner {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.story__visual {
  position: relative;
  padding-bottom: var(--space-10);
}

.story__photo {
  margin: 0;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-float);
}

.story__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
}

.story__thumbs {
  position: absolute;
  left: -4%;
  bottom: 0;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  animation: float-y-sm 7s var(--ease-in-out) infinite;
}

.story__thumbs img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.story__badge {
  position: absolute;
  top: var(--space-6);
  right: -4%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-accent-lg);
  color: var(--color-text-on-accent);
  animation: float-y 6.5s var(--ease-in-out) infinite 0.4s;
}

.story__badge span {
  display: grid;
  line-height: var(--leading-snug);
  font-size: var(--text-2xs);
  opacity: 0.85;
}

.story__badge strong {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  opacity: 1;
}

.story__text {
  margin: var(--space-5) 0 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}

.story__stats {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-10) 0 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border);
}

.story__stats li { display: grid; gap: var(--space-1); }

.story__stats strong {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story__stats span {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}


/* ==========================================================================
   7. FINAL CALL TO ACTION
   ========================================================================== */
.finalcta { padding-bottom: var(--space-section); }

.finalcta__panel {
  position: relative;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--space-section-sm) 0;
  border-radius: var(--radius-3xl);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  text-align: center;
}

.finalcta__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 70% at 15% 10%, rgb(var(--rgb-white) / 0.22), transparent 60%),
              radial-gradient(50% 60% at 85% 100%, rgb(var(--rgb-slate-900) / 0.28), transparent 65%);
  pointer-events: none;
}

.finalcta__inner { position: relative; }

.finalcta .badge {
  background: rgb(var(--rgb-white) / 0.16);
  border-color: rgb(var(--rgb-white) / 0.32);
  color: var(--color-text-on-accent);
}

.finalcta .badge .icon { color: var(--color-text-on-accent); }

.finalcta__title {
  margin: var(--space-6) 0 0;
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--color-text-on-accent);
  text-wrap: balance;
}

.finalcta__lede {
  max-width: 54ch;
  margin: var(--space-5) auto 0;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgb(var(--rgb-white) / 0.88);
}

.finalcta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.finalcta .btn--secondary {
  background: rgb(var(--rgb-white) / 0.14);
  border-color: rgb(var(--rgb-white) / 0.34);
  color: var(--color-text-on-accent);
  backdrop-filter: blur(6px);
}

.finalcta .btn--secondary:hover {
  background: rgb(var(--rgb-white) / 0.24);
  border-color: rgb(var(--rgb-white) / 0.5);
}

.finalcta__contact {
  display: grid;
  justify-content: center;
  gap: var(--space-4);
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: var(--space-8) var(--gutter) 0;
  border-top: 1px solid rgb(var(--rgb-white) / 0.2);
}

.finalcta__contact li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  color: rgb(var(--rgb-white) / 0.9);
}

.finalcta__contact .icon { width: 18px; height: 18px; flex: none; }

.finalcta__contact a {
  color: var(--color-text-on-accent);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-bottom: 1px solid rgb(var(--rgb-white) / 0.4);
}

.finalcta__contact a:hover { border-bottom-color: var(--color-text-on-accent); }


/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

/* ---- 36rem / 576px ---- */
@media (min-width: 36rem) {
  .hero__float--card { left: -4%; bottom: -6%; }

  .scatter { padding: var(--space-10); }

  .finalcta__contact {
    grid-auto-flow: column;
    gap: var(--space-8);
  }
}

/* ---- 48rem / 768px — tablet ---- */
@media (min-width: 48rem) {
  .hero__stats { grid-template-columns: repeat(4, 1fr); }

  .bento { grid-template-columns: repeat(2, 1fr); }

  .steps__list { grid-template-columns: repeat(2, 1fr); }

  .trial {
    grid-template-columns: 1.1fr 0.9fr;
    padding: var(--space-10);
  }

  .story__stats {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---- 64rem / 1024px — desktop ---- */
@media (min-width: 64rem) {
  .hero { padding-top: calc(var(--header-height) + var(--space-20)); }

  /* Equal columns keep the display headline to two lines at every width */
  .hero__inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .hero__float--card { left: -9%; }

  .problem__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-16);
  }

  .templates__head {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: end;
    gap: var(--space-12);
  }

  .tplcard {
    grid-template-columns: 1fr 0.86fr;
    gap: var(--space-16);
  }

  .nfc__inner {
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-16);
  }

  /* Asymmetric bento: a wide lead cell, two stacked cells, one tall cell */
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "a a d"
      "b c d";
  }

  .bento__cell:nth-child(1) { grid-area: a; }
  .bento__cell:nth-child(2) { grid-area: b; }
  .bento__cell:nth-child(3) { grid-area: c; }
  .bento__cell:nth-child(4) { grid-area: d; }

  /* Four steps in a row, joined by a hairline */
  .steps__list {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }

  .steps__item {
    flex-direction: column;
    gap: var(--space-5);
  }

  .steps__item::before {
    content: "";
    position: absolute;
    top: 23px;
    left: 46px;
    right: calc(var(--space-8) * -1);
    height: 1px;
    background: var(--gradient-hairline);
  }

  .steps__item:last-child::before { display: none; }

  .trial { padding: var(--space-12); }

  .story__inner {
    grid-template-columns: 0.92fr 1.08fr;
    gap: var(--space-16);
  }

  .finalcta__panel { padding: var(--space-section) 0; }
}

/* ---- 80rem / 1280px ---- */
@media (min-width: 80rem) {
  .hero__float--card { left: -15%; bottom: -8%; }
  .hero__float--chip { right: -8%; }
  .nfc__photo--inset { right: -7%; }
  .story__thumbs { left: -9%; }
  .story__badge { right: -8%; }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__float--card,
  .hero__float--chip,
  .scatter__item,
  .nfc__photo--inset,
  .nfc__ping,
  .nfc__ping-ring,
  .story__thumbs,
  .story__badge,
  .live-dot::after,
  .appstrip__row,
  .tabs__panel {
    animation: none !important;
  }

  .hero__stage .browser,
  .hero__stage:hover .browser { transform: none; }

  .bento__cell:hover .bento__media img { transform: none; }
}