/* =========================================================
   MILAN NIVAS — Design Tokens
   ========================================================= */
:root{
  --ink: #10171F;
  --ink-soft: #17212B;
  --paper: #F7F2E9;
  --paper-soft: #FDFBF6;
  --brass: #C9932E;
  --brass-light: #E4B466;
  --jade: #1F5C50;
  --jade-light: #2E7A6B;
  --sage: #9CB6A6;
  --coral: #E2603A;
  --navy-deep: #0B1A2E;
  --navy-mid: #15304F;

  --font-display: 'Fraunces', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;

  --shadow-soft: 0 20px 60px -20px rgba(16,23,31,0.35);
  --shadow-card: 0 10px 30px -12px rgba(16,23,31,0.25);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
}

h1,h2,h3,h4,.display-font{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mono{ font-family: var(--font-mono); letter-spacing: 0.02em; }

a{ text-decoration: none; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 22px;
  height: 1px;
  background: var(--brass);
  display:inline-block;
}

.btn-brass{
  background: linear-gradient(135deg, var(--brass-light), var(--brass));
  color: var(--ink);
  border: none;
  font-weight: 600;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  box-shadow: 0 10px 25px -8px rgba(201,147,46,0.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn-brass:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(201,147,46,0.65);
  color: var(--ink);
}
.btn-outline-jade{
  border: 1.5px solid rgba(31,92,80,0.35);
  color: var(--jade);
  font-weight: 600;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: transparent;
  transition: all .25s ease;
}
.btn-outline-jade:hover{
  background: var(--jade);
  color: #fff;
  border-color: var(--jade);
}
.btn-ghost-light{
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  transition: all .25s ease;
}
.btn-ghost-light:hover{
  background: rgba(255,255,255,0.16);
  color: #fff;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.mn-navbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 14px 0;
  transition: all .35s ease;
  background: rgba(247,242,233,0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(16,23,31,0.06);
}
.mn-navbar.scrolled{
  padding: 8px 0;
  background: rgba(247,242,233,0.88);
  box-shadow: 0 8px 30px -18px rgba(16,23,31,0.4);
}
.mn-brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}
.mn-brand img{ width: 38px; height: 38px; }
.mn-brand .tag{
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--jade);
  display: block;
  font-weight: 600;
}
.mn-navbar .nav-link{
  color: var(--ink) !important;
  font-weight: 500;
  font-size: 0.94rem;
  position: relative;
  padding: 8px 14px !important;
}
.mn-navbar .nav-link::after{
  content:"";
  position:absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.mn-navbar .nav-link:hover::after{ transform: scaleX(1); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position: relative;
  background: radial-gradient(circle at 15% 20%, rgba(31,92,80,0.18), transparent 45%),
              radial-gradient(circle at 85% 0%, rgba(201,147,46,0.16), transparent 45%),
              var(--paper);
  padding: 160px 0 100px;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(16,23,31,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,23,31,0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  pointer-events: none;
}
.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background: rgba(31,92,80,0.08);
  border: 1px solid rgba(31,92,80,0.18);
  color: var(--jade);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero h1{
  font-size: clamp(2.4rem, 4.6vw, 3.8rem);
  line-height: 1.08;
  margin-bottom: 22px;
}
.hero h1 em{
  font-style: normal;
  color: var(--jade);
  background: linear-gradient(135deg, var(--jade), var(--brass));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero .lead{
  font-size: 1.12rem;
  color: rgba(16,23,31,0.72);
  max-width: 520px;
  margin-bottom: 34px;
}
.hero-trust{
  display:flex;
  gap: 28px;
  margin-top: 46px;
  flex-wrap: wrap;
}
.hero-trust .item{ display:flex; flex-direction:column; }
.hero-trust .num{
  font-family: var(--font-mono);
  font-weight:700;
  font-size:1.3rem;
  color: var(--ink);
}
.hero-trust .label{
  font-size: 0.75rem;
  color: rgba(16,23,31,0.55);
  letter-spacing: 0.03em;
}

/* ---- Directory board (signature element) ---- */
.board-wrap{
  position: relative;
  perspective: 1400px;
}
.board-wrap::before{
  content:"";
  position:absolute;
  top:-50px; left:-50px; right:-50px; bottom:-50px;
  background: radial-gradient(circle at 28% 22%, rgba(201,147,46,0.16), transparent 60%);
  z-index:-1;
  pointer-events:none;
}
.board{
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg, var(--navy-deep), var(--navy-mid));
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-soft), 0 0 50px -14px rgba(201,147,46,0.22);
  border: 1px solid rgba(201,147,46,0.22);
  overflow: hidden;
  transform: rotateY(-6deg) rotateX(2deg);
  transition: transform .4s ease;
}
.board-wrap:hover .board{ transform: rotateY(-2deg) rotateX(1deg); }

/* Starfield — echoes the login screen's night-sky background */
.board::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 24%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1px 1px at 68% 12%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.4px 1.4px at 84% 55%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1px 1px at 38% 70%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.4px 1.4px at 55% 40%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 8% 82%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.4px 1.4px at 93% 28%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 30% 92%, rgba(255,255,255,0.5), transparent);
  animation: mnTwinkle 4.5s ease-in-out infinite;
}
.board::after{
  content:"";
  position:absolute;
  top: 14%;
  left: -20%;
  width: 110px;
  height: 2px;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(201,147,46,0.7), rgba(255,255,255,0));
  transform: rotate(20deg);
  opacity: 0;
  animation: mnShootingStar 6s ease-in infinite;
  animation-delay: 1.5s;
}
@keyframes mnTwinkle{
  0%,100%{ opacity: 0.45; }
  50%{ opacity: 1; }
}
@keyframes mnShootingStar{
  0%{ transform: translate(0,0) rotate(20deg); opacity:0; }
  6%{ opacity:1; }
  22%{ transform: translate(360px, 150px) rotate(20deg); opacity:0; }
  100%{ opacity:0; }
}

