.product-page { background: var(--bg); }
.product-hero { padding: clamp(34px, 5vw, 76px) 20px; color: #fff; background: radial-gradient(circle at 85% 12%, rgba(255,151,27,.22), transparent 32%), linear-gradient(145deg, #070a0c, #151c20); border-bottom: 1px solid rgba(255,255,255,.14); }
.product-hero-grid { width: min(1320px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(340px,.8fr) minmax(520px,1.2fr); gap: clamp(30px,5vw,76px); align-items: center; }
.product-hero-copy h1 { margin: 0; max-width: 780px; font-size: clamp(3.4rem,7vw,7.2rem); line-height: .88; }
.product-hero-copy > p { max-width: 700px; color: rgba(255,255,255,.76); }
.product-hero-copy .product-lead { margin: 24px 0 16px; color: #fff; font-size: clamp(1.15rem,2vw,1.45rem); line-height: 1.5; }
.product-hero-media { margin: 0; padding: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); box-shadow: 0 30px 90px rgba(0,0,0,.36); }
.product-hero-media img { width: 100%; height: auto; object-fit: cover; background: #fff; }
.product-hero-media.wide img { aspect-ratio: 16/9; }
.product-hero-media figcaption, .studio-play-logo figcaption { padding: 10px 4px 0; color: rgba(255,255,255,.62); font-size: .78rem; }
.product-proof { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.product-proof li { padding: 9px 12px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); font-size: .8rem; font-weight: 850; }
.product-intro { display: grid; gap: 30px; }
.product-card-grid { display: grid; gap: 16px; }
.product-card-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.product-card-grid.products { grid-template-columns: repeat(5,minmax(0,1fr)); }
.product-card-grid article, .product-card-grid > a { min-height: 240px; padding: 25px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.product-card-grid > a:hover { border-color: var(--accent); transform: translateY(-2px); }
.product-card-grid span, .product-card-grid strong { color: var(--accent-2); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.product-card-grid h3 { margin: 36px 0 10px; font-size: 1.35rem; line-height: 1.05; }
.product-card-grid p { color: var(--muted); }
.product-card-grid.compact article, .product-card-grid.compact > a { min-height: 170px; }
.product-card-grid.compact h3 { margin-top: 0; }
.product-process { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 0; padding: 1px; background: rgba(255,255,255,.18); list-style: none; }
.product-process.six { grid-template-columns: repeat(3,minmax(0,1fr)); }
.product-process li { min-height: 170px; padding: 24px; background: #0d1316; }
.product-process strong { display: block; margin-bottom: 26px; color: var(--accent); font-size: 1rem; }
.product-process span { color: rgba(255,255,255,.68); }
.product-quote { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: clamp(28px,5vw,60px); color: #fff; background: linear-gradient(145deg, rgba(8,12,13,.32), rgba(8,12,13,.92)), url('/images/site/crania-dev.png') center/cover no-repeat; }
.product-quote p { margin: 0; font-size: clamp(1.8rem,3.5vw,3.7rem); font-weight: 900; line-height: 1; }
.product-quote span { margin-top: 28px; color: var(--accent); font-weight: 900; }
.studio-play-grid { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: clamp(36px,7vw,90px); align-items: center; }
.studio-play-logo { margin: 0; padding: 14px; color: #fff; background: #0a0d0f; }
.studio-play-logo img { width: 100%; height: auto; }
.cww-brand-logo img { aspect-ratio: 1/1; object-fit: contain; background: #fff; }
.product-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.product-compare article { min-height: 330px; padding: clamp(26px,4vw,48px); background: var(--surface); border: 1px solid var(--line); }
.product-compare strong { color: var(--accent-2); text-transform: uppercase; }
.product-compare h3 { margin: 34px 0 18px; font-size: clamp(1.8rem,3vw,3rem); line-height: 1; }
.product-compare ul { padding-left: 20px; color: var(--muted); }
.product-compare li + li { margin-top: 10px; }
.product-faq details { max-width: 940px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,.18); }
.product-faq details:last-child { border-bottom: 1px solid rgba(255,255,255,.18); }
.product-faq summary { padding: 22px 0; cursor: pointer; color: #fff; font-size: 1.08rem; font-weight: 850; }
.product-faq details p { margin: 0 0 24px; color: rgba(255,255,255,.7); }
.theme-galaxia .product-card-grid article, .theme-galaxia .product-card-grid > a, .theme-galaxia .product-compare article { background: #0c1420; }
.theme-matriz .product-card-grid article, .theme-matriz .product-card-grid > a, .theme-matriz .product-compare article { background: transparent; border-radius: 0; }
.theme-multiverso .product-card-grid article, .theme-multiverso .product-card-grid > a { border-top: 5px solid #d94b4b; }
.theme-atari .product-hero-media img, .theme-atari .studio-play-logo img { image-rendering: auto; }
@media (max-width: 1080px) { .product-hero-grid { grid-template-columns: 1fr; } .product-hero-media { max-width: 820px; } .product-card-grid.products { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 820px) { .product-card-grid.three, .product-card-grid.products, .product-process, .product-process.six, .product-compare, .studio-play-grid { grid-template-columns: 1fr; } .product-card-grid article, .product-card-grid > a { min-height: 190px; } .product-process li { min-height: 140px; } }
@media (max-width: 620px) { .product-hero { padding-inline: 14px; } .product-hero-grid { gap: 26px; } .product-hero-copy h1 { font-size: clamp(2.8rem,14vw,4.4rem); } .product-hero-media { padding: 7px; } .product-proof { display: grid; } }