/* ============================================================
   Datum — shared design system
   Used by every page (index.html, datumx.html, datumcore.html, services.html).
   Edit here, not per-page, so the site stays visually consistent.
   ============================================================ */

:root{
  --bg: #ffffff;
  --bg-alt: #eef3fa;
  --panel: #ffffff;
  --panel-border: #d7e3f2;
  --text: #14213a;
  --text-dim: #55698a;
  --accent: #2f5597;
  --accent-dim: #1e3d7a;
  --accent-soft: #7c9bcb;
  --ink: #16294a;
  --radius: 10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html{ overflow-x:hidden; }
body{
  margin:0;
  overflow-x:hidden;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.55;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ── animated node-network background (see assets/fx.js) ─────────
   A canvas per hero-type section: drifting points, linked by fading
   lines when close, plus a live web that draws itself to the cursor.
   data-theme="light"/"dark" picks the dot/line colour for that section. */
.fx-canvas{position:absolute; inset:0; z-index:0; display:block; width:100%; height:100%;}

/* ── NAV ─────────────────────────────────────────────────────── */
header.site{
  position: sticky; top:0; z-index:50;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--panel-border);
}
nav.wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:10px 60px; gap:16px; max-width:none; margin:0;}
.brand{display:flex; align-items:center; flex:none;}
.brand img{height:38px; width:auto; display:block;}
nav .links{display:flex; gap:28px; font-size:0.95rem;}
nav .links a{text-decoration:none; color:var(--text-dim); transition:color .15s;}
nav .links a:hover, nav .links a.active{color:var(--accent);}
nav .nav-cta{flex:none;}

