:root { --glass: rgba(247, 249, 251, .58); --glass-strong: rgba(255,255,255,.73); }
body.skiftnu-page {
  background:
    radial-gradient(900px 500px at 92% 8%, rgba(255,205,46,.25), transparent 62%),
    radial-gradient(800px 480px at 7% 38%, rgba(184,200,220,.34), transparent 64%),
    linear-gradient(135deg, #f7f9fa 0%, #dfe5eb 48%, #f5f6f7 100%);
  background-attachment: fixed;
}
.glass { background: var(--glass); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 1px 1px 0 rgba(255,255,255,.95), 0 24px 70px rgba(42,55,75,.14); backdrop-filter: blur(24px) saturate(125%); }
.app-hero { position: relative; overflow: hidden; border-radius: 32px; padding: clamp(1.25rem, 4vw, 3rem); }
.app-hero::before, .app-hero::after { content:""; position:absolute; pointer-events:none; filter:blur(12px); opacity:.65; }
.app-hero::before { width: 38%; height: 4px; left: 27%; top: 24%; background: var(--accent); box-shadow: 0 0 34px 10px rgba(255,201,40,.35); transform: rotate(-8deg); }
.app-hero::after { width: 240px; height: 240px; right: -80px; bottom: -100px; border: 1px solid rgba(255,255,255,.8); border-radius: 44px; transform: rotate(18deg); }
.app-intro { position: relative; z-index: 2; display:grid; grid-template-columns: minmax(220px,.8fr) minmax(520px,1.7fr); gap: clamp(2rem,5vw,5rem); }
.identity { align-self:start; }
.app-name { display:flex; align-items:center; flex-wrap:wrap; gap:.85rem; }
.app-icon { width:72px; height:72px; border-radius:18px; box-shadow:0 12px 28px rgba(0,0,0,.18); }
.app-name h1 { font-size:clamp(2.25rem,4vw,4rem); line-height:1; margin:0; }
.tagline { font-size:clamp(2rem,4vw,4.25rem); line-height:1.12; letter-spacing:-.04em; margin:2rem 0; }
.fixed-benefits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; max-width:420px; }
.fixed-benefit { min-height:96px; padding:.65rem .35rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; border:1px solid rgba(255,255,255,.95); border-radius:16px; background:rgba(255,255,255,.5); box-shadow:inset 0 1px 0 #fff,0 12px 25px rgba(47,58,73,.08); text-align:center; font-size:.88rem; font-weight:800; }
.fixed-benefit img { width:38px; height:38px; }
.experience { display:grid; grid-template-columns:minmax(250px,.95fr) minmax(270px,1.05fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.hud { position:relative; min-height:340px; display:flex; flex-direction:column; justify-content:center; perspective:700px; }
.hud::before { content:""; position:absolute; inset:2rem -.75rem; border:1px solid rgba(255,255,255,.85); border-radius:35% 35% 28% 28% / 22% 22% 35% 35%; box-shadow:inset 0 0 30px rgba(255,255,255,.75),0 0 28px rgba(255,255,255,.5); }
.hud-count { position:absolute; top:.4rem; left:.25rem; color:#48505c; font-weight:700; }
.subtitle-tabs { position:relative; z-index:2; display:grid; gap:.65rem; transform:rotateX(3deg); }
.subtitle-tab { position:relative; min-height:54px; padding:.75rem 1rem; border:1px solid rgba(255,255,255,.94); border-radius:12px; background:rgba(255,255,255,.47); color:#303640; box-shadow:inset 0 1px 0 #fff,0 12px 22px rgba(46,57,72,.09); cursor:pointer; font-weight:750; text-align:left; transition:transform .2s ease,opacity .2s ease; }
.subtitle-tab:nth-child(2){transform:translateX(6px) scale(.98);opacity:.88}.subtitle-tab:nth-child(3){transform:translateX(13px) scale(.95);opacity:.76}.subtitle-tab:nth-child(4){transform:translateX(20px) scale(.92);opacity:.66}
.subtitle-tab[aria-selected="true"] { color:#17130b; background:rgba(255,255,255,.72); transform:translateX(-8px) scale(1.03); opacity:1; box-shadow:inset 0 1px 0 #fff,0 12px 28px rgba(40,50,64,.12),0 10px 22px rgba(255,197,24,.24); }
.subtitle-tab[aria-selected="true"]::after { content:""; position:absolute; left:10%; right:7%; bottom:7px; height:3px; border-radius:99px; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 14px rgba(255,194,13,.8); }
.detail { position:relative; z-index:2; padding:clamp(1rem,2vw,1.75rem); border-left:1px solid rgba(255,255,255,.9); }
.detail h2 { font-size:clamp(1.85rem,3vw,3.3rem); line-height:1.12; margin:0 0 1rem; letter-spacing:-.03em; }
.detail p { max-width:40ch; margin:0; color:#353d48; }

.features { margin-top:clamp(6rem,10vw,9rem); }
.section-heading { font-size:clamp(2rem,4vw,3.5rem); line-height:1.15; margin:0 0 2rem; }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.promo-card { margin:0; padding:1rem; border-radius:24px; }
.promo-card img { width:100%; height:auto; border-radius:12px; }
.promo-card figcaption { padding:.9rem .25rem 0; text-align:center; font-weight:800; }
.gallery-controls { display:none; }
.related { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:clamp(4rem,8vw,7rem); }
.related a { min-height:76px; padding:1rem 1.25rem; border-radius:20px; display:flex; align-items:center; justify-content:space-between; font-weight:800; text-decoration:none; }
.related a::after { content:"→"; }
.environment { margin-top:clamp(4rem,8vw,7rem); padding:clamp(1.25rem,3vw,2rem); border-radius:24px; }
.environment h2 { margin:0 0 .75rem; font-size:clamp(1.5rem,3vw,2.25rem); }
.environment ul { margin:0; padding-left:1.4rem; }

@media (max-width: 920px) {
  .app-intro { grid-template-columns:1fr; }
  .identity { display:grid; grid-template-columns:1fr auto; gap:.5rem 1rem; align-items:center; }
  .app-name,.tagline { grid-column:1; }
  .fixed-benefits { grid-column:2; grid-row:1 / span 2; }
  .experience { grid-template-columns:1fr 1fr; }
  .gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  .app-hero { border-radius:24px; padding:1.1rem; }
  .identity { display:block; }
  .app-name h1 { font-size:2.45rem; }
  .app-icon { width:64px;height:64px; }
  .tagline { margin:1.25rem 0; font-size:2.35rem; }
  .fixed-benefits { max-width:none; }
  .experience { display:block; }
  .hud { min-height:330px; margin-top:1.5rem; }
  .detail { border-left:0; border-top:1px solid rgba(255,255,255,.9); padding:1.5rem .25rem .25rem; }
  .detail h2 { font-size:2rem; }
  .features { margin-top:4.5rem; overflow:hidden; }
  .gallery-wrap { position:relative; }
  .gallery { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:.25rem 13vw .8rem 0; }
  .gallery::-webkit-scrollbar { display:none; }
  .promo-card { flex:0 0 86%; scroll-snap-align:start; }
  .gallery-controls { display:flex; align-items:center; justify-content:center; gap:.9rem; margin-top:1rem; }
  .gallery-controls button { width:44px;height:44px;border:1px solid rgba(255,255,255,.95);border-radius:50%;background:rgba(255,255,255,.65);cursor:pointer; }
  .dots { display:flex; gap:.5rem; }
  .dot { width:10px;height:10px;border:0;border-radius:50%;background:#c2c7cd;padding:0; }
  .dot[aria-current="true"] { background:var(--accent); box-shadow:0 0 0 4px rgba(255,201,40,.2); }
  .related { grid-template-columns:1fr; margin-top:4rem; }
}

@media (max-width: 360px) {
  .app-name { align-items:flex-start; }
  .fixed-benefits { gap:.35rem; }
  .fixed-benefit { min-height:86px; font-size:.76rem; }
}