:root { --ink:#f7f7f7; --paper:#050505; --lime:#DD2C2C; --muted:#afb0b5; --line:#292929; --dark:#000; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Poppins, Arial, Helvetica, sans-serif; } a { color:inherit; text-decoration:none; } .site-header, footer { display:flex; align-items:center; justify-content:space-between; padding:23px max(5vw,32px); border-bottom:1px solid var(--line); background:#000; } .site-header { position:relative; } .brand { display:flex; align-items:center; } .brand-logo { width:142px; height:40px; object-fit:contain; } nav { position:absolute; left:50%; transform:translateX(-50%); display:flex; gap:28px; font-size:14px; white-space:nowrap; } nav a:hover, .header-link:hover, footer a:hover { color:#ff7777; } .header-link { font-size:14px; font-weight:bold; }
.hero { min-height:700px; display:grid; grid-template-columns:1.03fr .97fr; overflow:hidden; padding:82px max(7vw,45px) 65px; gap:45px; background:radial-gradient(circle at 80% 38%, rgba(221,44,44,.17), transparent 27%); } .hero-copy { align-self:center; max-width:640px; } .eyebrow { color:#ff7777; font-size:11px; font-weight:800; letter-spacing:1.5px; margin:0 0 20px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(58px,7.4vw,104px); line-height:.91; letter-spacing:-.085em; margin-bottom:28px; } h1 em,h2 em { color:var(--lime); font-style:normal; } .hero-text { max-width:495px; color:var(--muted); font-size:19px; line-height:1.55; } .hero-actions { display:flex; gap:13px; margin:34px 0 18px; flex-wrap:wrap; } .button { display:inline-flex; align-items:center; gap:21px; padding:14px 20px; border-radius:6px; font-size:14px; font-weight:bold; } .button-primary { background:linear-gradient(135deg, #DD2C2C, #991b1b); color:white; } .button-primary span { font-size:20px; line-height:12px; } .button-quiet { border:1px solid #515151; } .microcopy { font-size:12px; color:var(--muted); }
@media (max-width:1080px) and (min-width:801px) { .hero { grid-template-columns:1fr; padding-top:72px; gap:20px; }.hero-copy { max-width:720px; }.hero h1 { font-size:clamp(64px,8vw,84px); }.player-visual { min-height:440px; }.interface-heading { display:block; }.interface-heading > p { margin-top:25px; } }
.player-visual { position:relative; min-height:520px; display:grid; place-items:center; } .orb { position:absolute; border-radius:50%; filter:blur(1px); } .orb-one { width:430px; height:430px; background:radial-gradient(circle at 60% 40%, #ff5858, var(--lime) 38%, #531010 70%); top:20px; right:0; opacity:.78; } .orb-two { width:220px; height:220px; background:#481010; bottom:6px; left:-3%; } .screen { position:relative; z-index:1; width:min(100%,555px); aspect-ratio:1.39; background:#111; color:#f7f7f7; box-shadow:0 25px 75px rgba(0,0,0,.55), 15px 18px 0 #2a0d0d; border:8px solid #292929; border-radius:13px; overflow:hidden; isolation:isolate; } .screen::before { content:""; position:absolute; z-index:-2; inset:0; background:radial-gradient(ellipse at 65% 24%, rgba(255,113,86,.9), transparent 22%), radial-gradient(ellipse at 28% 78%, rgba(211,25,35,.75), transparent 35%), linear-gradient(135deg, #10131c 5%, #16101a 55%, #310707); } .screen::after { content:""; position:absolute; z-index:-1; width:135%; height:55%; left:-20%; bottom:-26%; border:34px solid rgba(255,115,100,.22); border-radius:50%; transform:rotate(-13deg); box-shadow:0 -30px 0 rgba(255,255,255,.05), 0 -64px 0 rgba(221,44,44,.11); } .screen-top { position:relative; z-index:2; display:flex; gap:5px; padding:12px; background:linear-gradient(90deg,rgba(4,4,4,.86),rgba(22,22,22,.45)); border-bottom:1px solid rgba(255,255,255,.08); } .screen-top span { width:7px; height:7px; border-radius:50%; background:#a0a0a0; }.screen-art { position:absolute; inset:44px 0 40px; overflow:hidden; opacity:.8; } .screen-art i { position:absolute; display:block; border-radius:50%; border:1px solid rgba(255,255,255,.23); } .screen-art i:nth-child(1) { width:310px; height:310px; top:-160px; right:-35px; background:radial-gradient(circle at 44% 55%, rgba(255,224,147,.62), rgba(222,44,44,.13) 34%, transparent 62%); } .screen-art i:nth-child(2) { width:220px; height:220px; bottom:-115px; left:18px; border-width:18px; border-color:rgba(255,103,94,.36); } .screen-art i:nth-child(3) { width:7px; height:7px; left:32%; top:29%; background:#ffe4a2; box-shadow:63px 43px 0 #ff7474, 145px 13px 0 #fff, 93px 118px 0 #ff8f76, -70px 146px 0 #fff1ca; } .screen-content { position:relative; z-index:2; height:calc(100% - 80px); display:grid; align-content:center; justify-items:center; gap:12px; text-align:center; text-shadow:0 2px 16px rgba(0,0,0,.75); }.screen-content p { margin:0; font-size:22px; font-weight:bold; }.screen-content small { color:#e0e0e0; }.play-button { display:grid; place-items:center; border:1px solid rgba(255,255,255,.67); background:rgba(12,12,12,.28); backdrop-filter:blur(8px); border-radius:50%; width:72px; height:72px; padding-left:3px; font-size:20px; color:#fff; transition:transform .2s ease,background .2s ease; }.screen:hover .play-button { transform:scale(1.08); background:rgba(221,44,44,.5); }.screen-controls { position:relative; z-index:2; height:42px; display:flex; align-items:center; gap:10px; padding:0 16px; background:linear-gradient(90deg,rgba(4,4,4,.88),rgba(4,4,4,.3)); }.screen-controls span { height:3px; background:var(--lime); flex:1; }.screen-controls i { width:40px; height:3px; background:#777; }.screen-controls b { font-size:10px; }.source-card { position:absolute; z-index:3; bottom:0; right:-7px; display:grid; grid-template-columns:32px 1fr; gap:4px 10px; width:215px; padding:14px; border:1px solid rgba(255,255,255,.2); background:rgba(22,22,22,.94); backdrop-filter:blur(14px); box-shadow:7px 8px 0 #4c1111; font-size:12px; }.source-icon { grid-row:span 2; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#fff; background:var(--lime); font-size:18px; }.source-card strong { color:#ff7777; font-size:11px; }
.interface-showcase { padding:120px max(7vw,45px); background:radial-gradient(circle at 75% 25%, rgba(221,44,44,.17), transparent 23%), #080808; overflow:hidden; }.interface-heading { display:flex; justify-content:space-between; gap:60px; align-items:end; margin:0 auto 86px; max-width:1280px; }.interface-heading h2 { margin:0; font-size:clamp(40px,5vw,70px); line-height:.94; letter-spacing:-.075em; }.interface-heading h2 em { color:#ff5959; font-style:normal; }.interface-heading > p { max-width:395px; color:#b7b7b7; line-height:1.55; margin:0 0 5px; }.device-stories { max-width:1280px; margin:auto; }.device-story { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,.55fr); align-items:center; gap:clamp(42px,8vw,128px); min-height:540px; }.device-story + .device-story { margin-top:96px; }.device-story-mobile { grid-template-columns:minmax(270px,.55fr) minmax(0,1.45fr); }.device-visual { position:relative; margin:0; }.device-visual::before { content:""; position:absolute; z-index:0; width:58%; aspect-ratio:1; top:18%; left:16%; border-radius:50%; background:radial-gradient(circle,rgba(241,65,65,.4),rgba(221,44,44,.03) 68%); filter:blur(8px); }.device-visual img { position:relative; z-index:1; display:block; width:100%; filter:drop-shadow(0 30px 38px rgba(0,0,0,.55)); }.device-story-tv .device-visual { padding:16px 16px 0; border:1px solid #393939; background:linear-gradient(145deg,#252525,#080808 42%); }.device-story-mobile .device-visual { justify-self:center; width:min(100%,430px); }.device-story-mobile .device-visual::before { width:96%; top:12%; left:2%; background:radial-gradient(circle,rgba(221,44,44,.36),rgba(221,44,44,.04) 63%,transparent 72%); filter:blur(16px); }.device-copy { max-width:390px; }.device-copy .eyebrow { margin-bottom:16px; }.device-copy h3 { margin:0 0 20px; font-size:clamp(28px,3.2vw,45px); line-height:1.01; letter-spacing:-.055em; }.device-copy > p:last-child { margin:0; color:#b8b8b8; line-height:1.6; }
.principle-band { display:flex; justify-content:space-between; gap:35px; padding:26px max(7vw,45px); background:var(--lime); color:#fff; font-weight:bold; }.principle-band p { margin:0; max-width:500px; }.principle-band p:first-child { font-size:19px; }.principle-band span { color:#fff; }.section { padding:112px max(7vw,45px); }.how { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; }.section h2 { font-size:clamp(36px,4vw,61px); line-height:.98; letter-spacing:-.065em; margin:0; }.steps { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); }.steps li { display:grid; grid-template-columns:65px 1fr 1.35fr; align-items:baseline; gap:15px; padding:25px 0; border-bottom:1px solid var(--line); }.steps span { color:#ff7777; font-size:13px; font-weight:bold; }.steps h3 { margin:0; font-size:19px; }.steps p { margin:0; color:var(--muted); line-height:1.4; }.features { background:var(--dark); color:#f5f7ef; }.feature-main { max-width:650px; margin-bottom:67px; }.feature-main .eyebrow { color:#ff7777; }.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid #373737; }.feature-grid article { min-height:200px; padding:25px 20px 0 0; margin-right:18px; border-right:1px solid #373737; }.feature-grid article:last-child { border:0; }.feature-grid span { color:#ff7777; font-size:28px; }.feature-grid h3 { margin:34px 0 9px; font-size:18px; }.feature-grid p { color:#b8b8b8; line-height:1.45; font-size:14px; }.legal-section { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:108px max(7vw,45px); background:#111; }.legal-copy { max-width:520px; color:#c1c1c1; line-height:1.55; }.legal-links { display:flex; gap:24px; margin-top:30px; color:#ff7777; font-weight:bold; font-size:14px; }.legal-links a { text-decoration:underline; text-underline-offset:4px; }.cta-section { padding:110px max(7vw,45px); text-align:center; background:linear-gradient(135deg,#160404,#050505); }.cta-section h2 { margin-bottom:33px; }.cta-section .button { justify-content:center; }.cta-section .eyebrow { margin-bottom:18px; } footer { border:0; background:#000; color:#e9efe6; } footer p { margin:0; color:#aab5af; font-size:13px; } footer div { display:flex; gap:20px; font-size:13px; }
.whatsapp-float { position:fixed; z-index:50; right:24px; bottom:24px; display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#22c55e; color:#fff; box-shadow:0 10px 24px rgba(20,83,45,.45); transition:background .2s ease, transform .2s ease; }.whatsapp-float:hover { color:#fff; background:#16a34a; transform:scale(1.1); }
@media (max-width:800px) { .site-header { padding:18px 23px; } nav { display:none; } .header-link { font-size:12px; } .hero { grid-template-columns:1fr; padding:65px 25px 30px; min-height:auto; } .player-visual { min-height:400px; } .principle-band,.legal-section,.how { display:block; padding:40px 25px; }.principle-band p + p { margin-top:15px; font-size:14px; }.section { padding:73px 25px; }.steps { margin-top:45px; }.steps li { grid-template-columns:44px 1fr; gap:12px; }.steps p { grid-column:2; }.feature-grid { grid-template-columns:1fr 1fr; }.feature-grid article { min-height:185px; }.feature-grid article:nth-child(2) { border:0; }.legal-copy { margin-top:40px; } .interface-showcase { padding:76px 25px; }.interface-heading { display:block; margin-bottom:45px; }.interface-heading > p { margin-top:25px; }.device-story,.device-story-mobile { grid-template-columns:1fr; gap:40px; min-height:0; }.device-story + .device-story { margin-top:85px; }.device-story-mobile .device-copy { grid-row:1; }.device-story-mobile .device-visual { grid-row:2; justify-self:center; }.device-story-tv .device-visual { padding:8px 8px 0; } footer { display:block; padding:30px 25px; } footer p { margin:20px 0; } .whatsapp-float { right:16px; bottom:16px; } }
@media (max-width:430px) { h1 { font-size:55px; } .screen { border-width:5px; box-shadow:9px 12px 0 #253a35; }.source-card { transform:scale(.85); transform-origin:right bottom; }.feature-grid { grid-template-columns:1fr; }.feature-grid article { border-right:0; border-bottom:1px solid #42554e; }.feature-grid article:last-child { border-bottom:0; } }
.legal-page { min-height:100vh; background:#080808; color:#f5f5f5; }.legal-header,.legal-footer { display:flex; align-items:center; justify-content:space-between; padding:23px max(7vw,45px); border-bottom:1px solid #292929; background:#050505; }.legal-back { color:#d5d5d5; font-size:13px; font-weight:700; }.legal-back:hover,.legal-footer a:hover { color:#ff7777; }.legal-main { padding:0 max(7vw,45px) 100px; }.legal-hero { max-width:850px; padding:104px 0 85px; border-bottom:1px solid #303030; }.legal-hero h1 { margin:0 0 28px; font-size:clamp(60px,8vw,114px); line-height:.84; letter-spacing:-.095em; }.legal-hero h1 em { color:#DD2C2C; font-style:normal; }.legal-hero > p { max-width:560px; color:#c8c8c8; font-size:18px; line-height:1.6; }.legal-hero small { color:#8e8e8e; font-size:12px; }.legal-layout { display:grid; grid-template-columns:200px minmax(0,720px); gap:clamp(60px,12vw,185px); max-width:1110px; padding-top:64px; }.legal-index { align-self:start; position:sticky; top:24px; display:grid; gap:14px; }.legal-index p { margin:0 0 6px; color:#ff7777; font-size:10px; font-weight:800; letter-spacing:1.4px; }.legal-index a { color:#a9a9a9; font-size:13px; }.legal-index a:hover { color:#fff; }.legal-content section { position:relative; padding:0 0 45px 60px; margin-bottom:42px; border-bottom:1px solid #292929; }.legal-content section:last-child { border-bottom:0; }.legal-content section > span { position:absolute; top:4px; left:0; color:#ff7777; font-size:12px; font-weight:800; }.legal-content h2 { margin:0 0 16px; font-size:clamp(25px,3vw,36px); letter-spacing:-.055em; }.legal-content p { margin:0; color:#bcbcbc; line-height:1.7; }.legal-contact { display:inline-flex; align-items:center; gap:20px; margin-top:24px; padding:13px 17px; border-radius:5px; background:linear-gradient(135deg,#DD2C2C,#991b1b); color:#fff; font-size:13px; font-weight:800; }.legal-contact span { font-size:19px; }.legal-footer { border-top:1px solid #292929; border-bottom:0; }.legal-footer p { margin:0; font-size:13px; font-weight:700; }.legal-footer div { display:flex; gap:22px; }.legal-footer a { color:#aaa; font-size:13px; }
@media (max-width:800px) { .legal-header,.legal-footer { padding:20px 25px; }.legal-main { padding:0 25px 70px; }.legal-hero { padding:75px 0 60px; }.legal-hero h1 { font-size:clamp(56px,16vw,86px); }.legal-layout { display:block; padding-top:42px; }.legal-index { display:none; }.legal-content section { padding-left:45px; margin-bottom:34px; padding-bottom:34px; }.legal-footer { display:block; }.legal-footer div { margin-top:16px; flex-wrap:wrap; } }