/* ═══════════════════════════════════════════════════════
   maatli_style.css  —  Shared Design System
   Font: Poppins  |  Palette: Dark brown + warm cream/gold
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');
/* ════════════════════════════════════════════
   FONT
════════════════════════════════════════════ */
@font-face {
  font-family: 'Crystal';
  src: url("../fonts/Technology-BoldItalic.ttf") format('truetype');
  font-weight: normal;
  font-style:  normal;
}


/* ════════════════════════════════════════════
   ROOT TOKENS
════════════════════════════════════════════ */
:root {
  /* brand */
  --hero-bg:      #1a0c02;
  --page-bg:      #fce9a0;
  --card-bg:      #f5c842;
  --ink:          #0f0d00;
  --cream:        #ffdb9c;
  --footer-bg:    #0f0d00;
  --footer-txt:   #fce9a0;
  --legal-bg:     #1a0c02;
  --legal-txt:    #fce9a0;
  --legal-muted:  rgba(252, 233, 160, 0.65);
  --legal-accent: #ffdb9c;
  --legal-border: rgba(252, 233, 160, 0.12);
  --radius:       28px;
  --radius-sm:    16px;

  /* glass */
  --glass-bg:            rgba(252, 233, 160, 0.04);
  --glass-bg-scroll:     rgba(252, 233, 160, 0.10);
  --glass-border:        rgba(252, 233, 160, 0.12);
  --glass-border-scroll: rgba(252, 233, 160, 0.22);
  --glass-blur:          14px;
  --glass-blur-scroll:   20px;
  --glass-shadow-scroll: 0 4px 40px rgba(15, 13, 0, 0.32),
                         inset 0 1px 0 rgba(252, 233, 160, 0.10);
  --nav-transition:      background 0.4s ease,
                         backdrop-filter 0.4s ease,
                         border-color 0.4s ease,
                         box-shadow 0.4s ease;

  /* 7-segment — TIME (larger) */
  --seg-on:      #fce9a0;
  --seg-off:     rgba(252, 233, 160, 0.08);
  --seg-glow:    0 0 8px  rgba(252, 233, 160, 0.7),
                 0 0 18px rgba(252, 233, 160, 0.35);
  --seg-w:       4px;
  --seg-h:       18px;
  --digit-w:     17px;
  --digit-h:     36px;

  /* 7-segment — DATE (independently smaller) */
  --date-seg-w:   2.5px;
  --date-seg-h:   11px;
  --date-digit-w: 10px;
  --date-digit-h: 22px;

  /* day label — one knob controls size */
  --day-font-size: 1.1rem;
}




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

html {
  scroll-behavior: smooth;
}

img {
  display: block;
  max-width: 100%;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--page-bg);
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════
   HERO  (homepage only)
═══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background-color: var(--hero-bg);
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 88px 40px 108px;
  overflow: hidden;
}


/* Real background image */
.hero-bg-img {
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/hero/maatli_header_bg.webp");
  background-size: cover;
  background-position: center 35%;
  opacity: 0.5;
}

/* Gradient overlay so text is always readable */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15, 13, 0, 0.22) 0%,
      rgba(15, 13, 0, 0.08) 40%,
      rgba(15, 13, 0, 0.55) 100%),
    radial-gradient(ellipse 90% 70% at 50% 45%,
      transparent 35%,
      rgba(15, 13, 0, 0.45) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

/* Hero company name (replaces logo image) */
.hero-company-name {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--cream);
  letter-spacing: -0.02em;
  text-align: center;
  line-height: 1.15;
  margin-bottom: 4px;
}

/* Hero logo */
.hero-logo {
  width: clamp(240px, 46vw, 480px);
  height: auto;
  margin-bottom: auto;
}

/* Hero tagline */

.hero-tagline {
  font-size: clamp(0.95rem, 2vw, 1.3rem);
  font-weight: 400;
  color: var(--cream);
  opacity: 0.9;
  line-height: 1.65;
  max-width: 460px;
  margin-top: auto;
  margin-bottom: 10px;
}

