/* =========================================================================
   Datapositive — standalone rebuild
   All design tokens live in :root so the look is easy to change later.
   Fonts: Helvetica/Arial system stack (matches the original Helvetica World).
   ========================================================================= */

:root {
  /* Palette */
  --black: #000000;
  --near-black: #020204;
  --white: #ffffff;
  --muted-dark: rgba(255, 255, 255, 0.82); /* body text on dark */
  --muted-light: #6a6a6a;                  /* muted text on light  */
  --card-bg: #fcfcfc;
  --card-border: rgba(0, 0, 0, 0.08);
  --hairline-dark: rgba(255, 255, 255, 0.35);
  --hairline-light: rgba(0, 0, 0, 0.25);
  --accent: #5139e6;

  /* Type */
  --font-sans: Helvetica, Arial, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  /* Headings lead with Helvetica Neue so a true Light (300) weight is available */
  --font-heading: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-weight: 350; /* change to 100–400 to taste */

  /* Fluid sizes tuned to the live site: e.g. display = 83px @1440w, 112px @2035w */
  --fs-display: clamp(2rem, calc(0.85rem + 4.83vw), 7rem); /* hero / vision / aiml / cta */
  --fs-xxl:     clamp(2.25rem, 5.78vw, 5.78rem); /* 83px @1440 -> 92px  SentimentAI      */
  --fs-xl:      clamp(1.75rem, 3.28vw, 4.17rem); /* 47px @1440 -> 66px  Looking for...    */
  --fs-lg:      clamp(1.75rem, 2.8vw, 2.5rem);   /* ~40px  feature/module titles          */
  --fs-label:   clamp(0.95rem, 1vw, 1.25rem);  /* 20px  section labels        */
  --fs-num:     clamp(1.5rem, 1.6vw, 2rem);    /* 32px  01..04                */
  --fs-lead:    1.0625rem;                      /* 17px  lead paragraphs       */
  --fs-body:    1rem;                           /* 16px  body                  */
  --fs-small:   0.9375rem;                      /* 15px  small                 */

  --ls-tight: -0.01em; /* headings tracking */

  /* Layout */
  --gutter: clamp(20px, 4vw, 40px);          /* content margin, 40px on desktop (VISION & below) */
  --gutter-wide: clamp(1.5rem, 6vw, 5.5rem); /* header + full-width hero */
  --maxw: 1680px;
  --section-y: clamp(4rem, 9vw, 8.5rem);
  --radius: 16px;
}

/* ----- Reset-ish ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--near-black);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ----- Shared helpers ----- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--dark  { background: var(--black); color: var(--white); }
.section--light { background: var(--white); color: var(--near-black); }

.display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--heading-weight);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
}

/* Section label with hairline rule + short accent tick */
.section-head { margin-bottom: clamp(1.5rem, 3vw, 2.75rem); }
.rule {
  position: relative;
  height: 1px;
  width: 100%;
  background: var(--hairline-light);
  margin-bottom: 1.6rem;
}
.rule::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 52px; height: 3px;
  background: currentColor;
}
.section--dark .rule { background: var(--hairline-dark); }
.label {
  display: inline-block;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
}

/* =========================================================================
   Header
   ========================================================================= */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.4rem, 2.5vw, 2.1rem) var(--gutter-wide);
  color: var(--white); /* overlay on dark hero */
}
.site-header--solid {
  position: static;
  background: var(--white);
  color: var(--near-black);
}
.logo img { height: clamp(20px, 2vw, 26px); width: auto; }

.main-nav { display: flex; gap: clamp(1.4rem, 2vw, 2.2rem); }
.main-nav a {
  font-size: var(--fs-small);
  color: inherit;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}
