/* ==========================================================================
   Agency UI — shared tokens, primitives, homepage sections, mockups
   ========================================================================== */

body {
  --hp-ink: #0A0B0D;
  --hp-ink-2: #101216;
  --hp-ink-3: #15181D;
  --hp-line: rgba(255, 255, 255, 0.08);
  --hp-line-2: rgba(255, 255, 255, 0.14);
  --hp-text: #F5F5F4;
  --hp-muted: #A3A3A3;
  --hp-dim: #737373;
  --hp-paper: #F4F5F7;
  --hp-paper-ink: #0B0C0E;
  --hp-paper-muted: #52525B;
  --hp-paper-line: rgba(10, 11, 13, 0.09);
  --hp-amber: #FFAA32;
  --hp-amber-2: #FFC46B;
  --hp-amber-deep: #F28C14;
  --hp-r: 20px;
  --hp-r-sm: 14px;
  background: var(--hp-ink);
}

.site-main { overflow-x: clip; }
.site-main p { text-wrap: pretty; }

/* ---------- Primitives ---------- */

.ui-icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; display: inline-block; }

.hp-chip {
  --chip: 40px;
  width: var(--chip); height: var(--chip);
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  border-radius: 12px;
  color: var(--hp-amber);
  background:
    linear-gradient(180deg, rgba(255,170,50,.16), rgba(255,170,50,.06));
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.hp-chip .ui-icon { width: 20px; height: 20px; }
.hp-chip--lg { --chip: 48px; border-radius: 14px; }
.hp-chip--lg .ui-icon { width: 22px; height: 22px; }
.hp-chip--muted {
  color: var(--hp-muted);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--hp-line-2);
}
.hp-chip--warn { color: #FFB454; }

.hp-idx {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--hp-dim);
}

.hp-label {
  display: inline-flex; align-items: center; gap: .65rem;
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hp-amber) !important;
}
.hp-label span {
  display: inline-grid; place-items: center;
  min-width: 2.1rem; height: 1.6rem; padding: 0 .45rem;
  border-radius: 999px;
  color: inherit;
  background: rgba(255,170,50,.1);
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.28);
  letter-spacing: .02em;
}

.hp-pill {
  display: inline-flex; align-items: center;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hp-amber);
  background: rgba(255,170,50,.08);
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.24);
}

/* Buttons */
.hp-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  height: 52px; padding: 0 1.5rem;
  border: 0; border-radius: 999px;
  font-family: var(--font);
  font-size: .98rem; font-weight: 600; letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.hp-btn .ui-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.hp-btn:hover .ui-icon { transform: translate(2px, -2px); }
.hp-btn--lg { height: 58px; padding: 0 1.8rem; font-size: 1.02rem; }
.hp-btn--block { width: 100%; }
.hp-btn--primary {
  color: #160F04 !important;
  background: linear-gradient(180deg, var(--hp-amber-2) 0%, var(--hp-amber) 55%, var(--hp-amber-deep) 100%);
  box-shadow:
    0 10px 30px -8px rgba(255,170,50,.55),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.12);
}
.hp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px rgba(255,170,50,.7), inset 0 1px 0 rgba(255,255,255,.55);
}
.hp-btn--ghost {
  color: #fff !important;
  padding-left: .4rem;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}
.hp-btn--ghost:hover { background: rgba(255,255,255,.1); }
.hp-btn--ghost:hover .ui-icon { transform: none; }
.hp-btn__play {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: #160F04;
  background: var(--hp-amber);
}
.hp-btn__play .ui-icon { width: 15px; height: 15px; fill: currentColor; margin-left: 2px; }
.hp-btn--dark {
  color: #fff !important;
  background: var(--hp-ink);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.hp-btn--dark:hover { transform: translateY(-2px); background: #000; }

/* ---------- Sections ---------- */

.hp-section {
  position: relative;
  padding: clamp(5rem, 9vw, 8.5rem) 0;
  isolation: isolate;
}
.hp-section--flush { padding-top: 0; }

.hp-section--dark { background: var(--hp-ink); color: var(--hp-text); }
.hp-section--deep {
  background:
    radial-gradient(800px 400px at 85% 0%, rgba(255,170,50,.07), transparent 60%),
    var(--hp-ink-2);
  color: var(--hp-text);
  border-block: 1px solid var(--hp-line);
}
.hp-section--glow::before {
  content: "";
  position: absolute; z-index: -1;
  inset: 0;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(255,170,50,.10), transparent 70%);
  pointer-events: none;
}
.hp-section--dark::after,
.hp-section--deep::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}
.hp-section--dark p,
.hp-section--deep p { color: var(--hp-muted); }
.hp-section--dark h2, .hp-section--dark h3,
.hp-section--deep h2, .hp-section--deep h3 { color: var(--hp-text); }

