/* ================================
   0) Design Tokens (CSS Variables)
   ================================ */
:root{
  /* Colors */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-500:#64748b;
  --slate-700:#334155; --slate-800:#1f2937; --slate-900:#0f172a; --slate-950:#020617;
  --emerald-300:#6ee7b7; --emerald-400:#34d399;
  --purple-100:#f3e8ff; --yellow-100:#fef9c3; --cyan-100:#cffafe;

  /* Spacing (responsive gutter & section paddings)
     - Tweak only these three to change spacing across the site. */
  --gutter: clamp(1rem, 5vw, 4rem);          /* left/right edge padding */
  --section-py-sm: 4rem;                      /* vertical padding (mobile) */
  --section-py-lg: 6rem;                      /* vertical padding (>=768px) */
}

/* ================================
   1) Base / Resets
   ================================ */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  font-family: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  color:#0b1220;
}

/* A single container to control edge spacing site‑wide */
.container{
  width:100%;
  padding-inline: var(--gutter);
}

/* Utility: shared section block padding (top/bottom only) */
.section{
  padding-block: var(--section-py-sm);
}
@media (min-width:768px){
  .section{ padding-block: var(--section-py-lg); }
}

/* ================================
   2) Navigation
   ================================ */
.nav{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--slate-200);
  background:rgba(2,6,23,.9);
  backdrop-filter:blur(6px);
}
.nav__row{
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none }
/* Replace dot with logo */
.brand__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  margin-right: 0.5rem;
}

