/* ═══ RaavTek theme — teal / terracotta ═════════════════════════════════
   Loaded after style.css by the redesigned pages (index.html, solutions.html).

   It overrides the shared colour tokens so those pages read teal, while the
   pages not yet redesigned keep the original emerald palette from style.css.
   Once every page is converted, these token values move into style.css and
   this file shrinks to just the layout components below.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  /* Teal ramp — replaces the emerald ramp for header, footer, hero, buttons */
  --green-900: #0d4b4e;
  --green-800: #14676a;
  --green-700: #1b8a8a;
  --green-600: #229b99;
  --mint:      #7fd1ce;
  --mint-soft: #c2e8e5;

  /* Warm accent */
  --clay:      #d4916d;
  --clay-dark: #b9714b;
  --clay-soft: #f7e8df;

  /* Neutrals */
  --ink:    #1d2b2c;
  --body:   #55676a;
  --muted:  #86979a;
  --line:   #e2eaea;
  --bg-alt: #f5faf9;
}

/* Hard-coded colours in style.css that tokens don't reach */
.site-header { background: rgba(13,75,78,.94); border-bottom-color: rgba(127,209,206,.16); }
.brand-mark  { background: rgba(127,209,206,.14); border-color: rgba(127,209,206,.32); }
.eyebrow     { border-color: rgba(127,209,206,.3); background: rgba(127,209,206,.08); }
.btn-ghost   { border-color: rgba(255,255,255,.3); }
.hero-glow {
  background:
    radial-gradient(560px circle at 15% 10%, rgba(194,232,229,.14), transparent 68%),
    radial-gradient(480px circle at 88% 90%, rgba(212,145,109,.16), transparent 70%);
}
.site-nav > a[aria-current="page"] { color: #fff; }
.btn-primary { box-shadow: 0 6px 18px rgba(27,138,138,.3); }
.btn-primary:hover { box-shadow: 0 10px 26px rgba(27,138,138,.36); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero h1 { font-size: clamp(2.15rem, 5vw, 3.5rem); }
/* The tight measure is tuned for the homepage headline only — on other pages
   it would squeeze longer titles into an awkward column. */
.page-home .hero h1 { max-width: 16ch; margin-inline: auto; }
.hero-inner { max-width: 860px; }
.lede { max-width: 660px; }


/* ── Feature grid ────────────────────────────────────────────────────── */
.features {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.feature {
  --accent: var(--green-700);
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 26px 28px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature::before {
  content: ''; position: absolute; inset: 0 0 auto 0;
  height: 4px; background: var(--accent);
}
.feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 6px 16px rgba(29,43,44,.07), 0 20px 44px rgba(29,43,44,.08);
}
.feature-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  /* Plain fallback first — browsers without color-mix() keep a visible tile. */
  background: var(--bg-alt);
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
}
.feature-icon svg { width: 23px; height: 23px; }
.feature h3 {
  font-size: 1.06rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.012em; margin-bottom: 8px;
}
.feature p { font-size: .93rem; color: var(--body); }

/* ── Value proof ─────────────────────────────────────────────────────── */
.proof {
  display: grid; gap: 46px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.proof-copy h2 {
  font-size: clamp(1.6rem, 3.3vw, 2.2rem);
  font-weight: 700; letter-spacing: -.024em;
  color: var(--ink); line-height: 1.2; margin-bottom: 16px;
}
.proof-copy > p { font-size: 1.02rem; margin-bottom: 26px; }
.proof-list { list-style: none; display: grid; gap: 14px; }
.proof-list li { display: flex; gap: 13px; align-items: flex-start; font-size: .95rem; }
.proof-list svg { flex-shrink: 0; margin-top: 3px; color: var(--green-700); width: 18px; height: 18px; }
.proof-list strong { color: var(--ink); font-weight: 650; }

/* Image slot — replace the inner markup with <img> when photography is ready */
.proof-media {
  position: relative;
  aspect-ratio: 4 / 5;          /* portrait, to suit the 2:3 photo */
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, var(--green-800), var(--green-700) 55%, var(--clay) 165%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 20px 50px rgba(13,75,78,.22);
}
.proof-media img { width: 100%; height: 100%; object-fit: cover; }
.proof-media-placeholder { text-align: center; padding: 30px; color: var(--mint-soft); }
.proof-media-placeholder svg { width: 46px; height: 46px; margin: 0 auto 14px; opacity: .85; }
.proof-media-placeholder p { font-size: .84rem; max-width: 24ch; margin: 0 auto; }

/* ── Roadmap ─────────────────────────────────────────────────────────── */
.roadmap {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  position: relative;
}
.rstep { position: relative; text-align: center; }
/* Connector line between steps (desktop only) */
.rstep:not(:last-child)::after {
  content: ''; position: absolute;
  top: 27px; left: calc(50% + 34px); right: calc(-50% + 34px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 14px);
}
.rstep-num {
  position: relative; z-index: 1;
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800;
  color: #fff;
  background: linear-gradient(140deg, var(--green-700), var(--green-600));
  box-shadow: 0 6px 16px rgba(27,138,138,.3);
}
.rstep:nth-child(4) .rstep-num {
  background: linear-gradient(140deg, var(--clay-dark), var(--clay));
  box-shadow: 0 6px 16px rgba(212,145,109,.36);
}
.rstep h3 {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  margin-bottom: 7px; letter-spacing: -.01em;
}
.rstep p { font-size: .9rem; color: var(--body); }

/* ── Closing CTA ─────────────────────────────────────────────────────── */
.cta { background: linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 60%, #2d8f86 100%); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.btn-clay {
  background: linear-gradient(135deg, var(--clay-dark), var(--clay));
  color: #fff;
  box-shadow: 0 6px 18px rgba(185,113,75,.34);
}
.btn-clay:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(185,113,75,.4); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .rstep:not(:last-child)::after { display: none; }
  .proof { gap: 32px; }
}
@media (max-width: 560px) {
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; }
}

/* ── Feature modules (solutions.html) ────────────────────────────────────
   Alternating two-column rows: copy on one side, screenshot on the other. */
.module { padding: 74px 0; border-bottom: 1px solid var(--line); }
.module:nth-child(even) { background: var(--bg-alt); }
.module:last-of-type { border-bottom: none; }

.module-inner {
  display: grid; gap: 52px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
/* Flip every second row so the page alternates left/right */
.module:nth-child(even) .module-media { order: -1; }

.module-badge {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  /* Plain fallback first — browsers without color-mix() keep a visible tile. */
  background: var(--bg-alt);
  background: color-mix(in srgb, var(--accent) 13%, #fff);
  border: 1px solid;
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
}
.module-badge svg { width: 25px; height: 25px; }

.module-copy h2 {
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  font-weight: 700; letter-spacing: -.022em;
  color: var(--ink); line-height: 1.22; margin-bottom: 12px;
}
.module-copy > p { font-size: 1rem; color: var(--body); margin-bottom: 24px; max-width: 46ch; }

.check-list { list-style: none; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; color: var(--body); }
.check-list svg {
  flex-shrink: 0; margin-top: 3px;
  width: 17px; height: 17px;
  color: var(--accent);
}

/* Screenshot slot — swap the inner markup for <img> when captures are ready */
.module-media {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--accent) 9%, #fff),
      color-mix(in srgb, var(--accent) 3%, #fff));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 38px rgba(29,43,44,.09);
}
/* contain rather than cover: cropping a UI screenshot lops off chrome and figures */
.module-media img { width: 100%; height: 100%; object-fit: contain; background: #f8fbfb; }
.module-media-placeholder { text-align: center; padding: 28px; color: var(--muted); }
.module-media-placeholder svg { width: 40px; height: 40px; margin: 0 auto 12px; opacity: .55; }
.module-media-placeholder p { font-size: .82rem; max-width: 26ch; margin: 0 auto; }

@media (max-width: 900px) {
  .module { padding: 54px 0; }
  .module-inner { gap: 30px; }
  /* Keep copy above the screenshot on mobile regardless of row parity */
  .module:nth-child(even) .module-media { order: 0; }
}

/* ── Booking page (connect.html) ────────────────────────────────────────── */
.booking-layout {
  display: grid; gap: 54px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
}

/* ── Left: the pitch ──────────────────────────────────────────────────── */
.booking-copy { padding-top: 6px; }
.booking-copy h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  font-weight: 750; letter-spacing: -.028em;
  color: var(--ink); line-height: 1.18; margin-bottom: 16px;
}
.booking-copy h2 .accent { color: var(--green-700); }
.booking-copy > p {
  font-size: 1.04rem; color: var(--body);
  max-width: 44ch; margin-bottom: 36px;
}

.value-points { display: grid; gap: 22px; }
.value-point {
  padding-left: 17px;
  border-left: 2px solid rgba(27,138,138,.22);
}
.value-point h3 {
  font-size: .99rem; font-weight: 700; color: var(--ink);
  letter-spacing: -.012em; margin-bottom: 5px;
}
.value-point p { font-size: .92rem; color: var(--body); max-width: 42ch; }

.booking-contact {
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 30px;
}
.booking-contact a, .booking-contact span {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .91rem; color: var(--body);
}
.booking-contact a:hover { color: var(--green-700); }
.booking-contact svg { width: 16px; height: 16px; color: var(--green-700); flex-shrink: 0; }

/* ── Right: the card — floating, modal-like, but inline ───────────────── */
.booking-form { position: relative; }
@media (min-width: 981px) {
  /* Follows the reader without ever leaving the flow */
  .booking-form { position: sticky; top: 92px; }
}

.form-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(27,138,138,.1);
  border-radius: 24px;
  padding: 34px 32px 28px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(13,75,78,.05),
    0 10px 22px rgba(13,75,78,.07),
    0 34px 70px rgba(13,75,78,.14);
}
/* Slim brand edge along the top of the card */
.form-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--green-700), var(--green-600) 55%, var(--clay));
}