.hp-section--light {
  background: var(--hp-paper);
  color: var(--hp-paper-ink);
}
.hp-section--light h2,
.hp-section--light h3,
.hp-section--light strong { color: var(--hp-paper-ink); }
.hp-section--light p { color: var(--hp-paper-muted); }
.hp-section--light .hp-label { color: #C46A00 !important; }
.hp-section--light .hp-label span { background: rgba(242,140,20,.1); box-shadow: inset 0 0 0 1px rgba(242,140,20,.3); }
.hp-section--light .hp-idx { color: #A1A1AA; }
.hp-section--light .hp-chip {
  color: #D67A00;
  background: linear-gradient(180deg, #FFF4E3, #FFE9C7);
  box-shadow: inset 0 0 0 1px rgba(242,140,20,.25);
}

/* Section heads */
.hp-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 820px; }
.hp-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.hp-head__lead { margin-top: 1.4rem; }
.hp-head__lead p { font-size: 1.04rem; line-height: 1.7; max-width: 62ch; }
.hp-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: end;
}
.hp-head--split .hp-head__lead { margin-top: 0; }
.hp-subhead {
  margin: clamp(3.5rem, 6vw, 5rem) 0 1.75rem;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.035em;
}

/* Cards */
.hp-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.5rem);
  border-radius: var(--hp-r);
}
.hp-card > * + *,
.hp-card > .hp-checks { margin-top: 1.25rem; }
.hp-card > .hp-chip + * { margin-top: 1.75rem; }
.hp-card__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: inherit !important;
}
.hp-card__head { display: flex; align-items: center; gap: .9rem; }
.hp-card__head + * { margin-top: 1.5rem; }
.hp-card--paper {
  background: #fff;
  color: var(--hp-paper-ink);
  box-shadow: 0 1px 0 rgba(10,11,13,.04), 0 24px 60px -30px rgba(10,11,13,.18), inset 0 0 0 1px var(--hp-paper-line);
}
.hp-card--ink {
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(255,170,50,.16), transparent 70%),
    var(--hp-ink);
  color: var(--hp-text);
  box-shadow: 0 30px 70px -30px rgba(10,11,13,.6);
}
.hp-card--ink p { color: var(--hp-muted) !important; }
.hp-card--ink .hp-card__title { color: #fff !important; }
.hp-card--paper .hp-card__title { color: var(--hp-paper-ink) !important; }
.hp-section--light .hp-card--ink .hp-chip {
  color: var(--hp-amber);
  background: linear-gradient(180deg, rgba(255,170,50,.16), rgba(255,170,50,.06));
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.22);
}
.hp-section--light .hp-card--ink .hp-chip--muted {
  color: var(--hp-muted);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--hp-line-2);
}

.hp-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

/* Check lists */
.hp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.hp-checks li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: .85rem;
  padding: .85rem 0;
  border-top: 1px solid var(--hp-paper-line);
  font-size: .98rem;
  line-height: 1.55;
  color: var(--hp-paper-muted);
}
.hp-checks li:first-child { border-top: 0; padding-top: 0; }
.hp-checks .ui-icon {
  width: 22px; height: 22px; padding: 4px;
  margin-top: 1px;
  border-radius: 50%;
  color: #160F04;
  background: var(--hp-amber);
  stroke-width: 3;
}
.hp-card--ink .hp-checks li,
.hp-section--dark .hp-checks li,
.hp-section--deep .hp-checks li { border-color: var(--hp-line); color: #C9C9C9; }
.hp-checks--minus .ui-icon { color: var(--hp-muted); background: rgba(255,255,255,.08); }
.hp-checks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.hp-checks--cols li:nth-child(2) { border-top: 0; padding-top: 0; }

/* Spotlight hover (JS sets --mx / --my) */
[data-spotlight] { position: relative; }
[data-spotlight]::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(255,170,50,.10), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
[data-spotlight]:hover::before { opacity: 1; }

/* ---------- Hero ---------- */

.hp-hero.hero {
  min-height: min(calc(100svh - var(--header-h)), 860px);
  padding: 0;
}
.hp-hero .hero__scrim {
  background:
    linear-gradient(90deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.55) 30%, rgba(10,11,13,.12) 58%, transparent 75%),
    linear-gradient(0deg, rgba(10,11,13,.9) 0%, transparent 28%);
}
.hp-hero__layout {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hp-hero__content { max-width: 660px; }

.hp-badge {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.6rem;
  padding: .45rem .9rem .45rem .7rem;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff !important;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
}
.hp-badge__dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hp-amber);
  box-shadow: 0 0 0 4px rgba(255,170,50,.18);
}
.hp-badge__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--hp-amber);
  animation: hp-ping 2s var(--ease) infinite;
}
@keyframes hp-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3); opacity: 0; } }

