/* =====================================================================
   SCADA-MES.com — Aplixcom Smart Manufacturing Platform
   Design system ported from aplixcom.com (warm-red + navy · glass · Manrope)
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --primary: #C5283D;
  --accent: #C5283D;
  --accent-dark: #A41E2F;
  --accent-deep: #8E1A2A;
  --foreground: #172A4A;
  --ink: #1E3358;
  --ink-deep: #142440;
  --background: #F6F4EE;
  --paper: #FFFFFF;
  --mist: #EBF1F8;
  --secondary: #F1ECE3;
  --muted: #64748B;
  --muted-foreground: #475569;
  --border: #E2DCD0;
  --radius: 0.5rem;

  /* module accent hints */
  --c-emerald:#10B981; --c-orange:#F97316; --c-sky:#0EA5E9; --c-amber:#F59E0B;
  --c-green:#22C55E; --c-red:#EF4444; --c-blue:#3B82F6; --c-slate:#64748B;
  --c-purple:#A855F7; --c-teal:#0D9488; --c-indigo:#6366F1;
}

* { border-color: var(--border); }

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--foreground);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(245, 207, 167, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 100% 0%, rgba(190, 215, 235, 0.42) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(232, 200, 210, 0.30) 0%, transparent 60%),
    linear-gradient(180deg, #F8F5EE 0%, #F1F2F0 50%, #EEF2F6 100%);
  min-height: 100vh;
  margin: 0;
}

section[id] { scroll-margin-top: 88px; }
@media (min-width:1024px){ section[id]{ scroll-margin-top: 128px; } }

h1,h2,h3,h4,h5,h6,.display {
  font-family: 'Manrope','Inter',sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0;
}
.mono,code,pre { font-family:'JetBrains Mono','IBM Plex Mono',monospace; font-feature-settings:'zero','ss01'; }

