/* =============================================================================
   YitYall, LLC — Corporate Design System
   "Technology for better human interactions."
   ============================================================================= */

:root {
  /* Brand Tokens */
  --brand-magenta: #fb018a;
  --brand-magenta-glow: rgba(251, 1, 138, 0.18);
  --brand-magenta-subtle: rgba(251, 1, 138, 0.08);
  --brand-teal: #2f798f;
  --brand-teal-light: #52a8c2;
  --brand-teal-glow: rgba(47, 121, 143, 0.2);

  /* Surface & Base */
  --bg-canvas: #08090d;
  --bg-surface-subtle: #0f1118;
  --bg-surface: #141722;
  --bg-surface-raised: #1a1e2b;
  --bg-surface-glass: rgba(20, 23, 34, 0.75);

  /* Borders & Dividers */
  --border-hairline: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(251, 1, 138, 0.5);

  /* Typography */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #08090d;

  /* Fonts */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Layout */
  --max-width: 1120px;
  --max-width-narrow: 760px;
  --section-spacing: clamp(4.5rem, 8vw, 7.5rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  line-height: 1.65;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Background Atmosphere */
.bg-atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.bg-glow-top {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 550px;
  background: radial-gradient(ellipse at center, rgba(251, 1, 138, 0.07) 0%, rgba(47, 121, 143, 0.04) 45%, transparent 75%);
  filter: blur(80px);
}

.bg-glow-bottom {
  position: absolute;
  bottom: -15%;
  right: 10%;
  width: 650px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(47, 121, 143, 0.06) 0%, transparent 70%);
  filter: blur(90px);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(1.25rem, 5vw, 2.5rem);
  padding-right: clamp(1.25rem, 5vw, 2.5rem);
  position: relative;
  z-index: 1;
}

/* Header & Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(8, 9, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-hairline);
  transition: border-color var(--transition-fast);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: opacity var(--transition-fast);
}

.brand-link:hover {
  opacity: 0.9;
}

.header-logo {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  padding: 8px 0;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: all var(--transition-normal);
}

/* Mobile Nav Toggle (hidden on desktop; shown only under the 768px
   breakpoint where the inline nav-links list is hidden below). 48px
   minimum touch target per WCAG 2.5.5 (border included in the box via
   box-sizing: border-box, set globally on the * reset above). */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nav-toggle:hover {
  border-color: var(--brand-magenta);
  background: var(--bg-surface);
}

.nav-toggle-icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon-close {
  display: block;
}

.nav-cta:hover {
  border-color: var(--brand-magenta);
  background: var(--bg-surface);
  box-shadow: 0 0 16px var(--brand-magenta-glow);
  transform: translateY(-1px);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  line-height: 1;
}

.btn-primary {
  background: var(--brand-magenta);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 20px rgba(251, 1, 138, 0.32);
}

.btn-primary:hover {
  background: #e0017a;
  box-shadow: 0 6px 28px rgba(251, 1, 138, 0.45);
  transform: translateY(-2px);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
  background: var(--bg-surface-raised);
  border-color: var(--brand-teal-light);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--border-hairline);
  background: rgba(255, 255, 255, 0.03);
}

/* Badge / Pills. align-items was originally `center`: fine while the label
   fits on one line, but the hero badge's longer label wraps to two lines on
   narrow phones, and centering against the resulting two-line block leaves
   the dot floating between the lines instead of beside the first one. Also,
   flex's default flex-shrink:1 was letting the dot's fixed 6px width get
   compressed non-circular whenever the row ran short on space (only width
   is affected in a row axis, not height) — visible as a squashed oval on
   narrow phones. Fixed by pinning the dot to the top (flex-start), giving
   it flex-shrink:0 so it can't be compressed, and nudging it down by half
   the line-height/dot-height difference so it centers on the FIRST line
   specifically, whether the label wraps or not. */
.badge {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.775rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  background: var(--brand-magenta-subtle);
  color: var(--brand-magenta);
  border: 1px solid rgba(251, 1, 138, 0.22);
}

.badge-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  margin-top: 7px;
  border-radius: 50%;
  background-color: var(--brand-magenta);
  box-shadow: 0 0 8px var(--brand-magenta);
}