.main-nav a:hover { opacity: 1; }
.main-nav a[aria-current="page"] { font-weight: 700; opacity: 1; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle svg { display: block; }
.nav-close { display: none; } /* panel-only control; the desktop nav has no close */

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-start; /* text sits just below the header, as on the live site */
  background: var(--near-black); /* the backdrop the image is faded against */
  color: var(--white);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Live's focal point: Wix serves this image with fp_0.88_0.48 at every width.
     X is inert on desktop (the master's 1.143 aspect fills the width exactly, so
     nothing overflows horizontally) but drives the crop on portrait viewports. */
  object-position: 88% 48%;
  /* Live dims the hero this way rather than with an overlay: the image sits at
     53% over the section's near-black backdrop. Same result as compositing
     rgba(2,2,4,0.47) on top, but it keeps the image the only layer to reason about. */
  opacity: 0.53;
  z-index: 0;
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none; /* hero spans full width; other sections cap at --maxw */
  margin-inline: auto;
  padding-inline: var(--gutter-wide);
  padding-top: clamp(5.5rem, 7.5vw, 7rem); /* ~108px below the top, clears the header */
}
.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--heading-weight);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  max-width: 11em; /* keeps "Customer Insights," on one line, "Automated." on the next */
}
.hero__sub {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 44rem;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--muted-dark);
}

/* =========================================================================
   Vision (big statement on black)
   ========================================================================= */
.vision .display { max-width: none; } /* span the full container width */

/* =========================================================================
   Looking for a Solution (split: text left, image right)
   ========================================================================= */
.solution {
  position: relative;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  min-height: clamp(360px, 42vw, 620px);
  overflow: hidden;
}
.solution__img {
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 100%;
  object-fit: cover;
}
.solution .container { position: relative; z-index: 1; }
.solution__text { max-width: 50%; padding-block: var(--section-y); }
.solution__text h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: var(--heading-weight);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
}

/* =========================================================================
   Our product intro (SentimentAI) — spans the full grid width
   ========================================================================= */
.product-intro .inner { max-width: none; }
.product-intro .display-xxl {
  font-family: var(--font-heading);
  font-size: var(--fs-xxl);
  font-weight: var(--heading-weight);
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
}
.product-intro .lead {
  margin-top: 1.25rem;
  max-width: 40ch;
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
}

/* =========================================================================
   Feature blocks 01–04 (alternating cards)
   ========================================================================= */
.features { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); padding-block: 0 var(--section-y); }
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature__text {
  padding: clamp(2rem, 4vw, 4rem) clamp(1.75rem, 3.5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid var(--card-border);
  margin-left: clamp(1.25rem, 3vw, 2.75rem);
}
.feature__num {
  font-size: var(--fs-num);
  letter-spacing: 0.05em;
  color: var(--near-black);
}
.feature__title {
  margin-top: 0.4rem;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--heading-weight);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}
.feature__hr {
  width: 100%;
  height: 1px;
  background: var(--card-border);
  margin: clamp(1rem, 2vw, 1.6rem) 0;
}
.feature__body {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--near-black);
  max-width: 46ch;
}
.feature__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
}
.feature__media img { width: 100%; height: auto; border-radius: 8px; }

/* even features: image left, text right */
.feature--reverse .feature__media { order: -1; }
.feature--reverse .feature__text {
  border-left: 0;
  border-right: 1px solid var(--card-border);
  margin-left: 0;
  margin-right: clamp(1.25rem, 3vw, 2.75rem);
}

/* =========================================================================
   AI/ML Modules intro
   ========================================================================= */
.modules-intro .rule { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.modules-intro__row { display: block; }
.modules-intro__desc {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 46ch;
  font-size: var(--fs-small);
  color: var(--muted-dark);
}

/* =========================================================================
   Modules (photo card left, copy right)
   ========================================================================= */
.modules {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 7rem);
  padding-top: clamp(2rem, 5vw, 4rem);
}
.module {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.module__media img { width: 100%; height: auto; border-radius: var(--radius); }
.module__title {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--heading-weight);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
}
.module__hr {
  width: 100%; height: 1px;
  background: var(--hairline-dark);
  margin: clamp(1.4rem, 3vw, 2.4rem) 0;
}
.module__lead {
  font-size: var(--fs-lead);
  color: var(--white);
  margin-bottom: 1.4rem;
}
.module__list { display: flex; flex-direction: column; gap: 0.9rem; }
.module__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted-dark);
}
.module__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* =========================================================================
   CTA (Do More With...)
   ========================================================================= */
