/* ============================================================
   Direc — Landing / Login page
   Palette sourced from MSM Construction Engineering logo (navy
   #163B64, red #B11116) and the Direc product mark (blue #2B7EC1).
   ============================================================ */

:root{
  --navy-950:#0A1A2C;
  --navy-900:#0F2540;
  --navy-800:#163B64;
  --navy-700:#1D4E7E;
  --navy-600:#2B7EC1;
  --navy-100:#E7F0F8;
  --navy-50:#F2F7FB;

  --red-700:#7E0D11;
  --red-600:#B11116;
  --red-500:#D6262C;
  --red-100:#FDECEC;

  --lime-500:#7FB520;

  --ink-900:#111826;
  --ink-700:#3A4553;
  --ink-500:#6B7686;
  --ink-400:#98A2B0;

  --paper-0:#FFFFFF;
  --paper-50:#F6F8FB;
  --paper-100:#EEF2F7;
  --border:#E3E9F0;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;

  --shadow-sm:0 2px 8px rgba(15,37,64,.06);
  --shadow-md:0 12px 28px rgba(15,37,64,.10);
  --shadow-lg:0 24px 60px rgba(10,26,44,.18);

  --font-display:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, sans-serif;
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink-700);
  background:var(--paper-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{ font-family:var(--font-display); color:var(--navy-900); margin:0; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; }

section[id]{ scroll-margin-top:88px; }

:focus-visible{ outline:2px solid var(--navy-600); outline-offset:3px; }

/* ---------- shared bits ---------- */

.dl-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--navy-700);
  background:var(--navy-100);
  border:1px solid rgba(22,59,100,.14);
  padding:7px 14px; border-radius:999px;
}
.dl-eyebrow--light{ color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); }
.dl-eyebrow i{ font-size:14px; }

.dl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:700; font-size:14.5px;
  padding:13px 24px; border-radius:var(--radius-md);
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.dl-btn i{ font-size:16px; }
.dl-btn--primary{
  color:#fff; background:linear-gradient(135deg, var(--navy-700), var(--navy-600));
  box-shadow:0 10px 24px rgba(22,59,100,.28);
}
.dl-btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(22,59,100,.36); }
.dl-btn--ghost{ color:var(--navy-800); border-color:rgba(22,59,100,.25); background:transparent; }
.dl-btn--ghost:hover{ background:var(--navy-50); border-color:var(--navy-700); }
.dl-btn--light{ color:var(--navy-900); background:#fff; box-shadow:0 10px 26px rgba(0,0,0,.22); }
.dl-btn--light:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(0,0,0,.28); }
.dl-btn--block{ width:100%; }

.dl-link{ color:var(--navy-600); font-weight:600; }
.dl-link:hover{ text-decoration:underline; }

.dl-logo-chip{
  display:inline-flex; align-items:center;
  background:#fff; border-radius:14px; padding:10px 16px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}

.dl-section-head{ max-width:620px; margin:0 auto; text-align:center; }
.dl-section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.35rem); font-weight:800; letter-spacing:-.01em; margin:16px 0 12px; }
.dl-section-head p{ color:var(--ink-500); font-size:15.5px; line-height:1.7; }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   Nav
   ============================================================ */
.dl-nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .25s ease, border-color .25s ease;
}
.dl-nav.is-scrolled{ box-shadow:0 4px 20px rgba(15,37,64,.08); border-color:var(--border); }
.dl-nav__inner{
  max-width:1240px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:32px;
}
.dl-brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.dl-brand__mark{ height:38px; width:auto; }
.dl-brand__text{ display:flex; flex-direction:column; line-height:1.2; }
.dl-brand__text strong{ font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--navy-900); }
.dl-brand__text small{ font-size:10.5px; color:var(--ink-500); font-weight:600; letter-spacing:.02em; }

.dl-nav__links{ display:flex; align-items:center; gap:28px; }
.dl-nav__links a{ font-size:14px; font-weight:600; color:var(--ink-700); }
.dl-nav__links a:hover{ color:var(--navy-700); }

.dl-nav__toggle{
  display:none; margin-left:8px; background:none; border:none; font-size:22px;
  color:var(--navy-900); cursor:pointer; padding:4px;
}

.dl-nav__mobile{
  display:none; flex-direction:column; gap:4px; padding:8px 24px 18px;
  border-top:1px solid var(--border); background:#fff;
}
.dl-nav__mobile a{ padding:12px 4px; font-weight:600; font-size:14.5px; color:var(--ink-700); border-bottom:1px solid var(--paper-100); }
.dl-nav__mobile .dl-btn{ margin-top:12px; padding:13px 24px; border-bottom:none; }
.dl-nav__mobile.is-open{ display:flex; }

@media (max-width:860px){
  .dl-nav__links, .dl-nav__cta{ display:none; }
  .dl-nav__toggle{ display:inline-flex; align-items:center; }
}

/* ============================================================
   Hero + Login
   ============================================================ */
