@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&family=Inter:wght@400;500;600;700&display=swap');

:root { --ink:#f7f8fb; --muted:#a8afbd; --night:#10141f; --panel:#171d2a; --blue:#2878ff; --cyan:#40d9ff; --lime:#7df246; --line:rgba(255,255,255,.12); }
* { box-sizing:border-box; }
html { width:100%; max-width:100%; scroll-behavior:smooth; overflow-x:hidden; overflow-x:clip; }
body { width:100%; max-width:100%; margin:0; background:var(--night); color:var(--ink); font-family:Inter,Arial,sans-serif; line-height:1.7; overflow-x:hidden; overflow-x:clip; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.section-shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.site-header { position:absolute; z-index:10; top:0; left:50%; transform:translateX(-50%); width:min(1180px,calc(100% - 48px)); height:94px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand img, footer>a>img { width:72px; height:auto; }
.site-nav { display:flex; align-items:center; gap:36px; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.site-nav a { transition:color .2s; }
.site-nav a:hover { color:var(--cyan); }
.site-nav .nav-cta { padding:10px 19px; border:1px solid rgba(255,255,255,.35); border-radius:4px; }
.hero { min-width:0; min-height:790px; padding-top:150px; display:grid; grid-template-columns:52% 48%; align-items:center; position:relative; overflow:hidden; overflow:clip; }
.hero:before { content:""; position:absolute; width:700px; height:700px; left:-440px; top:0; border-radius:50%; background:radial-gradient(circle,rgba(40,120,255,.2),transparent 68%); }
.hero-copy { z-index:1; padding-bottom:50px; }
.eyebrow { margin:0 0 18px; color:var(--cyan); font:700 .75rem/1 Inter,sans-serif; letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.eyebrow span { width:23px; height:2px; background:currentColor; }
h1,h2 { font-family:"Barlow Condensed",Impact,sans-serif; text-transform:uppercase; letter-spacing:-.035em; line-height:.88; margin:0; }
h1 { font-size:clamp(4.6rem,7.4vw,7.4rem); max-width:690px; }
h1 em,h2 em { font-style:italic; color:transparent; -webkit-text-stroke:1.5px var(--cyan); text-shadow:3px 3px 0 rgba(40,120,255,.35); }
.hero-text { max-width:610px; color:#c6cbd5; font-size:1.06rem; margin:30px 0 26px; }
.store-buttons { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.store-buttons a { display:block; transition:transform .2s,filter .2s; }
.store-buttons a:hover { transform:translateY(-3px); filter:brightness(1.08); }
.store-buttons img { height:52px; width:auto; }
.availability { color:#778092; margin:9px 0 0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.hero-visual { min-width:0; height:640px; position:relative; }
.hero-visual:before { content:""; position:absolute; inset:40px -30px 60px 40px; border-radius:50%; background:radial-gradient(circle at center,rgba(64,217,255,.18),rgba(40,120,255,.08) 42%,transparent 70%); }
.orbit { position:absolute; border:1px solid rgba(64,217,255,.18); border-radius:50%; transform:rotate(-20deg); }
.orbit-one { width:580px; height:250px; top:180px; left:-20px; }
.orbit-two { width:460px; height:600px; top:20px; left:90px; }
.phone { position:absolute; overflow:hidden; border:7px solid #222a39; border-radius:30px; background:#111622; box-shadow:0 35px 70px rgba(0,0,0,.45); }
.phone img { width:100%; height:100%; object-fit:cover; }
.phone-back { width:242px; height:524px; top:42px; left:42px; transform:rotate(-9deg); opacity:.78; }
.phone-front { width:265px; height:574px; top:6px; right:17px; transform:rotate(7deg); }
.impact { position:absolute; z-index:3; font:900 1.4rem "Barlow Condensed",sans-serif; font-style:italic; padding:5px 12px; transform:rotate(-7deg); box-shadow:4px 4px 0 rgba(0,0,0,.3); }
.impact-one { top:110px; left:4px; background:var(--lime); color:#172111; }
.impact-two { bottom:70px; right:0; background:var(--blue); }
.stats-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-height:125px; display:grid; grid-template-columns:repeat(4,1fr); padding:0 max(24px,calc((100vw - 1180px)/2)); background:#121824; }
.stats-strip div { display:flex; flex-direction:column; justify-content:center; padding-left:32px; border-right:1px solid var(--line); }
.stats-strip div:first-child { border-left:1px solid var(--line); }
.stats-strip strong { font:800 1.65rem "Barlow Condensed",sans-serif; text-transform:uppercase; color:var(--lime); }
.stats-strip span { color:#788193; text-transform:uppercase; letter-spacing:.11em; font-size:.63rem; }
.gameplay { min-width:0; padding-block:125px; }
.section-heading { display:grid; grid-template-columns:1fr 370px; gap:60px; align-items:end; margin-bottom:52px; }
h2 { font-size:clamp(3.5rem,6vw,6rem); }
.section-heading>p,.feature-heading>p { margin:0 0 5px; color:var(--muted); }
.carousel { position:relative; width:100%; max-width:100%; min-width:0; }
.carousel-viewport { width:100%; max-width:100%; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; border-radius:24px; }
.carousel-viewport::-webkit-scrollbar { display:none; }
.carousel-track { display:flex; gap:22px; width:max-content; padding:12px 6px 30px; }
.screenshot-card { width:285px; aspect-ratio:1284/2778; margin:0; border-radius:25px; overflow:hidden; border:5px solid #30394b; background:#0d111b; scroll-snap-align:start; box-shadow:0 22px 45px rgba(0,0,0,.33); transition:transform .25s,border-color .25s; }
.screenshot-card:hover { transform:translateY(-8px); border-color:var(--blue); }
.screenshot-card img { width:100%; height:100%; object-fit:cover; }
.carousel-button { position:absolute; z-index:3; top:46%; transform:translateY(-50%); border:0; background:var(--night); border-radius:50%; padding:0; cursor:pointer; width:53px; height:53px; transition:transform .2s; }
.carousel-button:hover { transform:translateY(-50%) scale(1.1); }
.carousel-button img { width:100%; height:100%; filter:invert(1); }
.carousel-button.previous { left:-26px; }
.carousel-button.next { right:-26px; }
.carousel-status { margin-top:10px; display:flex; align-items:center; justify-content:center; gap:12px; color:#737c8e; font-size:.7rem; letter-spacing:.1em; }
.progress { width:150px; height:2px; background:#2b3240; }
.progress i { display:block; width:10%; height:100%; background:var(--cyan); transition:width .25s; }
.about { padding-block:115px 145px; border-top:1px solid var(--line); display:grid; grid-template-columns:42% 58%; gap:70px; }
.about-copy { padding-top:10px; color:var(--muted); }
.about-copy p { margin:0 0 22px; }
.about-copy .lead { color:var(--ink); font-size:1.22rem; font-weight:500; }
.features { padding-block:130px; background:linear-gradient(145deg,#172032,#10151f); border-block:1px solid var(--line); position:relative; overflow:hidden; overflow:clip; }
.features:after { content:""; position:absolute; width:340px; height:340px; right:0; top:0; background:radial-gradient(circle at top right,rgba(125,242,70,.12),transparent 70%); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); position:relative; z-index:1; }
.feature-grid article { min-height:245px; padding:34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-grid b { color:var(--cyan); font-size:.7rem; letter-spacing:.12em; }
.feature-grid h3 { margin:42px 0 9px; font:800 1.7rem "Barlow Condensed",sans-serif; text-transform:uppercase; }
.feature-grid p { margin:0; color:var(--muted); font-size:.88rem; }
.final-cta { min-height:590px; padding-block:120px; display:flex; flex-direction:column; align-items:center; text-align:center; justify-content:center; position:relative; overflow:hidden; overflow:clip; }
.final-cta:before { content:""; position:absolute; width:520px; height:520px; border:1px solid rgba(40,120,255,.15); border-radius:50%; }
.final-cta>* { position:relative; }
.final-cta h2 { font-size:clamp(4rem,7vw,7rem); }
.final-cta>p:not(.eyebrow) { color:var(--muted); margin:28px 0 25px; }
footer { min-height:100px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; width:min(1180px,calc(100% - 48px)); margin:auto; color:#697284; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; }
footer p { margin:0; }
footer div { justify-self:end; display:flex; gap:28px; }
footer a:hover { color:var(--cyan); }

/* Inner pages */
.site-header.page-header { position:relative; left:auto; transform:none; margin:auto; }
.support-page { width:min(1180px,calc(100% - 48px)); margin:auto; }
.support-hero { padding:105px 0 90px; max-width:850px; }
.support-hero h1 { font-size:clamp(4.3rem,7vw,7rem); }
.support-intro { max-width:660px; margin:30px 0 28px; color:#c6cbd5; font-size:1.08rem; }
.support-email { width:fit-content; display:flex; flex-direction:column; gap:2px; padding:17px 22px; border:1px solid rgba(64,217,255,.45); border-radius:5px; background:rgba(40,120,255,.1); transition:background .2s,border-color .2s,transform .2s; }
.support-email:hover { background:rgba(40,120,255,.2); border-color:var(--cyan); transform:translateY(-2px); }
.support-email span { color:var(--muted); font-size:.65rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.support-email strong { color:var(--cyan); font-size:1.05rem; }
.response-time { color:#778092; margin:12px 0 0; font-size:.72rem; }
.support-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:64px; padding:80px 0 110px; border-top:1px solid var(--line); }
.support-card { padding:38px; align-self:start; background:linear-gradient(145deg,#192235,#141a27); border:1px solid var(--line); }
.card-number { margin:0 0 26px; color:var(--cyan); font-size:.7rem; font-weight:700; letter-spacing:.12em; }
.support-content h2,.support-legal h2 { font-size:clamp(2.6rem,4vw,4rem); }
.support-card>p:not(.card-number),.support-legal>p { color:var(--muted); }
.support-card ul { padding-left:20px; margin:25px 0 30px; color:#c6cbd5; }
.support-card li { margin-bottom:8px; }
.button-link { display:inline-block; padding:11px 19px; border-radius:4px; background:var(--blue); font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:background .2s,transform .2s; }
.button-link:hover { background:#438aff; transform:translateY(-2px); }
.support-section-heading { margin-bottom:27px; }
.support-section-heading .card-number { margin-bottom:18px; }
.support-issues details { border-top:1px solid var(--line); }
.support-issues details:last-child { border-bottom:1px solid var(--line); }
.support-issues summary { padding:22px 40px 22px 0; cursor:pointer; list-style:none; position:relative; font:700 1.3rem "Barlow Condensed",sans-serif; text-transform:uppercase; }
.support-issues summary::-webkit-details-marker { display:none; }
.support-issues summary:after { content:"+"; position:absolute; right:4px; color:var(--cyan); font:400 1.5rem Inter,sans-serif; }
.support-issues details[open] summary:after { content:"–"; }
.support-issues details p { margin:0; padding:0 45px 22px 0; color:var(--muted); font-size:.9rem; }
.support-legal { padding:85px 0 100px; border-top:1px solid var(--line); text-align:center; }
.support-legal>p { max-width:620px; margin:22px auto 25px; }
.support-legal div { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.support-legal a { padding:10px 18px; border:1px solid var(--line); border-radius:4px; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:border-color .2s,color .2s; }
.support-legal a:hover { border-color:var(--cyan); color:var(--cyan); }
.legal-page { width:min(920px,calc(100% - 48px)); margin:auto; padding:95px 0 110px; }
.legal-hero { padding-bottom:65px; border-bottom:1px solid var(--line); }
.legal-hero h1 { font-size:clamp(4.3rem,7vw,7rem); }
.legal-hero>p:last-child { margin:28px 0 0; color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; }
.legal-content { padding-top:65px; color:#c6cbd5; }
.legal-content>p:first-child { margin-top:0; color:var(--ink); font-size:1.12rem; }
.legal-content h2 { margin:58px 0 18px; font-size:2.35rem; line-height:1; }
.legal-content p { margin:0 0 20px; color:var(--muted); }
.legal-content a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:150px; text-align:center; }
  .hero-copy { display:flex; flex-direction:column; align-items:center; }
  .hero-visual { height:600px; width:min(560px,100%); margin:auto; }
  .section-heading,.about { grid-template-columns:1fr; gap:30px; }
  .section-heading>p { max-width:600px; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .stats-strip div { padding-left:18px; }
  .screenshot-card { width:255px; }
  .support-content { grid-template-columns:1fr; gap:55px; }
}
@media (max-width:600px) {
  .section-shell,.site-header,footer { width:min(calc(100% - 28px),1180px); }
  .site-header { height:74px; }
  .brand img { width:72px; }
  .site-nav a:not(.nav-cta) { display:none; }
  .site-nav .nav-cta { padding:7px 12px; }
  .hero { padding-top:125px; min-height:0; }
  h1 { font-size:clamp(3.7rem,18vw,5rem); }
  .hero-text { font-size:.95rem; margin-top:24px; }
  .store-buttons { justify-content:center; }
  .store-buttons img { height:45px; }
  .hero-visual { height:450px; margin-top:20px; }
  .phone-back { width:170px; height:368px; left:5%; top:42px; }
  .phone-front { width:188px; height:406px; right:5%; }
  .orbit-one { width:100%; height:180px; top:130px; }
  .orbit-two { width:75%; height:420px; left:15%; }
  .impact-one { top:85px; }
  .stats-strip { grid-template-columns:repeat(2,1fr); padding:0 14px; }
  .stats-strip div { min-height:94px; border-bottom:1px solid var(--line); }
  .gameplay,.features { padding-block:85px; }
  .about { padding-block:85px 100px; }
  h2 { font-size:3.5rem; }
  .section-heading { margin-bottom:35px; }
  .screenshot-card { width:74vw; }
  .carousel-button { width:45px; height:45px; }
  .carousel-button.previous { left:-8px; }
  .carousel-button.next { right:-8px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-grid article { min-height:205px; }
  .feature-grid h3 { margin-top:30px; }
  .final-cta { min-height:520px; padding-block:90px; }
  footer { padding-block:30px; grid-template-columns:1fr; text-align:center; justify-items:center; }
  footer div { justify-self:center; }
  .support-page,.legal-page { width:min(calc(100% - 28px),1180px); }
  .site-header.page-header { height:74px; }
  .site-header.page-header .brand img { width:72px; }
  .support-hero { padding:70px 0 65px; }
  .support-hero h1 { font-size:clamp(3.7rem,18vw,5rem); }
  .support-content { padding:60px 0 75px; }
  .support-card { padding:27px 23px; }
  .support-issues details p { padding-right:10px; }
  .support-legal { padding:65px 0 75px; }
  .legal-page { padding:65px 0 75px; }
  .legal-hero { padding-bottom:45px; }
  .legal-hero h1 { font-size:clamp(3.7rem,18vw,5rem); }
  .legal-content { padding-top:45px; }
  .legal-content h2 { margin-top:45px; font-size:2rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }