/* ==========================================================================
   Zonate Technologies — shared stylesheet
   Palette: slate navy / steel blue / signal orange
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,500;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --navy-950:#0f1b2c;
  --navy-900:#152437;
  --navy-800:#1b2f47;
  --steel-600:#3e5c76;
  --steel-400:#7391a8;
  --steel-200:#c4d3de;
  --steel-100:#e4ebf0;
  --paper:#f6f4ef;
  --paper-white:#ffffff;
  --orange-600:#d9701e;
  --orange-500:#e8853e;
  --orange-100:#fbe6d3;
  --ink:#182634;
  --ink-soft:#4d5c6b;
  --line:#dbe2e7;

  --font-display:'Source Serif 4', Georgia, serif;
  --font-body:'Inter', -apple-system, Segoe UI, sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius:6px;
  --shadow-card:0 1px 2px rgba(15,27,44,.06), 0 8px 24px -12px rgba(15,27,44,.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .5em; color:var(--navy-950); }
p{ margin:0 0 1em; color:var(--ink-soft); }
.container{ max-width:1120px; margin:0 auto; padding:0 24px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-600); font-weight:500; margin-bottom:14px;
}
.eyebrow::before{ content:''; width:18px; height:1px; background:var(--orange-500); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:var(--radius); text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:.15s ease;
}
.btn-primary{ background:var(--orange-500); color:#fff; }
.btn-primary:hover{ background:var(--orange-600); }
.btn-ghost{ background:transparent; color:var(--paper); border-color:rgba(255,255,255,.35); }
.btn-ghost:hover{ border-color:#fff; }
.btn-outline{ background:transparent; color:var(--navy-900); border-color:var(--line); }
.btn-outline:hover{ border-color:var(--steel-600); }

/* ---------- Top utility bar ---------- */
.top-bar{ background:var(--navy-950); border-bottom:1px solid rgba(255,255,255,.08); font-family:var(--font-mono); font-size:12.5px; }
.top-bar .container{ display:flex; justify-content:space-between; align-items:center; padding:9px 24px; }
.top-bar .contact-info{ display:flex; gap:22px; color:var(--steel-200); }
.top-bar .contact-info a{ color:var(--steel-200); text-decoration:none; }
.top-bar .contact-info a:hover{ color:#fff; }
.top-bar .top-right{ display:flex; align-items:center; gap:16px; }
.top-bar .social{ display:flex; gap:12px; }
.top-bar .social a{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; color:var(--steel-200); text-decoration:none; font-size:11px;
}
.top-bar .social a:hover{ border-color:var(--orange-500); color:#fff; }
.top-bar .btn-login{
  background:var(--orange-500); color:#fff; padding:6px 16px; border-radius:4px;
  text-decoration:none; font-weight:600; letter-spacing:.02em;
}
.top-bar .btn-login:hover{ background:var(--orange-600); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--paper-white); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark{
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(135deg, var(--steel-600), var(--orange-500));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; color:#fff; font-size:15px;
}
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--navy-950); letter-spacing:.01em; }
.brand-name span{ color:var(--orange-500); }

.brand-logo{ height:46px; width:auto; }
.footer-logo{
  height:52px; width:auto; background:#fff; border-radius:8px; padding:5px 12px; margin-bottom:14px;
}
.nav-links{ display:flex; gap:30px; list-style:none; margin:0; padding:0; }
.nav-links > li{ position:relative; }
.nav-links a{
  color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:600;
  padding:8px 0; border-bottom:2px solid transparent; transition:.15s;
  display:flex; align-items:center; gap:5px;
}
.nav-links a:hover, .nav-links a.active{ color:var(--orange-600); }
.nav-links .caret{ font-size:10px; opacity:.6; }

