﻿:root {
  color-scheme: dark;
  --bg: #070b16;
  --panel: #101a2d;
  --line: rgba(149,177,224,.18);
  --text: #edf4ff;
  --muted: #9aaac4;
  --cyan: #59e1e9;
  --green: #7af0c5;
  --font: "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 10% 0%,#15324b 0%,transparent 45%),
              radial-gradient(ellipse at 90% 20%,#211d4b 0%,transparent 40%),var(--bg);
}
.wrap,.site-footer { width: min(1160px,calc(100% - 40px)); margin: auto; }
.site-header {
  width: min(1320px,calc(100% - 40px)); min-height: 82px;
  margin: auto; display: flex; align-items: center; gap: 22px;
  border-bottom: 1px solid var(--line); position: relative; z-index: 5;
}
.brand { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.brand-mark {
  width:34px;height:34px;border:1px solid var(--cyan);border-radius:9px;
  transform:rotate(45deg);display:grid;place-items:center;
}
.brand-mark i { width:12px;height:12px;border:2px solid var(--cyan); }
.brand b { display:block;font-size:11px;letter-spacing:2px; }
.brand small { display:block;font-size:9px;letter-spacing:2px;color:var(--muted); }
.site-nav { display:flex;gap:5px;margin-left:auto; }
.site-nav a { color:var(--muted);font-size:12px;padding:9px 12px;border-radius:7px; }
.site-nav a:hover,.site-nav a.active {
  color:var(--text);background:#15243a;border:1px solid var(--line);
}
.header-cta,.button {
  display:inline-block;padding:11px 16px;border-radius:8px;font-size:12px;font-weight:700;
}
.header-cta { border:1px solid #2c6877;background:#102431;white-space:nowrap; }
.menu-toggle { display:none;background:#101a2d;color:white;border:1px solid var(--line);padding:9px;border-radius:7px; }
.hero { display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;padding-top:75px;padding-bottom:65px; }
.eyebrow,.kicker,.card-index { color:var(--cyan);font-size:10px;letter-spacing:2px; }
.eyebrow { margin-bottom:20px; }
.pulse,.status-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:8px; }
h1 { font-size:clamp(38px,5vw,62px);line-height:1.12;letter-spacing:-2px;margin:15px 0 22px; }
.gradient { background:linear-gradient(100deg,#f1f7ff,#77e9ec,#9b9eff);color:transparent;background-clip:text; }
.lead { color:var(--muted);font-size:14px;max-width:720px; }
.hero-actions,.contact-actions { display:flex;gap:12px;flex-wrap:wrap;margin-top:25px; }
.button.primary { background:linear-gradient(100deg,#c4fcff,#80dfe8);color:#06101c; }
.button.secondary { border:1px solid var(--line);background:var(--panel); }
.hero-metrics { display:flex;gap:25px;margin-top:35px;padding-top:20px;border-top:1px solid var(--line); }
.hero-metrics div { display:grid; }
.hero-metrics strong { font-size:20px; }
.hero-metrics span { font-size:10px;color:var(--muted); }
.hero-visual,.panel,.feature-card,.tool-card,.principle-card {
  border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(145deg,#111e33,#0b1120);padding:25px;
}
.hero-visual { min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden; }
.hero-visual:before { content:"";position:absolute;inset:0;background-image:linear-gradient(#29405b33 1px,transparent 1px),linear-gradient(90deg,#29405b33 1px,transparent 1px);background-size:28px 28px; }
.core { position:relative;z-index:1;width:120px;height:120px;border:1px solid var(--cyan);border-radius:50%;display:grid;place-content:center;text-align:center;background:#0b1729;box-shadow:0 0 45px #59e1e922; }
.core span { font-size:27px;font-weight:800;letter-spacing:4px; }
.core small { font-size:9px;color:var(--cyan); }
.node { position:absolute;z-index:1;border:1px solid var(--line);background:#0b1323;padding:9px;border-radius:7px;font-size:10px;color:var(--cyan); }
.node-a { top:22%;left:8%; }.node-b { top:22%;right:8%; }.node-c { bottom:18%;left:10%; }.node-d { bottom:18%;right:10%; }
.visual-top,.visual-bottom { position:absolute;left:16px;right:16px;font-size:9px;color:var(--muted); }
.visual-top { top:14px; }.visual-bottom { bottom:14px;display:flex;justify-content:space-between; }
.section { padding-top:35px;padding-bottom:55px; }
.section-heading { display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px; }
h2 { font-size:clamp(25px,3vw,36px);line-height:1.25;letter-spacing:-1px;margin:10px 0; }
h3 { font-size:17px; }
.text-link,.feature-card>a,.tool-card>a { color:var(--cyan);font-size:12px;font-weight:700; }
.feature-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px; }
.feature-card,.tool-card,.principle-card { padding:22px; }
.card-icon,.tool-icon { color:var(--cyan);font-weight:700;border:1px solid var(--line);padding:10px;display:inline-block;border-radius:8px;margin-bottom:15px; }
.feature-card p,.tool-card p,.principle-card p { font-size:12px;color:var(--muted); }
.callout { margin-top:30px;margin-bottom:65px;padding:28px;border:1px solid #2b596b;border-radius:13px;background:#10202e;display:flex;justify-content:space-between;align-items:center;gap:20px; }
.callout p { color:var(--muted);font-size:13px; }
.page-hero { padding-top:65px;padding-bottom:20px; }
.page-hero h1 { max-width:850px; }
.breadcrumb { display:flex;gap:10px;margin-top:22px;font-size:11px;color:var(--muted); }
.breadcrumb a { color:var(--cyan); }
.service-detail,.contact-layout { display:grid;grid-template-columns:1.2fr .8fr;gap:16px;padding-top:25px; }
.service-main,.service-aside,.contact-panel,.registration-panel { padding:28px; }
.service-label { color:var(--green);font-size:11px; }
.large-icon { font-size:30px;color:var(--cyan);margin:15px 0; }
.check-list { color:#cbd8eb;font-size:12px;line-height:2.2; }
.note,.privacy-note { color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding-top:15px;margin-top:20px; }
.steps { padding-left:22px;color:var(--muted);font-size:12px; }
.notice-strip { display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:10px;background:#101a2d; }
.notice-strip p { color:var(--muted);font-size:12px;flex:1; }
.notice-strip a { color:var(--cyan);font-size:12px; }
.tool-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px; }
.tool-card-top { display:flex;justify-content:space-between;gap:10px; }
.tool-status { font-size:9px;color:var(--muted);border:1px solid var(--line);padding:5px 7px;border-radius:5px;height:max-content; }
.tool-status.open { color:var(--green); }
.muted-link { color:var(--muted);font-size:11px; }
.about-intro { display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;align-items:center; }
.about-symbol { min-height:180px;display:grid;place-content:center;text-align:center;border:1px solid var(--line);border-radius:10px;color:var(--cyan);font-size:30px;font-weight:800; }
.about-symbol small { font-size:9px;letter-spacing:1px; }
.principle-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px; }
.principle-no { color:var(--cyan);font-size:11px; }
.contact-item { display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line); }
.contact-item div { display:grid;flex:1;min-width:0; }
.contact-item small { color:var(--muted);font-size:10px; }
.contact-item a { font-size:12px;overflow-wrap:anywhere; }
.contact-arrow { color:var(--cyan); }
.registration-list { list-style:none;padding:0;line-height:2.5;font-size:12px; }
.registration-list span { color:var(--cyan);margin-right:10px; }
.button.full { width:100%;text-align:center; }
.site-footer { border-top:1px solid var(--line);padding-top:25px;padding-bottom:20px;margin-top:30px; }
.footer-brand { font-weight:800;letter-spacing:2px; }
.footer-brand span { color:var(--muted);font-size:11px;letter-spacing:0;margin-left:8px; }
.site-footer>p { font-size:10px;color:var(--muted);margin-top:10px; }
.footer-bottom { display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding-top:15px;color:var(--muted);font-size:10px; }
.footer-bottom nav { display:flex;gap:15px; }
@media(max-width:850px) {
  .site-header { gap:12px; }
  .site-nav { gap:0; }.site-nav a { padding:8px; }
  .header-cta { display:none; }
  .hero { gap:20px; }.feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .principle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:650px) {
  .site-header { min-height:70px; }
  .brand b { font-size:9px; }.brand small { font-size:8px; }
  .menu-toggle { display:block;margin-left:auto; }
  .site-nav { display:none;position:absolute;top:65px;left:0;right:0;background:#0b1221;border:1px solid var(--line);border-radius:9px;padding:10px; }
  .site-nav.open { display:flex;flex-direction:column;align-items:stretch; }
  .site-nav a { padding:12px; }
  .hero,.service-detail,.contact-layout,.about-intro { grid-template-columns:1fr; }
  .hero { padding-top:45px; }.hero-visual { min-height:280px; }
  .hero h1 { font-size:39px; }.hero-metrics { gap:15px; }
  .feature-grid,.tool-grid,.principle-grid { grid-template-columns:1fr; }
  .section-heading,.callout { align-items:flex-start;flex-direction:column; }
  .callout { padding:22px; }.wrap,.site-footer { width:calc(100% - 30px); }
  .footer-brand span { display:block;margin:3px 0; }
  .footer-bottom { flex-direction:column; }
  .notice-strip { align-items:flex-start;flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { animation:none!important;transition:none!important; } }


/* Money Trail screenshot gallery — matches the existing CIOS dark theme */
.gallery-intro { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.gallery-item { display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg,#111e33,#0b1120); color: var(--text); cursor: zoom-in; font: inherit; }
.gallery-item:hover, .gallery-item:focus-visible { border-color: var(--cyan); outline: none; }
.gallery-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top center; border-radius: 7px; background: #0b1120; }
.gallery-item span { font-size: 12px; font-weight: 700; padding: 0 4px 3px; }
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 56px 24px 24px; background: rgba(2,6,14,.94); }
.gallery-lightbox img { display: block; max-width: min(1200px, 100%); max-height: calc(100vh - 90px); object-fit: contain; border: 1px solid var(--line); border-radius: 8px; }
.gallery-close { position: absolute; top: 14px; right: 20px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #101a2d; color: var(--text); font-size: 28px; cursor: pointer; }
.tool-feature-list { color: #cbd8eb; font-size: 11px; line-height: 1.8; padding-left: 18px; margin: 12px 0 18px; }
.tool-feature-list li { margin-bottom: 4px; }
@media(max-width:850px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width:650px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-lightbox { padding: 58px 12px 16px; } }
/* Mobile gallery layout fix */
@media (max-width: 650px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: contain;
    object-position: center;
  }

  .gallery-lightbox {
    padding: 58px 12px 16px;
  }

  .gallery-lightbox img {
    max-width: 100%;
    max-height: calc(100dvh - 90px);
    object-fit: contain;
  }
}