/* Commodo expressive design system. Base site.css retains product and legal layouts. */
:root { --navy:#061d45; --ink:#17345b; --green:#79d7ff; --green-dark:#225789; --muted:#52647d; --light:#f2f6fc; --cyan:#a9baff; --ease:cubic-bezier(.22,1,.36,1); }
body { font-family:"Segoe UI",Arial,sans-serif; }
.container { max-width:1280px; }
h1,h2,h3 { font-weight:750; letter-spacing:-.055em; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #2786ab; outline-offset:5px; }
.site-header { background:#061d45f5; border-bottom:1px solid #ffffff18; color:#f3f8f8; }
.header-inner { min-height:84px; }
.brand strong { font-size:1.55rem; }
.brand strong span { color:var(--green); }
.brand small { color:#c5d8ee; font-size:.65rem; letter-spacing:.08em; }
#primary-navigation { gap:32px; }
#primary-navigation > a:not(.button) { position:relative; min-height:44px; display:flex; align-items:center; }
#primary-navigation > a:not(.button)::after { content:""; position:absolute; bottom:5px; left:0; right:0; height:2px; background:var(--green); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
#primary-navigation > a:hover::after { transform:scaleX(1); }
.button { border-radius:100px; transition:transform .2s var(--ease),background .2s,box-shadow .2s; }
.button > span { transition:transform .2s; }
.button:hover { transform:translateY(-3px); box-shadow:0 8px 25px #061d4515; }
.button:hover > span { transform:translate(3px,-2px); }
.button-primary { background:var(--green); color:#061d45; }
.button-primary:hover { background:#b1eaff; color:#061d45; }
.hero { position:relative; background:radial-gradient(ellipse at 85% 25%,#245cb060,transparent 55%),linear-gradient(135deg,#061d45,#12346a); color:#f6fbfa; padding:92px 0 96px; }
.hero-grid { gap:40px; grid-template-columns:1.05fr 1fr; position:relative; z-index:1; }
.hero .eyebrow { color:var(--green); font-size:.7rem; }
.hero h1 { font-size:clamp(3rem,5.8vw,5.7rem); line-height:1.02; }
.hero h1 span { color:var(--green); }
.corporate-hero h1 span { background:linear-gradient(100deg,var(--green),var(--cyan)); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero-lead { font-size:1.2rem; font-weight:550; max-width:470px; }
.hero-description,.hero-note,.hero .visual-note,.hero .visual-caption { color:#c5d8ee; }
.hero .button-outline { color:#f1f7f8; border-color:#58707d; }
.hero .button-outline:hover { background:#ffffff12; }
.hero .eyebrow,.hero h1,.hero-lead,.hero-description,.hero .actions { animation:hero-arrive .65s var(--ease) both; }
.hero h1 { animation-delay:.06s; }.hero-lead { animation-delay:.12s; }.hero-description { animation-delay:.18s; }.hero .actions { animation-delay:.24s; }
@keyframes hero-arrive { from { transform:translateY(18px); } to { transform:translateY(0); } }
/* Five-second, finite motion keeps the decorative scene from running indefinitely. */
.system-scene { position:relative; height:480px; min-width:0; isolation:isolate; animation:hero-arrive .7s var(--ease) both; }
.system-scene::before { content:""; position:absolute; inset:10% 0; background:radial-gradient(ellipse,#a9baff23,transparent 65%); }
.scene-orbit { position:absolute; border:1px solid #a9baff22; border-radius:50%; left:50%; top:47%; width:320px; height:320px; transform:translate(-50%,-50%) rotate(-25deg); }
.orbit-two { width:440px; height:220px; transform:translate(-50%,-50%) rotate(-30deg); }
.connection-lines { position:absolute; inset:10px 0; width:100%; height:440px; overflow:visible; fill:none; stroke:#a9baff40; stroke-width:1.5; }
.signal-path { stroke:var(--cyan); stroke-dasharray:14 420; animation:signal 4.5s linear 1; }
@keyframes signal { from { stroke-dashoffset:440; } to { stroke-dashoffset:0; } }
.system-node { position:absolute; display:flex; gap:12px; align-items:center; padding:15px 18px; background:linear-gradient(135deg,#254b78ee,#15325bee); border:1px solid #a9baff2e; border-radius:14px; box-shadow:0 18px 35px #0003; }
.system-node small,.system-hub small { display:block; color:#c5d8ee; font-size:.68rem; }
.system-node strong { font-size:.86rem; display:block; }
.node-symbol { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; color:var(--green); background:#79d7ff12; font-size:1.3rem; }
.node-symbol.cyan { color:var(--cyan); background:#a9baff12; }
.node-top { left:2%; top:8%; transform:rotate(-4deg); }
.node-right { right:0; top:20%; transform:rotate(4deg); }
.node-left { left:0; bottom:20%; transform:rotate(-3deg); }
.node-bottom { right:2%; bottom:8%; transform:rotate(3deg); }
.system-hub { position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:164px; height:164px; border-radius:30px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:linear-gradient(135deg,#28577e,#15325b); border:1px solid #79d7ff80; box-shadow:0 0 60px #79d7ff15,0 25px 40px #0004; }
.hub-mark { color:var(--green); font-size:3.5rem; font-weight:800; line-height:1; letter-spacing:-.1em; padding-right:8px; }
.hub-mark > span { color:var(--cyan); }.system-hub strong { font-size:1.1rem; margin:6px 0; }
.scene-caption { position:absolute; bottom:-22px; left:0; width:100%; text-align:center; color:#c5d8ee; font-size:.75rem; }
.scene-caption > span { display:inline-block; width:6px; height:6px; background:var(--cyan); border-radius:50%; margin-right:8px; }
.value-strip { background:#12346a; border-top:1px solid #ffffff12; color:#c5d8ee; padding:22px 0; }
.section { padding:104px 0; }
.eyebrow { font-size:.7rem; }
.section h2 { font-size:clamp(2.1rem,4vw,3.8rem); }
.product-card { position:relative; overflow:hidden; min-height:390px; background:linear-gradient(120deg,#e2edf9,#f2f6fc); border-radius:24px; padding:48px; padding-right:52%; border:1px solid #e2edf9; }
.product-card > p:not(.eyebrow) { max-width:440px; }
.product-card h3 { font-size:2.6rem; }
.product-availability { font-size:.78rem; color:var(--muted); }
.product-illustration { position:absolute; width:36%; right:5%; top:48px; padding:25px; background:white; border:1px solid #e2edf9; border-radius:18px; box-shadow:0 24px 50px #17354818; transform:rotate(-3deg); transition:transform .4s var(--ease); }
.product-card:hover .product-illustration { transform:rotate(0) translateY(-4px); }
.mini-top { display:flex; justify-content:space-between; gap:10px; font-size:.8rem; font-weight:700; border-bottom:1px solid var(--line); padding-bottom:18px; }
.mini-top small { font-weight:400; color:var(--muted); }
.product-illustration h4 { font-size:1.25rem; margin:22px 0; font-weight:700; letter-spacing:-.04em; }
.mini-check { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0; border-bottom:1px solid #e7eee4; font-size:.78rem; }
.mini-check span { color:#225789; background:#e6f1dd; border-radius:5px; padding:3px 8px; font-size:.65rem; font-weight:700; }
.mini-check .mini-fail { color:#883b19; background:#fff0dd; }
.product-illustration > p { margin:18px 0 0; font-size:.7rem; color:var(--muted); }
.services-grid { grid-template-columns:1fr 1fr; gap:0 64px; }
.services-grid .feature-card { display:grid; grid-template-columns:42px 1fr; gap:0 24px; padding:30px 0; border-top:1px solid #e2edf9; }
.services-grid .feature-symbol { grid-row:span 3; font-size:.85rem; border-radius:50%; background:#e2edf9; }
.services-grid .feature-card h3 { font-size:1.4rem; }
.services-grid .feature-card p { grid-column:2; }
.services-grid .service-example { font-size:.8rem; margin-top:15px; color:#225789; }
.about-section { position:relative; background:radial-gradient(ellipse at 8% 90%,#245cb060,transparent 60%),var(--navy); }
.section-navy .section-lead { color:#eff7f8; }
.section-navy .problem-grid p:last-child { color:#c5d8ee; }
.about-section .problem-grid > div > p:not(.eyebrow) { color:#c5d8ee; }
.about-section .problem-grid { align-items:start; }
.steps li { border-top:2px solid #e2edf9; }
.step-number { font-size:1rem; display:inline-flex; background:#e2edf9; width:42px; height:42px; align-items:center; justify-content:center; border-radius:50%; letter-spacing:0; }
.final-cta { background:radial-gradient(ellipse at 50% 100%,#e2edf9,transparent 65%),#f2f6fc; }
.contact-section { background:radial-gradient(ellipse at 0% 0%,#e2edf9,transparent 60%),#f2f6fc; }
.contact-card { box-shadow:0 22px 65px #17345b10; }
.site-footer { background:#061d45; }
.product-nav { background:#12346a; color:#d8e7eb; }
.product-nav .container { display:flex; flex-wrap:wrap; gap:8px 30px; padding-top:12px; padding-bottom:12px; }
.product-nav a { display:flex; align-items:center; min-height:44px; font-size:.82rem; }
.inspection-preview { color:var(--ink); }
.review-card { color:var(--ink); }
[data-reveal].reveal-running { animation:section-arrive .6s var(--ease); }
@keyframes section-arrive { from { transform:translateY(22px); opacity:.65; } to { transform:translateY(0); opacity:1; } }
.menu-toggle { color:inherit; border-color:#ffffff35; }
@media(min-width:901px) { .system-scene { transform:translateY(var(--scene-depth,0px)); } }
@media(max-width:1100px) { .hero h1 { font-size:clamp(3rem,6vw,4.6rem); }.system-node { padding:12px; gap:8px; }.system-node strong { font-size:.76rem; }.product-card { padding:36px; padding-right:50%; }.product-illustration { width:40%; right:4%; } }
@media(max-width:900px) {
    .hero-grid { grid-template-columns:1fr; gap:30px; }.hero { padding:54px 0 64px; }
    .hero h1 { font-size:clamp(3rem,8.5vw,5rem); }.hero-copy { max-width:690px; }
    .system-scene { width:100%; max-width:560px; margin:0 auto; height:440px; }
    .section { padding:72px 0; }.section-heading { align-items:start; }
    .header-inner { min-height:78px; }
    .js #primary-navigation { display:flex; flex-direction:column; align-items:stretch; gap:4px; max-height:0; visibility:hidden; overflow:hidden; padding-top:0; transition:max-height .3s var(--ease),padding .3s,visibility .3s; }
    .js #primary-navigation.is-open { visibility:visible; max-height:300px; padding-top:18px; }
    #primary-navigation .button { margin-top:8px; }
    .services-grid { gap:0 32px; }
}
@media(max-width:600px) {
    .container { padding-left:20px; padding-right:20px; }
    .hero h1 { font-size:clamp(2.6rem,11.5vw,4rem); }.hero .eyebrow { font-size:.62rem; letter-spacing:.1em; }
    .hero-lead { font-size:1.12rem; }.hero-description { font-size:.95rem; }
    .brand small { font-size:.59rem; }.brand strong { font-size:1.35rem; }
    .system-scene { height:390px; }.system-hub { width:130px; height:130px; border-radius:24px; }
    .system-hub small { font-size:.57rem; }.system-hub strong { font-size:.95rem; }.hub-mark { font-size:2.8rem; }
    .system-node { padding:10px; gap:7px; border-radius:10px; }.system-node strong { font-size:.64rem; }.system-node small { font-size:.55rem; }
    .node-symbol { width:24px; height:24px; font-size:1rem; }.node-top { top:4%; left:0; }.node-right { top:22%; }.node-left { bottom:24%; }.node-bottom { bottom:5%; right:0; }
    .connection-lines { height:360px; }.scene-orbit { width:240px; height:240px; }.orbit-two { width:260px; height:150px; }
    .scene-caption { bottom:-14px; }.section { padding:62px 0; }
    .product-card { padding:26px; min-height:0; }.product-card h3 { font-size:2.1rem; }
    .product-illustration { position:relative; width:100%; top:auto; right:auto; margin:36px 0 8px; padding:22px; transform:rotate(-2deg); }
    .services-grid { grid-template-columns:1fr; gap:0; }.services-grid .feature-card { gap:0 16px; }
    .services-grid .feature-card h3 { font-size:1.25rem; }.section h2 { font-size:clamp(2rem,9vw,2.9rem); }
    .system-node { box-shadow:none; }.system-scene::before { display:none; }
    .product-nav .container { gap:4px 20px; }
}
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation:none!important; transition:none!important; }
    .system-scene { transform:none; }.signal-path { stroke-dasharray:none; opacity:.5; }
}

/* Keep the four system labels legible and separate on narrow phones. */
@media(max-width:600px) {
    .system-scene { height:350px; margin-top:14px; }
    .system-node { width:46%; min-height:74px; align-items:flex-start; gap:6px; }
    .system-node strong { font-size:.72rem; line-height:1.4; }
    .system-node small { font-size:.62rem; line-height:1.5; margin-bottom:4px; }
    .node-top { top:0; left:0; transform:rotate(-2deg); }
    .node-right { top:0; right:0; transform:rotate(2deg); }
    .node-left { bottom:14px; left:0; transform:rotate(-2deg); }
    .node-bottom { bottom:14px; right:0; transform:rotate(2deg); }
    .system-hub { top:48%; }
    .node-symbol { flex-shrink:0; width:20px; height:24px; font-size:1rem; }
}

.product-card-text { padding-right:48px; min-height:0; }

@media(min-width:601px) { .product-card:not(.product-card-text) { min-height:430px; overflow:visible; } }



.brand img { background:white; padding:3px; border-radius:8px; object-fit:contain; }
.system-hub .hub-logo { width:65px; height:65px; object-fit:contain; background:white; padding:6px; border-radius:14px; margin-bottom:3px; }
@media(max-width:600px) { .system-hub .hub-logo { width:52px; height:52px; padding:4px; border-radius:10px; } }

/* Blue/red identity and optional continuous motion. */
:root { --red:#ff5964; --red-light:#ff98a0; }
.site-header .button-primary,.final-cta .button-primary,.contact-card .button-primary { background:var(--red); color:#061d45; }
.site-header .button-primary:hover,.final-cta .button-primary:hover,.contact-card .button-primary:hover { background:var(--red-light); }
.brand strong span { color:var(--red); }
.hero .button-outline { border-color:var(--red); }
.hero .button-outline:hover { background:#ff596415; }
.eyebrow::before { content:""; display:inline-block; width:18px; height:3px; margin-right:9px; vertical-align:middle; background:#cb3749; }
.hero .eyebrow::before,.section-navy .eyebrow::before { background:var(--red); }
.node-symbol.cyan { color:var(--red-light); background:#ff596418; }
.connection-lines .signal-path { stroke:var(--red-light); }
.system-hub { border-color:#79d7ff80; }
.brand img { background:transparent; padding:0; border-radius:0; }
.system-hub .hub-logo { background:transparent; padding:0; border-radius:0; width:65px; height:65px; }
.system-node { --node-angle:-4deg; }
.node-right { --node-angle:4deg; }.node-left { --node-angle:-3deg; }.node-bottom { --node-angle:3deg; }
.motion-enabled .signal-path { animation:signal 6s linear infinite; }
.motion-enabled .system-node { animation:node-float 5s ease-in-out infinite; }
.motion-enabled .node-right { animation-delay:-1.25s; }
.motion-enabled .node-left { animation-delay:-2.5s; }
.motion-enabled .node-bottom { animation-delay:-3.75s; }
@keyframes node-float { 0%,100% { transform:translateY(0) rotate(var(--node-angle)); } 50% { transform:translateY(-8px) rotate(var(--node-angle)); } }
.system-hub::after { content:""; position:absolute; inset:-8px; border:1px solid #ff596465; border-radius:36px; opacity:0; pointer-events:none; }
.motion-enabled .system-hub::after { animation:hub-pulse 4s ease-out infinite; }
@keyframes hub-pulse { 0% { transform:scale(.98); opacity:0; } 25% { opacity:.7; } 100% { transform:scale(1.2); opacity:0; } }
.motion-toggle { display:none; position:absolute; bottom:-56px; left:50%; transform:translateX(-50%); color:#c5d8ee; font-size:.7rem; min-height:36px; border:1px solid #79d7ff40; background:#061d45; border-radius:100px; padding:5px 14px; white-space:nowrap; }
.js .motion-toggle { display:inline-block; }
.system-scene[data-motion-paused="true"] *, .system-scene[data-motion-paused="true"]::before { animation-play-state:paused!important; }
.system-scene[data-motion-paused="true"] .system-hub::after { animation-play-state:paused!important; }
.scene-caption { bottom:-15px; }
@media(max-width:600px) {
    .motion-enabled .system-node { animation:none; }
    .system-hub .hub-logo { width:52px; height:52px; }
    .motion-toggle { min-height:44px; bottom:-67px; }
    .corporate-hero { padding-bottom:98px; }
}
@media(prefers-reduced-motion:reduce) {
    .js .motion-toggle { display:none; }
    .system-hub::after { display:none; }
}