/* ==========================================================================
   SwapSquad Landing Page
   Design source: Figma "SwapSquad | Landing Page" — Desktop (1440) & Mobile (390)

   Responsive strategy: fluid scaling, not stepped breakpoints.
   Type sizes, gutters and section padding use clamp() anchored so they hit
   the EXACT mobile value at a 390px viewport and the EXACT desktop value at
   1440px, interpolating smoothly for every width in between — resizing the
   window glides instead of "snapping" at a series of arbitrary breakpoints.

   The one thing that can't be fluid is layout MODE (stacked column vs.
   side-by-side row, 2-col vs 4-col grids) — that's a single hard switch at
   1024px, matching a common tablet-landscape/laptop width. It's the only
   breakpoint in the file; everything else scales continuously. Beyond
   1440px the fluid values simply hold at their desktop maximum (clamp's
   upper bound) — the container itself is capped at 1264px either way.
   ========================================================================== */

:root {
  --neon: #7af76c;
  --neon-alt: #5edc4f;
  --white: #fafaf7;
  --dark-navy: #091720;
  --navy: #0d2131;
  --ink: #121e26;
  --body-ink: #1c1c1a;
  --gray: #f2f1ec;
  --required: #ff0000;

  --font: "Archivo", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

  --container: 1366px;

  /* fluid clamp(min, preferred, max) — preferred term interpolates linearly
     between the two Figma frames (390px → 1440px viewport width) */
  --gutter: clamp(20px, calc(-5.26px + 6.48vw), 88px);
  --section-py: clamp(64px, calc(52.11px + 3.05vw), 96px);

  --type-eyebrow: clamp(14px, calc(12.51px + 0.38vw), 18px);
  --type-h1: clamp(35px, 5.94vw, 90px);
  --type-h2: clamp(33px, 4.56vw, 80px);
  --type-h3: clamp(24px, 2.5vw, 36px);
  --type-h4: clamp(20px, calc(18.51px + 0.38vw), 24px);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body-ink);
  background: var(--white);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ol, ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

.text-neon { color: var(--neon); }
.text-white { color: var(--white); }

/* ---------- Typography ----------
   Font sizes use the fluid --type-* custom properties (see :root) so they
   scale continuously between the mobile and desktop frames. Letter-spacing
   and line-height differ only fractionally between the two Figma frames
   (well under 1px / 0.12 line-height), so those stay constant at the
   desktop value — the difference is imperceptible and it keeps the fluid
   math to the one property (font-size) that actually needs it. */
.common_space { padding:50px 0; }
.two_col_sec { 
gap:40px;
display: grid;
grid-template-columns: repeat(1, 1fr); 
}
.head__sec {
align-items: flex-start;
text-align: center;
gap: 20px;
display: flex;
flex-flow: column;
align-items: stretch;
margin-bottom:0;
}
.head__sec > * + * { margin:0 !important; padding:0 !important; }
  
.eyebrow {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.36px;
  font-size: var(--type-eyebrow);
  line-height: 1.28;
  color: var(--ink);
  margin:0;
}
.eyebrow--neon { color: var(--neon); }

.h1 {
  font-family: var(--font);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  font-size: var(--type-h1);
}

.h2 {
  font-family: var(--font);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: -0.4px;
  line-height: 1;
  margin: 0 0 24px;
  font-size: var(--type-h2);
  color: var(--navy);
}

.h3 {
  font-family: var(--font);
  font-weight: 700;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 24px;
  font-size: var(--type-h3);
}

.h4 {
  font-family: var(--font);
  font-weight: 600;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.18px;
  line-height: 1.3;
  margin: 0 0 1px;
  font-size: var(--type-h4);
}

.body {
  font-weight: 425;
  line-height: 1.44;
  font-size: 18px;
  margin: 0;
}

.caption {
  font-weight: 400;
  line-height: 1.44;
  font-size: 14px;
  letter-spacing: 0.07px;
  margin: 0;
}

.disclaimer {
  font-family: var(--font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.07px;
  line-height: 1.44;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.container { max-width:var(--container); margin:0 auto; padding:0 25px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--neon);
  border-radius: 6px;
  padding:13px 16px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.42px;
  line-height: 1.28;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--neon); color: var(--dark-navy); }
.btn--outline { background: transparent; }
.btn--sm { padding: 9px 11px; font-size: 12px; letter-spacing: 0.36px; }
.btn--full { width: 100%; }

/* ---------- Layout helpers ---------- */

.section-pad {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  background: var(--dark-navy);
  padding: 24px 0;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 17px;
}
.nav__icon { width: 40px; height: auto; }
.nav__wordmark { width: 110px; height: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--navy);
  /*padding: 64px var(--gutter) 32px;*/
  position: relative;
  overflow: clip;
}
.hero__body {
  /*max-width: var(--container);*/
  margin: 0 auto;
  padding:50px 0;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}