.form-card-head { margin-bottom: 24px; }
.form-eyebrow {
  display: inline-block;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 9px;
}
.form-card-head h2 {
  font-size: 1.42rem; font-weight: 780;
  letter-spacing: -.028em; color: var(--ink);
  line-height: 1.16; margin-bottom: 7px;
}
.form-card-head p { font-size: .92rem; color: var(--body); }

/* ── Fields ───────────────────────────────────────────────────────────── */
.form-row { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field label {
  font-size: .79rem; font-weight: 650; color: #46595b;
  letter-spacing: .01em;
}
.req { color: var(--clay-dark); font-weight: 700; }
.optional { color: var(--muted); font-weight: 500; }

.field input,
.field select,
.field textarea {
  font: inherit; font-size: .93rem; color: var(--ink);
  width: 100%;
  padding: 12px 14px;
  background: #fbfdfd;
  border: 1px solid #dde7e7;
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field textarea { min-height: 104px; resize: vertical; }
.field select { cursor: pointer; }

.field input:hover, .field select:hover, .field textarea:hover { border-color: #c6d6d6; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none; background: #fff;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(27,138,138,.14);
}
.field input::placeholder, .field textarea::placeholder { color: #aab9ba; }

/* Only flags a field once the visitor has actually interacted with it */
.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #d4756d;
  box-shadow: 0 0 0 3px rgba(212,117,109,.12);
}

.btn-submit {
  width: 100%; margin-top: 8px;
  padding: 14px 26px;
  font-size: .95rem; font-weight: 700;
  border-radius: 12px; color: #fff;
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-700) 60%, var(--green-600) 100%);
  box-shadow: 0 6px 18px rgba(27,138,138,.28);
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(27,138,138,.36); }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-submit svg { width: 16px; height: 16px; }

