/* Network map */
.network .section-head { margin-bottom: 40px; }
.map-shell { position: relative; margin-inline: calc(-1 * min(24px, 2vw)); }
.map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.worldmap { display: block; width: 100%; min-width: 640px; height: auto; }
.m-land { fill: #3A1D78; }
.m-act { fill: #6746B4; stroke: var(--indigo); stroke-width: .6; transition: fill .2s ease; }
.m-arc { fill: none; stroke: var(--sky); stroke-width: 1.3; stroke-linecap: round; opacity: .85; stroke-dasharray: 3 4; animation: flow 1.6s linear infinite; transition: opacity .2s ease, stroke-width .2s ease; }
.m-dot { fill: var(--sky); stroke: var(--indigo); stroke-width: 1.5; transition: r .2s ease; }
.m-hub { fill: var(--paper); stroke: var(--sky); stroke-width: 2; }
.m-hub-ring { fill: none; stroke: var(--sky); stroke-width: 1.5; transform-origin: center; transform-box: fill-box; animation: ring 2.4s ease-out infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }
@keyframes ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.worldmap.focus .m-arc { opacity: .14; }
.worldmap.focus .m-arc.on { opacity: 1; stroke-width: 2.4; }
.worldmap .m-act.on { fill: var(--sky); }
.worldmap .m-dot.on { r: 5.5; }
@media (prefers-reduced-motion: reduce) { .m-arc, .m-hub-ring { animation: none; } .m-arc { stroke-dasharray: none; } .m-hub-ring { display: none; } }
.map-hint { display: none; font-family: var(--body); font-size: 12px; color: var(--on-dark-soft); margin-top: 8px; }
@media (max-width: 680px) { .map-hint { display: block; } }
.map-key { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; font-family: var(--body); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--on-dark-soft); }
.map-key span { display: inline-flex; align-items: center; gap: 8px; }
.key-hub { width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--sky); }
.key-dest { width: 9px; height: 9px; border-radius: 50%; background: var(--sky); }
.regions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 44px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 32px; }
.region { display: grid; gap: 12px; align-content: start; min-width: 0; }
.region h3 { font-family: var(--body); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); line-height: 1.4; }
.region ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.region button { font: inherit; font-size: 14px; font-weight: 700; color: var(--on-dark); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.region button:hover, .region button.on { background: var(--sky); color: var(--indigo); border-color: var(--sky); }
.region .home { background: var(--paper); color: var(--indigo); border-color: var(--paper); cursor: default; }
@media (max-width: 1000px) { .regions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .regions { grid-template-columns: 1fr; } }
.net-note { margin-top: 36px; max-width: 40em; color: var(--on-dark-soft); font-size: 16px; }
.net-note strong { color: var(--on-dark); }

/* Logo intro: only shown when the head script sets html.intro-on. The whole timeline is CSS, so it always ends. */
.intro { display: none; }
html.intro-on .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--paper); animation: intro-out .8s cubic-bezier(.7,0,.2,1) 2.2s forwards; }
html.intro-on .intro.skip { animation: intro-skip .45s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes intro-out { to { transform: translateY(-100%); visibility: hidden; } }
@keyframes intro-skip { to { transform: translateY(-100%); visibility: hidden; } }
.intro-logo { display: flex; align-items: center; gap: clamp(14px, 2vw, 26px); }
.intro-emblem { width: clamp(64px, 8.4vw, 110px); height: auto; aspect-ratio: 1; }
.intro-emblem .e-bg { animation: emblem-in .6s cubic-bezier(.2,.7,.2,1) .1s both; }
.intro-emblem .e-dark { animation: dark-in .6s cubic-bezier(.2,.7,.2,1) .3s both; }
.intro-emblem .e-blue { animation: blue-in .6s cubic-bezier(.2,.7,.2,1) .42s both; }
.intro-word { display: flex; align-items: baseline; gap: .16em; color: var(--indigo); font-family: var(--display); font-size: clamp(50px, 7.4vw, 96px); line-height: 1; }
.intro-name { font-weight: 800; letter-spacing: -0.02em; }
.intro-name span { display: inline-block; animation: letter-in .7s cubic-bezier(.2,.7,.2,1) calc(.55s + var(--i) * .08s) both; }
@keyframes letter-in { from { opacity: 0; transform: translateY(.4em); filter: blur(8px); } }
.intro-ip { font-weight: 300; animation: ip-in .8s ease-out 1.05s both; }
@keyframes ip-in { from { opacity: 0; transform: translateX(-.2em); letter-spacing: .12em; } }
/* Hold the hero's own entrance until the intro has lifted */
html.motion.intro-on .hero [data-reveal] { transition-delay: calc(var(--d, 0s) + 2.4s); }
html.motion.intro-on .art-emblem .e-bg { animation-delay: 2.5s; }
html.motion.intro-on .art-emblem .e-dark { animation-delay: 2.8s; }
html.motion.intro-on .art-emblem .e-blue { animation-delay: 2.95s; }

/* ===== Motion layer ===== */
.progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
.progress i { display: block; height: 100%; width: 100%; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); }
.nav { transition: background .3s ease, box-shadow .3s ease; }
.nav.scrolled { background: rgba(251,250,254,.97); box-shadow: 0 10px 30px -22px rgba(42,15,94,.5); }

