/* ═══════════════════════════════════════════════════════════════════════════
   TaktClock  —  Shared Design System  (Dark Industrial)
   Inspired by Firefly Aerospace: bold imagery, near-black bg, stark type
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --bg:        #04080f;
  --bg2:       #07101c;
  --bg3:       #0a1628;
  --card:      #0d1829;
  --card2:     #101e30;
  --brd:       rgba(255,255,255,.08);
  --brd2:      rgba(255,255,255,.04);

  --acc:       #0696D7;
  --acc-lit:   #22b4f0;
  --acc-dim:   rgba(6,150,215,.12);
  --acc-glow:  rgba(6,150,215,.28);

  --grn:       #22C55E;
  --grn-dim:   rgba(34,197,94,.12);
  --red:       #EF4444;
  --red-dim:   rgba(239,68,68,.12);
  --amb:       #F59E0B;
  --amb-dim:   rgba(245,158,11,.12);

  --t1:  #f0f4f8;
  --t2:  rgba(240,244,248,.70);
  --t3:  rgba(240,244,248,.45);
  --t4:  rgba(240,244,248,.25);

  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;

  --max:   1280px;
  --nav-h: 68px;
  --r:     6px;
  --r-lg:  12px;

  --shadow:    0 1px 3px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  --glow-acc:  0 0 40px rgba(6,150,215,.20);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:var(--bg); color:var(--t1); }
body { background:var(--bg); color:var(--t1); font-family:var(--sans);
       -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:hidden; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
button { font-family:var(--sans); cursor:pointer; }

/* ── LAYOUT ── */
.W     { width:100%; max-width:var(--max); margin:0 auto; padding:0 48px; }
.W--sm { max-width:860px; }
.W--md { max-width:1040px; }
.S     { padding:104px 0; }
.S--sm { padding:72px 0; }
.S--xs { padding:48px 0; }

/* ── TYPOGRAPHY ── */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em;
  color:var(--acc); margin-bottom:16px;
}
.eyebrow::before {
  content:''; display:inline-block; width:24px; height:2px; background:var(--acc);
}
h1.display { font-size:clamp(42px,5.5vw,76px); font-weight:800; line-height:1.04;
             letter-spacing:-.03em; color:var(--t1); }
h2.display { font-size:clamp(30px,3.8vw,52px); font-weight:800; line-height:1.06;
             letter-spacing:-.025em; color:var(--t1); }
h3.display { font-size:clamp(20px,2.2vw,28px); font-weight:700; line-height:1.2;
             letter-spacing:-.02em; color:var(--t1); }
.lead { font-size:clamp(15px,1.4vw,18px); color:var(--t2); line-height:1.8; }
.body-text { font-size:15px; color:var(--t2); line-height:1.9; }

/* section number */
.sec-num {
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--t4); text-transform:uppercase; margin-bottom:8px; display:block;
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 28px; border-radius:var(--r); border:none;
  cursor:pointer; font-family:var(--sans); font-size:14px; font-weight:600;
  white-space:nowrap; transition:all .18s; text-decoration:none; letter-spacing:.01em;
}
.btn--pri  { background:var(--acc); color:#fff; }
.btn--pri:hover { background:var(--acc-lit); transform:translateY(-2px);
                  box-shadow:0 6px 24px var(--acc-glow); }
.btn--ghost { background:transparent; color:var(--t1); border:1px solid var(--brd); }
.btn--ghost:hover { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06); }
.btn--outline-white { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.3); }
.btn--outline-white:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.6); }
.btn--lg { height:54px; padding:0 36px; font-size:15px; }
.btn--sm { height:36px; padding:0 16px; font-size:13px; }
.btn--full { width:100%; }
.btn--icon { gap:10px; }
.btn--icon svg { width:16px; height:16px; }

/* ── NAV ── */
header {
  position:sticky; top:0; z-index:400;
  background:rgba(4,8,15,.82);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--brd);
}
.nav-wrap { height:var(--nav-h); display:flex; align-items:center;
            justify-content:space-between; gap:24px; }
.nav-logo { font-size:17px; font-weight:800; color:var(--t1); letter-spacing:-.02em;
            display:flex; align-items:center; gap:10px; }
.nav-logo-dot { width:8px; height:8px; border-radius:50%; background:var(--acc);
                box-shadow:0 0 8px var(--acc-glow); }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-link { font-size:13px; font-weight:500; color:var(--t3); padding:7px 13px;
            border-radius:5px; transition:all .15s; text-decoration:none; display:inline-block; }
.nav-link:hover, .nav-link.active { color:var(--t1); background:rgba(255,255,255,.07); }
.nav-ctas { display:flex; gap:10px; align-items:center; }
.hamburger { display:none; width:40px; height:40px; border:1px solid var(--brd);
             border-radius:var(--r); background:none; color:var(--t1); cursor:pointer;
             font-size:18px; align-items:center; justify-content:center; }
.mobile-nav { display:none; flex-direction:column; gap:4px; padding:12px 20px 16px;
              border-bottom:1px solid var(--brd); background:rgba(4,8,15,.96); }
