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

:root{
  --bg:#07051f;
  --bg2:#1b1047;
  --white:#fff;
  --pink:#ff20a8;
  --pink2:#e21cc0;
  --yellow:#ffd12b;
  --cyan:#16c9f5;
  --purple:#8337e8;
  --line:rgba(255,255,255,.13);
  --max:1500px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--white)}
body{font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.landing{min-height:100svh;background:
 radial-gradient(circle at 88% 17%,rgba(255,196,53,.13),transparent 13%),
 radial-gradient(circle at 67% 70%,rgba(126,41,234,.18),transparent 32%),
 linear-gradient(115deg,#090621 0%,#120a31 45%,#2a155f 100%);overflow:hidden}
.hero{min-height:100svh;display:flex;align-items:center}
.hero-inner{width:min(var(--max),100%);margin:0 auto;padding:38px 52px 36px;display:grid;grid-template-columns:minmax(410px,.82fr) minmax(570px,1.18fr);gap:46px;align-items:center}
.copy{position:relative;z-index:2}
.brand{width:250px;height:auto;display:block;object-fit:contain;object-position:left center;margin:0 0 26px;mix-blend-mode:screen}
.eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.035);border-radius:999px;padding:9px 17px;color:#ffdbe9;font-size:13px;font-weight:800;letter-spacing:1.6px;margin-bottom:25px}
.eyebrow:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(70px,7.1vw,115px);line-height:.86;letter-spacing:-1.6px;margin:0 0 28px;font-weight:900;text-transform:uppercase}
h1 span{color:var(--pink)}
h1 b{color:var(--yellow);font-weight:900}
.intro{max-width:620px;font-size:clamp(16px,1.45vw,21px);line-height:1.55;color:#d8d2f3;margin:0 0 31px}
.cta{display:inline-flex;align-items:center;justify-content:center;min-width:175px;padding:17px 35px;border-radius:15px;text-decoration:none;font-size:18px;font-weight:800;color:#111035;background:linear-gradient(180deg,#ffdb48 0%,#ffbd2b 100%);box-shadow:0 7px 0 #a96c16,0 14px 35px rgba(255,193,39,.18);transition:transform .18s ease,filter .18s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.05)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:29px}
.chips span{border:1px solid rgba(255,255,255,.13);background:rgba(2,1,18,.68);padding:10px 13px;border-radius:9px;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:800;letter-spacing:.3px}
.visual-wrap{position:relative;min-width:0;padding:0 5px 10px 0}
.visual-card{position:relative;border:14px solid #7524a0;border-radius:28px;overflow:hidden;background:#11072b;box-shadow:0 0 0 2px rgba(255,38,194,.3),0 0 55px rgba(222,25,211,.2),0 35px 75px rgba(0,0,0,.28);transform:rotate(1deg)}
.visual-card:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:14px;box-shadow:inset 0 0 30px rgba(0,0,0,.35)}
.visual-card img{display:block;width:100%;aspect-ratio:1.16/1;object-fit:cover;object-position:center center}
.ribbon{position:absolute;z-index:3;left:-28px;bottom:55px;padding:17px 26px;border-radius:9px;background:linear-gradient(100deg,#ec139c,#8d37e7);font-family:'Barlow Condensed',sans-serif;font-size:24px;font-weight:900;letter-spacing:.2px;box-shadow:0 12px 35px rgba(0,0,0,.3);transform:rotate(-2deg)}
@media(max-width:1050px){
 .hero-inner{grid-template-columns:1fr;max-width:850px;padding:34px 34px 50px;gap:35px}
 .copy{text-align:center}.brand{margin-left:auto;margin-right:auto;width:220px}.eyebrow{margin-bottom:20px}h1{font-size:clamp(68px,12vw,100px)}.intro{margin-left:auto;margin-right:auto}.chips{justify-content:center}.visual-wrap{width:100%;max-width:760px;margin:auto}.ribbon{left:15px}
}
@media(max-width:620px){
 .landing{background:radial-gradient(circle at 75% 20%,rgba(255,196,53,.1),transparent 22%),linear-gradient(145deg,#08051d,#170b3a 58%,#241050)}
 .hero-inner{padding:22px 17px 38px;gap:27px}
 .brand{width:175px;margin-bottom:18px}
 .eyebrow{font-size:10px;letter-spacing:1.1px;padding:8px 12px;margin-bottom:18px}
 .eyebrow:before{width:7px;height:7px}
 h1{font-size:clamp(56px,17vw,78px);line-height:.88;letter-spacing:-.8px;margin-bottom:19px}
 .intro{font-size:14px;line-height:1.5;margin-bottom:24px;padding:0 5px}
 .cta{width:100%;min-height:56px;font-size:17px;padding:15px 20px}
 .chips{gap:7px;margin-top:22px}.chips span{font-size:12px;padding:8px 9px}
 .visual-wrap{padding:0 2px 7px}.visual-card{border-width:8px;border-radius:18px;transform:none}.visual-card img{aspect-ratio:1.08/1;object-position:center}
 .ribbon{left:8px;bottom:25px;padding:10px 13px;font-size:15px;border-radius:6px}
}
@media(max-width:390px){h1{font-size:53px}.chips span{font-size:11px}.brand{width:155px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}