:root {
  color-scheme: dark;
  --bg: #0a0e1a;
  --bg-soft: #0f1624;
  --surface: rgba(17, 25, 42, .72);
  --surface-strong: rgba(20, 30, 51, .93);
  --line: rgba(158, 190, 224, .14);
  --line-strong: rgba(0, 229, 255, .34);
  --cyan: #00e5ff;
  --violet: #b85cff;
  --pink: #ff0080;
  --text: #eff9ff;
  --muted: #9cadc4;
  --muted-2: #73849d;
  --radius: 24px;
  --shell: min(1180px, calc(100vw - 40px));
  --shadow: 0 30px 90px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 8%, rgba(0, 229, 255, .08), transparent 28rem),
    radial-gradient(circle at 86% 20%, rgba(184, 92, 255, .09), transparent 32rem),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  opacity: .24;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .brand { font-family: Orbitron, Inter, sans-serif; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-160%); opacity: 0; pointer-events: none; padding: 10px 14px; border-radius: 10px; background: var(--cyan); color: #001216; font-weight: 800; }
.skip-link:focus { transform: none; opacity: 1; pointer-events: auto; }

.page-effects { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.ambient-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.48;filter:saturate(1.1)}
.orb { position: absolute; width: 360px; aspect-ratio: 1; border-radius: 50%; filter: blur(100px); opacity: .09; animation: drift 18s ease-in-out infinite alternate; }
.orb-cyan { top: 12%; left: -140px; background: var(--cyan); }
.orb-violet { right: -130px; top: 52%; background: var(--violet); animation-delay: -6s; }
.scanlines { position: absolute; inset: 0; opacity: .025; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); }
@keyframes drift { to { transform: translate3d(70px, 55px, 0) scale(1.14); } }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 76px; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s, backdrop-filter .25s; }
.site-header.scrolled { background: rgba(7, 11, 22, .78); border-color: var(--line); backdrop-filter: blur(20px); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: .92rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.brand b { color: var(--cyan); font-weight: 700; }
.brand-mark { position: relative; display: grid; place-items: center; width: 36px; aspect-ratio: 1; border: 1px solid rgba(0,229,255,.48); border-radius: 9px; color: var(--cyan); background: linear-gradient(145deg, rgba(0,229,255,.12), rgba(184,92,255,.12)); box-shadow: inset 0 0 20px rgba(0,229,255,.08), 0 0 22px rgba(0,229,255,.08); }
.brand-mark::after { content: ""; position: absolute; inset: -4px; border: 1px solid rgba(184,92,255,.18); border-radius: 12px; }
.primary-nav { display: flex; align-items: center; gap: 30px; font-size: .86rem; font-weight: 600; }
.primary-nav a { position: relative; color: #c1cee0; transition: color .2s; }
.primary-nav a:not(.nav-contact)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--cyan); transition: right .2s; }
.primary-nav a:hover { color: #fff; }
.primary-nav a:hover::after { right: 0; }
.nav-contact { padding: 10px 17px; border: 1px solid rgba(0,229,255,.34); border-radius: 10px; color: var(--cyan) !important; background: rgba(0,229,255,.055); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; }
.menu-toggle > span:not(.sr-only) { width: 20px; height: 2px; background: #fff; transition: transform .2s, opacity .2s; }

.hero { position: relative; display: grid; align-items: center; min-height: 100svh; padding: 120px 0 90px; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 60vw; height: 60vw; max-width: 800px; max-height: 800px; right: -18vw; top: -20vw; border: 1px solid rgba(0,229,255,.07); border-radius: 50%; box-shadow: 0 0 0 90px rgba(184,92,255,.018), 0 0 0 180px rgba(0,229,255,.012); }
.hero-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(500px, 1.08fr); align-items: center; gap: clamp(42px, 6vw, 90px); }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--cyan); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow > span { width: 26px; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 8px var(--cyan); }
.hero h1 { margin-bottom: 24px; font-size: clamp(3.3rem, 7.7vw, 7.1rem); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; text-shadow: 0 10px 55px rgba(0,0,0,.4); }
.hero h1 span { display: block; width: fit-content; margin-top: .13em; color: transparent; background: linear-gradient(90deg, var(--cyan), #85f4ff 38%, var(--violet) 78%, var(--pink)); -webkit-background-clip: text; background-clip: text; }
.hero-lead { max-width: 680px; margin-bottom: 15px; color: #dceafb; font-size: clamp(1.15rem, 2vw, 1.52rem); line-height: 1.42; font-weight: 600; }
.hero-support { max-width: 620px; color: var(--muted); font-size: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.button { min-height: 49px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 21px; border: 1px solid transparent; border-radius: 12px; font-weight: 700; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #001318; background: linear-gradient(125deg, var(--cyan), #9ef7ff); box-shadow: 0 10px 34px rgba(0,229,255,.15); }
.button-primary:hover { box-shadow: 0 15px 42px rgba(0,229,255,.26); }
.button-secondary { border-color: rgba(184,92,255,.3); background: rgba(184,92,255,.065); }
.button-secondary:hover { border-color: rgba(184,92,255,.65); }

.hero-visual { position: relative; perspective: 1200px; }
.visual-frame { position: relative; overflow: hidden; border: 1px solid rgba(128,179,222,.2); border-radius: 24px; background: linear-gradient(150deg, rgba(19,30,50,.82), rgba(8,13,25,.94)); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.05); transform: rotateY(-5deg) rotateX(2deg); }
.visual-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 35%, rgba(0,229,255,.055), transparent 65%); transform: translateX(-100%); animation: sheen 7s ease-in-out infinite; }
@keyframes sheen { 35%, 100% { transform: translateX(100%); } }
.visual-topbar { height: 50px; display: flex; align-items: center; gap: 7px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--muted-2); font: 500 .62rem/1 Orbitron, sans-serif; letter-spacing: .08em; }
.visual-topbar i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }.visual-topbar i:first-child{background:var(--pink)}.visual-topbar i:nth-child(2){background:var(--violet)}.visual-topbar i:nth-child(3){background:var(--cyan)}.visual-topbar span{margin-left:auto}
.visual-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; padding: 14px; }
.visual-grid article { min-height: 120px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.visual-grid article strong { margin-top: 15px; font: 600 .82rem Orbitron, sans-serif; }.visual-grid article small{color:var(--muted);font-size:.68rem}.visual-grid .visual-primary{grid-row:span 2;min-height:270px;justify-content:space-between;background:radial-gradient(circle at 50% 46%,rgba(0,229,255,.12),transparent 42%),rgba(255,255,255,.025)}
.code-label { color: var(--cyan); font: 600 .58rem Orbitron, sans-serif; letter-spacing: .12em; }.pulse-logo{width:112px;aspect-ratio:1;display:grid;place-items:center;align-self:center;border:1px solid rgba(0,229,255,.3);border-radius:28px;color:var(--cyan);font:800 3.3rem Orbitron,sans-serif;background:rgba(0,229,255,.05);box-shadow:0 0 0 12px rgba(0,229,255,.025),0 0 60px rgba(0,229,255,.1)}
.code-lines{display:grid;gap:7px}.code-lines i{display:block;width:82%;height:4px;border-radius:9px;background:linear-gradient(90deg,rgba(0,229,255,.5),rgba(184,92,255,.18))}.code-lines i:nth-child(2){width:60%}.code-lines i:nth-child(3){width:72%}.visual-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(0,229,255,.2);border-radius:10px;color:var(--cyan);background:rgba(0,229,255,.05);font-size:1.1rem}
.floating-chip{position:absolute;z-index:2;padding:8px 11px;border:1px solid rgba(0,229,255,.26);border-radius:8px;background:rgba(8,14,26,.88);backdrop-filter:blur(14px);color:var(--cyan);font:600 .55rem Orbitron,sans-serif;letter-spacing:.12em;box-shadow:0 10px 40px rgba(0,0,0,.35)}.chip-one{top:18%;right:-22px}.chip-two{bottom:8%;left:-28px;color:var(--violet);border-color:rgba(184,92,255,.28)}
.scroll-cue { position: absolute; bottom: 23px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); color: var(--muted-2); font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; }.scroll-cue i{width:1px;height:24px;background:linear-gradient(var(--cyan),transparent)}

.section { position: relative; padding: clamp(90px, 11vw, 145px) 0; }
.section-heading { max-width: 750px; margin-bottom: 52px; }.section-heading h2,.about-copy h2,.contact-copy h2{margin-bottom:18px;font-size:clamp(2rem,4.5vw,3.7rem);line-height:1.12;letter-spacing:-.035em}.section-heading>p:last-child,.about-copy>p,.contact-copy>p{color:var(--muted);max-width:680px}.section-heading .eyebrow{margin-bottom:16px}
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.service-card { position: relative; min-height: 285px; display: flex; flex-direction: column; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(18,28,47,.7), rgba(10,15,29,.78)); box-shadow: inset 0 1px rgba(255,255,255,.03); transition: transform .25s, border-color .25s, background .25s; }
.service-card:hover { transform: translateY(-5px); border-color: rgba(0,229,255,.28); background: linear-gradient(145deg, rgba(20,34,54,.82), rgba(11,16,31,.88)); }.service-card::after{content:"";position:absolute;inset:auto -30% -70% 30%;height:180px;background:radial-gradient(circle,rgba(0,229,255,.1),transparent 65%);opacity:0;transition:opacity .25s}.service-card:hover::after{opacity:1}
.service-number { position: absolute; top: 23px; right: 23px; color: var(--muted-2); font: 600 .63rem Orbitron, sans-serif; }.service-icon{display:grid;place-items:center;width:49px;height:49px;margin-bottom:auto;border:1px solid rgba(0,229,255,.2);border-radius:14px;color:var(--cyan);background:rgba(0,229,255,.05);font-size:1.4rem}.service-card h3{margin:28px 0 10px;font-size:1.02rem}.service-card p{margin:0;color:var(--muted);font-size:.86rem}.service-wide{grid-column:span 2;min-height:180px;flex-direction:row;align-items:center;gap:25px}.service-wide .service-icon{margin:0;flex:0 0 60px;width:60px}.service-wide h3{margin:0 0 9px}

