/* Kuokoa collection — independent product worlds, one Pacific identity. */
.portfolio-edition{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #416476;padding:24px 0;color:#a9c8d5;font:11px/1.6 Plex,monospace;letter-spacing:.1em}
.app-scenes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.app-scene{--accent:#64ffdc;--scale:.44;position:relative;isolation:isolate;overflow:hidden;min-width:0;height:470px;grid-column:span 6;background:#08283b;scroll-margin-top:28px}
.scene-nomi,.scene-farewake,.scene-kinperk{grid-column:span 7}.scene-ripero,.scene-profitcart,.scene-sprigwise{grid-column:span 5}
.scene-photo,.scene-shade,.scene-grid{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
.scene-photo{object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1);filter:saturate(.9)}
.app-scene:hover .scene-photo{transform:scale(1.04)}
.scene-shade{z-index:-1;background:linear-gradient(90deg,#031a29e8,#031a2966 65%,#031a2911),linear-gradient(0deg,#031a29df,transparent 85%)}
.scene-topline{position:absolute;top:25px;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c2dbe2;font:10px/1.6 Plex,monospace;letter-spacing:.06em;text-transform:uppercase}
.scene-status{white-space:nowrap;font-size:9px;padding:3px 7px;border:1px solid #d4edee55;background:#031b2855}
.scene-brand{position:absolute;left:28px;top:72px;display:flex;align-items:center;gap:11px;margin:0;font:650 clamp(22px,2.3vw,34px)/1.1 Syne,sans-serif;letter-spacing:-.035em;z-index:2;color:#f0faff}
.scene-brand>img{width:40px;height:44px;object-fit:contain}.scene-brand>img.scene-nomi{width:125px;height:47px}
.scene-profitcart .scene-brand>img{width:42px;height:36px}.scene-ripero .scene-brand>img{width:30px}
.scene-copy{position:absolute;left:28px;bottom:32px;width:41%;z-index:2}
.scene-copy h4{font:550 clamp(20px,2.1vw,30px)/1.17 Syne,sans-serif;letter-spacing:-.035em;margin:0 0 16px;color:#eefbff}
.scene-copy p{font:12px/1.8 Plex,monospace;color:#c9e0e5;margin:0;max-width:235px}
.scene-device{position:absolute;right:34px;top:131px;width:calc(382px * var(--scale) + 8px);height:calc(820px * var(--scale) + 8px);padding:4px;border-radius:24px;background:linear-gradient(135deg,#a4bdc6,#20303c 25%,#142734 70%,#748a99);box-shadow:0 0 0 1px #d4f1f155,15px 24px 42px #0007;transform:perspective(1000px) rotateY(-12deg) rotateZ(8deg);transform-origin:50% 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.screen-glass{width:100%;height:100%;overflow:hidden;border-radius:20px;background:#fbfbfc}
.scene-device iframe{width:382px;height:820px;display:block;border:0;max-width:none;transform:scale(var(--scale));transform-origin:0 0;pointer-events:none}
.app-scene:hover .scene-device{transform:perspective(1000px) rotateY(-5deg) rotateZ(3deg) translateY(-8px)}
.scene-ripero{--accent:#ff677e;background:radial-gradient(ellipse at 80% 20%,#c1445950,transparent 65%),#261f35}
.scene-ripero .scene-shade{background:linear-gradient(90deg,#251827aa,transparent),linear-gradient(0deg,#221425,transparent 90%)}
.scene-ripero .scene-device{transform:perspective(1000px) rotateY(10deg) rotateZ(-7deg);right:26px}
.scene-grid{background-image:linear-gradient(#afd7e20a 1px,transparent 1px),linear-gradient(90deg,#afd7e20a 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(45deg,transparent,#000)}
.scene-profitcart{background:radial-gradient(ellipse at 80% 5%,#1d8e6377,transparent 75%),#063e38}
.scene-profitcart .scene-shade{background:linear-gradient(90deg,#052a2daa,transparent),linear-gradient(0deg,#052728,transparent 90%)}
.scene-profitcart .scene-device{transform:perspective(1000px) rotateY(-9deg) rotateZ(7deg);right:28px}
.scene-farewake .scene-photo{object-position:72% 50%}.scene-farewake .scene-shade{background:linear-gradient(90deg,#062646e8,#06264633),linear-gradient(0deg,#052542dd,transparent 90%)}
.scene-kinperk .scene-photo{object-position:62% 50%}.scene-kinperk .scene-shade{background:linear-gradient(90deg,#402631e8,#40263122),linear-gradient(0deg,#211c30ec,transparent 90%)}
.scene-sprigwise .scene-shade{background:linear-gradient(90deg,#0b2e1be8,#0b2e1b33),linear-gradient(0deg,#07271aee,transparent 90%)}
.scene-sprigwise .scene-photo{object-position:30% 50%}.scene-sprigwise .scene-device{right:25px;transform:perspective(1000px) rotateY(10deg) rotateZ(-6deg)}
.scene-dayweft{grid-column:span 12;height:385px;background:radial-gradient(ellipse at 80% 90%,#6853b075,transparent 60%),#181d3c}
.scene-dayweft .scene-shade{background:linear-gradient(90deg,#161d3f88,transparent)}
.scene-dayweft .scene-copy{width:55%;bottom:40px}.scene-dayweft .scene-copy h4{font-size:clamp(28px,3.3vw,49px)}.scene-dayweft .scene-copy p{max-width:470px}
.scene-dayweft .scene-device{right:16%;top:35px;transform:perspective(1000px) rotateY(-15deg) rotateZ(12deg)}
.portfolio-disclosure{font:12px/1.8 Plex,monospace;color:#90b1c3;max-width:760px;margin:27px 0 0}
/* Transparent marks move over the island, never over the headline. */
@media(min-width:1600px){.app-scene{height:525px;--scale:.5}.scene-device{top:138px;right:50px}.scene-copy{bottom:40px}.scene-dayweft{height:410px}.scene-dayweft .scene-device{top:30px;right:17%}}
@media(max-width:1100px){.app-scenes{gap:14px}.app-scene{height:440px;--scale:.38;grid-column:span 6}.scene-device{right:22px;top:140px}.scene-brand{left:22px;font-size:25px}.scene-topline{left:22px;right:22px;flex-wrap:wrap;gap:4px;font-size:9px}.scene-copy{left:22px;bottom:26px;width:44%}.scene-copy h4{font-size:23px}.scene-copy p{font-size:11px}.scene-dayweft{grid-column:span 12;height:355px}.scene-dayweft .scene-device{top:30px;right:15%}}
@media(max-width:700px){.portfolio-edition{font-size:9px;letter-spacing:.04em;padding:20px 0}.app-scenes{grid-template-columns:1fr;gap:15px}.app-scene,.scene-dayweft{grid-column:auto;height:410px;--scale:.36}.scene-topline{left:20px;right:20px;font-size:9px;top:20px}.scene-status{font-size:8px}.scene-brand{top:63px;left:20px;font-size:27px}.scene-brand>img{width:34px;height:38px}.scene-brand>img.scene-nomi{width:109px;height:41px}.scene-copy,.scene-dayweft .scene-copy{left:20px;bottom:25px;width:43%}.scene-copy h4,.scene-dayweft .scene-copy h4{font-size:22px;line-height:1.2;margin-bottom:13px}.scene-copy p,.scene-dayweft .scene-copy p{font-size:11px;line-height:1.7}.scene-device,.scene-ripero .scene-device,.scene-profitcart .scene-device,.scene-sprigwise .scene-device,.scene-dayweft .scene-device{right:19px;top:133px;transform:rotate(5deg)}.scene-ripero .scene-device,.scene-sprigwise .scene-device{transform:rotate(-5deg)}.scene-dayweft .scene-device{transform:rotate(6deg)}.portfolio-disclosure{font-size:11px;margin-top:23px}.scene-photo{filter:saturate(.85)}
}
@media(max-width:370px){.app-scene{height:395px;--scale:.32}.scene-copy{width:46%}.scene-copy h4,.scene-dayweft .scene-copy h4{font-size:20px}.scene-device,.scene-ripero .scene-device,.scene-profitcart .scene-device,.scene-sprigwise .scene-device,.scene-dayweft .scene-device{right:12px;top:142px}.scene-topline{font-size:8px}.scene-brand{font-size:24px}.scene-copy p{font-size:10px}}
@media(prefers-reduced-motion:reduce){.scene-device,.scene-photo{transition:none}.app-scene:hover .scene-device{transform:none}.app-scene:hover .scene-photo{transform:none}}

/* Six-app collection: balanced pairs after ProfitCart moved to its own company. */
.scene-kinperk{grid-column:span 5}
.scene-dayweft{grid-column:span 7;height:470px}
.scene-dayweft .scene-copy{width:41%;bottom:32px}
.scene-dayweft .scene-copy h4{font-size:clamp(20px,2.1vw,30px)}
.scene-dayweft .scene-copy p{max-width:235px}
.scene-dayweft .scene-device{right:34px;top:131px}
.app-screen-image{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media(min-width:1600px){.scene-dayweft{height:525px}.scene-dayweft .scene-copy{bottom:40px}.scene-dayweft .scene-device{right:50px;top:138px}}
@media(max-width:1100px){.scene-kinperk,.scene-dayweft{grid-column:span 6}.scene-dayweft{height:440px}.scene-dayweft .scene-copy{width:44%;bottom:26px}.scene-dayweft .scene-copy h4{font-size:23px}.scene-dayweft .scene-device{right:22px;top:140px}}
@media(max-width:700px){.scene-kinperk,.scene-dayweft{grid-column:auto}.scene-dayweft{height:410px}.scene-dayweft .scene-copy{width:43%;bottom:25px}.scene-dayweft .scene-copy h4{font-size:22px}.scene-dayweft .scene-device{right:19px;top:133px}}
@media(max-width:370px){.scene-dayweft{height:395px}.scene-dayweft .scene-copy{width:46%}.scene-dayweft .scene-copy h4{font-size:20px}.scene-dayweft .scene-device{right:12px;top:142px}}

.scene-launch{position:absolute;top:139px;left:28px;z-index:2;margin:0;font:10px/1.7 Plex,monospace;color:#b3d0dd;letter-spacing:.025em}
.scene-launch time{font-size:12px;color:#effbff}
.scene-status{color:#c8ffec;border-color:#a9f5d477}
@media(max-width:1100px){.scene-launch{left:22px;top:135px}.scene-launch time{font-size:11px}}
@media(max-width:700px){.scene-launch{left:20px;top:119px;font-size:9px}.scene-launch time{font-size:10px}}

/* Upcoming concepts: original marks float over a full-panel glass-mesh teaser. */
.scene-kinperk,.scene-sprigwise,.scene-dayweft{--teaser-a:#ff7b72;--teaser-b:#f0a25f;--teaser-ink:#321c2b}
.scene-sprigwise{--teaser-a:#61e593;--teaser-b:#b8e765;--teaser-ink:#092c24}
.scene-dayweft{--teaser-a:#9d83ff;--teaser-b:#57b9dc;--teaser-ink:#181b42}
.scene-kinperk::before,.scene-sprigwise::before,.scene-dayweft::before{content:"";position:absolute;inset:-12%;z-index:1;background:radial-gradient(circle at 18% 24%,var(--teaser-a) 0 7%,transparent 31%),radial-gradient(circle at 84% 76%,var(--teaser-b) 0 9%,transparent 34%),radial-gradient(circle at 72% 12%,color-mix(in srgb,var(--teaser-a) 55%,#ffffff) 0 3%,transparent 24%),repeating-linear-gradient(112deg,transparent 0 44px,#ffffff0d 45px 46px),var(--teaser-ink);filter:saturate(.9);transform:rotate(-3deg) scale(1.08);animation:teaser-drift 14s ease-in-out infinite alternate}
.scene-kinperk::after,.scene-sprigwise::after,.scene-dayweft::after{content:"";position:absolute;inset:22% 10% 11%;z-index:2;border:1px solid #ffffff2e;background:linear-gradient(135deg,#ffffff22,#ffffff08 48%,#ffffff16),repeating-linear-gradient(90deg,transparent 0 23%,#ffffff14 23.2% 23.5%,transparent 23.7% 46%);box-shadow:inset 0 1px #ffffff30,0 28px 70px #00000040,42px -34px 0 -30px #ffffff18,-38px 42px 0 -28px #ffffff12;backdrop-filter:blur(24px) saturate(.8);transform:perspective(900px) rotateX(5deg) rotateY(-5deg)}
.scene-sprigwise::after{transform:perspective(900px) rotateX(4deg) rotateY(6deg)}
.scene-dayweft::after{inset:20% 9% 12%;transform:perspective(900px) rotateX(4deg) rotateY(-3deg)}
.scene-kinperk .scene-brand,.scene-sprigwise .scene-brand,.scene-dayweft .scene-brand{z-index:4;left:50%;top:49%;flex-direction:column;gap:13px;width:max-content;max-width:75%;font-size:clamp(27px,3vw,42px);text-align:center;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 18px #0008)}
.scene-kinperk .scene-brand>img,.scene-sprigwise .scene-brand>img,.scene-dayweft .scene-brand>img{width:78px;height:78px;filter:drop-shadow(0 10px 18px #0005)}
.scene-kinperk .scene-topline,.scene-sprigwise .scene-topline,.scene-dayweft .scene-topline{z-index:4}
.scene-kinperk .scene-topline>span:first-child,.scene-sprigwise .scene-topline>span:first-child,.scene-dayweft .scene-topline>span:first-child{visibility:hidden}
.scene-kinperk .scene-status,.scene-sprigwise .scene-status,.scene-dayweft .scene-status{position:relative;padding:7px 12px 7px 25px;color:#effbff;border-color:#ffffff55;background:#031b28a8;box-shadow:0 8px 28px #0004;font-weight:700;letter-spacing:.12em;backdrop-filter:blur(12px)}
.scene-kinperk .scene-status::before,.scene-sprigwise .scene-status::before,.scene-dayweft .scene-status::before{content:"";position:absolute;left:10px;top:50%;width:7px;height:7px;border-radius:50%;background:var(--teaser-a);box-shadow:0 0 0 4px color-mix(in srgb,var(--teaser-a) 18%,transparent),0 0 18px var(--teaser-a);transform:translateY(-50%);animation:teaser-pulse 2.4s ease-in-out infinite}
.scene-kinperk .scene-copy,.scene-sprigwise .scene-copy,.scene-dayweft .scene-copy,.scene-kinperk .scene-launch,.scene-sprigwise .scene-launch,.scene-dayweft .scene-launch,.scene-kinperk .scene-device,.scene-sprigwise .scene-device,.scene-dayweft .scene-device{visibility:hidden}
@keyframes teaser-drift{to{transform:rotate(2deg) scale(1.14) translate3d(1.5%,-1%,0)}}
@keyframes teaser-pulse{50%{opacity:.45;transform:translateY(-50%) scale(.72)}}
@media(max-width:700px){.scene-kinperk::after,.scene-sprigwise::after,.scene-dayweft::after{inset:24% 9% 12%}.scene-kinperk .scene-brand,.scene-sprigwise .scene-brand,.scene-dayweft .scene-brand{top:51%;font-size:30px}.scene-kinperk .scene-brand>img,.scene-sprigwise .scene-brand>img,.scene-dayweft .scene-brand>img{width:72px;height:72px}}
@media(prefers-reduced-motion:reduce){.scene-kinperk::before,.scene-sprigwise::before,.scene-dayweft::before,.scene-kinperk .scene-status::before,.scene-sprigwise .scene-status::before,.scene-dayweft .scene-status::before{animation:none}}