@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  --ink:#0A0C0E;
  --panel:#12161A;
  --panel-2:#0F1214;
  --stroke:#2A2F33;
  --text:#E6E7E8;
  --muted:#A5A7AA;
  --accent:#2BA49D;
  --error:#B42318;
  --ok:#1EA97C;

  --bg-hero: radial-gradient(1200px 600px at 20% -10%, rgba(86,199,190,0.06), rgba(0,0,0,0) 60%), linear-gradient(180deg,#0A0C0E 0%, #0E1114 60%, #0B0D10 100%);
  --bg-how: linear-gradient(180deg,#0D1013 0%, #0B0D10 100%);
  --bg-offer: linear-gradient(180deg,#0C0E11 0%, #0F1214 100%);
  --bg-pricing: linear-gradient(180deg,#0B0D10 0%, #0C0F12 100%);
  --bg-faq: linear-gradient(180deg,#0E1114 0%, #0A0C0E 100%);
  --bg-cta: linear-gradient(180deg,#0B0D10 0%, #0E1114 100%);
  --bg-footer: linear-gradient(180deg,#090B0D 0%, #07090B 100%);
   --sb-thumb: var(--accent);             /* teal */
  --sb-track: rgba(86,199,190,.10);      /* faint teal film */
  --sb-thumb-hover: #6fd8d0;             /* a bit brighter on hover */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family: "Poppins", sans-serif;
  color:var(--text); background:#000;
}
a{ color:var(--text); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }

.container{ width:min(1400px, 100% - 2rem); margin-inline:auto; padding-top: 20px; }
.stack{ display:grid; gap:1rem; }
.center{ text-align:center; }

/* Skip link */
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:1rem; top:1rem; background:#fff; color:#000; padding:0.5rem 0.75rem; border-radius:8px; z-index:10000; }

/* Slices */
.slice{ position:relative; isolation:isolate; background:var(--slice-bg,transparent); padding:clamp(3rem, 6vw, 6rem); }


/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(160%) blur(8px);
  background: rgba(10,12,14,0.88);
  border-bottom:1px solid #1C2126;
}
.header__inner{ display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:1rem; padding-block:0.6rem; }
.nav ul{ display:none; gap:1.25rem; list-style:none; padding:0; margin:0; }
.nav a{ opacity:.9; }
@media (min-width: 900px){
  .nav ul{ display:flex; }
  .burger{ display:none; }
}
.burger{ width:40px; height:40px; border:1px solid #2A2F33; border-radius:10px; background:#12161A; color:#E6E7E8; display:grid; place-items:center; }
.burger span{ display:block; width:18px; height:2px; background:#E6E7E8; margin:3px 0; border-radius:2px; }

.mobile-menu[hidden]{ display:none; }
.mobile-menu{ background:#0D1013; border-bottom:1px solid #1C2126; }
.mobile-menu nav ul{ list-style:none; padding:1rem; display:grid; gap:0.75rem; }
.mobile-menu nav a{ padding:0.75rem 0.5rem; display:block; }

/* Hero */
.hero{ display:grid; grid-template-columns: 1.05fr .95fr; gap:clamp(1.5rem, 6vw, 4rem); align-items:center; }
.hero__art{ position: relative; display: flex; justify-content: center; align-items: center;}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:1.5rem; }
h1{ font-size: 50px; line-height:1.2; margin:0; font-weight: 500;}
.muted{ color:var(--muted);  }
.mutedtwo{margin: 0 auto; padding-bottom: 40px; color:var(--muted); width: 60%;}

/* Hall of Fame */
.slice--hof{ padding-top: 20px; }
.hof{ display:grid; gap:2.5rem; }
.slice--hof .chip{
  width: fit-content;
  margin: 0 auto;
  padding: 6px 16px;
  border-radius: 999px;
  border:1px solid rgba(86,199,190,.4);
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hof-logos{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:18px;
}

.logo-slot{
  flex: 1 1 clamp(140px, 16%, 220px);
  max-width: calc(16.66% - 18px);
  min-height:96px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:var(--panel-2);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  color:var(--muted);
  font-size:0.85rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.logo-slot span{ white-space:nowrap; }

@media (max-width: 1200px){ .logo-slot{ max-width: calc(25% - 18px); } }
@media (max-width: 900px){ .logo-slot{ max-width: calc(33.33% - 18px); } }
@media (max-width: 640px){ .logo-slot{ max-width: calc(50% - 18px); } }
.logo-slot img{
  max-width:100%;
  max-height:60px;
  object-fit:contain;
}

/* Buttons */
.btn{ appearance:none; border:none; border-radius:14px; padding:0.9rem 1.1rem; font-weight:700; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease; }
.btn:focus-visible{ outline:3px solid rgba(86,199,190,.45); outline-offset:2px; }
.btn--primary{ background:var(--accent); color:#0B2E2A; width: 280px; height: 50px; font-weight: 600;font-size: 18px;}
.btn--secondary{ background:var(--accent); color:#0B2E2A; border:1px solid #2F353A; width: 250px; height: 80px;font-size: 25px; }
.btn--ghost{ background:#0F1214; color:#ffffff; border:3px solid #008575; width: 280px; height: 100px; font-size: 24px;line-height: 2rem; text-align: left;}
.btn:hover{ transform:translateY(-2px); }

.btn--ghost .reveal{
  position:absolute; inset:0 0 0 0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  opacity:0; pointer-events:none;
  transition: transform .35s ease, opacity .35s ease;
}
.btn--ghost .label{opacity:1; transform: translateY(0); }
.btn--ghost .reveal{opacity:0; transform: translateY(12px); }
.btn--ghost:hover .label{ opacity:0; transform: translateY(-12px); }
.btn--ghost:hover .reveal{ opacity:1; transform: translateY(0);  }

/* Cards & panels */
.card{ background:var(--panel); border:1px solid var(--stroke); border-radius:20px; padding:1.25rem; box-shadow:0 10px 30px rgba(0,0,0,.25) inset; }

/* How */
.how{ display:grid; grid-template-columns: 1.2fr .8fr; gap:clamp(1rem,5vw,2.5rem); align-items:start; }
.how .steps{ display:grid; gap:2rem; }
.how .card{margin-top: 20px;}
.how .mock__inner{ display:grid; place-items:center; min-height:260px; color:#AAB3B7; border:1px dashed #384045; border-radius:16px; background:#0F1316; }

/* Remove the old HOW section visually */
.slice--how{ display:none !important; }

/* Features */
.features{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:3rem; }
.feature{ position:relative; padding:1.5rem; }
.feature .icon{ width:28px; height:28px; color:var(--accent); }
.feature h3{ margin:0.5rem 0; }

/* ================= Industries grid ================ */
.industry-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
@media (max-width: 1100px){ .industry-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px){ .industry-grid{ grid-template-columns: 1fr; } }

.industry-card{ background: var(--panel); border:1px solid var(--stroke); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:14px; }
.card-head{ display:flex; align-items:flex-start; gap:12px; }
.card-head .ic{ width:32px; height:32px; color: var(--accent); }
.card-txt h3{ margin:0 0 6px; font-size: 20px; }
.card-txt p{ margin:0; color:var(--muted); line-height:1.5; }

.card-audio{ display:flex; align-items:center; gap:12px; }
.play-btn{ width:34px; height:34px; border-radius:50%; border:2px solid #66CBC8; background: var(--panel); display:grid; place-items:center; cursor:pointer; }
.play-btn::before{ content:""; width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color: transparent transparent transparent #FFFFFF; transform: translateX(1px); }
.industry-card.playing .play-btn::before{ border:none; width:3px; height:12px; background:#FFFFFF; border-radius:1px; transform:none; box-shadow:none; }
.industry-card.playing .play-btn::after{ content:""; position:absolute; width:3px; height:12px; background:#FFFFFF; border-radius:1px; left: calc(50% + 2px); top:50%; transform: translate(-50%, -50%); }
.bar{ flex:1; height:6px; border-radius:6px; background: rgba(255,255,255,.12); overflow:hidden; }
.bar__fill{ display:block; height:100%; width:0%; background: linear-gradient(90deg, #9CD8D2, #2BA49D); }

/* Pricing */
.pricing{ display:grid; grid-template-columns: repeat(1, minmax(0,1fr)); gap:1rem; margin-bottom:1rem; padding-top: 20px;}
.pricing.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.pricing-layout{
  padding-top: 20px;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 520px);
  gap: 80px;
  align-items:center;
  justify-content:center;
}
@media (max-width: 900px){ .pricing-layout{ grid-template-columns: 1fr; } }
.price-card.stage{ max-width:520px;  }
.price-card__head{
  display:block;
  margin-bottom:14px;
  font-size:1.2rem;
}
.pill{ width:36px; height:36px; border-radius:10px; background:#111417; border:1px solid #3A4147; color:#E6E7E8; }
.stage{ background: linear-gradient(180deg,#12161A 0%, #101316 100%); }
.price-list, .bullets { padding-left: 1.1rem; margin: .5rem 0 1rem; }
.price-list li, .bullets li { margin: .25rem 0; }
em { color: var(--accent); font-style: normal; }
.micro { color: var(--muted); font-size: .9rem; margin-top: .5rem; }
.slice--pricing{padding-top: 50px;}
h2{font-size: 50px;}

.pricing-cta{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width: 350px;
  justify-content: center;
  align-items:center;
  text-align:center;
}
.pricing-cta .btn{ width:100%; }
.pricing-note{ margin:8px 0 0; color:var(--muted); font-size:.95rem; text-align:left; }


/* FAQ */
.faq{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.faq-item{ border-bottom:1px solid #343A40; padding-block:0.75rem; }
.faq-toggle{ width:100%; text-align:left; background:transparent; border:none; color:var(--text); padding:0.5rem 0; font-weight:700; cursor:pointer; }
.faq-answer{ max-height:0; overflow:hidden; transition:max-height .25s ease; color:#C6C9CC; }
.faq-item.open .faq-answer{ max-height:240px; margin-top:0.25rem; }

/* CTA strip */
.cta{ display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;           /* vertically center title + buttons */
  column-gap: 16px; }
.cta h3{ margin:0; font-size: clamp(1.5rem, 4vw, 2rem); }


.cta__actions{
  display: flex;
  align-items: center;
  gap: 25px;                     /* the “small gap” */
  flex-wrap: nowrap;             /* keep them on one line */
}
.cta__actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;              /* gives consistent height across variants */
  padding-inline: 18px;
}
.slot-btn {
  position: relative;
  overflow: hidden;
}
.slot-btn .label {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}
.slot-btn .reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
  color: #ffffff;
}
.slot-btn:hover .label { transform: translateY(-200%); }
.slot-btn:hover .reveal { transform: translateY(0); }
.slot-btn .reveal::before { content: attr(data-number); }

.btn--footer {
  background-color: #0F1214;
  color: #ffffff;
  border: 3px solid #008575;
  font-size: 25px;
}
.btn--footer:hover { background-color: #0F1214; }

/* char-based animation not used for hover parity; keeping keyframes harmless */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn--footer .reveal .char{ animation: none; transform:none; }
}


/* Footer */
.footer{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-nav{ display:flex; gap:2rem; }
.footer a{ color:#C9D4D2; opacity: .9; }
.footer a:hover{ opacity: 1; text-decoration: none; }
.footer-copy{ text-align: center; font-size: 14px; opacity: .75; margin: 2rem 0 0; padding-top: 40px;}

/* Forms & modals */
.form{ display:grid; gap:0.9rem; overflow: hidden;}
.form__row{ display:grid; gap:0.4rem; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"]{
  width:100%; padding:0.9rem 1rem; border-radius:999px; border:1px solid #C5CFD6; background:#fff; color:#111;
}
.form__row--check{ display:flex; align-items:center; gap:0.5rem; }
.form__actions{ display:flex; gap:0.5rem; margin-top:0.25rem; }
.form__success{ color:#3BD7A0; }
.form__error{ color:#ff6a6a; }

.modal[aria-hidden="true"]{ display:none; }
.modal[aria-hidden="false"]{
  position:fixed; inset:0; z-index:1000;
  display: flex; align-items: center; justify-content: center;
  background:rgba(0,0,0,.55); /* Apply backdrop color to the container */
  overflow-y: auto; /* Prevent the backdrop itself from scrolling */
}
/* The backdrop element is now just for JS to find, it doesn't need styling. */
.modal__backdrop{ position:absolute; inset:0; }
.modal__dialog{
  position:relative;
  width:min(880px, 92%);
  background:#082221;
  color:#E6E7E8;
  border:1px solid #69CFC7;
  border-radius:18px;
  padding:1.25rem;
  box-shadow:0 20px 50px rgba(0,0,0,.6);
  max-height: 85vh;           /* keeps dialog within viewport */
  overflow: auto;  -webkit-overflow-scrolling: touch; }

/* Generic modal panel styles from /leger */
.modal__panel {
  position: relative;
  width: min(820px, 94vw);
  background: var(--panel, #0D1013); /* Fallback to a dark but distinct panel color */
  border: 3px solid var(--accent);
  border-radius: 18px;
  padding: 28px 24px 34px;
  color: var(--text);
  box-shadow: 0 28px 70px rgba(0,0,0,.5);
  z-index: 2;
}
.modal__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.modal__head h3{ margin:0; font-weight:600; letter-spacing:.02em; font-size: 1.5rem; }

.modal__dialog.sheet{ background:#0D1013; border-color:#2A2F33; }
.modal__close{ position: absolute; right: 20px; width: 44px; height: 44px; border: 2px solid rgba(255,255,255,.75); background: transparent; color:#fff; border-radius: 8px; cursor: pointer; font-size: 22px; }
.modal__close:hover{ background: rgba(255,255,255,.08); }

/* Styles for Terms/About modal content */
.terms-body{ max-height: min(70vh, 680px); overflow-y: auto; padding-right: 6px; }
.terms-body h4{ margin: 16px 0 6px; font-size: 18px; }
.terms-body p, .terms-body li{ font-size: 16px; line-height: 1.55; color: var(--muted); }
.terms-body ul{ margin: 0 0 10px 18px; padding-left: 1rem; }

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; }
  .how{ grid-template-columns: 1fr; }
  .features{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .pricing.three{ grid-template-columns: 1fr; }
  .faq{ grid-template-columns: 1fr; }
}

@media (max-width: 600px){
  /* General Slice Padding */
  .slice { padding: 3rem 1rem; }

  /* Header */
  .header__inner { grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
  .header__inner .btn--primary { display: none; } /* Hide header button on small screens */

  /* Typography */
  h1, h2 { font-size: clamp(2rem, 8vw, 2.75rem); }
  .mutedtwo { width: 95%; }

  /* Hero */
  .hero__art { display: none; } /* Hide hero image on small screens for simplicity */
  .hero__ctas { flex-direction: column; align-items: flex-start; }
  .btn--secondary, .btn--ghost { width: 100%; max-width: 350px; }

  /* Features */
  .features { grid-template-columns: 1fr; gap: 1.5rem; }

  /* CTA Strip */
  .cta{ grid-template-columns: 1fr; }
  .cta__actions{
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    margin-top: 1rem;
  }
  .cta__actions .btn {
    width: 100%;
    max-width: 350px;
  }

  /* Footer */
  .footer { justify-content: center; text-align: center; gap: 1.5rem; }
  .footer-mail { width: 100%; }
}

defs {
  display: none;
}
.scrollbar-teal{
  scrollbar-color: var(--sb-thumb) transparent;  /* thumb / track */
  scrollbar-gutter: stable;                      /* no content shift when sb appears */
}

/* WebKit (Chrome/Edge/Safari) */
.scrollbar-teal::-webkit-scrollbar{
  width: 10px;
  
}
.scrollbar-teal::-webkit-scrollbar-track{
  background: transparent;                       /* or var(--sb-track) if you want visible track */
  border-left: 2px solid var(--sb-track);        /* slim teal guide near the edge */
  border-radius: 999px;
}
.scrollbar-teal::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 2px solid rgba(13,16,19,.9);           /* creates the slim gap on dark bg */
}
.scrollbar-teal::-webkit-scrollbar-thumb:hover{
  background: var(--sb-thumb-hover);
}
.brand img{height: 62px;}

li{font-weight: 200; line-height: 2rem;}