/* Reveal: content is visible by default; motion only when JS and motion are allowed */
html.motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
html.motion [data-reveal="scale"] { transform: translateY(18px) scale(.96); }
html.motion [data-reveal].in { opacity: 1; transform: none; }

/* Button sheen */
.sheen { position: relative; overflow: hidden; isolation: isolate; }
.sheen::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); }
.sheen:hover::after { transform: translateX(120%); transition: transform .7s ease; }
html.motion .hero .sheen::after { animation: sheen 5s ease-in-out 1.6s infinite; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

/* Hero art entrance: the square swells in, then the two curves slide into place */
html.motion .art-emblem .e-bg { animation: emblem-in 1s cubic-bezier(.2,.7,.2,1) .2s both; }
html.motion .art-emblem .e-dark { animation: dark-in 1s cubic-bezier(.2,.7,.2,1) .5s both; }
html.motion .art-emblem .e-blue { animation: blue-in 1s cubic-bezier(.2,.7,.2,1) .65s both; }
@keyframes emblem-in { from { opacity: 0; transform: scale(.86); } }
@keyframes dark-in { from { opacity: 0; transform: translate(-40%, -20%); } }
@keyframes blue-in { from { opacity: 0; transform: translateY(45%); } }
.e-bg, .e-dark, .e-blue { transform-box: fill-box; transform-origin: center; }

/* Ticker, straight and flush under the hero */
.ticker-tilt { position: relative; z-index: 2; }
.ticker:hover .ticker-track { animation-play-state: paused; }

/* Services hover */
.svc { transition: background .25s ease; border-radius: 0; }
.svc-sym { transition: transform .4s cubic-bezier(.2,.8,.2,1.3); display: inline-block; justify-self: start; }
.svc:hover .svc-sym { transform: rotate(-12deg) scale(1.15); }
.svc h3 { transition: color .2s ease; }

/* Map: routes draw in */
html.motion .m-arc.draw { transition: stroke-dashoffset 1.4s cubic-bezier(.4,.1,.2,1); }
.m-arc { animation: none; stroke-dasharray: none; }

/* Founder photo slideshow: a scroll-snap strip, so it swipes and works without JS; the script adds arrows, dots and autoplay */
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 24px; aspect-ratio: 4 / 5; background: var(--indigo); }
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline-offset: 4px; border-radius: 24px; }
.slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: start; overflow: hidden; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.slide-wide img { object-position: 38% 50%; }
.slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 24px 22px; display: grid; gap: 6px; background: linear-gradient(transparent, rgba(42,15,94,.9)); color: var(--paper); }
.slide figcaption .label { color: var(--lilac); font-size: 11px; }
.slide figcaption strong { font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.2; }
.slides-ui { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.slides-nav { font: inherit; font-size: 18px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--indigo); background: transparent; color: var(--indigo); cursor: pointer; transition: background .18s ease, color .18s ease; }
.slides-nav:hover { background: var(--indigo); color: var(--paper); }
.slides-dots { display: flex; gap: 8px; }
.slides-dots button { width: 28px; height: 5px; padding: 0; border: 0; border-radius: 5px; background: rgba(42,15,94,.22); cursor: pointer; transition: background .2s ease, width .2s ease; }
.slides-dots button[aria-current="true"] { width: 44px; background: var(--purple); }

.region .home { font-size: 14px; font-weight: 700; border: 1px solid var(--paper); border-radius: 999px; padding: 6px 12px; display: inline-block; }