.hero-tagline strong {
  font-weight: 700;
  display: block;
  color: var(--cream);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════
   CHARIOTEERS SECTION
═══════════════════════════════════════════════════════ */
.charioteers {
  background: var(--page-bg);
  padding: 72px 40px 52px;
  text-align: center;
}

.charioteers h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.8rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.charioteers p {
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  font-weight: 400;
  color: var(--ink);
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.85;
}

/* ═══════════════════════════════════════════════════════
   APP CARDS
═══════════════════════════════════════════════════════ */
.apps-section {
  background: var(--page-bg);
  padding: 16px 40px 52px;
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.app-row {
  position: relative;
  display: flex;
  align-items: center;
}

/* Yellow card */
.app-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  flex: 1;
  padding: 40px 44px;
  min-height: 215px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Stag: card text left, phone right */
.app-row.stag .app-card {
  padding-right: 185px;
}

/* OOO: card text right, phone left */
.app-row.ooo .app-card {
  padding-left: 185px;
  align-items: flex-end;
  text-align: right;
}

.app-card h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

.app-card p {
  font-size: clamp(0.82rem, 1.4vw, 0.95rem);
  font-weight: 500;
  color: var(--ink);
  opacity: 0.75;
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 210px;
}

.app-row.ooo .app-card p {
  text-align: right;
}

/* Download button */
.btn-download {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px 28px;
  border-radius: 50px;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: transform 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  width: fit-content;
}

.btn-download:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 13, 0, 0.25);
}

/* ─── Rich app-card elements ─────────────────── */
.app-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
  margin-bottom: 8px;
}

.app-name {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem) !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin-bottom: 4px !important;
  letter-spacing: -0.02em;
}

.app-tagline {
  font-size: clamp(0.78rem, 1.3vw, 0.88rem) !important;
  font-weight: 600 !important;
  font-style: italic;
  color: var(--ink) !important;
  opacity: 0.7 !important;
  margin-bottom: 10px !important;
  max-width: none !important;
  line-height: 1.45 !important;
}

.app-features {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.app-features li {
  font-size: clamp(0.74rem, 1.2vw, 0.82rem);
  color: var(--ink);
  opacity: 0.78;
  line-height: 1.5;
  padding-left: 12px;
  position: relative;
}

.app-features li::before {
  content: '→';
  position: absolute;
  left: 0;
  font-size: 0.7rem;
  opacity: 0.55;
}

.app-platforms {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0.5;
  letter-spacing: 0.03em;
}

/* STAG card — dark nightlife, background photo */
.stag-card,
.app-row.stag .stag-card {
  padding: 40px 44px;
  text-align: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-image: url('../images/photo_6307388430752617030_y.jpg');
  background-size: cover;
  background-position: center 12%;
  min-height: 260px;
}

/* dark overlay — lighter since image is already dark */
.stag-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(4, 1, 0, 0.58);
  border-radius: inherit;
  z-index: 0;
}

/* all content above overlay */
.stag-card > * {
  position: relative;
  z-index: 1;
}

