/* =========================================================================
   Railtech Infraventure Pvt. Ltd. — Automatic Email Reporting System
   Site.css
   Design language: signal-panel / station departure-board.
   Tokens are declared once at the top; everything else derives from them.
   ========================================================================= */

:root{
  /* --- Brand --- */
  --rail-red:        #C8221C;   /* from logo mark            */
  --rail-red-dark:    #9B1913;
  --steel:            #6E7075;  /* from logo track glyph     */
  --steel-light:      #A7ABB1;

  /* --- Neutrals / surfaces --- */
  --ink-900:          #10161D;  /* control-room navy/charcoal */
  --ink-800:          #171F29;
  --ink-700:          #212C39;
  --paper:            #F4F5F3;  /* page background            */
  --paper-raised:     #FFFFFF;
  --line:             #DEE1E1;

  /* --- Signal accents --- */
  --led-amber:        #FFB627;
  --led-green:        #35D07F;
  --led-red:           #FF5A4E;

  /* --- Type --- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', 'Segoe UI', Arial, sans-serif;
  --font-board:   'Share Tech Mono', 'Consolas', monospace;

  /* --- Rhythm --- */
  --radius: 3px;
  --shadow-card: 0 1px 2px rgba(16,22,29,0.06), 0 6px 16px rgba(16,22,29,0.06);
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }

h1,h2,h3{
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--ink-900);
}

.container{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* =========================================================================
   Top rail — thin tricolor-of-brand strip, a nod to a track/signal bar
   ========================================================================= */
.top-rail{
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    var(--rail-red) 0px, var(--rail-red) 46px,
    var(--steel) 46px, var(--steel) 60px
  );
}

/* =========================================================================
   Header / master-page chrome
   ========================================================================= */
.site-header{
  background: var(--ink-900);
  border-bottom: 1px solid var(--ink-700);
}

.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 28px;
  gap: 24px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width:0;
}

.brand__mark{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow:hidden;
  background: #fff;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px var(--ink-700);
}
.brand__mark img{ width:100%; height:100%; object-fit: cover; }

.brand__text{ min-width:0; }
.brand__name{
  font-family: var(--font-display);
  color:#fff;
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.brand__system{
  font-family: var(--font-board);
  color: var(--led-amber);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap: 4px;
}
.main-nav a{
  display:inline-block;
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--steel-light);
  border-radius: var(--radius);
  transition: color .15s ease, background .15s ease;
}
.main-nav a:hover{ color:#fff; background: var(--ink-700); }
.main-nav a.is-active{
  color:#fff;
  background: var(--rail-red);
}

.nav-toggle{ display:none; }

/* =========================================================================
   Hero — the platform indicator board
   ========================================================================= */
.hero{
  background:
    radial-gradient(1100px 420px at 15% -10%, rgba(200,34,28,0.18), transparent 60%),
    var(--ink-900);
  color: #fff;
  padding: 72px 0 56px;
  position: relative;
  overflow:hidden;
}

.hero::after{
  /* faint horizon rail line */
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background: linear-gradient(90deg, transparent, var(--steel-light) 20%, var(--steel-light) 80%, transparent);
  opacity:.35;
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-board);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--led-amber);
  border: 1px solid rgba(255,182,39,0.4);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero__eyebrow .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--led-green);
  box-shadow: 0 0 6px 1px var(--led-green);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items:center;
}

.hero h1{
  color:#fff;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
  margin-bottom: 18px;
}
.hero h1 em{
  font-style:normal;
  color: var(--led-amber);
}

.hero__lede{
  color: var(--steel-light);
  font-size: 16.5px;
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-display);
  font-size: 13.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor:pointer;
}
.btn-primary{
  background: var(--rail-red);
  color:#fff;
}
.btn-primary:hover{ background: var(--rail-red-dark); }

.btn-ghost{
  background: transparent;
  color:#fff;
  border-color: rgba(255,255,255,0.28);
}
.btn-ghost:hover{ border-color:#fff; }

/* --- mini indicator panel inside hero --- */
.indicator-panel{
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  padding: 22px 22px 8px;
}
.indicator-panel__head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-family: var(--font-board);
  font-size: 11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color: var(--steel-light);
  border-bottom: 1px dashed var(--ink-700);
  padding-bottom: 12px;
  margin-bottom: 6px;
}
.indicator-panel__head span.live{ color: var(--led-green); }