.form-secure {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; font-size: .79rem; color: var(--muted);
}
.form-secure svg { width: 13px; height: 13px; flex-shrink: 0; }
.form-secure a { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }

/* ── Success state — typographic, no oversized tick ───────────────────── */
.form-success { display: none; padding: 26px 2px 10px; }
.form-success.is-visible { display: block; }
.success-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .68rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 12px;
}
.success-label svg { width: 13px; height: 13px; }
.form-success h3 {
  font-size: 1.32rem; font-weight: 750; letter-spacing: -.026em;
  color: var(--ink); line-height: 1.24; margin-bottom: 10px;
}
.form-success p { font-size: .94rem; color: var(--body); max-width: 42ch; }
.form-success a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .booking-layout { grid-template-columns: 1fr; gap: 36px; }
  .booking-copy > p { max-width: none; }
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 26px 20px 22px; border-radius: 18px; }
  .form-card-head h2 { font-size: 1.24rem; }
  .booking-contact { gap: 12px 20px; }
}

/* ── Product tour (portfolio.html) ──────────────────────────────────────── */
.tour-step { position: relative; padding: 58px 0; }
.tour-step + .tour-step { border-top: 1px solid var(--line); }
.tour-step:nth-child(even) { background: var(--bg-alt); }

.step-head { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.step-num {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--green-800), var(--green-600));
  box-shadow: 0 5px 14px rgba(27,138,138,.3);
}
.step-head h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.85rem);
  font-weight: 750; letter-spacing: -.026em;
  color: var(--ink); line-height: 1.18;
}