/* text colour overrides for dark background */
.stag-card .app-badge      { color: rgba(255, 219, 156, 0.45); }
.stag-card .app-name       { color: #ffdb9c !important; }
.stag-card .app-tagline    { color: rgba(255, 219, 156, 0.8) !important; opacity: 1 !important; }
/* make stag card behave like a link */
.stag-link {
  display: flex;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stag-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}

.stag-card .app-platforms  {
  color: #ffdb9c;
  opacity: 0.85;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.stag-card p {
  max-width: none;
  text-align: center;
  color: rgba(255, 219, 156, 0.72);
  opacity: 1;
}

.stag-card .app-features {
  align-items: center;
}

.stag-card .app-features li {
  padding-left: 0;
  text-align: center;
  color: rgba(255, 219, 156, 0.68);
  opacity: 1;
}

.stag-card .app-features li::before { display: none; }
.stag-card .app-features strong     { color: #ffdb9c; }

/* feature pills row */
.stag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 16px;
}

.stag-pills span {
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 219, 156, 0.6);
  background: rgba(255, 219, 156, 0.08);
  border: 1px solid rgba(255, 219, 156, 0.16);
  padding: 4px 11px;
  border-radius: 20px;
}

/* Phone image wrapper */
.phone-wrap {
  position: absolute;
  z-index: 5;
  filter: drop-shadow(0 16px 36px rgba(15, 13, 0, 0.28));
}

.app-row.stag .phone-wrap {
  right: -8px;
  top: -52px;
}

.app-row.ooo .phone-wrap {
  left: -8px;
  top: -52px;
}

.phone-wrap img {
  width: 158px;
  height: auto;
}

/* Trickle card — warm cream background with coral left accent */
.trickle-card,
.app-row.stag .trickle-card {
  padding: 40px 44px;
  text-align: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: #fff5e1;
}

/* coral left accent strip */
.trickle-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: #fc6756;
  border-radius: var(--radius) 0 0 var(--radius);
}

/* remove left-align constraints inside trickle card */
.trickle-card p {
  max-width: none;
  text-align: center;
}

.trickle-card .app-features {
  align-items: center;
}

.trickle-card .app-features li {
  padding-left: 0;
  text-align: center;
}

.trickle-card .app-features li::before {
  display: none;
}

/* ═══════════════════════════════════════════════════════
   CAREERS STRIP
═══════════════════════════════════════════════════════ */
.careers-strip {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 40px 72px;
  width: 100%;
}

.careers-box {
  background: rgba(255, 255, 255, 0.42);
  border: 1.5px solid rgba(15, 13, 0, 0.14);
  border-radius: var(--radius);
  padding: 26px 36px;
  text-align: center;
}

.careers-box p {
  font-size: clamp(0.85rem, 1.5vw, 0.97rem);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.65;
}

.careers-box p strong {
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════
   SHARED FOOTER
═══════════════════════════════════════════════════════ */
footer {
  background: var(--footer-bg);
  color: var(--footer-txt);
  font-family: 'Poppins', sans-serif;
  padding: 52px 64px 24px;
}

.footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(252, 233, 160, 0.1);
}

/* Footer logo */
.footer-logo {
  width: 130px;
  height: auto;
  flex-shrink: 0;
}

/* Links */
.footer-links-group {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  font-weight: 400;
  color: var(--footer-txt);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s;
  white-space: nowrap;
  line-height: 1.4;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 8px;
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

.footer-col-heading {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--footer-txt);
  opacity: 0.4;
  padding: 0 10px 4px;
  display: block;
}

.footer-col a i {
  font-size: 16px;
}

.footer-col a:hover {
  opacity: 1;
  color: var(--footer-txt);
  background: rgba(252, 233, 160, 0.08);
}

/* Social icons */
.footer-socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-icon {
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.social-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.social-icon img {
  width: 26px;
  height: 26px;
}

/* Footer copyright */
.footer-wordmark {
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--footer-txt);
  text-decoration: none;
  opacity: 0.85;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  line-height: 1.3;
}

.footer-wordmark:hover { opacity: 1; }

.footer-bottom {
  padding-top: 18px;
  font-size: 0.76rem;
  color: var(--footer-txt);
  opacity: 0.72;
  font-weight: 400;
}

/* Registered address — footer strip */
.footer-addr {
  font-style: normal;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 7px;
  font-size: 0.65rem;
  line-height: 1.55;
  opacity: 1;
}

.footer-addr i { flex-shrink: 0; margin-top: 1px; }

/* Registered address — contact modal */
.modal-addr {
  font-size: 0.72rem;
  color: var(--legal-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--legal-border);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
  font-style: normal;
  margin-bottom: 0;
}