.board-header{
  position: relative;
  z-index: 1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 18px;
}
.board-header .dot-row span{
  width:9px; height:9px; border-radius:50%;
  display:inline-block; margin-right:6px;
  background: rgba(255,255,255,0.18);
}
.board-header .dot-row span:nth-child(1){ background:#E2603A; }
.board-header .dot-row span:nth-child(2){ background:#C9932E; }
.board-header .dot-row span:nth-child(3){ background:#2E7A6B; }
.board-title{
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.board-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.plate-btn{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 14px 10px;
  text-align:center;
  color: rgba(255,255,255,0.85);
  transition: all .3s ease;
}
.plate-btn i{
  display:block;
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: var(--brass-light);
}
.plate-btn small{
  display:block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: rgba(255,255,255,0.45);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.plate-btn.lit{
  background: linear-gradient(135deg, rgba(201,147,46,0.22), rgba(201,147,46,0.05));
  border-color: rgba(201,147,46,0.45);
  box-shadow: 0 0 0 1px rgba(201,147,46,0.15) inset, 0 8px 20px -8px rgba(201,147,46,0.4);
}
.board-strip{
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.08);
}
.board-strip .row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  padding: 6px 0;
}
.board-strip .row + .row{ border-top: 1px dashed rgba(255,255,255,0.08); }
.board-strip .chip{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(46,122,107,0.25);
  color: #9BD8C6;
}
.board-strip .chip.warn{ background: rgba(226,96,58,0.22); color: #F3A184; }

.float-card{
  position:absolute;
  z-index: 5;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}
.float-card.card-visitor{
  right: -22px;
  top: -30px;
  animation: floatY 6s ease-in-out infinite;
}
.float-card.card-collect{
  left: -30px;
  bottom: -34px;
  animation: floatY 7s ease-in-out infinite reverse;
}
.float-card .fc-title{
  font-size:0.68rem;
  color: rgba(16,23,31,0.5);
  font-family: var(--font-mono);
  letter-spacing:0.06em;
  margin-bottom:4px;
}
.float-card .fc-value{
  font-weight:700;
  font-size:1.05rem;
  color: var(--ink);
}
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* =========================================================
   SECTION UTILITIES
   ========================================================= */
.section{ padding: 100px 0; }
.section-dark{
  background: linear-gradient(160deg, var(--ink), var(--ink-soft));
  color: rgba(255,255,255,0.92);
}
.section-jade{
  background: linear-gradient(160deg, var(--jade), #164841);
  color: #fff;
}
.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); margin-top: 12px; }
.section-dark .eyebrow, .section-jade .eyebrow{ color: var(--brass-light); }
.section-dark .eyebrow::before, .section-jade .eyebrow::before{ background: var(--brass-light); }

/* ---- Stats ---- */
.stat-card{
  text-align:center;
  padding: 30px 14px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
}
.stat-num{
  font-family: var(--font-mono);
  font-weight:700;
  font-size: clamp(2rem, 3vw, 2.6rem);
  color: var(--brass-light);
  line-height:1;
}
.stat-label{
  margin-top:10px;
  font-size:0.85rem;
  color: rgba(255,255,255,0.65);
}

/* ---- Module nameplates ---- */
.module-card{
  background: var(--paper-soft);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  height:100%;
  border: 1px solid rgba(16,23,31,0.06);
  box-shadow: var(--shadow-card);
  position:relative;
  overflow:hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.module-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -20px rgba(16,23,31,0.28);
}
.module-id{
  position:absolute;
  top:20px; right:22px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(16,23,31,0.25);
  letter-spacing:0.05em;
}
.module-icon{
  width:52px; height:52px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  color:#fff;
  margin-bottom: 22px;
  background: linear-gradient(135deg, var(--jade-light), var(--jade));
}
.module-card:nth-child(6n+2) .module-icon{ background: linear-gradient(135deg, var(--brass-light), var(--brass)); color: var(--ink); }
.module-card:nth-child(6n+3) .module-icon{ background: linear-gradient(135deg, #EA8266, var(--coral)); }
.module-card:nth-child(6n+4) .module-icon{ background: linear-gradient(135deg, var(--coral), #B84226); }
.module-card:nth-child(6n+5) .module-icon{ background: linear-gradient(135deg, var(--sage), var(--jade)); }
.module-card:nth-child(6n+6) .module-icon{ background: linear-gradient(135deg, var(--brass), #9C7220); color:#fff; }
.module-card h4{ font-size: 1.18rem; margin-bottom: 10px; }
.module-card p{ color: rgba(16,23,31,0.62); font-size: 0.93rem; margin-bottom: 0; }
.module-tags{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.module-tags span{
  font-family: var(--font-mono);
  font-size:0.65rem;
  padding: 4px 10px;
  border-radius:999px;
  background: rgba(31,92,80,0.08);
  color: var(--jade);
  border:1px solid rgba(31,92,80,0.14);
}

/* ---- Why choose ---- */
.why-card{
  display:flex;
  gap:18px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--paper-soft);
  border: 1px solid rgba(16,23,31,0.06);
  height:100%;
}
.why-icon{
  min-width:46px; height:46px;
  border-radius: 12px;
  background: rgba(201,147,46,0.14);
  color: var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.why-card h5{ margin-bottom:6px; font-family: var(--font-body); font-weight:700; font-size:1.02rem; }
.why-card p{ font-size:0.9rem; color: rgba(16,23,31,0.6); margin:0; }

/* ---- Timeline ---- */
.mn-timeline{ position:relative; padding-left: 34px; }
.mn-timeline::before{
  content:"";
  position:absolute; left:9px; top:6px; bottom:6px;
  width:2px;
  background: repeating-linear-gradient(to bottom, rgba(201,147,46,0.5) 0 6px, transparent 6px 12px);
}
.tl-item{ position:relative; padding-bottom: 44px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-pin{
  position:absolute; left:-34px; top:0;
  width:20px; height:20px;
  border-radius:50%;
  background: var(--paper);
  border: 2px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
}
.tl-pin::after{ content:""; width:7px; height:7px; border-radius:50%; background: var(--brass); }
.tl-item h5{ margin-bottom:6px; }
.tl-item .tl-when{
  font-family: var(--font-mono);
  font-size:0.7rem;
  color: var(--brass);
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.tl-item p{ color: rgba(16,23,31,0.62); margin-top:6px; margin-bottom:0; max-width:520px; }

/* ---- Testimonials ---- */
.testi-card{
  background: var(--paper-soft);
  border-radius: var(--radius-lg);
  padding: 30px;
  height:100%;
  border: 1px solid rgba(16,23,31,0.06);
  box-shadow: var(--shadow-card);
}
.testi-stars{ color: var(--brass); font-size:0.85rem; margin-bottom:14px; }
.testi-card p.quote{ font-size:0.98rem; color: rgba(16,23,31,0.75); min-height:96px; }
.testi-person{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.avatar-badge{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size:0.85rem;
  color:#fff;
  background: linear-gradient(135deg, var(--jade-light), var(--jade));
}
.testi-person .name{ font-weight:700; font-size:0.92rem; }
.testi-person .role{ font-size:0.78rem; color: rgba(16,23,31,0.5); }

/* ---- FAQ ---- */
.mn-accordion .accordion-item{
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(16,23,31,0.1);
}
.mn-accordion .accordion-button{
  background: transparent;
  font-family: var(--font-display);
  font-weight:600;
  font-size:1.08rem;
  padding: 22px 8px;
  color: var(--ink);
  box-shadow:none;
}
.mn-accordion .accordion-button:not(.collapsed){ color: var(--jade); }
.mn-accordion .accordion-button::after{
  filter: none;
  background-size:1.1rem;
}
.mn-accordion .accordion-body{ padding: 0 8px 24px; color: rgba(16,23,31,0.65); }

/* ---- Contact ---- */
.contact-panel{
  background: var(--paper-soft);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(16,23,31,0.06);
}
.form-control, .form-select{
  background: #fff;
  border: 1px solid rgba(16,23,31,0.12);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size:0.94rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(31,92,80,0.12);
}
.form-label{ font-size:0.85rem; font-weight:600; margin-bottom:6px; color: rgba(16,23,31,0.75); }

.contact-side{ padding: 10px 10px 10px 30px; }
.contact-side .ci{ display:flex; gap:14px; align-items:flex-start; margin-bottom: 24px; }
.contact-side .ci i{
  width:40px; height:40px; border-radius:10px;
  background: rgba(31,92,80,0.09); color: var(--jade);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.contact-side .ci h6{ margin-bottom:2px; font-weight:700; font-size:0.92rem; }
.contact-side .ci span{ font-size:0.85rem; color: rgba(16,23,31,0.6); }

/* ---- CTA ---- */
.cta-panel{
  border-radius: 28px;
  padding: 70px 50px;
  background:
    radial-gradient(circle at 20% 20%, rgba(201,147,46,0.35), transparent 55%),
    linear-gradient(150deg, var(--ink), #1a2b32 60%, var(--jade));
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-panel h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom:14px; }
.cta-panel p{ color: rgba(255,255,255,0.72); max-width:480px; }

/* ---- Footer ---- */
footer.mn-footer{
  background: var(--ink);
  color: rgba(255,255,255,0.65);
  padding-top: 70px;
}
.mn-footer h6{ color:#fff; font-weight:700; margin-bottom:18px; font-size:0.92rem; letter-spacing:0.03em; }
.mn-footer a{ color: rgba(255,255,255,0.6); font-size:0.9rem; display:block; margin-bottom:10px; transition: color .2s ease; }
.mn-footer a:hover{ color: var(--brass-light); }
.mn-footer .fbrand{ font-family: var(--font-display); font-weight:700; color:#fff; font-size:1.2rem; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 50px;
  padding: 22px 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
}
.social-dot{
  width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  color:#fff; margin-right:8px;
  transition: all .2s ease;
}
.social-dot:hover{ background: var(--brass); color: var(--ink); }

/* Higher specificity override — .mn-footer a alone would otherwise
   force display:block + margin-bottom onto these icons and break
   the circular centering. */
.mn-footer a.social-dot{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  line-height: 1;
}
.mn-footer a.social-dot i{ line-height: 1; }

/* ---- Back to top ---- */
#backToTop{
  position:fixed;
  bottom: 26px; right: 26px;
  width:46px; height:46px;
  border-radius:50%;
  background: var(--ink);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: all .3s ease;
  z-index: 999;
  border:none;
}
#backToTop.show{ opacity:1; visibility:visible; }
#backToTop:hover{ background: var(--brass); color: var(--ink); }

@media (max-width: 991px){
  .hero{ padding: 130px 0 60px; text-align:center; }
  .hero .lead{ margin-left:auto; margin-right:auto; }
  .hero-trust{ justify-content:center; }
  .board-wrap{ margin-top: 60px; max-width: 420px; margin-left:auto; margin-right:auto; }
  .float-card{ display:none; }
  .contact-side{ padding-left:10px; margin-top:30px; }
}