/* Body aligns under the heading text, not the badge */
.step-body { padding-left: 64px; }
.step-body > p { font-size: 1rem; color: var(--body); max-width: 62ch; margin-bottom: 20px; }
.step-body .check-list { max-width: 62ch; margin-bottom: 26px; }
.step-body .check-list svg { color: var(--green-700); }

/* Dashboard readout strip (step 1) */
.step-stats {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  max-width: 620px;
  margin-bottom: 26px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.step-stats div { text-align: center; }
.step-stats .stat-num { font-size: 1.5rem; }
.step-stats .stat-label { font-size: .72rem; }

/* Screenshot slot — swap inner markup for <img> when captures are ready */
.step-media {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(27,138,138,.07), rgba(212,145,109,.05));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 34px rgba(29,43,44,.08);
}
.step-media img { width: 100%; height: 100%; object-fit: contain; background: #f8fbfb; }
.step-media-placeholder { text-align: center; padding: 26px; color: var(--muted); }
.step-media-placeholder svg { width: 36px; height: 36px; margin: 0 auto 10px; opacity: .5; }
.step-media-placeholder p { font-size: .81rem; }

@media (max-width: 720px) {
  .tour-step { padding: 44px 0; }
  .step-head { gap: 14px; }
  .step-num { width: 40px; height: 40px; font-size: .95rem; }
  .step-body { padding-left: 0; }
}

/* ── Hero network animation (index.html) ────────────────────────────────── */
.hero-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;                 /* behind .hero-glow (1) and .hero-inner (2) */
  display: block;
  pointer-events: none;
  opacity: .9;
}
/* Fades the network out toward the lower edge so it never fights the CTAs */
.hero-net-mask {
  position: absolute; inset: auto 0 0 0;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(5,46,28,.35));
}

/* ── Integrations page ──────────────────────────────────────────────────── */
.int-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  margin-bottom: 30px;
}
.int-badge {
  display: flex; align-items: center; gap: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 17px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.int-badge:hover {
  border-color: rgba(27,138,138,.34);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(29,43,44,.07);
}
.int-icon {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,138,138,.1);
  color: var(--green-700);
}
.int-icon svg { width: 18px; height: 18px; }
.int-badge b { display: block; font-size: .93rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.int-badge span { display: block; font-size: .78rem; color: var(--muted); margin-top: 1px; }

.int-note {
  background: var(--bg-alt);
  border-left: 3px solid var(--clay);
  border-radius: 12px;
  padding: 20px 22px;
  font-size: .95rem; color: var(--body);
  max-width: 66ch;
}

/* Mission band — the emphasis section between the two paths */
.mission {
  padding: 84px 0;
  text-align: center;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(27,138,138,.09), transparent 70%),
    var(--bg-alt);
  border-block: 1px solid var(--line);
}
.mission-inner { max-width: 760px; margin: 0 auto; }
.mission-rule {
  width: 46px; height: 3px; border-radius: 3px;
  margin: 0 auto 24px;
  background: linear-gradient(90deg, var(--green-700), var(--clay));
}
.mission h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 750; letter-spacing: -.028em;
  color: var(--ink); line-height: 1.2; margin-bottom: 18px;
}
.mission p { font-size: 1.06rem; color: var(--body); }

@media (max-width: 700px) {
  .mission { padding: 60px 0; }
}