.modal-addr i { flex-shrink: 0; margin-top: 2px; }

/* Registered address — about page */
.about-addr {
  font-style: normal;
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.78;
  line-height: 1.75;
  border: 1px solid rgba(15, 13, 0, 0.1);
}

.about-addr i { flex-shrink: 0; font-size: 1rem; margin-top: 3px; }

/* ═══════════════════════════════════════════════════════
   LEGAL PAGES  (terms & privacy)
   — dark brown background, cream text
═══════════════════════════════════════════════════════ */
.legal-page {
  background: var(--legal-bg);
  min-height: 100vh;
}

/* Legal header strip */
.legal-header {
  background: var(--legal-bg);
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--legal-border);
}

.legal-header-logo {
  width: 120px;
  height: auto;
}

.legal-header-back {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(252, 233, 160, 0.6);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}

.legal-header-back:hover {
  color: var(--legal-accent);
  background: rgba(252, 233, 160, 0.07);
}

/* Legal body content */
.legal-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 52px 40px 80px;
}

/* Page title + date row */
.legal-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.legal-title-row h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--legal-accent);
  letter-spacing: -0.01em;
}

.legal-date {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--legal-muted);
  white-space: nowrap;
  padding-top: 6px;
}

/* Intro paragraphs */
.legal-intro {
  margin-bottom: 36px;
}

.legal-intro p {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--legal-txt);
  line-height: 1.85;
  margin-bottom: 14px;
  opacity: 0.88;
}

/* Section block */
.legal-section {
  margin-bottom: 30px;
}

.legal-section h2 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--legal-txt);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}

/* Sub-headings (italic labels like "A. Info You Provide") */
.legal-section h3 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--legal-txt);
  opacity: 0.9;
  margin: 14px 0 6px;
  font-style: italic;
}

.legal-section p {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--legal-txt);
  line-height: 1.85;
  margin-bottom: 10px;
  opacity: 0.85;
}

.legal-section ul {
  list-style: none;
  margin: 8px 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-section ul li {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--legal-txt);
  opacity: 0.85;
  line-height: 1.75;
  padding-left: 16px;
  position: relative;
}

.legal-section ul li::before {
  content: '·';
  position: absolute;
  left: 4px;
  color: var(--legal-accent);
  font-weight: 700;
}

/* Contact email highlight */
.legal-email {
  font-weight: 700;
  color: var(--legal-accent);
  text-decoration: none;
}

.legal-email:hover {
  text-decoration: underline;
}

/* Divider between sections */
.legal-divider {
  border: none;
  border-top: 1px solid var(--legal-border);
  margin: 24px 0;
}

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

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

.fade-in {
  animation: fadeUp 0.8s 0.05s ease both;
}

.fade-in-2 {
  animation: fadeUp 0.8s 0.18s ease both;
}

