:root { --yellow:#ffe11a; --red:#e20e17; --burgundy:#e20e17; --regulation-red:#a81017; --cream:#fff9eb; --ink:#181515; --muted:#6f6762; --line:#eadfd5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button,input,select { font:inherit; }
[hidden] { display:none !important; }
.topbar { height:84px; max-width:1240px; margin:auto; padding:0 34px; display:flex; align-items:center; justify-content:space-between; background:#fff; }
.brand { display:flex; align-items:center; gap:14px; color:var(--ink); text-decoration:none; }
.officialLogo { width:168px; height:62px; object-fit:contain; object-position:left center; }
.brandDivider { width:1px; height:34px; background:#e9e3dd; }
.clubPetLogo { width:110px !important; max-width:110px; height:30px; flex:0 0 110px; object-fit:contain; object-position:left center; }
.secure { color:#6d6877; font-size:13px; display:flex; align-items:center; gap:9px; }
.secure i { width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 0 4px #ffe5e5; }
.hero { position:relative; isolation:isolate; overflow:hidden; min-height:calc(100vh - 138px); display:grid; grid-template-columns:minmax(0,1fr) minmax(440px,520px); align-items:center; gap:80px; padding:64px max(6vw,34px) 76px; background:radial-gradient(circle at 7% 12%,rgba(255,225,26,.28),transparent 23%),linear-gradient(118deg,var(--cream) 0%,#fffdf8 51%,#fff 51.1%,#fff 100%); }
.heroCopy { color:var(--ink); max-width:590px; justify-self:end; padding-right:18px; }
.eyebrow { display:inline-block; color:var(--burgundy); border:1px solid rgba(226,14,23,.2); background:#fff1c2; padding:9px 13px; border-radius:50px; font-size:11px; font-weight:800; letter-spacing:2.1px; }
.hero h1 { font-size:clamp(50px,5.5vw,82px); line-height:.94; margin:24px 0 25px; letter-spacing:-4px; font-weight:800; }
.hero h1 em { color:var(--burgundy); font-style:normal; }
.heroCopy>p { max-width:535px; color:var(--muted); font-size:18px; line-height:1.65; margin:0; }
.benefits { margin-top:32px; }
.benefits>strong { display:block; max-width:500px; font-size:15px; line-height:1.45; }
.discountCards { display:flex; gap:12px; margin-top:14px; }
.discountCards span { min-width:150px; padding:13px 16px; border:1px solid rgba(226,14,23,.16); border-radius:14px; background:#fff; box-shadow:0 7px 20px rgba(226,14,23,.07); }
.discountCards b,.discountCards small { display:block; }
.discountCards b { color:var(--burgundy); font-size:22px; line-height:1; font-weight:900; }
.discountCards small { margin-top:5px; color:var(--muted); font-size:11px; font-weight:700; }
.formCard { width:100%; max-width:520px; background:#fff; border:1px solid #eee7da; border-radius:24px; padding:31px 34px 28px; box-shadow:0 28px 80px rgba(74,53,20,.13); justify-self:start; }
.formHeading { position:relative; min-height:145px; padding-right:160px; }
.formMascot { position:absolute; z-index:2; right:8px; top:-80px; width:130px; height:auto; pointer-events:none; filter:drop-shadow(0 10px 12px rgba(55,35,22,.18)); }
.formHeading>span { font-size:10px; color:var(--red); letter-spacing:1.8px; font-weight:800; }
.formHeading h2 { font-size:30px; letter-spacing:-1px; margin:7px 0 2px; }
.formHeading p { margin:0 0 20px; color:var(--muted); font-size:13px; }
fieldset { border:0; padding:0; margin:0; }
.partnerType legend { font-size:12px; font-weight:700; margin-bottom:9px; }
.partnerType>div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.partnerType label { position:relative; padding:11px; display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:.2s; }
.partnerType label.selected { border-color:var(--red); background:#fff7f3; box-shadow:0 0 0 2px rgba(226,14,23,.07); }
.partnerType input { position:absolute; opacity:0; }
.typeIcon { width:31px; height:31px; flex:0 0 31px; display:grid; place-items:center; border-radius:9px; background:var(--cream); font-weight:900; }
.selected .typeIcon { background:var(--yellow); color:var(--burgundy); }
.partnerType b,.partnerType small { display:block; }
.partnerType b { font-size:12px; }
.partnerType small { color:var(--muted); margin-top:3px; font-size:9px; }
.fieldGrid { display:grid; grid-template-columns:1fr 1fr; gap:13px 12px; margin-top:17px; }
.fieldGrid label { display:block; }
.fieldGrid .full { grid-column:1/-1; }
.fieldGrid label>span { display:block; margin:0 0 6px; font-size:10px; font-weight:800; color:#4c4656; }
.fieldGrid input,.fieldGrid select { width:100%; height:42px; border:1px solid var(--line); border-radius:9px; padding:0 12px; color:var(--ink); background:#fff; outline:none; font-size:12px; transition:.2s; }
.fieldGrid input:focus,.fieldGrid select:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(226,14,23,.1); }
.websiteField { position:absolute; left:-9999px; opacity:0; }
.consent { display:flex; align-items:flex-start; gap:8px; margin-top:15px; color:#6e6877; font-size:9px; line-height:1.5; cursor:pointer; }
.consent input { margin:1px 0 0; accent-color:var(--red); }
.submitButton { width:100%; height:47px; margin-top:15px; padding:0 17px; border:0; border-radius:11px; display:flex; justify-content:center; align-items:center; gap:13px; background:var(--yellow); color:var(--burgundy); font-weight:900; font-size:13px; cursor:pointer; box-shadow:0 8px 22px rgba(226,186,0,.22); transition:.2s; }
.submitButton:hover { transform:translateY(-1px); filter:brightness(.97); }
.submitButton:disabled { opacity:.65; cursor:wait; }
.submitButton span { font-size:20px; line-height:1; }
.privacyNote { text-align:center; margin:10px 0 0; color:#898391; font-size:9px; }
.errorMessage { color:#b42318; background:#fff1f0; padding:8px 10px; border-radius:8px; font-size:11px; margin:10px 0 0; }
.successBox { text-align:center; padding:30px 12px 16px; }
.successBox>span { width:64px; height:64px; margin:auto; display:grid; place-items:center; border-radius:50%; background:var(--yellow); color:var(--burgundy); font-size:32px; font-weight:900; }
.successBox h3 { font-size:29px; margin:18px 0 8px; }
.successBox p { color:var(--muted); line-height:1.6; }
.successBox button { border:0; border-radius:10px; padding:12px 18px; background:var(--ink); color:#fff; font-weight:700; cursor:pointer; }
.regulation { padding:54px max(8vw,34px); background:var(--regulation-red); color:#fff; }
.regulation>span { color:var(--yellow); font-size:10px; font-weight:900; letter-spacing:2px; }
.regulation h2 { margin:8px 0 14px; font-size:30px; letter-spacing:-.8px; }
.regulation p { max-width:1080px; margin:0; color:#f3dddd; font-size:14px; line-height:1.8; }
.regulation p+p { margin-top:14px; }
.regulation .regulationLead { color:#fff; font-weight:800; font-size:15px; }
footer { min-height:54px; padding:16px 34px; display:flex; align-items:center; justify-content:space-between; max-width:1240px; margin:auto; color:#817b89; font-size:11px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; background:linear-gradient(180deg,var(--cream) 0,#fffdf8 42%,#fff 42.1%,#fff 100%); gap:52px; padding-top:54px; } .heroCopy { justify-self:center; padding:0; text-align:center; } .heroCopy>p { margin:auto; } .benefits>strong { margin:auto; } .discountCards { justify-content:center; } .formCard { justify-self:center; } }
@media (max-width:560px) { .topbar { height:76px; padding:0 18px; } .brand { gap:9px; } .officialLogo { width:112px; height:50px; } .brandDivider { height:28px; } .clubPetLogo { width:124px !important; max-width:124px; height:34px; flex-basis:124px; } .secure { display:none; } .hero { padding:40px 16px 52px; background:linear-gradient(180deg,var(--cream) 0,#fffdf8 40%,#fff 40.1%,#fff 100%); } .hero h1 { font-size:48px; letter-spacing:-2.5px; } .heroCopy>p { font-size:15px; } .discountCards { gap:8px; } .discountCards span { min-width:0; flex:1; padding:12px; } .discountCards b { font-size:20px; } .formCard { padding:25px 19px; border-radius:19px; } .formHeading { min-height:125px; padding-right:115px; } .formMascot { width:105px; right:0; top:-54px; } .fieldGrid { grid-template-columns:1fr; } .fieldGrid .full { grid-column:auto; } .regulation { padding:40px 20px; } footer { flex-direction:column; gap:5px; text-align:center; } }