.dropdown{
  position:absolute; top:100%; left:-16px; min-width:260px;
  background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow-card);
  padding:10px; margin-top:10px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:.15s ease;
}
.nav-links > li:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{
  display:block; padding:9px 12px; border-radius:6px; font-size:13.5px; font-weight:600;
  color:var(--ink-soft); letter-spacing:.02em; text-transform:uppercase; font-size:12px;
  border-bottom:none;
}
.dropdown a:hover{ background:var(--steel-100); color:var(--navy-950); }

.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; }

@media (max-width:840px){
  .top-bar .contact-info{ display:none; }
  .nav-links{ display:none; }
  .nav-toggle{ display:block; background:none; border:1px solid var(--line); color:var(--ink); padding:8px 12px; border-radius:6px; }
}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(232,133,62,.16), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color:#fff; padding:88px 0 96px; position:relative; overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.hero h1{ color:#fff; font-size:46px; letter-spacing:-.01em; }
.hero h1 em{ font-style:normal; color:var(--orange-500); }
.hero p.lead{ color:var(--steel-200); font-size:17.5px; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin-top:28px; }

.seal{
  width:100%; aspect-ratio:1/1; max-width:320px; margin:0 auto;
  border:1.5px solid rgba(255,255,255,.18); border-radius:50%;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.seal::before{
  content:''; position:absolute; inset:14px; border:1px dashed rgba(232,133,62,.55); border-radius:50%;
}
.seal-inner{ text-align:center; padding:0 20px; }
.seal-inner .num{ font-family:var(--font-display); font-size:40px; color:var(--orange-500); font-weight:700; }
.seal-inner .cap{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--steel-200); margin-top:6px; }

.stat-strip{ display:flex; gap:0; margin-top:56px; border-top:1px solid rgba(255,255,255,.12); padding-top:28px; }
.stat{ flex:1; padding-right:24px; }
.stat .n{ font-family:var(--font-display); font-size:26px; color:#fff; }
.stat .l{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--steel-400); margin-top:4px; }

/* ---------- Sections ---------- */
.section{ padding:88px 0; }
.section-alt{ background:var(--paper-white); }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:32px; }

/* Service cards */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.card{
  background:var(--paper-white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-card);
}
.card .idx{ font-family:var(--font-mono); font-size:12px; color:var(--steel-400); letter-spacing:.06em; }
.card h3{ font-size:19px; margin-top:8px; }
.card p{ font-size:14.5px; margin-bottom:14px; }
.card a.more{ font-size:13.5px; font-weight:600; color:var(--orange-600); text-decoration:none; }