.fade-in-3 {
  animation: fadeUp 0.8s 0.32s ease both;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .hero {
    padding: 72px 24px 92px;
  }

  .charioteers {
    padding: 56px 24px 44px;
  }

  .apps-section {
    padding: 12px 20px 44px;
    gap: 48px;
  }

  .careers-strip {
    padding: 0 20px 60px;
  }

  footer {
    padding: 44px 28px 20px;
  }

  .app-row.stag .app-card {
    padding-right: 130px;
  }

  .app-row.ooo .app-card {
    padding-left: 130px;
  }

  .phone-wrap img {
    width: 118px;
  }

  .footer-links-group {
    gap: 28px;
  }

  .legal-body {
    padding: 44px 24px 72px;
  }

  .legal-title-row {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 420px) {
  .app-card h3 {
    font-size: 1.05rem;
  }

  .app-card p {
    font-size: 0.78rem;
  }

  .btn-download {
    font-size: 0.8rem;
    padding: 9px 22px;
  }

  .phone-wrap img {
    width: 100px;
  }

  .app-row.stag .app-card {
    padding-right: 110px;
  }

  .app-row.ooo .app-card {
    padding-left: 110px;
  }
}

/* modal box */
.custom-modal .modal-content {
  background: var(--hero-bg);
  color: var(--cream);
  border-radius: var(--radius);
  border: none;
}

/* header */
.custom-modal .modal-header {
  border-bottom: 1px solid var(--legal-border);
}

.custom-modal .modal-title {
  color: var(--cream);
}

/* close button */
.custom-modal .btn-close {
  filter: invert(1);
}

/* labels */
.custom-modal label {
  color: var(--legal-muted);
}

/* inputs */
.custom-modal .form-control {
  background: #2b1505;
  color: var(--cream);
  border: 1px solid var(--legal-border);
  border-radius: var(--radius-sm);
}

.custom-modal .form-control::placeholder {
  color: rgba(255, 219, 156, 0.5);
}

/* focus */
.custom-modal .form-control:focus {
  border-color: var(--card-bg);
  box-shadow: none;
}

/* button */
.custom-modal .btn-primary {
  background: var(--card-bg);
  color: var(--ink);
  border: none;
  border-radius: var(--radius-sm);
}

/* small text */
.custom-modal p {
  color: var(--legal-muted);
}

/* links */
.custom-modal a {
  color: var(--card-bg);
}

/* ===== NAVBAR CONTAINER ===== */
/* /* ===== NAVBAR (FLOATING GLASS) ===== */
/* ════════════════════════════════════════════
   EXTENDED ROOT VARIABLES
════════════════════════════════════════════ */



/* ════════════════════════════════════════════
   NAVBAR — INVISIBLE CONTAINER
   Layout & positioning only.
   No background, blur, border, or shadow.
   Only the content (clock + links) is visible.
════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);

  width: calc(100% - 48px);
  max-width: 1200px;

  display: flex;
  justify-content: space-between; /* clock left, links right */
  align-items: center;

  padding: 10px 22px;
  border-radius: var(--radius-sm);

  background:              none;
  backdrop-filter:         none;
  -webkit-backdrop-filter: none;
  border:                  none;
  box-shadow:              none;

  z-index:    100;
  opacity:    1;
  visibility: visible;

  /* opacity/visibility for hero-exit fade + glass transitions */
  transition: opacity     0.4s ease,
              visibility  0.4s ease,
              var(--nav-transition);
}

/* glass surface restored after hero */
.navbar.scrolled {
  background:              var(--glass-bg-scroll);
  backdrop-filter:         blur(var(--glass-blur-scroll)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur-scroll)) saturate(160%);
  border:                  1px solid var(--glass-border-scroll);
  box-shadow:              var(--glass-shadow-scroll);
}


/* ════════════════════════════════════════════
   NAV SIDES
════════════════════════════════════════════ */
.nav-left {
  display:     flex;
  align-items: center;
  flex: 1;          /* takes up available left space */
}

.nav-right {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;   /* never compresses */
  /* remove margin-left: auto entirely */
}

/* ════════════════════════════════════════════
   CLOCK DISPLAY WRAPPER
════════════════════════════════════════════ */
.clock-display {
  display:       flex;
  align-items:   center;
  gap:           0;        /* spacing handled by children */
  padding:       6px 14px;
  border-radius: 10px;
  background:    rgba(0, 0, 0, 0.12);
  border:        1px solid rgba(252, 233, 160, 0.08);
}


/* ════════════════════════════════════════════
   DAY LABEL  — MON / TUE … SUN
   Crystal font, one size token, no segments.
════════════════════════════════════════════ */
.clock-day {
  font-family:    'Crystal', monospace;
  font-size:      var(--day-font-size);
  font-style:     normal;
  letter-spacing: 2px;
  line-height:    1;
  color:          var(--seg-on);
  text-shadow:    0 0 8px  rgba(252, 233, 160, 0.65),
                  0 0 18px rgba(252, 233, 160, 0.30);
  opacity:        0.9;
  user-select:    none;
  position:       relative;
  top:            1px; /* micro-nudge for optical alignment */
}


