/* ============================================================
   Raporty — landing page
   Warm paper, ink, one deep-teal accent. All-sans.
   Type: Inter (display + UI) · IBM Plex Mono (data, labels)
   ============================================================ */

:root{
  --paper:    #FBFAF8;
  --paper-2:  #F4F2ED;
  --ink:      #14171A;
  --ink-2:    #3D444B;
  --ink-3:    #6B7178;
  --line:     #E2DED5;
  --line-2:   #D3CEC2;
  --accent:   #0D4D46;
  --accent-2: #0A3A34;
  --accent-t: #E9F0EE;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1140px;
  --pad: clamp(1.25rem, 5vw, 2.5rem);
  --band-y: clamp(4.25rem, 10vw, 8rem);
  --r: 6px;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.6;
  font-feature-settings:'cv05' 1,'ss01' 1,'cv11' 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:#fff; padding:.75rem 1.25rem; font-size:.9rem; text-decoration:none; }
.skip:focus{ left:0; }

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.025em; }

h1{
  font-size:clamp(2.3rem, 1.2rem + 3.9vw, 3.55rem);
  line-height:1.06; letter-spacing:-.035em;
  margin:0 0 clamp(1.25rem,2.6vw,1.75rem);
  max-width:19ch; text-wrap:balance;
}
.hl{ color:var(--accent); }

.h2{
  font-size:clamp(1.7rem, 1.1rem + 2.3vw, 2.6rem);
  line-height:1.1; letter-spacing:-.03em;
  max-width:22ch; text-wrap:balance;
  margin-bottom:clamp(1.75rem,4vw,2.75rem);
}
.sub{
  margin:calc(-1 * clamp(1rem,2.5vw,1.75rem)) 0 clamp(2rem,4.5vw,3.25rem);
  color:var(--ink-3); max-width:56ch; font-size:1.05rem;
}

.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin:0 0 1rem;
}
.lede{
  font-size:clamp(1.075rem, 1rem + .45vw, 1.3rem); line-height:1.55;
  color:var(--ink-2); max-width:54ch; margin:0 0 clamp(1.75rem,3.5vw,2.25rem);
}
.body{ color:var(--ink-2); max-width:52ch; margin:0 0 1.1rem; }
.body strong{ color:var(--ink); font-weight:600; }

/* ── buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff;
  font-family:var(--sans); font-size:.95rem; font-weight:500; letter-spacing:.005em;
  padding:.85rem 1.5rem; border:1px solid var(--accent); border-radius:var(--r);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ background:var(--accent-2); border-color:var(--accent-2); box-shadow:0 6px 18px -8px rgba(13,77,70,.55); }
.btn:active{ transform:translateY(1px); box-shadow:none; }
.btn--lg{ padding:1rem 1.75rem; font-size:1rem; }
.btn--sm{ padding:.6rem 1.1rem; font-size:.875rem; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ background:transparent; border-color:var(--ink); color:var(--ink); box-shadow:none; }

.cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ── nav ──────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav__in{ display:flex; align-items:center; gap:1.5rem; height:66px; }
.mark{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.mark__glyph{ width:15px; height:15px; flex:none; border-radius:3px; background:var(--accent); box-shadow:5px 0 0 -1px var(--paper), 6px 0 0 0 var(--line-2); }
.mark__word{ font-weight:600; font-size:1.1rem; letter-spacing:-.02em; white-space:nowrap; }
.btn__short{ display:none; }
@media (max-width:480px){
  .nav__in{ gap:1rem; }
  .mark{ gap:.5rem; }
  .mark__word{ font-size:.95rem; }
}
@media (max-width:420px){
  .btn__full{ display:none; }
  .btn__short{ display:inline; }
}
.nav__links{ display:none; gap:1.8rem; }
.nav__links a{ color:var(--ink-2); text-decoration:none; font-size:.925rem; transition:color .18s ease; }
.nav__links a:hover{ color:var(--accent); }
@media (min-width:820px){ .nav__links{ display:flex; } }

/* ── hero ─────────────────────────────────────────────────── */
.hero{ padding-top:clamp(3.25rem,8vw,6.5rem); padding-bottom:clamp(3rem,7vw,5.5rem); }
.hero__in{ display:grid; gap:clamp(2.75rem,6vw,4.5rem); align-items:center; }
@media (min-width:1000px){ .hero__in{ grid-template-columns:1.22fr .78fr; gap:4rem; } }
.hero__copy{ min-width:0; }

