/* ==========================================================================
   Loopmerce — landing page stylesheet
   Self-contained: shares nothing with the parent site's stylesheet so parent
   branding cannot leak into this page.

   Palette is locked to the brand spec — blue, green, white, dark navy. Do not
   introduce additional hues; greys below are tints of the navy.
   ========================================================================== */

:root {
  --blue:        #2563EB;
  --blue-dark:   #1D4ED8;
  --blue-tint:   #EFF4FE;
  --green:       #14B8A6;
  --green-tint:  #ECFBF9;
  --navy:        #0F172A;

  --ink:         var(--navy);
  --ink-soft:    #475569;
  --ink-faint:   #64748B;

  --surface:     #FFFFFF;
  --surface-alt: #F8FAFC;
  --line:        #E7ECF3;

  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --shell:       1140px;
  --gutter:      clamp(20px, 5vw, 40px);
  --section-y:   clamp(64px, 8vw, 104px);

  --font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display:"Plus Jakarta Sans", var(--font);

  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm:   0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-md:   0 4px 12px rgba(15, 23, 42, 0.06), 0 12px 32px rgba(15, 23, 42, 0.06);
  --shadow-lg:   0 20px 60px rgba(15, 23, 42, 0.10);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--navy);
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; letter-spacing: -0.02em; }
h4 { font-size: 1rem; letter-spacing: -0.015em; }

p { color: var(--ink-soft); }
strong { color: var(--navy); font-weight: 600; }

/* --- Layout --------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--surface-alt); border-block: 1px solid var(--line); }

.section-head { max-width: 620px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.section-head p { margin-top: 14px; font-size: 1.02rem; }

/* Text stays blue: #14B8A6 only reaches 2.5:1 on white and cannot carry text.
   The green earns its place as the dot. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
              background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease);
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Neutral shadow rather than a coloured halo, matching the parent site. */
.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.btn--primary:hover { background: var(--blue-dark); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); }

/* Reads as a control, not a card: a blue outline plus its own arrow. */
.btn--outline {
  border: 1.5px solid var(--blue);
  background: #fff;
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.btn--outline:hover {
  background: var(--blue-tint);
  border-color: var(--blue-dark);
  color: var(--blue-dark);
  box-shadow: var(--shadow-md);
}

/* Arrow nudges on hover — shared by outline buttons and card links. */
.btn__arrow { transition: transform 0.2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--onblue { background: #fff; color: var(--blue); box-shadow: 0 8px 24px rgba(2, 12, 40, 0.18); }
.btn--onblue:hover { background: #F5F8FF; }

.btn--lg { padding: 16px 32px; font-size: 1rem; }
.btn--block { width: 100%; }

/* --- Header --------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 70px; }

.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; white-space: nowrap; }
.brand svg, .brand img { width: 30px; height: 30px; }
.brand__name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: var(--ink-soft); font-size: 0.92rem; font-weight: 500; transition: color 0.2s var(--ease); }
.nav a:hover { color: var(--navy); }
.nav .btn { display: none; }

/* `.nav a` outranks `.btn--primary` on specificity, so the drawer CTA needs its
   button colour restated or it inherits the muted link grey. */
.nav a.btn--primary { color: #fff; }
.nav a.btn--primary:hover { color: #fff; }

.header__cta { flex: 0 0 auto; }

.nav-toggle { display: none; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 10px; }
.nav-toggle span { position: relative; display: block; width: 16px; height: 1.5px; background: var(--navy); }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--navy);
  transition: transform 0.3s var(--ease);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: grid; }
  .header__cta { display: none; }

  .nav {
    position: fixed;
    inset: 70px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav .btn { display: inline-flex; margin-top: 18px; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 80px); overflow: hidden; }

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 0%, rgba(37, 99, 235, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 10%, rgba(20, 184, 166, 0.07) 0%, transparent 60%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

/* On mobile the cube follows the headline and CTAs rather than leading (no
   order swap), so the primary action stays above the fold. The cube's own
   mobile size lives with its base rule below — same specificity, so it has to
   come after it to win. */
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__actions { justify-content: center; }
}

.hero__lede { margin-top: 20px; font-size: clamp(1.02rem, 1.5vw, 1.15rem); max-width: 560px; }
@media (max-width: 900px) { .hero__lede { margin-inline: auto; } }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__proof { margin-top: 22px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 500;
}
.badge svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; }

a.badge { transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
a.badge:hover { border-color: var(--blue); box-shadow: var(--shadow-md); }

@media (max-width: 900px) { .hero__proof { display: flex; justify-content: center; } }

.hero__visual { display: grid; place-items: center; }
.hero__cube {
  width: min(340px, 78vw);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(15, 23, 42, 0.14));
}

@media (max-width: 900px) { .hero__cube { width: min(200px, 46vw); } }

/* --- Trust strip ---------------------------------------------------------- */
.trust {
  padding-block: 22px;
  border-block: 1px solid var(--line);
  background: var(--surface-alt);
  text-align: center;
}
.trust p { font-size: 0.9rem; color: var(--ink-faint); }
.trust strong { color: var(--ink-soft); font-weight: 600; }

/* --- Product cards -------------------------------------------------------- */
.grid { display: grid; gap: 20px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 940px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid--4 { grid-template-columns: 1fr; } }

.product {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #D8E1EE; }

.product__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--blue-tint);
  color: var(--blue);
}
.product__icon svg { width: 24px; height: 24px; }
.product:nth-child(2) .product__icon { background: var(--green-tint); color: var(--green); }

.product h3 { margin-bottom: 10px; }
.product p { flex: 1; font-size: 0.95rem; }

.product__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.2s var(--ease);
}
.product__link svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.product:hover .product__link { color: var(--blue-dark); }
.product:hover .product__link svg { transform: translateX(4px); }

/* --- Value props ---------------------------------------------------------- */
.value { padding: 4px; }
.value__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}
.value__icon svg { width: 20px; height: 20px; }