/* ════════════════════════════════════════════
   DIVIDER — hairline rule between sections
════════════════════════════════════════════ */
.clock-divider {
  width:         1px;
  height:        22px;
  background:    rgba(252, 233, 160, 0.18);
  border-radius: 1px;
  margin:        0 8px;
  flex-shrink:   0;
}


/* ════════════════════════════════════════════
   CLOCK GROUP — flex row for date or time
════════════════════════════════════════════ */
.clock-group {
  display:     flex;
  align-items: center;
  gap:         3px;
}


/* ════════════════════════════════════════════
   DATE SEPARATOR  ( / )
════════════════════════════════════════════ */
.date-sep {
  font-family: 'Crystal', monospace;
  font-size:   0.6rem;
  line-height: 1;
  color:       rgba(252, 233, 160, 0.50);
  user-select: none;
  margin:      0 1px;
  position:    relative;
  top:         1px;
}


/* ════════════════════════════════════════════
   DATE DIGITS — scoped, never touches time
════════════════════════════════════════════ */
.clock-group.clock-date .digit {
  width:  var(--date-digit-w);
  height: var(--date-digit-h);
}

.clock-group.clock-date .seg-h {
  width:  calc(var(--date-digit-w) - 3px);
  height: var(--date-seg-w);
  left:   1.5px;
}

.clock-group.clock-date .seg-v {
  width:  var(--date-seg-w);
  height: calc(var(--date-seg-h) - 2px);
}

.clock-group.clock-date .seg-g {
  top: calc(50% - var(--date-seg-w) / 2);
}


/* ════════════════════════════════════════════
   TIME DIGITS — global segment system
════════════════════════════════════════════ */
.digit {
  position:    relative;
  width:       var(--digit-w);
  height:      var(--digit-h);
  flex-shrink: 0;
}

/* blinking colon */
.colon {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  align-items:    center;
  padding:        0 2px;
  transition:     opacity 0.4s;
}

.colon-dot {
  width:         4px;
  height:        4px;
  border-radius: 50%;
  background:    var(--seg-on);
  box-shadow:    var(--seg-glow);
}