.hero__copy .h1 { text-align: center; }
.hero__image { border-radius: 6px; overflow: hidden; width: 100%; }
.hero__image img { width: 100%; height: 100%; object-fit: cover; }
.hero__image--desktop { display: none; }

/* ==========================================================================
   ss2 — Open Market Fantasy banner
   ========================================================================== */
.anc__copy  { margin-bottom:40px; }

/*.anc__copy {
	display: flex;
	flex-flow: column;
	gap: 50px;
}
.anc__copy > * + * { margin:0; padding:0; }
*/

.omf {
  background: var(--neon);
}
.omf__card {
  max-width: 834px;
  margin: 0 auto;
  background: var(--white);
  border: 2.2px solid var(--ink);
  border-radius: 8px;
  padding: clamp(48px, calc(37.6px + 2.67vw), 76px) clamp(24px, calc(9.14px + 3.81vw), 64px);
  text-align: center;
  color: var(--navy);
}
.omf__card .h3 { text-transform: uppercase; }
.omf__card .body { font-size: 18px; }

/* ==========================================================================
   ss3 — A New Category
   ========================================================================== */

.anc {
  background: var(--gray);
}
.anc__body {
/*  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;*/
}
.anc__copy .body { color: var(--body-ink); }
.anc__icons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, calc(13.03px + 0.76vw), 24px) 16px;
}
.anc-feature {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.anc-feature__icon { width: 68px; height: 68px; }

/* ==========================================================================
   ss4 — Build All Season
   ========================================================================== */

.bas {
  background: var(--navy);
}
.bas h2 { color:#fff; }
.bas__body {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.bas__headline {
	margin-bottom: 64px;
	display: flex;
	flex-wrap: wrap;
	gap: 50px;
}
.bas__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 40px;
}
.bas__item {
  display: flex;
  gap: 16px;
}
.bas__num {
  font-family: var(--font);
  font-weight: 600;
  font-stretch: condensed;
  text-transform: uppercase;
  color: var(--neon);
  font-size: var(--type-h4);
  line-height: 1.3;
  letter-spacing: 0.18px;
  flex-shrink: 0;
}
.bas__item + .bas__item { position: relative; }
.bas__list .bas__item:not(:last-child) {
  padding-bottom: 32px;
  border-bottom: 1px solid #5EDC4F;
}
.bas__item-copy { display: flex; flex-direction: column; gap: 6px; }

.bas__media {
  position: relative;
  width: 100%;
}
.bas__media-panel {
  background: var(--ink);
  border-radius: 16px;
  width: 100%;
  aspect-ratio: 350 / 457;
}
.bas__card {
  position: absolute;
  width: 87.71%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}
.bas__card img { width: 100%; height: 100%; object-fit: cover; }
.bas__card--trade { left: 6%; top: 5.46%; }
.bas__card--swap { left: 6%; top: 52.28%; }

/* ==========================================================================
   ss5 — CTA / Signup
   ========================================================================== */

.cta {
  background: var(--navy);

}
.cta .cta_inner {  position:relative; }
.cta .cta_inner::before {
	border-top: 1.8px solid #7AF76C;
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.cta__body { align-items: center;
/*  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;*/
}
.cta__headline {
	margin-bottom:0;
/*	margin-bottom: 64px;
	display: flex;
	flex-wrap: wrap;
	gap: 50px;*/
} 
.cta__headline h2  { color:#fff; }
/*.cta__headline > * + * { margin:0; padding:0; }
.cta__copy .body { margin-top: -16px; }*/

.form { display: flex; flex-direction: column; gap: 16px; }
.form__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.field__label {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.field__input {
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.42px;
  text-transform: uppercase;
  color: var(--white);
  background: transparent;
  border: 2px solid var(--white);
  border-radius: 6px;
  padding: 12px 16px;
  width: 100%;
}
.field__input::placeholder { color: rgba(250,250,247,1); text-transform: uppercase; }
.field__input:focus { /*outline: 2px solid var(--neon); outline-offset: 2px;*/ outline: none; }
.field__input.is-invalid { border-color: var(--required); }
.req { color: var(--required); }
.field__error {
  display: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--required);
  letter-spacing: 0;
  text-transform: none;
}
.field__error.is-visible { display: block; }

.disclaimer.is-success { color: var(--neon); }
.disclaimer.is-error { color: var(--required); }

/* ==========================================================================
   ss6 — FAQ
   ========================================================================== */

.faq {
  background: var(--gray);
}
.faq__body {
/*  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;*/
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.faq-item {
  border-bottom: 2px solid var(--neon);
  padding-bottom: 24px;
}
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  font-stretch: condensed;
  text-transform: uppercase;
  /*letter-spacing: 0.18px;*/
  font-size: var(--type-h4);
  line-height: 1.3;
  color: var(--navy);
  cursor: pointer;
  user-select: none;
}
.faq-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: var(--navy);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.faq-item__icon::before { width: 14px; height: 2px; }
.faq-item__icon::after { width: 2px; height: 14px; transition: transform 0.2s ease; }
.faq-item.is-open .faq-item__icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq-item__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.faq-item__a p { padding-top: 14px; font-size: clamp(16px, calc(15.26px + 0.19vw), 18px); line-height: 1.44; color:var(--navy); }
.faq-item.is-open .faq-item__a { max-height: 600px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--navy);
/*  padding: 20px var(--gutter) 64px;*/
  display: flex;
  flex-direction: column;
  gap: 96px;
}
.footer__logo {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: var(--container);
  margin: 0 auto 100px;
  width: 100%;
}
.footer__logo img { height: auto; }
.footer__logo img:first-child { width: 45.72%; }
.footer__logo img:last-child { width: 53.66%; }

.footer__links {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
  text-align: center;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.44;
  color: var(--white);
}
.footer__col a:hover { color: var(--neon); }

/* ==========================================================================
   lg — tablets landscape / small laptops (>= 1024px)
   The ONE hard layout-mode switch: stacked columns → side-by-side rows,
   2-col → 4-col grids. Everything fluid (type, gutter, section padding)
   keeps scaling continuously straight through this breakpoint — only
   `flex-direction`, `grid-template-columns` and a few structural sizes
   change here, since those genuinely can't be interpolated.
   ========================================================================== */

@media (min-width: 768px) {
  .faq__list { flex: 1; gap: 32px; }
  .faq-item__q { cursor: default; }
  .faq-item__icon { display: none; }
  .faq-item__a { max-height: none !important; overflow: visible; }

  .footer { /*padding: 48px var(--gutter) 96px; */gap: 0; justify-content: space-between;/* min-height: 596px;*/ }
  .footer__links { flex-direction: row; align-items: flex-end; text-align: left; gap: 24px; }
  .footer__col { flex: 1; }
  .footer__col--center { align-items: center; text-align: center; }
  .footer__col--right { align-items: flex-end; text-align: right; }
}


@media (min-width: 1024px) {
	.anc__copy   { margin-bottom:0; }
	.hero__body {
  padding:80px 0;
}
.common_space { padding:80px 0; }
  .nav__icon { width: 48px; }
  .nav__wordmark { width: 126px; }
.two_col_sec { 
gap: 80px;
grid-template-columns: repeat(2, 1fr); 
}
.head__sec {
align-items: flex-start;
text-align: left;
gap:40px;
display: flex;
flex-flow: column;
margin-bottom:80px;
}
  .hero {
/*    padding: 80px 0;
    min-height: 800px;
    display: flex;
    align-items: center;*/
  }
  .hero::after {
	content: "";
	display: block;
	height: 100%;
	width: 50%;
	background: #142737;
	position: absolute;
	right: 0;
	top: 0;
}
  .hero_inner { display: grid;
    grid-template-columns: repeat(2, 1fr); align-items: center; gap:50px; }
  .hero__copy {
    align-items: flex-start;
    text-align: left;
    gap: 50px;
  }
  .hero__copy > * + * { margin:0; padding:0; }
  .hero__copy .h1 { text-align: left; }
  .hero__copy .eyebrow { }
  .hero__copy .btn { width: auto; }
  .hero__image--mobile { display: none; }
  .hero__image--desktop {
	  	display:block;
		position:relative;
		z-index:1;
/*    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    border-radius: 0;*/
  }

  .anc__body { flex-direction: column; gap: 96px; }
  .anc__copy { max-width: 727px; }
  .anc__icons {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 92px;
  }

  .bas__body {gap: 128px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;}
  .bas__copy { /*flex: 1 1 380px; max-width: 516px; min-width: 0; */}
  .bas__headline {/* margin-bottom: 96px;*/ }
  .bas__media { /*flex: 1 1 380px; max-width: 620px; min-width: 0;*/ }
  .bas__media-panel { aspect-ratio: 620 / 720; }
  .bas__card { width: 57.74%; }
  .bas__card--trade { left: 13.87%; top: 18.69%; }
  .bas__card--swap { left: 30.32%; top: 54.11%; }

/*  .cta { padding: 96px 0; }
  .cta__body { gap: 128px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center; }*/
  .cta__copy { flex: 1 1 300px; max-width: 619px; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
  .cta__copy .body { margin-top: 0; }
  .cta__headline { margin-bottom: 0; }
  .form {/* flex: 0 1 518px; min-width: 0; align-self: center; */}
  .form__row { flex-direction: row; }

/*  .faq__body { gap: 128px;
    display: grid;
    grid-template-columns: repeat(2, 1fr); }
  .faq__headline { flex: 0 0 620px; }*/

}

@media (max-width: 767px) {
.footer__logo { margin-bottom:50px; }
.footer__links { gap:15px; }
.footer__col { flex-direction:row; justify-content: center; font-size:15px; font-weight:normal; order:1; }
.footer__col--right { order:2; }
.footer__col--center { order:3; margin-top: 20px; }
.btn--sm{font-size: 10px;}
}
@media (max-width: 480px) {
.footer__col { flex-direction: column; }
}