.mobile-nav a { height:44px; display:flex; align-items:center; padding:0 12px;
                border-radius:var(--r); font-size:14px; font-weight:500; color:var(--t2); }
.mobile-nav a:hover { background:rgba(255,255,255,.07); color:var(--t1); }
.mobile-nav.open { display:flex; }

/* ── CARDS ── */
.card {
  background:var(--card); border:1px solid var(--brd); border-radius:var(--r-lg);
  padding:32px; transition:border-color .2s, box-shadow .2s;
}
.card:hover { border-color:rgba(255,255,255,.15); box-shadow:var(--shadow); }
.card--glow:hover { box-shadow:var(--glow-acc); border-color:var(--acc-dim); }

/* ── PHOTO SECTION ── */
.photo-section {
  position:relative; overflow:hidden;
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.photo-section::after {
  content:''; position:absolute; inset:0; pointer-events:none;
}
.photo-overlay { position:relative; z-index:2; }

/* overlay variants */
.ov--dark       { background:linear-gradient(to right, rgba(4,8,15,.92) 45%, rgba(4,8,15,.55) 100%); }
.ov--dark::after{ content:''; position:absolute; inset:0;
                  background:rgba(4,8,15,.30); pointer-events:none; }
.ov--left       { background:linear-gradient(to right, rgba(4,8,15,.96) 40%, rgba(4,8,15,.4) 100%); }
.ov--right      { background:linear-gradient(to left,  rgba(4,8,15,.96) 40%, rgba(4,8,15,.4) 100%); }
.ov--bottom     { background:linear-gradient(to top, rgba(4,8,15,1) 0%, rgba(4,8,15,.3) 60%, transparent 100%); }
.ov--center     { background:linear-gradient(rgba(4,8,15,.75), rgba(4,8,15,.75)); }

/* ── DIVIDERS ── */
.rule { border:none; border-top:1px solid var(--brd); margin:0; }
.rule--acc { border-color:var(--acc); width:48px; border-width:2px; margin:24px 0; }

/* ── BADGE / PILL ── */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px;
         border-radius:99px; font-size:12px; font-weight:600; }
.badge--acc  { background:var(--acc-dim); color:var(--acc); border:1px solid rgba(6,150,215,.25); }
.badge--grn  { background:var(--grn-dim); color:var(--grn); border:1px solid rgba(34,197,94,.2); }
.badge--red  { background:var(--red-dim); color:var(--red); border:1px solid rgba(239,68,68,.2); }
.badge--amb  { background:var(--amb-dim); color:var(--amb); border:1px solid rgba(245,158,11,.2); }
.badge--dot::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor;
                      animation:pulse-dot 2s infinite; }

/* ── STATUS DOT ── */
.live-dot { display:inline-flex; align-items:center; gap:7px;
            font-size:12px; font-weight:700; color:var(--grn); text-transform:uppercase; letter-spacing:.08em; }
.live-dot::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--grn);
                    animation:pulse-dot 1.8s infinite; box-shadow:0 0 6px var(--grn); }

/* ── STATS ── */
.stat-val { font-size:clamp(40px,5vw,72px); font-weight:800; letter-spacing:-.04em;
            color:var(--t1); line-height:1; }
.stat-unit { font-size:.45em; font-weight:600; color:var(--acc); vertical-align:super; }
.stat-lbl  { font-size:14px; color:var(--t3); margin-top:8px; text-transform:uppercase;
             letter-spacing:.10em; font-weight:600; }

/* ── FOOTER ── */
footer { background:var(--bg2); border-top:1px solid var(--brd); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding:72px 0 48px; }
.footer-brand p { font-size:14px; color:var(--t3); line-height:1.8; margin-top:14px; max-width:280px; }
.footer-col h4 { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
                 color:var(--t4); margin-bottom:16px; }
.footer-col a { display:block; font-size:14px; color:var(--t3); padding:4px 0;
                transition:color .15s; }
.footer-col a:hover { color:var(--t1); }
.footer-bottom { border-top:1px solid var(--brd); padding:24px 0;
                 display:flex; align-items:center; justify-content:space-between;
                 font-size:13px; color:var(--t4); flex-wrap:wrap; gap:12px; }

/* ── FORM ELEMENTS ── */
.f-input {
  width:100%; height:44px; padding:0 14px;
  background:rgba(255,255,255,.05); border:1px solid var(--brd);
  border-radius:var(--r); color:var(--t1); font-family:var(--sans); font-size:14px;
  outline:none; transition:border-color .15s;
}
.f-input:focus { border-color:var(--acc); background:rgba(6,150,215,.06); }
.f-input::placeholder { color:var(--t4); }
.f-label { font-size:11px; font-weight:700; text-transform:uppercase;
           letter-spacing:.08em; color:var(--t3); margin-bottom:6px; display:block; }
textarea.f-input { height:auto; padding:12px 14px; resize:vertical; }
select.f-input { appearance:none; cursor:pointer; }