/* mobile menu — pure CSS checkbox toggle, no JS needed */
.nav-toggle{display:none;}
.nav-burger{
  display:none; flex:none; width:34px; height:34px; border-radius:8px;
  border:1px solid var(--panel-border); cursor:pointer;
  align-items:center; justify-content:center; gap:4px; flex-direction:column;
}
.nav-burger span{width:16px; height:2px; background:var(--ink); border-radius:1px;}
.mobile-panel{
  display:none; flex-direction:column; flex-basis:100%; width:100%;
  padding:10px 4px 4px; gap:2px; border-top:1px solid var(--panel-border);
  order:99;
}
.mobile-panel a{
  text-decoration:none; color:var(--text-dim); font-size:0.95rem; padding:12px 4px;
  border-bottom:1px solid var(--panel-border);
}
.mobile-panel a:last-child{border-bottom:none;}
.nav-toggle:checked ~ .mobile-panel{display:flex;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 22px; border-radius:999px;
  font-weight:600; font-size:0.95rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary{background:var(--accent); color:#ffffff;}
.btn-primary:hover{background:var(--accent-dim);}
.btn-ghost{border-color:var(--panel-border); color:var(--text); background:transparent;}
.btn-ghost:hover{border-color:var(--accent-soft); color:var(--accent-dim);}
nav .btn{padding:8px 18px; font-size:0.9rem;}

/* ── generic page hero (used by datumx.html / datumcore.html / services.html) ───── */
.pagehero{
  position:relative; overflow:hidden;
  padding:64px 0 56px;
  background:var(--bg);
}
.pagehero > .wrap{position:relative; z-index:1;}
.pagehero .crumb{font-size:0.85rem; color:var(--text-dim); margin-bottom:18px;}
.pagehero .crumb a{text-decoration:none; color:var(--accent);}
.pagehero h1{font-size:2.3rem; margin:0 0 14px; font-weight:800; color:var(--ink); letter-spacing:-0.01em;}
.pagehero p.lead{font-size:1.06rem; color:var(--text-dim); max-width:64ch; margin:0;}

/* ── HERO (homepage) ──────────────────────────────────────────── */
.hero{
  position:relative;
  padding:96px 0 104px;
  overflow:hidden;
  background:var(--bg);
}
.hero > .wrap{position:relative; z-index:1;}
.hero-inner{max-width:720px; margin:0 auto; text-align:center;}
.hero-logo{height:104px; width:auto; margin:0 auto 4px;}
.hero-slogan{
  font-size:1.4rem; font-weight:600; color:var(--accent);
  letter-spacing:0.01em; margin:0 0 34px;
}
.hero .cta-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:16px;}
.hero .fine{font-size:0.82rem; color:var(--text-dim);}

section{padding:80px 0;}
.section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.section-head .kicker{
  color:var(--accent); text-transform:uppercase; font-size:0.78rem; font-weight:700;
  letter-spacing:0.08em; margin-bottom:10px;
}
.section-head h2{font-size:2rem; margin:0 0 14px; font-weight:800; letter-spacing:-0.01em; color:var(--ink);}
.section-head p{color:var(--text-dim); margin:0; font-size:1.02rem;}
.section-head.left{text-align:left; margin:0 0 36px;}

/* ── PRODUCTS — bundle card + module grid, DiRoots-style ──────── */
.platform-tabs{display:flex; gap:10px; margin-bottom:32px; flex-wrap:wrap;}
.platform-tab{
  padding:8px 18px; border-radius:999px; font-size:0.86rem; font-weight:600;
  border:1px solid var(--panel-border); color:var(--text-dim); background:#fff;
}
.platform-tab.active{border-color:var(--accent); color:var(--accent); background:rgba(47,85,151,0.06);}

.tier-badge{
  font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  color:var(--accent); background:rgba(47,85,151,0.1); padding:3px 9px; border-radius:999px;
  display:inline-block;
}

/* Two real products, each its own card — icon, name, tier, description,
   then a "See details" link through to that product's dedicated page. */
.product-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media (max-width:760px){ .product-grid{grid-template-columns:1fr;} }
.plugin-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  padding:28px 26px; display:flex; flex-direction:column;
}
.plugin-card .icon{
  width:64px; height:64px; border-radius:14px; background:var(--bg-alt);
  border:1px solid var(--panel-border);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.plugin-card .icon img{width:38px; height:38px;}
.plugin-card h3{margin:0 0 4px; font-size:1.25rem; color:var(--ink);}
.plugin-card .subtitle{font-size:0.85rem; color:var(--text-dim); margin-bottom:12px;}
.plugin-card .tier-badge{margin-bottom:16px; align-self:flex-start;}
.plugin-card p.desc{color:var(--text-dim); font-size:0.94rem; margin:0 0 20px;}

.plugin-card .btn-details{
  margin-top:auto;
  cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  padding:10px 20px; border-radius:999px; border:1px solid var(--panel-border);
  font-weight:600; font-size:0.9rem; color:var(--text); width:fit-content;
  text-decoration:none; background:#fff; transition:border-color .15s, color .15s, background .15s;
}
.plugin-card .btn-details::after{content:"→"; transition:transform .2s ease;}
.plugin-card .btn-details:hover{
  border-color:var(--accent); color:#ffffff; background:var(--accent);
}
.plugin-card .btn-details:hover::after{transform:translateX(3px);}

/* ── SERVICES ──────────────────────────────────────────────────── */
.services-section{background:var(--bg);}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:860px){ .service-grid{grid-template-columns:1fr;} }
.service-card{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px;
  padding:28px 26px; text-decoration:none; display:block;
}
.service-card .num{
  width:36px; height:36px; border-radius:10px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.95rem;
  margin-bottom:18px;
}
.service-card h3{margin:0 0 10px; font-size:1.1rem; color:var(--ink);}
.service-card p{margin:0; color:var(--text-dim); font-size:0.92rem;}

/* ── FLOATING CAPABILITY CARD ─────────────────────────────────── */
.capcard{
  position:relative; z-index:2;
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(22,41,74,0.08);
  backdrop-filter: blur(14px);
  border-radius:16px;
  padding:24px 28px;
  display:grid; grid-template-columns:repeat(5,1fr); gap:18px;
  box-shadow:0 24px 48px -24px rgba(22,41,74,0.22);
  max-width:960px; margin:0 auto;
}
.capcard .cap{display:flex; align-items:flex-start; gap:10px; font-size:0.84rem; color:var(--text);}
.capcard .cap .n{
  flex:none; width:20px; height:20px; border-radius:50%; background:rgba(47,85,151,0.12);
  color:var(--accent); font-size:0.72rem; font-weight:800; display:flex; align-items:center; justify-content:center;
}
@media (max-width:900px){ .capcard{grid-template-columns:repeat(2,1fr);} }

