/* GX visual system: measured from opera.com/gx on 19 October 2026.
   Independent affiliate page; not an official Opera property. */
@font-face{font-family:GX Underwave;src:url('assets/underwave.ttf') format('truetype');font-style:normal;font-weight:400 900;font-display:swap}
@font-face{font-family:GX Inter;src:url('assets/inter-regular.woff2') format('woff2');font-style:normal;font-weight:400 600;font-display:swap}
@font-face{font-family:GX Inter;src:url('assets/inter-bold.woff2') format('woff2');font-style:normal;font-weight:650 900;font-display:swap}
:root{--paper:#0c0b14;--ink:#f5f3f8;--muted:#ada9bd;--red:#fa1e4e;--dark:#100e1b;--line:#332536;color-scheme:dark;font-family:GX Inter,Inter,"Segoe UI",sans-serif}
body{background:#0c0b14;color:var(--ink)}
.ad-note{background:#12101d;color:#a49aae;border-color:#2b1e31}
.header{border-color:#392034}
.wordmark{display:flex;align-items:center;gap:12px}
.brand-logo{width:152px;height:auto;display:block;max-width:none}
.wordmark .brand-label{font-family:GX Inter,Inter,sans-serif;color:#998ba5;font-size:7px;letter-spacing:1.5px;border-left:1px solid #493148;padding-left:12px;line-height:1.7;max-width:75px}
.header nav{color:#bcb3ca;font-size:12px}
.header nav a:hover{color:#fff}
h1,h2,h3{font-family:GX Underwave,"Bahnschrift",sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.015em}
em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit}
h1{font-size:clamp(52px,4.9vw,72px);line-height:1.12;letter-spacing:.01em;margin-bottom:24px}
h1 em{display:inline-block;font-size:.94em;white-space:normal;color:var(--red)}
.hero{gap:38px;padding-top:65px;padding-bottom:88px;min-height:660px;grid-template-columns:.95fr 1.05fr}
.hero:before{content:"";position:absolute;inset:25px 0 0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 78% 44%,#fa1e4e14,transparent 65%)}
.eyebrow{color:#b6a6bf;font-family:GX Inter,Inter,sans-serif;letter-spacing:1.9px}
.intro{color:#bcb4cb;line-height:1.9;max-width:390px}
.button-note{color:#bbb0c9;font-size:11px;margin-top:17px}
.affiliate-note{color:#a69bb6;font-size:10px;max-width:370px;line-height:1.8}
.hero-tags span{border-color:#59304b;border-radius:2px;color:#d2b2c6;background:#fa1e4e06;padding:8px 10px}
.hero-visual{padding:53px 0 54px}
.hero-orbit{border-radius:0;width:96%;height:100%;aspect-ratio:auto;top:0;left:4%;background:radial-gradient(ellipse at 60% 50%,#fa1e4e22,transparent 70%);opacity:1}
.hero-orbit:after{border-radius:0;border:1px solid #fa1e4e22;inset:30px 0 20px;transform:skewY(-7deg);background:repeating-linear-gradient(0deg,transparent,transparent 34px,#fa1e4e05 35px,transparent 36px)}
.hero-screen{background:#13101e;border:1px solid #852c50;border-bottom:1px solid #852c50;border-radius:4px;margin:0;transform:perspective(1200px) rotateY(-3deg);box-shadow:0 25px 70px #0008,0 0 35px #fa1e4e12;overflow:hidden}
.hero-screen img{background:#12101b}
.photo-topline{color:#c08da6;background:#1d1121;letter-spacing:1.3px;height:30px;border-bottom:1px solid #512039}
.photo-topline>span:last-child{color:#fa1e4e}
.hero-screen figcaption{color:#dac6da;background:#181220;border-top:1px solid #3d2035;font-size:10px;padding-block:15px}
.control-inset{background:#15111f;border:1px solid #82445e;box-shadow:0 15px 40px #0009;transform:rotate(4deg);padding:3px 3px 0;left:-20px;bottom:-4px;width:43%}
.control-inset figcaption{color:#c7afc8;background:#181220}
.visual-stamp{font-family:GX Underwave,sans-serif;color:#d7b6cb;letter-spacing:1px;top:-10px;font-size:9px;transform:none}
.visual-stamp>span{font-family:GX Inter,sans-serif;color:var(--red)}
.visual-footnote{color:#a28da9;font-size:7px;letter-spacing:.9px}
.page-divider{color:#967f9e;border-color:#3d223b}
.page-divider>a{color:#c5b9d1}
.showroom{background:linear-gradient(145deg,#13101e,#0d0b15);border-block:1px solid #3c2038}
.section-heading h2{font-size:38px;line-height:1.25;letter-spacing:.015em}
.section-heading h2 em{color:var(--red)}
.section-heading>p{color:#b0a1bb}
.feature-tab{border-color:#3e2a43;color:#bca8c5}
.feature-tab strong{font-family:GX Inter,sans-serif}
.feature-tab small{color:#a18cab}
.feature-tab[aria-selected=true]{background:linear-gradient(90deg,#fa1e4e0c,transparent);color:white}
.feature-tab[aria-selected=true]:before{background:#fa1e4e}
.feature-stage{background:#1b1426;border:1px solid #66304e;border-radius:4px;box-shadow:0 15px 40px #0003}
.stage-top{color:#c2a3be}
.stage-count{color:#ff6383}
.stage-bottom h3{font-family:GX Underwave,sans-serif;font-size:20px;letter-spacing:.02em}
.stage-bottom p{color:#bba8c6}
.gallery-arrows button{border-radius:3px;border-color:#79405f;color:#fcb4c6}
.editorial-index{color:#a68aaa}
.editorial h2{font-size:30px;line-height:1.4;letter-spacing:.02em}
.editorial h2 em{color:var(--red)}
.editorial p{color:#b2a5c0}
.text-link{border-color:#8e3a5d;color:#efd5e4}
.start-section{background:radial-gradient(ellipse at 50% 90%,#fa1e4e13,transparent 65%),#14101f;border-bottom:1px solid #3d2138}
.start-heading .eyebrow{color:#bc91ab}
.start-heading h2{font-size:40px;line-height:1.3;letter-spacing:.01em}
.start-grid article{border-color:#67304e}
.start-grid h3{font-family:GX Inter,Inter,sans-serif;line-height:1.6;text-transform:none;letter-spacing:-.2px}
.start-grid p{color:#baabc5}
.start-grid article>span{color:#f5678c}
.start-cta>span{color:#b69cc0}
.faq h2{font-size:30px;line-height:1.35;letter-spacing:.02em}
.faq h2 em{color:var(--red)}
.faq .eyebrow{color:#ae89aa}
summary{color:#e3d7ec;font-size:13px}
details>p{color:#b6a2c2}
.footer{background:#100d19;border-top:1px solid #3b2035}
.footer .brand-logo{width:130px}
.footer-tag{color:#b28aac}
.footer-line{border-color:#3a2238}
.footer-line>div{color:#b9a3c5}
.footer>.shell>p{color:#a38caf;font-size:9px}
.text-dialog{background:#171121;border-color:#7f3c5e}
.text-dialog h2{font-size:26px;line-height:1.35}
/* Large, GX-red CTAs. Motion runs in short bursts and respects user preferences. */
.download,.top-download{position:relative;isolation:isolate;overflow:hidden;background:#fa1e4e;color:#0c0b14;border:1px solid #ff5479;border-radius:2px;min-height:72px;min-width:340px;padding:0 25px;font-family:GX Inter,Inter,sans-serif;font-size:15px;line-height:1.35;font-weight:700;justify-content:center;gap:15px;text-align:center;box-shadow:0 0 0 0 #fa1e4e20,0 8px 30px #fa1e4e20;animation:gx-attention 4.8s ease-in-out infinite;transition:background .18s,box-shadow .18s,transform .18s}
.download:after,.top-download:after{content:"";position:absolute;inset:-70% auto -70% -70%;width:24%;background:linear-gradient(90deg,transparent,#ffffff5c,transparent);transform:rotate(25deg) translateX(-160%);pointer-events:none;animation:gx-sweep 7s ease-in-out infinite}
.download svg{width:21px;height:21px;flex-shrink:0}
.download-arrow{font-size:29px;font-weight:400;margin-left:9px;transition:transform .18s}
.download:hover,.top-download:hover{background:#ff416b;box-shadow:0 0 25px #fa1e4e55;transform:translateY(-2px);animation-play-state:paused}
.download:hover .download-arrow,.top-download:hover>span{transform:translate(3px,-2px)}
.top-download{min-width:195px;min-height:53px;font-size:12px;padding:0 20px;display:flex;gap:22px;animation-delay:1.6s}
.top-download>span{font-size:23px;color:#0c0b14;transition:transform .18s}
.top-download:after{animation-delay:1.8s}
.start-cta>.download{min-width:370px;font-size:16px;min-height:76px}
@keyframes gx-attention{0%,58%,100%{box-shadow:0 0 0 0 #fa1e4e00,0 8px 30px #fa1e4e20}70%{box-shadow:0 0 0 6px #fa1e4e14,0 8px 36px #fa1e4e40}83%{box-shadow:0 0 0 11px #fa1e4e00,0 8px 30px #fa1e4e20}}
@keyframes gx-sweep{0%,65%{left:-70%}87%,100%{left:140%}}
@media(max-width:1100px){h1{font-size:57px;letter-spacing:0}.hero{gap:25px;grid-template-columns:1fr 1fr}.download{min-width:310px;font-size:13px;padding:0 20px}.section-heading h2{font-size:32px}.editorial h2{font-size:26px}.brand-logo{width:140px}.wordmark .brand-label{display:none}.visual-stamp{font-size:8px}.hero-screen figcaption{font-size:9px}.visual-footnote{font-size:6px}.stage-bottom h3{font-size:18px}}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding-top:45px;padding-bottom:60px;gap:45px;min-height:0}h1{font-size:66px;line-height:1.14}.hero-copy{max-width:650px}.intro{max-width:470px;font-size:15px}.header nav{gap:18px;font-size:10px}.top-download{min-width:160px;min-height:48px;font-size:11px;gap:14px}.hero-visual{width:92%;max-width:620px;margin-right:0;padding-top:35px;padding-bottom:45px}.hero-orbit{top:0;left:0;width:100%}.feature-tab[aria-selected=true]{background:#3f1830}.section-heading h2{font-size:32px}.start-heading h2{font-size:36px}.faq h2{font-size:29px}.editorial h2{font-size:27px}}
@media(max-width:520px){.header{height:85px}.brand-logo{width:130px}.top-download{min-width:142px;min-height:47px;font-size:10px;padding:0 12px;gap:10px}.top-download>span{font-size:21px}.hero{padding-top:32px;padding-bottom:48px;gap:40px}.eyebrow{font-size:8px;letter-spacing:1.3px}h1{font-size:clamp(42px,12vw,58px);letter-spacing:0;line-height:1.14}h1 em{font-size:.95em}.hero-copy>.download{min-width:0;width:100%;min-height:70px;font-size:13px;padding:0 17px;justify-content:space-between;gap:11px}.download-arrow{font-size:27px;margin-left:0}.download svg{width:18px;height:18px}.button-note{font-size:10px}.affiliate-note{font-size:9px}.hero-tags span{font-size:8px}.hero-visual{width:94%;padding:30px 0 43px}.hero-screen{transform:none}.hero-screen figcaption{font-size:8px;padding-block:10px}.control-inset{width:43%;left:-9px;bottom:-3px}.control-inset figcaption{font-size:6px}.visual-stamp{font-size:6px;top:-14px}.visual-footnote{font-size:5px}.photo-topline{font-size:5px;height:23px}.section-heading h2{font-size:27px;line-height:1.3}.stage-bottom h3{font-size:17px}.stage-bottom p{font-size:10px}.editorial h2{font-size:23px;line-height:1.4}.start-heading h2{font-size:29px}.start-cta>.download{min-width:0;width:100%;font-size:13px;min-height:72px;justify-content:center;gap:15px}.faq h2{font-size:26px;line-height:1.4}summary{font-size:12px}.footer .brand-logo{width:120px}.footer>.shell>p{font-size:8px}.text-dialog h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.download,.top-download,.download:after,.top-download:after{animation:none!important;transition:none!important}.download:hover,.top-download:hover,.download:hover .download-arrow,.top-download:hover>span{transform:none}}
