:root{--bg:#020b13;--panel:rgba(7,29,44,.58);--line:rgba(166,230,255,.18);--line2:rgba(166,230,255,.34);--text:#f3f8fc;--muted:#a5b7c5;--cyan:#22d8ef;--blue:#397cf8}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -10%,rgba(34,216,239,.12),transparent 32rem),linear-gradient(180deg,#04101c,#020a12 70%);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}.glass{background:linear-gradient(145deg,rgba(12,42,61,.64),rgba(3,16,27,.44));border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 28px 80px rgba(0,0,0,.24);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
.site-header{position:absolute;z-index:30;top:18px;left:50%;transform:translateX(-50%);width:min(1360px,calc(100% - 36px));height:72px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:0 22px}.brand img{width:190px;height:auto;display:block}.site-header nav{display:flex;gap:30px;color:#d9e5eb;font-size:14px}.site-header nav a:hover{color:var(--cyan)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border-radius:14px;border:1px solid transparent;font-weight:700;font-size:14px;transition:.25s}.btn-small{min-height:42px;padding:0 18px}.btn-primary{background:linear-gradient(120deg,#36d7e9,#2c87ff 58%,#7455ee);box-shadow:0 13px 34px rgba(40,153,236,.28)}.btn-outline{border-color:rgba(170,225,245,.34);background:rgba(5,22,35,.36)}
.hero{min-height:920px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:155px 32px 70px;overflow:hidden}.hero-scene{position:absolute;inset:-3%;overflow:hidden}.hero-image{position:absolute;inset:0;background:url("assets/hero-clean.png") center 42%/cover no-repeat;transform:scale(1.035);filter:saturate(.96) brightness(.88) contrast(1.035)}.hero-sheen{position:absolute;inset:0;background:linear-gradient(112deg,transparent 0 38%,rgba(186,245,255,.055) 46%,transparent 55%);mix-blend-mode:screen}.hero-water{position:absolute;left:-8%;right:-8%;bottom:-3%;height:50%;background:repeating-linear-gradient(178deg,rgba(79,220,238,.09) 0,rgba(79,220,238,.02) 2px,transparent 5px,transparent 13px);opacity:.28;mix-blend-mode:screen}.hero-mist{position:absolute;border-radius:50%;filter:blur(58px);background:rgba(199,236,255,.20)}.mist-a{width:46vw;height:10vw;left:18%;top:35%;opacity:.18}.mist-b{width:34vw;height:8vw;right:2%;top:45%;opacity:.12}.hero-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,11,19,.16),rgba(2,11,19,.08) 45%,rgba(2,11,19,.93) 90%),linear-gradient(90deg,rgba(1,8,15,.28),transparent 30%,transparent 70%,rgba(1,8,15,.20))}
.hero-content{position:relative;z-index:5;text-align:center;max-width:900px}.glass-pill{display:inline-flex;padding:10px 17px;border-radius:999px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#d4f8ff;margin-bottom:24px}.hero h1,.page-hero h1,.type-demo h1{font-size:clamp(54px,6vw,88px);line-height:.98;letter-spacing:-.055em;margin:0 0 24px}.hero h1 em,.page-hero em,.section-heading em,.type-demo em{font-style:normal;background:linear-gradient(90deg,#28e2ed,#318aff);-webkit-background-clip:text;color:transparent}.hero-content>p{max-width:700px;margin:0 auto 30px;font-size:18px;line-height:1.65;color:#d3dfe5}.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.domain-bar{position:relative;z-index:6;width:min(960px,calc(100% - 32px));margin-top:65px;border-radius:25px;display:grid;grid-template-columns:repeat(4,1fr);padding:16px 10px}.domain-bar article{display:flex;align-items:center;gap:13px;padding:10px 18px;border-right:1px solid rgba(255,255,255,.1)}.domain-bar article:last-child{border-right:0}.domain-bar strong{display:block;font-size:12px;margin-bottom:7px}.domain-bar span{font-size:11px;color:#b4c4ce}.domain-icon{width:47px;height:47px;border-radius:50%;display:grid;place-items:center;font-size:25px;background:rgba(255,255,255,.045)}.water{color:#35e3f2}.air{color:#4ca8ff}.land{color:#83eb5a}.connected{color:#c46df4}
.section{width:min(1320px,calc(100% - 46px));margin:auto;padding:105px 0}.section-heading{text-align:center;max-width:780px;margin:0 auto 52px}.section-heading>span,.feature-copy>span,.cta-card>span,.brand-heading>span{font-size:11px;color:#39c9ff;letter-spacing:.08em;font-weight:700}.section-heading h2,.feature-copy h2,.cta-card h2,.brand-heading h2{font-size:clamp(40px,4vw,62px);line-height:1.05;letter-spacing:-.04em;margin:15px 0 18px}.section-heading p,.feature-copy p,.cta-card p{color:var(--muted);line-height:1.7;font-size:17px}
.module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.module-card{min-height:300px;padding:28px;border-radius:22px;transition:.25s}.module-card:hover{transform:translateY(-6px);border-color:var(--line2)}.module-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:29px;margin-bottom:28px;background:rgba(255,255,255,.04)}.cyan{color:#29dff1}.violet{color:#906cff}.mint{color:#5fe2c1}.amber{color:#f6ab2f}.magenta{color:#de72ef}.module-card h3{font-size:20px}.module-card p{color:var(--muted);line-height:1.7;font-size:14px;min-height:72px}.module-card a{color:#54e8ed;font-weight:700;font-size:13px}
.feature-band{width:min(1320px,calc(100% - 46px));margin:auto;padding:80px 0 120px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.feature-copy{max-width:550px}.mini-architecture{height:500px;border-radius:32px;position:relative;overflow:hidden}.arch-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;font-weight:800;background:rgba(34,216,239,.12);border:1px solid rgba(34,216,239,.42);box-shadow:0 0 50px rgba(34,216,239,.16)}.arch-center small{font-size:10px;color:var(--cyan)}.arch-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(34,216,239,.15);border-radius:50%;transform:translate(-50%,-50%)}.ring-one{width:300px;height:300px}.ring-two{width:430px;height:430px}.arch-node{position:absolute;padding:10px 14px;border-radius:999px;background:#071b29;border:1px solid var(--line);font-size:11px}.node-a{left:10%;top:20%}.node-b{right:8%;top:22%}.node-c{right:12%;bottom:18%}.node-d{left:12%;bottom:16%}
.cta-section{padding:20px 24px 100px}.cta-card{width:min(1120px,100%);margin:auto;text-align:center;padding:72px 30px;border-radius:32px}.cta-card p{max-width:620px;margin:0 auto 28px}
.subpage{padding-top:130px}.page-hero{width:min(1100px,calc(100% - 40px));margin:auto;text-align:center;padding:90px 0 70px}.page-hero p{max-width:760px;margin:auto;color:var(--muted);font-size:18px;line-height:1.7}
.explorer-shell{width:min(1420px,calc(100% - 34px));margin:auto;border-radius:28px;overflow:hidden}.explorer-toolbar{display:flex;gap:18px;padding:20px;border-bottom:1px solid var(--line)}.explorer-toolbar>div{display:flex;align-items:center;gap:10px}.explorer-toolbar span{font-size:10px;color:var(--cyan);letter-spacing:.08em}.explorer-toolbar select{background:#071723;color:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 34px 10px 12px}.explorer-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 290px;min-height:620px}.concept-list{padding:20px;border-right:1px solid var(--line)}.concept-button{width:100%;text-align:left;background:transparent;border:1px solid transparent;color:var(--muted);padding:12px;border-radius:12px;margin-bottom:7px;cursor:pointer}.concept-button.active,.concept-button:hover{color:#fff;background:rgba(34,216,239,.08);border-color:var(--line)}.ontology-canvas{display:grid;place-items:center;padding:20px}.ontology-canvas svg{width:100%;height:auto;max-height:600px}.edges path{stroke:rgba(89,210,232,.22);stroke-width:2;fill:none}.platform-node circle{fill:rgba(34,216,239,.14);stroke:#22d8ef;stroke-width:2;filter:url(#glow)}.platform-node text,.concept-node text{fill:#fff;text-anchor:middle;font-size:14px;font-weight:700}.platform-node .small{fill:#22d8ef;font-size:10px}.concept-node{cursor:pointer}.concept-node circle{fill:#071c2b;stroke:rgba(150,230,244,.35);stroke-width:2;transition:.2s}.concept-node:hover circle,.concept-node.active circle{fill:rgba(34,216,239,.14);stroke:#22d8ef;filter:url(#glow)}.detail-panel{padding:28px;border-left:1px solid var(--line);background:rgba(2,13,21,.25)}.detail-panel>span{font-size:10px;color:var(--cyan);letter-spacing:.08em}.detail-panel h2{font-size:32px;margin:12px 0}.detail-panel p{color:var(--muted);line-height:1.7}.detail-example{margin-top:25px;padding:18px;border-radius:16px;background:rgba(34,216,239,.07);border:1px solid var(--line);font-size:13px;line-height:1.6}
.workflow-section{width:min(1320px,calc(100% - 46px));margin:auto;padding:120px 0}.workflow-track{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.workflow-step{padding:22px;border-radius:18px;border:1px solid var(--line);background:rgba(7,29,44,.45);position:relative}.workflow-step:not(:last-child):after{content:"→";position:absolute;right:-13px;top:50%;color:var(--cyan)}.workflow-step span{font-size:10px;color:var(--cyan)}.workflow-step h3{font-size:17px}.workflow-step p{font-size:12px;color:var(--muted);line-height:1.5}.habitat-cards{width:min(1320px,calc(100% - 46px));margin:auto;padding:0 0 120px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.habitat-cards article{padding:28px;border-radius:20px}.habitat-cards span{font-size:10px;color:var(--cyan)}
.brand-section{width:min(1320px,calc(100% - 46px));margin:auto;padding:60px 0 100px}.brand-heading{max-width:750px;margin-bottom:45px}.logo-showcase{display:grid;grid-template-columns:1fr 1fr;gap:16px}.logo-tile{min-height:280px;border-radius:24px;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:50px}.logo-tile img{width:min(380px,80%)}.logo-tile small{letter-spacing:.1em}.logo-tile.dark{background:#03111d}.logo-tile.light{background:#f3f8fc;color:#03111d}.logo-tile.cyan-bg{background:#22d8ef;color:#03111d}.logo-tile.black{background:#000}.symbol-row{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin-top:16px}.symbol-card,.clearspace{border-radius:22px;padding:30px}.symbol-card img{width:120px;color:#22d8ef}.clearspace-box{padding:55px;border:1px dashed rgba(34,216,239,.4);margin-bottom:20px}.clearspace-box img{width:min(360px,90%);display:block;margin:auto}.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.color-grid>div{height:220px;border-radius:20px;background:var(--swatch);padding:20px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.1);color:#fff}.color-grid>div:last-child{color:#03111d}.color-grid span{font-size:12px;opacity:.75}.glass-levels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:radial-gradient(circle at 50% 40%,rgba(34,216,239,.14),transparent 45%);padding:50px;border-radius:28px}.glass-levels article{min-height:260px;padding:28px;border-radius:22px}.glass-levels span{font-size:10px;color:var(--cyan)}.glass-frost{backdrop-filter:blur(10px)}.glass-crystal{backdrop-filter:blur(22px) saturate(150%)}.glass-floating{transform:translateY(-12px);box-shadow:0 35px 90px rgba(0,0,0,.4)}.type-demo,.component-demo{padding:50px;border-radius:26px}.type-label{font-size:10px;color:var(--cyan);letter-spacing:.1em}.body-demo{font-size:22px;line-height:1.6;max-width:650px;color:var(--muted)}.component-demo{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.status-chip{padding:12px 16px;border-radius:999px;background:rgba(104,224,106,.1);border:1px solid rgba(104,224,106,.3);color:#68e06a;font-size:11px}.mini-card{width:220px;padding:20px;border-radius:18px;background:#061a28;border:1px solid var(--line)}.mini-card span,.mini-card small{display:block;font-size:10px;color:var(--muted)}.mini-card strong{display:block;font-size:40px;margin:10px 0}
footer{width:min(1320px,calc(100% - 46px));margin:auto;padding:60px 0 30px;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:45px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted)}footer .brand img{width:170px}footer h4{font-size:11px;color:#39c9ff}footer>div:not(:first-child){display:flex;flex-direction:column;gap:12px;font-size:13px}footer small{grid-column:1/-1;text-align:center;margin-top:28px}.reveal{opacity:0;transform:translateY(24px);transition:.8s}.reveal.visible{opacity:1;transform:none}
@media(max-width:1050px){.site-header nav{display:none}.domain-bar{grid-template-columns:1fr 1fr}.module-grid{grid-template-columns:1fr 1fr}.feature-band{grid-template-columns:1fr}.explorer-grid{grid-template-columns:1fr}.concept-list{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow:auto}.concept-button{width:auto;white-space:nowrap}.detail-panel{border-left:0;border-top:1px solid var(--line)}.workflow-track{grid-template-columns:1fr 1fr 1fr}.workflow-step:nth-child(3):after{display:none}.habitat-cards,.glass-levels{grid-template-columns:1fr}.symbol-row{grid-template-columns:1fr}.color-grid{grid-template-columns:1fr 1fr}footer{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.site-header{height:64px}.brand img{width:145px}.hero{min-height:1030px;padding-left:18px;padding-right:18px}.domain-bar{grid-template-columns:1fr}.domain-bar article{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.module-grid,.logo-showcase,.color-grid{grid-template-columns:1fr}.section,.brand-section{width:calc(100% - 28px);padding:75px 0}.workflow-track{grid-template-columns:1fr}.workflow-step:after{display:none!important}.explorer-toolbar{flex-direction:column;align-items:stretch}.explorer-toolbar>div{justify-content:space-between}.habitat-cards{grid-template-columns:1fr}.btn{width:100%}.component-demo{align-items:stretch;flex-direction:column}.mini-card{width:100%}footer{grid-template-columns:1fr}}


/* Explore Portvik V2 */
.experience-shell{width:min(1500px,calc(100% - 28px));margin:0 auto 120px;border-radius:30px;overflow:hidden}
.experience-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);background:rgba(1,11,18,.28)}
.experience-tabs{display:flex;gap:8px}.experience-tab{background:transparent;border:1px solid transparent;color:var(--muted);padding:11px 16px;border-radius:12px;cursor:pointer}
.experience-tab.active{background:rgba(34,216,239,.09);border-color:var(--line);color:#fff}
.experience-controls{display:flex;align-items:center;gap:12px}.experience-controls label{display:flex;align-items:center;gap:10px}.experience-controls label>span{font-size:10px;color:var(--cyan)}
.experience-controls select{background:#071723;color:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 34px 10px 12px}.btn-compact{min-height:42px;padding:0 16px}
.experience-body{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;min-height:760px}
.experience-rail{padding:18px;border-right:1px solid var(--line);background:rgba(1,11,18,.22);display:flex;flex-direction:column}.rail-label{font-size:10px;color:var(--cyan);letter-spacing:.08em;margin:4px 0 12px}
.concept-list-v2{display:flex;flex-direction:column;gap:7px}.concept-button-v2{width:100%;display:flex;align-items:center;justify-content:space-between;background:transparent;border:1px solid transparent;color:var(--muted);padding:12px 13px;border-radius:12px;cursor:pointer;text-align:left}.concept-button-v2:after{content:"›";opacity:.45}.concept-button-v2:hover,.concept-button-v2.active{background:rgba(34,216,239,.08);border-color:var(--line);color:#fff}
.rail-status{margin-top:auto;border-radius:16px;padding:16px}.rail-status span,.rail-status small{display:block;font-size:10px;color:var(--muted)}.rail-status strong{display:block;margin:8px 0}
.experience-stage{min-width:0;position:relative;background:radial-gradient(circle at 50% 42%,rgba(34,216,239,.07),transparent 28%),rgba(2,13,21,.18)}
.stage-toolbar{height:54px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px;color:#c9d6dd}.stage-toolbar>div{display:flex;align-items:center;gap:10px}.live-dot{width:7px;height:7px;border-radius:50%;background:#65efc8;box-shadow:0 0 14px #65efc8}.stage-actions button{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:7px 10px;cursor:pointer}
.stage-view{display:none;height:706px}.stage-view.active{display:block}.system-map{height:100%;position:relative;display:grid;place-items:center;overflow:hidden}.system-map svg{width:100%;height:100%}
.map-grid path{stroke:rgba(255,255,255,.025);stroke-width:1}.relation-layer path{fill:none;stroke:url(#edgeGradient);stroke-width:2;stroke-dasharray:8 10;animation:dashMove 16s linear infinite}.relation-layer path.dim{opacity:.08}.relation-layer path.focus{stroke:#22d8ef;stroke-width:3;filter:url(#nodeGlow)}
.map-node{cursor:pointer}.map-node circle{fill:#061b29;stroke:rgba(158,229,244,.34);stroke-width:2;transition:.25s}.map-node text{fill:#fff;text-anchor:middle;font-weight:700;font-size:14px;pointer-events:none}.map-node .node-sub{font-size:10px;fill:#87a7b4;font-weight:500}.map-node:hover circle,.map-node.active circle{fill:rgba(34,216,239,.14);stroke:#22d8ef;filter:url(#nodeGlow)}.map-node.dim{opacity:.18}
.platform-map-node circle:first-child{fill:rgba(34,216,239,.12);stroke:#22d8ef}.pulse-ring{fill:none!important;stroke:rgba(34,216,239,.35)!important;animation:pulseMap 3s ease-out infinite}
.relation-labels text{fill:#698590;font-size:10px;text-anchor:middle;transition:.2s}.relation-labels.hidden{opacity:0}
.map-particle{fill:#76ecf4;filter:url(#nodeGlow)}.map-legend{position:absolute;left:18px;bottom:18px;border-radius:14px;padding:12px 14px;display:flex;gap:16px;font-size:10px;color:var(--muted)}.map-legend span{display:flex;align-items:center;gap:7px}.map-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}.legend-core{background:#22d8ef}.legend-node{border:1px solid #8fdbe8}.legend-flow{background:#397cf8}
.experience-detail{padding:24px;border-left:1px solid var(--line);background:rgba(1,11,18,.26);overflow:auto}.experience-detail>span{font-size:10px;color:var(--cyan)}.experience-detail h2{font-size:34px;margin:12px 0}.experience-detail>p{color:var(--muted);line-height:1.7}.detail-stack{display:grid;gap:12px;margin-top:24px}.detail-block{padding:16px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.025)}.detail-block>span{font-size:9px;color:var(--cyan);letter-spacing:.08em}.detail-block p{font-size:13px;color:#c7d5dc;line-height:1.6;margin:10px 0 0}.detail-relation{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}.detail-relation:last-child{border-bottom:0}.detail-relation small{color:var(--muted)}
.observability-row{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;padding:8px 0;font-size:12px}.observability-row i{width:6px;height:6px;border-radius:50%;background:#65efc8}.observability-row small{color:var(--muted)}
.scenario-stage{height:100%;padding:38px;overflow:auto}.scenario-heading span{font-size:10px;color:var(--cyan)}.scenario-heading h2{font-size:42px;margin:10px 0}.scenario-heading p{color:var(--muted)}
.scenario-timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:36px 0}.scenario-step{padding:18px;border-radius:16px;border:1px solid var(--line);background:rgba(7,29,44,.42);position:relative;opacity:.35;transform:translateY(8px);transition:.35s}.scenario-step.active{opacity:1;transform:none;border-color:#22d8ef;box-shadow:0 0 24px rgba(34,216,239,.10)}.scenario-step.done{opacity:.75}.scenario-step:not(:last-child):after{content:"→";position:absolute;right:-13px;top:50%;color:var(--cyan)}.scenario-step span{font-size:9px;color:var(--cyan)}.scenario-step h3{font-size:16px}.scenario-step p{font-size:11px;color:var(--muted);line-height:1.5}
.scenario-console{border-radius:18px;overflow:hidden}.console-head{height:42px;padding:0 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}.console-head>span{width:8px;height:8px;border-radius:50%;background:#52656f}.console-head strong{margin-left:8px;font-size:9px;color:var(--muted);letter-spacing:.08em}.scenario-log{min-height:190px;padding:18px;font-family:Consolas,monospace;font-size:12px;color:#9cd7df}.log-line{opacity:0;transform:translateY(4px);animation:logIn .25s forwards;margin-bottom:8px}.log-line time{color:#5a7985;margin-right:12px}.log-line b{color:#65efc8}
.habitat-stage{height:100%;display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;padding:35px}.habitat-orbit{height:540px;position:relative}.habitat-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:170px;height:170px;border-radius:50%;display:grid;place-items:center;text-align:center;background:rgba(34,216,239,.12);border:1px solid rgba(34,216,239,.4);box-shadow:0 0 55px rgba(34,216,239,.16);font-weight:800}.habitat-core small{font-size:9px;color:var(--cyan)}.habitat-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(34,216,239,.16);border-radius:50%;transform:translate(-50%,-50%)}.hr1{width:330px;height:330px}.hr2{width:500px;height:500px}
.habitat-node{position:absolute;padding:12px 16px;border-radius:999px;background:#071b29;border:1px solid var(--line);color:#fff;cursor:pointer}.habitat-node.active{border-color:#22d8ef;box-shadow:0 0 24px rgba(34,216,239,.16)}.hn1{left:8%;top:16%}.hn2{right:8%;top:16%}.hn3{right:3%;bottom:15%}.hn4{left:3%;bottom:15%}.habitat-detail{padding:28px;border-radius:22px}.habitat-detail>span{font-size:10px;color:var(--cyan)}.habitat-detail h2{font-size:34px}.habitat-detail p{color:var(--muted);line-height:1.7}.habitat-mappings{display:grid;gap:9px;margin-top:20px}.mapping-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px;font-size:12px}.mapping-row span:nth-child(2){color:var(--cyan)}
.insight-strip{width:min(1500px,calc(100% - 28px));margin:0 auto 120px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.insight-strip article{padding:24px;border-radius:18px}.insight-strip span{font-size:9px;color:var(--cyan)}.insight-strip strong{display:block;font-size:18px;margin:10px 0}.insight-strip p{color:var(--muted);font-size:13px;line-height:1.6}
@keyframes dashMove{to{stroke-dashoffset:-180}}@keyframes pulseMap{0%{transform:scale(.82);opacity:.7}100%{transform:scale(1.18);opacity:0}}@keyframes logIn{to{opacity:1;transform:none}}
@media(max-width:1180px){.experience-body{grid-template-columns:190px minmax(0,1fr)}.experience-detail{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}.stage-view{height:650px}.scenario-timeline{grid-template-columns:repeat(3,1fr)}.scenario-step:nth-child(3):after{display:none}.habitat-stage{grid-template-columns:1fr}.habitat-orbit{height:430px}.hr2{width:400px;height:400px}.insight-strip{grid-template-columns:1fr}}
@media(max-width:760px){.experience-topbar{align-items:stretch;flex-direction:column;gap:12px}.experience-tabs,.experience-controls{overflow:auto}.experience-body{grid-template-columns:1fr}.experience-rail{border-right:0;border-bottom:1px solid var(--line)}.concept-list-v2{flex-direction:row;overflow:auto}.concept-button-v2{width:auto;white-space:nowrap}.rail-status{display:none}.stage-view{height:auto;min-height:620px}.system-map{min-height:620px}.scenario-timeline{grid-template-columns:1fr}.scenario-step:after{display:none!important}.habitat-stage{padding:20px}.habitat-orbit{height:380px}.hr2{width:320px;height:320px}.hr1{width:230px;height:230px}.habitat-core{width:130px;height:130px}.experience-controls{flex-direction:column;align-items:stretch}.experience-controls label{justify-content:space-between}}


/* Universe Explorer */
.universe-page{padding-top:120px}.universe-hero{padding-bottom:55px}.universe-shell{width:min(1560px,calc(100% - 24px));margin:0 auto 110px;border-radius:30px;overflow:hidden}
.universe-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);background:rgba(1,10,17,.34)}
.mode-switch{display:flex;gap:8px}.mode-btn{border:1px solid transparent;background:transparent;color:var(--muted);padding:11px 16px;border-radius:12px;cursor:pointer}.mode-btn.active{color:#fff;border-color:var(--line);background:rgba(34,216,239,.09)}
.universe-actions{display:flex;align-items:center;gap:12px}.universe-actions label{display:flex;align-items:center;gap:9px}.universe-actions label span{font-size:9px;color:var(--cyan)}.universe-actions select{background:#071723;color:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 32px 10px 12px}
.universe-layout{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;min-height:820px}.universe-sidebar{padding:18px;border-right:1px solid var(--line);background:rgba(1,10,17,.22);display:flex;flex-direction:column}.sidebar-label{font-size:9px;color:var(--cyan);letter-spacing:.09em;margin-bottom:12px}.universe-list{display:flex;flex-direction:column;gap:7px}
.universe-list button{display:flex;justify-content:space-between;width:100%;padding:12px 13px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;text-align:left}.universe-list button:after{content:"↔";opacity:.35}.universe-list button:hover,.universe-list button.active{color:#fff;background:rgba(34,216,239,.08);border-color:var(--line)}
.universe-key{margin-top:auto;padding:14px;border-radius:15px;display:grid;gap:9px}.universe-key div{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted)}.universe-key i{display:inline-block;width:8px;height:8px;border-radius:50%}.key-core{background:#22d8ef}.key-node{border:1px solid #9fe9f3}.key-bi{background:linear-gradient(90deg,#22d8ef,#397cf8)}.key-event{background:#65efc8}
.universe-stage{min-width:0;position:relative;background:radial-gradient(circle at 50% 45%,rgba(34,216,239,.08),transparent 30%),rgba(2,12,20,.2)}.stage-header{height:54px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);font-size:12px}.stage-header>div{display:flex;align-items:center;gap:10px}.stage-header button{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:9px;padding:7px 10px;cursor:pointer}
.universe-canvas{height:660px;position:relative;overflow:hidden}.universe-canvas svg{width:100%;height:100%}.space-grid circle{fill:none;stroke:rgba(255,255,255,.035);stroke-width:1}.graph-edge{fill:none;stroke-width:2;opacity:.5;transition:.25s}.graph-edge.bidirectional{marker-start:url(#arrowBack);marker-end:url(#arrowForward);stroke:url(#edgeBiGradient)}.graph-edge.focus{stroke-width:3;opacity:1;filter:url(#glowSoft)}.graph-edge.dim{opacity:.06}
.graph-node{cursor:pointer;transition:opacity .25s}.graph-node circle{fill:#071b29;stroke:rgba(159,229,242,.38);stroke-width:2;transition:.25s}.graph-node text{fill:#fff;text-anchor:middle;font-size:13px;font-weight:700;pointer-events:none}.graph-node .sub{fill:#7896a2;font-size:9px;font-weight:500}.graph-node.core circle{fill:url(#coreFill);stroke:#22d8ef;filter:url(#glowStrong)}.graph-node.selected circle{stroke:#65efc8;filter:url(#glowStrong)}.graph-node.dim{opacity:.18}
.graph-label{fill:#6e8a96;font-size:9px;text-anchor:middle;pointer-events:none}.flow-particle{filter:url(#glowSoft)}.mode-caption{position:absolute;left:18px;bottom:18px;border-radius:14px;padding:13px 15px;max-width:260px}.mode-caption span{font-size:9px;color:var(--cyan)}.mode-caption p{font-size:11px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.runtime-stream{margin:0 18px 18px;border-radius:16px;overflow:hidden;display:none}.runtime-stream.visible{display:block}.stream-head{height:38px;display:flex;align-items:center;gap:7px;padding:0 12px;border-bottom:1px solid var(--line)}.stream-head span{width:7px;height:7px;border-radius:50%;background:#4e626c}.stream-head strong{font-size:9px;color:var(--muted);margin-left:8px}.stream-body{height:88px;overflow:auto;padding:12px;font-family:Consolas,monospace;font-size:11px;color:#9adce4}.stream-line{margin-bottom:6px}.stream-line time{color:#577782;margin-right:9px}.stream-line b{color:#65efc8}
.universe-detail{padding:24px;border-left:1px solid var(--line);background:rgba(1,10,17,.26);overflow:auto}.universe-detail>span{font-size:9px;color:var(--cyan)}.universe-detail h2{font-size:34px;margin:12px 0}.universe-detail>p{color:var(--muted);line-height:1.7}.universe-detail-block{margin-top:14px;padding:16px;border-radius:15px;border:1px solid var(--line);background:rgba(255,255,255,.025)}.universe-detail-block>span{font-size:9px;color:var(--cyan)}.universe-detail-block p{font-size:13px;color:#cbd7dd;line-height:1.6}.state-row,.relation-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px}.state-row:last-child,.relation-row:last-child{border-bottom:0}.state-row small,.relation-row small{color:var(--muted)}
.universe-story{width:min(1320px,calc(100% - 40px));margin:0 auto 120px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.universe-story article{padding:25px;border-radius:18px}.universe-story span{color:var(--cyan);font-size:10px}.universe-story p{color:var(--muted);font-size:13px;line-height:1.6}
@media(max-width:1180px){.universe-layout{grid-template-columns:190px minmax(0,1fr)}.universe-detail{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){.universe-topbar{flex-direction:column;align-items:stretch;gap:12px}.universe-actions{flex-direction:column;align-items:stretch}.universe-actions label{justify-content:space-between}.universe-layout{grid-template-columns:1fr}.universe-sidebar{border-right:0;border-bottom:1px solid var(--line)}.universe-list{flex-direction:row;overflow:auto}.universe-list button{width:auto;white-space:nowrap}.universe-key{display:none}.universe-canvas{height:580px}.universe-story{grid-template-columns:1fr}}


/* Scenario storytelling V2 */
.scenario-narrator{
  margin:0 18px 12px;
  border-radius:18px;
  overflow:hidden;
  display:none;
}
.scenario-narrator.visible{display:block}
.narrator-progress{height:4px;background:rgba(255,255,255,.05)}
.narrator-progress i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#22d8ef,#397cf8);
  transition:width .8s cubic-bezier(.2,.7,.2,1);
}
.narrator-body{padding:18px}
.narrator-step{display:flex;gap:10px;align-items:center}
.narrator-step span{font-size:10px;color:var(--muted)}
.narrator-step strong{font-size:10px;color:var(--cyan);letter-spacing:.08em}
.narrator-body h3{font-size:22px;margin:10px 0 8px}
.narrator-body p{color:var(--muted);line-height:1.65;margin:0}
.narrator-actions{display:flex;gap:8px;margin-top:16px}
.narrator-actions button{
  background:transparent;color:var(--muted);border:1px solid var(--line);
  border-radius:10px;padding:9px 12px;cursor:pointer
}
.narrator-actions button:hover:not(:disabled){color:#fff;border-color:var(--cyan)}
.narrator-actions button:disabled{opacity:.35;cursor:not-allowed}
.graph-node.scenario-active circle{
  stroke:#65efc8!important;
  filter:url(#glowStrong)!important;
  transform:scale(1.06);
  transform-box:fill-box;
  transform-origin:center;
}
.graph-edge.scenario-active{
  stroke:#65efc8!important;
  stroke-width:4!important;
  opacity:1!important;
  filter:url(#glowSoft)
}
.stream-body{height:118px}
@media(max-width:760px){
  .narrator-actions{flex-wrap:wrap}
  .narrator-actions button{flex:1}
}


/* Story Engine */
.story-engine{
  display:grid;
  grid-template-columns:minmax(300px,.82fr) minmax(420px,1.18fr);
  gap:12px;
  margin:0 18px 12px;
}
.story-narrator,.runtime-stream.prominent{margin:0}
.runtime-stream.prominent{display:block;min-height:245px}
.stream-focus{padding:20px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 15% 0%,rgba(34,216,239,.12),transparent 45%)}
.stream-focus>span{font-size:10px;color:var(--cyan);letter-spacing:.08em}
.stream-focus h3{font-size:24px;margin:8px 0}
.stream-focus p{color:var(--muted);line-height:1.6;margin:0}
.runtime-stream.prominent .stream-body{height:145px;font-size:12px}
.story-timeline{margin:0 18px 18px;border-radius:16px;padding:16px 18px}
.timeline-track{height:8px;background:rgba(255,255,255,.06);border-radius:999px;position:relative;overflow:visible}
.timeline-track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#22d8ef,#397cf8);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.timeline-track b{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid #22d8ef;transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(34,216,239,.55);transition:left .8s cubic-bezier(.2,.7,.2,1)}
.timeline-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.timeline-step{background:transparent;border:1px solid transparent;color:var(--muted);padding:10px 8px;border-radius:10px;cursor:pointer;text-align:left}
.timeline-step span{display:block;font-size:9px;color:var(--cyan);margin-bottom:5px}
.timeline-step strong{display:block;font-size:11px}
.timeline-step.active{background:rgba(34,216,239,.08);border-color:var(--line);color:#fff}
.timeline-step.done{color:#c7d7dd}
.graph-edge.story-path{
  stroke:#65efc8!important;
  stroke-width:4!important;
  opacity:1!important;
  filter:url(#glowSoft);
  stroke-dasharray:none!important;
}
.graph-edge.story-drawing{
  animation:none!important;
  stroke-dasharray:var(--story-length)!important;
  stroke-dashoffset:var(--story-length)!important;
  transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);
}
.graph-edge.story-drawing.drawn{stroke-dashoffset:0!important}
.graph-edge.story-complete{stroke:#22d8ef!important;opacity:.9!important}
#cameraLayer{transform-origin:600px 400px;transition:transform 1.15s cubic-bezier(.2,.75,.2,1)}
@media(max-width:980px){
  .story-engine{grid-template-columns:1fr}
}
@media(max-width:760px){
  .timeline-steps{grid-template-columns:1fr}
}


/* Runtime workspace V4 — critical scenario UI stays visible */
.universe-layout{
  min-height:760px;
  height:calc(100vh - 165px);
  max-height:920px;
}
.universe-stage{
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.runtime-workspace{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(360px,.75fr);
  grid-template-rows:minmax(0,1fr) auto;
  gap:12px;
  padding:12px;
  overflow:hidden;
}
.universe-canvas{
  grid-column:1;
  grid-row:1;
  height:auto;
  min-height:0;
  border:1px solid rgba(166,230,255,.10);
  border-radius:18px;
  background:rgba(2,13,21,.18);
}
.universe-canvas svg{
  height:100%;
  min-height:0;
}
.story-engine{
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  min-height:0;
  overflow:hidden;
}
.story-narrator{
  flex:0 0 auto;
}
.runtime-stream.prominent{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.runtime-stream.prominent .stream-focus{
  flex:0 0 auto;
}
.runtime-stream.prominent .stream-body{
  flex:1 1 auto;
  height:auto;
  min-height:110px;
  max-height:none;
  overflow:auto;
}
.story-timeline{
  grid-column:1 / -1;
  grid-row:2;
  margin:0;
  padding:13px 16px;
}
.timeline-steps{
  margin-top:10px;
}
.timeline-step{
  padding:8px 7px;
}
.timeline-step strong{
  font-size:10px;
  line-height:1.3;
}
.mode-caption{
  left:14px;
  bottom:14px;
  max-width:220px;
  padding:10px 12px;
}
.universe-detail{
  min-height:0;
  overflow:auto;
}
.scenario-narrator,
.runtime-stream{
  opacity:.45;
  transition:opacity .25s ease,border-color .25s ease;
}
body.scenario-running .scenario-narrator,
body.scenario-running .runtime-stream{
  opacity:1;
}
body.scenario-running .runtime-workspace{
  grid-template-columns:minmax(0,1.35fr) minmax(400px,.9fr);
}
body.scenario-running .mode-caption{
  opacity:.35;
}
@media(max-width:1250px){
  .universe-layout{
    height:auto;
    max-height:none;
  }
  .runtime-workspace{
    grid-template-columns:1fr;
    grid-template-rows:560px auto auto;
    overflow:visible;
  }
  .universe-canvas{grid-column:1;grid-row:1}
  .story-engine{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr}
  .story-timeline{grid-column:1;grid-row:3}
}
@media(max-width:760px){
  .runtime-workspace{
    grid-template-rows:480px auto auto;
    padding:8px;
  }
  .story-engine{grid-template-columns:1fr}
  .timeline-steps{grid-template-columns:1fr 1fr}
}


/* Countdown dial */
.narrator-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.scenario-dial{
  position:relative;
  width:58px;height:58px;
  flex:0 0 58px;
  border:0;
  padding:0;
  border-radius:50%;
  background:rgba(3,18,29,.72);
  cursor:pointer;
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 22px rgba(34,216,239,.10);
}
.scenario-dial:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 0 28px rgba(34,216,239,.22)}
.scenario-dial svg{
  position:absolute;inset:3px;
  width:52px;height:52px;
  transform:rotate(-90deg);
}
.dial-track,.dial-progress{
  fill:none;
  stroke-width:4;
}
.dial-track{stroke:rgba(255,255,255,.10)}
.dial-progress{
  stroke:#22d8ef;
  stroke-linecap:round;
  stroke-dasharray:131.946;
  stroke-dashoffset:0;
  transition:stroke-dashoffset .1s linear;
  filter:drop-shadow(0 0 5px rgba(34,216,239,.55));
}
.scenario-dial>span{
  position:absolute;left:50%;top:47%;
  transform:translate(-50%,-50%);
  font-size:14px;font-weight:800;
}
.scenario-dial>small{
  position:absolute;left:50%;bottom:7px;
  transform:translateX(-50%);
  font-size:8px;color:var(--muted);
}
.scenario-dial.paused .dial-progress{stroke:#65efc8}
@media(max-width:760px){
  .scenario-dial{width:52px;height:52px;flex-basis:52px}
  .scenario-dial svg{width:46px;height:46px}
}


/* Awakening Experience */
.awakening-active{
  overflow:hidden;
}
.awakening-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  background:
    radial-gradient(circle at 50% 42%,rgba(34,216,239,.08),transparent 26%),
    radial-gradient(circle at 50% 50%,#061522 0%,#020912 58%,#010509 100%);
  display:grid;
  place-items:center;
  opacity:1;
  visibility:visible;
  transition:opacity 1.2s ease,visibility 1.2s ease;
}
.awakening-overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.awakening-space{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.star{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:#baf7ff;
  opacity:.25;
  animation:starPulse 4s ease-in-out infinite;
}
.s1{left:14%;top:18%;animation-delay:.1s}.s2{left:27%;top:64%;animation-delay:1.3s}
.s3{right:17%;top:28%;animation-delay:.8s}.s4{right:28%;bottom:18%;animation-delay:2s}
.s5{left:47%;top:12%;animation-delay:1.7s}.s6{right:46%;bottom:11%;animation-delay:.4s}
.awakening-wave{
  position:absolute;
  left:50%;top:50%;
  width:160px;height:160px;
  border:1px solid rgba(34,216,239,.20);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.25);
  opacity:0;
}
.awakening-overlay.started .wave-one{animation:wavePulse 3.2s ease-out .6s infinite}
.awakening-overlay.started .wave-two{animation:wavePulse 3.2s ease-out 1.7s infinite}
.awakening-center{
  position:relative;
  z-index:2;
  width:min(760px,calc(100% - 36px));
  text-align:center;
}
.awakening-logo{
  width:92px;
  height:92px;
  color:#22d8ef;
  opacity:0;
  transform:translateY(14px) scale(.82);
  filter:drop-shadow(0 0 30px rgba(34,216,239,.26));
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.awakening-overlay.started .awakening-logo{
  opacity:1;
  transform:none;
}
.awakening-copy{
  margin-top:24px;
}
.awakening-copy span{
  display:block;
  font-size:11px;
  color:#22d8ef;
  letter-spacing:.22em;
  opacity:0;
  transform:translateY(8px);
  transition:.9s ease .6s;
}
.awakening-copy h1{
  font-size:clamp(44px,6vw,82px);
  line-height:1;
  letter-spacing:-.05em;
  margin:16px 0 14px;
  opacity:0;
  transform:translateY(18px);
  transition:1.1s ease 1s;
}
.awakening-copy p{
  color:#9db1bc;
  font-size:17px;
  opacity:0;
  transform:translateY(14px);
  transition:1s ease 1.35s;
}
.awakening-overlay.started .awakening-copy span,
.awakening-overlay.started .awakening-copy h1,
.awakening-overlay.started .awakening-copy p{
  opacity:1;
  transform:none;
}
.awakening-button{
  margin-top:32px;
  min-height:52px;
  padding:0 26px;
  border:1px solid rgba(160,235,247,.34);
  border-radius:14px;
  background:linear-gradient(120deg,#34d7e9,#2d8bff 62%,#7257ef);
  color:white;
  font-weight:700;
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .8s ease 2s,transform .8s ease 2s,filter .2s ease;
}
.awakening-button:hover{filter:brightness(1.08)}
.awakening-skip{
  display:block;
  margin:18px auto 0;
  border:0;
  background:transparent;
  color:#617783;
  cursor:pointer;
  opacity:0;
  transition:opacity .8s ease 2.3s,color .2s ease;
}
.awakening-skip:hover{color:#a8bec8}
.awakening-overlay.started .awakening-button,
.awakening-overlay.started .awakening-skip{
  opacity:1;
  transform:none;
}

/* Canon birth animation */
.graph-node.birth-hidden{
  opacity:0!important;
  transform:scale(.3);
  transform-box:fill-box;
  transform-origin:center;
}
.graph-node.birth-visible{
  opacity:1!important;
  transform:scale(1);
  transition:opacity .85s ease,transform .85s cubic-bezier(.2,.75,.2,1);
}
.graph-edge.birth-hidden,
.graph-label.birth-hidden{
  opacity:0!important;
}
.graph-edge.birth-drawing{
  opacity:1!important;
  stroke:#22d8ef!important;
  stroke-width:3!important;
  stroke-dasharray:var(--birth-length)!important;
  stroke-dashoffset:var(--birth-length)!important;
  transition:stroke-dashoffset 1.15s cubic-bezier(.2,.7,.2,1),opacity .3s ease;
}
.graph-edge.birth-drawing.birth-drawn{
  stroke-dashoffset:0!important;
}
.graph-label.birth-visible{
  opacity:1!important;
  transition:opacity .6s ease;
}
.awakening-caption{
  position:absolute;
  left:50%;
  top:20px;
  transform:translateX(-50%);
  z-index:9;
  min-width:280px;
  text-align:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(3,18,29,.74);
  backdrop-filter:blur(16px);
  opacity:0;
  transition:opacity .45s ease;
}
.awakening-caption.visible{opacity:1}
.awakening-caption span{font-size:10px;color:#22d8ef;letter-spacing:.08em}
.awakening-caption strong{display:block;font-size:13px;margin-top:4px}
@keyframes starPulse{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.8;transform:scale(1.4)}}
@keyframes wavePulse{0%{opacity:.38;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.6)}}
@media(prefers-reduced-motion:reduce){
  .awakening-overlay *{animation:none!important;transition:none!important}
}


/* Smooth story paths V7 */
.graph-edge{
  transition:
    opacity .9s ease,
    stroke-width .9s ease,
    filter .9s ease,
    stroke .9s ease;
}
.graph-edge.story-path{
  stroke:#58dbe7!important;
  stroke-width:3!important;
  opacity:.78!important;
  filter:drop-shadow(0 0 3px rgba(34,216,239,.24))!important;
}
.graph-edge.story-drawing{
  animation:none!important;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:var(--story-length)!important;
  stroke-dashoffset:var(--story-length)!important;
  transition:
    stroke-dashoffset 2.4s cubic-bezier(.22,.65,.25,1),
    opacity .8s ease,
    stroke-width .8s ease,
    filter .8s ease!important;
}
.graph-edge.story-drawing.drawn{
  stroke-dashoffset:0!important;
}
.graph-edge.story-complete{
  stroke:#3bbfd1!important;
  stroke-width:2.4!important;
  opacity:.48!important;
  filter:drop-shadow(0 0 2px rgba(34,216,239,.14))!important;
  transition:
    opacity 1.2s ease,
    stroke-width 1.2s ease,
    filter 1.2s ease,
    stroke 1.2s ease!important;
}
.graph-edge.scenario-active{
  stroke:#71e5dc!important;
  stroke-width:3.2!important;
  opacity:.9!important;
  filter:drop-shadow(0 0 4px rgba(101,239,200,.28))!important;
}
.graph-node.scenario-active circle{
  transition:
    stroke .8s ease,
    filter .8s ease,
    transform .8s cubic-bezier(.22,.65,.25,1);
  filter:drop-shadow(0 0 7px rgba(101,239,200,.24))!important;
  transform:scale(1.035);
}
.flow-particle{
  opacity:.6;
  transition:opacity .8s ease;
}
body.scenario-running .graph-edge:not(.story-path):not(.scenario-active){
  opacity:.12;
}


/* Stable universe + Pulse agent V8 */
#cameraLayer{
  transform:none!important;
  transform-origin:600px 400px;
}
.graph-node{
  transform-box:view-box;
}
.pulse-agent{
  fill:#ffffff;
  stroke:#65efc8;
  stroke-width:3;
  filter:drop-shadow(0 0 6px rgba(101,239,200,.9));
}
.pulse-tail{
  fill:none;
  stroke:#65efc8;
  stroke-width:3;
  stroke-linecap:round;
  opacity:.55;
  filter:drop-shadow(0 0 4px rgba(101,239,200,.45));
}
.pulse-ring{
  fill:none;
  stroke:#65efc8;
  stroke-width:2;
  opacity:.75;
  transform-box:fill-box;
  transform-origin:center;
  animation:pulseThink 1.2s ease-out infinite;
}
.pulse-status{
  position:absolute;
  right:14px;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  font-size:10px;
  color:var(--muted);
}
.pulse-status i{
  width:7px;height:7px;
  border-radius:50%;
  background:#65efc8;
  box-shadow:0 0 12px rgba(101,239,200,.8);
}
.pulse-status.active{
  color:#fff;
  border-color:rgba(101,239,200,.35);
}
.graph-edge.story-path{
  stroke:#4dcbd8!important;
  stroke-width:2.8!important;
  opacity:.68!important;
}
.graph-edge.story-active-route{
  stroke:#65efc8!important;
  stroke-width:3.4!important;
  opacity:.96!important;
  filter:drop-shadow(0 0 4px rgba(101,239,200,.34))!important;
}
.graph-edge.story-complete{
  stroke:#2e9fb0!important;
  stroke-width:2.2!important;
  opacity:.34!important;
}
@keyframes pulseThink{
  0%{transform:scale(.45);opacity:.85}
  100%{transform:scale(2.3);opacity:0}
}


/* Stable SVG startup V9
   Never apply CSS transform to .graph-node itself:
   it overrides the SVG transform="translate(x y)" attribute. */
.graph-node.birth-hidden{
  opacity:0!important;
}
.graph-node.birth-visible{
  opacity:1!important;
  transition:opacity .85s ease!important;
}
/* SVG node positions are controlled by transform="translate(x y)" attributes.
   Never override transform on .graph-node itself. */
.graph-node.scenario-active circle{
  transform:scale(1.035);
  transform-box:fill-box;
  transform-origin:center;
}

/* SVG node positioning fix V10 */
.graph-node{
  transform-box:view-box;
}
.graph-node.birth-hidden{
  opacity:0!important;
}
.graph-node.birth-visible{
  opacity:1!important;
  transition:opacity .85s ease!important;
}
.graph-node circle{
  transform-origin:center;
  transform-box:fill-box;
}
.graph-node.scenario-active circle{
  transform:scale(1.035);
}


/* Philosophy pins — informational, not interactive */
.philosophy-pins{
  width:min(1460px,calc(100% - 28px));
  margin:0 auto 26px;
  border-radius:24px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:12px;
}
.philosophy-pins article{
  padding:16px 15px;
  border-right:1px solid rgba(255,255,255,.07);
}
.philosophy-pins article:last-child{border-right:0}
.philosophy-pins span{
  display:block;
  font-size:9px;
  color:var(--cyan);
  letter-spacing:.08em;
}
.philosophy-pins strong{
  display:block;
  margin:8px 0 6px;
  font-size:13px;
  line-height:1.35;
}
.philosophy-pins small{
  display:block;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}

/* Stable and readable universe nodes */
.graph-node{
  transform-box:view-box;
}
.graph-node circle{
  fill:#071b29;
  stroke:rgba(159,229,242,.46);
  stroke-width:2;
}
.graph-node text{
  fill:#f5fbfd;
  text-anchor:middle;
  dominant-baseline:middle;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  paint-order:stroke;
  stroke:#04121c;
  stroke-width:3px;
  stroke-linejoin:round;
}
.graph-node .sub{
  fill:#9bb1bc;
  font-size:8px;
  font-weight:500;
  stroke:#04121c;
  stroke-width:2.2px;
}
.graph-node.core text{
  font-size:14px;
}
.graph-node.core .sub{
  font-size:9px;
}
.graph-node.selected circle,
.graph-node.active circle{
  stroke:#65efc8;
  filter:drop-shadow(0 0 7px rgba(101,239,200,.30));
}
.graph-node.dim{
  opacity:.22;
}
.graph-label{
  font-size:8px;
  fill:#8099a4;
  paint-order:stroke;
  stroke:#04121c;
  stroke-width:2.5px;
  stroke-linejoin:round;
}

/* Keep graph fully inside viewport */
.universe-canvas svg{
  overflow:visible;
}
@media(max-width:1180px){
  .philosophy-pins{grid-template-columns:1fr 1fr}
  .philosophy-pins article:nth-child(2n){border-right:0}
}
@media(max-width:700px){
  .philosophy-pins{grid-template-columns:1fr}
  .philosophy-pins article{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}
  .philosophy-pins article:last-child{border-bottom:0}
}


/* Splash Awakening V6 */
.awakening-sequence{
  min-height:38px;
  margin-top:22px;
  display:grid;
  place-items:center;
}
.awakening-sequence strong{
  font-size:14px;
  color:#bfeff5;
  font-weight:600;
  letter-spacing:.04em;
  opacity:.95;
  transition:opacity .5s ease,transform .5s ease;
}
.awakening-sequence strong.swap{
  opacity:0;
  transform:translateY(8px);
}
.awakening-button{
  margin-top:26px;
}

/* Universe starts fully rendered and stable */
.graph-node,
.graph-edge,
.graph-label{
  opacity:1;
}
.graph-node.birth-hidden,
.graph-edge.birth-hidden,
.graph-label.birth-hidden,
.graph-node.birth-visible,
.graph-label.birth-visible,
.graph-edge.birth-drawing,
.graph-edge.birth-drawn{
  opacity:1!important;
  transition:none!important;
}


/* Mode distinction + closer framing */
.universe-canvas svg{
  transform-origin:center center;
  transition:transform 1s cubic-bezier(.22,.7,.22,1),filter .8s ease;
}
body.mode-semantic .universe-canvas svg{
  transform:scale(1.06);
  filter:saturate(.78) brightness(.96);
}
body.mode-runtime .universe-canvas svg{
  transform:scale(1.10);
  filter:saturate(1.02) brightness(1.02);
}
body.mode-universe .universe-canvas svg{
  transform:scale(1.13);
  filter:saturate(1.10) brightness(1.04);
}

.mode-switch{
  padding:4px;
  border-radius:15px;
  background:rgba(2,15,24,.36);
  border:1px solid rgba(166,230,255,.08);
}
.mode-btn{
  position:relative;
  min-width:96px;
}
.mode-btn::after{
  content:"";
  position:absolute;
  left:18px;right:18px;bottom:5px;
  height:2px;
  border-radius:999px;
  background:transparent;
  transition:.25s ease;
}
.mode-btn.active::after{
  background:linear-gradient(90deg,#22d8ef,#397cf8);
  box-shadow:0 0 10px rgba(34,216,239,.45);
}

/* Semantic: reduce noise */
body.mode-semantic .flow-particle{
  opacity:.22;
}
body.mode-semantic .graph-edge{
  opacity:.28;
}
body.mode-semantic .graph-label{
  opacity:.85;
}
body.mode-semantic .runtime-stream,
body.mode-semantic .story-engine,
body.mode-semantic .story-timeline{
  opacity:.38;
}

/* Runtime: emphasize process */
body.mode-runtime .graph-edge{
  opacity:.58;
}
body.mode-runtime .flow-particle{
  opacity:.75;
}
body.mode-runtime .runtime-stream,
body.mode-runtime .story-engine,
body.mode-runtime .story-timeline{
  opacity:1;
}

/* Universe: emphasize whole system */
body.mode-universe .graph-edge{
  opacity:.72;
}
body.mode-universe .flow-particle{
  opacity:.82;
}
body.mode-universe .graph-node circle{
  filter:drop-shadow(0 0 4px rgba(34,216,239,.14));
}
body.mode-universe .runtime-stream,
body.mode-universe .story-engine,
body.mode-universe .story-timeline{
  opacity:.46;
}

/* Language switch */
.language-switch{
  display:flex;
  gap:4px;
  padding:4px;
  border-radius:12px;
  border:1px solid rgba(166,230,255,.12);
  background:rgba(2,15,24,.38);
}
.language-btn{
  min-width:38px;
  height:34px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  font-weight:700;
  cursor:pointer;
}
.language-btn.active{
  color:#fff;
  background:rgba(34,216,239,.12);
  box-shadow:inset 0 0 0 1px rgba(34,216,239,.22);
}

/* Prototype reports */
.prototype-reports-button{white-space:nowrap}
.prototype-reports-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(0,7,12,.62);
  backdrop-filter:blur(5px);
}
.prototype-reports-drawer{
  position:fixed;z-index:201;
  top:14px;right:14px;bottom:14px;
  width:min(620px,calc(100% - 28px));
  border-radius:24px;
  transform:translateX(calc(100% + 40px));
  transition:transform .45s cubic-bezier(.22,.7,.22,1);
  overflow:auto;
  padding:0;
}
.prototype-reports-drawer.open{transform:translateX(0)}
.prototype-reports-header{
  position:sticky;top:0;z-index:2;
  display:flex;justify-content:space-between;gap:20px;
  padding:26px;
  border-bottom:1px solid var(--line);
  background:rgba(3,18,29,.92);
  backdrop-filter:blur(22px);
}
.prototype-reports-header span{font-size:9px;color:var(--cyan);letter-spacing:.09em}
.prototype-reports-header h2{font-size:32px;margin:10px 0}
.prototype-reports-header p{color:var(--muted);line-height:1.6;margin:0}
.prototype-reports-close{
  flex:0 0 42px;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:#fff;
  font-size:24px;cursor:pointer;
}
.prototype-reports-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:18px 24px;border-bottom:1px solid var(--line);
}
.prototype-reports-toolbar span{font-size:11px;color:var(--muted);margin-left:auto}
.prototype-reports-list{display:grid;gap:12px;padding:20px 24px 30px}
.prototype-report-card{
  width:100%;text-align:left;padding:20px;border-radius:18px;
  border:1px solid var(--line);background:rgba(7,29,44,.46);
  color:#fff;cursor:pointer;transition:.22s;
}
.prototype-report-card:hover{transform:translateY(-2px);border-color:var(--line2)}
.prototype-report-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.prototype-report-card h3{font-size:18px;margin:7px 0}
.prototype-report-card small,.prototype-report-card p{color:var(--muted)}
.prototype-report-score{
  flex:0 0 58px;width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;border:2px solid #65efc8;
  box-shadow:0 0 20px rgba(101,239,200,.15);font-size:19px;font-weight:800
}
.prototype-report-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.prototype-report-meta span{
  padding:7px 9px;border-radius:999px;background:rgba(34,216,239,.06);
  border:1px solid rgba(34,216,239,.12);font-size:9px;color:#b9d1d8
}
.prototype-report-detail{padding:22px 24px 32px}
.prototype-report-detail-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:20px}
.prototype-report-back,.prototype-report-download{
  background:transparent;border:1px solid var(--line);color:var(--muted);
  padding:9px 12px;border-radius:10px;cursor:pointer;text-decoration:none;font-size:12px
}
.prototype-report-hero{
  padding:22px;border:1px solid var(--line);border-radius:18px;
  background:radial-gradient(circle at 100% 0,rgba(34,216,239,.11),transparent 38%),rgba(7,29,44,.42)
}
.prototype-report-hero>span{font-size:9px;color:var(--cyan)}
.prototype-report-hero h3{font-size:27px;margin:10px 0}
.prototype-report-observations{display:grid;gap:12px;margin-top:18px}
.prototype-observation{padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}
.prototype-observation-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.prototype-severity{font-size:9px;padding:6px 8px;border-radius:999px;text-transform:uppercase}
.prototype-severity.critical{color:#ff9393;background:rgba(255,80,80,.1)}
.prototype-severity.warning{color:#ffd36d;background:rgba(255,186,50,.1)}
.prototype-severity.healthy{color:#77efc8;background:rgba(70,220,160,.1)}
.prototype-observation h4{margin:12px 0 8px}.prototype-observation p{color:var(--muted);line-height:1.6}
.prototype-observation dl{display:grid;gap:9px}.prototype-observation dt{font-size:9px;color:var(--cyan)}.prototype-observation dd{margin:0;color:#cbd8de;line-height:1.55;font-size:12px}
.prototype-empty,.prototype-error{padding:30px;text-align:center;color:var(--muted)}
@media(max-width:900px){
  .prototype-reports-button{width:auto}
}

/* Reports entry in main navigation */
.site-header nav .nav-reports-link{
  border:0;
  padding:0;
  background:transparent;
  color:#d9e5eb;
  font:inherit;
  font-size:14px;
  cursor:pointer;
}
.site-header nav .nav-reports-link:hover{
  color:var(--cyan);
}

/* Global reports navigation */
.site-header nav a[data-i18n="prototype.menu"]{
  color:#d9e5eb;
}
.site-header nav a[data-i18n="prototype.menu"]:hover{
  color:var(--cyan);
}

/* Expanded habitats */
.habitat-authority-note{
  flex-basis:100%;
  text-align:right;
  padding:0 4px 2px;
  font-size:9px;
  color:#6f8792;
}
.universe-topbar{
  flex-wrap:wrap;
}
#habitatSelect{
  min-width:220px;
}
#habitatSelect optgroup{
  color:#8fb0bb;
  font-style:normal;
}
#habitatSelect option{
  color:#fff;
}
@media(max-width:760px){
  .habitat-authority-note{text-align:left}
  #habitatSelect{min-width:0;width:100%}
}

/* UI POLISH V1 */
.universe-topbar.polished{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  background:rgba(2,15,24,.28);
}
.mode-row,
.action-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 18px;
}
.mode-row{
  border-bottom:1px solid rgba(166,230,255,.08);
}
.action-row{
  padding-top:16px;
  padding-bottom:16px;
}
.mode-context{
  display:flex;
  align-items:center;
  gap:14px;
}
.control-label{
  display:block;
  font-size:9px;
  line-height:1;
  color:var(--cyan);
  letter-spacing:.10em;
  font-weight:700;
}
.mode-switch{
  display:flex;
  gap:6px;
  padding:4px;
  border-radius:14px;
  border:1px solid rgba(166,230,255,.10);
  background:rgba(3,18,29,.50);
}
.mode-btn{
  min-width:100px;
  padding:10px 14px;
}
.language-switch{
  flex:0 0 auto;
}
.habitat-control{
  min-width:300px;
}
.habitat-label-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
}
.habitat-info{
  width:18px;height:18px;
  border-radius:50%;
  border:1px solid rgba(166,230,255,.24);
  background:transparent;
  color:#9cb4bf;
  font-size:10px;
  line-height:16px;
  cursor:help;
  padding:0;
}
.habitat-select-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.habitat-dot{
  position:absolute;
  left:14px;
  width:9px;height:9px;
  border-radius:50%;
  background:#22d8ef;
  box-shadow:0 0 14px rgba(34,216,239,.55);
  z-index:2;
  pointer-events:none;
}
#habitatSelect{
  min-width:300px;
  height:46px;
  padding:0 42px 0 36px;
  border-radius:13px;
  font-size:14px;
  font-weight:650;
}
.primary-actions{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin-left:auto;
}
.observatory-button{
  height:46px;
  padding-inline:16px;
  display:inline-flex;
  align-items:center;
  gap:9px;
}
.action-icon{
  font-size:14px;
  color:var(--cyan);
}
.icon-action{
  width:46px;height:46px;
  border-radius:13px;
  border:1px solid var(--line);
  background:rgba(7,29,44,.34);
  color:#c7d7de;
  font-size:18px;
  cursor:pointer;
  transition:.2s ease;
}
.icon-action:hover{
  color:#fff;
  border-color:rgba(34,216,239,.32);
  background:rgba(34,216,239,.07);
}
.scenario-primary{
  height:46px;
  min-width:166px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:800;
}
.habitat-authority-note{
  display:none!important;
}
@media(max-width:980px){
  .action-row{
    align-items:flex-end;
    flex-wrap:wrap;
  }
  .habitat-control{
    flex:1 1 320px;
  }
  .primary-actions{
    flex:1 1 auto;
    justify-content:flex-end;
  }
}
@media(max-width:720px){
  .mode-row,
  .action-row{
    padding:12px;
  }
  .mode-row{
    align-items:flex-start;
  }
  .mode-context{
    align-items:flex-start;
    flex-direction:column;
  }
  .mode-switch{
    width:100%;
    overflow:auto;
  }
  .mode-btn{
    min-width:92px;
  }
  .action-row{
    flex-direction:column;
    align-items:stretch;
  }
  .habitat-control,
  #habitatSelect{
    width:100%;
    min-width:0;
  }
  .primary-actions{
    width:100%;
    margin-left:0;
    justify-content:stretch;
  }
  .observatory-button,
  .scenario-primary{
    flex:1;
  }
}

/* Habitat popover */
.habitat-picker{position:relative}
.habitat-picker-button{
  width:320px;height:46px;
  display:flex;align-items:center;gap:12px;
  padding:0 14px;
  border-radius:13px;
  border:1px solid var(--line);
  background:#071723;
  color:#fff;
  font-size:14px;font-weight:700;
  cursor:pointer;
}
.habitat-picker-button .habitat-dot{
  position:static;
  flex:0 0 9px;
}
.habitat-picker-button #habitatPickerLabel{
  flex:1;text-align:left;
}
.habitat-chevron{
  color:var(--muted);
  transition:transform .2s ease;
}
.habitat-picker-button[aria-expanded="true"] .habitat-chevron{
  transform:rotate(180deg);
}
.habitat-popover{
  position:absolute;
  left:0;top:56px;
  z-index:80;
  width:360px;
  max-height:min(620px,70vh);
  overflow:auto;
  padding:14px;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,.42);
}
.habitat-popover-head{
  padding:7px 8px 13px;
  border-bottom:1px solid var(--line);
}
.habitat-popover-head span{
  display:block;font-size:9px;color:var(--cyan);letter-spacing:.10em
}
.habitat-popover-head small{
  display:block;margin-top:6px;color:var(--muted);line-height:1.5
}
.habitat-group{padding:13px 0 3px}
.habitat-group>span{
  display:block;padding:0 9px 8px;
  font-size:9px;color:#86a2ae;letter-spacing:.08em;text-transform:uppercase
}
.habitat-group button{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:11px 10px;
  border:1px solid transparent;
  border-radius:11px;
  background:transparent;color:#dce8ed;
  cursor:pointer;text-align:left
}
.habitat-group button:hover,
.habitat-group button.active{
  background:rgba(34,216,239,.08);
  border-color:rgba(34,216,239,.16);
  color:#fff
}
.habitat-group button i{
  width:9px;height:9px;border-radius:50%;
  background:#22d8ef;box-shadow:0 0 12px rgba(34,216,239,.42)
}
.habitat-group button b{font-size:13px}
.habitat-native-select{
  position:absolute!important;
  width:1px!important;height:1px!important;
  opacity:0!important;pointer-events:none!important;
}

/* Sales plansje */
.portvik-plansje{
  width:min(1380px,calc(100% - 32px));
  margin:0 auto 130px;
}
.plansje-intro{text-align:center;max-width:920px;margin:0 auto 38px}
.plansje-intro>span{font-size:10px;color:var(--cyan);letter-spacing:.12em}
.plansje-intro h2{font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.04em;margin:16px 0}
.plansje-intro p{font-size:18px;line-height:1.7;color:var(--muted)}
.plansje-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap:12px;align-items:center;
  padding:24px;border-radius:24px
}
.plansje-flow article{padding:18px 14px;text-align:center}
.plansje-flow article span{display:block;font-size:9px;color:var(--cyan)}
.plansje-flow article strong{display:block;margin:10px 0 7px;font-size:16px}
.plansje-flow article small{display:block;color:var(--muted);line-height:1.55}
.plansje-flow>i{font-style:normal;color:var(--cyan);opacity:.65;font-size:22px}
.plansje-comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.plansje-comparison article{padding:30px;border-radius:22px;text-align:center}
.plansje-comparison article>span{font-size:9px;color:var(--cyan)}
.plansje-comparison h3{font-size:28px;margin:12px 0}
.plansje-comparison p{color:var(--muted);line-height:1.65}
.plansje-comparison .emphasis{
  border-color:rgba(34,216,239,.30);
  background:radial-gradient(circle at 50% 0,rgba(34,216,239,.10),transparent 45%),rgba(7,29,44,.42)
}
.comparison-path{
  margin-top:22px;display:grid;gap:9px;justify-items:center
}
.comparison-path b{
  min-width:160px;padding:10px 14px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.025)
}
.comparison-path i{font-style:normal;color:var(--cyan)}
.plansje-closing{text-align:center;padding:90px 20px 10px}
.plansje-closing p{color:var(--muted);font-size:18px}
.plansje-closing h2{font-size:clamp(42px,5vw,72px);letter-spacing:-.04em;margin:10px 0}
@media(max-width:980px){
  .plansje-flow{grid-template-columns:1fr}
  .plansje-flow>i{transform:rotate(90deg)}
}
@media(max-width:760px){
  .habitat-picker-button,.habitat-popover{width:100%}
  .plansje-comparison{grid-template-columns:1fr}
}


/* CONTROL ALIGNMENT V1
   Habitat, Observatory, Intro and Run scenario share one exact control line. */
.action-row{
  align-items:flex-end !important;
}

.habitat-control{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.habitat-picker,
.primary-actions{
  height:48px;
}

.primary-actions{
  display:flex;
  align-items:stretch !important;
  align-self:flex-end;
}

.habitat-picker-button,
.observatory-button,
.icon-action,
.scenario-primary{
  box-sizing:border-box !important;
  height:48px !important;
  min-height:48px !important;
  max-height:48px !important;
  margin:0 !important;
  line-height:1 !important;
  align-self:stretch;
}

.habitat-picker-button{
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.observatory-button,
.scenario-primary{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.icon-action{
  display:inline-grid !important;
  place-items:center !important;
  padding:0 !important;
}

@media(max-width:720px){
  .habitat-picker,
  .primary-actions{
    height:auto;
  }

  .primary-actions{
    align-items:stretch !important;
  }
}

/* Prototypes hub */
.prototypes-page{padding-top:120px}
.prototypes-hero{padding-bottom:54px}
.prototype-grid{
  width:min(1380px,calc(100% - 32px));
  margin:0 auto 28px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.prototype-card{
  position:relative;
  min-height:420px;
  display:flex;
  flex-direction:column;
  padding:26px;
  border-radius:24px;
  text-decoration:none;
  color:#fff;
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.prototype-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.15;
  pointer-events:none;
}
.prototype-card.capability::before{background:radial-gradient(circle at 80% 10%,#65efc8,transparent 42%)}
.prototype-card.observatory::before{background:radial-gradient(circle at 80% 10%,#22d8ef,transparent 42%)}
.prototype-card.pulse::before{background:radial-gradient(circle at 80% 10%,#9d7cff,transparent 42%)}
.prototype-card:hover{
  transform:translateY(-5px);
  border-color:rgba(99,220,239,.35);
  box-shadow:0 28px 70px rgba(0,0,0,.26);
}
.prototype-card-top{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.prototype-index{font-size:10px;color:var(--cyan)}
.prototype-status{
  font-size:9px;
  color:#89a3ae;
  letter-spacing:.08em;
}
.prototype-icon{
  position:relative;
  z-index:1;
  width:76px;height:76px;
  display:grid;place-items:center;
  margin:62px 0 22px;
  border-radius:50%;
  border:1px solid rgba(166,230,255,.26);
  background:rgba(34,216,239,.06);
  font-size:32px;
  color:var(--cyan);
}
.prototype-card h2{
  position:relative;z-index:1;
  font-size:34px;margin:0 0 12px
}
.prototype-card p{
  position:relative;z-index:1;
  color:var(--muted);
  line-height:1.7;
  margin:0 0 28px
}
.prototype-card-footer{
  position:relative;z-index:1;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
}
.prototype-card-footer span{font-size:11px;color:#87a0ab}
.prototype-card-footer strong{font-size:12px;color:#fff}
.prototype-principle{
  width:min(1380px,calc(100% - 32px));
  margin:0 auto 120px;
  padding:32px;
  border-radius:24px;
  text-align:center;
}
.prototype-principle>span{font-size:9px;color:var(--cyan);letter-spacing:.10em}
.prototype-principle h2{font-size:36px;margin:12px 0}
.prototype-principle p{max-width:760px;margin:0 auto;color:var(--muted);line-height:1.7}
.site-header nav a.active{color:var(--cyan)}
@media(max-width:980px){
  .prototype-grid{grid-template-columns:1fr}
  .prototype-card{min-height:340px}
  .prototype-icon{margin-top:36px}
}

/* PORTVIK V0.3 — HOME EXPLAINER */
.home-plansje{
  width:min(1420px,calc(100% - 32px));
  margin:120px auto 140px;
}
.home-plansje-intro{
  max-width:940px;
  margin:0 auto 44px;
  text-align:center;
}
.home-plansje-intro h2{
  margin:20px 0 16px;
  font-size:clamp(42px,5.4vw,76px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.home-plansje-intro h2 em{
  color:var(--cyan);
  font-style:normal;
}
.home-plansje-intro p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
}
.home-plansje-flow{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  gap:14px;
  align-items:center;
  padding:28px;
  border-radius:26px;
}
.home-plansje-flow article{
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:18px 14px;
  text-align:center;
  border-radius:16px;
  background:rgba(255,255,255,.018);
}
.home-plansje-flow article span{
  font-size:9px;
  color:var(--cyan);
  letter-spacing:.08em;
}
.home-plansje-flow article strong{
  margin:10px 0 8px;
  font-size:17px;
}
.home-plansje-flow article small{
  color:var(--muted);
  line-height:1.55;
}
.home-plansje-flow>i{
  font-style:normal;
  color:var(--cyan);
  font-size:22px;
  opacity:.62;
}
.home-plansje-comparison{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:22px;
}
.home-plansje-comparison article{
  padding:34px;
  border-radius:24px;
  text-align:center;
}
.home-plansje-comparison article>span{
  font-size:9px;
  color:var(--cyan);
  letter-spacing:.10em;
}
.home-plansje-comparison h3{
  margin:13px 0;
  font-size:30px;
}
.home-plansje-comparison p{
  max-width:520px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.7;
}
.home-plansje-comparison .emphasis{
  border-color:rgba(34,216,239,.28);
  background:
    radial-gradient(circle at 50% 0,rgba(34,216,239,.11),transparent 44%),
    rgba(7,29,44,.42);
}
.home-comparison-path{
  display:grid;
  gap:9px;
  justify-items:center;
  margin-top:24px;
}
.home-comparison-path b{
  min-width:180px;
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.home-comparison-path i{
  color:var(--cyan);
  font-style:normal;
}
.home-plansje-canon{
  margin-top:22px;
  padding:32px;
  border:1px solid rgba(34,216,239,.16);
  border-radius:24px;
  text-align:center;
  background:rgba(34,216,239,.035);
}
.home-plansje-canon span{
  font-size:9px;
  color:var(--cyan);
  letter-spacing:.10em;
}
.home-plansje-canon h3{
  margin:13px 0;
  font-size:clamp(26px,3vw,42px);
}
.home-plansje-canon p{
  max-width:760px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.7;
}
.home-plansje-closing{
  padding:95px 20px 0;
  text-align:center;
}
.home-plansje-closing p{
  color:var(--muted);
  font-size:19px;
}
.home-plansje-closing h2{
  margin:10px 0 28px;
  font-size:clamp(44px,5.8vw,78px);
  letter-spacing:-.045em;
}
@media(max-width:1000px){
  .home-plansje-flow{grid-template-columns:1fr}
  .home-plansje-flow>i{transform:rotate(90deg)}
}
@media(max-width:760px){
  .home-plansje{margin-top:80px}
  .home-plansje-comparison{grid-template-columns:1fr}
  .home-plansje-flow{padding:16px}
}

/* PORTVIK EXPERIENCE V1.0 ALPHA */
.sales-story,
.showcase{
  width:min(1420px,calc(100% - 32px));
  margin:120px auto 140px;
}
.sales-story-head,
.showcase-head{
  max-width:980px;
  margin:0 auto 42px;
  text-align:center;
}
.sales-story-head h2,
.showcase-head h2{
  margin:20px 0 16px;
  font-size:clamp(42px,5.2vw,74px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.sales-story-head h2 em,
.showcase-head h2 em{
  color:var(--cyan);
  font-style:normal;
}
.sales-story-head p,
.showcase-head p{
  max-width:820px;
  margin:0 auto;
  color:var(--muted);
  font-size:18px;
  line-height:1.75;
}
.sales-problems{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.sales-problems article{
  min-height:240px;
  padding:25px;
  border-radius:20px;
}
.sales-problems span{
  font-size:9px;
  color:var(--cyan);
}
.sales-problems strong{
  display:block;
  margin:36px 0 12px;
  font-size:20px;
  line-height:1.35;
}
.sales-problems p{
  color:var(--muted);
  line-height:1.65;
}
.sales-answer{
  margin-top:18px;
  padding:30px;
  border-radius:24px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:28px;
  align-items:center;
}
.sales-answer>div>span{
  font-size:9px;
  color:var(--cyan);
  letter-spacing:.1em;
}
.sales-answer h3{
  margin:12px 0;
  font-size:34px;
}
.sales-answer p{
  color:var(--muted);
  line-height:1.7;
}
.sales-answer-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
}
.sales-answer-line b{
  padding:11px 14px;
  border:1px solid var(--line);
  border-radius:11px;
  background:rgba(255,255,255,.025);
}
.sales-answer-line i{
  color:var(--cyan);
  font-style:normal;
}
.showcase-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.showcase-card{
  overflow:hidden;
  border-radius:26px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.showcase-card:hover{
  transform:translateY(-5px);
  border-color:rgba(34,216,239,.28);
  box-shadow:0 28px 70px rgba(0,0,0,.24);
}
.showcase-screen{
  position:relative;
  min-height:330px;
  margin:14px;
  padding:18px;
  border-radius:19px;
  overflow:hidden;
  background:#05131e;
  border:1px solid rgba(166,230,255,.10);
}
.showcase-screen::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.03),transparent 40%);
}
.mock-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07);
  font-size:12px;color:#dcebf0;
}
.mock-topbar b{font-size:8px;color:var(--cyan);letter-spacing:.08em}
.mock-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px
}
.mock-kpis i{
  padding:14px;border-radius:12px;background:rgba(255,255,255,.035);font-style:normal
}
.mock-kpis strong,.mock-kpis small{display:block}
.mock-kpis strong{font-size:22px}.mock-kpis small{margin-top:6px;font-size:9px;color:#8099a4}
.mock-body{display:grid;grid-template-columns:1.3fr .7fr;gap:12px;margin-top:14px}
.mock-chart{
  height:155px;border-radius:13px;
  background:
    linear-gradient(180deg,transparent 75%,rgba(34,216,239,.10)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 30px),
    linear-gradient(140deg,transparent 0 26%,#22d8ef 27% 28%,transparent 29% 45%,#397cf8 46% 47%,transparent 48%);
}
.mock-list{display:grid;gap:9px}
.mock-list span{border-radius:9px;background:rgba(255,255,255,.04)}
.factory-line,.arena-grid,.connected-network,.marina-map,.route-map{
  position:relative;margin-top:20px;height:170px;border-radius:14px;background:rgba(255,255,255,.025)
}
.factory-line{display:flex;align-items:center;justify-content:space-around}
.factory-line i{width:48px;height:48px;border-radius:12px;border:1px solid #f1a45d;background:rgba(241,164,93,.08)}
.marina-map i,.arena-grid i,.connected-network i,.route-map span{position:absolute;border-radius:50%}
.marina-map{background:linear-gradient(150deg,rgba(34,216,239,.10),transparent),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 48px)}
.marina-map i{width:14px;height:14px;background:#31d5e8;box-shadow:0 0 12px rgba(49,213,232,.55)}
.marina-map i:nth-child(1){left:16%;top:24%}.marina-map i:nth-child(2){left:38%;top:52%}.marina-map i:nth-child(3){left:61%;top:32%}.marina-map i:nth-child(4){left:74%;top:67%}.marina-map i:nth-child(5){left:48%;top:77%}.marina-map i:nth-child(6){left:84%;top:20%}
.route-map{background:linear-gradient(150deg,rgba(157,124,255,.08),transparent),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 28px)}
.route-map::before{content:"";position:absolute;left:10%;right:10%;top:48%;height:3px;background:linear-gradient(90deg,#9d7cff,#22d8ef);transform:rotate(-7deg)}
.route-map span{width:13px;height:13px;background:#9d7cff;box-shadow:0 0 12px rgba(157,124,255,.55)}
.route-map span:nth-child(1){left:12%;top:58%}.route-map span:nth-child(2){left:38%;top:48%}.route-map span:nth-child(3){left:66%;top:42%}.route-map span:nth-child(4){left:84%;top:29%}
.arena-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:15px}
.arena-grid i{position:static;border-radius:10px;background:linear-gradient(135deg,rgba(181,233,255,.14),rgba(255,255,255,.025))}
.connected-network i{width:12px;height:12px;background:#22d8ef;box-shadow:0 0 14px rgba(34,216,239,.55)}
.connected-network::before,.connected-network::after{content:"";position:absolute;left:10%;right:10%;top:50%;height:1px;background:rgba(34,216,239,.30)}
.connected-network::after{transform:rotate(28deg)}
.connected-network i:nth-child(1){left:12%;top:20%}.connected-network i:nth-child(2){left:27%;top:62%}.connected-network i:nth-child(3){left:45%;top:31%}.connected-network i:nth-child(4){left:60%;top:70%}.connected-network i:nth-child(5){left:75%;top:35%}.connected-network i:nth-child(6){left:88%;top:63%}.connected-network i:nth-child(7){left:49%;top:50%}
.healthcare-screen{box-shadow:inset 0 0 80px rgba(101,239,200,.035)}
.manufacturing-screen{box-shadow:inset 0 0 80px rgba(241,164,93,.035)}
.marina-screen{box-shadow:inset 0 0 80px rgba(49,213,232,.035)}
.logistics-screen{box-shadow:inset 0 0 80px rgba(157,124,255,.035)}
.arena-screen{box-shadow:inset 0 0 80px rgba(181,233,255,.035)}
.connected-screen{box-shadow:inset 0 0 80px rgba(34,216,239,.035)}
.showcase-copy{padding:12px 28px 30px}
.showcase-copy>span{font-size:9px;color:var(--cyan);letter-spacing:.1em}
.showcase-copy h3{margin:10px 0;font-size:28px}
.showcase-copy p{color:var(--muted);line-height:1.7}
.showcase-footer{text-align:center;margin-top:34px}
.showcase-footer p{color:var(--muted);margin-bottom:18px}
@media(max-width:1050px){
  .sales-problems{grid-template-columns:1fr 1fr}
  .sales-answer{grid-template-columns:1fr}
}
@media(max-width:800px){
  .showcase-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
  .sales-problems{grid-template-columns:1fr}
  .showcase-screen{min-height:280px}
}

/* ACCESS + REAL CONCEPT SCREENSHOTS V1.1 */
.nav-preview{
  margin-left:5px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(157,124,255,.16);
  color:#cdbdff;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.real-concept-screen{
  padding:0!important;
  min-height:0!important;
  aspect-ratio:1.12/1;
}
.real-concept-screen img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.concept-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  padding:6px 9px;
  border-radius:999px;
  background:rgba(2,13,22,.80);
  border:1px solid rgba(166,230,255,.18);
  color:#b8cbd3;
  font-size:8px;
  letter-spacing:.08em;
}
.private-module-body{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 20%,rgba(34,216,239,.11),transparent 38%),
    #020d16;
}
.private-module-card{
  width:min(680px,100%);
  padding:48px;
  border-radius:28px;
  text-align:center;
}
.private-module-logo{
  width:190px;
  max-width:70%;
  margin-bottom:48px;
}
.private-module-card>span{
  color:var(--cyan);
  font-size:10px;
  letter-spacing:.12em;
}
.private-module-card h1{
  margin:15px 0 8px;
  font-size:clamp(42px,7vw,76px);
}
.private-module-card h2{
  margin:0 0 18px;
  color:#d8e5ea;
  font-size:22px;
  font-weight:500;
}
.private-module-card p{
  max-width:540px;
  margin:0 auto 26px;
  color:var(--muted);
  line-height:1.75;
}
.private-module-card .btn{
  margin:7px;
}
.private-status{
  width:max-content;
  max-width:100%;
  margin:22px auto 28px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  color:#b8cad2;
  font-size:11px;
}
.private-status i{
  display:inline-block;
  width:7px;height:7px;
  margin-right:8px;
  border-radius:50%;
  background:#ffd36d;
  box-shadow:0 0 12px rgba(255,211,109,.45);
}
.pulse-public{
  background:
    radial-gradient(circle at 50% 38%,rgba(157,124,255,.20),transparent 38%),
    #020d16;
}

/* POSTCARD SHOWCASE V1.2 */
.postcard-showcase{
  width:min(1500px,calc(100% - 24px));
  margin:110px auto 150px;
}
.postcard-showcase-surface{
  position:relative;
  min-height:980px;
  overflow:hidden;
  border-radius:34px;
  border:1px solid rgba(166,230,255,.13);
  background:
    linear-gradient(rgba(1,9,15,.40),rgba(1,9,15,.58)),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.018) 0 1px,
      transparent 1px 120px),
    linear-gradient(135deg,#21170f 0%,#17100b 48%,#0b1015 100%);
  box-shadow:
    0 50px 120px rgba(0,0,0,.36),
    inset 0 0 120px rgba(0,0,0,.36);
}
.postcard-showcase-surface::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background:
    repeating-linear-gradient(7deg,
      transparent 0 5px,
      rgba(255,255,255,.015) 6px,
      transparent 7px 18px);
  mix-blend-mode:soft-light;
}
.postcard-copy{
  position:absolute;
  z-index:20;
  left:42px;
  top:44px;
  width:340px;
}
.postcard-copy h2{
  margin:20px 0 16px;
  font-size:clamp(42px,4.2vw,68px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.postcard-copy h2 em{
  color:var(--cyan);
  font-style:normal;
}
.postcard-copy p{
  color:#a8bac3;
  line-height:1.72;
  font-size:16px;
}
.postcard-cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.postcard-stack{
  position:absolute;
  inset:60px 28px 20px 300px;
}
.solution-postcard{
  position:absolute;
  width:360px;
  padding:13px 13px 18px;
  border-radius:13px;
  background:#e9e2d2;
  color:#07131d;
  box-shadow:
    0 24px 40px rgba(0,0,0,.34),
    0 3px 8px rgba(0,0,0,.36);
  transform-origin:center;
  transition:
    transform .32s cubic-bezier(.22,.7,.22,1),
    box-shadow .32s ease,
    z-index 0s;
}
.solution-postcard:hover{
  z-index:50;
  transform:translateY(-12px) rotate(0deg) scale(1.06)!important;
  box-shadow:
    0 38px 80px rgba(0,0,0,.48),
    0 8px 18px rgba(0,0,0,.38);
}
.postcard-frame{
  position:relative;
  overflow:hidden;
  border-radius:8px;
  aspect-ratio:1.34/1;
  background:#07131d;
}
.postcard-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
}
.postcard-frame::after{
  content:"ILLUSTRATIVT KONSEPT";
  position:absolute;
  left:9px;
  bottom:8px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(1,10,17,.78);
  color:#cadce3;
  border:1px solid rgba(255,255,255,.16);
  font-size:7px;
  letter-spacing:.08em;
}
.postcard-caption{
  padding:13px 7px 0;
}
.postcard-caption>span{
  font-size:8px;
  color:#287f8d;
  font-weight:800;
  letter-spacing:.10em;
}
.postcard-caption h3{
  margin:6px 0 4px;
  font-size:21px;
  color:#07131d;
}
.postcard-caption p{
  margin:0;
  color:#51606a;
  font-size:11px;
  line-height:1.5;
}
.postcard-healthcare{
  left:19%;
  top:3%;
  transform:rotate(-4deg);
  z-index:16;
}
.postcard-factory{
  left:52%;
  top:5%;
  transform:rotate(4deg);
  z-index:15;
}
.postcard-marina{
  left:4%;
  top:37%;
  transform:rotate(-6deg);
  z-index:22;
}
.postcard-logistics{
  left:34%;
  top:39%;
  transform:rotate(1deg);
  z-index:26;
}
.postcard-arena{
  left:66%;
  top:39%;
  transform:rotate(6deg);
  z-index:23;
}
.postcard-connected{
  left:40%;
  top:70%;
  transform:rotate(-2deg);
  z-index:30;
}
.postcard-canon-card{
  position:absolute;
  z-index:36;
  left:34px;
  bottom:40px;
  width:260px;
  padding:22px;
  border-radius:20px;
}
.postcard-canon-card>span{
  color:var(--cyan);
  font-size:9px;
  letter-spacing:.1em;
}
.postcard-canon-card h3{
  margin:10px 0 8px;
  font-size:24px;
}
.postcard-canon-card p{
  color:var(--muted);
  line-height:1.6;
  font-size:13px;
}
.postcard-canon-card a{
  display:inline-block;
  margin-top:10px;
  color:var(--cyan);
  text-decoration:none;
  font-size:12px;
}
.postcard-note{
  position:absolute;
  z-index:15;
  color:#84a5b1;
  font-family:"Segoe Print","Bradley Hand",cursive;
  transform:rotate(-4deg);
  opacity:.82;
}
.postcard-note span,
.postcard-note strong{
  display:block;
}
.note-top{
  top:42px;
  right:235px;
}
.note-bottom{
  right:78px;
  bottom:58px;
}
.desk-coffee{
  position:absolute;
  z-index:8;
  right:-25px;
  top:-18px;
  width:160px;
  height:160px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,#170f09 0 34%,#3c2b21 35% 39%,#0d1419 40% 69%,#222f38 70% 74%,transparent 75%);
  filter:drop-shadow(0 18px 20px rgba(0,0,0,.45));
}
.desk-pen{
  position:absolute;
  z-index:7;
  right:30px;
  bottom:96px;
  width:13px;
  height:250px;
  border-radius:9px;
  background:linear-gradient(90deg,#090d11,#52606a 50%,#080b0d);
  transform:rotate(19deg);
  box-shadow:0 14px 18px rgba(0,0,0,.45);
}
.desk-leaf{
  position:absolute;
  z-index:5;
  left:-45px;
  bottom:110px;
  width:180px;
  height:180px;
  border-radius:80% 12% 80% 16%;
  background:radial-gradient(circle at 70% 40%,#326b48,#163722 65%,#0b1d12);
  transform:rotate(28deg);
  filter:blur(.2px) drop-shadow(0 20px 24px rgba(0,0,0,.38));
  opacity:.78;
}
@media(max-width:1300px){
  .postcard-showcase-surface{
    min-height:1180px;
  }
  .postcard-copy{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    max-width:780px;
    padding:42px 42px 0;
  }
  .postcard-stack{
    inset:280px 20px 20px 20px;
  }
  .postcard-canon-card{
    left:34px;
    bottom:34px;
  }
}
@media(max-width:980px){
  .postcard-showcase-surface{
    min-height:auto;
    padding-bottom:34px;
  }
  .postcard-stack{
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    padding:40px 24px;
  }
  .solution-postcard{
    position:relative;
    left:auto!important;
    top:auto!important;
    width:auto;
    transform:none!important;
  }
  .solution-postcard:hover{
    transform:translateY(-6px) scale(1.02)!important;
  }
  .postcard-canon-card{
    position:relative;
    left:auto;
    bottom:auto;
    margin:0 24px;
    width:auto;
  }
  .postcard-note,.desk-coffee,.desk-pen,.desk-leaf{
    display:none;
  }
}
@media(max-width:680px){
  .postcard-showcase{
    width:min(100% - 12px,1500px);
  }
  .postcard-copy{
    padding:30px 22px 0;
  }
  .postcard-stack{
    grid-template-columns:1fr;
    padding:30px 14px;
  }
  .postcard-canon-card{
    margin:0 14px;
  }
}

/* HERO POLISH V1.2.1 */
.hero .eyebrow,
.hero .hero-kicker,
.hero p,
.hero h1,
.hero h1 span,
.hero h1 em,
.hero-copy,
.hero-copy *{
  text-shadow:
    0 2px 2px rgba(0,0,0,.72),
    0 0 12px rgba(0,0,0,.52),
    0 0 26px rgba(0,0,0,.28);
}

.hero h1,
.hero h1 span,
.hero h1 em{
  -webkit-text-stroke:.55px rgba(1,9,15,.48);
  paint-order:stroke fill;
}

.hero .eyebrow,
.hero .hero-kicker{
  -webkit-text-stroke:.25px rgba(1,9,15,.42);
}

.hero .btn-primary,
.hero-actions .btn-primary{
  min-width:260px;
  min-height:58px;
  padding:0 26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border-radius:16px;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
}

.hero .btn-primary strong,
.hero-actions .btn-primary strong{
  font-size:22px;
  line-height:1;
  transition:transform .22s ease;
}

.hero .btn-primary:hover strong,
.hero-actions .btn-primary:hover strong{
  transform:translateX(5px);
}

/* If the hero had two CTA slots, keep the remaining one visually centered. */
.hero-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

/* MOBILE + HERO POLISH V1.2.3 */

/* Hero text: readable without a heavy Photoshop-style shadow. */
.hero .eyebrow,
.hero-content>p{
  text-shadow:
    0 1px 2px rgba(0,0,0,.58),
    0 0 10px rgba(0,0,0,.24);
}

.hero h1{
  text-shadow:
    0 2px 3px rgba(0,0,0,.56),
    0 0 14px rgba(0,0,0,.20);
  -webkit-text-stroke:.28px rgba(2,10,16,.42);
  paint-order:stroke fill;
}

/* Explicitly restore the cyan/blue gradient on Everywhere. */
.hero h1 em{
  background:linear-gradient(90deg,#2ee1ed 0%,#36a8ff 52%,#536bff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent!important;
  -webkit-text-stroke:0!important;
  text-shadow:
    0 2px 4px rgba(0,0,0,.48),
    0 0 18px rgba(31,173,255,.16);
}

/* Version */
.site-version{
  display:inline-block;
  margin-left:9px;
  padding:4px 8px;
  border:1px solid rgba(166,230,255,.12);
  border-radius:999px;
  color:#78929d;
  font-size:9px;
  letter-spacing:.05em;
}

/* Desktop: mobile controls hidden. */
.mobile-menu-toggle,
.mobile-login-link,
.mobile-menu-version{
  display:none;
}

@media(max-width:1050px){
  .site-header{
    height:66px!important;
    width:calc(100% - 24px)!important;
    top:12px!important;
    padding:0 14px!important;
    gap:10px!important;
  }

  .site-header>.brand{
    position:relative;
    z-index:410;
    flex:0 1 190px;
  }

  .site-header>.brand img{
    width:min(190px,48vw)!important;
  }

  /* Hide the external desktop login button. */
  .site-header>.btn{
    display:none!important;
  }

  .mobile-menu-toggle{
    display:grid;
    place-items:center;
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(166,230,255,.18);
    border-radius:13px;
    background:rgba(3,18,29,.78);
    color:#eaf7fa;
    cursor:pointer;
    position:relative;
    z-index:420;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
  }

  .mobile-menu-toggle svg{
    width:24px;
    height:24px;
    overflow:visible;
  }

  .mobile-menu-toggle .menu-line{
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    transform-box:view-box;
    transform-origin:center;
    transition:
      transform .25s ease,
      opacity .2s ease;
  }

  .mobile-menu-toggle[aria-expanded="true"] .menu-line-top{
    transform:translateY(5px) rotate(45deg);
  }

  .mobile-menu-toggle[aria-expanded="true"] .menu-line-middle{
    opacity:0;
  }

  .mobile-menu-toggle[aria-expanded="true"] .menu-line-bottom{
    transform:translateY(-5px) rotate(-45deg);
  }

  .site-header .main-navigation{
    display:flex!important;
    position:fixed;
    z-index:400;
    inset:0 0 0 auto;
    width:min(370px,88vw);
    height:100dvh;
    box-sizing:border-box;
    padding:96px 22px 26px;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    overflow-y:auto;
    background:
      radial-gradient(circle at 80% 8%,rgba(34,216,239,.11),transparent 34%),
      rgba(2,13,22,.985);
    border-left:1px solid rgba(166,230,255,.14);
    box-shadow:-26px 0 70px rgba(0,0,0,.48);
    backdrop-filter:blur(24px);
    transform:translateX(105%);
    visibility:hidden;
    opacity:0;
    transition:
      transform .3s cubic-bezier(.22,.7,.22,1),
      opacity .22s ease,
      visibility .3s;
  }

  .site-header .main-navigation::before{
    content:"MENY";
    margin:0 12px 14px;
    color:var(--cyan);
    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
  }

  .site-header .main-navigation.mobile-open{
    transform:translateX(0);
    visibility:visible;
    opacity:1;
  }

  .site-header .main-navigation>a{
    display:flex!important;
    min-height:50px;
    box-sizing:border-box;
    padding:0 13px;
    align-items:center;
    justify-content:space-between;
    border-radius:12px;
    color:#dce9ee;
    font-size:16px;
    text-decoration:none;
  }

  .site-header .main-navigation>a:hover,
  .site-header .main-navigation>a:focus{
    background:rgba(34,216,239,.08);
    color:#fff;
  }

  .site-header .main-navigation .mobile-login-link{
    display:flex!important;
    margin-top:14px;
    justify-content:center;
    border:1px solid rgba(166,230,255,.18);
    background:rgba(34,216,239,.06);
  }

  .mobile-menu-version{
    display:block;
    margin:auto 12px 0;
    padding-top:24px;
    color:#607985;
    font-size:10px;
    letter-spacing:.05em;
  }

  body.mobile-menu-open{
    overflow:hidden;
  }

  body.mobile-menu-open::after{
    content:"";
    position:fixed;
    z-index:390;
    inset:0;
    background:rgba(0,6,11,.58);
    backdrop-filter:blur(3px);
  }
}

@media(max-width:460px){
  .site-header{
    width:calc(100% - 18px)!important;
    padding:0 12px!important;
  }

  .site-header>.brand{
    flex-basis:160px;
  }

  .site-header .main-navigation{
    width:100%;
  }

  .site-version{
    display:block;
    width:max-content;
    margin:8px auto 0;
  }
}

/* V1.2.4 — MOBILE MENU LAYER FIX
   The backdrop must sit behind both the drawer and the menu button. */

@media(max-width:1050px){
  body.mobile-menu-open::after{
    z-index:900!important;
    pointer-events:auto;
  }

  .site-header{
    z-index:950!important;
  }

  .site-header .main-navigation{
    z-index:1000!important;
    filter:none!important;
    opacity:1;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
  }

  .mobile-menu-toggle{
    z-index:1010!important;
  }

  .site-header>.brand{
    z-index:1010!important;
  }

  /* Prevent the page-wide blur layer from visually affecting the drawer. */
  body.mobile-menu-open .site-header,
  body.mobile-menu-open .site-header *,
  body.mobile-menu-open .main-navigation,
  body.mobile-menu-open .main-navigation *{
    filter:none!important;
  }

  .site-header .main-navigation.mobile-open{
    visibility:visible!important;
    opacity:1!important;
    transform:translateX(0)!important;
  }
}

/* V1.2.5 — MOBILE VIEWPORT WIDTH FIX */
html,
body{
  width:100%;
  min-width:0;
  max-width:100%;
}

html{
  overflow-x:clip;
}

body{
  position:relative;
  overflow-x:clip!important;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

@media(max-width:1050px){
  .hero,
  main,
  section,
  footer{
    max-width:100%;
  }

  .site-header{
    max-width:calc(100% - 18px)!important;
  }
}