/* ── MODAL ── */
.modal-ov { display:none; position:fixed; inset:0;
            background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
            z-index:600; align-items:center; justify-content:center; padding:20px; }
.modal-ov.open { display:flex; }
.modal-box { background:var(--card); border:1px solid var(--brd); border-radius:var(--r-lg);
             padding:40px; width:100%; max-width:520px; position:relative; box-shadow:var(--shadow-lg); }
.modal-close { position:absolute; top:14px; right:14px; background:none; border:none;
               font-size:22px; color:var(--t3); cursor:pointer; width:34px; height:34px;
               display:flex; align-items:center; justify-content:center; border-radius:var(--r); }
.modal-close:hover { background:rgba(255,255,255,.08); color:var(--t1); }
.modal-title { font-size:22px; font-weight:800; color:var(--t1); margin-bottom:6px; }
.modal-sub   { font-size:14px; color:var(--t2); margin-bottom:28px; line-height:1.7; }

/* ── DASH CHROME (app mockup window) ── */
.dash-chrome {
  background:#050d1a; border:1px solid rgba(255,255,255,.10);
  border-radius:10px; overflow:hidden; box-shadow:var(--shadow-lg);
}
.dash-titlebar {
  background:#07111f; height:36px; display:flex; align-items:center; gap:7px;
  padding:0 14px; border-bottom:1px solid rgba(255,255,255,.06);
}
.dot { width:11px; height:11px; border-radius:50%; }
.dot-r { background:#FF5F57; }
.dot-y { background:#FEBC2E; }
.dot-g { background:#28C840; }
.dash-title-txt { margin-left:8px; font-family:var(--mono); font-size:11px;
                  color:rgba(255,255,255,.35); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-strip { display:grid; grid-template-columns:repeat(4,1fr);
             border-bottom:1px solid rgba(255,255,255,.06); }
.kpi-cell { padding:12px 14px; border-right:1px solid rgba(255,255,255,.06); }
.kpi-cell:last-child { border-right:none; }
.kpi-lbl { font-family:var(--mono); font-size:9px; color:#475569;
           text-transform:uppercase; letter-spacing:.08em; margin-bottom:4px; }
.kpi-val { font-family:var(--mono); font-size:18px; font-weight:700; color:#F1F5F9; }
.kpi-val--grn { color:#22C55E; }
.kpi-val--amb { color:#F59E0B; }
.kpi-val--red { color:#EF4444; }

/* ── DATA TABLE ── */
.dtbl { width:100%; border-collapse:collapse; font-family:var(--mono); font-size:11px; }
.dtbl th { background:#07111f; padding:8px 12px; text-align:left;
           color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
           border-bottom:1px solid rgba(255,255,255,.06); white-space:nowrap; }
.dtbl td { padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.04);
           color:#94A3B8; white-space:nowrap; }
.dtbl tr:hover td { background:rgba(255,255,255,.02); }
.dtbl tr:last-child td { border-bottom:none; }
.td-acc { color:#60A5FA !important; font-weight:600; }
.td-dim { color:#475569 !important; }
.badge-grn  { background:rgba(34,197,94,.12);  color:#22C55E; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:700; }
.badge-red  { background:rgba(239,68,68,.12);  color:#EF4444; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:700; }
.badge-amb  { background:rgba(245,158,11,.12); color:#F59E0B; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:700; }
.badge-blu  { background:rgba(96,165,250,.12); color:#60A5FA; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:700; }
.badge-idle { background:rgba(71,85,105,.18);  color:#64748B; padding:2px 8px; border-radius:99px; font-size:10px; font-weight:700; }

/* ── TAB SWITCHER ── */
.tab-bar { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:12px; }
.tab-btn {
  padding:6px 14px; border-radius:5px; border:none; cursor:pointer;
  font-size:12px; font-weight:600; color:rgba(255,255,255,.45);
  background:rgba(255,255,255,.05); transition:all .15s;
}
.tab-btn:hover  { color:rgba(255,255,255,.7); background:rgba(255,255,255,.09); }
.tab-btn.active { background:var(--acc-dim); color:var(--acc); border:1px solid rgba(6,150,215,.25); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── TRUST STRIP ── */
.trust-strip {
  border-top:1px solid var(--brd); border-bottom:1px solid var(--brd);
  background:var(--bg2); padding:20px 0; overflow:hidden;
}
.trust-inner { display:flex; align-items:center; gap:24px;
               font-size:13px; color:var(--t3); flex-wrap:wrap; justify-content:center; }
.trust-sep { color:var(--t4); }

/* ── ANIMATIONS ── */
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes shimmer { 0%{background-position:200% center}100%{background-position:-200% center} }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media (max-width:1024px) {
  .W { padding:0 28px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .W { padding:0 20px; }
  .S { padding:72px 0; }
  .nav-links, .nav-ctas .btn--ghost { display:none; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr; gap:32px; padding:48px 0 32px; }
  .footer-bottom { flex-direction:column; text-align:center; }
}
@media (max-width:500px) {
  .W { padding:0 16px; }
  .S { padding:56px 0; }
}