/*
Theme Name: TYLO Founding Drivers
Theme URI: https://tyloapp.com/
Author: TYLO
Description: Custom code-first landing page for TYLO Founding Drivers.
Version: 1.0.0
*/

:root {
  --tylo-purple: #4B10F5;
  --tylo-purple-dark: #3710B8;
  --tylo-navy: #0b102d;
  --tylo-text: #11162f;
  --tylo-muted: #626b83;
  --tylo-line: #e7e9f1;
  --tylo-bg: #ffffff;
  --tylo-soft: #f7f7fb;
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--tylo-text);
  background: var(--tylo-bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, a { -webkit-tap-highlight-color: transparent; }

.tylo-site { min-height: 100vh; overflow: hidden; }
.tylo-container { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }

.tylo-header {
  height: 82px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(11,16,45,.06);
  background: rgba(255,255,255,.96);
  position: relative;
  z-index: 20;
}
.tylo-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.tylo-logo {
  font-size: 31px;
  font-weight: 800;
  letter-spacing: -1.8px;
  color: var(--tylo-purple);
  line-height: 1;
}
.tylo-menu {
  display: flex;
  align-items: center;
  gap: 27px;
  margin-left: auto;
}
.tylo-menu a {
  font-size: 14px;
  font-weight: 600;
  color: #3d4358;
  transition: color .2s ease;
}
.tylo-menu a:hover { color: var(--tylo-purple); }
.tylo-actions { display: flex; align-items: center; gap: 14px; }
.tylo-lang { font-size: 14px; font-weight: 700; color: #3d4358; }
.tylo-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  padding: 0 22px;
  border-radius: 999px;
  color: #fff;
  background: var(--tylo-purple);
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(75,16,245,.18);
}

.tylo-hero {
  padding: 38px 0 42px;
  background: #fff;
}
.tylo-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
  gap: 44px;
  align-items: center;
  min-height: 665px;
}
.tylo-hero-copy { padding-left: 28px; }
.tylo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--tylo-purple);
  text-transform: uppercase;
}
.tylo-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--tylo-purple);
  border-radius: 999px;
}
.tylo-hero h1 {
  margin: 0;
  color: var(--tylo-navy);
  font-size: clamp(64px, 7.3vw, 112px);
  line-height: .83;
  letter-spacing: -0.065em;
  font-weight: 850;
}
.tylo-first { display: block; font-size: .57em; line-height: .95; letter-spacing: -.045em; }
.tylo-500 {
  display: block;
  color: var(--tylo-purple);
  font-size: 1em;
  line-height: .83;
  letter-spacing: -.09em;
  margin-left: -5px;
}
.tylo-founder {
  margin: 24px 0 0;
  max-width: 520px;
  font-size: clamp(27px, 2.55vw, 42px);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 850;
  text-transform: uppercase;
}
.tylo-founder span { display: block; }
.tylo-tagline {
  margin: 21px 0 0;
  font-size: 21px;
  line-height: 1.15;
  font-weight: 700;
}
.tylo-tagline strong { color: var(--tylo-purple); }
.tylo-description {
  margin: 13px 0 0;
  color: var(--tylo-muted);
  font-size: 16px;
  line-height: 1.45;
  max-width: 475px;
}
.tylo-launch {
  margin: 17px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #252b45;
  font-size: 14px;
  font-weight: 700;
}
.tylo-launch-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f0edff;
  color: var(--tylo-purple);
  font-size: 16px;
}
.tylo-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.tylo-cta-primary, .tylo-cta-secondary {
  min-height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .01em;
  padding: 0 24px;
}
.tylo-cta-primary {
  color: #fff;
  background: var(--tylo-purple);
  box-shadow: 0 14px 30px rgba(75,16,245,.2);
}
.tylo-cta-primary small { font-size: 11px; opacity: .88; margin-left: 9px; font-weight: 700; }
.tylo-cta-secondary { border: 1px solid #dfe2eb; background: #fff; color: var(--tylo-purple); }
.tylo-play { margin-right: 8px; font-size: 13px; }
.tylo-founders {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.tylo-avatars { display: flex; }
.tylo-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff;
  background: linear-gradient(145deg,#ddd,#8b91a5);
  margin-left: -7px;
}
.tylo-avatar:first-child { margin-left: 0; }
.tylo-founder-note { font-size: 12px; line-height: 1.3; color: #5d6479; }
.tylo-founder-note strong { display: block; color: #202640; }

.tylo-hero-visual {
  min-height: 610px;
  border-radius: 34px;
  overflow: hidden;
  position: relative;
  background: #d9eaf8;
  box-shadow: 0 28px 70px rgba(18,26,56,.12);
}
.tylo-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 610px;
  object-fit: cover;
  object-position: 67% center;
  transform: scale(1.015);
}
.tylo-visual-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11,16,45,.08), transparent 38%, transparent 75%, rgba(11,16,45,.05));
}
.tylo-visual-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  max-width: 280px;
  padding: 15px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.91);
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 35px rgba(12,20,45,.14);
}
.tylo-visual-badge strong { display: block; font-size: 14px; color: var(--tylo-navy); }
.tylo-visual-badge span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.35; color: #667087; }

