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

:root { --orange:#ef5b22; --green:#11c46a; --cream:#f5f4f0; --black:#000; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#000; color:var(--cream); font-family:"Barlow",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
main { min-height:100vh; overflow:hidden; background:radial-gradient(circle at 50% 10%,rgba(109,48,23,.22),transparent 26%),#000; }

.heroSection,.linksSection,.faqSection,.trustRow,.siteFooter {
  width:min(860px,calc(100% - 32px)); margin:0 auto;
}
.heroSection { min-height:930px; padding-top:28px; position:relative; }
.heroNoise { position:absolute; inset:0; opacity:.055; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.heroIntro { position:relative; z-index:1; text-align:center; margin-bottom:20px; }
.logo { display:flex; align-items:center; justify-content:center; line-height:1; font-family:"Barlow Condensed",sans-serif; letter-spacing:-.04em; }
.logoIcon { color:var(--orange); font-size:26px; margin-right:5px; }
.logo strong { font-style:italic; font-size:34px; font-weight:900; }
.logo i { font-size:24px; font-style:italic; font-weight:400; margin-left:3px; }
.mk7Logo { display:block; width:275px; max-width:72vw; height:auto; margin:0 auto; object-fit:contain; }
.verified { display:inline-flex; align-items:center; gap:7px; margin-top:11px; padding:5px 13px; border:1px solid rgba(239,91,34,.4); border-radius:100px; background:rgba(239,91,34,.09); color:var(--orange); font:700 8px "Barlow Condensed"; letter-spacing:.15em; }
.verified b { display:grid; place-items:center; width:13px; height:13px; border-radius:50%; background:var(--orange); color:#fff; font-size:8px; }
.heroIntro p { margin:10px 0 3px; font-size:14px; color:rgba(245,244,240,.8); }
.heroIntro small { font:500 7px "Barlow Condensed"; letter-spacing:.32em; color:rgba(245,244,240,.36); }

.campaignCard { position:relative; z-index:1; border:1px solid rgba(239,91,34,.42); border-radius:14px 14px 0 0; overflow:hidden; background:#0b0b0b; box-shadow:0 40px 90px rgba(0,0,0,.75); }
.campaignPhoto { min-height:465px; position:relative; background:linear-gradient(0deg,rgba(0,0,0,.54),transparent 42%),url("jetta-hero.png") center/cover no-repeat; }
.live { position:absolute; top:17px; left:18px; display:flex; align-items:center; gap:7px; padding:5px 10px; border:1px solid rgba(17,196,106,.55); border-radius:100px; background:rgba(0,0,0,.65); color:#21de80; font:800 8px "Barlow Condensed"; letter-spacing:.15em; }
.live i { width:7px; height:7px; border-radius:50%; background:#16dc78; box-shadow:0 0 13px #16dc78; }
.photoBadges { position:absolute; left:18px; bottom:16px; display:grid; grid-template-columns:auto 1fr; gap:6px 5px; padding:10px 12px; border-left:2px solid var(--orange); background:rgba(8,8,8,.72); backdrop-filter:blur(8px); font:700 10px "Barlow Condensed"; }
.photoBadges b { color:var(--orange); }
.photoBadges span { color:#eee; }
.prizeStrip { padding:9px; text-align:center; background:linear-gradient(90deg,#2a130c,#51200e,#29110b); border-top:1px solid rgba(239,91,34,.45); border-bottom:1px solid rgba(239,91,34,.34); color:#e77745; font:700 8px "Barlow Condensed"; letter-spacing:.12em; }
.offerTop { display:flex; align-items:center; justify-content:space-between; min-height:80px; border-bottom:1px solid #292929; }
.offerTop>div:first-child { padding:18px; }
.offerTop strong,.offerTop span { display:block; font-family:"Barlow Condensed"; }
.offerTop strong { font-size:18px; font-style:italic; font-weight:900; }
.offerTop span { color:var(--orange); font-size:15px; }
.price { height:80px; min-width:170px; padding:16px 22px; border-left:1px solid #292929; text-align:right; background:radial-gradient(circle at 60% 60%,rgba(239,91,34,.16),transparent 70%); }
.price small { display:block; color:#777; font:400 9px "Barlow Condensed"; }
.price b { color:var(--orange); font:900 italic 24px "Barlow Condensed"; }
.offerRows { display:grid; grid-template-columns:1fr 1fr; }
.offerRows>div { padding:12px 18px; }
.offerRows>div+div { border-left:1px solid #292929; }
.offerRows small,.offerRows strong { display:block; font-family:"Barlow Condensed"; }
.offerRows small { color:#686868; font-size:7px; letter-spacing:.08em; }
.offerRows strong { font-size:15px; font-style:italic; }
.buyButton { display:flex; align-items:center; justify-content:space-between; margin:0 0 0; min-height:80px; padding:17px 22px; background:linear-gradient(110deg,#ff7134,#e94a12); color:#fff; transition:.2s ease; }
.buyButton:hover { filter:brightness(1.08); }
.buyButton small,.buyButton b { display:block; font-family:"Barlow Condensed"; }
.buyButton small { font-size:8px; letter-spacing:.2em; opacity:.7; }
.buyButton b { margin-top:4px; font-size:17px; font-style:italic; letter-spacing:.06em; }
.buyButton i { display:grid; place-items:center; width:43px; height:43px; border-radius:50%; border:1px solid rgba(0,0,0,.25); background:rgba(0,0,0,.12); font-size:20px; font-style:normal; }
.wordTicker { overflow:hidden; border-top:1px solid #25130e; border-bottom:1px solid #25130e; }
.wordTicker>div { display:flex; width:max-content; padding:15px 0; gap:28px; animation:ticker 22s linear infinite; font:600 italic 10px "Barlow Condensed"; letter-spacing:.23em; color:#8a5d4b; }
.wordTicker b { color:var(--orange); }
@keyframes ticker { to{ transform:translateX(-46%); } }

.linksSection { padding:62px 0 85px; }
.sectionTitle { display:flex; align-items:center; justify-content:center; gap:13px; margin-bottom:28px; color:var(--orange); font:800 9px "Barlow Condensed"; letter-spacing:.18em; }
.sectionTitle span { width:30px; height:1px; background:rgba(239,91,34,.48); }
.winnerRail { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.winnerCard { height:300px; position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(239,91,34,.28); background:linear-gradient(0deg,#050505 0%,transparent 60%),url("jetta-hero.png") center/cover; }
.winnerCard:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.76),transparent 55%); }
.card2 { background-position:43% center; }
.card3 { background-position:57% center; }
.card4 { background-position:70% center; }
.card5 { background-position:82% center; }
.winnerTag { position:absolute; z-index:2; top:10px; left:9px; padding:4px 7px; border-radius:20px; background:rgba(7,7,7,.76); color:var(--orange); font:700 6px "Barlow Condensed"; letter-spacing:.08em; text-transform:uppercase; }
.winnerText { position:absolute; z-index:2; bottom:30px; left:10px; right:10px; font-family:"Barlow Condensed"; font-style:italic; text-transform:uppercase; }
.winnerText small { display:block; font-size:8px; text-align:center; }
.winnerText strong { display:block; color:#f4d52b; font-size:18px; line-height:.9; text-align:center; text-shadow:0 2px 5px #000; }
.winnerCard footer { position:absolute; z-index:3; bottom:0; left:0; right:0; padding:7px; background:linear-gradient(90deg,#cda834,#f4d452); color:#fff; text-align:center; font:600 6px "Barlow Condensed"; letter-spacing:.1em; }
.promoGrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:30px; }
.socialBanner,.communityBanner { height:218px; position:relative; overflow:hidden; border:1px solid rgba(239,91,34,.22); border-radius:16px; }
.socialBanner { display:flex; align-items:center; padding:30px; background:radial-gradient(circle at 18% 50%,rgba(247,101,48,.45),transparent 25%),linear-gradient(120deg,#32101b,#8b1838 52%,#170b13); }
.socialBanner:after { content:""; position:absolute; width:175px; height:175px; right:-35px; top:-46px; border-radius:38px; background:linear-gradient(145deg,#f67d32,#e72e76 50%,#713fd9); transform:rotate(22deg); opacity:.85; box-shadow:0 0 0 17px rgba(255,255,255,.05); }
.socialShape { position:relative; z-index:2; margin-right:22px; color:#fff; font:800 70px "Barlow Condensed"; text-shadow:0 0 24px rgba(255,85,85,.7); }
.socialBanner div { position:relative; z-index:2; }
.socialBanner small,.socialBanner strong,.socialBanner b { display:block; font-family:"Barlow Condensed"; }
.socialBanner small { color:#f9b25e; font-size:8px; letter-spacing:.18em; }
.socialBanner strong { margin:5px 0 15px; font-size:30px; line-height:.8; text-transform:uppercase; }
.socialBanner b { width:max-content; padding:6px 10px; border-radius:4px; background:#f5c43e; color:#23130a; font-size:8px; letter-spacing:.08em; }
.communityBanner { display:flex; align-items:center; justify-content:space-between; padding:28px 28px 25px; background:radial-gradient(circle at 86% 30%,rgba(48,255,126,.42),transparent 32%),linear-gradient(118deg,#0b371d,#096327 56%,#07170c); }
.communityBanner:before { content:""; position:absolute; inset:0; opacity:.16; background-image:linear-gradient(30deg,transparent 45%,rgba(255,255,255,.2) 46%,transparent 47%); background-size:17px 17px; }
.communityCopy { position:relative; z-index:2; max-width:210px; }
.communityCopy small,.communityCopy strong,.communityCopy b { display:block; font-family:"Barlow Condensed"; }
.communityCopy small { color:#c5ffd8; font-size:8px; letter-spacing:.14em; }
.communityCopy strong { margin-top:2px; color:#f4dd3c; font-size:32px; font-style:italic; line-height:.9; text-shadow:0 2px 5px #03250e; }
.communityCopy p { margin:9px 0 13px; color:#fff; font:700 15px/1 "Barlow Condensed"; text-transform:uppercase; }
.communityCopy b { width:max-content; padding:7px 11px; border-radius:4px; background:#f4dc35; color:#132416; font-size:8px; letter-spacing:.08em; }
.communityPhone { position:relative; z-index:2; width:112px; height:176px; margin-right:-10px; border:5px solid #151515; border-radius:19px; background:linear-gradient(145deg,#21d36f,#08742f); box-shadow:-15px 13px 28px rgba(0,0,0,.38); transform:rotate(8deg); display:grid; place-items:center; align-content:center; }
.communityPhone:before { content:""; position:absolute; top:5px; width:35px; height:6px; border-radius:10px; background:#101010; }
.communityPhone span { color:#fff; font-size:52px; line-height:.5; }
.communityPhone i { margin-top:-10px; color:#fff; font:900 italic 25px "Barlow Condensed"; }

.faqSection { padding:45px 0 70px; }
.faqList { border-top:1px solid #202020; }
details { border-bottom:1px solid #202020; }
summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:17px 5px; font:700 15px "Barlow Condensed"; text-transform:uppercase; }
summary::-webkit-details-marker { display:none; }
summary b { color:var(--orange); font-size:20px; transition:.2s; }
details[open] summary b { transform:rotate(45deg); }
details p { margin:0; padding:0 45px 18px 5px; color:#8e8e8e; font-size:12px; line-height:1.65; }
.trustRow { display:flex; justify-content:center; gap:42px; padding:25px 0; border-top:1px solid #202020; border-bottom:1px solid #202020; color:#777; font:600 8px "Barlow Condensed"; letter-spacing:.1em; }
.trustRow span::first-letter { color:var(--orange); }
.siteFooter { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:32px 0 50px; color:#555; font-size:8px; }
.siteFooter p { max-width:420px; text-align:center; line-height:1.6; }
.logo.mini .logoIcon { font-size:14px; }
.logo.mini strong { font-size:18px; color:#aaa; }
.logo.mini i { font-size:13px; color:#777; }
.footerLogo { width:145px; max-width:38vw; margin:0; opacity:.72; }
.whatsapp { position:fixed; z-index:30; right:calc(50% - 430px + 10px); bottom:20px; display:flex; align-items:center; }
.whatsapp label { margin-right:-5px; padding:7px 16px 7px 12px; border:1px solid #2b2b2b; border-radius:20px 0 0 20px; background:#0a0a0a; font:600 italic 8px "Barlow Condensed"; letter-spacing:.13em; }
.whatsapp span { display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:#12cf70; color:#fff; font-size:31px; box-shadow:0 0 25px rgba(18,207,112,.45); transform:rotate(-30deg); }

@media (max-width:900px) {
  .whatsapp { right:18px; }
}
@media (max-width:640px) {
  .heroSection,.linksSection,.faqSection,.trustRow,.siteFooter { width:calc(100% - 22px); }
  .heroSection { padding-top:22px; min-height:auto; }
  .logo strong { font-size:29px; }
  .logo i { font-size:20px; }
  .mk7Logo { width:240px; }
  .campaignPhoto { min-height:360px; background-position:56% center; }
  .photoBadges { font-size:8px; }
  .offerTop { min-height:68px; }
  .offerTop strong { font-size:15px; }
  .offerTop span { font-size:13px; }
  .price { height:68px; min-width:125px; padding:13px; }
  .price b { font-size:20px; }
  .offerRows strong { font-size:13px; }
  .buyButton { min-height:70px; border-radius:0; }
  .winnerRail { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; }
  .winnerCard { min-width:61vw; scroll-snap-align:start; }
  .promoGrid { grid-template-columns:1fr; }
  .socialBanner,.communityBanner { height:205px; }
  .socialBanner,.communityBanner { padding:24px; }
  .trustRow { flex-direction:column; align-items:center; gap:11px; }
  .siteFooter { flex-direction:column; text-align:center; }
}
