/* Helix theme: deep navy, red and cyan glows, glass HUD panels.
   Loaded last on every page, so it only overrides; remove the link to revert. */

:root {
  --bg: #050912;
  --navy: #0a1222;
  --accent: #dc2626;
  --accent-dark: #b91c1c;
  --accent-hot: #ff3b5c;
  --cyan: #38bdf8;
  --cyan-soft: rgba(56, 189, 248, 0.18);
  --glow: rgba(220, 38, 38, 0.45);
  --card: rgba(13, 21, 38, 0.72);
  --border: rgba(56, 189, 248, 0.16);
  --text: #f1f5ff;
  --text-dim: #93a3bd;
  --radius-lg: 18px;
  --radius-md: 14px;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-brand: 'Montserrat', sans-serif;
}

html {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 55% 45% at 8% 92%, rgba(220, 38, 38, 0.22), transparent 70%),
    radial-gradient(ellipse 50% 45% at 92% 18%, rgba(56, 189, 248, 0.16), transparent 70%),
    linear-gradient(rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, #070c18 0%, #050912 45%, #04070e 100%);
  background-size: auto, auto, 56px 56px, 56px 56px, auto;
  background-attachment: fixed;
}

body {
  font-family: var(--font-body);
  color: var(--text);
}

/* Type: sentence-style bold sans, no all-caps headlines */
h1, h2, h3,
.section-heading, .service-page-title, .detail-heading, .value-prop-headline {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: -0.02em;
}
.section-heading, .detail-heading { font-weight: 800; }
.service-page-title { font-weight: 800; font-size: clamp(2.4rem, 5vw, 3.9rem); }
.value-prop-headline { font-weight: 700; }

/* HUD labels: small tracked caps in cyan with a leading tick */
.section-label, .detail-label, .service-page-label, .answer .q {
  font-family: var(--font-body);
  color: var(--cyan);
  font-weight: 600;
  letter-spacing: 0.2em;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.section-label::before, .detail-label::before, .service-page-label::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.breadcrumb .current { color: var(--accent-hot); }

/* Header */
.site-header, .site-header.scrolled {
  background: rgba(5, 9, 18, 0.72);
  border-bottom: 1px solid var(--cyan-soft);
  backdrop-filter: blur(16px);
  box-shadow: none;
}
.brand-wordmark { font-family: var(--font-brand); letter-spacing: .22em; }
.nav-links a { font-family: var(--font-body); font-weight: 600; letter-spacing: .14em; color: var(--text-dim); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--cyan); }

/* Glass panels: every card-like surface */
.service-card, .serve-panel, .value-pillar, .contact-form-card, .tool-card, .answer,
.flow-step, .feature, .diagram, .platform, .chip, .code-line {
  background: linear-gradient(180deg, rgba(16, 26, 46, 0.78), rgba(8, 13, 25, 0.78));
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 50px -30px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
}
.service-card:hover, .tool-card:hover, .answer:hover, .value-pillar:hover {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15), 0 18px 60px -24px rgba(56, 189, 248, 0.35);
}
.value-pillars { gap: 14px; background: none; }
.value-pillar { border-radius: var(--radius-md); }
.pillar-icon, .service-icon { color: var(--cyan); filter: drop-shadow(0 0 8px rgba(56, 189, 248, .45)); }
.tool-badge { color: var(--cyan); border-color: rgba(56, 189, 248, .45); background: rgba(56, 189, 248, .06); }
.flow-step::before { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 12px rgba(56, 189, 248, .35); }
.answer .q { display: block; }
.feature h3, .service-card a { color: var(--cyan); }
.platform { background: linear-gradient(120deg, rgba(220, 38, 38, .16), rgba(10, 18, 34, .9) 45%, rgba(56, 189, 248, .12)); }

/* Buttons */
.btn-primary, .service-page-cta, .submit-button {
  background: linear-gradient(135deg, var(--accent-hot), var(--accent));
  color: #fff;
  border: 0;
  box-shadow: 0 0 24px rgba(255, 59, 92, 0.35);
}
.btn-primary:hover, .service-page-cta:hover, .submit-button:hover {
  background: linear-gradient(135deg, #ff5470, var(--accent));
  box-shadow: 0 0 34px rgba(255, 59, 92, 0.55);
}
.btn-ghost {
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: var(--text);
  background: rgba(56, 189, 248, 0.05);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 20px rgba(56, 189, 248, .25); }

/* Form fields */
.contact-form-card input, .contact-form-card textarea {
  background: rgba(5, 9, 18, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
}
.contact-form-card input:focus, .contact-form-card textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
  outline: none;
}

/* Section dividers become cyan hairlines */
.service-page-hero { border-bottom: 1px solid var(--cyan-soft); background: radial-gradient(ellipse 60% 90% at 85% 0%, rgba(56, 189, 248, .10), transparent 70%); }
.service-detail-section { border-top-color: rgba(56, 189, 248, .08); }
.service-page-contact { background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(220, 38, 38, .14) 0%, transparent 70%); }
.site-footer { border-top: 1px solid var(--cyan-soft); }