/* segment base */
.seg {
  position:   absolute;
  background: var(--seg-off);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.seg.on {
  background: var(--seg-on);
  box-shadow: var(--seg-glow);
}

/* horizontal segments — faceted hexagon shape */
.seg-h {
  width:  calc(var(--digit-w) - 4px);
  height: var(--seg-w);
  left:   2px;
  clip-path: polygon(
    2px 0%, calc(100% - 2px) 0%,
    100% 50%,
    calc(100% - 2px) 100%, 2px 100%,
    0% 50%
  );
}

/* vertical segments */
.seg-v {
  width:  var(--seg-w);
  height: calc(var(--seg-h) - 2px);
  clip-path: polygon(
    0%   2px,  50% 0%,    100% 2px,
    100% calc(100% - 2px), 50% 100%, 0% calc(100% - 2px)
  );
}

/* segment positions — standard 7-seg layout */
.seg-a { top: 0;                             left: 2px; }
.seg-b { top: 2px;                           right: 0;  }
.seg-c { bottom: 2px;                        right: 0;  }
.seg-d { bottom: 0;                          left: 2px; }
.seg-e { bottom: 2px;                        left: 0;   }
.seg-f { top: 2px;                           left: 0;   }
.seg-g { top: calc(50% - var(--seg-w) / 2); left: 2px; }


/* ════════════════════════════════════════════
   NAV BUTTONS
   Font: Poppins (not Crystal — scoped away).
   At rest: plain ghost text, no border UI.
   On hover: animated border draws in from
   opposite corners + subtle bg fill.
════════════════════════════════════════════ */
.nav-btn {
  position:        relative;
  overflow:        hidden;   /* clips animated border lines */

  text-decoration: none;
  font-family:     'Poppins', sans-serif;  /* Poppins only here */
  font-size:       0.82rem;
  font-weight:     500;
  letter-spacing:  0.4px;

  color:         rgba(252, 233, 160, 0.60);
  padding:       6px 15px;
  border-radius: 6px;

  background: transparent;
  border:     none;          /* animated lines replace static border */
  box-shadow: none;

  transition: color      0.25s ease,
              background 0.25s ease,
              transform  0.25s ease;
}

/* ── animated border spans ── */
.nav-btn .border-h,
.nav-btn .border-v {
  position:       absolute;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  pointer-events: none;
}

/* top + bottom lines */
.nav-btn .border-h::before,
.nav-btn .border-h::after {
  content:    "";
  position:   absolute;
  height:     1.5px;
  width:      100%;
  background: rgba(252, 233, 160, 0.55);
  transition: transform 0.35s ease;
}

.nav-btn .border-h::before {
  top:              0;
  left:             0;
  transform:        scaleX(0);
  transform-origin: left;   /* draws left → right */
}

.nav-btn .border-h::after {
  bottom:           0;
  left:             0;
  transform:        scaleX(0);
  transform-origin: right;  /* draws right → left */
}

/* left + right lines */
.nav-btn .border-v::before,
.nav-btn .border-v::after {
  content:    "";
  position:   absolute;
  width:      1.5px;
  height:     100%;
  background: rgba(252, 233, 160, 0.55);
  transition: transform 0.35s ease;
}

.nav-btn .border-v::before {
  top:              0;
  left:             0;
  transform:        scaleY(0);
  transform-origin: top;    /* draws top → bottom */
}

.nav-btn .border-v::after {
  top:              0;
  right:            0;
  transform:        scaleY(0);
  transform-origin: bottom; /* draws bottom → top */
}

/* hover — borders animate in */
.nav-btn:hover .border-h::before,
.nav-btn:hover .border-h::after { transform: scaleX(1); }
.nav-btn:hover .border-v::before,
.nav-btn:hover .border-v::after { transform: scaleY(1); }

/* hover — button state */
.nav-btn:hover {
  color:      rgba(252, 233, 160, 0.95);
  background: rgba(252, 233, 160, 0.07);
  transform:  translateY(-2px);
}

/* active page link */
.nav-btn.active {
  color:      rgba(252, 233, 160, 0.85);
  background: rgba(252, 233, 160, 0.06);
}


/* ════════════════════════════════════════════
   CONTACT — slightly warmer at rest (CTA)
   Has a real border (not animated lines)
   so it always reads as the primary action.
════════════════════════════════════════════ */
.nav-btn.contact {
  color:        rgba(252, 233, 160, 0.85);
  background:   rgba(252, 233, 160, 0.06);
  border:       1px solid rgba(252, 233, 160, 0.22);
}

.nav-btn.contact:hover {
  color:        var(--cream);
  background:   rgba(252, 233, 160, 0.14);
  border-color: rgba(252, 233, 160, 0.48);
  box-shadow:   0 0 16px rgba(252, 233, 160, 0.15),
                0 6px 22px rgba(15, 13, 0, 0.22);
  transform:    translateY(-2px);
}


/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 768px) {
  .navbar {
    padding: 9px 14px;
    width:   calc(100% - 24px);
    top:     10px;
  }

  /* hide date section, keep day + time */
  .clock-group.clock-date,
  .clock-divider:first-of-type {
    display: none;
  }

  :root {
    --day-font-size: 0.85rem;
    --seg-w:         3px;
    --seg-h:         14px;
    --digit-w:       13px;
    --digit-h:       28px;
    --date-seg-w:    2px;
    --date-seg-h:    9px;
    --date-digit-w:  8px;
    --date-digit-h:  18px;
  }

  .nav-btn   { font-size: 0.74rem; padding: 5px 10px; }
  .colon     { gap: 6px; }
  .colon-dot { width: 3px; height: 3px; }
}