.dl-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  padding:76px 24px 110px;
}
.dl-hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(560px 420px at 12% -10%, rgba(43,126,193,.35), transparent 60%),
    radial-gradient(520px 420px at 100% 10%, rgba(177,17,22,.22), transparent 60%),
    radial-gradient(640px 480px at 50% 120%, rgba(127,181,32,.12), transparent 60%);
}
.dl-hero__inner{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}

.dl-hero__title{
  font-size:clamp(2.1rem, 4.4vw, 3.15rem); font-weight:800; letter-spacing:-.02em;
  line-height:1.16; color:#fff; margin:18px 0 20px;
}
.dl-hero__subtitle{
  font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.72); max-width:460px; margin-bottom:30px;
}
.dl-hero__features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.dl-hero__features li{ display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.92); font-size:14.5px; font-weight:600; }
.dl-hero__features i{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:9px; font-size:15px;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.16); flex-shrink:0;
}

/* login card */
.dl-login{
  position:relative; background:#fff; border-radius:var(--radius-xl);
  padding:38px 36px; box-shadow:var(--shadow-lg); border:1px solid rgba(255,255,255,.5);
}
.dl-login__head{ text-align:center; margin-bottom:22px; }
.dl-login__logo{ height:34px; margin:0 auto 14px; }
.dl-login__head h2{ font-size:21px; font-weight:800; margin-bottom:4px; }
.dl-login__head p{ font-size:13.5px; color:var(--ink-500); }

