/* ============================================================
   Octolax – Custom Stylesheet
   Font: Inter (body) | Outfit (headings/display)
   Colors: Navy hero bg + Orange accent
   ============================================================ */

:root {
  --orange:       hsl(22, 100%, 50%);
  --orange-light: hsl(35, 100%, 55%);
  --hero-bg:      hsl(228, 60%, 12%);
  --hero-fg:      #ffffff;
  --hero-muted:   hsla(0,0%,100%,.50);
  --hero-border:  hsla(0,0%,100%,.10);
  --foreground:   hsl(228, 40%, 10%);
  --muted:        hsl(228, 15%, 45%);
  --section-alt:  hsl(30, 20%, 97%);
  --border:       hsl(228, 20%, 90%);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--foreground);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
}

.font-display { font-family: 'Outfit', sans-serif; }

/* ---- Gradient text ---------------------------------------- */
.text-gradient-orange {
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Color helpers ---------------------------------------- */
.text-orange { color: var(--orange) !important; }
.text-hero-foreground { color: var(--hero-fg) !important; }
.text-hero-muted { color: var(--hero-muted) !important; }
.text-muted-custom { color: var(--muted) !important; }
.bg-hero { background-color: var(--hero-bg) !important; }
.bg-section-alt { background-color: var(--section-alt) !important; }
.border-hero-border { border-color: var(--hero-border) !important; }

/* ---- Section spacing -------------------------------------- */
.section-py { padding-top: 6rem; padding-bottom: 6rem; }

/* ---- Section title ---------------------------------------- */
.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
}

/* ---- Label tag -------------------------------------------- */
.label-tag {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--orange);
}
.label-tag-hero { color: var(--orange); }

/* ---- Tiny text -------------------------------------------- */
.x-small { font-size: .78rem; }

/* ---- Buttons ---------------------------------------------- */
.btn-orange {
  background: linear-gradient(135deg, var(--orange), var(--orange-light));
  color: #fff;
  border: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  transition: opacity .2s, box-shadow .2s;
}
.btn-orange:hover {
  color: #fff;
  opacity: .9;
  box-shadow: 0 0 28px -6px hsla(22,100%,50%,.55);
}

.btn-outline-hero {
  background: transparent;
  border: 1.5px solid var(--hero-border);
  color: var(--hero-fg);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  transition: border-color .2s, background .2s;
}
.btn-outline-hero:hover {
  border-color: var(--orange);
  background: hsla(22,100%,50%,.08);
  color: var(--hero-fg);
}

/* ---- Navbar ----------------------------------------------- */
.octolax-navbar {
  background: hsla(228,60%,12%,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hero-border);
}

.nav-link-custom {
  color: var(--hero-muted) !important;
  font-size: .875rem;
  font-weight: 500;
  transition: color .2s;
}
.nav-link-custom:hover { color: var(--orange) !important; }

/* ---- Hero ------------------------------------------------- */
.hero-section {
  min-height: 100vh;
  background-color: var(--hero-bg);
  position: relative;
  overflow: hidden;
}

/* Decorative blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.hero-blob-1 {
  width: 420px; height: 420px;
  top: 5rem; right: 2rem;
  background: hsla(22,100%,50%,.12);
}
.hero-blob-2 {
  width: 560px; height: 560px;
  bottom: 3rem; left: 1rem;
  background: hsla(22,100%,50%,.06);
}

/* Decorative rings */
.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid hsla(22,100%,50%,.10);
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-ring-1 { width: 600px; height: 600px; }
.hero-ring-2 { width: 820px; height: 820px; border-color: hsla(22,100%,50%,.05); }

/* Badge pill */
.badge-pill {
  background: hsla(22,100%,50%,.12);
  border: 1px solid hsla(22,100%,50%,.30);
  color: var(--orange);
}

/* ---- Cards: About ----------------------------------------- */
.card-glass {
  background: var(--section-alt);
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: border-color .2s;
}
.card-glass:hover { border-color: hsla(22,100%,50%,.35); }

/* Icon box */
.icon-box {
  width: 48px; height: 48px;
  border-radius: .75rem;
  background: hsla(22,100%,50%,.12);
  display: flex; align-items: center; justify-content: center;
}

/* ---- Cards: Services -------------------------------------- */
.service-card {
  background: hsla(0,0%,100%,.05);
  border: 1px solid var(--hero-border);
  border-radius: 1rem;
  transition: border-color .25s, box-shadow .25s;
}
.service-card:hover {
  border-color: hsla(22,100%,50%,.45);
  box-shadow: 0 0 36px -10px hsla(22,100%,50%,.38);
}

/* ---- Cards: Solutions ------------------------------------- */
.solution-card {
  background: var(--section-alt);
  border: 1px solid var(--border);
  border-radius: .875rem;
  transition: border-color .2s, box-shadow .2s;
}
.solution-card:hover {
  border-color: hsla(22,100%,50%,.35);
  box-shadow: 0 4px 24px -6px hsla(22,100%,50%,.15);
}

.sol-icon-wrap {
  width: 42px; height: 42px;
  border-radius: .5rem;
  background: hsla(22,100%,50%,.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  transition: background .2s;
}
.solution-card:hover .sol-icon-wrap { background: hsla(22,100%,50%,.20); }

/* ---- Why us icon ------------------------------------------ */
.why-icon {
  width: 48px; height: 48px;
  border-radius: .75rem;
  background: hsla(22,100%,50%,.10);
  display: flex; align-items: center; justify-content: center;
}

/* ---- Values ----------------------------------------------- */
.value-card {
  background: hsla(0,0%,100%,.05);
  border: 1px solid var(--hero-border);
  border-radius: 1rem;
  transition: border-color .2s;
}
.value-card:hover { border-color: hsla(22,100%,50%,.35); }

.value-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: hsla(22,100%,50%,.12);
  display: flex; align-items: center; justify-content: center;
}

/* ---- CTA glow --------------------------------------------- */
.cta-glow {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: hsla(22,100%,50%,.05);
  filter: blur(80px);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

/* ---- Contact cards (CTA section) ------------------------- */
.contact-card {
  background: var(--section-alt);
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.contact-card:hover {
  border-color: hsla(22,100%,50%,.35);
  box-shadow: 0 4px 24px -6px hsla(22,100%,50%,.15);
}

.contact-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: hsla(22,100%,50%,.10);
  display: flex; align-items: center; justify-content: center;
}

.contact-link {
  color: var(--orange);
  text-decoration: none;
  font-weight: 500;
  transition: opacity .2s;
}
.contact-link:hover { opacity: .78; }

/* ---- Footer ----------------------------------------------- */
.footer-link {
  color: var(--hero-muted);
  text-decoration: none;
  transition: color .2s;
}
.footer-link:hover { color: var(--orange); }

.footer-nav li { margin-bottom: .5rem; }

.footer-contact-list li { line-height: 1.5; }

.letter-spacing { letter-spacing: .08em; }

/* ---- Scroll-reveal animations ----------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp .7s forwards;
}
.fade-up.delay-1 { animation-delay: .15s; }
.fade-up.delay-2 { animation-delay: .28s; }
.fade-up.delay-3 { animation-delay: .42s; }
.fade-up.delay-4 { animation-delay: .56s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: .10s; }
.reveal.delay-2 { transition-delay: .20s; }
.reveal.delay-3 { transition-delay: .30s; }
.reveal.delay-4 { transition-delay: .40s; }

/* ---- Misc ------------------------------------------------- */
.z-1 { z-index: 1; }