/* Hero Section */
.hero {
  padding-top: clamp(4rem, 10vw, 7.5rem);
  padding-bottom: clamp(4.5rem, 9vw, 6.5rem);
  text-align: center;
  position: relative;
}

.hero-content {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-brand-mark {
  width: 96px;
  height: 96px;
  margin-bottom: 2rem;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(251, 1, 138, 0.3));
  transition: transform var(--transition-normal);
}

.hero-brand-mark:hover {
  transform: scale(1.04);
}

.hero-headline {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
  color: #ffffff;
}

.hero-lead {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* Sections */
.section {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
  border-top: 1px solid var(--border-hairline);
  position: relative;
}

.section-header {
  margin-bottom: 3rem;
}

.section-header.center {
  text-align: center;
  max-width: var(--max-width-narrow);
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-top: 0.85rem;
  margin-bottom: 1rem;
  color: #ffffff;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 620px;
  line-height: 1.65;
}

/* What We Build */
.build-lead-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.build-lead-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-magenta), var(--brand-teal), transparent);
}

.build-lead-text {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
  font-weight: 600;
  line-height: 1.45;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.build-card {
  background: var(--bg-surface-subtle);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 1.85rem;
  transition: all var(--transition-normal);
}

.build-card:hover {
  border-color: var(--border-subtle);
  background: var(--bg-surface);
  transform: translateY(-2px);
}

.build-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--brand-teal-light);
}

.build-card-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.65rem;
  color: #ffffff;
}

.build-card-text {
  font-size: 0.925rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ValeTap Product Showcase */
.valetap-feature-card {
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-subtle) 100%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(2.25rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.valetap-feature-card::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(251, 1, 138, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.valetap-content-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.valetap-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 14px;
}

.valetap-description {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.valetap-relationship {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
}

.valetap-relationship strong {
  color: var(--text-primary);
}

.valetap-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0.5rem;
}

.valetap-card-visual {
  background: var(--bg-surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.visual-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.visual-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--brand-magenta-subtle);
  border: 1px solid rgba(251, 1, 138, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-magenta);
}

.visual-item-content h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 2px;
}

.visual-item-content p {
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Company Section */
.company-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.company-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.company-details-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 2rem;
}

.company-meta-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
}

.company-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.9rem;
}

.company-meta-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.meta-label {
  color: var(--text-muted);
}

.meta-value {
  color: var(--text-primary);
  font-weight: 600;
}

/* Contact Section */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 1rem;
}

.contact-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  transition: all var(--transition-normal);
}

.contact-card:hover {
  border-color: var(--border-subtle);
  background: var(--bg-surface-raised);
  transform: translateY(-2px);
}

.contact-card-header h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.contact-card-header p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.contact-email-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--brand-magenta);
  text-decoration: none;
  word-break: break-all;
  transition: color var(--transition-fast);
}

.contact-email-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-hairline);
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  background: var(--bg-canvas);
  position: relative;
  z-index: 10;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  height: 32px;
  width: auto;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
  flex-wrap: wrap;
}

.footer-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-link:hover {
  color: var(--text-primary);
}

.footer-bottom {
  padding-top: 1.75rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Responsive Media Queries */
@media (max-width: 900px) {
  .valetap-feature-card {
    grid-template-columns: 1fr;
  }

  .company-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* The hero badge's longer label wraps to two lines at these widths.
     The previous fix correctly aligned the decorative dot to the first
     line, but the product-facing result of a dot sitting alone to the
     left of a two-line block still reads as visually detached from
     "TECHNOLOGY". On mobile only, drop the dot entirely for this badge
     and let the wrapped text stand alone, centered in the pill by the
     symmetric left/right padding it already has — no dependency on any
     other badge, which keep their dot since none of them wrap. */
  .hero .badge-dot {
    display: none;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1.25rem;
    background: var(--bg-surface-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-hairline);
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-link {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-hairline);
    width: 100%;
  }

  .nav-links li:last-child .nav-link {
    border-bottom: none;
  }

  .header-inner {
    height: 64px;
  }

  .hero {
    padding-top: 3.5rem;
    padding-bottom: 4rem;
  }

  .hero-headline {
    font-size: 2.25rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .valetap-actions {
    flex-direction: column;
    width: 100%;
  }

  .valetap-actions .btn {
    width: 100%;
  }

  .footer-top, .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}