/* ── PAIN STRIP ────────────────────────────────────────────────── */
.strip{background:var(--bg-alt); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); padding:56px 0;}
.strip .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:860px){ .strip .wrap{grid-template-columns:1fr;} }
.strip .item{font-size:0.95rem; color:var(--text-dim); display:flex; gap:12px;}
.strip .item b{color:var(--ink); display:block; margin-bottom:2px; font-size:0.98rem;}
.strip .num{color:var(--accent); font-weight:800; font-size:1.1rem; flex:none;}

/* ── COMMAND ROWS (hex icon cluster + text, alternating) ──────── */
.cmdrow{display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:center;}
.cmdrow + .cmdrow{margin-top:76px;}
.cmdrow.rev{grid-template-columns: 1.15fr 0.85fr;}
.cmdrow.rev .hexart{order:2;}
.hexart{position:relative; height:280px; display:flex; align-items:center; justify-content:center;}
.hexart .halo{
  position:absolute; width:230px; height:265px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background:rgba(47,85,151,0.045);
  border:1px solid rgba(22,41,74,0.10);
}
.hexart .cell{
  position:absolute;
  width:74px; height:85px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.2rem;
  box-shadow:0 10px 22px -10px rgba(22,41,74,0.45);
}
.cmdrow[data-c="amber"] .cell{background:var(--accent); color:#ffffff;}
.cmdrow[data-c="steel"] .cell{background:var(--ink); color:#ffffff;}
.cmdrow[data-c="green"] .cell{background:var(--accent-soft); color:var(--ink);}
.hexart .c1{top:2px; left:82px;}
.hexart .c2{top:98px; left:20px;}
.hexart .c3{top:98px; left:144px;}

.cmdtext .step-badge{
  display:inline-block; font-size:0.76rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.cmdtext h3{margin:0 0 12px; font-size:1.5rem; color:var(--ink);}
.cmdtext p.desc{color:var(--text-dim); margin:0 0 18px; font-size:1rem;}
.cmdtext ul{list-style:none; margin:0; padding:0; font-size:0.92rem; color:var(--text-dim);}
.cmdtext li{display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--panel-border);}
.cmdtext li:last-child{border-bottom:none;}
.cmdtext li::before{content:"✓"; color:var(--accent); font-weight:700; flex:none;}

/* ── DIFFERENTIATORS ───────────────────────────────────────────── */
.diff-section{background:var(--bg-alt); border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border);}
.diffgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media (max-width:860px){ .diffgrid{grid-template-columns:1fr;} }
.diffcard{
  background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius);
  padding:24px; display:flex; gap:16px;
}
.diffcard .badge{
  flex:none; width:38px; height:38px; border-radius:8px;
  background:rgba(47,85,151,0.10); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:800;
}
.diffcard h4{margin:0 0 6px; font-size:1.02rem; color:var(--ink);}
.diffcard p{margin:0; color:var(--text-dim); font-size:0.92rem;}