.portfolio-section { background: linear-gradient(180deg, transparent, rgba(15,22,36,.55) 14%, rgba(15,22,36,.45) 86%, transparent); }.portfolio-heading{max-width:none;display:flex;align-items:end;justify-content:space-between;gap:30px}.portfolio-heading>div{max-width:780px}.admin-trigger{flex:0 0 auto;padding:10px 14px;border:1px solid rgba(184,92,255,.3);border-radius:10px;background:rgba(184,92,255,.06);color:#dcc1ff;font-size:.75rem;cursor:pointer}.portfolio-status{padding:30px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center}.portfolio-status:empty{display:none}.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.portfolio-card{min-width:0}.portfolio-open{width:100%;padding:0;text-align:left;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(12,19,33,.74);box-shadow:0 24px 70px rgba(0,0,0,.18);cursor:pointer;transition:transform .3s,border-color .3s,box-shadow .3s}.portfolio-open:hover{transform:translateY(-7px);border-color:rgba(0,229,255,.32);box-shadow:0 28px 80px rgba(0,0,0,.35),0 0 40px rgba(0,229,255,.05)}.portfolio-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#080d18}.portfolio-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,12,23,.58),transparent 48%)}.portfolio-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.portfolio-open:hover img{transform:scale(1.035)}.portfolio-index{position:absolute;z-index:2;left:18px;top:18px;display:grid;place-items:center;min-width:38px;height:26px;padding:0 8px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(5,10,20,.6);backdrop-filter:blur(10px);color:#c9d8ea;font:.55rem Orbitron,sans-serif}.portfolio-arrow{position:absolute;z-index:2;right:18px;bottom:18px;display:grid;place-items:center;width:42px;aspect-ratio:1;border:1px solid rgba(0,229,255,.34);border-radius:50%;background:rgba(5,12,23,.7);color:var(--cyan);font-size:1.1rem;transition:transform .25s}.portfolio-open:hover .portfolio-arrow{transform:rotate(45deg)}.portfolio-body{display:block;padding:24px}.portfolio-body strong{display:block;margin:16px 0 10px;font:700 clamp(1.22rem,2.3vw,1.7rem) Orbitron,sans-serif}.portfolio-description{display:block;min-height:3.2em;color:var(--muted);font-size:.88rem}.portfolio-cta{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);color:#cbe7f1;font-size:.76rem;font-weight:700}.portfolio-cta i{color:var(--cyan);font-style:normal}.tag-list{display:flex;flex-wrap:wrap;gap:7px}.tag-list span{padding:5px 8px;border:1px solid rgba(0,229,255,.14);border-radius:7px;background:rgba(0,229,255,.035);color:#9edce4;font-size:.58rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase}

.about-layout{display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;gap:clamp(50px,10vw,140px)}.about-mark{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:390px;margin:auto;border:1px solid var(--line);border-radius:44px;background:radial-gradient(circle,rgba(0,229,255,.1),transparent 52%),rgba(255,255,255,.018);transform:rotate(-5deg)}.about-mark::before,.about-mark::after{content:"";position:absolute;inset:11%;border:1px solid rgba(184,92,255,.18);border-radius:34px;transform:rotate(12deg)}.about-mark::after{inset:25%;border-color:rgba(0,229,255,.2);transform:rotate(-24deg)}.about-mark span{z-index:1;color:transparent;background:linear-gradient(130deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;font:800 clamp(6rem,15vw,10rem) Orbitron,sans-serif}.about-mark i{position:absolute;width:8px;aspect-ratio:1;border-radius:50%;background:var(--pink);box-shadow:0 0 18px var(--pink);animation:blink 2.4s ease-in-out infinite}@keyframes blink{50%{opacity:.25;transform:scale(.7)}}.about-lead{color:#dce9f6!important;font-size:clamp(1.02rem,2vw,1.25rem);font-weight:600}.technology-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}.technology-list span{padding:8px 11px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font:600 .6rem Orbitron,sans-serif;letter-spacing:.09em}

.contact-section{padding-top:90px}.contact-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(45px,8vw,105px);align-items:start;padding:clamp(30px,5vw,62px);border:1px solid var(--line);border-radius:32px;background:linear-gradient(135deg,rgba(17,27,45,.72),rgba(8,13,25,.88));box-shadow:var(--shadow)}.contact-links{display:grid;gap:10px;margin-top:32px}.contact-links a{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);transition:border-color .2s}.contact-links a:hover{border-color:rgba(0,229,255,.3)}.contact-links a>span{grid-row:span 2;display:grid;place-items:center;width:40px;border-radius:10px;background:rgba(0,229,255,.06);color:var(--cyan);font-weight:800}.contact-links small{color:var(--muted-2);font-size:.67rem}.contact-links strong{min-width:0;overflow-wrap:anywhere;font-size:.82rem}.contact-form{display:grid;gap:16px}.contact-form label>span{display:block;margin-bottom:7px;color:#cbd9e9;font-size:.75rem;font-weight:700}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:rgba(4,9,19,.48);color:var(--text);padding:13px 14px;transition:border-color .2s,box-shadow .2s}.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(0,229,255,.5);box-shadow:0 0 0 4px rgba(0,229,255,.06);outline:0}.contact-form textarea{min-height:140px;resize:vertical}.honeypot{position:absolute;left:-9999px}.form-footer{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.form-footer p{margin:0;color:var(--muted);font-size:.78rem}.form-footer p.success{color:#7cf5d4}.form-footer p.error{color:#ff8dbd}

.site-footer{padding:80px 0 25px;border-top:1px solid var(--line);background:rgba(5,9,18,.4)}.footer-grid{display:grid;grid-template-columns:2fr repeat(3,1fr);gap:50px}.footer-grid>div{display:flex;flex-direction:column;align-items:flex-start;gap:9px}.footer-grid>div:first-child p{max-width:340px;margin:15px 0 0;color:var(--muted);font-size:.86rem}.footer-grid h3{margin-bottom:7px;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}.footer-grid>div:not(:first-child) a,.footer-auth{padding:0;border:0;background:none;color:var(--muted);font-size:.78rem;cursor:pointer}.footer-grid>div:not(:first-child) a:hover,.footer-auth:hover{color:var(--cyan)}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:55px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted-2);font-size:.67rem}