.indicator-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 13px 0;
  border-bottom: 1px solid var(--ink-700);
  font-family: var(--font-board);
}
.indicator-row:last-child{ border-bottom:none; }
.indicator-row__label{
  color: var(--steel-light);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.indicator-row__value{
  color: var(--led-amber);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* =========================================================================
   Section shell
   ========================================================================= */
.section{ padding: 64px 0; }
.section--muted{ background: var(--paper); }
.section--dark{ background: var(--ink-900); color:#fff; }

.section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 24px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.section__kicker{
  font-family: var(--font-board);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rail-red);
  margin-bottom: 8px;
}
.section__title{ font-size: 27px; }
.section__desc{
  color:#5B6570;
  max-width: 56ch;
  margin-top: 10px;
}

/* =========================================================================
   Departure / status board — the signature element
   ========================================================================= */
.board{
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.board__strip{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 20px;
  background: var(--ink-800);
  border-bottom: 1px solid var(--ink-700);
  font-family: var(--font-board);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-light);
}
.board__strip .dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--led-green);
  box-shadow: 0 0 6px 1px var(--led-green);
  animation: pulse 1.8s ease-in-out infinite;
}

.board table{
  width:100%;
  border-collapse: collapse;
  font-family: var(--font-board);
}
.board thead th{
  text-align:left;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steel-light);
  padding: 12px 20px;
  border-bottom: 1px solid var(--ink-700);
  font-weight: 400;
}
.board tbody td{
  padding: 15px 20px;
  border-bottom: 1px solid var(--ink-700);
  color: var(--led-amber);
  font-size: 14.5px;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.board tbody tr:last-child td{ border-bottom:none; }
.board tbody tr:hover{ background: rgba(255,255,255,0.03); }

.board td.col-report{ color:#fff; font-family: var(--font-body); letter-spacing:0; }
.board td.col-report small{
  display:block;
  color: var(--steel-light);
  font-family: var(--font-board);
  font-size: 11.5px;
  letter-spacing:0.06em;
  margin-top:3px;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.status-pill .dot{ width:6px; height:6px; border-radius:50%; }

.status-sent{ background: rgba(53,208,127,0.12); color: var(--led-green); border-color: rgba(53,208,127,0.35); }
.status-sent .dot{ background: var(--led-green); }

.status-pending{ background: rgba(255,182,39,0.12); color: var(--led-amber); border-color: rgba(255,182,39,0.35); }
.status-pending .dot{ background: var(--led-amber); }

.status-failed{ background: rgba(255,90,78,0.12); color: var(--led-red); border-color: rgba(255,90,78,0.35); }
.status-failed .dot{ background: var(--led-red); }

.board__footnote{
  padding: 12px 20px;
  font-size: 12px;
  color: var(--steel-light);
  border-top: 1px solid var(--ink-700);
}

/* =========================================================================
   Feature cards
   ========================================================================= */
.feature-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.feature-card{
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
}
.feature-card__index{
  font-family: var(--font-board);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--rail-red);
  margin-bottom: 14px;
}
.feature-card h3{
  font-size: 16px;
  margin-bottom: 8px;
}
.feature-card p{
  color:#5B6570;
  font-size: 14px;
  margin:0;
}

/* =========================================================================
   Process — how the system runs a job (real sequence, numbering earned)
   ========================================================================= */
.track-steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.track-steps::before{
  content:"";
  position:absolute;
  top: 19px; left: 6%; right: 6%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 16px);
}
.track-step{ position:relative; padding-right: 18px; }
.track-step__num{
  width: 38px; height:38px;
  border-radius:50%;
  background: var(--ink-900);
  color: var(--led-amber);
  font-family: var(--font-board);
  font-size: 14px;
  display:flex; align-items:center; justify-content:center;
  position:relative; z-index:1;
  margin-bottom: 16px;
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line);
}
.track-step h3{ font-size: 15px; margin-bottom: 6px; }
.track-step p{ color:#5B6570; font-size: 13.5px; margin:0; }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{
  background: var(--ink-900);
  color: var(--steel-light);
  padding: 40px 0 26px;
}
.site-footer__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-700);
  flex-wrap: wrap;
}
.site-footer__brand{
  display:flex; align-items:center; gap:12px;
}
.site-footer__brand img{
  width:34px; height:34px; border-radius:50%; background:#fff;
}
.site-footer__brand .name{
  font-family: var(--font-display);
  color:#fff;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.site-footer__brand .tagline{
  font-size: 12px;
  color: var(--steel-light);
  font-style: italic;
}
.site-footer__meta{
  font-family: var(--font-board);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 18px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 10px;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr; }
  .feature-grid{ grid-template-columns: repeat(2,1fr); }
  .track-steps{ grid-template-columns: repeat(2,1fr); gap: 24px; }
  .track-steps::before{ display:none; }
}

@media (max-width: 700px){
  .main-nav{ display:none; }
  .board thead th:nth-child(2),
  .board tbody td:nth-child(2){ display:none; }
}

@media (max-width: 560px){
  .feature-grid{ grid-template-columns: 1fr; }
  .site-header__bar{ flex-wrap: wrap; }
  .hero{ padding: 52px 0 44px; }
}