/* Process strip */
.process{ display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.process-step{ flex:1; padding:24px 22px; border-right:1px solid var(--line); position:relative; }
.process-step:last-child{ border-right:none; }
.process-step .tag{ font-family:var(--font-mono); font-size:11px; color:var(--orange-600); letter-spacing:.06em; text-transform:uppercase; }
.process-step h4{ font-size:15.5px; margin:8px 0 4px; }
.process-step p{ font-size:13.5px; margin:0; }

/* Tracker teaser */
.tracker-panel{
  background:var(--navy-950); color:#fff; border-radius:10px; padding:44px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.tracker-panel h2{ color:#fff; font-size:28px; }
.tracker-panel p{ color:var(--steel-200); }
.status-mock{ background:var(--navy-900); border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:20px; }
.status-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:13.5px; }
.status-row:last-child{ border-bottom:none; }
.status-pill{ font-family:var(--font-mono); font-size:11px; padding:3px 10px; border-radius:999px; letter-spacing:.03em; }
.status-pill.filed{ background:var(--steel-600); color:#fff; }
.status-pill.examined{ background:var(--orange-100); color:var(--orange-600); }
.status-pill.registered{ background:#25543c; color:#8fe3ae; }

/* CTA band */
.cta-band{ background:var(--steel-600); color:#fff; padding:56px 0; text-align:center; }
.cta-band h2{ color:#fff; }
.cta-band p{ color:var(--steel-100); }

/* Footer */
.site-footer{ background:var(--navy-950); color:var(--steel-200); padding:56px 0 28px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-grid h5{ color:#fff; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a{ color:var(--steel-200); text-decoration:none; font-size:14px; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:22px; font-size:13px; color:var(--steel-400); }

/* Page header (inner pages) */
.page-hero{ background:var(--navy-950); color:#fff; padding:64px 0 56px; }
.page-hero h1{ color:#fff; font-size:36px; }
.page-hero p{ color:var(--steel-200); max-width:60ch; }
.breadcrumb{ font-family:var(--font-mono); font-size:12px; color:var(--steel-400); margin-bottom:16px; }
.breadcrumb a{ color:var(--steel-400); text-decoration:none; }

/* Forms */
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--navy-900); }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:6px;
  font-family:var(--font-body); font-size:14.5px; background:#fff; color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  outline:2px solid var(--orange-500); outline-offset:1px; border-color:transparent;
}

/* Utility */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.badge{ font-family:var(--font-mono); font-size:11.5px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); }

@media (max-width:900px){
  .hero-grid, .two-col, .tracker-panel{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .process{ flex-direction:column; }
  .process-step{ border-right:none; border-bottom:1px solid var(--line); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero h1{ font-size:34px; }
}

/* ---------- Admin panel ---------- */
.admin-shell{ display:flex; min-height:100vh; background:var(--paper); }
.admin-sidebar{
  width:230px; flex-shrink:0; background:var(--navy-950); color:#fff;
  padding:24px 18px; display:flex; flex-direction:column;
}
.admin-sidebar img{ height:36px; margin-bottom:26px; background:#fff; border-radius:6px; padding:4px 8px; }
.admin-nav{ list-style:none; margin:0; padding:0; flex:1; }
.admin-nav a{
  display:block; padding:10px 12px; border-radius:6px; color:var(--steel-200);
  text-decoration:none; font-size:14px; font-weight:600; margin-bottom:4px;
}
.admin-nav a:hover{ background:rgba(255,255,255,.06); color:#fff; }
.admin-nav a.active{ background:var(--orange-500); color:#fff; }
.admin-user{ border-top:1px solid rgba(255,255,255,.12); padding-top:16px; font-size:13px; color:var(--steel-200); }
.admin-user a{ color:var(--orange-500); text-decoration:none; font-weight:600; }

.admin-main{ flex:1; padding:32px 36px; max-width:1200px; }
.admin-topline{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; }
.admin-topline h1{ font-size:24px; margin:0; }

.stat-cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:16px; margin-bottom:32px; }
.stat-card{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px; }
.stat-card .n{ font-family:var(--font-display); font-size:26px; color:var(--navy-950); }
.stat-card .l{ font-size:12.5px; color:var(--ink-soft); margin-top:4px; }

.admin-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.admin-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); background:var(--steel-100); padding:11px 14px; }
.admin-table td{ padding:12px 14px; font-size:14px; border-top:1px solid var(--line); }
.admin-table tr:hover td{ background:#fafbfc; }
.status-chip{ font-family:var(--font-mono); font-size:11px; padding:3px 10px; border-radius:999px; display:inline-block; }
.status-chip.st-filed, .status-chip.st-pending, .status-chip.st-documents-pending{ background:var(--steel-100); color:var(--steel-600); }
.status-chip.st-examined, .status-chip.st-ekyc-pending{ background:var(--orange-100); color:var(--orange-600); }
.status-chip.st-registered, .status-chip.st-issued, .status-chip.st-delivered, .status-chip.st-renewed{ background:#e3f3e8; color:#1e7a44; }
.status-chip.st-objected, .status-chip.st-opposed{ background:#fdecea; color:#b3261e; }

.log-entry{ border-left:2px solid var(--orange-500); padding:8px 0 8px 14px; margin-bottom:10px; }
.log-entry .d{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); }
.log-entry .t{ font-size:13.5px; margin-top:2px; }

@media (max-width:800px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; flex-direction:row; align-items:center; padding:14px; }
  .admin-nav{ display:flex; gap:6px; }
  .admin-user{ border:none; padding:0; }
}