/* Olivia Tech — Home page styles */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg-page);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent-strong); text-decoration: none; }
a:hover { color: var(--purple-700); }

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

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  margin: 0;
}
.eyebrow--brand { color: var(--purple-700); }
.eyebrow--accent { color: var(--color-accent); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.btn--sm { font-size: var(--text-sm); padding: 9px 16px; }
.btn--md { font-size: var(--text-sm); padding: 13px 24px; }
.btn--lg { font-size: var(--text-base); padding: 16px 30px; }

.btn--primary { background: var(--color-accent); color: var(--purple-950); }
.btn--primary:hover { background: var(--color-accent-strong); color: var(--purple-950); }

.btn--secondary { background: transparent; color: var(--color-text-inverse); border-color: var(--color-border-dark); }
.btn--secondary:hover { background: rgba(246,243,250,.08); border-color: rgba(246,243,250,.3); color: var(--color-text-inverse); }

.btn--on-light { background: var(--color-brand); color: #fff; }
.btn--on-light:hover { background: var(--color-brand-hover); color: #fff; }

.btn--ghost { background: transparent; color: var(--color-brand); border-color: var(--color-border); }
.btn--ghost:hover { background: var(--purple-50); }

/* ---------- Navbar ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(30, 18, 48, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-dark);
}
.navbar__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 18px var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text-inverse);
}
.navbar__links { display: flex; gap: var(--space-8); }
.navbar__links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-inverse-muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.navbar__links a:hover { color: var(--color-text-inverse); }
.navbar__cta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--color-accent);
  color: var(--purple-950);
  border: none;
  border-radius: var(--radius-md);
  padding: 11px 20px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.navbar__cta:hover { background: var(--color-accent-strong); }

/* ---------- Hero ---------- */
.hero {
  background: var(--color-bg-brand);
  position: relative;
  overflow: hidden;
  padding: var(--space-24) 0;
}
.hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 78% 8%, rgba(79,216,224,.14), transparent),
              radial-gradient(50% 40% at 10% 90%, rgba(107,63,160,.35), transparent);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-6xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-inverse);
  margin: 0;
  max-width: 900px;
}
.hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
  margin: 0;
  max-width: 640px;
}
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero__badges { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }

/* Availability status pill */
.availability {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-inverse-muted);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-dark);
  background: rgba(246,243,250,.04);
}
.availability__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--graphite-400);
}
.availability--active .availability__dot {
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(79,216,224,.2);
}

/* ---------- Section shell ---------- */
.section { padding: var(--space-24) var(--container-pad); }
.section--alt { background: var(--color-bg-section-alt); }
.section--page { background: var(--color-bg-page); }
.section--brand { background: var(--color-bg-brand); }
.section--compact { padding: var(--space-20) var(--container-pad); }
.section__inner { max-width: var(--container-max); margin: 0 auto; }

/* ---------- Services ---------- */
.services__inner { display: flex; flex-direction: column; gap: var(--space-10); }
.services__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.services__head-title { max-width: 620px; }
.services__head-desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 380px;
}
.section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
}
.section-heading--3xl { font-size: var(--text-3xl); }
.section-heading--2xl { font-size: var(--text-2xl); }
.services__head .section-heading { margin-top: 12px; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.service-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
  box-shadow: var(--shadow-sm);
}
.service-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: var(--purple-100);
}
.service-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--purple-900);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.service-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.service-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- About ---------- */
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.about__intro { display: flex; flex-direction: column; gap: var(--space-5); }
.about__intro p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 460px;
}
.principles { display: flex; flex-direction: column; gap: var(--space-6); }
.principle {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.principle:last-child { border-bottom: none; padding-bottom: 0; }
.principle__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--color-accent-strong);
  min-width: 28px;
}
.principle__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-text-primary);
  margin: 0 0 4px;
}
.principle__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}

/* ---------- Availability section ---------- */
.availability-section__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: center;
}
.availability-section__lead {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin: 0;
  max-width: 640px;
}
.availability-cards {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}
.availability-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
  box-shadow: var(--shadow-sm);
}
.availability-card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--purple-700);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.availability-card__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
}

/* ---------- Contact ---------- */
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: start;
}
.contact__intro { display: flex; flex-direction: column; gap: var(--space-5); }
.contact__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-3xl);
  color: var(--color-text-inverse);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}
.contact__lead {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
  margin: 0;
  max-width: 400px;
}
.contact__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-dark);
}
.contact__meta-row { display: flex; align-items: center; gap: var(--space-3); }
.contact__meta-row i { width: 18px; height: 18px; color: var(--color-accent); }
.contact__meta-row a { font-size: var(--text-sm); color: var(--color-text-inverse); }
.contact__meta-row a:hover { color: var(--color-accent); }
.contact__meta-row span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}

.contact__card {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.field { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); }
.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}
.field__label .req { color: var(--color-accent-strong); }
.field__control {
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  outline: none;
  color: var(--color-text-primary);
  background: #fff;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.field__control:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--purple-100);
}
textarea.field__control { resize: vertical; }

.field__control--error { border-color: var(--color-danger); }
.field__control--error:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-tint);
}
.field__error {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-danger);
  min-height: 0;
}

.form__note {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.form__success {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  align-items: flex-start;
}
.form__success-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-bg-section-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.form__success-icon i { width: 22px; height: 22px; color: var(--color-accent-strong); }
.form__success h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin: 0;
}
.form__success p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-relaxed);
}
.is-hidden { display: none !important; }

/* ---------- Footer ---------- */
.footer {
  background: var(--color-bg-brand-strong);
  color: var(--color-text-inverse);
  padding: var(--space-16) var(--container-pad) var(--space-10);
}
.footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-10);
}
.footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 340px; }
.footer__tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}
.footer__contact { display: flex; flex-direction: column; gap: var(--space-3); }
.footer__contact-title {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}
.footer__contact a { font-size: var(--text-sm); color: var(--color-text-inverse); }
.footer__contact a:hover { color: var(--color-accent); }
.footer__contact span {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}
.footer__bottom {
  max-width: var(--container-max);
  margin: var(--space-10) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-dark);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero__title { font-size: var(--text-4xl); }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .about__inner,
  .contact__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .navbar__links { display: none; }
}

@media (max-width: 560px) {
  .services__grid { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .hero__title { font-size: var(--text-3xl); }
  .section, .section--compact { padding-left: var(--container-pad); padding-right: var(--container-pad); }
}