/* Alternating accent so the green carries through the section. */
.value:nth-child(2) .value__icon,
.value:nth-child(4) .value__icon { color: var(--green); }

.value h4 { margin-bottom: 8px; }
.value p { font-size: 0.93rem; }
.value a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* --- How it works --------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

.step {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
}

/* Green connector bridging the 20px gap, so the three cards read as a flow.
   Aligned to the number badge's centre: 30px padding + half of the 34px badge. */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 47px;
  right: -20px;
  width: 20px;
  height: 2px;
  background: var(--green);
}

.step:not(:last-child) .step__tip {
  position: absolute;
  top: 42px;
  right: -22px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--green);
}

@media (max-width: 860px) {
  .step:not(:last-child)::after {
    top: auto; right: auto;
    bottom: -20px; left: 47px;
    width: 2px; height: 20px;
  }
  .step:not(:last-child) .step__tip {
    top: auto; right: auto;
    bottom: -22px; left: 43px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid var(--green);
    border-bottom: 0;
  }
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
}
.step p { font-size: 0.95rem; }
.step strong { color: var(--navy); font-weight: 700; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 780px; margin-inline: auto; display: grid; gap: 12px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.faq details[open] { border-color: #D8E1EE; box-shadow: var(--shadow-md); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq__body { padding: 0 24px 22px; }
.faq__body p { font-size: 0.94rem; }
.faq__body p + p { margin-top: 10px; }
.faq__body a { color: var(--blue); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

/* --- CTA band ------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding-block: clamp(56px, 7vw, 88px);
  background: var(--blue);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 80% 20%, rgba(20, 184, 166, 0.35) 0%, transparent 60%);
  pointer-events: none;
}
.cta-band .shell { position: relative; }
.cta-band h2 { color: #fff; max-width: 660px; margin-inline: auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; }
.cta-band__mail { color: #fff; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; opacity: 0.92; }
.cta-band__mail:hover { opacity: 1; }

/* --- Contact -------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

.contact__aside p { margin-top: 14px; font-size: 0.98rem; }
.contact__mail { display: inline-block; margin-top: 18px; color: var(--blue); font-weight: 600; }

.form {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-md);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

.field { display: block; margin-bottom: 16px; }
.field__label { display: block; margin-bottom: 7px; font-size: 0.85rem; font-weight: 600; color: var(--navy); }
.field__optional { margin-left: 5px; color: var(--ink-faint); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.94rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.field textarea { min-height: 118px; resize: vertical; }

/* Honeypot — hidden from people, visible to naive bots. Not display:none, so
   that bots which skip hidden fields still fill it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note { margin-top: 14px; font-size: 0.8rem; color: var(--ink-faint); text-align: center; }
.form__note a { color: var(--blue); text-decoration: underline; }

.form__status { margin-top: 14px; padding: 12px 14px; border-radius: 9px; font-size: 0.9rem; }
.form__status[hidden] { display: none; }
.form__status--ok   { background: var(--green-tint); color: #0F766E; }
.form__status--err  { background: #FEF2F2; color: #B91C1C; }

/* --- Footer --------------------------------------------------------------- */
.footer { padding-block: clamp(48px, 6vw, 68px) 28px; background: var(--navy); color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 36px; }
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } }

.footer .brand__name { color: #fff; }
.footer__brand p { margin-top: 14px; font-size: 0.9rem; color: #94A3B8; max-width: 320px; }
.footer__brand address { margin-top: 14px; font-size: 0.88rem; font-style: normal; color: #94A3B8; line-height: 1.7; }
.footer__brand a { color: #CBD5E1; text-decoration: underline; text-underline-offset: 2px; }
.footer__brand a:hover { color: #fff; }

.footer__col h4 { margin-bottom: 14px; color: #fff; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; }
.footer__col li + li { margin-top: 10px; }
.footer__col a { color: #94A3B8; font-size: 0.91rem; transition: color 0.2s var(--ease); }
.footer__col a:hover { color: #fff; }

.footer__bar { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
/* #64748B only reached 3.75:1 on the navy footer; this clears AA at 7:1. */
.footer__bar p { font-size: 0.78rem; color: #94A3B8; line-height: 1.7; }
.footer__bar p + p { margin-top: 8px; }

/* --- Legal pages ---------------------------------------------------------- */
.legal { max-width: 760px; margin-inline: auto; }
.legal h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 10px; }
.legal__meta { color: var(--ink-faint); font-size: 0.88rem; }
.legal__body { margin-top: 36px; }
.legal__body h2 { font-size: 1.35rem; margin: 34px 0 12px; }
.legal__body p + p { margin-top: 12px; }

.notice {
  padding: 20px 22px;
  border: 1px dashed #C7D3E3;
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.notice p { font-size: 0.93rem; }

/* --- Reveal --------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}