.cta { padding-block: clamp(5rem, 12vw, 11rem); }
.cta .display { max-width: 16ch; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  background: var(--white);
  color: var(--near-black);
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(2rem, 4vw, 3.5rem);
}
.footer__grid {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.footer__logo img { height: 22px; width: auto; }
.footer__heading {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 1.1rem;
}
.footer__col a, .footer__col p {
  display: block;
  font-size: var(--fs-small);
  color: var(--muted-light);
  margin-bottom: 0.55rem;
  transition: color 0.2s ease;
}
.footer__col a:hover { color: var(--near-black); }
.footer__col a[aria-current="page"] { color: var(--near-black); }
.footer__copy {
  max-width: var(--maxw);
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  padding-inline: var(--gutter);
  font-size: var(--fs-small);
  color: var(--muted-light);
}

/* =========================================================================
   Contact page
   ========================================================================= */
.contact-hero { padding-block: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
.contact-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  font-weight: var(--heading-weight);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
}
.contact-hero p {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--fs-small);
  color: var(--near-black);
}
.contact-wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(4rem, 8vw, 7rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.contact-form { grid-column: 2; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-size: var(--fs-small);
  color: var(--muted-light);
  margin-bottom: 0.5rem;
}
.field label .req { color: var(--muted-light); }
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--near-black);
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  background: var(--white);
  transition: border-color 0.2s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--near-black); }
.btn-submit {
  width: 100%;
  border: 0;
  cursor: pointer;
  background: var(--black);
  color: var(--white);
  font-family: inherit;
  font-size: var(--fs-body);
  padding: 1rem 1.5rem;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}
.btn-submit:hover { opacity: 0.85; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 960px) {
  .feature,
  .modules-intro__row,
  .module { grid-template-columns: 1fr; }

  .feature__text,
  .feature--reverse .feature__text {
    border: 0;
    margin: 0;
    order: 2;
  }
  .feature__media { order: 1; }
  .feature--reverse .feature__media { order: 1; }

  .modules-intro__desc { justify-self: start; margin-top: 1rem; }
  .module__media { order: -1; }
}

@media (max-width: 760px) {
  /* Mobile scale measured off the live site at 375 / 414 / 750.
     Two fluid tracks: the hero headline at 12.82vw, and VISION / SentimentAI /
     AI-ML at 10.26vw. Everything else is fixed px. Both tracks stop at 429px
     (the widest common phone) so they meet the desktop scale near 760 instead of
     overshooting the way the live site does. */
  :root {
    --gutter:   min(6vw, 30px); /* converges with --gutter-wide, as on live */
    --fs-display: min(10.26vw, 44px);
    --fs-xxl:     min(10.26vw, 44px);
    --fs-lg:      32px;
    --fs-label:   16px;
    --fs-num:     17px;
    --fs-lead:    16px;
  }

  .site-header { padding-block: 16px; } /* 70px tall, matching live */
  .logo img { height: 32px; }
  .nav-toggle svg { width: 30px; height: 30px; }

  .hero__content { padding-top: 6.2rem; }
  .hero__title { font-size: min(12.82vw, 55px); }
  .hero__sub { margin-top: 22px; font-size: 14px; line-height: 1.4; }

  .cta .display { font-size: 36px; max-width: none; }

  /* Opened nav: a full-screen white panel, as on live. Rows are 45px tall with a
     24px gap, the first starting 70px down (clear of the header); labels are
     centred within the row rather than the viewport, and the current page is
     greyed rather than bolded. */
  .main-nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--white);
    color: var(--near-black);
    flex-direction: column;
    gap: 24px;
    padding: 70px var(--gutter) 0;
    display: none;
  }
  .main-nav.is-open { display: flex; }

  .main-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    font-size: 20px;
    font-weight: 400;
    color: var(--near-black);
    border-bottom: 1px solid #c2c2c2;
    opacity: 1;
  }
  .main-nav a[aria-current="page"] {
    color: #6e6e6e; /* live greys the current page instead of bolding it */
    font-weight: 400;
  }

  .nav-close {
    position: absolute;
    top: 30px;
    right: var(--gutter);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--near-black);
    cursor: pointer;
  }
  .nav-close svg { display: block; }

  .nav-toggle { display: inline-flex; }

  .solution { flex-direction: column; }
  .solution .container { order: 1; }
  .solution__text { max-width: 100%; padding-block: clamp(3rem, 10vw, 4rem); }
  .solution__img {
    position: static;
    order: 2;
    width: 100%;
    height: auto;
    min-height: 320px;
  }

  .contact-wrap { grid-template-columns: 1fr; }
  .contact-form { grid-column: 1; }
  .form-row { grid-template-columns: 1fr; gap: 0; }

  .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}