/* Product introductions: editorial typography, dimensional scenes, and focused app links. */
.scene-preview { min-width: 0; text-decoration: none; }
.scene-preview span { display: block; text-align: center; padding: 12px; font-size: 12px; color: var(--text); }
:root { --maxw: 76rem; }
.product-art { overflow: clip; }
body { font-family: var(--hop-font-body, 'Inter', system-ui, sans-serif); }
h1,h2,h3 { font-family: var(--hop-font-display, 'Inter', system-ui, sans-serif); letter-spacing: -.035em; }
.product-hero { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); align-items:center; padding:clamp(1.5rem,4vw,3.5rem); gap:2rem; margin-block:1rem 4rem; border:1px solid var(--border); border-radius:2rem; background:radial-gradient(ellipse at 100% 0%,#6366f112,transparent 65%),var(--surface); box-shadow:var(--shadow); }
.product-hero > div { min-width:0; }
.product-hero h1 { font-size:clamp(2rem,3.8vw,3.5rem); font-weight:800; line-height:1.06; text-wrap:balance; }
.product-hero .lede { font-size:1.05rem; line-height:1.7; color:var(--muted); }
.product-hero .kicker { font-family:var(--hop-font-mono); font-size:.75rem; letter-spacing:.14em; }
.product-art { position:relative; min-height:350px; perspective:900px; isolation:isolate; }
.product-art::before { content:""; position:absolute; inset:8%; border-radius:50%; background:radial-gradient(ellipse,#818cf820,transparent 70%); }
.orbit { position:absolute; inset:8%; border:1px solid #818cf860; border-radius:50%; transform:rotateX(55deg) rotateZ(-25deg); box-shadow:0 0 0 28px #818cf808,0 0 0 29px #818cf820; }
.identity-card { position:absolute; left:50%; top:50%; display:grid; place-content:center; justify-items:center; gap:15px; width:160px; height:190px; border:1px solid var(--border); border-radius:24px; background:var(--surface); transform:translate(-50%,-50%) rotateY(-18deg) rotateX(10deg); box-shadow:10px 14px 0 #6366f125,20px 30px 40px #0f172a18; }
.identity-card strong { font-size:1.4rem; }
.satellite { position:absolute; padding:9px 14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:4px 7px 0 #818cf815; font-size:.8rem; }
.sat-one { top:9%; left:0; transform:rotate(-9deg); }.sat-two { top:9%; right:0; transform:rotate(9deg); }.sat-three { bottom:8%; right:0; transform:rotate(-6deg); }.sat-four { bottom:8%; left:0; transform:rotate(6deg); }
.profile-sheet { position:absolute; width:210px; height:290px; left:50%; top:50%; display:flex; flex-direction:column; align-items:center; gap:18px; padding:25px; border:1px solid var(--border); border-radius:28px; background:var(--surface); transform:translate(-50%,-50%) rotateY(-15deg) rotateZ(6deg); box-shadow:8px 12px 0 #64748b38,20px 25px 40px #0f172a20; }
.profile-sheet strong { font: .85rem var(--hop-font-mono); }.profile-line { width:100%; height:24px; background:var(--code-bg); border:1px solid var(--border); border-radius:9px; }.profile-sheet-back { transform:translate(-55%,-50%) rotateZ(-12deg); background:var(--code-bg); }.profile-dots { color:var(--muted); font-size:.7rem; }
.media-sheet { position:absolute; width:245px; height:180px; left:50%; top:45%; transform:translate(-50%,-50%) rotateY(-15deg) rotateZ(-8deg); background:linear-gradient(145deg,#bae6fd,#67e8f9); border:9px solid var(--surface); border-radius:18px; overflow:hidden; box-shadow:8px 12px 0 #0891b250,20px 30px 40px #0f172a20; }.media-back { transform:translate(-42%,-57%) rotateZ(12deg); background:#a5b4fc; }.media-sheet img { position:absolute; left:12px; bottom:10px; }.media-sun { position:absolute; width:35px; height:35px; background:#fef3c7; border-radius:50%; top:20px; right:30px; }.media-hill { position:absolute; width:210px; height:150px; background:#0891b2; transform:rotate(-30deg); left:40px; top:95px; border-radius:35px; }.media-address { position:absolute; bottom:10%; left:50%; transform:translateX(-50%); padding:10px 20px; border:1px solid var(--border); border-radius:12px; background:var(--surface); font:.9rem var(--hop-font-mono); }
.note-sheet { position:absolute; width:230px; height:260px; left:50%; top:50%; display:flex; flex-direction:column; gap:15px; padding:25px; border:1px solid var(--border); border-radius:20px; background:var(--surface); transform:translate(-50%,-50%) rotateY(-16deg) rotateZ(-5deg); box-shadow:8px 12px 0 #10b98130,20px 30px 40px #0f172a20; }.note-sheet span { color:var(--muted); font:1.1rem var(--hop-font-mono); }.note-sheet strong { color:#059669; font:.8rem var(--hop-font-mono); }.note-back { transform:translate(-44%,-50%) rotateZ(10deg); background:var(--code-bg); }
.section-number { display:block; font:.75rem var(--hop-font-mono); letter-spacing:.16em; color:var(--muted); margin-bottom:1rem; }
main > section { margin-block:5rem; }
.features { grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr)); counter-reset:feature; }
.features li { padding:1.75rem; position:relative; }.features li::before { counter-increment:feature; content:counter(feature,decimal-leading-zero); display:block; font:.75rem var(--hop-font-mono); color:var(--accent); margin-bottom:1.5rem; }
.source-card { display:flex; justify-content:space-between; align-items:center; gap:2rem; border-block:1px solid var(--border); padding-block:2.5rem; }.source-card .cta-row { flex-shrink:0; flex-direction:column; }.source-card p { color:var(--muted); }
.preview-caption { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; }.preview-caption h2 { margin:0; font:italic 400 clamp(2.5rem,5vw,4rem)/1.1 var(--hop-font-serif,Georgia,serif); }
.preview-screen { display:block; border:1px solid var(--border); padding:10px; border-radius:22px; background:var(--surface); box-shadow:var(--shadow); }.preview-screen img { display:block; width:100%; height:auto; border-radius:14px; }.preview-screen .preview-dark { display:none; }
[data-theme="dark"] .preview-screen .preview-light { display:none; }[data-theme="dark"] .preview-screen .preview-dark { display:block; }
@media(prefers-color-scheme:dark) { html:not([data-theme="light"]) .preview-screen .preview-light { display:none; }html:not([data-theme="light"]) .preview-screen .preview-dark { display:block; } }
.site-header { flex-wrap:wrap; }.site-header .langmenu { margin:0; padding:0; border:0; }.site-header nav { margin-inline-start:auto; }.header-actions { display:flex; gap:.5rem; align-items:center; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media(max-width:900px) { .product-hero { grid-template-columns:1fr; text-align:center; }.product-hero .lede { margin-inline:auto; }.cta-row { justify-content:center; }.product-art { width:min(100%,360px); margin-inline:auto; }.source-card { flex-direction:column; align-items:stretch; }.source-card .cta-row { flex-direction:row; justify-content:flex-start; }.site-header nav { display:none; } }
@media(max-width:420px) { main { padding:.75rem; }.product-hero { padding:1.5rem 1rem; border-radius:1.25rem; }.product-art { min-height:320px; }.preview-caption { flex-wrap:wrap; }.site-header { padding:1rem .75rem; }.product-hero .btn { width:100%; text-align:center; }.source-card .btn { white-space:normal; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }