/* Interactive ecosystem: semantic icons and outward connection flow. */
.hero.hero-space {padding-bottom:calc(var(--space-7) + var(--space-6));}
.connect { --connect-shadow: color-mix(in srgb, var(--color-navy) 15%, transparent); width:100%; max-width:400px; margin-inline:auto; padding-block:0 .5rem; }
.connect-heading {display:flex;justify-content:center;align-items:center;gap:.5rem;color:var(--color-primary-700);font-size:.875rem;font-weight:600;letter-spacing:.03em;}
.connect-heading > span {width:.45rem;height:.45rem;border-radius:50%;background:var(--color-teal);box-shadow:0 0 0 5px var(--color-teal-soft);}
.connect-stage {position:relative;aspect-ratio:1;isolation:isolate;perspective:900px;transform:perspective(900px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .25s ease-out;}
.connect-stage::before {content:"";position:absolute;inset:25%;border-radius:50%;background:radial-gradient(ellipse,var(--color-primary-soft-2),transparent 70%);filter:blur(12px);z-index:-1;opacity:.4;}
.connect-orbit {position:absolute;inset:11%;border:1px solid var(--color-border-strong);border-radius:50%;transform:rotate(-25deg) scaleY(.91);opacity:.65;}
.connect-orbit::after {content:"";position:absolute;inset:12%;border:1px dashed var(--color-border-strong);border-radius:50%;}
.connect-wires {position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;}
.connect-wires path {stroke:var(--color-border-strong);stroke-width:.35;transition:stroke .25s,stroke-width .25s;}
.connect-wires path.is-active {stroke:var(--color-primary);stroke-width:.65;filter:drop-shadow(0 0 2px var(--color-sky));}
.connect-wires circle {fill:var(--color-teal);}
.connect-core {position:absolute;left:50%;top:47%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:28%;background:linear-gradient(145deg,var(--color-surface),var(--color-primary-soft));border:2px solid var(--color-surface);box-shadow:0 8px 0 var(--color-primary-soft-2),0 11px 0 var(--color-border-strong),0 24px 35px var(--connect-shadow),inset 0 -6px 12px var(--color-primary-soft);display:flex;flex-direction:column;align-items:center;justify-content:center;}
.connect-core-mark {font-size:clamp(1.5rem,3vw,2.3rem);line-height:1;color:var(--color-primary);transform:rotate(-12deg);filter:drop-shadow(2px 3px 0 var(--color-primary-soft-2));margin-bottom:.5rem;}
.connect-core strong {font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.1;letter-spacing:-.04em;color:var(--color-navy);}
.connect-core strong span {display:block;color:var(--color-primary);font-size:.76em;letter-spacing:.01em;margin-top:.25rem;}
.connect-core small {font-size:clamp(.55rem,1vw,.65rem);margin-top:.6rem;color:var(--color-text-muted);}
.connect-node {--node-face:var(--color-primary);--node-depth:var(--color-primary-800);--node-light:var(--color-sky);position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:20%;text-align:center;text-decoration:none;color:var(--color-text);border:0;background:none;padding:0;cursor:pointer;outline-offset:5px;border-radius:16px;-webkit-tap-highlight-color:transparent;}
.connect-node--teal {--node-face:var(--color-teal);--node-depth:var(--color-teal-ink);--node-light:var(--color-teal-soft);}
.connect-node--gold {--node-face:var(--color-accent);--node-depth:var(--color-accent-ink);--node-light:var(--color-accent-soft);}
.connect-tile {position:relative;display:grid;place-items:center;width:80%;aspect-ratio:1;margin:0 auto .65rem;border:1px solid var(--color-surface);border-radius:27%;background:linear-gradient(145deg,var(--color-surface),var(--color-primary-soft));box-shadow:0 5px 0 var(--color-border-strong),0 13px 18px var(--connect-shadow),inset 0 0 0 3px var(--color-surface);transform:rotate(-8deg) rotateY(-12deg) rotateX(12deg);transition:transform .25s,box-shadow .25s;}
.connect-tile i {font-size:clamp(1.65rem,3.2vw,2.6rem);line-height:1;color:var(--node-face);text-shadow:1px 1px var(--node-depth),2px 2px var(--node-depth),3px 3px var(--node-depth),4px 5px 8px var(--connect-shadow);transform:translateY(-3px);}
.connect-tile::after {content:"";position:absolute;inset:7%;border-top:2px solid var(--color-surface);border-radius:24%;pointer-events:none;}
.connect-label {font-size:.875rem;font-weight:600;display:inline-block;padding:.15rem .6rem;border-radius:20px;transition:background .2s;color:var(--color-text-2);}
.connect-node:hover .connect-tile,.connect-node.is-active .connect-tile,.connect-node:focus-visible .connect-tile {transform:translateY(-7px) rotate(0deg);box-shadow:0 5px 0 var(--node-face),0 16px 25px var(--connect-shadow),inset 0 0 0 3px var(--color-surface);}
.connect-node.is-active .connect-label {background:var(--color-surface);color:var(--color-primary-700);}
.connect-node:focus-visible {outline:3px solid var(--color-primary);}
.connect-controls {display:flex;align-items:center;justify-content:center;gap:.5rem;margin:0 0 .5rem;}
.connect-hint {text-align:center;font-size:.75rem;color:var(--color-text-muted);margin:0;}
.connect-play {display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid var(--color-border-strong);border-radius:50%;color:var(--color-primary-700);background:var(--color-surface);cursor:pointer;}
.connect-play[hidden] {display:none;}
.connect-play:focus-visible {outline:3px solid var(--color-primary);outline-offset:3px;}
.connect-detail {border:1px solid var(--color-surface);border-radius:20px;background:color-mix(in srgb,var(--color-surface) 80%,transparent);box-shadow:0 10px 30px var(--connect-shadow);padding:1.15rem 1.35rem;min-height:10.5rem;backdrop-filter:blur(12px);}
.connect-detail h2 {font-size:1rem;line-height:1.5;margin:0 0 .35rem;color:var(--color-navy);}
.connect-detail p {font-size:.875rem;line-height:1.7;color:var(--color-text-muted);margin:0 0 .5rem;}
.connect-detail > a {font-size:.875rem;font-weight:600;color:var(--color-primary-700);text-decoration:none;display:inline-block;padding:.2rem 0;}
.connect-detail > a:hover {text-decoration:underline;}
/* Keep the complete module close to the old globe's footprint. */
.connect-orbit {opacity:.25;}
.connect-core {width:30%;}
.connect-core-mark {font-size:1.5rem;margin-bottom:.3rem;}
.connect-core strong {font-size:1.1rem;}
.connect-core small {font-size:.5rem;margin-top:.4rem;}
.connect-node {width:19%;}
.connect-tile {margin-bottom:.35rem;}
.connect-tile i {font-size:1.65rem;}
.connect-label {font-size:.75rem;padding:.1rem .35rem;}
.connect-detail {padding:.75rem 1rem;min-height:8rem;border-radius:16px;}
.connect-detail h2 {font-size:.875rem;margin-bottom:.2rem;}
.connect-detail p {font-size:.75rem;line-height:1.6;margin-bottom:.25rem;}
.connect-detail > a {font-size:.75rem;}
@media (max-width:991.98px) {.connect {max-width:360px;margin-top:1rem;}}
@media (max-width:359.98px) {.connect-core small{display:none;}.connect-core-mark{font-size:1.25rem;}.connect-tile i{font-size:1.4rem;}}
@media (prefers-reduced-motion:reduce) {.connect-stage{transform:none!important;}.connect *{transition:none!important;}}

/* Keep the heading outside the icon field, including its hover movement. */
.connect-heading {position:relative;z-index:2;line-height:1.6;margin-bottom:1.5rem;text-align:center;transform:none;}
.connect-heading > span {box-shadow:none;flex-shrink:0;}
.connect-core,.connect-core-mark,.connect-tile,.connect-tile i {box-shadow:none;filter:none;text-shadow:none;}
.connect-core {background:var(--color-surface);border:1px solid var(--color-border-strong);}
.connect-core-mark {transform:none;}
.connect-core--logo {width:34%;padding:0;overflow:hidden;border-radius:24%;}
.connect-logo {display:block;width:100%;height:100%;object-fit:contain;}
.connect-tile {width:88%;border:1px solid var(--color-border-strong);background:var(--color-surface);transform:none;transition:transform .2s,border-color .2s,background .2s;}
.connect-tile::after {display:none;}
.connect-tile i {font-size:1.85rem;transform:none;color:var(--node-face);}
.connect-node:hover .connect-tile,.connect-node.is-active .connect-tile,.connect-node:focus-visible .connect-tile {box-shadow:none;transform:translateY(-3px);border:2px solid var(--node-face);background:var(--color-primary-soft);}
.connect-node--teal:hover .connect-tile,.connect-node--teal.is-active .connect-tile {background:var(--color-teal-soft);}
.connect-node--gold:hover .connect-tile,.connect-node--gold.is-active .connect-tile {background:var(--color-accent-soft);}
.connect-label {color:var(--color-navy);line-height:1.5;}
.connect-wire {--wire-color:var(--color-primary);}
.connect-wire--teal {--wire-color:var(--color-teal);}
.connect-wire--gold {--wire-color:var(--color-accent);}
.connect-wire.is-active .connect-wire-base {stroke:var(--wire-color);stroke-width:.45;opacity:.35;}
.connect-wires .connect-wire-flow {stroke:var(--wire-color);stroke-width:.85;stroke-linecap:round;stroke-dasharray:16 84;stroke-dashoffset:16;opacity:0;}
.connect-wire.is-active .connect-wire-flow {opacity:1;animation:connect-outward 1.8s linear infinite;}
/* A negative offset moves the colored segment from the first point (SEEP)
   toward the last point (the selected icon), never in the reverse direction. */
@keyframes connect-outward {from {stroke-dashoffset:16;} to {stroke-dashoffset:-100;}}
@media (max-width:359.98px) {.connect-tile i{font-size:1.5rem;}}
/* ไอคอนที่อยู่เหนือโลโก้ : ชื่ออยู่ด้านบน กล่องไอคอนหันเข้าหาโลโก้ ให้เส้นวิ่งเข้ากล่องเหมือนไอคอนอื่น */
.connect-node--above {display:flex;flex-direction:column-reverse;align-items:center;}
.connect-node--above .connect-tile {margin:.35rem auto 0;}
@media (prefers-reduced-motion:reduce) {
    .connect-wire.is-active .connect-wire-flow {animation:none;stroke-dasharray:none;stroke-dashoffset:0;}
}