.trust{
  list-style:none; margin:1.4rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  font-size:.875rem; color:var(--ink-3);
}
.trust li{ display:flex; align-items:center; gap:.45rem; }
.trust li::before{
  content:''; width:14px; height:14px; flex:none; border-radius:50%;
  background:var(--accent-t);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3L10.6 4.7' fill='none' stroke='%230D4D46' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hero__viz{
  margin:0; min-width:0; background:var(--paper);
  border:1px solid var(--line-2); border-radius:8px; overflow:hidden;
  box-shadow:0 1px 2px rgba(20,23,26,.04), 0 14px 36px -14px rgba(20,23,26,.14);
}
.viz__head{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3);
  padding:.85rem 1.15rem; border-bottom:1px solid var(--line); background:var(--paper-2);
}
.viz__dot{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--accent); box-shadow:0 0 0 3px var(--accent-t); }
.viz__list{
  list-style:none; margin:0; padding:.4rem 0;
  -webkit-mask-image:linear-gradient(#000 68%, transparent 100%); mask-image:linear-gradient(#000 68%, transparent 100%);
}
.viz__list li{ display:flex; align-items:center; gap:1rem; padding:.5rem 1.15rem; font-family:var(--mono); font-size:.775rem; color:var(--ink-2); }
.viz__list li span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viz__list li b{ margin-left:auto; color:var(--accent); font-weight:400; }
.viz__foot{ margin:0; padding:.9rem 1.15rem; border-top:1px solid var(--line); background:var(--paper-2); font-size:.8rem; color:var(--ink-3); }
.viz__foot strong{ color:var(--ink); font-weight:600; }

/* ── logo marquee ─────────────────────────────────────────── */
.logos{ padding-block:clamp(1.5rem,3vw,2.25rem) clamp(2.5rem,5vw,3.5rem); border-top:1px solid var(--line); }
.logos__cap{
  margin:0 0 1.25rem; font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.logos__note{ margin:1.5rem 0 0; font-size:.925rem; color:var(--ink-3); max-width:62ch; }

.marquee{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{ display:flex; width:max-content; }
.marquee__list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:clamp(2.5rem,5vw,4rem);
  padding-inline:clamp(1.25rem,2.5vw,2rem);
  flex:none;
}
.marquee__list li{ display:flex; align-items:center; flex:none; }
.lg{
  height:26px; width:auto; max-width:140px; object-fit:contain;
  filter:grayscale(1) contrast(1.05); opacity:.62;
  transition:filter .25s ease, opacity .25s ease;
}
.lg--tall{ height:38px; }
.lg--sq{ height:34px; }
.lg--xl{ height:46px; filter:grayscale(1) brightness(.72) contrast(1.25); opacity:.75; }
.marquee__list li:hover .lg{ filter:none; opacity:1; }

@media (prefers-reduced-motion: no-preference){
  .marquee__track{ animation:marquee 48s linear infinite; }
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track{ animation-play-state:paused; }
  @keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee__track{ width:auto; }
  .marquee__list{ flex-wrap:wrap; justify-content:center; gap:1.5rem 2.5rem; padding-inline:var(--pad); }
  .marquee__list[aria-hidden="true"]{ display:none; }
}

/* ── bands ────────────────────────────────────────────────── */
.band{ padding-block:var(--band-y); }
.band--paper{ background:var(--paper-2); border-block:1px solid var(--line); }
.band__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.25rem; margin-top:clamp(2.25rem,5vw,3.5rem); padding-top:clamp(1.75rem,4vw,2.5rem); border-top:1px solid var(--line-2); }
.band__cta-note{ font-size:.9rem; color:var(--ink-3); }

/* ── stats ────────────────────────────────────────────────── */
.stats{ display:grid; gap:clamp(1.75rem,4vw,2.5rem) 2rem; grid-template-columns:repeat(2,1fr); }
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,1fr); gap:2.5rem; } }
.stat{ border-top:2px solid var(--ink); padding-top:1.25rem; }
.stat__n{
  font-weight:600; font-variant-numeric:tabular-nums;
  font-size:clamp(2.9rem, 1.6rem + 5vw, 4.75rem);
  line-height:.95; letter-spacing:-.05em;
  margin:0 0 .85rem; color:var(--ink); display:flex; align-items:baseline;
}
.stat__u{ font-size:.4em; font-weight:500; letter-spacing:-.02em; color:var(--accent); margin-left:.18em; }
.stat__d{ margin:0; color:var(--ink-2); font-size:.95rem; max-width:26ch; text-wrap:pretty; }