.hp-hero__title {
  margin: 0 0 1.5rem;
  font-size: clamp(2.3rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #fff;
  text-wrap: balance;
}
.hp-hero__accent {
  background: linear-gradient(100deg, #FFD08A 0%, var(--hp-amber) 45%, var(--hp-amber-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-hero__lead {
  max-width: 50ch;
  margin: 0 0 2.2rem;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.65;
  color: rgba(255,255,255,.78) !important;
}
.hp-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.hp-hero__features {
  position: relative; z-index: 1;
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
}
.hp-features {
  list-style: none; margin: 0; padding: .5rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
  border-radius: 22px;
  background: rgba(16,18,22,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -20px rgba(0,0,0,.6);
  backdrop-filter: blur(18px) saturate(1.3);
}
.hp-feature {
  display: flex; align-items: center; gap: .85rem;
  padding: .9rem 1rem;
  border-radius: 16px;
  transition: background .3s var(--ease);
}
.hp-feature:hover { background: rgba(255,255,255,.04); }
.hp-feature__title { font-weight: 600; font-size: .95rem; line-height: 1.3; letter-spacing: -0.01em; color: #fff; }

/* Ticker */
.hp-ticker {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 0;
  background: var(--hp-ink);
  border-block: 1px solid var(--hp-line);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.hp-ticker__track {
  display: flex; width: max-content;
  animation: hp-marquee 45s linear infinite;
  will-change: transform;
}
.hp-ticker__item {
  display: inline-flex; align-items: center; gap: .85rem;
  padding-right: 3rem;
  white-space: nowrap;
  font-size: 1.05rem; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255,255,255,.55);
}
.hp-ticker__item .ui-icon { width: 16px; height: 16px; color: var(--hp-amber); }
@keyframes hp-marquee { to { transform: translateX(-50%); } }

/* ---------- Areas bento ---------- */

.hp-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.hp-tile {
  padding: 1.75rem;
  border-radius: var(--hp-r);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  box-shadow: inset 0 0 0 1px var(--hp-line);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.hp-tile:hover { box-shadow: inset 0 0 0 1px rgba(255,170,50,.35); transform: translateY(-3px); }
.hp-tile__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.5rem; }
.hp-tile h3 { margin: 0 0 .75rem; font-size: 1.3rem; }
.hp-tile p { margin: 0; font-size: .95rem; line-height: 1.65; }
.hp-tile:first-child {
  background:
    radial-gradient(500px 260px at 0% 0%, rgba(255,170,50,.14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}

/* ---------- Services list ---------- */

.hp-svc {
  border-radius: var(--hp-r);
  background: #fff;
  box-shadow: 0 30px 70px -40px rgba(10,11,13,.25), inset 0 0 0 1px var(--hp-paper-line);
  overflow: hidden;
}
.hp-svc__legend,
.hp-svc__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem);
}
.hp-svc__legend {
  padding-block: 1rem;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: #A1A1AA;
  background: #FAFAFA;
  border-bottom: 1px solid var(--hp-paper-line);
}
.hp-svc__row {
  align-items: start;
  border-top: 1px solid var(--hp-paper-line);
  transition: background .3s var(--ease);
}
.hp-svc__legend + .hp-svc__row { border-top: 0; }
.hp-svc__row:hover { background: #FFFAF2; }
.hp-svc__name { display: flex; align-items: center; gap: .9rem; }
.hp-svc__name .hp-idx { width: 1.6rem; }
.hp-svc__name h3 { margin: 0; font-size: 1.12rem; }
.hp-svc__desc { margin: 0; font-size: .96rem; line-height: 1.6; }
.hp-svc__why { margin: 0; font-size: .96rem; line-height: 1.6; color: var(--hp-paper-ink) !important; }
.hp-svc__why span { display: none; }

/* ---------- Process ---------- */

.hp-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: step;
}
.hp-step {
  padding: 1.6rem 1.5rem 1.75rem;
  border-radius: var(--hp-r);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  box-shadow: inset 0 0 0 1px var(--hp-line);
  overflow: hidden;
}
.hp-step::after {
  content: "";
  position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--hp-amber), transparent);
  opacity: .7;
}
.hp-step__num {
  display: block;
  margin-bottom: 2.25rem;
  font-size: 2.75rem; line-height: 1; font-weight: 500;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,170,50,.65);
}
.hp-step p { margin: 0; font-size: .96rem; line-height: 1.6; color: #D4D4D4 !important; }

/* Panel + tables */
.hp-panel {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 24px;
  background: var(--hp-ink-2);
  box-shadow: inset 0 0 0 1px var(--hp-line);
}
.hp-panel__head {
  display: flex; gap: 1.25rem; align-items: flex-start;
  margin-bottom: 2rem;
  max-width: 900px;
}
.hp-panel__head h3 { margin: 0 0 .65rem; font-size: clamp(1.3rem, 2vw, 1.65rem); letter-spacing: -0.03em; }
.hp-panel__head p { margin: 0; }

.hp-table-wrap {
  border-radius: var(--hp-r-sm);
  box-shadow: inset 0 0 0 1px var(--hp-line);
  overflow: hidden;
}
.hp-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.hp-table th {
  padding: 1rem 1.25rem;
  text-align: left;
  font-family: var(--mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hp-amber);
  background: rgba(255,170,50,.05);
  border-bottom: 1px solid var(--hp-line);
}
.hp-table td {
  padding: 1.15rem 1.25rem;
  vertical-align: top;
  line-height: 1.55;
  color: var(--hp-muted);
  border-top: 1px solid var(--hp-line);
}
.hp-table tr:first-child td { border-top: 0; }
.hp-table tbody tr { transition: background .25s; }
.hp-table tbody tr:hover { background: rgba(255,255,255,.02); }
.hp-table td:first-child { color: var(--hp-text); width: 26%; }
.hp-table__problem { display: flex; gap: .7rem; align-items: flex-start; }
.hp-table__problem .ui-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--hp-amber); }
.hp-table__problem strong { font-weight: 600; }

