/* ============ Root + Reset ============ */
:root{
  --bg: #0B1220;
  --panel: #0F172A;
  --text: #E5E7EB;
  --muted: #9CA3AF;
  --accent: #F59E0B;
  --accent-2: #22C55E;
  --danger: #EF4444;

  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);

  --container: 1080px;
  --space: clamp(16px, 2.5vw, 24px);
  --space-lg: clamp(28px, 4vw, 48px);
  --space-xl: clamp(48px, 7vw, 80px);

  --fz-h1: clamp(28px, 6.2vw, 56px);
  --fz-h2: clamp(22px, 4.2vw, 36px);
  --fz-h3: clamp(18px, 3.5vw, 24px);
  --fz-body: clamp(15px, 2.8vw, 17px);
}

/* NEW: stop iOS from auto-enlarging text */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline: var(--space); }

/* ============ Header ============ */
.site-header{
  position: sticky; top:0; z-index: 30;
  background: linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.6));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  padding-block: 12px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; }
.brand-mark{ color: var(--accent); font-size: 18px; }
.brand-name{ font-size: 16px; }
.contact-nav{ display:flex; gap:14px; }
.contact-link{
  display:flex; align-items:center; gap:8px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  white-space: nowrap;                 /* NEW: prevent wrapping that can trigger autosizing */
  font-size: clamp(12px, 3.4vw, 14px); /* NEW: cap font growth on small screens */
  line-height: 1.1;                    /* NEW: tighter pills */
}
.contact-link:hover{ color: var(--text); background: rgba(255,255,255,.12); }

/* Tighter pills on very small phones */
@media (max-width: 430px){
  .contact-nav{ gap:8px; }
  .contact-link{ padding:6px 8px; font-size:12px; }
  .contact-link svg{ width:16px; height:16px; }
  .brand-name{ font-size:14px; }
}

/* ============ Hero ============ */
.hero{ position:relative; min-height: 70svh; }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; filter: contrast(1.05) saturate(1.05) brightness(.86);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.6) 100%),
    radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,.0), rgba(0,0,0,.35) 70%);
}
.hero-content{ position:relative; z-index:2; padding-block: var(--space-xl); }
.hero-title{ font-size: var(--fz-h1); line-height:1.1; max-width: 22ch; }
.hero-subtitle{ margin-top: 10px; color: var(--muted); max-width: 48ch; }
.hero-subtitle .kicker{
  display:block;
  margin-top:8px;
  font-weight:700;
  color: var(--accent);
}

.hero-cta{ display:flex; gap:12px; margin-top: 18px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 18px; border-radius: 999px; border:1px solid transparent;
  font-weight: 600; letter-spacing:.2px;
}
.btn-solid{ background: var(--accent); color: #0a0a0a; }
.btn-solid:hover{ filter: brightness(1.05); }
.btn-ghost{ background: rgba(255,255,255,.06); color: var(--text); border-color: rgba(255,255,255,.14); }
.btn-ghost:hover{ background: rgba(255,255,255,.12); }

.hero-badges{
  display:flex; gap:16px; margin-top: 20px; flex-wrap: wrap;
}
.badge{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow);
  display:flex; align-items: baseline; gap:10px;
}
.badge-number{ font-size: 26px; font-weight: 800; color: var(--accent); }
.badge-suffix{ font-weight: 800; color: var(--accent); }
.badge-label{ color: var(--muted); font-size: 13px; }
.badge-number + .badge-suffix{ margin-left:-6px; }

/* ============ Sections ============ */
.section{ padding-block: var(--space-xl); }
.section-title{ font-size: var(--fz-h2); margin: 0 0 12px 0; }
.section-subtitle{ color: var(--muted); margin-top: 6px; }

/* ============ Features ============ */
.features{
  display:grid; gap: 14px;
  grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) );
  margin-top: var(--space);
}
.feature{
  background: var(--panel); border: 1px solid rgba(255,255,255,.08);
  padding: 16px; border-radius: var(--radius);
}
.feature h3{ font-size: var(--fz-h3); margin: 8px 0 4px; }
.feature p{ color: var(--muted); }
.icon-circle{
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(245,158,11,.15); color: var(--accent);
  display:grid; place-items:center;
}

/* ============ Marquee Testimonials ============ */
.testimonials{ padding-top: calc(var(--space) + 6px); }
.marquee{ position:relative; overflow:hidden; }
.marquee-track{
  display:flex; gap: 14px; list-style: none; padding: 0; margin: 14px 0 0 0;
  animation: scroll 35s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.card{
  flex: 0 0 auto; width: 280px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--text);
  box-shadow: var(--shadow);
}
.card span{ display:block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.marquee-fade{
  position:absolute; top:0; bottom:0; width: 60px; z-index: 2;
}
.marquee-fade.left{ left:0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee-fade.right{ right:0; background: linear-gradient(270deg, var(--bg), transparent); }

/* ============ Apply Form ============ */
.apply .form{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: var(--space);
  box-shadow: var(--shadow);
  margin-top: var(--space);
}
.grid{
  display:grid; gap: 12px;
  grid-template-columns: 1fr 1fr;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field span{ font-size: 13px; color: var(--muted); }

/* Inputs + textareas + selects base */
.field input, .field select, .field textarea{
  width:100%; padding: 12px 12px;
  border-radius: 10px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04); color: var(--text);
  outline: none;
}

/* NEW: polished select styling (arrow, no native chrome) */
.field select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px; /* room for the arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23E5E7EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color-scheme: dark; /* better popups on iOS */
}
.field select:invalid{ color: var(--muted); } /* placeholder state */
.field option{ background: #0F172A; color: var(--text); } /* dropdown list colors */

/* NEW: unified focus look */
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

.field input::placeholder, .field textarea::placeholder{ color: #8A8F98; }
.field-full{ grid-column: 1 / -1; }
.checkbox{ display:flex; align-items:center; gap:10px; grid-column: 1 / -1; color: var(--muted); }
.checkbox input{ width: 18px; height: 18px; accent-color: var(--accent); }

.form-actions{
  display:flex; align-items:center; gap: 12px; margin-top: 10px;
}
.btn-spinner{
  width: 0; height: 0; border-radius: 999px; border: 0 solid transparent; margin-right: 0;
  transition: all .2s ease;
}
.submitting .btn-spinner{
  width: 16px; height: 16px; border: 2px solid rgba(0,0,0,.25);
  border-top-color: #0a0a0a; border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
.form-status{ margin-top: 10px; min-height: 22px; color: var(--muted); }
.form-status.ok{ color: var(--accent-2); }
.form-status.err{ color: var(--danger); }
.form-note{ color: var(--muted); font-size: 14px; }

/* ============ Footer ============ */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
}
.footer-row{ display:flex; justify-content:space-between; align-items:center; padding-block: 14px; }

/* ============ Responsive tweaks ============ */
@media (max-width: 860px){
  .hero{ min-height: 76svh; }
  .hero-title{ max-width: 18ch; }
  .hero-subtitle{ max-width: 36ch; }
}
@media (max-width: 680px){
  .grid{ grid-template-columns: 1fr; }
  .hero-badges{ gap: 12px; }
  .card{ width: 240px; }
  .hero-cta{ flex-wrap: wrap; }
}