/* ── steps ────────────────────────────────────────────────── */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(2rem,4vw,2.75rem); }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(3,1fr); gap:3rem; } }
.step__n{ font-family:var(--mono); font-size:.8rem; font-weight:500; letter-spacing:.1em; color:var(--accent); margin:0 0 1rem; padding-bottom:1rem; border-bottom:1px solid var(--line-2); }
.step__h{ font-size:1.2rem; margin:0 0 .55rem; letter-spacing:-.02em; }
.step__d{ margin:0; color:var(--ink-2); font-size:.965rem; }

/* ── integrations ─────────────────────────────────────────── */
.integr{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; }
@media (min-width:760px){ .integr{ grid-template-columns:repeat(3,1fr); gap:1.25rem; } }
.integr__i{
  background:var(--paper); border:1px solid var(--line-2); border-radius:8px;
  padding:clamp(1.5rem,3vw,2rem); display:flex; flex-direction:column; gap:.45rem;
}
.integr__i--on{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line-2)); }
.integr__status{
  margin:0 0 .35rem; display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
.integr__status::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--line-2); }
.integr__i--on .integr__status{ color:var(--accent); }
.integr__i--on .integr__status::before{ background:var(--accent); box-shadow:0 0 0 3px var(--accent-t); }
.integr__name{ margin:0; font-weight:600; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.1rem); letter-spacing:-.035em; line-height:1.1; }
.integr__d{ margin:.25rem 0 0; color:var(--ink-2); font-size:.94rem; max-width:34ch; }

/* ── feature grid ─────────────────────────────────────────── */
.grid{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:680px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .grid{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--paper); padding:clamp(1.5rem,3vw,2rem); }
.card h3{ font-size:1.05rem; margin:0 0 .5rem; letter-spacing:-.015em; }
.card p{ margin:0; color:var(--ink-2); font-size:.94rem; }

