/* Sculpted light, real CSS perspective, and a six-face Kokantech core. */
.connected-hero {
  background: radial-gradient(ellipse at 80% 32%,#163551 0,transparent 44%),radial-gradient(ellipse at 18% 0,#17314a55,transparent 42%),#071627;
  isolation: isolate;
}
.connected-hero::before { width: 1100px; height: 1100px; top: -500px; right: -480px; border-color: #7fa6ce12; box-shadow: 0 0 0 80px #7fa6ce04,0 0 0 160px #7fa6ce03; }
.connected-hero::after { content: ''; position: absolute; pointer-events: none; z-index: -1; inset: 0; background: radial-gradient(600px circle at var(--light-x,72%) var(--light-y,40%),#82b8e20c,transparent 65%); }
.connected-grid { padding-top: 60px; padding-bottom: 48px; }
.connected-copy { position: relative; z-index: 2; }
.connected-copy h1 { text-shadow: 0 4px 35px #0002; }
.connected-copy h1>span { background: linear-gradient(100deg,#ffb37f 0%,#ff8b45 38%,#f96721 72%,#ffb37f 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ambition-light 10s ease-in-out infinite alternate; }
.connected-actions .button { background: linear-gradient(140deg,#ff9d5a,#ff7229 45%,#f4510b); box-shadow: inset 0 1px 0 #ffd2b8,0 6px 0 #812d10,0 16px 35px #f4510b28; border: 1px solid #ffb27b66; border-radius: 6px; transition: transform .25s,box-shadow .25s; }
.connected-actions .button:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #ffe1d0,0 9px 0 #812d10,0 20px 40px #f4510b38; }
.connected-actions .button:active { transform: translateY(3px); box-shadow: inset 0 1px #ffd2b8,0 2px 0 #812d10,0 9px 22px #f4510b28; }
.connected-visual { perspective: 1100px; }
.signal-map { aspect-ratio: 1.16; perspective: 1000px; isolation: auto; }
.scene-aura { position: absolute; inset: 9% -3%; border-radius: 50%; background: radial-gradient(ellipse,#f5782729 0%,#3973ab13 40%,transparent 69%); animation: aura-breathe 7s ease-in-out infinite alternate; }
.scene-floor { position: absolute; left: 4%; right: 4%; height: 56%; bottom: -9%; background-image: linear-gradient(#89b6df18 1px,transparent 1px),linear-gradient(90deg,#89b6df18 1px,transparent 1px); background-size: 31px 31px; transform: rotateX(66deg); mask-image: radial-gradient(ellipse,#000,transparent 67%); }
.scene-floor::after { content: ''; position: absolute; inset: 23% 27%; background: #ff823033; filter: blur(30px); border-radius: 50%; }
.scene-depth { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--scene-x,0deg)) rotateY(var(--scene-y,0deg)); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.orbital-system { --core-size: clamp(86px,12vw,145px); --half-core: calc(var(--core-size) / 2); position: absolute; inset: 0; transform-style: preserve-3d; }
.orbital-ring { position: absolute; width: 79%; aspect-ratio: 1; top: 3%; left: 10.5%; border: 2px solid #ff8c4766; border-top-color: #ffb786; border-bottom-color: #c74c1a; border-radius: 50%; transform-style: preserve-3d; box-shadow: 0 2px 0 #873b1c,0 -1px 0 #ffe2c755,inset 0 0 12px #f4510b18,0 0 15px #f4510b0c; }
.ring-one { transform: rotateX(66deg) rotateY(-15deg) rotateZ(-24deg); }
.ring-two { width: 68%; left: 16%; top: 9%; border-color: #9dbad438; border-top-color: #dcecff99; box-shadow: 0 2px 0 #496781,0 -1px 0 #d5e8fa44; transform: rotateX(65deg) rotateY(59deg) rotateZ(28deg); }
.ring-three { width: 86%; left: 7%; top: -1%; border-width: 1px; border-color: #8cb4d326; box-shadow: none; transform: rotateX(22deg) rotateY(-49deg) rotateZ(-25deg); }
.orbital-track { position: absolute; inset: -1px; border-radius: 50%; transform-style: preserve-3d; animation: orbit-turn 20s linear infinite; }
.orbital-track i { position: absolute; width: 13px; height: 13px; top: 50%; left: -6px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#fff6e4,#ffb174 35%,#d45110 76%); box-shadow: 0 0 17px #ff874580; }
.ring-two .orbital-track { animation-duration: 27s; animation-direction: reverse; }.ring-two i { background: radial-gradient(circle at 30% 25%,#fff,#b4d8f0 35%,#4f7fa6 76%); box-shadow: 0 0 15px #b4d8f044; width: 10px; height: 10px; }
.ring-three .orbital-track { animation-duration: 36s; animation-delay: -9s; }.ring-three i { width: 6px; height: 6px; }
.core-float { position: absolute; width: var(--core-size); height: var(--core-size); left: calc(50% - var(--half-core)); top: calc(46% - var(--half-core)); transform-style: preserve-3d; animation: core-levitate 7s ease-in-out infinite; }
.dimensional-core { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transform: rotateX(-19deg) rotateY(-29deg) rotateZ(8deg); animation: core-turn 14s ease-in-out infinite alternate; }
.core-face { position: absolute; inset: 0; border: 1px solid #b8d1e47a; backface-visibility: hidden; background: linear-gradient(145deg,#466078,#152e46 48%,#10243b); box-shadow: inset 0 0 0 5px #a4c9e00d,inset 0 0 0 6px #b9d9ed24,inset 0 1px 2px #ecf7ff7a; }
.core-front { transform: translateZ(var(--half-core)); display: grid; place-items: center; background: radial-gradient(ellipse at 10% 0,#7398b275,transparent 75%),linear-gradient(145deg,#29465f,#0a1c31); }
.core-front svg { width: 71%; filter: drop-shadow(0 2px 1px #0009) drop-shadow(0 0 15px #ff874531); }
.core-back { transform: rotateY(180deg) translateZ(var(--half-core)); }
.core-right { transform: rotateY(90deg) translateZ(var(--half-core)); background: linear-gradient(115deg,#24445e,#071425); }
.core-left { transform: rotateY(-90deg) translateZ(var(--half-core)); }
.core-top { transform: rotateX(90deg) translateZ(var(--half-core)); background: linear-gradient(125deg,#68869b,#1c364e); }
.core-bottom { transform: rotateX(-90deg) translateZ(var(--half-core)); }
.core-serial { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 5px; letter-spacing: 1px; color: #adc4d6; }
.core-corner { position: absolute; width: 12px; height: 12px; border-color: #ffb484; border-style: solid; }.corner-one { top: 11px; left: 11px; border-width: 2px 0 0 2px; }.corner-two { bottom: 11px; right: 11px; border-width: 0 2px 2px 0; }
.core-vents { position: absolute; inset: 20%; background: repeating-linear-gradient(0deg,#020b14 0 3px,#799bb447 3px 4px,transparent 4px 10px); }
.core-chip { position: absolute; inset: 29%; border: 1px solid #bbd6e48c; background: #143048; box-shadow: 0 0 0 5px #4c6b82,0 0 0 6px #c2d9ea70; }
.core-chip::before { content: ''; position: absolute; inset: 30%; border: 1px solid #ffb484; background: #ff8745; box-shadow: 0 0 12px #ff874585; }
.signal-node { z-index: 3; border-radius: 7px; border-color: #7890a34d; padding: 11px 13px; background: linear-gradient(135deg,#25425be8,#10263ae8); box-shadow: 0 8px 0 -5px #030d1ba6,0 17px 27px #0004,inset 0 1px 0 #bdd8f124; transform: translateZ(45px); animation: label-hover 7s ease-in-out infinite; }
.signal-node.is-active { background: linear-gradient(135deg,#573728f5,#261e20f5); box-shadow: 0 8px 0 -5px #311407,0 14px 35px #f4510b20,inset 0 1px 0 #ffd0ad70; }
.node-software { top: 10%; left: 0; animation-delay: -1s; }.node-cloud { top: 13%; right: 0; animation-delay: -4s; }
.node-ai { top: 46%; left: -1%; animation-delay: -2s; }.node-security { top: 48%; right: -1%; animation-delay: -5s; }
.node-strategy { top: 78%; left: 5%; animation-delay: -3s; }.node-support { top: 77%; right: 3%; animation-delay: -6s; }
.scene-particles { position: absolute; inset: 0; transform: translateZ(-40px); }
.scene-particles i { position: absolute; width: 3px; height: 3px; background: #a4c9e1; box-shadow: 0 0 7px #a4c9e1; border-radius: 50%; animation: particle-drift 8s ease-in-out infinite; animation-delay: calc(var(--particle) * -.7s); }
.scene-particles i:nth-child(3n) { background: #ff9e63; box-shadow: 0 0 8px #ff9e63; width: 4px; height: 4px; }
.signal-coordinate { bottom: -1%; font-size: 8px; letter-spacing: .21em; color: #a2b9ce; }
.scene-toolbar { display: flex; gap: 12px; justify-content: space-between; align-items: center; min-height: 35px; margin: 15px 0 19px; }
.scene-hint { font-size: 8px; letter-spacing: .11em; color: #9eb5c9; }
.signal-caption { position: relative; background: linear-gradient(115deg,#ffffff06,#ffffff02); border: 1px solid #ffffff15; border-left: 2px solid #f9843f; border-radius: 0 8px 8px 0; padding: 17px 21px; max-width: none; box-shadow: 0 10px 28px #0000000e; }
.signal-caption h2 { margin-top: 5px; }.signal-caption p { min-height: 44px; }
.expertise-tabs button { transition: background .25s,box-shadow .25s; }.expertise-tabs button[aria-selected=true] { background: linear-gradient(180deg,#ff874513,transparent); box-shadow: inset 0 12px 24px -20px #ff8745; }
.service-grid { gap: 22px; border: 0; perspective: 1400px; }
.service-card { --tilt-x: 0deg; --tilt-y: 0deg; border: 1px solid #d8e2eb; border-radius: 12px; background: linear-gradient(135deg,#fff,#f4f7fa); box-shadow: 0 4px 0 #dce4eb70,0 14px 30px #10244005; transform: perspective(950px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .3s ease,box-shadow .3s,background .25s,border-color .25s; }
.service-card::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; border-radius: inherit; background: radial-gradient(340px circle at var(--card-x,50%) var(--card-y,0%),#ffb27820,transparent 65%); }
.service-card>* { position: relative; }
.service-card:is(:hover,:focus-visible) { transform: perspective(950px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-7px); box-shadow: 0 5px 0 #0a1623,0 23px 42px #10244022,inset 0 1px 0 #7f9bb4; border-color: #223d56; background: linear-gradient(145deg,#244057,#0c2037 85%); }
.service-card .service-icon { width: 55px; height: 55px; border-radius: 12px; border: 1px solid #fff; background: linear-gradient(140deg,#fff,#e4ebf1); box-shadow: 4px 5px 0 #d9e3ec,0 8px 15px #183b5112; transform: rotate(-6deg); transition: transform .3s,box-shadow .3s,background .3s; }
.service-card .service-icon svg { width: 28px; height: 28px; transform: rotate(6deg); }
.service-card:is(:hover,:focus-visible) .service-icon { transform: rotate(0deg) translateY(-3px); background: linear-gradient(140deg,#314f68,#11293f); border-color: #6b879b; box-shadow: 4px 5px 0 #09182b,0 0 23px #ff874510; }
.service-card .card-link span { transition: transform .3s,background .3s; }.service-card:hover .card-link span { transform: rotate(90deg); }
.home-page .approach-section { border: 1px solid #416481; border-radius: 16px; background: radial-gradient(ellipse at 0 100%,#244762,#0c233a 65%); box-shadow: inset 0 1px 0 #a7c8e52b,0 12px 0 -6px #081828; }
.home-page .approach-section::after { content: ''; position: absolute; width: 360px; height: 360px; border: 1px solid #92bdd629; border-radius: 50%; top: -170px; right: -50px; box-shadow: 0 0 0 30px #92bdd607,0 0 0 60px #92bdd606; transform: rotateX(55deg) rotateY(-25deg); pointer-events: none; }
.principle { transition: transform .3s; }.principle:hover { transform: translateX(6px); }.principle>span { box-shadow: 2px 3px 0 #050f1d; background: linear-gradient(140deg,#2c4860,#102940); }
.industry-panel { box-shadow: 0 7px 0 -3px #dbe4ed,0 18px 40px #0d213d08; border-radius: 0 0 12px 12px; }
.cta { border-radius: 14px; box-shadow: inset 0 1px 0 #ffceac,0 9px 0 -3px #bb3d0b,0 25px 50px #f4510b20; background: linear-gradient(120deg,#ff9c5d,#fa6d27 40%,#f4510b); }
.cta .button { box-shadow: 0 4px 0 #0004,0 8px 20px #49200820; border-radius: 5px; }
@keyframes ambition-light { to { background-position: 100% center; } }
@keyframes aura-breathe { from { opacity: .65; transform: scale(.94); } to { opacity: 1; transform: scale(1.07); } }
@keyframes orbit-turn { to { transform: rotateZ(360deg); } }
@keyframes core-levitate { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
@keyframes core-turn { from { transform: rotateX(-19deg) rotateY(-29deg) rotateZ(8deg); } to { transform: rotateX(-13deg) rotateY(-42deg) rotateZ(3deg); } }
@keyframes label-hover { 0%,100% { transform: translateZ(45px) translateY(0); } 50% { transform: translateZ(45px) translateY(-7px); } }
@keyframes particle-drift { 0%,100% { opacity: .2; transform: translateY(4px); } 50% { opacity: .8; transform: translateY(-12px); } }
html:not(.motion-ready) .connected-hero *,html.motion-paused .connected-hero *,html.scene-idle .connected-hero * { animation-play-state: paused !important; }
html.motion-paused .scene-depth,html.motion-paused .service-card { transform: none !important; }
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after { transition: none !important; }
@media(max-width:1150px) { .signal-node { padding: 9px 10px; }.connected-grid { padding-top: 48px; }.scene-hint { font-size: 7px; }.scene-toolbar { gap: 8px; } }
@media(min-width:741px) and (max-width:940px) { .signal-map { aspect-ratio: .94; }.orbital-ring { top: 14%; }.ring-two { top: 19%; }.ring-three { top: 10%; }.node-software,.node-cloud { top: 15%; }.signal-node { padding: 8px; font-size: 7px; }.signal-node>span { font-size: 14px; }.scene-hint { max-width: 110px; }.signal-caption { padding: 15px; } }
@media(max-width:740px) {
  .connected-grid { padding-top: 39px; gap: 22px; }.signal-map { aspect-ratio: 1.2; }.orbital-system { --core-size: clamp(92px,22vw,135px); }
  .scene-toolbar { margin-top: 15px; }.scene-hint { font-size: 8px; }.signal-node { padding: 9px 11px; }.node-ai { left: 0; }.node-security { right: 0; }
  .service-grid { gap: 18px; }.home-page .approach-section { border-radius: 0; border-inline: 0; }.signal-caption { margin-top: 0; }
}
@media(max-width:540px) {
  .signal-map { aspect-ratio: 1.05; }.orbital-ring { top: 10%; }.ring-two { top: 16%; }.ring-three { top: 7%; }
  .signal-node { padding: 8px; font-size: 8px; }.signal-node b { display: none; }.node-software,.node-cloud { top: 10%; }
  .signal-coordinate { font-size: 7px; }.scene-toolbar { margin-block: 14px; }.scene-hint { font-size: 7px; max-width: 140px; }.signal-caption { padding: 15px 17px; }
  .signal-caption p { min-height: 0; }.core-serial { font-size: 4px; letter-spacing: .5px; bottom: 8px; }.core-corner { width: 9px; height: 9px; }
  .connected-actions .button { min-height: 51px; }.service-grid { gap: 18px; }
}
@media(hover:none),(pointer:coarse) { .scene-depth { transform: none; }.service-card:is(:hover,:focus-visible) { transform: none; } }
@media(prefers-reduced-motion:reduce) {
  .connected-hero * { animation: none !important; }.scene-depth,.service-card,.service-card:is(:hover,:focus-visible) { transform: none !important; }
  .connected-copy h1>span { background: none; color: #ff9b60; }.dimensional-core { transform: rotateX(-19deg) rotateY(-29deg) rotateZ(8deg); }
}
@media print { .connected-copy h1>span { background: none; color: #333; }.connected-hero { background: #fff; }.service-card,.cta,.industry-panel { box-shadow: none; transform: none; } }