.tylo-features-wrap { padding: 0 0 76px; }
.tylo-features {
  margin-top: -2px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--tylo-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(16,24,56,.07);
  overflow: hidden;
}
.tylo-feature {
  padding: 23px 24px;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border-right: 1px solid var(--tylo-line);
}
.tylo-feature:last-child { border-right: 0; }
.tylo-feature-icon {
  flex: 0 0 38px;
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: #f0edff;
  color: var(--tylo-purple);
  font-size: 17px; font-weight: 900;
}
.tylo-feature strong { display: block; font-size: 14px; line-height: 1.15; }
.tylo-feature span { display: block; margin-top: 5px; color: #71788b; font-size: 12px; line-height: 1.35; }

.tylo-next {
  padding: 92px 0 120px;
  background: var(--tylo-soft);
  text-align: center;
}
.tylo-next-kicker { color: var(--tylo-purple); font-size: 12px; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.tylo-next h2 { margin: 14px auto 0; max-width: 760px; font-size: clamp(38px,5vw,68px); line-height: .95; letter-spacing: -.06em; color: var(--tylo-navy); }
.tylo-next p { max-width: 650px; margin: 18px auto 0; color: var(--tylo-muted); font-size: 17px; line-height: 1.5; }

@media (max-width: 1080px) {
  .tylo-menu { gap: 16px; }
  .tylo-menu a:nth-child(5), .tylo-menu a:nth-child(6) { display: none; }
  .tylo-hero-grid { gap: 28px; }
  .tylo-hero-copy { padding-left: 0; }
  .tylo-feature { padding: 20px 16px; }
}

@media (max-width: 820px) {
  .tylo-container { width: min(100% - 32px, 640px); }
  .tylo-header { height: 72px; }
  .tylo-menu { display: none; }
  .tylo-actions { margin-left: auto; }
  .tylo-lang { display: none; }
  .tylo-hero { padding: 20px 0 30px; }
  .tylo-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .tylo-hero-copy { order: 1; }
  .tylo-hero-visual { order: 2; min-height: 470px; border-radius: 26px; }
  .tylo-hero-visual img { min-height: 470px; object-position: 67% center; }
  .tylo-features { grid-template-columns: 1fr 1fr; }
  .tylo-feature:nth-child(2) { border-right: 0; }
  .tylo-feature:nth-child(-n+2) { border-bottom: 1px solid var(--tylo-line); }
}

@media (max-width: 520px) {
  .tylo-logo { font-size: 28px; }
  .tylo-join { min-height: 40px; padding: 0 16px; font-size: 12px; }
  .tylo-hero h1 { font-size: clamp(62px, 20vw, 88px); }
  .tylo-founder { font-size: 26px; }
  .tylo-tagline { font-size: 18px; }
  .tylo-description { font-size: 14px; }
  .tylo-cta-row { align-items: stretch; flex-direction: column; }
  .tylo-cta-primary, .tylo-cta-secondary { width: 100%; }
  .tylo-hero-visual { min-height: 400px; }
  .tylo-hero-visual img { min-height: 400px; }
  .tylo-visual-badge { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .tylo-features { grid-template-columns: 1fr; }
  .tylo-feature, .tylo-feature:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--tylo-line); }
  .tylo-feature:last-child { border-bottom: 0; }
}