dialog{padding:0;color:var(--text);border:1px solid rgba(0,229,255,.2);background:#0b1220;box-shadow:0 40px 140px rgba(0,0,0,.75)}dialog::backdrop{background:rgba(1,5,12,.82);backdrop-filter:blur(10px)}.dialog-close{position:absolute;z-index:8;right:16px;top:16px;display:grid;place-items:center;width:42px;aspect-ratio:1;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(5,10,20,.72);font-size:1.5rem;cursor:pointer}.project-dialog{width:min(1040px,calc(100vw - 32px));max-height:calc(100svh - 32px);border-radius:26px;overflow:auto}.project-dialog-media{position:relative;min-height:320px;background:#050914}.project-dialog-media img{width:100%;max-height:62vh;aspect-ratio:16/9;object-fit:cover}.project-dialog-media::after{content:"";position:absolute;inset:auto 0 0;height:35%;pointer-events:none;background:linear-gradient(transparent,#0b1220)}.gallery-nav{position:absolute;z-index:3;top:50%;display:grid;place-items:center;width:42px;aspect-ratio:1;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(4,9,18,.68);cursor:pointer}.gallery-nav:disabled{display:none}.gallery-prev{left:18px}.gallery-next{right:18px}.gallery-count{position:absolute;z-index:3;right:18px;bottom:14px;padding:5px 9px;border-radius:8px;background:rgba(4,9,18,.68);font-size:.68rem}.project-dialog-copy{padding:clamp(25px,5vw,52px)}.project-dialog-copy h2{font-size:clamp(1.8rem,4vw,3rem);line-height:1.1}.project-dialog-copy>p:not(.eyebrow){max-width:780px;color:var(--muted)}.project-dialog-copy .tag-list{margin:22px 0 30px}.project-dialog-copy .button[hidden]{display:none}

.admin-dialog{width:min(1180px,calc(100vw - 26px));height:min(850px,calc(100svh - 26px));border-radius:24px;overflow:auto}.admin-header{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;padding:24px 70px 18px 28px;border-bottom:1px solid var(--line);background:rgba(11,18,32,.94);backdrop-filter:blur(18px)}.admin-header .eyebrow{margin-bottom:8px}.admin-header h2{margin:0;font-size:1.35rem}.admin-layout{display:grid;grid-template-columns:330px 1fr;min-height:calc(100% - 90px)}.admin-sidebar{padding:20px;border-right:1px solid var(--line)}.admin-toolbar{display:flex;gap:8px;margin-bottom:16px}.admin-toolbar button,.admin-project button,.admin-image button,.admin-danger,.admin-secondary{border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.03);padding:8px 10px;font-size:.72rem;cursor:pointer}.admin-toolbar button:first-child{flex:1;border-color:rgba(0,229,255,.25);color:var(--cyan)}.admin-project-list{display:grid;gap:8px}.admin-project{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px}.admin-project.active{border-color:rgba(0,229,255,.32);background:rgba(0,229,255,.04)}.admin-project-select{border:0!important;background:none!important;text-align:left!important;padding:0!important}.admin-project-select strong{display:block}.admin-project-select small{color:var(--muted)}.admin-order{display:flex;gap:4px}.admin-order button{padding:4px 7px}.admin-editor{padding:26px}.admin-empty{display:grid;place-items:center;min-height:400px;color:var(--muted);text-align:center}.admin-form{display:grid;gap:16px}.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.admin-form label>span{display:block;margin-bottom:6px;color:#c8d6e8;font-size:.72rem;font-weight:700}.admin-form input,.admin-form textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:rgba(3,8,17,.54);color:var(--text)}.admin-form textarea{min-height:105px;resize:vertical}.admin-check{display:flex;align-items:center;gap:9px}.admin-check input{width:auto}.admin-images{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.admin-image{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#070d18}.admin-image.cover{border-color:var(--cyan)}.admin-image img{width:100%;aspect-ratio:16/10;object-fit:cover}.admin-image-actions{display:flex;gap:5px;padding:7px}.admin-image-actions button{flex:1;padding:5px}.admin-image-actions button:last-child{color:#ff8dbd}.upload-zone{display:grid;place-items:center;min-height:100px;padding:18px;border:1px dashed rgba(0,229,255,.25);border-radius:12px;background:rgba(0,229,255,.025);text-align:center}.upload-zone input{max-width:100%}.admin-actions{display:flex;align-items:center;gap:10px;padding-top:8px}.admin-actions .button{border:0}.admin-danger{margin-left:auto;color:#ff8dbd;border-color:rgba(255,0,128,.25)}.admin-message{margin:0;color:var(--muted);font-size:.75rem}.admin-message.error{color:#ff8dbd}.admin-message.success{color:#7cf5d4}.admin-bootstrap{padding:12px;border:1px dashed rgba(184,92,255,.3);border-radius:12px;color:var(--muted);font-size:.75rem}.admin-bootstrap button{margin-top:8px}

.scroll-progress{position:fixed;z-index:90;inset:0 0 auto;height:2px;pointer-events:none;background:linear-gradient(90deg,var(--cyan),var(--violet) 68%,var(--pink));box-shadow:0 0 18px rgba(0,229,255,.55);transform:scaleX(var(--scroll-progress,0));transform-origin:left center;will-change:transform}
.cursor-glow{position:fixed;inset:0 auto auto 0;width:520px;aspect-ratio:1;border-radius:50%;opacity:.13;background:radial-gradient(circle,rgba(0,229,255,.34),rgba(184,92,255,.09) 34%,transparent 68%);filter:blur(24px);transform:translate3d(calc(var(--cursor-x,50vw) - 50%),calc(var(--cursor-y,50vh) - 50%),0);transition:opacity .3s;will-change:transform}
.brand-mark{animation:brand-breathe 4.5s ease-in-out infinite}.brand-mark::after{animation:brand-ring 4.5s ease-in-out infinite}
.primary-nav a.current:not(.nav-contact){color:#fff}.primary-nav a.current:not(.nav-contact)::after{right:0;box-shadow:0 0 10px var(--cyan)}.nav-contact.current{border-color:rgba(0,229,255,.7);box-shadow:0 0 24px rgba(0,229,255,.1)}
.hero::after{content:"";position:absolute;inset:18% auto auto 54%;width:clamp(220px,32vw,520px);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(0,229,255,.08),transparent 34%,rgba(184,92,255,.09),transparent 72%);filter:blur(2px);animation:hero-orbit 22s linear infinite;pointer-events:none}
.hero-layout{position:relative;z-index:1}
.hero h1 span{background-size:220% 100%;animation:title-flow 6s ease-in-out infinite}
.eyebrow>span{position:relative;overflow:hidden}.eyebrow>span::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-110%);animation:eyebrow-signal 3.2s ease-in-out infinite}
.button-primary span{transition:transform .25s}.button-primary:hover span{transform:translate(2px,2px)}
.visual-frame{--tilt-x:0deg;--tilt-y:0deg;transform:rotateY(calc(-5deg + var(--tilt-x))) rotateX(calc(2deg + var(--tilt-y)));transition:transform .18s ease-out,border-color .35s,box-shadow .35s;will-change:transform}
.hero-visual:hover .visual-frame{border-color:rgba(0,229,255,.32);box-shadow:0 38px 110px rgba(0,0,0,.45),0 0 70px rgba(0,229,255,.08),inset 0 1px rgba(255,255,255,.07)}
.visual-frame::before{content:"";position:absolute;z-index:4;inset:-35% 0 auto;height:24%;pointer-events:none;background:linear-gradient(transparent,rgba(0,229,255,.09),transparent);animation:frame-scan 5.5s linear infinite}
.build-status{display:flex;align-items:center;gap:7px}.build-status b{min-width:62px;color:var(--cyan);font-size:.58rem;transition:opacity .18s,transform .18s}.build-status b.switching{opacity:0;transform:translateY(-5px)}.build-status em{width:5px;aspect-ratio:1;border-radius:50%;background:#65ffcf;box-shadow:0 0 10px #65ffcf;animation:status-blink 1.4s ease-in-out infinite}
.visual-grid article{position:relative;overflow:hidden;transition:transform .3s,border-color .3s,background .3s}.visual-grid article::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(0,229,255,.065),transparent 70%);transform:translateX(-110%);animation:card-signal 8s ease-in-out infinite}.visual-grid article:nth-child(2)::before{animation-delay:-1.6s}.visual-grid article:nth-child(3)::before{animation-delay:-3.2s}.visual-grid article:nth-child(4)::before{animation-delay:-4.8s}.visual-grid article:nth-child(5)::before{animation-delay:-6.4s}.visual-grid article:hover{transform:translateY(-3px);border-color:rgba(0,229,255,.28);background:rgba(0,229,255,.04)}
.pulse-logo{position:relative;animation:logo-float 4.8s ease-in-out infinite}.pulse-logo::before,.pulse-logo::after{content:"";position:absolute;inset:-13px;border:1px solid rgba(0,229,255,.2);border-radius:36px;animation:logo-ring 3s ease-out infinite}.pulse-logo::after{animation-delay:-1.5s}
.code-lines i{position:relative;overflow:hidden;background-size:220% 100%;animation:code-flow 3.5s ease-in-out infinite}.code-lines i:nth-child(2){animation-delay:-1.1s}.code-lines i:nth-child(3){animation-delay:-2.2s}
.floating-chip{animation:chip-float 4s ease-in-out infinite}.chip-two{animation-delay:-2s}
.scroll-cue i{animation:cue-pulse 1.7s ease-in-out infinite}
.capability-rail{position:relative;z-index:2;overflow:hidden;border-block:1px solid var(--line);background:rgba(8,14,26,.7);backdrop-filter:blur(18px);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.capability-track{display:flex;width:max-content;animation:rail-move 28s linear infinite}.capability-list{display:flex;align-items:center;gap:27px;padding:17px 14px 16px}.capability-list span{color:#c6d3e4;font:600 .65rem Orbitron,sans-serif;letter-spacing:.14em;white-space:nowrap}.capability-list i{color:var(--cyan);font-style:normal;font-size:.62rem;text-shadow:0 0 12px var(--cyan)}
.service-card{isolation:isolate}.service-card>*{position:relative;z-index:1}.service-card::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(280px circle at var(--pointer-x,50%) var(--pointer-y,50%),rgba(0,229,255,.13),transparent 55%);opacity:0;transition:opacity .3s}.service-card::after{z-index:0;pointer-events:none}.service-card:hover::before{opacity:1}.service-card:hover .service-icon{transform:rotate(-6deg) scale(1.07);box-shadow:0 0 28px rgba(0,229,255,.12)}.service-icon{transition:transform .3s,box-shadow .3s}
.portfolio-open{position:relative;isolation:isolate}.portfolio-open::before{content:"";position:absolute;z-index:2;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--pointer-x,50%) var(--pointer-y,30%),rgba(0,229,255,.12),transparent 52%);opacity:0;transition:opacity .35s}.portfolio-open:hover::before{opacity:1}.portfolio-open:hover .portfolio-media img{transform:scale(1.055)}.portfolio-open:hover .portfolio-cta i{animation:cta-arrow .75s ease-in-out infinite alternate}
.about-mark{transform:translateY(var(--mark-shift,0)) rotate(calc(-5deg + var(--mark-rotate,0deg)));transition:transform .2s linear;box-shadow:0 35px 90px rgba(0,0,0,.24),inset 0 0 70px rgba(0,229,255,.025)}.about-mark::before{animation:about-ring-one 12s ease-in-out infinite}.about-mark::after{animation:about-ring-two 9s ease-in-out infinite}
.technology-list span{transition:color .25s,border-color .25s,transform .25s,background .25s}.technology-list span:hover{color:#e7fbff;border-color:rgba(0,229,255,.34);background:rgba(0,229,255,.05);transform:translateY(-3px)}
.contact-layout{position:relative;isolation:isolate;overflow:hidden}.contact-layout>*{position:relative;z-index:1}.contact-layout::before{content:"";position:absolute;z-index:0;width:430px;aspect-ratio:1;left:var(--pointer-x,12%);top:var(--pointer-y,30%);border-radius:50%;background:radial-gradient(circle,rgba(184,92,255,.13),rgba(0,229,255,.035) 42%,transparent 70%);filter:blur(18px);transform:translate(-50%,-50%);transition:left .25s ease-out,top .25s ease-out;pointer-events:none}.contact-links a:hover>span{transform:rotate(-5deg) scale(1.06)}.contact-links a>span{transition:transform .25s}
.motion-cursor{position:fixed;z-index:110;left:0;top:0;pointer-events:none;opacity:0;will-change:transform;mix-blend-mode:screen}.cursor-dot{width:5px;height:5px;border-radius:50%;background:#d9fdff;box-shadow:0 0 13px var(--cyan)}.cursor-ring{width:34px;height:34px;border:1px solid rgba(0,229,255,.52);border-radius:50%;background:rgba(0,229,255,.025);box-shadow:inset 0 0 14px rgba(0,229,255,.08),0 0 22px rgba(0,229,255,.08);transition:width .22s,height .22s,border-color .22s,background .22s,opacity .2s}.cursor-ready .motion-cursor{opacity:1}.cursor-over-action .cursor-ring{width:52px;height:52px;border-color:rgba(184,92,255,.72);background:rgba(184,92,255,.08)}.cursor-over-action .cursor-dot{background:#fff;box-shadow:0 0 16px var(--violet)}
.hero-copy.visible{transform:translate3d(0,var(--hero-copy-shift,0),0)}.hero-visual.visible{transform:translate3d(0,var(--hero-visual-shift,0),0)}
.button{transform:translate3d(var(--magnet-x,0),var(--magnet-y,0),0)}.button:hover{transform:translate3d(var(--magnet-x,0),calc(var(--magnet-y,0) - 2px),0)}.nav-contact,.contact-links a{transform:translate3d(var(--magnet-x,0),var(--magnet-y,0),0);transition:transform .18s ease-out,border-color .2s,box-shadow .2s}
.portfolio-open{--card-rx:0deg;--card-ry:0deg;transform:perspective(1100px) rotateX(var(--card-rx)) rotateY(var(--card-ry));transform-style:preserve-3d;will-change:transform}.portfolio-open:hover{transform:perspective(1100px) translateY(-8px) rotateX(var(--card-rx)) rotateY(var(--card-ry))}.portfolio-open::after{content:"";position:absolute;z-index:3;inset:-40%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,rgba(0,229,255,.08) 51%,transparent 64%);transform:translate3d(calc(var(--pointer-x,50%) - 50%),calc(var(--pointer-y,50%) - 50%),0) rotate(7deg);opacity:0;transition:opacity .3s}.portfolio-open:hover::after{opacity:.48}.portfolio-media{transform:translateZ(13px)}.portfolio-body{position:relative;z-index:2;transform:translateZ(7px)}

.process-section{padding-top:clamp(50px,7vw,90px);overflow:hidden}.process-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr);align-items:end;gap:clamp(35px,8vw,120px);margin-bottom:48px}.process-heading h2{max-width:820px;margin:0;font-size:clamp(2rem,4.4vw,3.65rem);line-height:1.12;letter-spacing:-.035em}.process-heading>p{margin:0 0 4px;color:var(--muted)}
.kinetic-separator{position:relative;z-index:3;height:112px;display:grid;place-items:center;overflow:hidden;pointer-events:none}.kinetic-separator::before{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,229,255,.08) 12%,rgba(0,229,255,.52) 43%,rgba(184,92,255,.58) 58%,rgba(255,0,128,.08) 88%,transparent 100%);background-size:220% 100%;box-shadow:0 0 15px rgba(0,229,255,.11);animation:separator-line-flow 6s linear infinite}.kinetic-separator::after{content:"";position:absolute;width:120px;height:1px;background:linear-gradient(90deg,transparent,#fff,transparent);filter:drop-shadow(0 0 7px var(--cyan));animation:separator-light-run 5s ease-in-out infinite}
.kinetic-separator-core{position:relative;z-index:2;width:58px;height:58px;display:grid;place-items:center;border:1px solid rgba(0,229,255,.38);border-radius:50%;background:rgba(8,14,26,.94);box-shadow:inset 0 0 24px rgba(0,229,255,.07),0 0 35px rgba(0,229,255,.1);animation:separator-core-rotate 20s linear infinite}.kinetic-separator-core::before{content:"";position:absolute;inset:-5px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));opacity:.25;filter:blur(11px);animation:separator-glow 2.2s ease-in-out infinite}.kinetic-separator-core::after{content:"";position:absolute;inset:6px;border:1px dashed rgba(184,92,255,.22);border-radius:50%}.kinetic-separator-core svg{position:relative;z-index:2;width:26px;height:26px;fill:none;stroke:var(--cyan);stroke-width:1.7;filter:drop-shadow(0 0 7px rgba(0,229,255,.5))}
.separator-orbits{position:absolute;z-index:3;inset:50%}.separator-orbits i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan),0 0 20px rgba(0,229,255,.5);animation:separator-orbit 4s linear infinite}.separator-orbits i:nth-child(2){animation-delay:-1s;background:var(--violet);box-shadow:0 0 9px var(--violet),0 0 20px rgba(184,92,255,.5)}.separator-orbits i:nth-child(3){animation-delay:-2s}.separator-orbits i:nth-child(4){animation-delay:-3s;background:var(--pink);box-shadow:0 0 9px var(--pink),0 0 20px rgba(255,0,128,.45)}
.separator-energy{position:absolute;z-index:1;width:82px;height:82px;border:1px solid transparent;border-top-color:var(--cyan);border-right-color:var(--violet);border-bottom-color:rgba(255,0,128,.2);border-radius:50%;opacity:.48;animation:separator-energy-rotate 3s linear infinite reverse}.separator-energy::before{content:"";position:absolute;inset:8px;border:1px solid transparent;border-left-color:rgba(0,229,255,.35);border-radius:50%}
.process-flow{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:25px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(15,25,43,.72),rgba(7,12,23,.82));box-shadow:0 32px 100px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.035);overflow:hidden}.process-flow::before{content:"";position:absolute;z-index:-1;inset:-55% 28% auto;width:44%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 90deg,rgba(0,229,255,.13),transparent 35%,rgba(184,92,255,.11),transparent 72%);filter:blur(30px);animation:process-aurora 13s linear infinite}.process-flow::after{content:"";position:absolute;z-index:-1;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.process-beam{position:absolute;z-index:0;left:8%;right:8%;top:86px;height:2px;background:linear-gradient(90deg,rgba(0,229,255,.08),var(--cyan),var(--violet),rgba(255,0,128,.08));background-size:220% 100%;box-shadow:0 0 16px rgba(0,229,255,.16);animation:process-beam 4s linear infinite}
.process-runner{position:absolute;z-index:3;left:8%;top:78px;width:18px;height:18px;border:1px solid rgba(0,229,255,.72);border-radius:50%;background:#091827;box-shadow:0 0 0 5px rgba(0,229,255,.07),0 0 26px rgba(0,229,255,.48);transform:translateX(-50%);animation:process-runner 10s cubic-bezier(.45,0,.55,1) infinite;animation-play-state:paused}.process-runner i{position:absolute;inset:5px;border-radius:50%;background:#dffcff;box-shadow:0 0 10px var(--cyan)}.process-runner::after{content:"";position:absolute;right:100%;top:7px;width:58px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan));filter:drop-shadow(0 0 5px var(--cyan))}
.process-node{position:relative;z-index:1;min-height:190px;display:flex;flex-direction:column;align-items:flex-start;padding:17px;border:1px solid rgba(158,190,224,.1);border-radius:18px;background:linear-gradient(155deg,rgba(255,255,255,.032),rgba(255,255,255,.012));transition:transform .3s,border-color .3s,background .3s}.process-node:hover{transform:translateY(-6px);border-color:rgba(0,229,255,.25);background:linear-gradient(155deg,rgba(0,229,255,.055),rgba(184,92,255,.025))}.process-node>span{align-self:flex-end;color:var(--muted-2);font:600 .58rem Orbitron,sans-serif}.process-node>i{position:relative;display:grid;place-items:center;width:54px;height:54px;margin:3px 0 auto;border:1px solid rgba(0,229,255,.24);border-radius:50%;background:#0a1423;color:var(--cyan);font-style:normal;font-size:1.2rem;box-shadow:0 0 0 0 rgba(0,229,255,0);animation:process-node-pulse 10s ease-in-out infinite;animation-delay:calc(var(--step) * 2s);animation-play-state:paused}.process-node>i::before{content:"";position:absolute;inset:-7px;border:1px solid rgba(184,92,255,.12);border-radius:50%}.process-node strong{margin-top:23px;font:600 .82rem Orbitron,sans-serif}.process-node small{margin-top:4px;color:var(--muted);font-size:.69rem}.process-flow.visible .process-runner,.process-flow.visible .process-node>i{animation-play-state:running}
dialog[open]{animation:dialog-enter .28s ease-out}dialog[open]::backdrop{animation:backdrop-enter .28s ease-out}
.reveal{opacity:0;transform:translateY(24px) scale(.99);transition:opacity .58s ease,transform .66s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}.reveal.visible{opacity:1;transform:none}

@keyframes brand-breathe{50%{box-shadow:inset 0 0 25px rgba(0,229,255,.14),0 0 30px rgba(0,229,255,.14)}}
@keyframes brand-ring{50%{inset:-7px;border-color:rgba(184,92,255,.28)}}
@keyframes hero-orbit{to{transform:rotate(1turn)}}
@keyframes title-flow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes eyebrow-signal{0%,68%{transform:translateX(-110%)}88%,100%{transform:translateX(110%)}}
@keyframes frame-scan{from{transform:translateY(-100%)}to{transform:translateY(610%)}}
@keyframes status-blink{50%{opacity:.3;transform:scale(.7)}}
@keyframes card-signal{0%,74%{transform:translateX(-110%)}90%,100%{transform:translateX(110%)}}
@keyframes logo-float{50%{transform:translateY(-8px);box-shadow:0 0 0 16px rgba(0,229,255,.025),0 0 75px rgba(0,229,255,.16)}}
@keyframes logo-ring{0%{opacity:.8;transform:scale(.82)}80%,100%{opacity:0;transform:scale(1.22)}}
@keyframes code-flow{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes chip-float{50%{transform:translateY(-9px) rotate(1deg)}}
@keyframes cue-pulse{0%,100%{opacity:.35;transform:scaleY(.65);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@keyframes rail-move{to{transform:translateX(-50%)}}
@keyframes cta-arrow{to{transform:translateX(4px)}}
@keyframes about-ring-one{50%{transform:rotate(24deg) scale(.96);border-color:rgba(184,92,255,.28)}}
@keyframes about-ring-two{50%{transform:rotate(-40deg) scale(1.08);border-color:rgba(0,229,255,.32)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(18px) scale(.98)}}
@keyframes backdrop-enter{from{opacity:0}}
@keyframes separator-line-flow{to{background-position:220% 0}}
@keyframes separator-light-run{0%,100%{left:-130px;opacity:0}12%{opacity:.75}88%{opacity:.75}100%{left:100%;opacity:0}}
@keyframes separator-core-rotate{to{transform:rotate(1turn)}}
@keyframes separator-glow{50%{opacity:.55;filter:blur(16px);transform:scale(1.13)}}
@keyframes separator-orbit{from{transform:rotate(0) translateX(45px) rotate(0)}to{transform:rotate(1turn) translateX(45px) rotate(-1turn)}}
@keyframes separator-energy-rotate{to{transform:rotate(1turn)}}
@keyframes process-aurora{to{transform:rotate(1turn)}}
@keyframes process-beam{to{background-position:220% 0}}
@keyframes process-runner{0%,4%{left:8%;border-color:var(--cyan)}20%,24%{left:29%}40%,44%{left:50%;border-color:var(--violet)}60%,64%{left:71%}80%,96%{left:92%;border-color:var(--pink)}100%{left:8%}}
@keyframes process-node-pulse{0%,13%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(0,229,255,0)}7%{transform:scale(1.09);color:#fff;box-shadow:0 0 0 8px rgba(0,229,255,.035),0 0 32px rgba(0,229,255,.2)}}

@media (max-width: 1040px){.hero-layout{grid-template-columns:1fr;max-width:780px}.hero{padding-top:145px}.hero-visual{width:min(700px,92%);margin:0 auto}.services-grid{grid-template-columns:repeat(2,1fr)}.contact-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1.6fr repeat(3,1fr);gap:25px}}
@media (max-width: 780px){:root{--shell:min(100% - 28px,1180px)}html{scroll-padding-top:70px}.site-header{height:66px}.menu-toggle{display:flex}.menu-toggle[aria-expanded=true]>span:nth-of-type(2){transform:translateY(7px) rotate(45deg)}.menu-toggle[aria-expanded=true]>span:nth-of-type(3){opacity:0}.menu-toggle[aria-expanded=true]>span:nth-of-type(4){transform:translateY(-7px) rotate(-45deg)}.primary-nav{position:absolute;left:14px;right:14px;top:72px;display:none;flex-direction:column;align-items:stretch;gap:3px;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(8,13,25,.96);backdrop-filter:blur(22px);box-shadow:var(--shadow)}.primary-nav.open{display:flex}.primary-nav a{padding:11px 12px}.primary-nav a::after{display:none}.nav-contact{text-align:center;margin-top:4px}.hero{min-height:auto;padding:120px 0 95px}.hero-layout{gap:50px}.hero h1{font-size:clamp(3.1rem,16vw,5.5rem)}.hero-support{font-size:.91rem}.floating-chip{display:none}.visual-frame{transform:none}.visual-grid{grid-template-columns:1fr 1fr}.visual-grid .visual-primary{grid-column:span 2;grid-row:auto;min-height:225px}.scroll-cue{display:none}.section{padding:85px 0}.section-heading{margin-bottom:36px}.process-heading{grid-template-columns:1fr;gap:17px}.process-flow{grid-template-columns:1fr;padding:18px;gap:9px}.process-beam{left:56px;right:auto;top:48px;bottom:48px;width:2px;height:auto;background:linear-gradient(180deg,rgba(0,229,255,.08),var(--cyan),var(--violet),rgba(255,0,128,.08));background-size:100% 220%;animation-name:process-beam-mobile}.process-runner{left:48px;top:8%;transform:translate(-50%,-50%);animation-name:process-runner-mobile}.process-runner::after{right:auto;left:7px;top:auto;bottom:100%;width:2px;height:48px;background:linear-gradient(0deg,transparent,var(--cyan))}.process-node{min-height:104px;display:grid;grid-template-columns:24px 58px 1fr;grid-template-rows:1fr 1fr;align-items:center;column-gap:12px;padding:13px 15px}.process-node>span{grid-row:span 2;align-self:center}.process-node>i{grid-row:span 2;width:48px;height:48px;margin:0}.process-node strong{align-self:end;margin:0}.process-node small{align-self:start;margin:2px 0 0}.portfolio-grid{grid-template-columns:1fr}.portfolio-open,.portfolio-open:hover{transform:none}.portfolio-open::after{display:none}.about-layout{grid-template-columns:1fr}.about-mark{width:min(330px,82%)}.form-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:span 2}.admin-layout{grid-template-columns:1fr}.admin-sidebar{border-right:0;border-bottom:1px solid var(--line)}.admin-form-grid{grid-template-columns:1fr}.admin-images{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 520px){.brand{font-size:.78rem}.brand-mark{width:32px}.hero-actions{display:grid}.button{width:100%}.services-grid{grid-template-columns:1fr}.service-wide{grid-column:auto;min-height:260px;flex-direction:column;align-items:flex-start}.service-wide .service-icon{margin-bottom:auto}.portfolio-heading{display:block}.admin-trigger{margin-top:18px}.portfolio-body{padding:19px}.contact-layout{width:calc(100% - 20px);padding:25px 18px}.contact-links strong{font-size:.74rem}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.footer-bottom{flex-direction:column}.project-dialog{width:calc(100vw - 16px);max-height:calc(100svh - 16px)}.project-dialog-media{min-height:210px}.admin-dialog{width:calc(100vw - 10px);height:calc(100svh - 10px)}.admin-header{padding-left:18px}.admin-editor{padding:18px}.admin-images{grid-template-columns:1fr}.admin-actions{align-items:stretch;flex-direction:column}.admin-danger{margin-left:0}.admin-actions>*{width:100%}}
.honeypot{display:none!important}
@media (max-width: 780px){.orb,.about-mark i{animation:none}.visual-frame::after{display:none}.cursor-glow,.motion-cursor{display:none}.ambient-canvas{opacity:.36}.capability-list{gap:20px;padding-block:14px}.capability-list span{font-size:.58rem}.kinetic-separator{height:92px}.kinetic-separator-core{width:50px;height:50px}.kinetic-separator-core svg{width:22px;height:22px}.separator-energy{width:70px;height:70px}.separator-orbits i{animation-name:separator-orbit-mobile}.contact-layout::before{left:75%;top:12%}}
@media (hover:none),(pointer:coarse){.motion-cursor{display:none}}
@keyframes process-beam-mobile{to{background-position:0 220%}}
@keyframes separator-orbit-mobile{from{transform:rotate(0) translateX(37px) rotate(0)}to{transform:rotate(1turn) translateX(37px) rotate(-1turn)}}
@keyframes process-runner-mobile{0%,4%{top:8%;border-color:var(--cyan)}20%,24%{top:29%}40%,44%{top:50%;border-color:var(--violet)}60%,64%{top:71%}80%,96%{top:92%;border-color:var(--pink)}100%{top:8%}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none;filter:none}.orb,.cursor-glow,.ambient-canvas,.motion-cursor,.process-runner,.separator-orbits{display:none}.capability-track{animation:none;transform:none}.about-mark{transform:rotate(-5deg)}.visual-frame{transform:none}.process-node>i,.process-beam,.kinetic-separator-core,.separator-energy,.kinetic-separator::before,.kinetic-separator::after{animation:none}}

/* Local SVG icon language and high-energy interaction layer. */
.ui-icon{display:inline-grid;place-items:center;flex:0 0 auto;color:inherit}.ui-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;overflow:visible}.button-icon{width:18px;height:18px}.button-arrow{width:16px;height:16px}.button-primary .ui-icon,.button-secondary .ui-icon{position:relative;z-index:1}.button-primary:hover .button-icon,.button-secondary:hover .button-icon{transform:rotate(-7deg) scale(1.08)}
.button{position:relative;isolation:isolate;overflow:hidden}.button::after{content:"";position:absolute;z-index:0;inset:-80% -35%;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.48) 49%,transparent 58%);transform:translateX(-75%) rotate(8deg);transition:transform .65s cubic-bezier(.2,.7,.2,1)}.button:hover::after{transform:translateX(75%) rotate(8deg)}
.meteor{--meteor-angle:-32deg;--meteor-start-x:-28vw;--meteor-start-y:17.5vw;--meteor-end-x:145vw;--meteor-end-y:-90.6vw;position:absolute;width:clamp(130px,14vw,230px);height:1px;opacity:0;background:linear-gradient(90deg,transparent,rgba(0,229,255,.72),#fff);filter:drop-shadow(0 0 7px rgba(0,229,255,.7));transform:translate3d(var(--meteor-start-x),var(--meteor-start-y),0) rotate(var(--meteor-angle));transform-origin:right center;animation:meteor-flight 11s ease-in-out infinite}.meteor::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--cyan)}.meteor-one{left:-18%;top:24%;animation-delay:-2s}.meteor-two{--meteor-angle:-26deg;--meteor-start-y:13.7vw;--meteor-end-y:-70.7vw;left:35%;top:73%;animation-delay:-7s;animation-duration:15s;filter:drop-shadow(0 0 7px rgba(184,92,255,.7))}
.visual-satellites{position:absolute;z-index:5;inset:-30px;pointer-events:none;transform:translate3d(var(--satellite-x,0),var(--satellite-y,0),0);transition:transform .24s ease-out}.visual-satellite{position:absolute;width:44px;height:44px;border:1px solid rgba(0,229,255,.28);border-radius:14px;background:rgba(5,13,25,.82);color:var(--cyan);box-shadow:inset 0 0 20px rgba(0,229,255,.06),0 0 30px rgba(0,229,255,.1);backdrop-filter:blur(14px);animation:satellite-float 4.8s ease-in-out infinite}.visual-satellite::before{content:"";position:absolute;inset:-6px;border:1px dashed rgba(184,92,255,.18);border-radius:17px;animation:satellite-ring 10s linear infinite}.visual-satellite svg{width:20px;height:20px}.satellite-code{left:-3px;top:12%;animation-delay:-.8s}.satellite-mobile{right:-5px;top:23%;color:#a995ff;animation-delay:-2.1s}.satellite-cloud{left:9%;bottom:-7px;color:#65ffcf;animation-delay:-3.4s}.satellite-ai{right:9%;bottom:-9px;color:#ff82bd;animation-delay:-4.3s}
.visual-icon{position:relative;width:38px;height:38px}.visual-icon::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(0,229,255,.1);border-radius:13px;transform:rotate(10deg);transition:transform .3s,border-color .3s}.visual-grid article:hover .visual-icon::after{transform:rotate(55deg) scale(1.08);border-color:rgba(184,92,255,.35)}.visual-icon svg{width:19px;height:19px;filter:drop-shadow(0 0 7px rgba(0,229,255,.45))}
.scroll-cue i.ui-icon{width:18px;height:18px;background:none;color:var(--cyan);filter:drop-shadow(0 0 7px rgba(0,229,255,.55))}
.service-icon{position:relative;color:rgb(var(--card-accent));border-color:rgba(var(--card-accent),.3);background:rgba(var(--card-accent),.06);box-shadow:inset 0 0 22px rgba(var(--card-accent),.05)}.service-icon svg{width:24px;height:24px;filter:drop-shadow(0 0 8px rgba(var(--card-accent),.48))}.service-icon::before,.service-icon::after{content:"";position:absolute;pointer-events:none;border-radius:17px}.service-icon::before{inset:-7px;border:1px dashed rgba(var(--card-accent),.2);animation:service-icon-ring 12s linear infinite}.service-icon::after{inset:-12px;border:1px solid transparent;border-top-color:rgba(var(--card-accent),.4);border-right-color:rgba(var(--card-accent),.08);animation:service-icon-ring 4.5s linear infinite reverse}.service-card:hover .service-icon::before{border-color:rgba(var(--card-accent),.52)}
.card-corners{position:absolute!important;z-index:2!important;inset:10px;opacity:.38;pointer-events:none;background:linear-gradient(rgb(var(--card-accent)),rgb(var(--card-accent))) left top/23px 1px no-repeat,linear-gradient(rgb(var(--card-accent)),rgb(var(--card-accent))) left top/1px 23px no-repeat,linear-gradient(rgb(var(--card-accent)),rgb(var(--card-accent))) right top/23px 1px no-repeat,linear-gradient(rgb(var(--card-accent)),rgb(var(--card-accent))) right top/1px 23px no-repeat,linear-gradient(rgb(var(--card-accent)),rgb(var(--card-accent))) left bottom/23px 1px no-repeat,linear-gradient(rgb(var(--card-accent)),rgb(var(--card-accent))) left bottom/1px 23px no-repeat,linear-gradient(rgb(var(--card-accent)),rgb(var(--card-accent))) right bottom/23px 1px no-repeat,linear-gradient(rgb(var(--card-accent)),rgb(var(--card-accent))) right bottom/1px 23px no-repeat;transition:opacity .3s,filter .3s}.service-card:hover .card-corners{opacity:.95;filter:drop-shadow(0 0 5px rgba(var(--card-accent),.6));animation:corner-pulse 1.8s ease-in-out infinite}.service-card:hover{border-color:rgba(var(--card-accent),.34)}
.process-node>i .ui-icon{width:24px;height:24px}.process-node:hover>i .ui-icon{animation:process-glyph .7s cubic-bezier(.2,.8,.2,1)}
.technology-list span{display:inline-flex;align-items:center;gap:7px}.technology-list .ui-icon{width:14px;height:14px;color:var(--cyan);filter:drop-shadow(0 0 5px rgba(0,229,255,.3))}.technology-list span:nth-child(2n) .ui-icon{color:#a995ff}.technology-list span:nth-child(4) .ui-icon{color:#ff82bd}
.contact-links a>span.ui-icon{padding:10px}.contact-links a>span.ui-icon svg{width:21px;height:21px}.contact-links a{position:relative;overflow:hidden}.contact-links a::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(0,229,255,.08),transparent);transform:translateX(-110%);transition:transform .55s}.contact-links a:hover::after{transform:translateX(110%)}.contact-form label{position:relative}.contact-form label:not(.honeypot)::after{content:"";position:absolute;left:14px;right:100%;bottom:0;height:1px;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 10px rgba(0,229,255,.45);transition:right .35s}.contact-form label:focus-within::after{right:14px}
.portfolio-arrow.ui-icon{padding:11px}.portfolio-arrow.ui-icon svg{width:20px;height:20px}.portfolio-cta .ui-icon{width:16px;height:16px;transform:rotate(-90deg)}
.cursor-spark{position:fixed;z-index:109;width:4px;height:4px;border-radius:50%;pointer-events:none;background:var(--spark-color);box-shadow:0 0 8px var(--spark-color);transform:translate(-50%,-50%);animation:cursor-spark-fade .58s ease-out forwards}.interaction-pulse{position:fixed;z-index:108;width:14px;height:14px;border:1px solid rgba(0,229,255,.9);border-radius:50%;pointer-events:none;box-shadow:0 0 18px rgba(0,229,255,.65),inset 0 0 12px rgba(184,92,255,.22);transform:translate(-50%,-50%);animation:interaction-pulse .65s ease-out forwards}

@keyframes meteor-flight{0%,68%{opacity:0;transform:translate3d(var(--meteor-start-x),var(--meteor-start-y),0) rotate(var(--meteor-angle))}72%{opacity:.8}88%{opacity:.3}100%{opacity:0;transform:translate3d(var(--meteor-end-x),var(--meteor-end-y),0) rotate(var(--meteor-angle))}}
@keyframes satellite-float{50%{transform:translateY(-9px) rotate(3deg);box-shadow:inset 0 0 24px rgba(0,229,255,.09),0 0 38px rgba(0,229,255,.16)}}
@keyframes satellite-ring{to{transform:rotate(1turn)}}
@keyframes service-icon-ring{to{transform:rotate(1turn)}}
@keyframes corner-pulse{50%{opacity:.5;filter:drop-shadow(0 0 9px rgba(var(--card-accent),.72))}}
@keyframes process-glyph{50%{transform:scale(1.2) rotate(-8deg);filter:drop-shadow(0 0 8px currentColor)}}
@keyframes cursor-spark-fade{to{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.15)}}
@keyframes interaction-pulse{to{width:110px;height:110px;opacity:0;border-color:rgba(184,92,255,.2)}}

@media (max-width:780px){.visual-satellites{inset:-18px}.visual-satellite{width:38px;height:38px}.visual-satellite svg{width:17px;height:17px}.satellite-code,.satellite-mobile{display:none}.meteor{opacity:.3}.service-icon::after{display:none}}
@media (max-width:520px){.visual-satellites{display:none}.technology-list span{gap:5px}.technology-list .ui-icon{width:12px;height:12px}}
@media (hover:none),(pointer:coarse){.cursor-spark,.interaction-pulse{display:none}}
@media (prefers-reduced-motion:reduce){.meteor,.cursor-spark,.interaction-pulse,.visual-satellite::before{display:none}.visual-satellite,.service-icon::before,.service-icon::after,.service-card:hover .card-corners,.process-node:hover>i .ui-icon{animation:none}.visual-satellites{transform:none}.button::after,.contact-links a::after{display:none}}

/* Product principles: a compact connective layer between story and contact. */
.principles-section{padding-top:clamp(35px,5vw,70px);padding-bottom:clamp(55px,7vw,95px)}.principles-shell{position:relative;isolation:isolate;padding:clamp(28px,4.5vw,58px);overflow:hidden;border:1px solid rgba(154,190,224,.14);border-radius:32px;background:linear-gradient(145deg,rgba(15,25,43,.82),rgba(6,11,22,.9));box-shadow:0 35px 110px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.045)}.principles-shell::before{content:"";position:absolute;z-index:-2;width:52%;aspect-ratio:1;right:-12%;top:-65%;border-radius:50%;background:conic-gradient(from 45deg,rgba(0,229,255,.12),transparent 32%,rgba(184,92,255,.13),transparent 70%);filter:blur(32px);animation:principles-aurora 18s linear infinite}.principles-shell::after{content:"";position:absolute;z-index:-1;inset:0;background-image:radial-gradient(rgba(164,208,238,.12) .65px,transparent .75px);background-size:22px 22px;mask-image:linear-gradient(120deg,#000,transparent 72%);opacity:.32;pointer-events:none}.principles-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.58fr);align-items:end;gap:clamp(30px,7vw,95px);margin-bottom:36px}.principles-heading h2{max-width:760px;margin:0;font-size:clamp(2rem,4vw,3.3rem);line-height:1.1;letter-spacing:-.035em}.principles-heading>p{margin:0 0 3px;color:var(--muted);font-size:.88rem}
.principles-signal{position:absolute;z-index:2;left:clamp(28px,4.5vw,58px);right:clamp(28px,4.5vw,58px);top:0;height:2px;background:linear-gradient(90deg,transparent,rgba(0,229,255,.75),rgba(184,92,255,.7),transparent);background-size:240% 100%;animation:principles-signal-flow 6s linear infinite}.principles-signal::after{content:"";position:absolute;top:-2px;left:0;width:60px;height:5px;background:linear-gradient(90deg,transparent,#fff,transparent);filter:drop-shadow(0 0 7px var(--cyan));animation:principles-runner 5s ease-in-out infinite}.principles-signal i{position:absolute;top:-4px;width:9px;height:9px;border:1px solid var(--cyan);border-radius:50%;background:#08111f;box-shadow:0 0 13px rgba(0,229,255,.6)}.principles-signal i:nth-child(1){left:16%}.principles-signal i:nth-child(2){left:50%;border-color:var(--violet);box-shadow:0 0 13px rgba(184,92,255,.6)}.principles-signal i:nth-child(3){left:84%;border-color:#54ffc4;box-shadow:0 0 13px rgba(84,255,196,.55)}
.principles-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.principle-card{--principle-color:0,229,255;position:relative;isolation:isolate;min-height:245px;display:flex;flex-direction:column;padding:22px;overflow:hidden;border:1px solid rgba(var(--principle-color),.14);border-radius:19px;background:linear-gradient(150deg,rgba(var(--principle-color),.045),rgba(255,255,255,.012));transition:transform .28s,border-color .28s,box-shadow .28s}.principle-card::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(240px circle at var(--pointer-x,50%) var(--pointer-y,40%),rgba(var(--principle-color),.18),transparent 58%);opacity:0;transition:opacity .3s}.principle-card::after{content:"";position:absolute;z-index:0;left:-30%;right:-30%;top:-35%;height:28%;pointer-events:none;background:linear-gradient(transparent,rgba(var(--principle-color),.085),transparent);transform:rotate(-8deg);transition:top .55s ease-out}.principle-card>*{position:relative;z-index:1}.principle-card:hover{transform:translateY(-7px);border-color:rgba(var(--principle-color),.42);box-shadow:0 22px 55px rgba(0,0,0,.24),0 0 32px rgba(var(--principle-color),.065)}.principle-card:hover::before{opacity:1}.principle-card:hover::after{top:105%}.principle-index{align-self:flex-end;color:rgba(var(--principle-color),.58);font:600 .55rem Orbitron,sans-serif;letter-spacing:.09em}.principle-icon{position:relative;width:52px;height:52px;margin:2px 0 auto;border:1px solid rgba(var(--principle-color),.28);border-radius:15px;background:rgba(var(--principle-color),.065);color:rgb(var(--principle-color));box-shadow:inset 0 0 22px rgba(var(--principle-color),.06),0 0 24px rgba(var(--principle-color),.07)}.principle-icon::after{content:"";position:absolute;inset:-7px;border:1px dashed rgba(var(--principle-color),.2);border-radius:19px;animation:principle-icon-ring 13s linear infinite}.principle-icon svg{width:24px;height:24px;filter:drop-shadow(0 0 7px rgba(var(--principle-color),.45))}.principle-card h3{margin:25px 0 8px;font:700 1.02rem Orbitron,sans-serif}.principle-card p{margin:0;color:var(--muted);font-size:.81rem}.principle-state{display:flex;align-items:center;gap:7px;margin-top:20px;padding-top:14px;border-top:1px solid rgba(var(--principle-color),.11);color:rgba(220,238,248,.72);font:600 .55rem Orbitron,sans-serif;letter-spacing:.06em;text-transform:uppercase}.principle-state i{width:6px;height:6px;border-radius:50%;background:rgb(var(--principle-color));box-shadow:0 0 10px rgba(var(--principle-color),.75);animation:principle-status 2s ease-in-out infinite}
.portfolio-badge{position:absolute;z-index:2;right:72px;top:18px;display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(101,255,207,.22);border-radius:8px;background:rgba(5,15,24,.62);backdrop-filter:blur(10px);color:#a7efd7;font:600 .5rem Orbitron,sans-serif;letter-spacing:.08em}.portfolio-badge i{width:5px;height:5px;border-radius:50%;background:#65ffcf;box-shadow:0 0 9px #65ffcf;animation:portfolio-live-pulse 1.9s ease-in-out infinite}.portfolio-scan{position:absolute;z-index:2;left:0;right:0;top:-5px;height:2px;opacity:0;background:linear-gradient(90deg,transparent,var(--cyan),#fff,var(--violet),transparent);box-shadow:0 0 16px rgba(0,229,255,.55);pointer-events:none}.portfolio-open:hover .portfolio-scan{animation:portfolio-scan-run 1.45s ease-in-out infinite}.portfolio-open:hover .portfolio-badge{border-color:rgba(101,255,207,.45);box-shadow:0 0 18px rgba(101,255,207,.08)}.portfolio-card .tag-list span{transition:transform .22s,border-color .22s,color .22s}.portfolio-open:hover .tag-list span{transform:translateY(-2px);border-color:rgba(0,229,255,.27);color:#c7f8ff}.portfolio-open:hover .tag-list span:nth-child(2n){border-color:rgba(184,92,255,.28);color:#e1cbff}

@keyframes principles-aurora{to{transform:rotate(1turn)}}
@keyframes principles-signal-flow{to{background-position:240% 0}}
@keyframes principles-runner{0%,100%{left:-65px;opacity:0}12%,88%{opacity:.8}100%{left:100%}}
@keyframes principle-icon-ring{to{transform:rotate(1turn)}}
@keyframes principle-status{50%{opacity:.35;transform:scale(.72)}}
@keyframes portfolio-live-pulse{50%{opacity:.4;transform:scale(.7)}}
@keyframes portfolio-scan-run{0%{top:-5px;opacity:0}12%{opacity:.75}88%{opacity:.45}100%{top:100%;opacity:0}}

@media (max-width:900px){.principles-heading{grid-template-columns:1fr;gap:16px}.principles-grid{grid-template-columns:1fr}.principle-card{min-height:190px;display:grid;grid-template-columns:62px 1fr;grid-template-rows:auto 1fr auto;column-gap:14px}.principle-index{position:absolute;right:0;top:0}.principle-icon{grid-row:1/3;margin:5px 0 0}.principle-card h3{margin:3px 0 7px}.principle-state{grid-column:1/-1}}
@media (max-width:520px){.principles-shell{padding:28px 18px;border-radius:24px}.principles-signal{left:18px;right:18px}.principles-heading h2{font-size:1.9rem}.principle-card{grid-template-columns:54px 1fr;padding:18px}.principle-icon{width:46px;height:46px}.portfolio-badge{right:16px;top:16px}.portfolio-index{top:auto;bottom:18px}.portfolio-arrow{right:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.principles-shell::before,.principles-signal,.principle-icon::after,.principle-state i,.portfolio-badge i,.portfolio-scan{animation:none}.principle-card:hover::after{display:none}}

/* Cosmic product story: scroll-led depth without changing application behavior. */
.space-planet {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: .34;
  will-change: transform;
}
.planet-neptune {
  width: clamp(180px, 22vw, 370px);
  right: -8vw;
  top: 108vh;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.68), transparent 4%),
    radial-gradient(circle at 36% 32%, #86f8ff 0 8%, #1a7ac8 34%, #1f235f 68%, #080d25 100%);
  box-shadow: inset -38px -24px 65px rgba(3,6,23,.78), 0 0 90px rgba(0,229,255,.12);
  transform: translate3d(0, var(--space-shift-a, 0), 0);
}
.planet-neptune::before,
.planet-neptune::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 7%;
  border-radius: 50%;
  background: rgba(207,252,255,.16);
  filter: blur(3px);
}
.planet-neptune::before { top: 31%; transform: rotate(-12deg); }
.planet-neptune::after { top: 58%; transform: rotate(8deg); opacity: .42; }
.planet-neptune i {
  position: absolute;
  width: 13%;
  aspect-ratio: 1;
  left: -22%;
  top: 24%;
  border-radius: 50%;
  background: #b8faff;
  box-shadow: 0 0 25px rgba(0,229,255,.38);
  animation: background-moon 11s ease-in-out infinite alternate;
}
.planet-ember {
  width: clamp(90px, 11vw, 180px);
  left: -4vw;
  top: 270vh;
  opacity: .22;
  background:
    radial-gradient(circle at 29% 29%, #ffc77f, transparent 7%),
    radial-gradient(circle at 38% 37%, #ff8666, #8d204d 55%, #2b0c32 100%);
  box-shadow: inset -24px -18px 45px rgba(20,4,25,.72), 0 0 65px rgba(255,0,128,.12);
  transform: translate3d(0, var(--space-shift-b, 0), 0);
}
.planet-ringed {
  width: clamp(120px, 15vw, 240px);
  right: 7vw;
  top: 510vh;
  opacity: .22;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #e3c5ff, #7446a9 44%, #16122f 100%);
  box-shadow: inset -25px -18px 48px rgba(7,4,23,.7), 0 0 70px rgba(184,92,255,.1);
  transform: translate3d(0, var(--space-shift-c, 0), 0) rotate(-15deg);
}
.planet-ringed::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 34% -45%;
  border: 10px solid rgba(198,156,255,.22);
  border-left-color: rgba(0,229,255,.08);
  border-right-color: rgba(255,0,128,.13);
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow: 0 0 0 4px rgba(255,255,255,.025);
}
.planet-ringed i,
.planet-ringed b {
  position: absolute;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 16px var(--cyan);
  animation: background-satellite 7s linear infinite;
}
.planet-ringed i { left: -35%; top: 5%; }
.planet-ringed b { right: -24%; bottom: 12%; animation-delay: -3.5s; background: var(--pink); box-shadow: 0 0 16px var(--pink); }

.cosmic-story {
  --story-progress: 0;
  position: relative;
  z-index: 2;
  min-height: 460svh;
  background:
    linear-gradient(180deg, rgba(10,14,26,.02), rgba(4,8,18,.78) 9%, rgba(4,8,18,.9) 50%, rgba(8,13,25,.62) 91%, transparent),
    radial-gradient(circle at 72% 42%, rgba(55,40,120,.18), transparent 35%);
}
.story-sticky {
  position: sticky;
  top: 0;
  display: grid;
  align-items: center;
  height: 100svh;
  min-height: 690px;
  overflow: hidden;
  isolation: isolate;
}
.story-sticky::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(rgba(111,162,199,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,162,199,.028) 1px, transparent 1px);
  background-size: 52px 52px;
  transform: perspective(720px) rotateX(66deg) scale(1.35) translateY(24%);
  transform-origin: 50% 100%;
  opacity: calc(.18 + var(--story-progress) * .34);
}
.story-sticky::after {
  display: none;
}
.story-nebula {
  position: absolute;
  z-index: -2;
  width: 82vw;
  height: 66vh;
  right: -18vw;
  top: 18%;
  border-radius: 50%;
  opacity: .44;
  background:
    radial-gradient(ellipse at 45% 52%, rgba(0,229,255,.12), transparent 24%),
    radial-gradient(ellipse at 58% 49%, rgba(184,92,255,.16), transparent 42%),
    radial-gradient(ellipse at 68% 52%, rgba(255,0,128,.08), transparent 58%);
  filter: blur(38px);
  transform: translate3d(calc(var(--story-progress) * -8vw), 0, 0) rotate(calc(var(--story-progress) * 18deg));
}
.story-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .86; }
.is-motion-idle,
.is-motion-idle *,
.is-motion-idle::before,
.is-motion-idle::after,
.is-motion-idle *::before,
.is-motion-idle *::after { animation-play-state: paused !important; }
.story-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(360px, .88fr) minmax(520px, 1.12fr);
  align-items: center;
  gap: clamp(46px, 7vw, 105px);
  padding-top: 76px;
}
.story-copy { position: relative; z-index: 4; min-width: 0; }
.story-copy h2 {
  max-width: 780px;
  margin: 0 0 18px;
  font-size: clamp(2.25rem, 4.6vw, 4.65rem);
  line-height: 1.02;
  letter-spacing: -.052em;
}
.story-copy h2 em {
  color: transparent;
  background: linear-gradient(90deg, var(--cyan), #80ebff 34%, var(--violet) 72%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
  background-size: 200% 100%;
  animation: title-flow 7s ease-in-out infinite;
}
.story-intro { max-width: 620px; margin-bottom: 24px; color: var(--muted); font-size: .96rem; }
.story-navigation {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 7px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.story-stop {
  position: relative;
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(158,190,224,.11);
  border-radius: 12px;
  background: rgba(10,18,31,.52);
  text-align: left;
  cursor: pointer;
  transition: border-color .28s, background .28s, transform .28s, box-shadow .28s;
}
.story-stop::before {
  content: "";
  position: absolute;
  inset: auto 100% 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transition: right .35s;
}
.story-stop span { grid-row: 1 / 3; color: var(--muted-2); font: 600 .52rem Orbitron,sans-serif; }
.story-stop b { align-self: end; color: #dceafb; font: 600 .62rem Orbitron,sans-serif; }
.story-stop small { align-self: start; color: var(--muted-2); font-size: .59rem; white-space: nowrap; }
.story-stop:hover,
.story-stop.is-active { transform: translateY(-3px); border-color: rgba(0,229,255,.32); background: rgba(0,229,255,.055); box-shadow: 0 12px 30px rgba(0,0,0,.2); }
.story-stop.is-active::before { right: 0; }
.story-stop.is-active span { color: var(--cyan); }
.story-panel-stack { position: relative; min-height: 255px; }
.story-chapter {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 25px;
  border: 1px solid rgba(158,190,224,.12);
  border-radius: 19px;
  background: linear-gradient(145deg, rgba(15,25,43,.84), rgba(6,11,22,.78));
  box-shadow: 0 25px 75px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.035);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 24px, 0) scale(.975);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.75,.2,1), border-color .4s;
}
.story-chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(300px circle at var(--pointer-x, 75%) var(--pointer-y, 20%), rgba(0,229,255,.1), transparent 58%);
}
.story-chapter.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: none; border-color: rgba(0,229,255,.22); }
.chapter-kicker { position: relative; color: var(--cyan); font: 600 .56rem Orbitron,sans-serif; letter-spacing: .14em; }
.story-chapter h3 { position: relative; margin: 12px 0 10px; font-size: clamp(1.15rem,2vw,1.55rem); line-height: 1.2; }
.story-chapter p { position: relative; max-width: 590px; margin: 0; color: var(--muted); font-size: .82rem; }
.story-chapter > div { position: relative; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.story-chapter > div span { padding: 5px 8px; border: 1px solid rgba(0,229,255,.13); border-radius: 7px; color: #a8dfe6; background: rgba(0,229,255,.03); font: 600 .52rem Orbitron,sans-serif; letter-spacing: .06em; text-transform: uppercase; }

.cosmic-visual { position: relative; min-height: min(72vh, 690px); display: grid; place-items: center; perspective: 1350px; contain: layout paint style; }
.cosmic-system {
  position: relative;
  width: min(48vw, 650px);
  aspect-ratio: 1;
  --phase-0-opacity: 1;
  --phase-1-opacity: 0;
  --phase-2-opacity: 0;
  --phase-3-opacity: 0;
  transform: rotate(var(--story-system-angle,-5deg)) scale(var(--story-system-scale,.93));
  transform-style: flat;
  filter: drop-shadow(0 28px 52px rgba(0,0,0,.24));
  will-change: transform;
}
.cosmic-system::before {
  content: "";
  position: absolute;
  inset: -4%;
  background:
    radial-gradient(ellipse at 47% 49%, rgba(0,229,255,.08), transparent 21%),
    radial-gradient(ellipse at 58% 45%, rgba(184,92,255,.045), transparent 35%),
    radial-gradient(circle at 73% 29%, rgba(126,247,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 37%, rgba(255,121,189,.58) 0 1px, transparent 2px),
    radial-gradient(circle at 61% 72%, rgba(98,255,208,.54) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 58%, rgba(220,232,255,.42) 0 1px, transparent 2px),
    radial-gradient(circle at 19% 69%, rgba(220,232,255,.34) 0 1px, transparent 2px);
  transform: none;
}
.story-network { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.story-network line,
.story-network path,
.story-network rect,
.story-network circle { vector-effect: non-scaling-stroke; fill: none; }
.story-radial-links line { stroke: url(#storyLinkGradient); stroke-width: .35; stroke-dasharray: 1.6 2.4; opacity: calc(.08 + var(--phase-1-opacity) * .62 + var(--phase-2-opacity) * .42 + var(--phase-3-opacity) * .74); }
.story-bridge-links line { stroke: rgba(126,247,255,.58); stroke-width: .28; stroke-dasharray: 2.4 2; opacity: calc(var(--phase-1-opacity) * .7 + var(--phase-2-opacity) * .36 + var(--phase-3-opacity) * .5); }
.story-signal-map { opacity: var(--phase-0-opacity); }
.story-signal-map circle { stroke: rgba(126,247,255,.7); stroke-width: .38; stroke-dasharray: 1.2 2; transform-origin: 76px 34px; }
.story-signal-map circle:nth-child(2) { stroke-width: .2; stroke-dasharray: .7 2.5; }
.story-signal-map path { stroke: rgba(126,247,255,.55); stroke-width: .34; stroke-dasharray: 2 2; }
.story-blueprint-map { opacity: calc(var(--phase-1-opacity) * .74); }
.story-blueprint-map path { stroke: rgba(126,247,255,.27); stroke-width: .25; stroke-dasharray: 2 1.7; }
.story-interface-map { opacity: calc(var(--phase-2-opacity) * .76); }
.story-interface-map rect { stroke: rgba(255,121,189,.43); stroke-width: .35; }
.story-interface-map path { stroke: rgba(126,247,255,.4); stroke-width: .35; stroke-linecap: round; }
.story-live-map { opacity: calc(var(--phase-3-opacity) * .72); }
.story-live-map circle { stroke: rgba(98,255,208,.36); stroke-width: .34; stroke-dasharray: 2.2 2.5; }
.story-live-map circle:nth-child(2) { stroke: rgba(184,92,255,.24); stroke-dasharray: .6 3.4; }
.story-live-map path { stroke: #62ffd0; stroke-width: .5; stroke-linecap: round; stroke-linejoin: round; }
.cosmic-core {
  position: absolute;
  z-index: 10;
  left: var(--core-x,45%);
  top: var(--core-y,58%);
  width: 118px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(0,229,255,.48);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #d5fdff, var(--cyan) 9%, #157a9c 36%, #0b203e 70%);
  box-shadow: 0 0 28px rgba(0,229,255,.4), 0 0 100px rgba(0,229,255,.15), inset -18px -16px 38px rgba(3,7,25,.72);
  opacity: var(--core-opacity,.28);
  transform: translate(-50%,-50%) scale(var(--core-scale,.52));
  transform-style: flat;
  will-change: transform,opacity,left,top;
}
.cosmic-core span { color: #e8fdff; font: 800 2.6rem Orbitron,sans-serif; text-shadow: 0 0 20px rgba(255,255,255,.85); }
.cosmic-core small { position: absolute; top: calc(100% + 10px); color: rgba(126,247,255,.62); font: 600 .42rem Orbitron,sans-serif; letter-spacing: .22em; }
.story-orbit {
  position: absolute;
  inset: 0;
  border: 0;
  transform-style: flat;
  pointer-events: none;
}
.story-orbit::before { display: none; }
.orbit-one { --node-x: 76%; --node-y: 34%; --story-depth-scale: 1.55; --story-depth-opacity: 1; }
.orbit-two { --node-x: 15%; --node-y: 78%; --story-depth-scale: .32; --story-depth-opacity: .1; }
.orbit-three { --node-x: 20%; --node-y: 22%; --story-depth-scale: .28; --story-depth-opacity: .08; }
.orbit-four { --node-x: 88%; --node-y: 80%; --story-depth-scale: .25; --story-depth-opacity: .06; }
.story-planet {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(var(--story-depth-scale,1));
  box-shadow: inset -10px -8px 18px rgba(4,6,22,.65), 0 0 24px currentColor;
  opacity: var(--story-depth-opacity, 1);
  transform-style: flat;
  will-change: transform,opacity,left,top;
}
.story-planet::before { content: ""; position: absolute; z-index: 1; inset: 1px; border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.62), transparent 17%), linear-gradient(120deg, transparent 42%, rgba(3,6,22,.22) 57%, rgba(2,4,18,.86) 87%); box-shadow: inset 5px 4px 12px rgba(255,255,255,.08); }
.story-planet::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; opacity: .22; background: radial-gradient(circle, currentColor, transparent 68%); }
.planet-idea { width: 28px; color: #7ef7ff; background: radial-gradient(circle at 68% 64%, rgba(7,58,87,.72) 0 7%, transparent 8%), radial-gradient(circle at 33% 27%, #fff 0 5%, #6ef5ff 12%, #1598ba 43%, #092746 76%); }
.planet-data { width: 42px; color: #bd84ff; background: radial-gradient(ellipse at 58% 68%, rgba(49,20,91,.8) 0 12%, transparent 13%), repeating-linear-gradient(172deg, transparent 0 7px, rgba(239,216,255,.14) 8px 10px), radial-gradient(circle at 32% 26%, #f8eeff 0 4%, #b66df4 16%, #6731a8 48%, #211747 78%); }
.planet-ui { width: 54px; color: #ff79bd; background: radial-gradient(ellipse at 68% 36%, rgba(255,188,224,.28) 0 14%, transparent 15%), radial-gradient(ellipse at 28% 66%, rgba(98,24,86,.5) 0 18%, transparent 19%), conic-gradient(from 28deg, #f36ab0, #a4348a, #ef71b9, #572158, #f36ab0); }
.planet-live { width: 66px; color: #62ffd0; background: radial-gradient(ellipse at 61% 38%, #72d49e 0 10%, transparent 11%), radial-gradient(ellipse at 35% 61%, #4ebc8e 0 15%, transparent 16%), radial-gradient(circle at 32% 26%, #eafff8 0 4%, #50d8c0 17%, #177e91 49%, #082d4b 78%); }
.cosmic-core span { display: block; animation: stellar-core-breathe 5.6s ease-in-out infinite; }
.cosmic-system::before { animation: stellar-field-breathe 12s ease-in-out infinite alternate; }
.cosmic-label {
  position: absolute;
  z-index: 9;
  left: var(--node-x);
  top: var(--node-y);
  display: flex;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(158,190,224,.14);
  border-radius: 7px;
  color: #9fb5cc;
  background: rgba(5,11,23,.74);
  backdrop-filter: blur(10px);
  font: 600 .46rem Orbitron,sans-serif;
  letter-spacing: .08em;
  opacity: calc(var(--story-depth-opacity,1) * .88);
  transform: translate(18px,-50%);
  white-space: nowrap;
}
.cosmic-label b { color: var(--cyan); }
.orbit-one .cosmic-label,
.orbit-four .cosmic-label { transform: translate(calc(-100% - 18px),-50%); }
.story-phase-caption { position: absolute; z-index: 12; left: 50%; bottom: 1%; min-width: 190px; display: grid; gap: 3px; padding: 9px 12px; border-left: 2px solid var(--cyan); background: linear-gradient(90deg,rgba(5,11,23,.84),transparent); transform: translateX(-50%); }
.story-phase-caption span { color: var(--cyan); font: 600 .44rem Orbitron,sans-serif; letter-spacing: .16em; }
.story-phase-caption b { color: #dceafb; font: 600 .62rem Orbitron,sans-serif; letter-spacing: .04em; }
.cosmic-hud { position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px; color: var(--muted-2); font: 600 .5rem Orbitron,sans-serif; letter-spacing: .1em; }
.cosmic-hud b { color: #7dffda; }
.hud-top { right: 4%; top: 5%; }
.hud-top::before { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg,transparent,var(--cyan)); }
.hud-bottom { left: 5%; bottom: 6%; }
.hud-bottom i { width: 110px; height: 2px; background: linear-gradient(90deg,var(--cyan) calc(var(--story-progress) * 100%),rgba(255,255,255,.08) 0); box-shadow: 0 0 8px rgba(0,229,255,.18); }
.story-route { position: absolute; z-index: 8; right: 22px; top: 50%; width: 2px; height: 44vh; transform: translateY(-50%); background: rgba(255,255,255,.06); }
.story-route span { position: absolute; inset: 0; background: linear-gradient(var(--cyan),var(--violet)); transform: scaleY(var(--story-progress)); transform-origin: top; box-shadow: 0 0 12px rgba(0,229,255,.38); }
.story-route i { position: absolute; left: 50%; top: calc(var(--story-progress) * 100%); width: 11px; aspect-ratio: 1; border: 2px solid var(--cyan); border-radius: 50%; background: #07101e; box-shadow: 0 0 18px rgba(0,229,255,.72); transform: translate(-50%,-50%); }
.story-route b { position: absolute; left: 12px; top: calc(var(--story-progress) * 100%); color: #8cc8d5; font: 600 .46rem Orbitron,sans-serif; transform: translateY(-50%); }
.story-route b::before { content: "VOYAGE"; writing-mode: vertical-rl; letter-spacing: .16em; }

@keyframes background-moon { to { transform: translate(44px,34px) scale(.72); opacity: .35; } }
@keyframes background-satellite { to { transform: rotate(1turn) translateX(22px) rotate(-1turn); } }
@keyframes stellar-core-breathe { 50% { opacity: .82; transform: scale(.965); } }
@keyframes stellar-field-breathe { 50% { opacity: .72; } }

@media (max-width: 1120px) {
  .story-layout { grid-template-columns: minmax(330px,.9fr) minmax(430px,1.1fr); gap: 35px; }
  .story-copy h2 { font-size: clamp(2.1rem,4vw,3.5rem); }
  .story-navigation { grid-template-columns: 1fr 1fr; }
  .story-panel-stack { min-height: 270px; }
  .cosmic-system { width: min(51vw,590px); }
}

@media (max-width: 780px) {
  .ambient-canvas,
  .orb,
  .cursor-glow,
  .scroll-progress,
  .space-planet,
  .meteor { display: none !important; }
  .reveal { transform: translate3d(0,18px,0) scale(.995); transition-duration: .48s,.56s; }
  .reveal.visible { transform: none; }
  .site-header.scrolled { background: #070c17; backdrop-filter: none; }
  .primary-nav { background: #080e1b; backdrop-filter: none; }
  .capability-rail { overflow: hidden; backdrop-filter: none; mask-image: none; }
  .capability-track { animation-duration: 36s; transform: translate3d(0,0,0); will-change: transform; }
  .capability-list[aria-hidden="true"] { display: flex; }
  .portfolio-index,
  .portfolio-badge { backdrop-filter: none; }
  .process-flow::before,
  .principles-shell::before,
  .kinetic-separator-core::before,
  .contact-layout::before { filter: none; }
  .hero::after,
  .process-flow::before,
  .principles-shell::before,
  .kinetic-separator-core::before,
  .contact-layout::before { animation: none !important; }
  main .ui-icon svg { filter: none; }
  .cosmic-story { min-height: auto; padding: 38px 0 74px; background: radial-gradient(circle at 50% 16%, rgba(0,229,255,.075), transparent 25rem), linear-gradient(180deg, rgba(4,8,18,.86), rgba(6,10,22,.96)); }
  .story-sticky { position: relative; height: auto; min-height: 0; overflow: clip; }
  .story-sticky::before { opacity: .16; transform: none; background-size: 42px 42px; }
  .story-sticky::after { display: none; }
  .story-canvas { display: none; }
  .story-layout { display: flex; flex-direction: column; width: var(--shell); max-width: calc(100vw - 28px); min-width: 0; gap: 0; padding-top: 0; }
  .story-copy { order: 0; width: 100%; min-width: 0; padding-top: 22px; background: linear-gradient(180deg,rgba(6,10,22,.98) 0 72%,rgba(6,10,22,.9) 88%,transparent); }
  .story-copy h2 { font-size: clamp(2.1rem,10vw,3.6rem); overflow-wrap: anywhere; }
  .story-intro { margin-bottom: 22px; }
  .story-navigation { position: relative; z-index: 3; display: flex; width: 100%; max-width: 100%; overflow-x: auto; padding: 3px 3px 12px; scrollbar-width: thin; }
  .story-navigation li { min-width: 145px; }
  .story-panel-stack { display: grid; gap: 12px; min-height: 0; }
  .story-chapter { position: relative; inset: auto; min-height: 230px; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .story-chapter:not(.is-active) { opacity: .58; border-color: rgba(158,190,224,.09); transform: translate3d(0,8px,0) scale(.992); }
  .cosmic-visual { position: sticky; top: 66px; z-index: 6; align-self: stretch; width: 100%; max-width: 100%; min-width: 0; min-height: clamp(275px,76vw,330px); height: clamp(275px,76vw,330px); order: -1; margin: 0; perspective: none; contain: layout paint; background: radial-gradient(ellipse at 50% 48%,rgba(0,229,255,.09),transparent 52%),radial-gradient(ellipse at 72% 54%,rgba(184,92,255,.07),transparent 48%),#060a16; }
  .cosmic-visual::after { content: ""; position: absolute; z-index: 20; inset: auto 0 0; height: 54px; pointer-events: none; background: linear-gradient(transparent,rgba(6,10,22,.98)); }
  .cosmic-system { width: min(92vw,410px); filter: none; transform: rotate(var(--story-system-angle,-5deg)) scale(var(--story-system-scale,.93)) !important; transform-style: flat; will-change: transform; }
  .cosmic-system::before { inset: -2%; transform: none; }
  .cosmic-core { width: 104px; transform: translate(-50%,-50%) scale(var(--core-scale,.52)) !important; box-shadow: 0 0 26px rgba(0,229,255,.34), 0 0 72px rgba(0,229,255,.13), inset -18px -16px 34px rgba(3,7,25,.78); }
  .story-orbit { border-color: transparent !important; transform-style: flat; }
  .story-orbit::before { display: none; }
  .orbit-one { --node-x: 70%; --node-y: 30%; }
  .orbit-two { --node-x: 25%; --node-y: 43%; }
  .orbit-three { --node-x: 36%; --node-y: 72%; }
  .orbit-four { --node-x: 76%; --node-y: 65%; }
  .story-planet { will-change: transform; }
  .story-planet::after { opacity: .16; }
  .planet-idea { width: 26px; }
  .planet-data { width: 39px; }
  .planet-ui { width: 50px; }
  .planet-live { width: 62px; }
  .cosmic-label { display: none; }
  .story-phase-caption { left: 12px; top: 10px; bottom: auto; min-width: 150px; padding: 7px 9px; transform: none; }
  .story-phase-caption span { font-size: .38rem; }
  .story-phase-caption b { font-size: .52rem; }
  .cosmic-hud { display: none; }
  .hud-bottom { right: 13px; left: auto; bottom: 13px; z-index: 24; display: flex; gap: 7px; padding: 6px 8px; border: 1px solid rgba(0,229,255,.14); border-radius: 8px; background: rgba(5,11,23,.74); }
  .hud-bottom span { display: none; }
  .hud-bottom b { min-width: 34px; text-align: right; }
  .hud-bottom i { width: 46px; }
  .story-route { display: none; }
  .story-nebula { width: 110vw; height: 360px; right: -28vw; top: 2%; opacity: .3; filter: none; transform: none; }
  .story-stop:hover { transform: none; }
}

@media (max-width: 520px) {
  .cosmic-story { padding: 30px 0 66px; }
  .cosmic-visual { min-height: clamp(290px,78vw,320px); height: clamp(290px,78vw,320px); }
  .cosmic-system { width: min(82vw,320px); margin-left: 0; }
  .cosmic-core { width: 106px; }
  .cosmic-label { display: none; }
  .story-copy h2 { font-size: clamp(2rem,10.5vw,2.75rem); line-height: 1.06; letter-spacing: -.055em; }
  .story-navigation li { min-width: 132px; }
  .story-chapter { min-height: 250px; padding: 21px 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .space-planet,
  .story-canvas,
  .story-nebula,
  .cosmic-system,
  .story-orbit { transform: none !important; }
  .space-planet *,
  .story-planet,
  .story-planet::after,
  .cosmic-core span,
  .cosmic-system::before { animation: none !important; }
  .story-route { display: none; }
}