/* ---------- Methods ---------- */

.hp-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}
.hp-intro .hp-head { margin-bottom: 0; }

.hp-mock {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, #16191F, #0F1115);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.09),
    0 40px 80px -30px rgba(0,0,0,.8),
    0 0 0 8px rgba(255,255,255,.02);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
  transition: transform .8s var(--ease);
}
.hp-mock:hover { transform: none; }
.hp-mock::after {
  content: ""; position: absolute; inset: auto -20% -60% 30%; height: 80%;
  background: radial-gradient(closest-side, rgba(255,170,50,.18), transparent);
  pointer-events: none;
}
.hp-mock__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--hp-line);
}
.hp-mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.hp-mock__bar em {
  margin-left: .75rem;
  font-family: var(--mono); font-style: normal; font-size: .72rem;
  color: var(--hp-dim);
}
.hp-mock__body {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.5rem; align-items: center;
  padding: 1.5rem 1.4rem 1rem;
}
.hp-mock__score { position: relative; width: 120px; height: 120px; }
.hp-mock__score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hp-mock__track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 9; }
.hp-mock__value {
  fill: none; stroke: var(--hp-amber); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 314; stroke-dashoffset: 25;
  filter: drop-shadow(0 0 6px rgba(255,170,50,.5));
}
.hp-mock__score div {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.hp-mock__score strong { font-size: 2rem; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.hp-mock__score small { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-dim); margin-top: .3rem; }
.hp-mock__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.hp-mock__rows li {
  display: grid; grid-template-columns: 92px 1fr 26px; gap: .75rem; align-items: center;
  font-size: .78rem; color: var(--hp-muted);
}
.hp-mock__rows i {
  position: relative; height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden;
}
.hp-mock__rows i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hp-amber-deep), var(--hp-amber-2));
}
.hp-mock__rows b { font-family: var(--mono); font-weight: 500; color: #fff; text-align: right; }
.hp-mock__chart { position: relative; height: 130px; margin: .5rem 1.4rem 1.4rem; border-radius: 14px; background: rgba(255,255,255,.02); box-shadow: inset 0 0 0 1px var(--hp-line); overflow: hidden; }
.hp-mock__chart > svg { position: absolute; inset: 20px 0 0; width: 100%; height: calc(100% - 20px); }
.hp-mock__tag {
  position: absolute; top: .7rem; left: .8rem;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--mono); font-size: .68rem; color: var(--hp-amber);
}
.hp-mock__tag .ui-icon { width: 14px; height: 14px; }