/* Grafana-style dashboards pick up the navy and cyan frame */
.gf-dash { background: rgba(6, 11, 22, 0.88); border-color: rgba(56, 189, 248, .28); box-shadow: 0 0 60px -20px rgba(56, 189, 248, .25); }
.gf-panel { background: rgba(14, 22, 40, 0.9); border-color: rgba(56, 189, 248, .14); }
.lab-note { border-left-color: var(--cyan); }

/* ---------------- Home hero: centered text ---------------- */
.hero-stage {
  background:
    radial-gradient(ellipse 45% 55% at 12% 85%, rgba(220, 38, 38, 0.25), transparent 70%),
    radial-gradient(ellipse 40% 60% at 78% 40%, rgba(56, 189, 248, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(5, 9, 18, 0.2), rgba(5, 9, 18, 0.85));
}
.hero-bg-dots { background-image: radial-gradient(circle, rgba(56, 189, 248, 0.10) 1px, transparent 1px); }
.hero-red-glow { background: radial-gradient(circle at 70% 45%, rgba(255, 59, 92, 0.14), transparent 35%); }

.hero-logo-wrap.hero-split {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--header-height) 1.25rem 0;
  pointer-events: auto;
}
.hero-text { max-width: 860px; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.hero-brandline {
  display: flex; align-items: center; justify-content: center; gap: .9rem; margin-bottom: 1.8rem;
  font-family: var(--font-brand); font-weight: 700; letter-spacing: .28em; font-size: .85rem; color: var(--text);
}
.hero-brandline img { width: 34px; height: auto; filter: drop-shadow(0 0 10px rgba(255, 59, 92, .6)); mix-blend-mode: normal; opacity: 1; }
.hero-brandline .divider { width: 1px; height: 22px; background: rgba(241, 245, 255, .35); }
.hero-brandline .sub { color: var(--cyan); letter-spacing: .24em; font-family: var(--font-body); font-weight: 600; font-size: .78rem; }
.hero-headline {
  font-family: var(--font-body);
  font-size: clamp(2.1rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: none;
  color: #fff;
  margin: 0;
  text-shadow: 0 0 40px rgba(56, 189, 248, .15);
}
.hero-sub { margin: 1.5rem auto 0; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: #c9d6ec; max-width: 34em; }
.hero-text .hero-actions { margin-top: 2.2rem; justify-content: center; }

/* Button geometry for pages that do not load product.css (home) */
.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-actions .btn-primary, .hero-actions .btn-ghost { display:inline-block; font-weight:700; font-size:.95rem; padding:.85rem 1.6rem; border-radius:8px; text-decoration:none; transition:all .2s; }

/* Platform map on the platform page */
.platform-map { margin-top: 2rem; display: flex; flex-direction: column; gap: 10px; }
.pm-layer { background: linear-gradient(180deg, rgba(16, 26, 46, .78), rgba(8, 13, 25, .78)); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.1rem 1.3rem; }
.pm-console { border-color: rgba(255, 59, 92, .45); background: linear-gradient(120deg, rgba(220, 38, 38, .16), rgba(10, 18, 34, .9) 55%); }
.pm-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.pm-head b { font-size: 1rem; }
.pm-status { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fade2a; border: 1px solid rgba(250, 222, 42, .45); border-radius: 999px; padding: .2rem .6rem; }
.pm-status.ok { color: #73bf69; border-color: rgba(115, 191, 105, .5); }
.pm-console p { color: var(--text-dim); margin: .5rem 0 0; }
.pm-mods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: .8rem; }
.pm-mod { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--text); border: 1px solid rgba(56, 189, 248, .3); border-radius: 10px; padding: .7rem .8rem; background: rgba(56, 189, 248, .05); transition: all .2s; }
.pm-mod span { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.pm-mod:hover { border-color: var(--cyan); box-shadow: 0 0 20px rgba(56, 189, 248, .25); }
.pm-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .8rem; }
.pm-row span { font-size: .85rem; border: 1px solid var(--border); border-radius: 999px; padding: .35rem .85rem; color: var(--text-dim); }
@media (max-width: 820px) { .pm-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Buttons: squared with rounded corners, not pills */
.btn-primary, .btn-ghost, .service-page-cta, .submit-button, .hero-actions .btn-primary, .hero-actions .btn-ghost { border-radius: 8px; }

/* Header brand: MAGI SYSTEMS | AI SECOPS */
.brand-wordmark { display: inline-flex; align-items: center; }
.brand-divider { width: 1px; height: 20px; background: rgba(241, 245, 255, .3); margin: 0 1rem; }
.brand-sub { font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); }
@media (max-width: 640px) { .brand-divider, .brand-sub { display: none; } }

/* Hero click fix: the scroll-arrow layer spans the whole hero and, once the
   parallax transforms kick in, sits above the buttons. Let clicks pass through
   it except on the arrow itself, and keep the text layer on top. */
.hero-copy-wrap { pointer-events: none; }
.hero-copy-wrap .scroll-arrow { pointer-events: auto; }
.hero-logo-wrap.hero-split { z-index: 2; }

/* Closing call-to-action on module pages: center the heading block itself,
   not just its text (it has a narrow max-width from .section-heading). */
.service-page-contact .section-heading { max-width: 24ch; margin-left: auto; margin-right: auto; font-size: clamp(2rem, 4vw, 3rem); }
.service-page-contact p { max-width: 48rem; margin-left: auto; margin-right: auto; }

/* Home hero: helix drawn behind the headline (inline SVG in index.html). */
.hero-helix { z-index: 1; pointer-events: none; overflow: hidden; }
.hero-helix .helix-rot { position: absolute; top: 50%; left: 50%; width: 46vh; height: 132vh; transform: translate(-50%, -50%) rotate(-32deg); opacity: .55; animation: helixFloat 14s ease-in-out infinite; }
.hero-helix .helix-svg { width: 100%; height: 100%; display: block; }
.hero-helix::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 38% 34% at 50% 52%, rgba(5, 9, 18, .82), rgba(5, 9, 18, .35) 60%, transparent 85%); }
.hero-helix .rung { animation: rungPulse 4.2s ease-in-out infinite; }
.hero-helix .spark { animation: spark 6s ease-in-out infinite; opacity: .2; }
@keyframes helixFloat { 0%,100% { transform: translate(-50%, -50%) rotate(-32deg); } 50% { transform: translate(-50%, -52%) rotate(-30deg); } }
@keyframes rungPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes spark { 0%,100% { opacity: .1; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .hero-helix .helix-rot, .hero-helix .rung, .hero-helix .spark { animation: none !important; } }

/* Platform page: MAGI Console hub, one view across every module. */
.mc { margin-top: 2rem; padding: 1.5rem; border: 1px solid rgba(56,189,248,.18); border-radius: 22px; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(56,189,248,.08), transparent 70%), rgba(6,11,22,.7); position: relative; overflow: hidden; }
.mc-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(56,189,248,.12); }
.mc-pill, .mc-core-pill { display: inline-flex; align-items: center; gap: .55rem; font: 700 .78rem/1 'Inter', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #7dd3fc; border: 1px solid rgba(56,189,248,.35); border-radius: 8px; padding: .55rem .9rem; background: rgba(8,16,32,.8); }
.mc-pill i, .mc-core-pill i { width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 10px #38bdf8; }
.mc-stats { display: flex; gap: .6rem; flex-wrap: wrap; }
.mc-stat { border: 1px solid rgba(56,189,248,.18); border-radius: 10px; padding: .45rem .8rem; text-align: right; background: rgba(8,16,32,.7); }
.mc-stat span { display: block; font: 600 .62rem/1.3 'Inter', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.mc-stat b { font: 700 .95rem/1.3 ui-monospace, 'JetBrains Mono', monospace; color: #7dd3fc; }
.mc-stage { position: relative; display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: auto auto; gap: 2.2rem 2rem; padding: 2rem 0 1rem; align-items: center; }
.mc-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mc-lines path { fill: none; stroke: rgba(56,189,248,.45); stroke-width: 1.5; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; animation: mcFlow 2.4s linear infinite; }
@keyframes mcFlow { to { stroke-dashoffset: -28; } }
.mc-card { position: relative; z-index: 1; display: block; text-decoration: none; color: var(--text); border: 1px solid rgba(56,189,248,.16); border-radius: 16px; padding: 1.1rem 1.2rem; background: rgba(10,18,34,.92); transition: border-color .2s, box-shadow .2s, transform .2s; }
.mc-card:hover { border-color: rgba(56,189,248,.5); box-shadow: 0 0 30px rgba(56,189,248,.15); transform: translateY(-2px); }
.mc-w { grid-column: 1; grid-row: 1; } .mc-p { grid-column: 3; grid-row: 1; } .mc-r { grid-column: 1; grid-row: 2; } .mc-a { grid-column: 3; grid-row: 2; }
.mc-core { grid-column: 2; grid-row: 1 / span 2; z-index: 2; text-align: center; border-radius: 20px; padding: 1.4rem 1.4rem 1.2rem; color: #fff; background: linear-gradient(180deg, #38bdf8 0%, #4f6bdc 48%, #2a1f6b 100%); box-shadow: 0 0 60px rgba(56,189,248,.35), 0 0 120px rgba(99,102,241,.2); }
.mc-core-pill { background: rgba(6,14,34,.75); color: #bae6fd; }
.mc-logo { width: 96px; height: 96px; margin: 1.1rem auto .6rem; border-radius: 22px; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 0 0 6px rgba(6,14,34,.35), 0 0 28px rgba(255,59,92,.45); }
.mc-core h3 { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.mc-sub { color: #bae6fd; font: 700 .72rem/1.4 'Inter', sans-serif; letter-spacing: .18em; text-transform: uppercase; margin: .4rem 0 1rem; }
.mc-core-list { text-align: left; background: rgba(12,10,40,.55); border-radius: 12px; padding: .8rem 1rem; }
.mc-cl-h { display: flex; justify-content: space-between; font: 700 .66rem/1.4 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: #a5b4fc; margin-bottom: .45rem; }
.mc-cl-h span:last-child { color: #7dd3fc; }
.mc-core-list ul { margin: 0; padding: 0; list-style: none; }
.mc-core-list li { font-size: .86rem; line-height: 1.5; color: #e0e7ff; padding-left: 1rem; position: relative; }
.mc-core-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: #38bdf8; }
.mc-ch { display: flex; align-items: center; gap: .75rem; }
.mc-ch > div { flex: 1; }
.mc-ch small { display: block; font: 700 .64rem/1.2 'Inter', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7dd3fc; }
.mc-ch b { font-size: 1.15rem; }
.mc-ch em { font: 600 .66rem/1 ui-monospace, monospace; font-style: normal; padding: .35rem .5rem; border-radius: 6px; border: 1px solid rgba(56,189,248,.4); color: #7dd3fc; background: rgba(56,189,248,.08); white-space: nowrap; }
.mc-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(56,189,248,.45); color: #7dd3fc; background: rgba(56,189,248,.08); font-size: 1rem; }
.mc-card p { color: #c9d6ec; font-size: .92rem; line-height: 1.5; margin: .75rem 0; }
.mc-cf { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding-top: .7rem; border-top: 1px solid rgba(56,189,248,.12); }
.mc-cf span { font: 600 .74rem/1 ui-monospace, monospace; color: var(--text-dim); }
.mc-cf code { font: 700 .74rem/1.2 ui-monospace, monospace; padding: .38rem .55rem; border-radius: 6px; border: 1px solid rgba(56,189,248,.35); color: #7dd3fc; background: rgba(56,189,248,.08); text-align: right; }
.mc small.ai, .mc em.ai, .mc code.ai { color: #c4b5fd; border-color: rgba(167,139,250,.45); background: rgba(167,139,250,.1); }
.mc small.sec, .mc em.sec, .mc code.sec { color: #ff6b81; border-color: rgba(255,59,92,.45); background: rgba(255,59,92,.1); }
.mc small.ok, .mc em.ok, .mc code.ok { color: #86efac; border-color: rgba(74,222,128,.4); background: rgba(74,222,128,.08); }
.mc small.ai, .mc small.sec, .mc small.ok, .mc small.obs { background: none; }
.mc code.gold { color: #fade2a; border-color: rgba(250,222,42,.4); background: rgba(250,222,42,.08); }
.mc-o { max-width: 520px; margin: .4rem auto 0; opacity: .92; }
@media (max-width: 900px) {
  .mc-stage { grid-template-columns: 1fr; gap: 1rem; }
  .mc-core, .mc-w, .mc-p, .mc-r, .mc-a { grid-column: 1; grid-row: auto; }
  .mc-core { order: -1; } .mc-lines { display: none; } .mc-stats { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .mc-lines path { animation: none; } }

/* No single word stranded on its own line: balance headings, and let the
   browser pull a word down onto short last lines of body text. */
h1, h2, h3, h4, .value-prop-headline, .section-heading, .service-page-title, .detail-heading,
.hero-headline, .tool-tagline, .mc-card p, .mc-core-list li { text-wrap: balance; }
p, li, td, th, blockquote, figcaption { text-wrap: pretty; }