::selection { background: var(--accent); color:#fff; }

a { text-decoration: none; color: inherit; }

/* ---------- container ---------- */
.container { width:100%; margin:0 auto; padding-left:1.25rem; padding-right:1.25rem; }
@media (min-width:640px){ .container{ padding-left:2rem; padding-right:2rem; } }
@media (min-width:1024px){ .container{ padding-left:2.5rem; padding-right:2.5rem; max-width:1440px; } }

/* ---------- glass (solid-frosted; no backdrop-filter for paint performance) ---------- */
.glass {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 1px 2px rgba(31,41,55,0.04), 0 4px 16px rgba(31,41,55,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
.glass-strong {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 2px 4px rgba(31,41,55,0.05), 0 8px 28px rgba(31,41,55,0.08), inset 0 1px 0 rgba(255,255,255,0.85);
}
.glass-soft {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 1px 2px rgba(31,41,55,0.03), 0 2px 12px rgba(31,41,55,0.05);
}

/* dark navy blocks */
.bg-deep-slate { background: linear-gradient(135deg,#142440 0%,#1E3358 45%,#142440 100%); color:#F8FAFC; }
.bg-deep-slate-warm { background: linear-gradient(135deg,#1A2D52 0%,#243A6E 50%,#16264A 100%); color:#F8FAFC; }
.bg-mist { background: linear-gradient(180deg, rgba(239,243,248,0.65) 0%, rgba(247,244,238,0.65) 100%); }

/* ---------- typography utilities ---------- */
.display-xl { font-size: clamp(2.75rem,7vw,6rem); line-height:0.95; letter-spacing:-0.045em; font-weight:800; }
.display-lg { font-size: clamp(2.25rem,5.5vw,4.25rem); line-height:0.98; letter-spacing:-0.04em; font-weight:800; }
.display-md { font-size: clamp(1.85rem,4vw,3rem); line-height:1.05; letter-spacing:-0.03em; font-weight:700; }

.eyebrow {
  color: var(--accent);
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem; letter-spacing:0.25em; text-transform:uppercase; font-weight:600;
}
.eyebrow-light { color: rgba(248,250,252,0.6); }

.stat-number {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size: clamp(2.6rem,6vw,4.4rem); letter-spacing:-0.06em; line-height:0.85;
}

/* dot grids */
.dot-grid { background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1px, transparent 1px); background-size:28px 28px; }
.dot-grid-light { background-image: radial-gradient(circle, rgba(31,41,55,0.07) 1px, transparent 1px); background-size:28px 28px; }

.section-divider { height:1px; background: linear-gradient(90deg, transparent 0%, var(--border) 25%, var(--border) 75%, transparent 100%); }

/* eyebrow with leading rule */
.rule { display:inline-flex; align-items:center; gap:0.75rem; }
.rule::before { content:''; height:1px; width:2.5rem; background:var(--accent); display:inline-block; }

/* ---------- buttons ---------- */
.btn-primary, .btn-secondary, .btn-accent, .btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:1rem 1.6rem; font-weight:600; font-size:0.95rem; letter-spacing:-0.01em;
  border-radius:0.5rem; border:1px solid transparent; cursor:pointer; transition:all .25s ease;
}
.btn-primary { background: linear-gradient(135deg,#142440 0%,#1E3358 100%); color:#F8FAFC; box-shadow:0 2px 4px rgba(20,36,64,.18),0 8px 24px rgba(20,36,64,.2); }
.btn-primary:hover { background: linear-gradient(135deg,var(--accent) 0%,#A41E2F 100%); box-shadow:0 4px 12px rgba(197,40,61,.3),0 8px 24px rgba(197,40,61,.25); transform:translateY(-1px); }
.btn-accent { background: linear-gradient(135deg,var(--accent) 0%,#A41E2F 100%); color:#fff; box-shadow:0 2px 4px rgba(197,40,61,.18),0 8px 24px rgba(197,40,61,.2); }
.btn-accent:hover { background: linear-gradient(135deg,#A41E2F 0%,var(--accent) 100%); box-shadow:0 4px 12px rgba(197,40,61,.32),0 12px 32px rgba(197,40,61,.28); transform:translateY(-1px); }
.btn-secondary { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); color:var(--ink); border:1px solid rgba(31,41,55,0.18); }
.btn-secondary:hover { background: rgba(255,255,255,0.97); border-color:var(--ink); box-shadow:0 4px 12px rgba(31,41,55,.1); transform:translateY(-1px); }
.btn-ghost { background: transparent; color:#F8FAFC; border:1px solid rgba(248,250,252,0.4); }
.btn-ghost:hover { background:#F8FAFC; color:var(--ink); }

/* ---------- cell (glass grid block) ---------- */
.cell {
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 1px 2px rgba(31,41,55,0.03), 0 2px 10px rgba(31,41,55,0.04);
  transition: all .3s ease;
}
.cell:hover {
  background: rgba(255,255,255,0.95);
  border-color: rgba(197,40,61,0.30);
  box-shadow: 0 8px 28px rgba(31,41,55,0.09);
  transform: translateY(-2px);
}

/* module code badge */
.code-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:38px; padding:0 0.5rem;
  background: var(--ink); color:#fff;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.8rem; letter-spacing:0.06em;
  border-radius:0.3rem;
}

/* left tint accent on cards */
.tint-emerald{box-shadow:inset 3px 0 0 var(--c-emerald);} .tint-orange{box-shadow:inset 3px 0 0 var(--c-orange);}
.tint-sky{box-shadow:inset 3px 0 0 var(--c-sky);} .tint-amber{box-shadow:inset 3px 0 0 var(--c-amber);}
.tint-green{box-shadow:inset 3px 0 0 var(--c-green);} .tint-red{box-shadow:inset 3px 0 0 var(--c-red);}
.tint-blue{box-shadow:inset 3px 0 0 var(--c-blue);} .tint-slate{box-shadow:inset 3px 0 0 var(--c-slate);}
.tint-purple{box-shadow:inset 3px 0 0 var(--c-purple);} .tint-teal{box-shadow:inset 3px 0 0 var(--c-teal);}
.tint-indigo{box-shadow:inset 3px 0 0 var(--c-indigo);}

/* ---------- marquee ---------- */
@keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.marquee-track { display:flex; width:max-content; animation: marquee 40s linear infinite; }
.marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* ---------- reveal on scroll ---------- */
.reveal { opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;} .marquee-track{animation:none;} }

/* ---------- header ---------- */
.site-header { position:fixed; top:0; left:0; right:0; z-index:50; transition: all .3s ease; }
.header-top { background: linear-gradient(135deg,#142440 0%,#1E3358 45%,#142440 100%); }
.header-main { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,0.4); }
.site-header.scrolled .header-main {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 2px 4px rgba(31,41,55,0.05), 0 8px 28px rgba(31,41,55,0.07);
}
.nav-link { color: var(--foreground); font-size:0.82rem; font-weight:500; letter-spacing:-0.01em; transition: color .2s; }
.nav-link:hover { color: var(--accent); }

/* logo lockup — SCADA·MES */
.logo-mark { display:inline-flex; align-items:center; font-family:'Manrope',sans-serif; font-weight:800; letter-spacing:-0.04em; }
.logo-scada { color: var(--foreground); }
.logo-dot { color: var(--accent); }
.logo-mes { background: var(--accent); color:#fff; padding:0.04em 0.32em; border-radius:0.22em; }

/* lang switch */
.lang-btn { font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:600; letter-spacing:0.1em; padding:0.28rem 0.5rem; border-radius:0.3rem; color: rgba(248,250,252,0.55); transition: all .2s; }
.lang-btn.active { color:#fff; background: rgba(255,255,255,0.12); }
.lang-btn:hover { color:#fff; }
.lang-btn-d { color: var(--muted); }
.lang-btn-d.active { color:#fff; background: var(--ink); }

/* ---------- all-in-one wheel ---------- */
.wheel { position:relative; width:100%; max-width:560px; aspect-ratio:1; margin:0 auto; }
.wheel-core {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:32%; aspect-ratio:1; border-radius:50%;
  background: linear-gradient(135deg,#142440 0%,#1E3358 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow: 0 12px 40px rgba(20,36,64,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.1); z-index:3;
}
.wheel-ring { position:absolute; inset:11%; border:1px dashed rgba(23,42,74,0.18); border-radius:50%; }
.wheel-ring.r2 { inset:1%; border-color: rgba(23,42,74,0.10); }
.wheel-chip {
  position:absolute; transform: translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.3rem; width:96px; text-align:center; z-index:4;
}
.wheel-chip .ic {
  width:46px; height:46px; border-radius:50%;
  background: rgba(255,255,255,0.92); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--accent);
  box-shadow: 0 4px 14px rgba(31,41,55,0.10); transition: all .3s ease;
}
.wheel-chip:hover .ic { transform: translateY(-3px) scale(1.06); border-color: var(--accent); box-shadow:0 8px 22px rgba(197,40,61,0.22); }
.wheel-chip .lbl { font-size:0.62rem; line-height:1.15; font-weight:600; color:var(--muted-foreground); letter-spacing:-0.01em; }
@media (max-width:560px){ .wheel-chip{width:74px;} .wheel-chip .ic{width:38px;height:38px;} .wheel-chip .lbl{font-size:0.54rem;} }

/* ---------- mockup window (product UI recreation) ---------- */
.mock {
  border-radius:0.6rem; overflow:hidden;
  background:#fff; border:1px solid rgba(23,42,74,0.10);
  box-shadow: 0 2px 4px rgba(31,41,55,0.05), 0 20px 50px rgba(31,41,55,0.14);
}
.mock-bar { display:flex; align-items:center; gap:0.5rem; padding:0.6rem 0.85rem; background: #0F1B33; color:#cbd5e1; }
.mock-bar .dot { width:10px; height:10px; border-radius:50%; }
.mock-title { font-family:'JetBrains Mono',monospace; font-size:0.7rem; letter-spacing:0.04em; color:#94a3b8; margin-left:0.4rem; }
.mock-body { padding:1rem 1.1rem 1.2rem; }

/* data table */
.dtable { width:100%; border-collapse:collapse; font-size:0.82rem; }
.dtable th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:0.5rem 0.7rem; border-bottom:1px solid var(--border); }
.dtable td { padding:0.6rem 0.7rem; border-bottom:1px solid #EEF1F5; color:var(--foreground); }
.dtable tr.win td { background: rgba(197,40,61,0.05); font-weight:600; }
.dtable tr.win td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.num { font-family:'JetBrains Mono',monospace; font-variant-numeric: tabular-nums; }

/* badge pills */
.pill { display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.7rem; border-radius:999px; font-size:0.72rem; font-weight:600; }
.pill-mono { font-family:'JetBrains Mono',monospace; font-size:0.66rem; letter-spacing:0.06em; padding:0.28rem 0.6rem; border-radius:0.3rem; border:1px solid var(--border); background:#fff; color:var(--muted-foreground); }

/* progress bar for results */
.bar-track { height:10px; border-radius:999px; background: rgba(23,42,74,0.08); overflow:hidden; }
.bar-fill { height:100%; border-radius:999px; background: linear-gradient(90deg, var(--accent) 0%, #E36B7B 100%); width:0; transition: width 1.2s cubic-bezier(.22,1,.36,1); }

/* protocol chip */
.proto { font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:500; padding:0.4rem 0.7rem; border-radius:0.35rem; background:#fff; border:1px solid var(--border); color:var(--foreground); }
.proto.on { background: var(--ink); color:#fff; border-color:var(--ink); }

/* check list */
.chk { display:flex; gap:0.6rem; align-items:flex-start; }
.chk svg { flex:none; margin-top:2px; }

/* number ticker */
.tick { font-variant-numeric: tabular-nums; }

/* footer */
.footer { background: linear-gradient(135deg,#142440 0%,#1E3358 45%,#142440 100%); color:#F8FAFC; }

/* hide scrollbars on marquees */
.no-sb::-webkit-scrollbar{display:none;} .no-sb{scrollbar-width:none;}

/* ---------- cockpit KPI tiles (dark) ---------- */
.kpi { background:#0F1B33; border:1px solid rgba(255,255,255,0.08); border-radius:0.5rem; padding:0.85rem 0.95rem; }
.kpi .v { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.55rem; line-height:1; color:#fff; font-variant-numeric:tabular-nums; }
.kpi .l { font-family:'JetBrains Mono',monospace; font-size:0.6rem; text-transform:uppercase; letter-spacing:0.08em; color:#93a3b8; margin-top:0.4rem; }
.kpi .v.ok { color:#34d399; } .kpi .v.warn { color:#fbbf24; } .kpi .v.bad { color:#f87171; }

/* ---------- Andon board ---------- */
.andon { display:grid; grid-template-columns:repeat(4,1fr); gap:0.4rem; }
.andon .st { border-radius:0.4rem; padding:0.5rem 0.55rem; color:#fff; line-height:1.1; }
.andon .st .c { font-family:'JetBrains Mono',monospace; font-size:0.66rem; font-weight:600; opacity:0.95; }
.andon .st .s { font-size:0.6rem; opacity:0.9; margin-top:0.15rem; }
.andon .st .o { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.05rem; margin-top:0.2rem; }
.a-run { background:#16a34a; } .a-warn { background:#f59e0b; } .a-stop { background:#dc2626; } .a-idle { background:#64748b; } .a-set { background:#0ea5e9; }

/* ---------- heatmap (load per station × time) ---------- */
.heat { display:grid; gap:3px; }
.heat .row { display:grid; grid-template-columns:84px repeat(10,1fr); gap:3px; align-items:center; }
.heat .rl { font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--muted-foreground); white-space:nowrap; }
.heat .cl { height:16px; border-radius:2px; }
.h0 { background:#EEF1F5; } .h1 { background:#bbf7d0; } .h2 { background:#4ade80; } .h3 { background:#facc15; } .h4 { background:#f87171; }
.heat-legend { display:flex; align-items:center; gap:0.4rem; font-size:0.6rem; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.heat-legend i { width:14px; height:10px; border-radius:2px; display:inline-block; }

/* ---------- APS scheme chip ---------- */
.scheme { font-family:'JetBrains Mono',monospace; font-size:0.66rem; font-weight:500; padding:0.38rem 0.62rem; border-radius:0.35rem; background:#fff; border:1px solid var(--border); color:var(--foreground); white-space:nowrap; }
.scheme.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.param { font-family:'JetBrains Mono',monospace; font-size:0.62rem; color:var(--muted-foreground); }
.param b { color:var(--foreground); font-weight:600; }

/* hex motif accent (hero) */
.hex-field { position:absolute; inset:0; opacity:0.5; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 0L56 16v34L28 66 0 50V16z' fill='none' stroke='%23172A4A' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
}