/* The connected field: motion explains a model, never live database activity. */
.hero-atlas { position:relative; isolation:isolate; }
.hero-drawing { display:block; width:100%; height:auto; fill:none; stroke:none; position:relative; z-index:1; }
.hero-drawing text { stroke:none; }
.atlas-aura { position:absolute; inset:11% 8% 26%; border-radius:50%; background:radial-gradient(ellipse,#d3ed9255,transparent 65%); opacity:.65; transform:scale(.8); animation:atlas-breathe 9s ease-in-out infinite paused; }
.hero-atlas.is-running .atlas-aura { animation-play-state:running; }
.atlas-trace { fill:none; stroke:#e3ff8c; stroke-width:4; stroke-linecap:round; stroke-dasharray:14 150; opacity:0; filter:drop-shadow(0 0 5px #6e9639); transition:opacity .6s; animation:atlas-signal 4s linear infinite paused; }
.hero-atlas.is-running .atlas-trace { animation-play-state:running; }
[data-phase="0"] .atlas-trace-records,[data-phase="1"] .atlas-trace-links,[data-phase="2"] .atlas-trace-forks,[data-phase="3"] .atlas-trace-events { opacity:1; }
.atlas-ring { fill:none; stroke:#d4ed8a; stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center; animation:atlas-ripple 4.2s ease-out infinite paused; }
.hero-atlas.is-running .atlas-ring { animation-play-state:running; }
[data-phase="0"] .atlas-ring:not(.atlas-ring-branch),[data-phase="2"] .atlas-ring-branch { opacity:.8; }
.atlas-caption { display:flex; justify-content:space-between; gap:14px; align-items:center; padding:0 10px 17px; min-height:66px; }
.atlas-caption .mono { display:block; color:#637859; font-size:8px; letter-spacing:.09em; margin-bottom:7px; }
.atlas-caption strong { font-size:13px; font-weight:550; line-height:1.4; display:block; }
.motion-toggle { border:1px solid #aec09a; background:transparent; color:#405d35; border-radius:30px; padding:8px 11px; font:9px var(--mono); white-space:nowrap; cursor:pointer; min-height:32px; }
.motion-toggle:hover { background:#dce9c5; }
.motion-toggle:disabled { cursor:default; opacity:.7; }
.motion-toggle[hidden],.atlas-steps[hidden] { display:none; }
.atlas-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; margin:0 10px 17px; }
.atlas-steps button { border:0; border-top:2px solid #cdd6c4; padding:10px 0 3px; background:transparent; color:#6e7e62; font:8px var(--mono); cursor:pointer; }
.atlas-steps button[aria-pressed="true"] { border-color:#456d2d; color:#214c3d; }
.hero h1 > span { color:#68806a; }
.hero .button-dark { box-shadow:0 7px 24px #16392f14; }
.philosophy-section { padding-top:80px; padding-bottom:85px; }
.philosophy-lead { display:grid; grid-template-columns:1.2fr 1fr; gap:20px 90px; align-items:end; }
.philosophy-lead > .eyebrow { grid-column:1/-1; }
.philosophy-lead h2 { font-size:clamp(34px,4vw,56px); line-height:1.12; letter-spacing:-.055em; margin:0; }
.philosophy-lead h2 em { font-style:normal; color:#69834e; }
.philosophy-lead > p { font-size:15px; line-height:1.85; color:var(--muted); max-width:430px; margin:0; }
.philosophy-ribbon { display:grid; grid-template-columns:1fr 48px 1fr 48px 1fr; align-items:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:45px; padding:32px 0; }
.philosophy-ribbon article { padding:0 20px; }
.philosophy-ribbon article:first-child { padding-left:0; }
.philosophy-ribbon .mono { font-size:9px; color:#678053; letter-spacing:.06em; }
.philosophy-ribbon h3 { font-size:29px; font-weight:500; letter-spacing:-.05em; margin:12px 0; }
.philosophy-ribbon p { font-size:12px; line-height:1.8; color:var(--muted); max-width:245px; margin:0; }
.ribbon-join { width:37px; height:37px; display:grid; place-items:center; background:#e1edc9; border-radius:50%; color:#5f7f42; font-size:21px; }
.philosophy-bottom { display:flex; justify-content:space-between; gap:24px; padding-top:22px; align-items:center; }
.philosophy-bottom p { font-size:12px; color:var(--muted); margin:0; }
.philosophy-bottom a { font-size:12px; }
.advantage-map-header { align-items:center; flex-wrap:wrap; gap:12px; padding-block:14px; }
.advantage-map-header > .mono { margin-right:auto; }
.advantage-map-header .map-concept { width:100%; font-size:7px; letter-spacing:.13em; }
.advantages-section.is-running .is-current .map-connection { animation:map-flow 2.8s linear infinite; }
.advantages-section:not(.is-running) .is-current .map-connection { animation-play-state:paused; }
.technology-invitation { background:linear-gradient(105deg,#d4ed8a,#e8f5be 50%,#cbe88a); position:relative; overflow:hidden; }
.technology-invitation::after { content:''; position:absolute; right:30%; top:-20px; width:190px; height:190px; border-top:2px solid #9cbb6040; border-right:2px solid #9cbb6040; transform:rotate(-12deg); pointer-events:none; }
.technology-invitation .container { position:relative; z-index:1; padding-block:48px; }
.technology-invitation h2 { max-width:630px; font-size:clamp(27px,3vw,43px); letter-spacing:-.05em; }
@keyframes atlas-signal { to { stroke-dashoffset:-328; } }
@keyframes atlas-ripple { 0%,100% { transform:scale(.75); } 55% { transform:scale(1.4); } }
@keyframes atlas-breathe { 50% { transform:scale(1.15); opacity:1; } }
@media (min-width:1200px) { .hero-grid { grid-template-columns:1.04fr 1.06fr; gap:25px; } .hero-world { margin-right:-16px; } }
@media (max-width:1000px) { .philosophy-lead { gap:20px 40px; } .atlas-caption { padding-inline:0; } .atlas-caption strong { font-size:11px; } .motion-toggle { font-size:8px; padding:8px; } }
@media (max-width:760px) { .philosophy-section { padding-block:60px; } .philosophy-lead { grid-template-columns:1fr; gap:24px; } .philosophy-ribbon { grid-template-columns:1fr; margin-top:30px; padding:25px 0; gap:17px; } .philosophy-ribbon article { padding:0; } .philosophy-ribbon h3 { margin-block:8px; font-size:27px; } .philosophy-ribbon p { max-width:100%; } .ribbon-join { transform:rotate(90deg); width:28px; height:28px; font-size:17px; } .philosophy-bottom { flex-direction:column; align-items:flex-start; gap:15px; } .hero-drawing { max-height:430px; } .atlas-caption strong { font-size:13px; } }
@media (max-width:390px) { .atlas-caption { align-items:flex-start; gap:8px; min-height:70px; } .atlas-caption strong { font-size:11px; max-width:175px; } .atlas-caption .mono { font-size:7px; } .atlas-steps { margin-inline:0; } .atlas-steps button { font-size:7px; } }
@media (prefers-reduced-motion:reduce) { .hero-atlas *, .advantages-section .is-current .map-connection { animation:none!important; transition:none!important; } }
@media print { .atlas-steps,.motion-toggle { display:none!important; } .hero-atlas * { animation:none!important; } }