.hp-methods {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.hp-methods__list .hp-card__title { margin-bottom: 1.5rem; color: var(--hp-text) !important; }
.hp-quote {
  position: relative;
  margin: 0;
  padding: 2rem;
  border-radius: var(--hp-r);
  background:
    radial-gradient(400px 200px at 100% 100%, rgba(255,170,50,.14), transparent 70%),
    rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px var(--hp-line);
}
.hp-quote__mark { width: 34px; height: 34px; color: var(--hp-amber); margin-bottom: 1.25rem; }
.hp-quote p { margin: 0; font-size: 1.08rem; line-height: 1.65; color: #E5E5E5 !important; letter-spacing: -0.01em; }

.hp-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.hp-tool {
  padding: 1.6rem;
  border-radius: var(--hp-r);
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px var(--hp-line);
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.hp-tool:hover { box-shadow: inset 0 0 0 1px rgba(255,170,50,.35); transform: translateY(-3px); }
.hp-tool .hp-chip { margin-bottom: 1.75rem; }
.hp-tool h3 { margin: 0 0 .6rem; font-size: 1.05rem; line-height: 1.3; }
.hp-tool p { margin: 0; font-size: .9rem; line-height: 1.6; }

/* ---------- Results ---------- */

.hp-sticky-split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.hp-sticky-split__aside { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; }
.hp-sticky-split__aside .hp-btn { margin-top: 2rem; }

.hp-results {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.hp-result {
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: 1.5rem;
  border-radius: var(--hp-r);
  background: #fff;
  box-shadow: 0 20px 50px -35px rgba(10,11,13,.3), inset 0 0 0 1px var(--hp-paper-line);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hp-result:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(10,11,13,.3), inset 0 0 0 1px rgba(242,140,20,.4); }
.hp-result__top { display: flex; justify-content: space-between; align-items: center; }
.hp-result__arrow {
  width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  color: #D67A00; background: #FFF1DC;
}
.hp-result__text { font-size: .98rem; line-height: 1.6; color: var(--hp-paper-ink); }
.hp-results li:nth-child(4n+1),
.hp-results li:nth-child(4n+4) {
  background: var(--hp-ink);
  box-shadow: 0 30px 60px -30px rgba(10,11,13,.6);
}
.hp-results li:is(:nth-child(4n+1), :nth-child(4n+4)) .hp-result__text { color: #E5E5E5; }
.hp-results li:is(:nth-child(4n+1), :nth-child(4n+4)) .hp-result__arrow { color: #160F04; background: var(--hp-amber); }

/* ---------- Cases ---------- */

.hp-stats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-radius: 24px;
  background: rgba(255,255,255,.02);
  box-shadow: inset 0 0 0 1px var(--hp-line);
}
.hp-stat {
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--hp-line);
}
.hp-stat:first-child { border-left: 0; }
.hp-stat__value {
  display: flex; align-items: baseline; gap: .15rem;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.05em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hp-stat__value em {
  font-style: normal;
  font-size: .5em;
  letter-spacing: -0.02em;
  color: var(--hp-amber);
}
.hp-stat__label {
  display: block; margin-top: .85rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hp-dim);
}

.hp-cta {
  position: relative;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center;
  padding: clamp(2rem, 4.5vw, 3.75rem);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(600px 300px at 90% 120%, rgba(255,255,255,.35), transparent 60%),
    linear-gradient(120deg, #FFB547 0%, #FF9A1F 55%, #F27A0C 100%);
  box-shadow: 0 40px 100px -40px rgba(255,150,30,.6);
}
.hp-cta::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, transparent 30%, #000);
  pointer-events: none;
}
.hp-cta__copy { position: relative; max-width: 720px; }
.hp-cta h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.045em;
  color: #140D02 !important;
}
.hp-cta p { margin: 0; color: rgba(20,13,2,.75) !important; font-size: 1.02rem; }
.hp-cta .hp-btn { position: relative; }

.hp-case { margin-top: clamp(4rem, 7vw, 6rem); }
.hp-case__intro { max-width: 820px; margin-bottom: 2rem; }
.hp-case__intro h2 {
  margin: 1.1rem 0 1rem;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -0.04em; line-height: 1.08;
}
.hp-case__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.hp-case__card {
  padding: 1.75rem;
  border-radius: var(--hp-r);
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px var(--hp-line);
}
.hp-case__card.is-highlight {
  background: radial-gradient(400px 220px at 0% 0%, rgba(255,170,50,.16), transparent 70%), rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.3);
}
.hp-case__card-head { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.hp-case__card-head h3 { margin: 0; font-size: 1.15rem; }
.hp-case__card p { margin: 0; font-size: .95rem; line-height: 1.65; }

/* ---------- ROI ---------- */

.hp-roi {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem;
}
.hp-roi__panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 24px;
  background: var(--hp-ink-2);
  box-shadow: inset 0 0 0 1px var(--hp-line);
}
.hp-roi__panel--accent {
  background:
    radial-gradient(500px 260px at 100% 0%, rgba(255,170,50,.16), transparent 65%),
    var(--hp-ink-2);
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.25);
}
.hp-roi__label {
  margin: 0 0 1rem;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hp-dim) !important;
}
.hp-roi__label { display: flex; align-items: center; gap: .55rem; }
.hp-roi__step {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: .68rem; letter-spacing: 0; color: var(--hp-amber);
  background: rgba(255,170,50,.1);
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.3);
}
.hp-roi__metrics, .hp-roi__kpis { display: grid; gap: .65rem; }
.hp-roi__metrics { margin-bottom: 2rem; }
.hp-roi__metrics div, .hp-roi__kpis div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 1.15rem;
  border-radius: var(--hp-r-sm);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px var(--hp-line);
}
.hp-roi__metrics span, .hp-roi__kpis span { color: var(--hp-muted); font-size: .92rem; }
.hp-roi__metrics strong { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hp-roi__metrics .hp-roi__slider {
  display: grid; gap: .85rem;
  padding: 1rem 1.15rem 1.15rem;
  border-radius: var(--hp-r-sm);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px var(--hp-line);
  cursor: pointer;
}
.hp-roi__slider-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hp-roi__slider-head span { color: var(--hp-muted); font-size: .92rem; }
.hp-roi__slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; margin: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--hp-amber-deep), var(--hp-amber) var(--p, 0%), rgba(255,255,255,.1) var(--p, 0%));
  outline: none;
  cursor: pointer;
}
.hp-roi__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  border: 4px solid var(--hp-amber);
  box-shadow: 0 0 0 4px rgba(255,170,50,.18), 0 4px 12px rgba(0,0,0,.4);
  transition: transform .2s var(--ease);
}
.hp-roi__slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  border: 4px solid var(--hp-amber);
  box-shadow: 0 0 0 4px rgba(255,170,50,.18), 0 4px 12px rgba(0,0,0,.4);
}
.hp-roi__slider input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.hp-roi__slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(255,170,50,.35); }
.hp-roi [data-roi-out].is-updated { animation: hp-roi-flash .5s var(--ease); }
@keyframes hp-roi-flash { 0% { opacity: .35; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
.hp-roi__main strong, .hp-roi__kpis strong { display: inline-block; }
.hp-roi__tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.hp-roi__tier {
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
  padding: 1rem;
  border: 0; border-radius: var(--hp-r-sm);
  font-size: .85rem; color: var(--hp-muted);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px var(--hp-line);
  cursor: pointer;
  transition: .25s var(--ease);
}
.hp-roi__tier strong { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.hp-roi__tier:hover { box-shadow: inset 0 0 0 1px var(--hp-line-2); }
.hp-roi__tier.is-active {
  color: rgba(20,13,2,.7);
  background: linear-gradient(180deg, var(--hp-amber-2), var(--hp-amber));
  box-shadow: 0 10px 30px -10px rgba(255,170,50,.6);
}
.hp-roi__tier.is-active strong { color: #140D02; }
.hp-roi__plan { margin: 0 0 .25rem; font-weight: 600; color: #fff !important; }
.hp-roi__main {
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  font-size: 1.05rem; color: var(--hp-muted) !important;
}
.hp-roi__main strong {
  font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1; font-weight: 600; letter-spacing: -0.06em;
  background: linear-gradient(100deg, #FFD08A, var(--hp-amber) 50%, var(--hp-amber-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hp-roi__net { margin: .5rem 0 1.75rem; }
.hp-roi__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-roi__kpis div { flex-direction: column; align-items: flex-start; gap: .35rem; }
.hp-roi__kpis span { font-size: .78rem; }
.hp-roi__kpis strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.04em; color: #fff; }
.hp-roi__kpis small { font-size: .78rem; color: var(--hp-dim); }
.hp-roi__note { margin: 1.5rem 0; font-size: .84rem; line-height: 1.6; color: var(--hp-dim) !important; }

/* ---------- Contact ---------- */

.hp-contact {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(1.75rem, 4.5vw, 4rem);
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(700px 400px at 0% 0%, rgba(255,170,50,.18), transparent 60%),
    radial-gradient(500px 300px at 100% 100%, rgba(255,170,50,.08), transparent 60%),
    var(--hp-ink-2);
  box-shadow: inset 0 0 0 1px var(--hp-line-2), 0 40px 100px -40px rgba(0,0,0,.8);
}
.hp-contact__info h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.02; letter-spacing: -0.05em;
}
.hp-contact__info > p:not(.hp-label) { max-width: 46ch; font-size: 1.04rem; }
.hp-contact__meta { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: .9rem; }
.hp-contact__meta li { display: flex; align-items: center; gap: .9rem; color: #E5E5E5; font-weight: 500; }
.hp-contact__meta a:hover { color: var(--hp-amber); }

.hp-form {
  display: grid; gap: 1rem; align-content: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 24px;
  background: rgba(10,11,13,.6);
  box-shadow: inset 0 0 0 1px var(--hp-line);
  backdrop-filter: blur(10px);
}
.hp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hp-form label { display: grid; gap: .5rem; }
.hp-form label span {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hp-dim);
}
.hp-form input,
.hp-form textarea {
  width: 100%;
  padding: .95rem 1.05rem;
  border: 0; border-radius: 12px;
  font-size: .98rem;
  color: #fff;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--hp-line);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
  resize: vertical;
}
.hp-form input::placeholder { color: #525252; }
.hp-form input:focus,
.hp-form textarea:focus {
  outline: none;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.6), 0 0 0 4px rgba(255,170,50,.12);
}
.hp-form .hp-btn { margin-top: .5rem; }

/* ---------- Lead form (Contact/Lead Form plugin) ---------- */
/* Doubled .clf beats the plugin's own multi-class selectors regardless of load order. */
.isa-lead { --lead-ink: #fff; --lead-bg: rgba(255,255,255,.04); --lead-bg-focus: rgba(255,255,255,.06); --lead-line: var(--hp-line); --lead-ph: #5f5f5f; }
.section--light .isa-lead { --lead-ink: var(--ip-ink, #0A0B0D); --lead-bg: #F6F7F9; --lead-bg-focus: #fff; --lead-line: var(--ip-line, rgba(10,11,13,.1)); --lead-ph: #9AA0A9; }
.isa-lead .clf.clf { color: var(--lead-ink); font-family: var(--font); }
.isa-lead .clf.clf .clf__inner { max-width: none; }
.isa-lead .clf.clf .clf__form { display: grid; gap: 1rem; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.isa-lead .clf.clf .clf__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.isa-lead .clf.clf .clf__field { display: grid; gap: .5rem; margin: 0; }
.isa-lead .clf.clf .clf__label {
  margin: 0;
  font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hp-dim);
}
.isa-lead .clf.clf .clf__req { color: var(--hp-amber); }
body .isa-lead .clf.clf .clf__form .clf__input {
  width: 100%; height: auto; min-height: 0;
  margin: 0; padding: .95rem 1.05rem;
  border: 0; border-radius: 12px;
  font-family: var(--font); font-size: .98rem; line-height: 1.4;
  color: var(--lead-ink);
  background: var(--lead-bg);
  box-shadow: inset 0 0 0 1px var(--lead-line);
  outline: none;
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
body .isa-lead .clf.clf .clf__form .clf__input::placeholder { color: var(--lead-ph); opacity: 1; }
body .isa-lead .clf.clf .clf__form .clf__input:focus {
  background: var(--lead-bg-focus);
  box-shadow: inset 0 0 0 1px rgba(255,170,50,.6), 0 0 0 4px rgba(255,170,50,.12);
}
body .isa-lead .clf.clf .clf__form .clf__input:user-invalid { box-shadow: inset 0 0 0 1px rgba(239,68,68,.65); }
body .isa-lead .clf.clf .clf__form .clf__textarea { min-height: 130px; resize: vertical; }
.isa-lead .clf.clf .clf__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.isa-lead .clf.clf .clf__actions { margin-top: .25rem; }
body .isa-lead .clf.clf .clf__form .clf__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; height: 54px; min-height: 0; padding: 0 1.5rem;
  border: 0; border-radius: 999px;
  font-family: var(--font); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none;
  color: #160F04;
  background: linear-gradient(180deg, var(--hp-amber-2) 0%, var(--hp-amber) 55%, var(--hp-amber-deep) 100%);
  box-shadow: 0 10px 30px -8px rgba(255,170,50,.55), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.12);
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .2s;
}
body .isa-lead .clf.clf .clf__form .clf__submit:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(255,170,50,.7), inset 0 1px 0 rgba(255,255,255,.55); }
body .isa-lead .clf.clf .clf__form .clf__submit:disabled { opacity: .65; cursor: progress; transform: none; }
.isa-lead .clf.clf .clf__arr { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.isa-lead .clf.clf .clf__submit:hover .clf__arr { transform: translateX(3px); }
.isa-lead .clf.clf .clf__consent { margin: 0; font-size: .8rem; color: var(--hp-dim); }
.isa-lead .clf.clf .clf__consent a,
.isa-lead .clf.clf .clf__check a { color: var(--hp-amber); }
.isa-lead .clf.clf .clf__alert { margin: 0; padding: .9rem 1rem; border-radius: 12px; font-size: .92rem; line-height: 1.5; border: 0; }
.isa-lead .clf.clf .clf__alert--ok { color: #BBF7D0; background: rgba(34,197,94,.12); box-shadow: inset 0 0 0 1px rgba(34,197,94,.3); }
.isa-lead .clf.clf .clf__alert--err { color: #FECACA; background: rgba(239,68,68,.12); box-shadow: inset 0 0 0 1px rgba(239,68,68,.3); }
.section--light .isa-lead .clf.clf .clf__alert--ok { color: #166534; background: #DCFCE7; box-shadow: none; }
.section--light .isa-lead .clf.clf .clf__alert--err { color: #991B1B; background: #FEE2E2; box-shadow: none; }
@media (max-width: 640px) {
  .isa-lead .clf.clf .clf__row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- FAQ ---------- */

.hp-faq { display: grid; gap: .75rem; }
.hp-faq__item {
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hp-paper-line);
  transition: box-shadow .3s var(--ease);
}
.hp-faq__item[open] { box-shadow: 0 24px 50px -30px rgba(10,11,13,.25), inset 0 0 0 1px rgba(242,140,20,.35); }
.hp-faq__item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.35rem 1.5rem;
  font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--hp-paper-ink);
  cursor: pointer;
  list-style: none;
}
.hp-faq__item summary::-webkit-details-marker { display: none; }
.hp-faq__toggle {
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--hp-paper);
  color: var(--hp-paper-ink);
  transition: transform .35s var(--ease), background .3s, color .3s;
}
.hp-faq__toggle .ui-icon { width: 16px; height: 16px; }
.hp-faq__item[open] .hp-faq__toggle { transform: rotate(45deg); background: var(--hp-amber); color: #140D02; }
.hp-faq__item p { margin: 0; padding: 0 1.5rem 1.5rem; max-width: 64ch; }

/* ---------- Author ---------- */

.hp-author {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: 24px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--hp-paper-line);
}
.hp-author__avatar {
  width: 72px; height: 72px; border-radius: 20px;
  display: grid; place-items: center;
  font-weight: 600; font-size: 1.35rem; letter-spacing: -0.03em;
  color: var(--hp-amber);
  background: var(--hp-ink);
}
.hp-author__by { margin: 0 0 .35rem !important; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #A1A1AA !important; }
.hp-author__name { margin: 0 !important; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; color: var(--hp-paper-ink) !important; }
.hp-author__role { margin: .15rem 0 1rem !important; font-size: .92rem; color: #C46A00 !important; font-weight: 500; }

/* ---------- See also ---------- */

.hp-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.hp-link {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: 1.25rem 1.35rem;
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  box-shadow: inset 0 0 0 1px var(--hp-line);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.hp-link h3 { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.015em; }
.hp-link__arrow {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  color: var(--hp-muted);
  background: rgba(255,255,255,.05);
  transition: .3s var(--ease);
}
.hp-link__arrow .ui-icon { width: 16px; height: 16px; }
.hp-link:hover { background: rgba(255,170,50,.06); box-shadow: inset 0 0 0 1px rgba(255,170,50,.35); color: #fff; }
.hp-link:hover .hp-link__arrow { color: #140D02; background: var(--hp-amber); transform: rotate(45deg); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .hp-steps, .hp-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-stat:nth-child(4) { border-left: 0; }
  .hp-stat:nth-child(n+4) { border-top: 1px solid var(--hp-line); }
  .hp-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hp-head--split,
  .hp-intro,
  .hp-methods,
  .hp-sticky-split,
  .hp-roi,
  .hp-contact,
  .hp-duo,
  .hp-cta { grid-template-columns: minmax(0, 1fr); }
  .hp-head--split { gap: 1.25rem; }
  .hp-sticky-split__aside { position: static; }
  .hp-mock { transform: none; }
  .hp-svc__legend { display: none; }
  .hp-svc__row { grid-template-columns: minmax(0, 1fr); gap: .85rem; }
  .hp-svc__why {
    padding: .9rem 1rem;
    border-radius: 12px;
    background: #FFF7EA;
  }
  .hp-svc__why span {
    display: block; margin-bottom: .3rem;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
    color: #C46A00;
  }
  .hp-case__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-cta .hp-btn { justify-self: start; }

  .hp-table thead { display: none; }
  .hp-table, .hp-table tbody, .hp-table tr, .hp-table td { display: block; width: 100% !important; }
  .hp-table tr { padding: 1.1rem 1.15rem; border-top: 1px solid var(--hp-line); }
  .hp-table tr:first-child { border-top: 0; }
  .hp-table td { padding: .35rem 0; border: 0; }
  .hp-table td::before {
    content: attr(data-label);
    display: block; margin-bottom: .2rem;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--hp-amber);
  }
  .hp-table td:first-child::before { display: none; }
}

@media (max-width: 640px) {
  .hp-section { padding: 4.5rem 0; }
  .hp-section--flush { padding-top: 0; }
  .hp-hero__title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hp-hero__cta .hp-btn { flex: 1 1 100%; }
  .hp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; }
  .hp-feature { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .8rem; }
  .hp-feature__title { font-size: .86rem; }
  .hp-steps, .hp-tools, .hp-bento, .hp-results, .hp-links { grid-template-columns: minmax(0, 1fr); }
  .hp-checks--cols { grid-template-columns: minmax(0, 1fr); }
  .hp-checks--cols li:nth-child(2) { border-top: 1px solid var(--hp-line); padding-top: .85rem; }
  .hp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-stat { border-left: 0 !important; border-top: 1px solid var(--hp-line); }
  .hp-stat:nth-child(-n+2) { border-top: 0; }
  .hp-stat:nth-child(even) { border-left: 1px solid var(--hp-line) !important; }
  .hp-stat:last-child { grid-column: 1 / -1; }
  .hp-hero .hero__poster, .hp-hero .hero__video { object-position: 70% 75%; }
  .hp-hero .hero__scrim {
    background:
      linear-gradient(180deg, rgba(10,11,13,.55) 0%, rgba(10,11,13,.78) 35%, rgba(10,11,13,.6) 62%, rgba(10,11,13,.92) 100%),
      linear-gradient(90deg, rgba(10,11,13,.5), rgba(10,11,13,.15));
  }
  .hp-roi { gap: .75rem; }
  .hp-roi__panel { padding: 1.15rem; border-radius: 20px; }
  .hp-roi__label { margin-bottom: .75rem; font-size: .68rem; }
  .hp-roi__metrics { gap: 0; margin-bottom: 1.25rem; }
  .hp-roi__metrics .hp-roi__slider {
    gap: .55rem; padding: .8rem 0;
    border-radius: 0; background: none; box-shadow: none;
    border-top: 1px solid var(--hp-line);
  }
  .hp-roi__metrics .hp-roi__slider:first-child { padding-top: .25rem; border-top: 0; }
  .hp-roi__slider-head span { font-size: .86rem; }
  .hp-roi__metrics strong { font-size: 1.1rem; }
  .hp-roi__slider input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }
  .hp-roi__slider input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; }
  .hp-roi__tiers { gap: .35rem; padding: .3rem; border-radius: 14px; background: rgba(255,255,255,.03); box-shadow: inset 0 0 0 1px var(--hp-line); }
  .hp-roi__tier { align-items: center; gap: .1rem; padding: .55rem .25rem; border-radius: 10px; font-size: .72rem; background: none; box-shadow: none; }
  .hp-roi__tier strong { font-size: .92rem; }
  .hp-roi__plan { display: none; }
  .hp-roi__metrics .hp-roi__slider { padding-block: .65rem; }
  .hp-roi__metrics { margin-bottom: 1rem; }
  .hp-roi__main { font-size: .9rem; gap: .1rem .75rem; }
  .hp-roi__main strong { font-size: 2.6rem; }
  .hp-roi__net { margin: .35rem 0 1rem; font-size: .84rem; }
  .hp-roi__kpis { gap: .4rem; }
  .hp-roi__kpis div { gap: .2rem; padding: .7rem .6rem; }
  .hp-roi__kpis span { font-size: .64rem; line-height: 1.3; }
  .hp-roi__kpis strong { font-size: 1.05rem; letter-spacing: -0.02em; }
  .hp-roi__kpis small { font-size: .66rem; line-height: 1.3; }
  .hp-roi__note { margin: .75rem 0; font-size: .68rem; line-height: 1.45; }
  .hp-roi__panel--accent .hp-btn { width: 100%; }
  .hp-form__row { grid-template-columns: minmax(0, 1fr); }
  .hp-mock__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .hp-mock__rows { width: 100%; }
  .hp-author { grid-template-columns: minmax(0, 1fr); }
  .hp-panel__head { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-ticker__track, .hp-badge__dot::after { animation: none; }
  .hp-mock { transform: none; }
}