/* Align logo + text side by side */
.brand, .footer__brand {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.brand__text{ color:#fff; font-weight:600 }
.brand__text.dark{ color:#0b1220 }
.nav__links{ display:none; gap:.25rem }
.nav__links a{
  color:#cbd5e1; text-decoration:none; font-size:.95rem;
  padding:.4rem .65rem; border-radius:9999px;
}
.nav__links a:hover{ background:#1f2937; color:#fff }
.nav__auth{ display:none; gap:.5rem }
.nav__burger{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem; border:0; border-radius:.5rem; background:transparent; color:#cbd5e1;
}
.icon{ width:24px; height:24px }
.icon--inline{ width:18px; height:18px; margin-left:.4rem; vertical-align:middle }

/* Buttons */
.btn{ border:0; border-radius:9999px; padding:.65rem 1rem; font-weight:600; cursor:pointer; transition:.15s }
.btn--primary{ background:var(--emerald-400); color:#0b1220 }
.btn--primary:hover{ background:#5eead4 }
.btn--secondary{ background:transparent; color:#e2e8f0; border:1px solid #334155 }
.btn--secondary:hover{ background:#1f2937 }
.btn--ghost{ background:transparent; color:#cbd5e1 }
.btn--ghost:hover{ color:#fff }
.btn.full{ width:100% }

/* Mobile Drawer */
.drawer{ border-top:1px solid #0b1220; background:var(--slate-950) }
.drawer__links{ display:grid; gap:.5rem; padding:1rem 0 }
.drawer__links a{ color:#cbd5e1; text-decoration:none; padding:.5rem; border-radius:.4rem }
.drawer__links a:hover{ background:#111827 }
.drawer__auth{ display:flex; gap:.5rem }

/* ================================
   3) Hero (now uses same gutters as others)
   ================================ */
.hero {
  height: 100vh;
  background: url('landinghero.jpg') no-repeat right center;
  background-size: cover;
  display: flex;
  align-items: center;
  padding-left: 8%;
}

.hero-content {
  max-width: 75%;
  color: white;
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #c1f0c1
}

.typing {
  position: relative;
  display: inline-block;
  /* optional for nicer wrapping on small screens */
  word-break: break-word;
}

.typing::after {
  content: "";
  position: absolute;
  right: -4px;
  width: 2px;
  height: 1em;
  background: currentColor;
  animation: blink 0.9s step-end infinite;
}
.typing.done::after {
  display: none;
}

@keyframes blink {
  50% { opacity: 0; }
}

.hero p {
  margin-top: 8px;   /* tighter gap from the h1 */
  margin-bottom: 16px; /* still some breathing room before buttons */
  font-size: 2rem;
}

.highlight {
  color: #3bc7c4; /* teal accent */
  font-weight: bold;
}

.cta-buttons {
  margin-top: 20px;
}

.btn-primary, .btn-secondary {
  padding: 12px 24px;
  margin-right: 15px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

.btn-primary {
  background: #3bc7c4;
  color: black;
}

.btn-secondary {
  border: 2px solid #fff;
  color: white;
}
/* Devices */
.devices{ position:relative }
.laptop{
  position:relative; border:1px solid #334155; background:#0b1628; padding:.6rem; border-radius:1rem;
  box-shadow:0 20px 40px rgba(0,0,0,.4); max-width:560px; margin-inline:auto;
}
.laptop__screen{ aspect-ratio:16/10; border-radius:.8rem; background:linear-gradient(135deg,#334155,#475569); overflow:hidden }
.laptop__base{ height:8px; background:#1f2937; border-radius:0 0 .7rem .7rem; margin-top:.4rem }
.dash{ padding:1rem }
.dash__title{ height:12px; width:130px; background:#64748b; border-radius:6px; margin-bottom:.5rem }
.dash__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem }
.dash__card{ border:1px solid #475569; border-radius:.6rem; padding:.6rem }
.dash__label{ height:8px; width:70px; background:#64748b; border-radius:5px; margin-bottom:.4rem }
.dash__bars{ display:flex; gap:.25rem; align-items:flex-end }
.dash__bars span{ display:inline-block; width:8px; height:32px; background:#7a8699; border-radius:3px }

.phone{ position:absolute; right:-22px; top:22px; width:160px; transform:rotate(3deg) }
.phone__screen{
  aspect-ratio:9/19; background:linear-gradient(180deg,#34d399,#0f766e);
  border:1px solid #334155; border-radius:1rem 1rem .5rem .5rem; box-shadow:0 18px 30px rgba(0,0,0,.35);
}
.phone__chin{ height:8px; background:#1f2937; border-radius:0 0 .75rem .75rem }

/* ================================
   4) Logos
   ================================ */
.logos {
  background: #fff;
  padding: 2rem 0;
  overflow: hidden;
}

.logos__kicker {
  text-align: center;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  margin-bottom: 2rem;
}

.logos__slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.logos__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.logos__track img {
  height: 80px;
  flex-shrink: 0;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: opacity .3s ease;
}

.logos__track img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ================================
   Product Suite — Neutral Theme, Larger Scale, Horizontal Layout
   ================================ */
.product-suite {
  background: #fdfdfb; /* soft off-white/cream */
  border-top: 1px solid #e5e5e5;
  padding-block: var(--section-py-lg);
}

.product-suite__kicker {
  text-align: center;
  color: #666; /* medium grey */
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
}

.product-suite h2 {
  text-align: center;
  font-size: 2.5rem; /* larger heading */
  font-weight: 800;
  color: #111; /* near black */
  margin: 0;
}

.product-suite__desc {
  max-width: 52rem;
  margin: 1rem auto 2.5rem;
  text-align: center;
  color: #444; /* darker grey */
  font-size: 1.15rem;
  line-height: 1.7;
}

.product-suite__grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .product-suite__grid {
    grid-template-columns: repeat(3, 1fr); /* 3x2 grid on desktop */
  }
}

/* Neutralized horizontal cards */
.product-suite .card {
  background: #fff; /* pure white tiles */
  border: 1px solid #ddd; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 2rem;
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
}

.product-suite .card__media {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

/* Remove colored tone backgrounds just for Product Suite */
.product-suite .tone--green,
.product-suite .tone--purple,
.product-suite .tone--yellow,
.product-suite .tone--cyan {
  background: #fff !important;
  border-color: #ddd !important;
}

/* Bigger icon styling */
.product-suite .card__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 1.2rem;
  background: #f9f9f7; /* neutral off-white */
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-suite .card__icon svg {
  width: 44px;
  height: 44px;
  stroke: #111; /* dark stroke for contrast */
}

/* Text next to icon */
.product-suite .card__text h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: #111;
}

.product-suite .card__text p {
  font-size: 1.1rem;
  color: #333;
  margin: 0;
  line-height: 1.6;
}

/* =========================================
   Metrics Section — Dark band with SVG icons
   ========================================= */
.metrics {
  background: #0d0d0f;
  padding-block: var(--section-py-lg);
  color: #fff;
  text-align: center;
}

.metrics__grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 900px){
  .metrics__grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 2.5rem;
  }
}

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric__icon {
  width: 48px;
  height: 48px;
  margin-bottom: .6rem;
}
.metric__icon svg {
  width: 100%;
  height: 100%;
  stroke: #a855f7; /* purple accent */
}

.metric h3 {
  font-size: 2rem;
  font-weight: 800;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 8px rgba(168, 85, 247, 0.6); /* glow */
}

.metric__heading {
  margin: .3rem 0 0;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
}

.metric__sub {
  margin: .2rem 0 0;
  font-size: .95rem;
  color: #d1d5db;
}

/* Hover effect */
@media (hover:hover){
  .metric:hover .metric__icon svg {
    stroke: #c084fc; /* lighter purple on hover */
  }
}



/* =========================================
   HOW — Cream background + brighter block tiles
   ========================================= */
.how {
  background:#fdfdfb;               /* same cream as Product Suite */
  border-top:1px solid #e5e5e5;
  padding-block: var(--section-py-lg);
}

.how h2 {
  text-align:center;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing:.02em;
  margin:0 0 .5rem 0;
  color:#0e0e0e;
}

.how__desc {
  max-width: 58rem;
  margin: 0 auto 2.2rem;
  text-align: center;
  color:#111;
  font-size: 1.25rem;
  line-height: 1.7;
}

.how__grid {
  display:grid;
  gap: 1.5rem;
}
@media (min-width: 900px){
  .how__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* Big, rounded, colorful tiles */
.howcard {
  border-radius: 22px;
  padding: 2.2rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  min-height: 260px;
  transition: transform .18s ease, box-shadow .18s ease;
  color:#000; /* ensure black text inside */
}

.howcard__icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 1rem;
}
.howcard__icon svg {
  width: 32px; height: 32px;
  stroke: #000; /* black icons for contrast */
}

/* Titles & copy */
.howcard h3 {
  margin: .25rem 0 .6rem 0;
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 800;
}
.howcard p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.65;
  color:#000; /* force black body text */
}

/* Brighter pastel-vibrant palette */
.tile--sage { background:#b6f0c1; }   /* bright mint green */
.tile--plum { background:#d9b3ff; }   /* vibrant lavender */
.tile--gold { background:#ffe58a; }   /* golden yellow */
.tile--teal { background:#8ef2e1; }   /* aqua teal */

/* Hover lift */
@media (hover:hover){
  .howcard:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0,0,0,.12);
  }
}


/* Footer styled like header */
.footer {
  border-top: 1px solid var(--slate-200);
  background: rgba(2,6,23,.9);
  backdrop-filter: blur(6px);
  color: #cbd5e1;
}

.footer__grid {
  display: grid;
  gap: 1.5rem;
  padding: 2rem 0;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer__brand .brand__text {
  color: #fff;
  font-weight: 600;
}

.footer h4 {
  margin: 0 0 .4rem;
  font-size: .9rem;
  color: #fff;
}
.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer li + li { margin-top: .25rem }
.footer a {
  color: #cbd5e1;
  text-decoration: none;
}
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__bottom {
  border-top: 1px solid var(--slate-200);
  padding: 1rem 0;
  text-align: center;
  color: #94a3b8;
  font-size: .9rem;
}


/* ================================
   7) Responsive Layout
   ================================ */
@media (min-width:768px){
  .nav__links{ display:flex }
  .nav__auth{ display:flex }
  .nav__burger{ display:none }

  .hero__grid{
    grid-template-columns:1.1fr .9fr;
  }

  .hero h1{
    font-size: clamp(3rem, 8vw, 6rem); /* or whatever size you want */
  }
  .logos__grid{ grid-template-columns:repeat(6,1fr) }
  .how__grid{ grid-template-columns:repeat(4,1fr) }

  .footer__grid{ grid-template-columns:repeat(4,1fr) }
}

/* ================================
   HERO — Mobile-first responsive fixes
   ================================ */

/* Layout */
.hero {
  padding-block: clamp(2rem, 6vw, 5rem);
}

.hero .container {
  /* ensure we’re not edge-to-edge on small screens */
  padding-inline: clamp(1rem, 5vw, 2rem);
}

.hero__grid {
  display: grid;
  align-items: center;
  gap: clamp(1rem, 4vw, 2rem);
  grid-template-columns: 1fr;              /* mobile: single column */
}

/* Desktop/tablet: two columns */
@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1.2rem, 3vw, 2.5rem);
  }
}

/* Content first on mobile, allow swapping on desktop if needed */
.hero__content { order: 1; }
.hero__media   { order: 2; }

@media (min-width: 768px) {
  .hero__content { order: 1; }
  .hero__media   { order: 2; }
}

/* Typography scaling */
.hero h1 {
  font-size: clamp(1.9rem, 6.5vw, 3.2rem);
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 0.6rem 0;
}

.hero p {
  font-size: clamp(1rem, 3.6vw, 1.125rem);
  line-height: 1.6;
  color: #111;
  margin: 0 0 1rem 0;
}

/* CTA buttons wrap nicely on small screens */
.hero__cta,
.hero .btn-group,
.hero .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.hero .btn {
  /* make tap targets comfy on mobile */
  padding: 0.8rem 1rem;
  font-size: 0.98rem;
}

/* Media (image/video) containment */
.hero__media {
  width: 100%;
}

.hero__media img,
.hero__media video,
.hero__media svg,
.hero__media picture img {
  display: block;
  width: 100%;
  height: auto;             /* keep aspect ratio */
  max-height: 420px;        /* reasonable cap on desktop */
  object-fit: contain;      /* avoid cropping */
}

@media (max-width: 767.98px) {
  .hero__media img,
  .hero__media video {
    max-height: 300px;      /* shorter on phones */
    margin-top: 0.5rem;
  }
}

/* Optional: center-align text on mobile for better balance */
@media (max-width: 767.98px) {
  .hero__content {
    text-align: center;
  }
  .hero__cta,
  .hero .btn-group,
  .hero .cta-row {
    justify-content: center;
  }
}