/* ── quote band ───────────────────────────────────────────── */
.quote-band{ background:var(--accent); color:#fff; }
.quote-band .eyebrow{ color:#8FC4BB; }
.quote-band .h2{ color:#fff; }
.quote-wrap{ max-width:960px; }
.quote{ font-size:clamp(1.1rem, .95rem + .8vw, 1.45rem); line-height:1.5; letter-spacing:-.01em; color:#E4EFEC; margin:0; max-width:50ch; font-weight:400; }

/* ── pricing ──────────────────────────────────────────────── */
.tiers{ display:grid; gap:1.25rem; }
@media (min-width:860px){ .tiers{ grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:stretch; } }
.tier{ background:var(--paper); border:1px solid var(--line-2); border-radius:8px; padding:clamp(1.6rem,3vw,2.1rem); display:flex; flex-direction:column; position:relative; }
.tier--hi{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 18px 40px -22px rgba(13,77,70,.35); }
.tier__tag{ position:absolute; top:0; left:clamp(1.6rem,3vw,2.1rem); transform:translateY(-50%); background:var(--accent); color:#fff; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .65rem; border-radius:3px; margin:0; }
.tier__h{ font-size:1.1rem; margin:0 0 .9rem; }
.tier__p{ margin:0 0 .4rem; display:flex; align-items:baseline; gap:.4rem; }
.tier__v{ font-weight:600; font-size:2.6rem; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; }
.tier__u{ font-size:.875rem; color:var(--ink-3); }
.tier__d{ margin:0 0 1.4rem; font-size:.925rem; color:var(--ink-3); }
.tier__l{ list-style:none; margin:0 0 1.6rem; padding:1.3rem 0 0; border-top:1px solid var(--line); display:grid; gap:.55rem; }
.tier__l li{ font-size:.925rem; color:var(--ink-2); padding-left:1.4rem; position:relative; }
.tier__l li::before{ content:''; position:absolute; left:0; top:.5em; width:7px; height:7px; border-radius:50%; background:var(--accent-t); box-shadow:inset 0 0 0 2px var(--accent); }
.tier__cta{ margin-top:auto; width:100%; }

.pricing-note{ margin-top:clamp(2rem,4vw,3rem); padding-top:clamp(1.75rem,4vw,2.5rem); border-top:1px solid var(--line-2); display:grid; gap:.6rem; max-width:62ch; }
.pricing-note p{ margin:0; color:var(--ink-2); font-size:.965rem; }
.pricing-note strong{ color:var(--ink); font-weight:600; }
.pricing-note__free{ color:var(--accent) !important; font-weight:500; }

/* ── faq ──────────────────────────────────────────────────── */
.faq__in{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:start; }
@media (min-width:900px){ .faq__in{ grid-template-columns:.8fr 1.2fr; } }
.faq__l .h2{ margin-bottom:0; }
.faq{ border-top:1px solid var(--line-2); }
.faq__i{ border-bottom:1px solid var(--line-2); }
.faq__i summary{
  list-style:none; cursor:pointer; padding:1.15rem 2.25rem 1.15rem 0; position:relative;
  font-weight:500; font-size:1.02rem; letter-spacing:-.01em; color:var(--ink);
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary::after{
  content:''; position:absolute; right:.2rem; top:50%; width:10px; height:10px;
  border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq__i[open] summary::after{ transform:translateY(-30%) rotate(225deg); }
.faq__i summary:hover{ color:var(--accent); }
.faq__i p{ margin:0 0 1.25rem; color:var(--ink-2); font-size:.965rem; max-width:60ch; }

/* ── contact / form ───────────────────────────────────────── */
.contact__in{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
@media (min-width:900px){ .contact__in{ grid-template-columns:.85fr 1fr; } }
.contact .h2{ margin-bottom:1.5rem; }
.mini{ list-style:none; margin:0 0 1.5rem; padding:0; display:grid; gap:.75rem; }
.mini li{ display:flex; gap:.8rem; align-items:flex-start; color:var(--ink-2); }
.mini b{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent-t); color:var(--accent); font-family:var(--mono); font-size:.72rem; font-weight:500; display:grid; place-items:center; margin-top:.1rem; }

.form{ display:grid; gap:1rem; background:var(--paper); border:1px solid var(--line-2); border-radius:8px; padding:clamp(1.5rem,3.5vw,2.25rem); box-shadow:0 1px 2px rgba(20,23,26,.04), 0 14px 36px -18px rgba(20,23,26,.12); }
@media (min-width:560px){ .form{ grid-template-columns:1fr 1fr; } }
.field{ display:grid; gap:.4rem; }
.field--full{ grid-column:1/-1; }
.form label{ font-size:.875rem; font-weight:500; color:var(--ink-2); }
.opt{ font-weight:400; color:var(--ink-3); }
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line-2); border-radius:var(--r); padding:.7rem .85rem; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-t); }
.form textarea{ resize:vertical; min-height:64px; }
.form ::placeholder{ color:#A4A9AF; }
.form [aria-invalid="true"]{ border-color:#A03530; }
.consent{ display:flex; gap:.7rem; align-items:flex-start; }
.consent input{ margin-top:.25rem; flex:none; width:16px; height:16px; accent-color:var(--accent); }
.consent label{ font-size:.8rem; line-height:1.5; color:var(--ink-3); font-weight:400; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.form__foot .btn{ width:100%; }
@media (min-width:560px){ .form__foot .btn{ width:auto; } }
.form__msg{ margin:0; font-size:.875rem; color:var(--ink-3); }
.form__msg.is-ok{ color:var(--accent); font-weight:500; }
.form__msg.is-err{ color:#A03530; }
.form__assure{ margin:-.25rem 0 0; font-size:.8rem; color:var(--ink-3); }

/* ── footer ───────────────────────────────────────────────── */
.foot{ background:var(--ink); color:#9AA1A8; padding-block:clamp(3rem,6vw,4.5rem); }
.foot__in{ display:grid; gap:1.5rem; }
@media (min-width:760px){ .foot__in{ grid-template-columns:auto 1fr auto; align-items:start; gap:3rem; } }
.foot__mark{ font-weight:600; font-size:1.1rem; color:#fff; margin:0; letter-spacing:-.02em; }
.foot__t{ margin:0; font-size:.9rem; line-height:1.6; }
.foot__nav{ display:flex; flex-wrap:wrap; gap:1.25rem; }
.foot__nav a{ color:#9AA1A8; text-decoration:none; font-size:.9rem; transition:color .18s ease; }
.foot__nav a:hover{ color:#fff; }

/* ── reveal (only when JS is present; respects reduced motion) ── */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity:0; transform:translateY(14px); }
  .js .reveal.is-in{ opacity:1; transform:none; transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
}