﻿/* Home based on the supplied VoxMi / DYNOR mockup. */
.mock-home{--ink:#092753;--copy:#52688a;--accent:#006d87;background:#fff;color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55}
.mock-home *{box-sizing:border-box}.mock-home [id]{scroll-margin-top:105px}.mock-container{width:min(1280px,calc(100% - 96px));margin:auto}.mock-home section{padding:46px 0;border-bottom:1px solid #eaf3f8;background:linear-gradient(115deg,#fff,#f9fcff)}.mock-home h1,.mock-home h2,.mock-home h3,.mock-home p{margin-top:0}.mock-home h1,.mock-home h2{letter-spacing:-.045em;line-height:1.17;font-weight:650}.mock-home h1{font-size:clamp(32px,3.4vw,49px);margin-bottom:22px}.mock-home h1 em{font-style:normal;color:var(--accent)}.mock-home h2{font-size:clamp(26px,2.45vw,36px);margin-bottom:20px}.mock-home h3{font-size:16px;line-height:1.4;font-weight:600;margin-bottom:10px}.mock-home p{font-size:17px;color:var(--copy);margin-bottom:20px;max-width:65ch}.mock-home .intro{font-size:19px;line-height:1.55}.mock-home .kicker{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:16px}.mock-home .header{background:#ffffffed;border:0;box-shadow:0 1px 0 #eaf3f8}.mock-header{min-height:88px;display:flex;gap:28px;align-items:center;justify-content:space-between}.mock-brand{display:flex;gap:8px;align-items:center;color:#092753;text-decoration:none;font-size:34px;font-weight:650;letter-spacing:-.05em}.mock-brand svg{width:48px;height:48px;color:#009bc3}.mock-home .v2-nav{gap:22px}.mock-home .v2-nav>a{font-size:14px;color:var(--copy);white-space:nowrap}.mock-home .v2-nav>a:hover{color:var(--accent)}.mock-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:48px;padding:12px 21px;border:1px solid #51718f;border-radius:6px;color:var(--ink);font-size:16px;font-weight:600;text-decoration:none;line-height:1.5;text-align:center}.mock-button.primary{background:linear-gradient(115deg,#007897,#006680);border-color:#00718d;color:white}.mock-button:hover{box-shadow:0 4px 16px #0a6d8920}.mock-button span{font-size:20px;line-height:1}.mock-home :focus-visible{outline:3px solid #009dc7;outline-offset:5px}.actions{display:flex;gap:16px;flex-wrap:wrap}.hero-layout{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:24px}.mock-home .mock-hero{padding:36px 0 44px;background:radial-gradient(ellipse at 70% 40%,#edf8fd,transparent 65%),#fcfeff}.network-figure{display:grid;grid-template-columns:minmax(0,1fr) 135px;align-items:center;min-width:0}.network-figure img{display:block;width:100%;height:auto}.level-labels{border-left:1px dotted #85c5db;display:flex;flex-direction:column;justify-content:space-between;gap:35px;padding:0 0 0 17px}.level-labels p{position:relative;font-size:13px;margin:0}.level-labels p:before{content:'';position:absolute;left:-21px;top:7px;width:6px;height:6px;border-radius:50%;background:#0088a8}.level-labels b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}.level-labels span{display:block}.problem-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:center}.charts{display:grid;grid-template-columns:1fr 1fr;gap:24px}.charts figure{margin:0;min-width:0}.charts figure+figure{border-left:1px dashed #bfd4e2;padding-left:24px}.charts figcaption{font-size:13px;color:var(--copy);min-height:44px}.charts svg{display:block;width:100%;height:auto}.note{display:flex;align-items:center;gap:24px;background:#edf8fe;border-radius:7px;padding:15px 24px;margin-top:22px}.note>svg{width:30px;height:30px;flex-shrink:0;color:#0097be}.mock-home .note p{font-size:15px;margin:0;max-width:none;color:#274a76}.two-col{display:grid;grid-template-columns: .95fr 1.4fr;gap:50px;align-items:center}.layered{border-left:1px dotted #c1d7e6;padding-left:30px}.layered img{max-height:330px}.benefits,.capabilities,.value-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}.benefits{text-align:center}.icon-disc{display:inline-flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff,#e4f5fd);color:#008caf;margin-bottom:17px}.icon-disc svg{width:39px;height:39px}.benefits h3{font-size:15px;font-weight:500}.decision{justify-content:space-between;gap:25px}.decision strong{font-size:17px;white-space:nowrap}.mock-home .decision p{font-size:14px;border-left:1px dashed #85b4ca;padding-left:25px}.capabilities h3{font-size:15px;min-height:43px}.mock-home .capabilities p,.mock-home .value-chain p,.mock-home .science-chain p{font-size:16px;line-height:1.6;margin-bottom:0}.step-icon{position:relative}.step-icon>span:first-child{position:absolute;left:-14px;top:30px;background:#e3f6fd;color:#0088ac;border-radius:50%;width:29px;height:29px;text-align:center;font-size:14px;line-height:29px}.capabilities .icon-disc{width:64px;height:64px;margin-left:15px}.capabilities .icon-disc svg{width:32px;height:32px}.value-chain{text-align:center}.value-chain article{position:relative}.value-chain article+article:before{content:'→';position:absolute;left:-25px;top:20px;font-size:27px;color:#0090ae}.value-chain .icon-disc{box-shadow:0 2px 8px #91d3e83d;border:1px solid #d1effa}.value-chain h3{text-transform:uppercase;font-size:15px}.science-layout{grid-template-columns:1fr 1.3fr}.science-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;text-align:center}.science-chain article{min-width:0;display:flex;flex-direction:column;align-items:center}.science-chain h3{font-size:14px;margin-bottom:4px}.mock-home .science-chain .small{font-size:12px}.science-chain img{width:100%;height:180px;object-fit:contain;margin:auto 0}.ontology,.semantic{position:relative;width:100%;height:180px;margin:auto 0;display:flex;flex-direction:column;align-items:center;justify-content:center}.ontology svg{width:40px;height:40px;color:#097fad}.ontology i{width:115px;height:40px;border-radius:50%;background:#9ce5f767;margin-top:-15px}.ontology i:first-of-type{margin-top:8px}.semantic i{position:absolute;width:100px;height:100px;transform:rotate(30deg) skewX(-30deg) scaleY(.65);background:radial-gradient(#72d8f299,#d8f6ff77);border:1px solid #cfedf8;top:15px}.semantic i:nth-child(2){top:42px}.semantic i:nth-child(3){top:69px}.semantic i:nth-child(4){top:96px}.science-note{max-width:850px;margin-left:auto}.mock-home .contact-section{padding:48px 0 65px;background:repeating-radial-gradient(ellipse at 100% 160%,transparent 0 18px,#d5effa66 19px 20px,transparent 21px 31px),linear-gradient(#fff,#f6fbff)}.contact-section h2{font-size:30px}.contact-actions{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;padding-top:20px;gap:40px}.mock-home .closing-line{font-size:14px;align-self:flex-end;margin:25px 0 0;padding:14px 18px;background:#f5fbffb8;border-left:1px solid #c1e1ef}
@media(max-width:1100px){.mock-container{width:calc(100% - 56px)}.mock-header{flex-wrap:wrap;padding:14px 0;gap:12px}.mock-header>.mock-button{display:none}.mock-home .v2-nav{order:3;width:100%}.mock-home .menu-toggle{margin-left:auto}.mock-home .nav-enhanced .v2-nav{display:none}.mock-home .nav-enhanced .v2-nav.is-open{display:flex}.two-col,.problem-layout{gap:30px}.network-figure{grid-template-columns:minmax(0,1fr) 110px}.level-labels{gap:22px;padding-left:12px}.level-labels p{font-size:11px}.level-labels p:before{left:-16px}.decision{flex-direction:column;align-items:flex-start;gap:10px}.mock-home .decision p{border:0;padding:0}.benefits,.capabilities,.value-chain{gap:15px}.mock-button{padding:11px 16px}.hero-layout{grid-template-columns:1fr 1fr}.mock-home .intro{font-size:18px}}
@media(max-width:800px){.mock-home section{padding:36px 0}.hero-layout,.two-col,.problem-layout,.science-layout{grid-template-columns:1fr;gap:28px}.mock-home h1{font-size:42px}.mock-home h2{font-size:30px}.network-figure{max-width:650px;width:100%;margin:auto;grid-template-columns:minmax(0,1fr) 135px}.level-labels p{font-size:13px}.layered{border:0;padding:0}.hero-layout>.network-figure img{max-height:390px}.mock-home .intro{max-width:60ch}.benefits,.capabilities,.value-chain{gap:24px}.mock-home .capabilities p,.mock-home .value-chain p,.mock-home .science-chain p{font-size:16px}.decision{flex-direction:row;align-items:center}.contact-actions{padding:0;gap:20px}.science-chain img{height:200px}.ontology,.semantic{height:200px}}
@media(max-width:480px){.mock-container{width:calc(100% - 36px)}.mock-brand{font-size:28px}.mock-brand svg{width:38px;height:38px}.mock-header{min-height:70px}.mock-home h1{font-size:34px}.mock-home h2,.contact-section h2{font-size:27px}.mock-home p{font-size:16px}.mock-home .intro{font-size:18px}.mock-home .kicker{font-size:11px;letter-spacing:.1em}.mock-home .v2-nav{flex-direction:column;align-items:stretch;gap:0;max-height:70vh;overflow:auto}.mock-home .v2-nav>a{font-size:15px;padding:12px}.actions{gap:12px}.actions .mock-button{width:100%;min-height:48px}.network-figure{grid-template-columns:minmax(0,1fr) 94px}.level-labels{gap:19px}.level-labels p{font-size:10px}.charts{gap:14px}.charts figure+figure{padding-left:14px}.charts h3{font-size:15px}.charts figcaption{font-size:12px;min-height:65px}.note{padding:16px;gap:14px;align-items:flex-start}.mock-home .note p{font-size:14px}.benefits,.capabilities,.value-chain{grid-template-columns:1fr 1fr;gap:24px 20px}.benefits h3{font-size:15px}.decision{flex-direction:column}.decision strong{white-space:normal}.capabilities h3{min-height:0;font-size:16px}.mock-home .capabilities p{font-size:16px}.value-chain article+article:before{display:none}.science-chain{grid-template-columns:1fr;gap:28px}.science-chain article{max-width:280px;margin:auto}.science-chain h3{font-size:17px}.mock-home .science-chain p{font-size:16px}.science-chain img{height:190px}.science-chain .small{font-size:13px}.science-note{margin-top:30px}.mock-home .closing-line{font-size:13px}.mock-home [id]{scroll-margin-top:90px}}
@media(prefers-reduced-motion:reduce){.mock-home *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* The opening illustration omits the level labels repeated in DYNOR. */
.mock-hero .network-figure{grid-template-columns:minmax(0,1fr)}

/* Visible contact details and social profile. */
.mock-footer{background:#fff;border-top:1px solid #eaf3f8;padding:22px 0}
.mock-footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 28px}
.mock-home .mock-footer p{font-size:14px;margin:0}
.footer-contact{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px}
.footer-contact a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-size:16px;text-decoration:none}
.footer-contact a:hover{text-decoration:underline;text-underline-offset:4px;color:var(--accent)}
.linkedin-link svg{flex-shrink:0}

/* UX iteration: readable diagrams, concrete use and optional technical depth. */
.mock-home .kicker { font-size:13px; }
.mock-home .v2-nav { gap:18px; }
.mock-home .mock-header { gap:20px; }
.mock-home .action-context,
.mock-home .contact-guidance { font-size:14px; line-height:1.6; margin:16px 0 0; }
.mock-home .contact-guidance { max-width:52ch; }
.mock-home .chart-context { font-size:13px; margin-bottom:18px; }
.charts figcaption { font-size:14px; min-height:66px; }
.chart-months { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); padding-left:5%; color:var(--copy); font-size:13px; text-align:center; }
.chart-comparison { min-width:0; }
.mock-home .level-labels p { font-size:14px; }
.mock-home .layered { grid-template-columns:minmax(0,1fr) 155px; }
.mock-home .usage-example { border:1px solid #c9e1ed; border-radius:12px; background:#f5fbfe; padding:28px; margin-top:32px; }
.mock-home .usage-example h3 { font-size:22px; margin-bottom:14px; }
.mock-home .usage-example>p:not(.kicker) { max-width:75ch; font-size:16px; }
.usage-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding:0; margin:26px 0 0; list-style:none; counter-reset:usage; }
.usage-steps li { counter-increment:usage; }
.usage-steps li:before { content:counter(usage,decimal-leading-zero); display:block; color:var(--accent); font-size:14px; font-weight:600; margin-bottom:8px; }
.usage-steps strong { display:block; font-size:17px; margin-bottom:8px; }
.mock-home .usage-steps p { font-size:16px; margin:0; }
.mock-home .science-layout { align-items:start; }
.science-details { min-width:0; border:1px solid #c9e1ed; border-radius:10px; background:white; padding:0 22px; }
.science-details summary { cursor:pointer; padding:18px 0; min-height:52px; font-size:17px; font-weight:600; }
.science-details[open] summary { border-bottom:1px solid #e0edf4; margin-bottom:22px; }
.science-details .science-chain { padding-bottom:24px; }
.mock-home .science-note { max-width:none; }
.mock-home .two-col>* { min-width:0; }
@media (min-width:801px) and (max-width:1100px) {
  .capabilities,.benefits,.value-chain { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
  .value-chain article+article:before { display:none; }
  .science-chain { grid-template-columns:1fr; gap:24px; }
  .science-chain article { max-width:380px; }
}
@media (max-width:800px) {
  .mock-home .layered { grid-template-columns:minmax(0,1fr) 170px; }
  .mock-home .science-chain .small { font-size:13px; }
}
@media (max-width:600px) {
  .charts { grid-template-columns:1fr; gap:24px; }
  .charts figure+figure { border-left:0; border-top:1px dashed #bfd4e2; padding:22px 0 0; }
  .charts figcaption { min-height:0; }
  .charts svg { max-height:210px; }
  .mock-home .layered { grid-template-columns:1fr; gap:16px; }
  .layered img { max-height:250px; }
  .level-labels { gap:16px; padding-left:16px; }
  .level-labels p { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; }
  .level-labels p:before { left:-20px; }
  .mock-home .level-labels p { font-size:14px; }
  .usage-steps { grid-template-columns:1fr; gap:22px; }
  .mock-home .usage-example { padding:22px; }
  .science-chain { grid-template-columns:1fr; gap:26px; }
  .science-chain article { max-width:340px; }
  .decision { flex-direction:column; align-items:flex-start; }
  .decision strong { white-space:normal; }
  .mock-home .decision p { border:0; padding:0; }
}
@media (max-width:360px) {
  .capabilities,.value-chain { grid-template-columns:1fr; gap:26px; }
  .value-chain article { text-align:left; }
  .value-chain .icon-disc { margin-bottom:10px; }
}
/* Allow text enlargement without clipping or hiding content. */
.mock-home main,.mock-footer { overflow-wrap:anywhere; }
.mock-home .decision strong { white-space:normal; }
.mock-home .v2-nav>a { white-space:normal; }
.mock-home .mock-button { max-width:100%; }

/* Conceptual motion is opt-in through JS and never moves the reading layout. */
.network-art { position:relative; width:100%; }
.mock-home .network-art img { width:100%; height:auto; max-height:none; }
.network-motion { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0; }
.motion-enabled .network-motion { opacity:1; }
.network-caption { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-top:8px; }
.mock-home .network-caption p { flex:1 1 210px; font-size:13px; margin:0; }
.motion-toggle { font:inherit; font-size:14px; color:var(--ink); background:white; border:1px solid #8bafc2; border-radius:6px; min-height:44px; padding:9px 12px; cursor:pointer; }
.motion-toggle[hidden] { display:none; }
.network-signals path { stroke:#0084a3; stroke-width:4; stroke-linecap:round; stroke-dasharray:22 110; animation:network-signal 3.2s linear infinite; }
.network-pulses circle { stroke-width:3; fill:#5bc4df; fill-opacity:.12; transform-box:fill-box; transform-origin:center; animation:network-pulse 3.6s ease-out infinite; }
.network-pulses circle:nth-child(2),.network-signals path:nth-child(2) { animation-delay:-1.4s; }
.network-pulses circle:nth-child(3),.network-signals path:nth-child(3) { animation-delay:-2.8s; }
.network-pulses circle:nth-child(4),.network-signals path:nth-child(4) { animation-delay:-4.2s; }
.network-pulses circle:nth-child(5) { animation-delay:-3.5s; }
.hero-network:not(.motion-running) .network-motion * { animation-play-state:paused; }
@keyframes network-signal { from { stroke-dashoffset:132; } to { stroke-dashoffset:0; } }
@keyframes network-pulse { 0% { transform:scale(.7); opacity:.95; } 60% { opacity:.4; } 100% { transform:scale(2.4); opacity:0; } }
@media (prefers-reduced-motion:reduce) {
  .network-motion { display:none; }
  .network-motion * { animation:none!important; }
}
