:root { --ink:#07152d; --blue:#1465ff; --purple:#8737ff; --mint:#dfffe8; --green:#0c9b58; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); font-family:Manrope,Arial,sans-serif; background:#fff; } .hero { min-height:745px; overflow:hidden; position:relative; color:white; background:radial-gradient(circle at 77% 42%,#143c97 0,transparent 28%),linear-gradient(120deg,#061537 0%,#09265b 57%,#101344 100%); } nav { height:93px; max-width:1180px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; padding:0 28px; } .brand { color:#fff; font:700 23px/1 "Space Grotesk"; letter-spacing:1.5px; text-decoration:none; } .brand span:first-child { color:#4af4bd; } .brand span:last-child { color:#a970ff; } .nav-link { color:#fff; font-size:14px; text-decoration:none; font-weight:700; border-bottom:1px solid #5a8bd2; padding-bottom:4px; } .nav-link span { color:#6cf8c9; margin-left:6px; } .hero-content { max-width:1180px; padding:105px 28px 100px; margin:auto; position:relative; z-index:1; } .eyebrow { color:#70f6c6; font-size:11px; letter-spacing:2px; font-weight:800; margin:0 0 21px; } .eyebrow i { width:20px; height:2px; vertical-align:middle; display:inline-block; margin-right:8px; background:currentColor; } h1,h2 { margin:0; font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:-2px; } h1 { max-width:660px; font-size:clamp(45px,5.4vw,76px); line-height:1.03; } h1 em { color:#6ff4c8; font-style:normal; } .hero-copy { max-width:440px; margin:25px 0 32px; color:#c4d3ed; line-height:1.7; font-size:16px; } .download-btn { align-items:center; background:linear-gradient(105deg,#167cff,#8037ff); border:1px solid #83bbff; border-radius:9px; box-shadow:0 0 18px #247cf9,0 0 48px #6b29e780; color:white; display:inline-flex; font-size:15px; font-weight:800; gap:11px; padding:17px 25px; text-decoration:none; transition:.25s transform,.25s box-shadow; } .download-btn:hover { transform:translateY(-3px); box-shadow:0 0 24px #29a1ff,0 0 65px #7d31ff; } .download-icon { border:1px solid #c8e1ff; border-radius:50%; display:grid; height:22px; place-items:center; width:22px; } .android-note { font-size:11px; color:#a8b9d7; margin:15px 0; } .glow { position:absolute; border-radius:50%; filter:blur(5px); opacity:.8; } .glow-one { height:450px;width:450px;right:-100px;top:150px;background:#1949ae; } .glow-two { height:280px;width:280px;right:16%;bottom:-140px;background:#8d39e7; } .visual-card { background:linear-gradient(145deg,#41229c,#0a78c9 54%,#151e66); border:7px solid #f2f8ff; border-radius:17px; box-shadow:0 35px 60px #0009; height:370px; overflow:hidden; position:absolute; right:max(5vw,50px); top:190px; transform:rotate(7deg); width:500px; } .screen-top { padding:10px; background:#f5f7ff; } .screen-top span { background:#d3d8e7; border-radius:50%; display:inline-block; height:6px; margin-right:4px; width:6px; } .screen-play { margin:63px auto 19px; width:55px; height:55px; border:2px solid #98eedc; border-radius:50%; display:grid; place-items:center; color:#a8ffdb; padding-left:4px; } .screen-text { text-align:center; font-family:"Space Grotesk"; font-size:34px; line-height:1.02; letter-spacing:-1px; } .screen-text small { display:block; color:#9effdd; font:700 9px Manrope; letter-spacing:2px; margin-top:11px; } .screen-bars { display:flex; gap:5px; padding:36px 27px; } .screen-bars i { background:#fff4; height:5px; flex:1; border-radius:4px; } .plans { padding:112px 28px 120px; max-width:1180px; margin:auto; } .dark { color:#148b61; } h2 { font-size:clamp(36px,4.3vw,58px); line-height:1.06; } h2 span { color:#0b9b59; } .section-heading>p:last-child { color:#63718a; margin:19px 0 45px; } .price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:19px; } .plan-card { background:linear-gradient(160deg,#effff4,#d9ffea); border:1px solid #b6f6d0; border-radius:13px; padding:37px 30px 29px; position:relative; } .plan-card.featured { background:linear-gradient(160deg,#c7ffe0,#a8f9cd); box-shadow:0 15px 30px #17a55a25; transform:translateY(-12px); border-color:#39c986; } .popular { position:absolute; right:16px; top:15px; border-radius:20px; background:#0c9b58; color:white; font-size:9px; letter-spacing:1px; padding:6px 10px; font-weight:800; } .term { font-size:11px; color:#0b8750; font-weight:800; letter-spacing:1.5px; margin:0 0 25px; }.price { color:#041c15; font:700 46px/1 "Space Grotesk"; letter-spacing:-2px; }.price small { font-size:22px; vertical-align:12px; margin-right:2px; }.period { color:#527065; font-size:12px; margin:10px 0 28px; }.plan-card a { color:#05261a; display:flex; justify-content:space-between; border-top:1px solid #82ddac; padding-top:18px; font-size:13px; font-weight:800; text-decoration:none; }.plan-card a span { color:#079457; font-size:19px; line-height:12px; } footer { background:#061632; padding:30px max(28px,calc((100% - 1124px)/2)); color:#91a3c4; display:flex; justify-content:space-between; align-items:center; } footer p { font-size:11px; margin:0; }
.hero-copy strong { color:#7ff6cf; font-weight:800; }.color-shift { background:linear-gradient(90deg,#75f9cc,#78b7ff,#d1a2ff,#75f9cc); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; display:block; font-weight:800; margin-top:8px; animation:color-flow 4s linear infinite; } @keyframes color-flow { to { background-position:300% center; } }
.hero-copy .live-channels { color:#65baff; font-weight:800; }.hero-copy .youtube { color:#ff6767; font-weight:800; }.download-btn { animation:neon-cycle 3.4s ease-in-out infinite; } @keyframes neon-cycle { 0%,100% { box-shadow:0 0 12px #1684ff,0 0 32px #167cffaa,0 0 55px #6b29e766; } 33% { box-shadow:0 0 13px #a64dff,0 0 34px #8737ffaa,0 0 58px #ec55e166; } 66% { box-shadow:0 0 13px #48f5c0,0 0 34px #20ce9aaa,0 0 58px #237eff66; } }
@media(max-width:850px) { .hero { min-height:690px; }.visual-card{ opacity:.25; right:-120px; top:215px; }.hero-content{padding-top:85px}.price-grid{grid-template-columns:1fr; max-width:470px}.plan-card.featured{transform:none}.plans{padding-top:80px} }
@media(max-width:490px) { nav{padding:0 20px}.hero-content,.plans{padding-left:20px;padding-right:20px}h1{letter-spacing:-1.5px} footer{display:block;padding:27px 20px}footer p{margin-top:16px}.visual-card{display:none} }