.dl-form{ display:flex; flex-direction:column; gap:18px; }
.dl-field label{ display:block; font-size:13px; font-weight:700; color:var(--ink-700); margin-bottom:7px; }
.dl-input{
  display:flex; align-items:center; gap:10px;
  height:48px; padding:0 14px; border-radius:var(--radius-md);
  border:1.5px solid var(--border); background:var(--paper-50);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dl-input:focus-within{ border-color:var(--navy-600); box-shadow:0 0 0 4px rgba(43,126,193,.14); background:#fff; }
.dl-input.is-invalid{ border-color:var(--red-500); }
.dl-input i{ color:var(--ink-400); font-size:17px; flex-shrink:0; }
.dl-input input{
  border:none; outline:none; background:transparent; flex:1; height:100%;
  font-size:14.5px; color:var(--ink-900); font-family:var(--font-body);
}
.dl-input input::placeholder{ color:var(--ink-400); }
.dl-input__toggle{ background:none; border:none; color:var(--ink-400); cursor:pointer; display:flex; padding:2px; }
.dl-input__toggle:hover{ color:var(--navy-700); }
.dl-field__error{ display:block; margin-top:6px; font-size:12.5px; color:var(--red-600); font-weight:600; }

.dl-form__row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.dl-checkbox{ display:flex; align-items:center; gap:8px; color:var(--ink-700); cursor:pointer; }
.dl-checkbox input{ width:16px; height:16px; accent-color:var(--navy-700); cursor:pointer; }

.dl-login__foot{ margin-top:20px; font-size:12.5px; color:var(--ink-500); text-align:center; }

.dl-alert{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:600; margin-bottom:18px;
}
.dl-alert i{ font-size:17px; flex-shrink:0; }
.dl-alert span{ flex:1; }
.dl-alert--success{ background:#EAF7EE; color:#1C7C3F; border:1px solid #CDEBD7; }
.dl-alert--danger{ background:var(--red-100); color:var(--red-600); border:1px solid #F7D3D3; }
.dl-alert__close{ background:none; border:none; font-size:18px; line-height:1; cursor:pointer; color:inherit; opacity:.6; }
.dl-alert__close:hover{ opacity:1; }

@media (max-width:980px){
  .dl-hero__inner{ grid-template-columns:1fr; }
  .dl-login{ max-width:480px; }
}
@media (max-width:560px){
  .dl-hero{ padding:48px 16px 80px; }
  .dl-login{ padding:28px 22px; }
}

/* ============================================================
   Showcase / mockup
   ============================================================ */
.dl-showcase{ background:var(--paper-50); padding:100px 24px; }
.dl-showcase__inner{ max-width:1080px; margin:0 auto; }

.dl-mock{
  margin-top:48px; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.dl-mock__bar{ display:flex; align-items:center; gap:8px; padding:12px 16px; background:var(--paper-100); border-bottom:1px solid var(--border); }
.dl-mock__dot{ width:10px; height:10px; border-radius:50%; }
.dl-mock__dot--r{ background:#FF5F57; } .dl-mock__dot--y{ background:#FEBC2E; } .dl-mock__dot--g{ background:#28C840; }
.dl-mock__url{
  margin:0 auto; display:flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--border); border-radius:999px; padding:5px 16px;
  font-size:12px; color:var(--ink-500); font-weight:600;
}

.dl-mock__body{ display:flex; min-width:640px; overflow-x:auto; }
.dl-mock__side{
  width:64px; flex-shrink:0; background:var(--navy-900);
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 0;
}
.dl-mock__side-item{
  width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.5); font-size:17px;
}
.dl-mock__side-item.is-active{ background:var(--navy-600); color:#fff; }

.dl-mock__main{ flex:1; padding:26px 28px; background:var(--paper-50); }
.dl-mock__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.dl-mock__stat{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; box-shadow:var(--shadow-sm); }
.dl-mock__stat-label{ display:block; font-size:11.5px; font-weight:700; color:var(--ink-500); text-transform:uppercase; letter-spacing:.04em; }
.dl-mock__stat-value{ display:block; font-family:var(--font-display); font-size:23px; font-weight:800; color:var(--navy-900); margin-top:6px; }
.dl-mock__stat--warn .dl-mock__stat-value{ color:var(--red-600); }

.dl-mock__table{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.dl-mock__row{
  display:grid; grid-template-columns:2fr 1fr .7fr .9fr; align-items:center; gap:8px;
  padding:13px 18px; font-size:13px; color:var(--ink-700); border-bottom:1px solid var(--paper-100);
}
.dl-mock__row:last-child{ border-bottom:none; }
.dl-mock__row span:first-child{ display:flex; align-items:center; gap:8px; font-weight:600; color:var(--navy-900); }
.dl-mock__row--head{ background:var(--paper-100); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-500); }
.dl-mock__row--head span:first-child{ font-weight:700; color:var(--ink-500); }

.dl-tag{ display:inline-block; width:fit-content; background:var(--navy-50); color:var(--navy-700); font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:6px; }
.dl-pill{ display:inline-flex; width:fit-content; align-items:center; gap:4px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:4px 10px; border-radius:999px; }
.dl-pill--ok{ background:#E7F7EC; color:#1C7C3F; }
.dl-pill--pending{ background:#FFF4E0; color:#A85E00; }
.dl-pill--warn{ background:var(--red-100); color:var(--red-600); }

@media (max-width:720px){
  .dl-mock__stats{ grid-template-columns:1fr; }
}

/* ============================================================
   About
   ============================================================ */
.dl-about{ background:#fff; padding:100px 24px; }
.dl-about__inner{ max-width:1080px; margin:0 auto; }

.dl-cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px; }
.dl-card{
  padding:28px 24px; border-radius:var(--radius-lg); border:1px solid var(--border); background:var(--paper-50);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dl-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(43,126,193,.35); }
.dl-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--radius-md); background:var(--navy-100); color:var(--navy-700);
  font-size:21px; margin-bottom:16px;
}
.dl-card h3{ font-size:16px; font-weight:800; margin-bottom:6px; }
.dl-card p{ font-size:13.5px; line-height:1.65; color:var(--ink-500); }

.dl-about__company{
  display:flex; align-items:center; gap:32px; margin-top:56px; padding:32px;
  background:var(--paper-50); border:1px solid var(--border); border-radius:var(--radius-lg);
}
.dl-about__msm-logo{ height:60px; width:auto; flex-shrink:0; }
.dl-about__company p{ font-size:15px; line-height:1.75; color:var(--ink-700); }

@media (max-width:900px){ .dl-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .dl-cards{ grid-template-columns:1fr; }
  .dl-about__company{ flex-direction:column; text-align:center; gap:18px; }
}

/* ============================================================
   Contact
   ============================================================ */
.dl-contact{
  background:linear-gradient(120deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
  padding:80px 24px;
}
.dl-contact__inner{
  max-width:1000px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.dl-contact__copy h2{ color:#fff; font-size:clamp(1.5rem,3vw,2rem); font-weight:800; margin:14px 0 8px; }
.dl-contact__copy p{ color:rgba(255,255,255,.72); font-size:15px; }

@media (max-width:640px){ .dl-contact__inner{ justify-content:center; text-align:center; flex-direction:column; } }

/* ============================================================
   Footer
   ============================================================ */
.dl-footer{ background:var(--navy-950); padding:56px 24px 0; }
.dl-footer__inner{
  max-width:1200px; margin:0 auto; padding-bottom:44px;
  display:grid; grid-template-columns:1.4fr 1fr auto; gap:40px; align-items:start;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.dl-footer__brand p{ color:rgba(255,255,255,.55); font-size:13.5px; line-height:1.7; margin-top:14px; max-width:320px; }
.dl-footer__mark{ height:30px; width:auto; }

.dl-footer__links{ display:flex; gap:56px; }
.dl-footer__links h4{ color:#fff; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; }
.dl-footer__links a{ display:block; color:rgba(255,255,255,.6); font-size:13.5px; margin-bottom:10px; }
.dl-footer__links a:hover{ color:#fff; }

.dl-footer__company{ justify-self:end; }
.dl-footer__msm{ height:46px; width:auto; }

.dl-footer__bottom{ max-width:1200px; margin:0 auto; padding:20px 0; text-align:center; }
.dl-footer__bottom p{ color:rgba(255,255,255,.4); font-size:12.5px; }

@media (max-width:820px){
  .dl-footer__inner{ grid-template-columns:1fr; gap:28px; }
  .dl-footer__company{ justify-self:start; }
}