/* ── HOW IT WORKS ──────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:step;}
@media (max-width:860px){ .steps{grid-template-columns:repeat(2,1fr);} }
.step{position:relative; padding-top:8px;}
.step .stepnum{
  counter-increment:step; content:counter(step);
  width:34px; height:34px; border-radius:50%; border:1px solid var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent);
  margin-bottom:16px; font-size:0.95rem;
}
.step .stepnum::before{content:counter(step);}
.step h4{margin:0 0 8px; font-size:1rem; color:var(--ink);}
.step p{margin:0; color:var(--text-dim); font-size:0.9rem;}

/* ── PRICING — comparison table ────────────────────────────────── */
.pricing-table{
  width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--panel-border); border-radius:var(--radius); overflow:hidden;
  font-size:0.92rem;
}
.pricing-table th, .pricing-table td{padding:14px 18px; text-align:center; border-bottom:1px solid var(--panel-border);}
.pricing-table th{background:var(--bg-alt); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-dim);}
.pricing-table td:first-child, .pricing-table th:first-child{text-align:left; color:var(--ink); font-weight:600;}
.pricing-table tr:last-child td{border-bottom:none;}
.pricing-table td.yes{color:var(--accent); font-weight:800;}
.pricing-table td.no{color:#9aa9c0;}
.pricing-table .col-datum{background:rgba(47,85,151,0.055);}
.pricing-table th.col-datum{color:var(--accent); font-weight:800;}
.pricing-table .price-row td{font-weight:700; color:var(--ink);}
.table-scroll{overflow-x:auto; border-radius:var(--radius);}
.pricing-note{text-align:center; color:var(--text-dim); font-size:0.86rem; margin-top:18px;}
.pricing-note a{color:var(--accent); font-weight:600; text-decoration:none;}
.pricing-note a:hover{text-decoration:underline;}

.waitlist-box{
  max-width:520px; margin:40px auto 0; text-align:center;
  background:rgba(47,85,151,0.045); border:1px solid rgba(47,85,151,0.2);
  border-radius:14px; padding:28px 32px;
}
.waitlist-box h4{margin:0 0 6px; color:var(--ink);}
.waitlist-box p{margin:0 0 18px; color:var(--text-dim); font-size:0.9rem;}
form.waitlist{display:flex; gap:10px;}
form.waitlist input[type=email]{
  flex:1; padding:12px 14px; border-radius:999px; border:1px solid var(--panel-border);
  background:#ffffff; color:var(--text); font-size:0.95rem;
}
form.waitlist input[type=email]:focus{outline:2px solid var(--accent-soft); outline-offset:1px;}

/* ── CTA band — solid brand blue, deliberate bold moment ──────── */
.cta-band{background:var(--bg-alt); text-align:center; position:relative; overflow:hidden;}
.cta-band::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--accent); z-index:2;}
.cta-band .wrap{position:relative; z-index:1;}
.cta-band h2{font-size:1.8rem; margin:0 0 14px; color:var(--ink);}
.cta-band p{color:var(--text-dim); margin:0 0 28px;}

/* ── FOOTER ────────────────────────────────────────────────────── */
footer{padding:52px 0 30px; background:var(--bg-alt);}
.fgrid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; margin-bottom:36px;}
@media (max-width:860px){ .fgrid{grid-template-columns:1fr 1fr;} }
.fbrand{display:flex; align-items:center; margin-bottom:14px;}
.fbrand img{height:20px; width:auto; display:block;}
footer .about{color:var(--text-dim); font-size:0.88rem; max-width:34ch;}
footer h5{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-dim); margin:0 0 14px;}
footer .flinks{display:flex; flex-direction:column; gap:10px; font-size:0.9rem;}
footer .flinks a{text-decoration:none; color:var(--ink);}
footer .flinks a:hover{color:var(--accent);}
footer .foot-bottom{border-top:1px solid var(--panel-border); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
footer .copy{font-size:0.82rem; color:var(--text-dim);}
footer .tagline{font-size:0.82rem; color:var(--text-dim); letter-spacing:0.02em;}

/* ── responsive ────────────────────────────────────────────────── */
@media (max-width: 900px){
  .capcard{margin-bottom:0;}
  .cmdrow, .cmdrow.rev{grid-template-columns:1fr;}
  .cmdrow.rev .hexart{order:0;}
  nav .links{display:none;}
  nav .nav-cta{display:none;}
  .nav-burger{display:flex;}
}
@media (max-width: 480px){
  nav.wrap{padding:12px 16px;}
  .brand img{height:20px;}
  .wrap{padding:0 16px;}
  .hero h1{font-size:2rem;}
  .hero p.lead{font-size:1rem;}
}