.legal-muted-label {
  font-size: 0.8em;
  font-weight: 400;
  color: var(--legal-muted);
  letter-spacing: 0.2px;
}

/* ═══════════════════════════════════════════════════════
   INNER PAGES — About, Services, Careers
═══════════════════════════════════════════════════════ */

/* Sticky top nav for inner pages */
.inner-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--legal-bg);
  border-bottom: 1px solid var(--legal-border);
  padding: 14px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.inner-nav-logo {
  width: 100px;
  height: auto;
  flex-shrink: 0;
}

.inner-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

.inner-nav-link {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(252, 233, 160, 0.6);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}

.inner-nav-link:hover,
.inner-nav-link.active {
  color: var(--legal-accent);
  background: rgba(252, 233, 160, 0.07);
}

.inner-nav-contact {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--cream);
  padding: 8px 20px;
  border-radius: 20px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.inner-nav-contact:hover {
  background: var(--card-bg);
  transform: translateY(-1px);
  color: var(--ink);
}

/* Page hero band */
.page-hero {
  background: var(--legal-bg);
  padding: 72px 48px 60px;
  text-align: center;
  border-bottom: 1px solid var(--legal-border);
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  color: var(--legal-accent);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.page-hero p {
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  font-weight: 300;
  color: var(--legal-muted);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Light content body */
.inner-body {
  background: var(--page-bg);
  min-height: 60vh;
}

.inner-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 48px;
}

.inner-section + .inner-section {
  border-top: 1px solid rgba(15, 13, 0, 0.1);
}

.inner-section h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.inner-section > p {
  font-size: clamp(0.88rem, 1.5vw, 1rem);
  font-weight: 400;
  color: var(--ink);
  opacity: 0.78;
  line-height: 1.85;
  max-width: 640px;
}

/* Value cards */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.value-card {
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: 28px 24px;
}

.value-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.value-card p {
  font-size: 0.84rem;
  color: var(--ink);
  opacity: 0.78;
  line-height: 1.65;
  margin: 0;
}

/* Service cards */
.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
  margin-top: 32px;
}

.service-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-card .service-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.service-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.service-card p {
  font-size: 0.88rem;
  color: var(--ink);
  opacity: 0.75;
  line-height: 1.7;
  margin: 0;
}

/* Careers: job openings */
.opening-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 32px;
}

.opening-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px solid rgba(15, 13, 0, 0.12);
  border-radius: var(--radius-sm);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.opening-card:hover {
  border-color: rgba(15, 13, 0, 0.25);
  box-shadow: 0 4px 20px rgba(15, 13, 0, 0.06);
}

.opening-info h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.opening-info .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.opening-tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.65;
  background: rgba(15, 13, 0, 0.07);
  padding: 3px 10px;
  border-radius: 20px;
}

.btn-apply {
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-apply:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 13, 0, 0.2);
  color: var(--cream);
}

/* Dark CTA strip at bottom of inner pages */
.cta-strip {
  background: var(--legal-bg);
  padding: 72px 48px;
  text-align: center;
}

.cta-strip h2 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--legal-accent);
  margin-bottom: 14px;
}

.cta-strip p {
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  color: var(--legal-muted);
  margin-bottom: 28px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

.btn-cta {
  display: inline-block;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s, transform 0.18s;
}

.btn-cta:hover {
  background: var(--card-bg);
  transform: translateY(-2px);
  color: var(--ink);
}

/* Inner page responsive */
@media (max-width: 680px) {
  .inner-nav {
    padding: 12px 20px;
    gap: 12px;
  }

  .inner-nav-links {
    display: none;
  }

  .page-hero {
    padding: 52px 24px 44px;
  }

  .inner-section {
    padding: 48px 24px;
  }

  .cta-strip {
    padding: 52px 24px;
  }
}
}