:root {
  --bg: #0d0b14;
  --bg-soft: #15121f;
  --panel: #191626;
  --panel-2: #211c31;
  --text: #f4f0ff;
  --muted: #a7a0bb;
  --muted-2: #716a85;
  --violet: #9e7bff;
  --violet-bright: #c2aeff;
  --blue: #75b7ff;
  --gold: #f1c77a;
  --line: rgba(255,255,255,.1);
  --shadow: 0 24px 70px rgba(0,0,0,.3);
  --radius-lg: 28px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; cursor: pointer; }
.site-shell { min-width: 320px; overflow: hidden; background: radial-gradient(circle at 78% 0%, rgba(88,50,161,.12), transparent 27rem), var(--bg); }
.site-header { align-items: center; display: flex; height: 78px; justify-content: space-between; margin: 0 auto; max-width: 1240px; padding: 0 28px; position: relative; z-index: 10; }
.brand { align-items: center; display: inline-flex; gap: 10px; }
.brand-logo { border: 1px solid rgba(255,255,255,.14); border-radius: 9px; box-shadow: 0 5px 20px rgba(28,110,255,.18); display: block; height: 35px; object-fit: cover; width: 35px; }
.brand-mark { align-items: flex-end; display: inline-flex; gap: 3px; height: 25px; transform: skew(-13deg); width: 22px; }
.brand-mark span { background: var(--violet); border-radius: 4px 4px 1px 1px; display: block; width: 5px; }
.brand-mark span:nth-child(1) { height: 15px; opacity: .55; }.brand-mark span:nth-child(2) { height: 22px; opacity: .8; }.brand-mark span:nth-child(3) { background: var(--gold); height: 18px; }
.brand-name { font: 800 19px/1 'Manrope', sans-serif; letter-spacing: .05em; }.brand-name span { color: var(--violet-bright); }
.desktop-nav { display: flex; gap: 29px; margin-left: 90px; }.desktop-nav a { color: var(--muted); font-size: 13px; transition: color .2s ease; }.desktop-nav a:hover { color: var(--text); }
.cart-button { align-items: center; background: rgba(255,255,255,.045); border: 1px solid var(--line); border-radius: 12px; display: inline-flex; gap: 8px; padding: 9px 12px; transition: background .2s ease, border-color .2s ease; }.cart-button:hover { background: rgba(255,255,255,.09); border-color: rgba(194,174,255,.4); }.cart-icon { color: var(--violet-bright); font-size: 17px; }.cart-label { color: var(--muted); font-size: 12px; }.cart-count { align-items: center; background: var(--violet); border-radius: 99px; color: #16111f; display: inline-flex; font-size: 11px; font-weight: 700; height: 19px; justify-content: center; min-width: 19px; padding: 0 5px; }
.section-pad { margin: 0 auto; max-width: 1240px; padding: 118px 28px; }.hero { align-items: center; display: grid; gap: 70px; grid-template-columns: minmax(0, .96fr) minmax(390px, .9fr); min-height: 650px; padding-bottom: 106px; padding-top: 92px; }.hero-copy { max-width: 610px; }.eyebrow, .section-kicker { align-items: center; color: var(--violet-bright); display: inline-flex; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.eyebrow { gap: 10px; }.eyebrow-dot { background: var(--gold); border-radius: 50%; box-shadow: 0 0 14px rgba(241,199,122,.7); height: 7px; width: 7px; }.hero h1, h2, h3 { font-family: 'Manrope', sans-serif; margin: 0; }.hero h1 { font-size: clamp(43px, 5.3vw, 76px); letter-spacing: -.065em; line-height: 1.02; margin: 24px 0 24px; max-width: 680px; }.hero h1 em, h2 em { color: var(--violet-bright); font-style: normal; }.hero-subtitle { color: var(--muted); font-size: 16px; line-height: 1.75; margin: 0; max-width: 540px; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }.button { align-items: center; border: 1px solid transparent; border-radius: 11px; display: inline-flex; font-size: 13px; font-weight: 700; gap: 18px; justify-content: center; padding: 14px 18px; transition: transform .2s ease, background .2s ease, border-color .2s ease; }.button:hover { transform: translateY(-2px); }.button-primary { background: var(--violet); box-shadow: 0 12px 30px rgba(158,123,255,.23); color: #17111f; }.button-primary:hover { background: var(--violet-bright); }.button-ghost { background: transparent; border-color: var(--line); color: var(--text); }.button-ghost:hover { background: rgba(255,255,255,.06); border-color: rgba(194,174,255,.42); }.button-light { background: var(--text); color: #20192a; }.button-light:hover { background: #fff; }.button span { font-size: 16px; font-weight: 400; }.hero-notes { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 27px; }.hero-notes span { color: var(--muted-2); font-size: 11px; }.hero-notes b { color: var(--gold); font-size: 14px; margin-right: 4px; }
.hero-art { min-height: 470px; position: relative; }.screen-card { background: linear-gradient(145deg, rgba(40,32,62,.96), rgba(20,17,31,.98)); border: 1px solid rgba(255,255,255,.16); border-radius: 22px; box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08); left: 8%; overflow: hidden; padding: 15px; position: absolute; top: 26px; transform: rotate(4deg); width: 82%; z-index: 2; }.screen-top, .screen-footer { align-items: center; display: flex; justify-content: space-between; }.screen-live, .screen-time, .screen-footer small { color: var(--muted-2); font-size: 9px; font-weight: 700; letter-spacing: .11em; }.screen-live i { background: #c78dff; border-radius: 50%; display: inline-block; height: 6px; margin-right: 5px; width: 6px; }.screen-visual { align-items: center; background: radial-gradient(circle at 65% 40%, #a67cff 0, #4b2b6c 15%, transparent 44%), linear-gradient(130deg, #251c38, #34204e 55%, #141020); border-radius: 15px; display: flex; height: 282px; justify-content: center; margin: 13px 0 15px; overflow: hidden; position: relative; }.screen-visual:after { background: linear-gradient(transparent, rgba(9,7,13,.85)); bottom: 0; content: ''; height: 48%; left: 0; position: absolute; right: 0; }.visual-glow { border: 1px solid rgba(241,199,122,.55); border-radius: 50%; height: 160px; position: absolute; right: 18%; top: 15%; transform: rotate(28deg); width: 92px; }.play-button { align-items: center; background: rgba(255,255,255,.85); border-radius: 50%; color: #34204e; display: flex; font-size: 14px; height: 48px; justify-content: center; padding-left: 2px; position: relative; width: 48px; z-index: 1; }.visual-label { bottom: 17px; color: rgba(255,255,255,.72); font-size: 11px; left: 18px; position: absolute; z-index: 1; }.screen-footer strong { display: block; font: 700 13px 'Manrope',sans-serif; margin-top: 4px; }.arrow-circle { align-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--violet-bright); display: flex; height: 30px; justify-content: center; width: 30px; }.floating-chip { align-items: center; backdrop-filter: blur(15px); background: rgba(27,22,42,.83); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; box-shadow: 0 15px 30px rgba(0,0,0,.25); display: flex; gap: 10px; padding: 10px 13px; position: absolute; z-index: 3; }.floating-chip small { color: var(--muted-2); display: block; font-size: 9px; }.floating-chip strong { display: block; font: 700 11px 'Manrope',sans-serif; margin-top: 3px; }.chip-top { right: 0; top: 0; }.chip-bottom { bottom: 37px; left: 0; }.chip-icon { align-items: center; border-radius: 8px; display: flex; font-size: 13px; height: 32px; justify-content: center; width: 32px; }.chip-icon.violet { background: rgba(158,123,255,.16); color: var(--violet-bright); }.chip-icon.gold { background: rgba(241,199,122,.16); color: var(--gold); }.orb { border-radius: 50%; filter: blur(2px); position: absolute; }.orb-one { background: rgba(121,76,202,.3); height: 250px; right: -60px; top: 100px; width: 250px; }.orb-two { background: rgba(52,126,217,.2); bottom: 20px; height: 170px; left: 50px; width: 170px; }
.trust-strip { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; gap: 30px; justify-content: space-between; margin: 0 auto; max-width: 1184px; padding: 22px 0; }.trust-strip > div { align-items: center; display: flex; flex: 1; gap: 11px; justify-content: center; }.trust-icon { align-items: center; background: rgba(158,123,255,.12); border-radius: 50%; color: var(--violet-bright); display: inline-flex; font-size: 14px; height: 30px; justify-content: center; width: 30px; }.trust-strip strong { display: block; font: 700 11px 'Manrope',sans-serif; }.trust-strip small { color: var(--muted-2); display: block; font-size: 10px; margin-top: 2px; }
.section-heading { max-width: 590px; }.section-heading.centered { margin-left: auto; margin-right: auto; text-align: center; }.section-heading h2 { font-size: clamp(31px, 4vw, 53px); letter-spacing: -.055em; line-height: 1.07; margin: 17px 0 17px; }.section-heading p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }.benefit-grid { display: grid; gap: 13px; grid-template-columns: repeat(4, 1fr); margin-top: 52px; }.benefit-card { background: linear-gradient(150deg, rgba(36,30,54,.78), rgba(21,18,32,.75)); border: 1px solid var(--line); border-radius: var(--radius-md); min-height: 238px; padding: 23px; position: relative; transition: border-color .25s ease, transform .25s ease; }.benefit-card:hover { border-color: rgba(194,174,255,.42); transform: translateY(-5px); }.benefit-symbol { align-items: center; border-radius: 10px; display: inline-flex; font-size: 18px; height: 38px; justify-content: center; width: 38px; }.symbol-violet { background: rgba(158,123,255,.15); color: var(--violet-bright); }.symbol-blue { background: rgba(117,183,255,.13); color: var(--blue); }.symbol-gold { background: rgba(241,199,122,.13); color: var(--gold); }.symbol-pink { background: rgba(242,126,184,.12); color: #f08abb; }.benefit-card h3 { font-size: 16px; letter-spacing: -.03em; margin: 31px 0 9px; }.benefit-card p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 0; }.card-line { background: linear-gradient(90deg, var(--violet), transparent); bottom: 0; height: 2px; left: 23px; opacity: .6; position: absolute; right: 23px; }
.how { background: linear-gradient(180deg, transparent, rgba(36,25,61,.18), transparent); max-width: none; padding-left: max(28px, calc((100% - 1184px)/2)); padding-right: max(28px, calc((100% - 1184px)/2)); }.steps-grid { align-items: center; display: grid; grid-template-columns: 1fr 50px 1fr 50px 1fr; margin-top: 56px; }.step { position: relative; }.step-number { color: var(--muted-2); font: 700 11px 'Manrope',sans-serif; letter-spacing: .1em; }.step-icon { align-items: center; background: rgba(158,123,255,.12); border: 1px solid rgba(158,123,255,.2); border-radius: 50%; color: var(--violet-bright); display: flex; font-size: 22px; height: 56px; justify-content: center; margin: 21px 0 19px; width: 56px; }.step:nth-of-type(3) .step-icon { background: rgba(241,199,122,.11); border-color: rgba(241,199,122,.2); color: var(--gold); }.step h3 { font-size: 16px; }.step p { color: var(--muted); font-size: 12px; line-height: 1.65; margin: 9px 0 0; max-width: 240px; }.step-line { background: linear-gradient(90deg, rgba(158,123,255,.4), rgba(158,123,255,.05)); height: 1px; margin: 32px 22px 0; }
.compatibility { align-items: center; display: grid; gap: 90px; grid-template-columns: .85fr 1.15fr; }.compat-copy h2 { font: 700 clamp(31px, 4vw, 49px)/1.07 'Manrope',sans-serif; letter-spacing: -.055em; margin: 17px 0; }.compat-copy p { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 450px; }.text-link { color: var(--violet-bright); display: inline-flex; font-size: 12px; font-weight: 700; gap: 11px; margin-top: 15px; }.text-link span { font-size: 17px; font-weight: 400; transition: transform .2s; }.text-link:hover span { transform: translateX(4px); }.device-cloud { height: 310px; position: relative; }.device { align-items: center; background: linear-gradient(150deg, rgba(56,43,80,.65), rgba(23,20,34,.8)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 18px 50px rgba(0,0,0,.25); display: flex; flex-direction: column; justify-content: center; position: absolute; }.device:before { background: rgba(158,123,255,.12); border-radius: 50%; content: ''; filter: blur(20px); inset: -10px; position: absolute; z-index: -1; }.device-screen { align-items: center; border: 1px solid rgba(255,255,255,.2); color: var(--violet-bright); display: flex; height: 70%; justify-content: center; width: 84%; }.device-screen i { font-size: 22px; font-style: normal; }.device small { color: var(--muted); font-size: 10px; margin-top: 9px; }.device-tv { border-radius: 10px; height: 160px; left: 7%; top: 15px; transform: rotate(-5deg); width: 245px; }.device-tv:after { background: var(--line); bottom: -17px; content: ''; height: 14px; left: 43%; position: absolute; width: 14%; }.device-box { border-radius: 8px; height: 100px; right: 9%; top: 0; transform: rotate(8deg); width: 153px; }.device-box .device-screen { border: 0; height: auto; }.device-phone { border-radius: 18px; bottom: 8px; height: 190px; left: 35%; transform: rotate(5deg); width: 105px; }.device-phone .device-screen { border-radius: 11px; height: 74%; width: 78%; }.device-tablet { border-radius: 13px; bottom: 18px; height: 143px; right: 4%; transform: rotate(-7deg); width: 195px; }.device-tablet .device-screen { height: 75%; }
.plans { max-width: none; padding-left: max(28px, calc((100% - 1184px)/2)); padding-right: max(28px, calc((100% - 1184px)/2)); }.plans-grid { display: grid; gap: 15px; grid-template-columns: repeat(3, 1fr); margin: 52px auto 0; max-width: 1000px; }.plan-card { background: linear-gradient(150deg, rgba(34,29,52,.85), rgba(21,18,32,.85)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; position: relative; }.plan-card.featured { border-color: rgba(241,199,122,.55); box-shadow: 0 0 0 1px rgba(241,199,122,.12), 0 25px 70px rgba(69,46,16,.17); transform: translateY(-12px); }.plan-card.featured:before { background: var(--gold); border-radius: 0 0 8px 8px; color: #282016; content: 'MAIS ESCOLHIDO'; font-size: 9px; font-weight: 800; letter-spacing: .12em; padding: 7px 14px; position: absolute; right: 21px; top: 0; }.plan-accent { border-radius: 4px; height: 3px; margin-bottom: 23px; width: 31px; }.accent-violet { background: var(--violet); }.accent-gold { background: var(--gold); }.accent-blue { background: var(--blue); }.plan-eyebrow { color: var(--muted-2); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.plan-card h3 { font-size: 19px; margin: 9px 0 8px; }.plan-description { color: var(--muted); font-size: 12px; min-height: 42px; }.plan-price { align-items: baseline; display: flex; gap: 3px; margin: 23px 0; }.plan-price strong { font: 800 37px 'Manrope',sans-serif; letter-spacing: -.06em; }.plan-price span { color: var(--muted); font-size: 12px; }.plan-features { border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 17px 0 8px; }.plan-features li { color: var(--muted); font-size: 11px; margin: 10px 0; padding-left: 20px; position: relative; }.plan-features li:before { color: var(--gold); content: '✓'; font-weight: 800; left: 0; position: absolute; }.plan-button { width: 100%; }.pricing-note { color: var(--muted-2); font-size: 10px; margin: 24px auto 0; max-width: 700px; text-align: center; }
.trial { padding-bottom: 50px; padding-top: 55px; }.trial-panel { background: linear-gradient(113deg, #392260, #211a3e 47%, #142c4c); border: 1px solid rgba(194,174,255,.25); border-radius: var(--radius-lg); min-height: 300px; overflow: hidden; padding: 54px 70px; position: relative; }.trial-panel .section-kicker { color: var(--gold); }.trial-panel h2 { font-size: clamp(31px, 4vw, 48px); letter-spacing: -.055em; line-height: 1.06; margin: 14px 0; }.trial-panel p { color: rgba(244,240,255,.7); font-size: 13px; line-height: 1.7; max-width: 410px; }.trial-stars { color: rgba(241,199,122,.7); font-size: 28px; letter-spacing: 8px; position: absolute; right: 15%; top: 50px; }.trial-stars span { color: rgba(194,174,255,.8); font-size: 19px; }.trial-orb { border: 1px solid rgba(194,174,255,.26); border-radius: 50%; height: 290px; position: absolute; right: -72px; top: -26px; width: 290px; }.trial-orb:before, .trial-orb:after { border: 1px solid rgba(241,199,122,.18); border-radius: 50%; content: ''; inset: 30px; position: absolute; }.trial-orb:after { inset: 63px; }
.testimonials { padding-top: 80px; }.quote-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); margin: 50px auto 0; max-width: 1000px; }.quote-card { background: rgba(27,23,41,.62); border: 1px solid var(--line); border-radius: var(--radius-md); margin: 0; padding: 22px; }.quote-featured { background: linear-gradient(150deg, rgba(50,38,79,.78), rgba(27,23,41,.72)); border-color: rgba(158,123,255,.37); }.quote-mark { color: var(--violet); font: 800 38px/1 Georgia,serif; height: 28px; }.quote-card p { color: rgba(244,240,255,.83); font-size: 12px; line-height: 1.75; min-height: 66px; }.quote-card footer { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 9px; padding-top: 16px; }.avatar { align-items: center; border-radius: 50%; color: #17111f; display: inline-flex; font-size: 9px; font-weight: 800; height: 29px; justify-content: center; width: 29px; }.avatar-one { background: #e7a0bd; }.avatar-two { background: #8bbce8; }.avatar-three { background: #d9ba7b; }.quote-card footer strong { display: block; font: 700 11px 'Manrope',sans-serif; }.quote-card footer small { color: var(--muted-2); display: block; font-size: 9px; margin-top: 2px; }.quote-stars { color: var(--gold); font-size: 9px; letter-spacing: 1px; margin-left: auto; }
.faq { max-width: 1184px; padding-bottom: 130px; }.faq-layout { display: grid; gap: 90px; grid-template-columns: .7fr 1.3fr; }.faq-intro h2 { font-size: clamp(33px, 4vw, 50px); letter-spacing: -.055em; line-height: 1.04; margin: 17px 0; }.faq-intro p { color: var(--muted); font-size: 13px; line-height: 1.7; max-width: 290px; }.faq-list details { border-bottom: 1px solid var(--line); padding: 0 0 18px; }.faq-list details + details { padding-top: 18px; }.faq-list summary { align-items: center; cursor: pointer; display: flex; font: 600 14px 'Manrope',sans-serif; justify-content: space-between; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--violet-bright); font-size: 22px; font-weight: 300; transition: transform .2s; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { color: var(--muted); font-size: 12px; line-height: 1.75; margin: 13px 30px 0 0; max-width: 620px; }
.status-banner { align-items: center; background: rgba(36,29,55,.9); border: 1px solid rgba(194,174,255,.32); border-radius: 18px; display: none; gap: 14px; margin: 24px auto 0; max-width: 1184px; padding: 15px 18px; }.status-banner.visible { display: flex; }.status-icon { align-items: center; background: rgba(194,174,255,.16); border-radius: 50%; color: var(--violet-bright); display: inline-flex; flex: 0 0 auto; font-weight: 800; height: 32px; justify-content: center; width: 32px; }.status-banner strong { display: block; font: 700 13px 'Manrope',sans-serif; }.status-banner p { color: var(--muted); font-size: 11px; margin: 3px 0 0; }.status-banner .button { font-size: 10px; margin-left: auto; padding: 9px 12px; white-space: nowrap; }.status-approved { border-color: rgba(130,222,169,.4); }.status-approved .status-icon { background: rgba(130,222,169,.14); color: #8bdfa9; }.status-pending { border-color: rgba(241,199,122,.4); }.status-pending .status-icon { background: rgba(241,199,122,.14); color: var(--gold); }.status-failure { border-color: rgba(255,157,157,.35); }.status-failure .status-icon { background: rgba(255,157,157,.13); color: #ff9d9d; }
.site-footer { border-top: 1px solid var(--line); margin: 0 auto; max-width: 1184px; padding: 38px 0 22px; }.footer-main { align-items: center; display: flex; justify-content: space-between; }.footer-main p { color: var(--muted-2); font-size: 11px; margin: 0 0 0 36px; margin-right: auto; }.footer-actions { display: flex; gap: 8px; }.footer-actions .button { font-size: 11px; padding: 10px 13px; }.footer-bottom { border-top: 1px solid var(--line); color: var(--muted-2); display: flex; font-size: 10px; justify-content: space-between; margin-top: 32px; padding-top: 17px; }
.cart-drawer { inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .25s ease; z-index: 30; }.cart-drawer.open { opacity: 1; pointer-events: auto; }.drawer-backdrop { background: rgba(8,6,12,.7); inset: 0; position: absolute; }.drawer-panel { background: #17131f; border-left: 1px solid var(--line); display: flex; flex-direction: column; height: 100%; max-width: 430px; padding: 28px; position: absolute; right: 0; transform: translateX(100%); transition: transform .3s ease; width: 100%; }.cart-drawer.open .drawer-panel { transform: translateX(0); }.drawer-header { align-items: flex-start; display: flex; justify-content: space-between; }.drawer-header h2 { font-size: 29px; letter-spacing: -.06em; margin-top: 7px; }.drawer-header h2 span { color: var(--muted-2); font-size: 14px; vertical-align: middle; }.close-button { background: transparent; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: 22px; height: 32px; line-height: 1; width: 32px; }.drawer-items { flex: 1; overflow: auto; padding: 34px 0 10px; }.cart-item { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 12px; padding: 14px 0; }.cart-item-icon { align-items: center; background: rgba(158,123,255,.14); border-radius: 10px; color: var(--violet-bright); display: flex; font-size: 18px; height: 48px; justify-content: center; width: 48px; }.cart-item-info { flex: 1; }.cart-item-info strong { display: block; font: 700 12px 'Manrope',sans-serif; }.cart-item-info small { color: var(--muted); display: block; font-size: 10px; margin-top: 3px; }.cart-quantity { align-items: center; border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 9px; padding: 4px 7px; }.cart-quantity button { background: transparent; border: 0; color: var(--muted); font-size: 17px; line-height: 1; padding: 0; }.cart-quantity span { font-size: 11px; }.drawer-empty { align-items: center; display: flex; flex: 1; flex-direction: column; justify-content: center; text-align: center; }.empty-icon { align-items: center; background: rgba(158,123,255,.1); border-radius: 50%; color: var(--violet-bright); display: flex; font-size: 28px; height: 62px; justify-content: center; width: 62px; }.drawer-empty h3 { font-size: 17px; margin: 18px 0 7px; }.drawer-empty p { color: var(--muted); font-size: 12px; margin: 0; }.drawer-footer { border-top: 1px solid var(--line); padding-top: 21px; }.total-row { align-items: baseline; display: flex; justify-content: space-between; margin-bottom: 17px; }.total-row span { color: var(--muted); font-size: 12px; }.total-row strong { font: 800 25px 'Manrope',sans-serif; }.checkout-button { border: 0; width: 100%; }.drawer-footer > small { color: var(--muted-2); display: block; font-size: 9px; line-height: 1.5; margin-top: 11px; text-align: center; }.checkout-error { color: #ff9d9d; font-size: 11px; line-height: 1.4; margin-top: 11px; text-align: center; }.toast { background: var(--text); border-radius: 9px; bottom: 24px; box-shadow: 0 15px 40px rgba(0,0,0,.35); color: #1c1526; font-size: 12px; left: 50%; max-width: calc(100% - 40px); opacity: 0; padding: 12px 16px; pointer-events: none; position: fixed; transform: translate(-50%, 20px); transition: opacity .25s ease, transform .25s ease; z-index: 40; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }.reveal-delay { transition-delay: .1s; }
@media (max-width: 960px) { .desktop-nav { gap: 15px; margin-left: 20px; }.hero { gap: 35px; grid-template-columns: 1fr 1fr; }.hero h1 { font-size: clamp(39px, 5vw, 59px); }.benefit-grid { grid-template-columns: repeat(2, 1fr); }.compatibility { gap: 35px; }.plans-grid { max-width: 800px; }.plan-card { padding: 20px; }.site-footer { margin-left: 28px; margin-right: 28px; } }
@media (max-width: 700px) { .site-header { height: 68px; padding: 0 19px; }.desktop-nav { display: none; }.cart-label { display: none; }.section-pad { padding: 76px 19px; }.status-banner { align-items: flex-start; margin: 18px 19px 0; padding: 14px; }.status-banner .button { align-self: center; font-size: 0; gap: 0; }.status-banner .button span { font-size: 16px; }.hero { display: block; min-height: auto; padding-bottom: 72px; padding-top: 56px; }.hero h1 { font-size: clamp(42px, 13vw, 61px); margin-top: 21px; }.hero-subtitle { font-size: 14px; }.hero-notes { gap: 9px 16px; }.hero-notes span { font-size: 10px; }.hero-art { margin: 48px auto 0; min-height: 375px; max-width: 410px; }.screen-card { left: 7%; top: 23px; width: 84%; }.screen-visual { height: 213px; }.chip-top { right: -2px; }.chip-bottom { bottom: 20px; left: -4px; }.trust-strip { align-items: flex-start; display: grid; gap: 16px; margin: 0 19px; padding: 20px 0; }.trust-strip > div { justify-content: flex-start; }.trust-strip small { display: inline-block; margin-left: 4px; }.trust-strip small:before { content: '·'; margin-right: 4px; }.benefit-grid { gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 35px; }.benefit-card { min-height: 216px; padding: 17px; }.benefit-card h3 { font-size: 14px; margin-top: 23px; }.benefit-card p { font-size: 11px; }.card-line { left: 17px; right: 17px; }.steps-grid { display: block; margin-top: 36px; }.step { padding-left: 65px; }.step-icon { left: 0; margin: 5px 0 0; position: absolute; top: 14px; }.step-number { display: block; margin-bottom: 8px; }.step p { max-width: none; }.step-line { background: linear-gradient(180deg, rgba(158,123,255,.4), rgba(158,123,255,.05)); height: 33px; margin: 0 0 0 27px; width: 1px; }.compatibility { display: block; }.device-cloud { margin: 44px auto 0; max-width: 450px; }.plans-grid { display: block; margin-top: 35px; }.plan-card { margin: 15px 0; }.plan-card.featured { transform: none; }.trial { padding-top: 20px; }.trial-panel { padding: 38px 26px; }.trial-stars { right: 8%; top: 22px; }.trial-orb { height: 230px; right: -112px; top: 5px; width: 230px; }.quote-grid { display: block; margin-top: 35px; }.quote-card { margin-bottom: 11px; }.faq-layout { display: block; }.faq-list { margin-top: 42px; }.site-footer { margin: 0 19px; padding-top: 30px; }.footer-main { align-items: flex-start; flex-direction: column; gap: 16px; }.footer-main p { margin: 0; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; line-height: 1.5; }.drawer-panel { padding: 22px 19px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.button, .cart-drawer, .drawer-panel { transition: none; } }

/* Reference-inspired additions */
.metric-strip { gap: 18px; }
.metric-strip > div { justify-content: flex-start; }
.category-strip { align-items: center; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: flex; gap: 0; justify-content: space-between; margin: 0 auto; max-width: 1184px; overflow-x: auto; padding: 18px 0; scrollbar-width: none; }
.category-strip::-webkit-scrollbar { display: none; }
.category-strip span { color: var(--muted-2); font-size: 10px; letter-spacing: .08em; padding: 0 18px; text-transform: uppercase; white-space: nowrap; }
.category-strip span + span { border-left: 1px solid var(--line); }
.plans-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1184px; }
.accent-pink { background: #e77af1; }
@media (max-width: 960px) { .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; } }
@media (max-width: 700px) { .category-strip { justify-content: flex-start; margin: 0 19px; }.category-strip span { padding: 0 13px; }.category-strip span:first-child { padding-left: 0; }.category-strip span + span { padding-left: 13px; }.plans-grid { grid-template-columns: 1fr; } }

/* Hero TV mockup */
.tv-device { background: linear-gradient(145deg, #2a223a, #0f0d17); border: 1px solid rgba(255,255,255,.2); border-radius: 13px; bottom: 18px; box-shadow: 0 25px 60px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.12); height: 210px; position: absolute; right: -3%; transform: rotate(-7deg); width: 48%; z-index: 1; }
.tv-device-screen { background: radial-gradient(circle at 67% 37%, rgba(255,40,201,.7), transparent 17%), radial-gradient(circle at 43% 46%, rgba(21,181,255,.62), transparent 33%), linear-gradient(130deg, #101a36, #24113d 55%, #110c1c); border: 5px solid #17131f; border-radius: 8px; inset: 8px; overflow: hidden; position: absolute; }
.tv-device-screen:after { background: linear-gradient(transparent, rgba(8,6,13,.9)); bottom: 0; content: ''; height: 45%; left: 0; position: absolute; right: 0; }
.tv-live { color: rgba(255,255,255,.65); font-size: 7px; left: 12px; letter-spacing: .1em; position: absolute; top: 10px; z-index: 1; }.tv-live i { background: #e77af1; border-radius: 50%; display: inline-block; height: 5px; margin-right: 3px; width: 5px; }
.tv-title { color: #fff; font: 800 17px 'Manrope', sans-serif; left: 12px; position: absolute; top: 37%; z-index: 1; }.tv-title span { color: #e77af1; }.tv-caption { bottom: 12px; color: rgba(255,255,255,.7); font-size: 8px; left: 12px; position: absolute; z-index: 1; }.tv-play { align-items: center; background: rgba(255,255,255,.9); border-radius: 50%; color: #29153f; display: flex; font-size: 11px; height: 28px; justify-content: center; padding-left: 2px; position: absolute; right: 18px; top: 43%; width: 28px; z-index: 1; }
.tv-leg { background: #1a1624; bottom: -13px; height: 14px; position: absolute; width: 5px; z-index: -1; }.tv-leg-left { left: 28%; transform: rotate(23deg); }.tv-leg-right { right: 28%; transform: rotate(-23deg); }
@media (max-width: 700px) { .tv-device { bottom: 13px; height: 148px; right: -1%; width: 49%; }.tv-title { font-size: 11px; }.tv-caption { font-size: 6px; }.tv-play { height: 21px; right: 11px; width: 21px; }.tv-device-screen { border-width: 4px; inset: 6px; } }

/* Visual twin layer: faithful composition inspired by the supplied reference */
:root { --bg: #090d16; --bg-soft: #0e1420; --panel: #111a29; --panel-2: #162235; --text: #f4f8ff; --muted: #9ba8bd; --muted-2: #64738b; --violet: #8d5cff; --violet-bright: #c28bff; --blue: #17d9ff; --gold: #ffd166; --line: rgba(139,169,210,.16); --shadow: 0 25px 80px rgba(0,0,0,.4); }
body { background: var(--bg); font-family: 'Inter', system-ui, sans-serif; }
.site-shell { background: radial-gradient(ellipse at 75% 10%, rgba(25,89,166,.16), transparent 32rem), radial-gradient(ellipse at 87% 32%, rgba(171,27,182,.1), transparent 28rem), var(--bg); }
.site-header { height: 76px; max-width: 1200px; padding: 0 20px; }
.brand { gap: 11px; }.brand-logo { border-color: rgba(23,217,255,.35); border-radius: 10px; box-shadow: 0 0 24px rgba(23,217,255,.18); height: 38px; width: 38px; }.brand-name { font-family: 'Outfit', sans-serif; font-size: 18px; letter-spacing: .025em; }.brand-name span { background: linear-gradient(90deg, var(--blue), #ed46ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.desktop-nav { gap: 28px; margin-left: 120px; }.desktop-nav a { color: #8390a7; font-size: 12px; }.desktop-nav a:hover { color: var(--blue); }
.cart-button { background: rgba(16,27,43,.8); border-color: rgba(125,163,207,.2); border-radius: 8px; }.cart-count { background: linear-gradient(135deg, var(--blue), var(--violet)); color: #07121d; }
main { display: flex; flex-direction: column; }.status-banner { order: 0; }.hero { order: 1; }.trust-strip { order: 2; }.category-strip { order: 3; }.benefits { order: 4; }.plans { order: 5; }.how { order: 6; }.compatibility { order: 7; }.trial { order: 8; }.testimonials { order: 9; }.faq { order: 10; }
.section-pad { max-width: 1200px; padding: 105px 20px; }.hero { gap: 56px; min-height: 650px; padding-bottom: 90px; padding-top: 76px; }.eyebrow, .section-kicker { color: var(--blue); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; }.eyebrow-dot { background: var(--blue); box-shadow: 0 0 16px rgba(23,217,255,.8); }.hero h1 { font-family: 'Outfit', sans-serif; font-size: clamp(50px, 5vw, 78px); font-weight: 700; letter-spacing: -.06em; line-height: .98; }.hero h1 em, h2 em { background: linear-gradient(90deg, #e7f5ff 0%, var(--blue) 42%, #e44bff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }.hero-subtitle { color: #9daabd; font-size: 15px; max-width: 510px; }.button { border-radius: 7px; font-family: 'Inter', sans-serif; font-size: 12px; padding: 13px 17px; }.button-primary { background: linear-gradient(110deg, var(--blue), #8176ff 53%, #ef4bff); box-shadow: 0 10px 35px rgba(104,106,255,.28); color: #06111b; }.button-primary:hover { background: linear-gradient(110deg, #69edff, #ad9dff 53%, #ff8aff); }.button-ghost { background: rgba(12,20,33,.42); border-color: rgba(23,217,255,.22); }.button-ghost:hover { border-color: rgba(23,217,255,.62); color: var(--blue); }.hero-notes b { color: var(--blue); }
.hero-art { min-height: 465px; }.screen-card { background: linear-gradient(145deg, rgba(19,34,56,.96), rgba(9,13,22,.98)); border-color: rgba(23,217,255,.18); border-radius: 16px; }.screen-visual { background: radial-gradient(circle at 66% 38%, rgba(215,57,255,.85) 0, rgba(40,94,218,.6) 15%, transparent 42%), linear-gradient(135deg, #0d2442, #21113d 60%, #0b111d); border-radius: 9px; }.visual-glow { border-color: rgba(23,217,255,.7); }.screen-live i { background: var(--blue); }.tv-device { border-color: rgba(23,217,255,.32); background: linear-gradient(145deg, #152c48, #0b101a); }.tv-device-screen { background: radial-gradient(circle at 67% 37%, rgba(255,40,201,.85), transparent 17%), radial-gradient(circle at 43% 46%, rgba(21,181,255,.72), transparent 33%), linear-gradient(130deg, #081b35, #291044 55%, #090c16); }.tv-live { color: var(--blue); }.tv-title span { color: #f54fff; }.chip-icon.violet { background: rgba(23,217,255,.14); color: var(--blue); }.chip-icon.gold { background: rgba(255,209,102,.14); color: var(--gold); }
.trust-strip { border-color: rgba(126,160,201,.2); max-width: 1160px; padding: 21px 0; }.trust-icon { background: rgba(23,217,255,.1); color: var(--blue); }.trust-strip strong { font-family: 'Outfit', sans-serif; }.category-strip { max-width: 1160px; border-color: rgba(126,160,201,.2); }.category-strip span { color: #718098; font-family: 'JetBrains Mono', monospace; font-size: 9px; }.section-heading h2, .compat-copy h2, .faq-intro h2 { font-family: 'Outfit', sans-serif; font-weight: 600; }.section-heading h2 { font-size: clamp(34px, 4vw, 55px); }.section-heading p, .compat-copy p { color: #93a1b7; }
.benefit-card, .plan-card, .quote-card { background: linear-gradient(145deg, rgba(17,30,49,.84), rgba(10,16,27,.9)); border-color: rgba(113,155,206,.17); border-radius: 10px; }.benefit-card:hover { border-color: rgba(23,217,255,.5); }.benefit-symbol { border-radius: 8px; }.symbol-violet, .symbol-blue { background: rgba(23,217,255,.1); color: var(--blue); }.symbol-gold { background: rgba(255,209,102,.1); color: var(--gold); }.symbol-pink { background: rgba(239,75,255,.1); color: #f071ff; }.card-line { background: linear-gradient(90deg, var(--blue), #ef4bff, transparent); }.how { background: linear-gradient(180deg, transparent, rgba(12,37,67,.28), transparent); }.step-icon { background: rgba(23,217,255,.1); border-color: rgba(23,217,255,.3); color: var(--blue); }.step:nth-of-type(3) .step-icon { color: var(--gold); }.step-line { background: linear-gradient(90deg, rgba(23,217,255,.55), rgba(239,75,255,.1)); }
.device { background: linear-gradient(150deg, rgba(20,47,75,.78), rgba(9,16,27,.9)); border-color: rgba(23,217,255,.23); }.device:before { background: rgba(23,217,255,.15); }.device-screen { color: var(--blue); }
.plan-card.featured { border-color: rgba(23,217,255,.65); box-shadow: 0 0 0 1px rgba(23,217,255,.14), 0 25px 70px rgba(5,107,142,.18); }.plan-card.featured:before { background: linear-gradient(90deg, var(--blue), #a46fff); color: #06111b; }.plan-accent { background: linear-gradient(90deg, var(--blue), #ef4bff); }.accent-violet, .accent-gold, .accent-blue, .accent-pink { background: linear-gradient(90deg, var(--blue), #ef4bff); }.plan-price strong { font-family: 'Outfit', sans-serif; }.plan-features li:before { color: var(--blue); }.trial-panel { background: radial-gradient(circle at 85% 42%, rgba(239,75,255,.24), transparent 23%), linear-gradient(110deg, #0a3561, #10264d 53%, #32134d); border-color: rgba(23,217,255,.27); }.trial-panel .section-kicker { color: var(--blue); }.faq-list details { border-color: rgba(113,155,206,.17); }.faq-list summary { font-family: 'Outfit', sans-serif; }.faq-list summary span { color: var(--blue); }.site-footer { border-color: rgba(113,155,206,.17); }
@media (max-width: 960px) { .desktop-nav { margin-left: 20px; } }
@media (max-width: 700px) { .site-header { padding: 0 16px; }.brand-name { font-size: 15px; }.brand-logo { height: 32px; width: 32px; }.section-pad { padding: 75px 16px; }.hero { padding-top: 54px; }.hero h1 { font-size: clamp(44px, 13vw, 62px); }.category-strip { margin: 0 16px; }.trust-strip { margin: 0 16px; }.plans { padding-left: 16px; padding-right: 16px; } }

/* Pixel-alignment refinements against the supplied reference viewport */
.site-shell { background-color: #090d16; background-image: linear-gradient(rgba(61,99,140,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(61,99,140,.07) 1px, transparent 1px), radial-gradient(ellipse at 16% 4%, rgba(104,51,195,.2), transparent 27rem), radial-gradient(ellipse at 83% 60%, rgba(19,151,198,.13), transparent 31rem); background-size: 72px 72px, 72px 72px, auto, auto; }
.site-header { align-items: center; }.header-actions { align-items: center; display: flex; gap: 8px; }.header-admin { align-items: center; border: 1px solid rgba(23,217,255,.2); border-radius: 7px; color: #aebbd0; display: inline-flex; font-size: 11px; gap: 7px; padding: 10px 13px; }.header-admin:before { content: '⌑'; color: var(--blue); font-size: 13px; }.header-admin:hover { border-color: rgba(23,217,255,.6); color: var(--blue); }.header-cta { background: linear-gradient(110deg, #8e5dff, #bd65f4); border-radius: 7px; box-shadow: 0 8px 25px rgba(138,78,255,.25); color: #fff; font-size: 11px; font-weight: 700; padding: 11px 15px; }.header-cta:hover { filter: brightness(1.12); }.cart-button { padding: 9px 10px; }
.hero-art { overflow: visible; }.screen-card { overflow: hidden; }.screen-visual { background-image: linear-gradient(180deg, rgba(5,10,18,.06), rgba(7,12,21,.83)), url('/assets/hero-football.jpg'); background-position: center; background-size: cover; }.screen-visual:after { background: linear-gradient(transparent, rgba(6,10,18,.84)); }.screen-footer strong { font-size: 12px; }.screen-tags { display: flex; gap: 5px; margin-top: 7px; }.screen-tags i { background: rgba(23,217,255,.11); border: 1px solid rgba(23,217,255,.2); border-radius: 99px; color: var(--blue); font-size: 8px; font-style: normal; padding: 3px 6px; }.screen-tags i:nth-child(2) { color: #d5a6ff; border-color: rgba(213,166,255,.23); }.screen-tags i:nth-child(3) { color: #ffd166; border-color: rgba(255,209,102,.24); }
@media (max-width: 960px) { .hero { min-height: 0; padding-bottom: 56px; padding-top: 104px; }.hero-art { min-height: 350px; }.screen-visual { height: 202px; }.screen-card { top: 8px; }.tv-device { bottom: 2px; height: 155px; }.floating-chip.chip-bottom { bottom: 10px; }.trust-strip { margin-top: 0; } }
@media (max-width: 700px) { .header-admin { display: none; }.header-actions { gap: 5px; }.header-cta { display: none; }.hero { padding-top: 74px; }.hero-art { min-height: 330px; }.screen-visual { height: 190px; }.screen-tags { display: none; }.screen-footer strong { font-size: 10px; } }

/* Realistic TV asset and quality badges */
.tv-device { background: #080d16; border-color: rgba(23,217,255,.42); height: 236px; overflow: visible; width: 55%; }
.tv-device-screen { background-image: linear-gradient(180deg, rgba(5,9,15,.05), rgba(5,9,15,.28)), url('/manus-storage/async-images/RfNlk155KmzhrFz8gNojTY/image-1.webp'); background-position: center; background-size: cover; border: 5px solid #111824; border-radius: 8px; inset: 7px; }
.tv-device-screen:after { display: none; }
.tv-live { background: rgba(7,15,26,.74); border: 1px solid rgba(239,75,255,.4); border-radius: 99px; color: #ff7dec; left: 11px; padding: 4px 7px; top: 10px; }.tv-live i { background: #ff4edc; box-shadow: 0 0 8px #ff4edc; }.tv-play { background: rgba(255,255,255,.9); color: #101728; height: 34px; right: 16px; top: 43%; width: 34px; }
.tv-quality-list { bottom: -31px; display: flex; gap: 4px; left: 5px; position: absolute; right: 5px; transform: rotate(0deg); z-index: 2; }.tv-quality-list span { background: rgba(8,17,29,.94); border: 1px solid rgba(23,217,255,.32); border-radius: 5px; color: #a9efff; font: 600 7px 'Inter', sans-serif; padding: 5px 6px; white-space: nowrap; }.tv-quality-list span:nth-child(2) { border-color: rgba(255,78,220,.35); color: #ff9af0; }.tv-quality-list span:nth-child(3) { border-color: rgba(255,209,102,.36); color: #ffe19a; }.tv-quality-list span:nth-child(4) { border-color: rgba(141,92,255,.4); color: #ceb7ff; }
@media (max-width: 960px) { .tv-device { height: 180px; width: 55%; }.tv-quality-list { bottom: -27px; }.tv-quality-list span { font-size: 6px; padding: 4px; } }
@media (max-width: 700px) { .tv-device { height: 150px; width: 53%; }.tv-device-screen { border-width: 4px; inset: 5px; }.tv-quality-list { bottom: -24px; gap: 2px; left: 2px; right: 2px; }.tv-quality-list span { font-size: 5px; padding: 3px 4px; }.tv-quality-list span:nth-child(n+3) { display: none; } }

/* Make the real TV image the hero's primary visual */
.screen-visual { background-image: linear-gradient(180deg, rgba(5,9,15,.04), rgba(5,9,15,.42)), url('/manus-storage/async-images/RfNlk155KmzhrFz8gNojTY/image-1.webp'); background-position: center; background-size: cover; }
.tv-device { display: none; }
.screen-tags i:nth-child(1) { border-color: rgba(23,217,255,.32); color: #a9efff; }
.screen-tags i:nth-child(2) { border-color: rgba(255,78,220,.35); color: #ff9af0; }
.screen-tags i:nth-child(3) { border-color: rgba(255,209,102,.36); color: #ffe19a; }
.screen-tags i:nth-child(4) { border-color: rgba(141,92,255,.4); color: #ceb7ff; }

/* Single-TV hero: remove all secondary visual blocks */
.hero-art { min-height: 420px; display: flex; align-items: center; justify-content: center; }
.hero-art .tv-device { display: block; bottom: auto; height: 330px; left: auto; position: relative; right: auto; top: auto; transform: rotate(-4deg); width: 90%; z-index: 2; }
.hero-art .tv-device-screen { background-image: linear-gradient(180deg, rgba(5,9,15,.04), rgba(5,9,15,.42)), url('/manus-storage/async-images/RfNlk155KmzhrFz8gNojTY/image-1.webp'); }
@media (max-width: 960px) { .hero-art { min-height: 340px; }.hero-art .tv-device { height: 260px; width: 88%; } }
@media (max-width: 700px) { .hero-art { min-height: 300px; margin-top: 34px; }.hero-art .tv-device { height: 210px; width: 94%; }.tv-quality-list span { font-size: 5px; padding: 3px 4px; } }

/* Background detail layer: ambient neon, technical lines and subtle depth */
.site-shell { isolation: isolate; position: relative; }
.site-shell:before { background: radial-gradient(circle at 14% 18%, rgba(125,69,255,.24), transparent 19rem), radial-gradient(circle at 82% 24%, rgba(0,196,255,.14), transparent 21rem), radial-gradient(circle at 72% 80%, rgba(221,49,255,.11), transparent 24rem); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: -2; }
.site-shell:after { background: linear-gradient(90deg, transparent 0%, rgba(23,217,255,.06) 49.8%, transparent 50.2%), linear-gradient(180deg, transparent 0%, rgba(239,75,255,.04) 49.8%, transparent 50.2%); background-size: 420px 100%, 100% 420px; content: ''; inset: 0; mix-blend-mode: screen; opacity: .45; pointer-events: none; position: absolute; z-index: -1; }
body:before { background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 4px); content: ''; inset: 0; opacity: .11; pointer-events: none; position: fixed; z-index: 50; }
.hero-art:before, .hero-art:after { border: 1px solid rgba(23,217,255,.12); border-radius: 50%; content: ''; pointer-events: none; position: absolute; }.hero-art:before { height: 480px; right: -75px; top: -16px; transform: rotate(-22deg); width: 210px; }.hero-art:after { border-color: rgba(239,75,255,.09); height: 390px; right: -40px; top: 29px; transform: rotate(-22deg); width: 175px; }
@media (max-width: 700px) { .site-shell:after { background-size: 260px 100%, 100% 260px; opacity: .3; }.hero-art:before { height: 340px; right: -38px; top: 5px; width: 150px; }.hero-art:after { height: 275px; right: -15px; top: 38px; width: 125px; } }

.pix-modal { inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .25s ease; z-index: 50; }
.pix-modal.open { opacity: 1; pointer-events: auto; }
.pix-backdrop { background: rgba(8,6,12,.82); inset: 0; position: absolute; }
.pix-panel { background: linear-gradient(155deg, #211a31, #11101a); border: 1px solid rgba(194,174,255,.25); border-radius: 24px; box-shadow: 0 30px 100px rgba(0,0,0,.55); left: 50%; max-height: calc(100vh - 34px); max-width: 460px; overflow: auto; padding: 32px; position: absolute; top: 50%; transform: translate(-50%, -46%); transition: transform .25s ease; width: calc(100% - 32px); }
.pix-modal.open .pix-panel { transform: translate(-50%, -50%); }
.pix-close { position: absolute; right: 18px; top: 18px; }
.pix-heading { padding-right: 35px; }
.pix-heading h2 { font-size: 34px; letter-spacing: -.06em; margin: 10px 0 8px; }
.pix-heading p, .pix-result p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.pix-form { display: grid; gap: 14px; margin-top: 25px; }
.pix-form label { color: var(--muted); display: grid; font-size: 11px; gap: 7px; }
.pix-form input { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font: inherit; font-size: 14px; outline: none; padding: 13px 14px; }
.pix-form input:focus { border-color: var(--violet-bright); box-shadow: 0 0 0 3px rgba(158,123,255,.12); }
.pix-form .button { margin-top: 5px; width: 100%; }
.pix-result { margin-top: 24px; text-align: center; }
.pix-result-top { align-items: center; display: flex; gap: 8px; justify-content: center; }
.pix-result-top strong { font: 700 15px 'Manrope', sans-serif; }
.pix-result-top span:last-child { color: var(--gold); font-weight: 700; margin-left: 4px; }
.pix-status-dot { background: #4ee6a1; border-radius: 50%; box-shadow: 0 0 14px rgba(78,230,161,.7); height: 8px; width: 8px; }
.pix-result > p { margin: 10px auto 17px; max-width: 310px; }
.pix-qr { background: #fff; border-radius: 12px; display: block; height: 190px; margin: 0 auto 16px; padding: 9px; width: 190px; }
.pix-copy { font-size: 12px; margin-bottom: 10px; width: 100%; }
.pix-code { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 9px; color: var(--muted); display: block; font: 10px/1.4 'JetBrains Mono', monospace; min-height: 66px; padding: 9px; resize: none; width: 100%; }
.pix-result > small { color: var(--muted-2); display: block; font-size: 10px; margin-top: 13px; }
@media (max-width: 700px) { .pix-panel { border-radius: 20px; padding: 25px 19px; }.pix-heading h2 { font-size: 29px; }.pix-qr { height: 175px; width: 175px; } }

.checkout-card-button { margin-top: 9px; width: 100%; }

.customer-track-link { color: var(--violet-bright); display: block; font-size: 11px; margin: 13px 0 5px; text-decoration: none; }
.customer-track-link:hover { color: var(--text); }
.header-affiliate-mobile{display:none}.affiliate-access-module{align-items:center;background:linear-gradient(110deg,rgba(142,93,255,.16),rgba(23,217,255,.08));border:1px solid rgba(142,93,255,.3);border-radius:11px;display:flex;gap:16px;justify-content:space-between;margin:0 auto 22px;max-width:960px;padding:14px 18px}.affiliate-access-module h2{font-size:18px;margin:5px 0}.affiliate-access-module h2 em{color:#c9b4ff;font-style:normal}.affiliate-access-module p{color:var(--muted);font-size:11px;margin:0}.affiliate-access-module .section-kicker{color:#a885ff;font-size:9px;letter-spacing:.14em;text-transform:uppercase}.affiliate-access-module .button{font-size:11px;padding:11px 14px;white-space:nowrap}@media(max-width:960px){.affiliate-access-module{margin-left:28px;margin-right:28px}}@media(max-width:700px){.header-affiliate-mobile{align-items:center;background:rgba(142,93,255,.16);border:1px solid rgba(142,93,255,.45);border-radius:7px;color:#e0d5ff;display:inline-flex;font-size:9px;font-weight:700;padding:9px 8px;text-transform:uppercase}.affiliate-access-module{align-items:flex-start;flex-direction:column;gap:10px;margin:0 16px 18px;padding:13px 14px}.affiliate-access-module h2{font-size:16px}.affiliate-access-module p{font-size:10px;line-height:1.4}.affiliate-access-module .button{font-size:10px;padding:10px 12px;width:auto}}

/* Tema CINÉFLIX nas páginas comerciais */
:root{--bg:#050506;--bg-soft:#100c0e;--panel:#171012;--panel-2:#241416;--text:#fff8f5;--muted:#c0aaa4;--muted-2:#8d7772;--violet:#ff3b30;--violet-bright:#ff796d;--blue:#ff5143;--gold:#ffc15c;--line:rgba(255,92,72,.2);--shadow:0 24px 70px rgba(0,0,0,.5)}
body{background:#050506;color:var(--text)}
.site-shell{background-color:#050506;background-image:linear-gradient(180deg,rgba(4,3,4,.62),rgba(5,5,6,.95) 74%),url('/manus-storage/file_00000000ca14820e98b4e2bde5b78c88_6d91b70b.png');background-position:center top;background-repeat:no-repeat;background-size:cover;background-attachment:fixed}
.site-shell:after{background:linear-gradient(90deg,transparent 0%,rgba(255,60,42,.06) 49.8%,transparent 50.2%),linear-gradient(180deg,transparent 0%,rgba(255,180,100,.03) 49.8%,transparent 50.2%);opacity:.35}
.site-header{background:rgba(5,5,6,.44);border-bottom:1px solid rgba(255,80,62,.28);border-radius:0 0 16px 16px;backdrop-filter:blur(12px);padding-bottom:12px;padding-top:10px}
.brand-logo{background:#050506;border-color:rgba(255,90,70,.6);border-radius:10px;box-shadow:0 0 24px rgba(255,36,22,.28);height:50px;object-fit:contain;width:89px}
.brand-name{letter-spacing:.08em}.brand-name span{background:linear-gradient(90deg,#ff4d3f,#ffd1c7 52%,#8b8b8f);-webkit-background-clip:text;background-clip:text;color:transparent}
.header-admin,.button-ghost,.cart-button{background:rgba(13,8,10,.72);border-color:rgba(255,92,72,.25)}.header-admin:before,.eyebrow,.section-kicker,.hero-notes b{color:var(--blue)}
.header-admin:hover,.button-ghost:hover{border-color:rgba(255,92,72,.7);color:#ff8d82}
.button-primary,.header-cta{background:linear-gradient(110deg,#ff5143,#b81711);box-shadow:0 10px 35px rgba(220,30,18,.3);color:#fff}.button-primary:hover,.header-cta:hover{background:linear-gradient(110deg,#ff766a,#d42c22)}
.hero h1 em,h2 em{background:linear-gradient(90deg,#fff7f4 0%,#ff6155 45%,#ffc0a8 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.trust-strip,.category-strip,.benefit-card,.plan-card,.quote-card,.faq-item,.trial-panel,.drawer-panel,.cart-drawer{background:rgba(14,9,11,.76);border-color:rgba(255,92,72,.18)}
.plan-card.featured{border-color:rgba(255,86,68,.7);box-shadow:0 18px 60px rgba(195,25,15,.22)}.screen-card,.tv-device{border-color:rgba(255,92,72,.32)}

/* Direção CINÉFLIX Premium: cinema, conversão e mobile-first */
.site-shell{background-color:#030304;background-image:linear-gradient(180deg,rgba(0,0,0,.48),rgba(3,3,4,.95) 78%),url('/manus-storage/file_00000000ca14820e98b4e2bde5b78c88_6d91b70b.png');}
.site-header{position:relative;z-index:60}.hero{isolation:isolate;overflow:hidden;position:relative}
.hero:before{background:radial-gradient(ellipse at 11% 38%,rgba(255,31,20,.2),transparent 34%),linear-gradient(105deg,rgba(3,3,4,.94) 0%,rgba(3,3,4,.72) 47%,rgba(3,3,4,.12) 100%);content:'';inset:0;pointer-events:none;position:absolute;z-index:-1}
.hero:after{border:1px solid rgba(255,58,42,.22);border-radius:30px;box-shadow:inset 0 0 80px rgba(255,25,15,.08),0 0 80px rgba(255,20,10,.08);content:'';inset:24px;pointer-events:none;position:absolute;z-index:-1}
.hero-copy,.hero-art{position:relative;z-index:2}.hero h1{text-shadow:0 10px 42px rgba(0,0,0,.65)}.hero h1 em{filter:drop-shadow(0 0 18px rgba(255,61,45,.24))}
.hero-notes span{color:#c8b8b2}.hero-notes b{color:#ff5548;text-shadow:0 0 12px rgba(255,50,35,.8)}
.hero-art .tv-device{box-shadow:18px 24px 70px rgba(0,0,0,.62),0 0 42px rgba(255,45,30,.16);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}.hero-art .tv-device:hover{box-shadow:18px 28px 80px rgba(0,0,0,.72),0 0 68px rgba(255,45,30,.32);transform:rotate(-2deg) translateY(-8px)}
.button-primary,.header-cta{animation:premium-pulse 3.8s ease-in-out infinite}.button-primary:hover,.header-cta:hover{animation:none;transform:translateY(-2px)}
@keyframes premium-pulse{0%,100%{box-shadow:0 10px 35px rgba(220,30,18,.26)}50%{box-shadow:0 10px 42px rgba(255,40,25,.48),0 0 0 4px rgba(255,50,35,.05)}}
.plans{perspective:1200px}.plan-card{backface-visibility:hidden;transform:translateZ(0);transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}.plan-card:nth-child(odd){transform:rotateY(-.7deg) translateZ(0)}.plan-card:nth-child(even){transform:rotateY(.7deg) translateZ(0)}.plan-card:hover{border-color:rgba(255,76,58,.66);box-shadow:0 24px 60px rgba(180,20,12,.24);transform:translateY(-9px) rotateY(0) translateZ(14px)}.plan-card.featured{transform:translateY(-10px) translateZ(16px)}.plan-card.featured:hover{transform:translateY(-17px) translateZ(22px)}
.benefit-card,.quote-card,.faq-item{transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}.benefit-card:hover,.quote-card:hover,.faq-item:hover{border-color:rgba(255,76,58,.5);box-shadow:0 18px 50px rgba(0,0,0,.35);transform:translateY(-5px)}
.section-kicker,.eyebrow{text-shadow:0 0 14px rgba(255,62,48,.4)}.status-banner{border-color:rgba(255,82,64,.3)}
@media (max-width:700px){.hero{border-radius:0 0 22px 22px;padding-top:62px}.hero:after{inset:12px;border-radius:20px}.hero-art .tv-device{transform:rotate(-2deg)}.hero-art .tv-device:hover{transform:rotate(-1deg) translateY(-4px)}.plan-card:nth-child(odd),.plan-card:nth-child(even),.plan-card.featured{transform:none}.plan-card:hover,.plan-card.featured:hover{transform:translateY(-4px)}.button-primary,.header-cta{animation:none}}
@media (prefers-reduced-motion: reduce){.button-primary,.header-cta{animation:none}.hero-art .tv-device,.plan-card,.benefit-card,.quote-card,.faq-item{transition:none}}

/* Catálogo visual e conversão premium */
.catalog{padding-top:72px}.catalog-row{display:flex;gap:14px;margin-top:34px;overflow-x:auto;padding:6px 2px 20px;scroll-snap-type:x mandatory}.catalog-card{border:1px solid rgba(255,92,72,.22);border-radius:16px;flex:0 0 210px;min-height:250px;overflow:hidden;scroll-snap-align:start;transform:translateZ(0);transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}.catalog-card:hover{border-color:rgba(255,88,70,.75);box-shadow:0 20px 50px rgba(180,20,12,.28);transform:translateY(-8px)}.catalog-art{background:linear-gradient(155deg,rgba(255,55,39,.88),rgba(70,8,10,.72) 54%,rgba(5,5,7,.98));display:flex;flex-direction:column;height:100%;justify-content:flex-end;min-height:250px;padding:18px;position:relative}.catalog-art:before{background:radial-gradient(circle at 68% 18%,rgba(255,245,216,.55),transparent 12%),linear-gradient(130deg,transparent 20%,rgba(255,255,255,.16),transparent 46%);content:'';inset:0;opacity:.65;position:absolute}.catalog-series .catalog-art{background:linear-gradient(155deg,#7a1215,#25101a 58%,#070708)}.catalog-sports .catalog-art{background:linear-gradient(155deg,#b62b1e,#281015 58%,#070708)}.catalog-live .catalog-art{background:linear-gradient(155deg,#64171b,#160d12 58%,#070708)}.catalog-family .catalog-art{background:linear-gradient(155deg,#8b3b18,#28130d 58%,#070708)}.catalog-art>*{position:relative;z-index:1}.catalog-art span{color:#ffc9c0;font-size:10px;font-weight:800;letter-spacing:.18em}.catalog-art b{font-size:18px;line-height:1.05;margin-top:9px}.whatsapp-float{align-items:center;background:#20c76b;border:2px solid rgba(255,255,255,.2);border-radius:999px;bottom:22px;box-shadow:0 12px 32px rgba(9,109,57,.4);color:#fff;display:flex;gap:8px;padding:12px 16px;position:fixed;right:22px;text-decoration:none;z-index:80}.whatsapp-float span{font-size:20px}.whatsapp-float b{font-size:11px}.whatsapp-float:hover{background:#29df7a;transform:translateY(-3px)}
.site-header{position:sticky;top:0}.desktop-nav a:first-child{color:#fff}.desktop-nav a:first-child:after{background:#ff5143;bottom:-12px;content:'';height:2px;left:0;position:absolute;right:0}.desktop-nav a{position:relative}
@media(max-width:700px){.catalog{padding-top:62px}.catalog-row{margin-left:-2px}.catalog-card{flex-basis:188px;min-height:222px}.catalog-art{min-height:222px;padding:15px}.catalog-art b{font-size:16px}.whatsapp-float{bottom:16px;right:14px;padding:11px 13px}.whatsapp-float b{font-size:10px}}

/* Hero cinematográfico sem televisão */
.hero-art .hero-cinema-visual{border:1px solid rgba(255,83,65,.48);border-radius:24px;box-shadow:18px 28px 80px rgba(0,0,0,.72),0 0 70px rgba(255,38,24,.22);min-height:410px;overflow:hidden;position:relative;transform:rotate(-2deg);transition:box-shadow .5s ease,transform .5s ease;width:100%}.hero-art .hero-cinema-visual:hover{box-shadow:18px 32px 90px rgba(0,0,0,.78),0 0 90px rgba(255,38,24,.38);transform:rotate(0) translateY(-8px)}.hero-cinema-visual img{display:block;height:100%;inset:0;object-fit:cover;object-position:center;width:100%}.hero-cinema-visual:after{background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(2,2,3,.88) 100%);content:'';inset:0;pointer-events:none;position:absolute}.cinema-badge{bottom:22px;color:#fff;display:flex;flex-direction:column;font-family:'Outfit',sans-serif;font-size:20px;font-weight:800;letter-spacing:.13em;position:absolute;right:24px;text-shadow:0 2px 14px #000;z-index:2}.cinema-badge i{color:#ff6657;font-size:9px;font-style:normal;letter-spacing:.35em;margin-top:4px}.cinema-glow{background:radial-gradient(circle,rgba(255,49,34,.55),transparent 65%);height:200px;pointer-events:none;position:absolute;right:-75px;top:-60px;width:200px;z-index:1}
@media(max-width:960px){.hero-art .hero-cinema-visual{min-height:310px}}@media(max-width:700px){.hero-art .hero-cinema-visual{border-radius:18px;min-height:255px;transform:rotate(-1deg)}.hero-art .hero-cinema-visual:hover{transform:translateY(-4px)}.cinema-badge{bottom:16px;font-size:15px;right:17px}.cinema-badge i{font-size:7px}}

/* Ordem da página após a inclusão do catálogo: hero sempre no topo */
.affiliate-access-module{order:2}.catalog{order:4}

/* Dispositivos reais no módulo Onde assistir */
.real-device-cloud{align-items:end;gap:14px}.real-device{background:rgba(9,6,7,.78);border:1px solid rgba(255,82,65,.24);border-radius:18px;box-shadow:0 18px 42px rgba(0,0,0,.4);display:flex;flex:1;flex-direction:column;overflow:hidden;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}.real-device:hover{border-color:rgba(255,82,65,.72);box-shadow:0 22px 55px rgba(170,22,12,.26);transform:translateY(-7px)}.real-device img{aspect-ratio:4/3;display:block;height:auto;object-fit:cover;width:100%}.real-device figcaption{color:#fff;display:block;font-size:12px;font-weight:700;padding:11px 12px 13px}.real-device figcaption:before{color:#ff5b4e;content:'•';margin-right:6px}.real-device.device-tv{transform:translateY(0)}.real-device.device-tv:hover{transform:translateY(-7px)}
@media(max-width:700px){.real-device-cloud{gap:9px}.real-device{border-radius:12px}.real-device figcaption{font-size:10px;padding:8px 7px 10px}.real-device figcaption:before{margin-right:3px}}