/*
Theme Name: Win With VARTA
Theme URI: https://winwithvarta.com
Description: Lightweight campaign microsite theme for the Win With VARTA prize draw (iPhone 18 Pro Max). Navy + gold, VARTA brand fonts.
Author: TeamRun
Version: 1.8.22
*/

:root{
  --navy-0:#05081A; --navy-1:#070B24; --navy-2:#0A1140; --navy-3:#10238C;
  --gold:#FFC907; --gold-2:#FFD23F;
  --ink:#EAF0FF; --muted:#AEB8DE; --line:rgba(120,140,255,.22);
  --card:rgba(16,26,66,.55);
  --maxw:1180px; --radius:22px;
  --f-head:"Varta DIN Pro","Myriad Pro",system-ui,sans-serif;
  --f-body:"Myriad Pro",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body); color:var(--ink); line-height:1.6;
  background:var(--navy-0);
  background-image:
    radial-gradient(70% 55% at 20% 0%, rgba(42,70,216,.28), transparent 60%),
    radial-gradient(60% 45% at 100% 12%, rgba(255,201,7,.10), transparent 55%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-2)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---- Header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(5,8,26,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:46px}
@media(max-width:820px){.site-header .brand img{height:34px}}
.nav{display:flex;align-items:center;gap:34px}
.nav a{color:var(--ink);font-weight:600;font-size:15px}
.nav a:hover{color:var(--gold)}
.nav .btn{margin-left:14px}
.btn{display:inline-block;background:var(--gold);color:#0A1140 !important;font-family:var(--f-head);font-weight:800;
  padding:13px 26px;border-radius:100px;font-size:16px;letter-spacing:.01em;transition:.15s;border:0;cursor:pointer}
.btn:hover{background:#fff;color:#101010;transform:translateY(-1px)}
.btn-lg{padding:17px 40px;font-size:19px}
.menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:26px;cursor:pointer}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;padding:70px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.hero .eyebrow{color:var(--gold);font-family:var(--f-head);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:15px;margin-bottom:14px}
.hero h1{font-family:var(--f-head);font-weight:900;line-height:.98;letter-spacing:-.01em;font-size:clamp(40px,6vw,86px)}
.hero h1 .y{color:var(--gold)}
.hero .lead{color:var(--muted);font-size:clamp(17px,2.1vw,21px);margin:22px 0 30px;max-width:34ch}
.hero .cta-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero .note{color:var(--muted);font-size:14px;margin-top:16px}
.hero-media{position:relative}
.hero-media img{width:100%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.5))}

/* ---- Sections ---- */
.section{padding:66px 0}
.section h2{font-family:var(--f-head);font-weight:900;font-size:clamp(30px,4vw,52px);text-align:center;line-height:1.02}
.section .sub{color:var(--muted);text-align:center;max-width:60ch;margin:16px auto 0;font-size:18px}
.section-alt{background:rgba(7,11,36,.55);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---- Steps ---- */






/* ---- Prizes ---- */
.prizes{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px;margin-top:46px}
.prize{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:0;text-align:center;overflow:hidden;display:flex;flex-direction:column}
.prize.hero-prize{border-color:rgba(255,201,7,.5);box-shadow:0 0 0 1px rgba(255,201,7,.25),0 20px 50px rgba(0,0,0,.35)}
.prize .q{font-family:var(--f-head);font-weight:900;color:var(--gold);font-size:44px;line-height:1}
.prize h3{font-family:var(--f-head);font-weight:800;font-size:22px;margin:12px 0 6px}
.prize p{color:var(--muted);font-size:15px}


/* ---- CTA band ---- */
.cta-band{text-align:center;padding:70px 0}
.cta-band h2{font-family:var(--f-head);font-weight:900;font-size:clamp(28px,4vw,46px);margin-bottom:10px}
.cta-band p{color:var(--muted);font-size:18px;margin-bottom:28px}

/* ---- Page content ---- */
.page-hero{padding:60px 0 30px;text-align:center}
.page-hero h1{font-family:var(--f-head);font-weight:900;font-size:clamp(32px,5vw,60px)}
.content{max-width:820px;margin:0 auto;padding:30px 0 70px}
.content h2{font-family:var(--f-head);font-weight:800;font-size:28px;margin:34px 0 12px}
.content h3{font-family:var(--f-head);font-weight:700;font-size:21px;margin:24px 0 8px}
.content p,.content li{color:#D7DEF5;font-size:17px;margin-bottom:12px}
.content ul,.content ol{margin:0 0 16px 22px}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--line);background:rgba(5,8,26,.6);padding:40px 0 30px;margin-top:20px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.site-footer .fnav{display:flex;gap:22px;flex-wrap:wrap}
.site-footer a{color:var(--muted);font-size:14px}
.site-footer a:hover{color:var(--gold)}
.site-footer .legal{color:#6b76a3;font-size:13px;width:100%;margin-top:14px;line-height:1.5}

/* ---- Responsive ---- */
@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;text-align:center}
  .hero-media{order:-1;max-width:420px;margin:0 auto}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .cta-row{justify-content:center}
  .steps{grid-template-columns:1fr}
  .prizes{grid-template-columns:1fr}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;flex-direction:column;background:var(--navy-1);padding:18px 22px;border-bottom:1px solid var(--line);gap:16px}
  .nav.open{display:flex}
  .menu-toggle{display:block}
}

/* ---- Hero full-bleed ---- */
.hero-full{min-height:88vh;display:flex;align-items:center;background-repeat:no-repeat;background-size:cover;background-position:right center;padding:70px 0}
.hero-full .wrap{width:100%}
.hero-full .hero-copy{max-width:56%}
@media(max-width:1100px){.hero-full .hero-copy{max-width:66%}}
@media(max-width:820px){
  .hero-full{min-height:auto;background-size:150% auto;background-position:right -10% bottom;padding-top:40px;padding-bottom:58vw}
  .hero-full .hero-copy{max-width:100%;text-align:center}
  .hero-full .lead{margin-left:auto;margin-right:auto}
  .hero-full .cta-row{justify-content:center}
}

/* ---- Hero video ---- */
.hero-video{position:relative;min-height:calc(100vh - 76px);min-height:calc(100dvh - 76px);display:flex;align-items:center;overflow:hidden;background:#05081A}
.hero-video .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right 62%;z-index:0}
.hero-video .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,8,26,.92) 0%,rgba(5,8,26,.72) 34%,rgba(5,8,26,.15) 56%,transparent 72%)}
.hero-video .wrap{position:relative;z-index:2;width:100%}
.hero-video .hero-copy{max-width:720px}
.hero-video h1{font-size:clamp(42px,5.4vw,72px);line-height:1.02;margin-bottom:6px}
.hero-video .lead{font-size:clamp(18px,1.55vw,23px);max-width:42ch;margin:26px 0 36px}
@media(max-width:1100px){.hero-video .hero-copy{max-width:60%}}
@media(max-width:820px){.hero.hero-video{position:relative;min-height:auto;display:block;overflow:visible;padding:0 0 30px;background:#05081A}.hero.hero-video .hero-bg-masked{display:none}.hero.hero-video .hero-scrim{display:none}.hero.hero-video picture{position:relative;display:block;line-height:0}.hero.hero-video picture::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:24%;background:linear-gradient(180deg,rgba(5,8,26,0) 0%,rgba(5,8,26,.35) 40%,rgba(5,8,26,.78) 66%,#05081A 86%,#05081A 100%);pointer-events:none;z-index:1}.hero.hero-video .hero-bg-static{position:relative!important;inset:auto;display:block;width:100%;max-width:none;height:auto;max-height:none;min-height:0;aspect-ratio:1/1;object-fit:cover;object-position:center 52%;z-index:0;margin:0;border:0;border-radius:0;box-shadow:none;-webkit-mask-image:none;mask-image:none}.hero.hero-video .wrap{position:relative;z-index:2;display:block;width:100%;margin-top:-150px;padding:0 20px}.hero.hero-video .hero-copy{max-width:100%;text-align:center;margin:0 auto}.hero.hero-video .eyebrow{margin-bottom:8px;font-size:14px;text-shadow:0 2px 14px rgba(5,8,26,.95),0 0 4px rgba(5,8,26,.8)}.hero.hero-video h1{font-size:clamp(27px,7vw,38px);text-shadow:0 2px 18px rgba(5,8,26,.9),0 0 6px rgba(5,8,26,.7)}.hero.hero-video .lead{color:#cdd8ee;margin:11px auto 16px;max-width:40ch;font-size:14.5px;line-height:1.42}.hero.hero-video .cta-row{flex-direction:column;align-items:stretch;gap:10px;max-width:320px;margin:0 auto}.hero.hero-video .cta-row .btn{width:100%;justify-content:center;padding:14px}.hero.hero-video .cta-row .btn-ghost{background:rgba(255,255,255,.08)}}
@media(prefers-reduced-motion:reduce){
  .hero-video .hero-bg{display:none}
  .hero-video{background:#05081A var(--poster) right center/cover no-repeat}
}
.hero-video .eyebrow{font-size:17px;letter-spacing:.2em;margin-bottom:20px}
.hero-video .note{font-size:15px;margin-top:20px}
.hero-video .btn-lg{padding:18px 44px;font-size:20px}

.btn-ghost{background:transparent !important;color:#fff !important;border:2px solid rgba(255,255,255,.42);box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.1) !important;color:#fff !important;border-color:#fff;transform:translateY(-1px)}

/* ---- Hero layered (static base + masked video) ---- */
.hero-video .hero-bg-static{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right 62%;z-index:0}
.hero-video .hero-bg-masked{z-index:1;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 64%);mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 64%)}
@media(prefers-reduced-motion:reduce){.hero-video .hero-bg-masked{display:none}}

/* How to enter steps */





.how-cta{text-align:center;margin-top:52px}



/* ---- How to enter (centered, icons) ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:56px}
.step{text-align:center;display:flex;flex-direction:column;align-items:center}
.step-ico{position:relative;width:76px;height:76px;margin-bottom:22px;border-radius:20px;
  background:rgba(255,201,7,.09);border:1px solid rgba(255,201,7,.26);display:flex;align-items:center;justify-content:center}
.step-ico svg{width:36px;height:36px}
.step-b{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:var(--gold);
  color:#0A1140;font-family:var(--f-head);font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(255,201,7,.4)}
.step h3{font-family:var(--f-head);font-weight:800;font-size:22px;margin-bottom:10px}
.step p{color:var(--muted);font-size:16.5px;max-width:32ch}
.how-cta{text-align:center;margin-top:54px}
@media(max-width:820px){.steps{grid-template-columns:1fr;gap:44px}}

/* ---- How to enter (scoped, wins) ---- */
#how h2, #how .sub{text-align:center}
#how .sub{margin-left:auto;margin-right:auto}
#how .steps{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:40px;margin-top:56px}
#how .step{text-align:center !important;display:flex;flex-direction:column;align-items:center;padding:0 !important;border:0 !important;background:none !important}
#how .step + .step{border-left:0 !important;border-top:0 !important}
#how .step-ico{position:relative;width:76px;height:76px;margin:0 auto 22px;border-radius:20px;background:rgba(255,201,7,.09);border:1px solid rgba(255,201,7,.26);display:flex;align-items:center;justify-content:center}
#how .step-ico svg{width:34px !important;height:34px !important}
#how .step-b{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#0A1140;font-family:var(--f-head);font-weight:900;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(255,201,7,.4)}
#how .step h3{font-family:var(--f-head);font-weight:800;font-size:22px;margin:0 0 10px}
#how .step p{color:var(--muted);font-size:16.5px;max-width:34ch;margin:0 auto}
#how .how-cta{text-align:center;margin-top:54px}
@media(max-width:820px){#how .steps{grid-template-columns:1fr !important;gap:44px}}

/* ---- Prize cards with images ---- */
#prizes .prize-img{position:relative;height:300px;background:#060c1e;display:flex;align-items:center;justify-content:center}
#prizes .prize-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;max-height:none;margin:0;border-radius:0}
#prizes .prize-body{padding:26px 24px 30px}
#prizes .hero-prize .prize-img{height:300px}
@media(max-width:820px){#prizes .prize-img,#prizes .hero-prize .prize-img{height:300px}}

/* ---- Entry form ---- */
.enter-section .sub{text-align:center}
.enter-form{position:relative;max-width:none;margin:40px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:40px 44px}
.enter-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.enter-form .field{display:flex;flex-direction:column;gap:7px}
.enter-form label{font-size:14px;color:var(--muted);font-weight:600}
.enter-form input[type=text],.enter-form input[type=email],.enter-form input[type=tel]{width:100%;background:#0a1330;border:1px solid var(--line);border-radius:12px;color:#fff;padding:13px 14px;font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.enter-form input::placeholder{color:#5e6b90}
.enter-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,201,7,.15)}
.enter-form .field.has-err input{border-color:#ff5a5a}
.file-field{margin-top:18px}
.enter-form input[type=file]{position:absolute;left:-9999px}
.file-drop{display:flex;align-items:center;gap:12px;background:#0a1330;border:1.5px dashed #2a3a63;border-radius:12px;padding:16px 18px;cursor:pointer;color:var(--muted);transition:border-color .15s,color .15s}
.file-drop:hover{border-color:var(--gold);color:#fff}
.file-drop svg{flex:0 0 auto;color:var(--gold)}
.file-text{font-weight:600;color:#fff}
.file-name{margin-left:auto;font-size:13px;color:#5e6b90;text-align:right;max-width:55%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-drop.has-file{border-style:solid;border-color:var(--gold)}
.file-drop.has-file .file-name{color:var(--gold)}
.enter-form .check{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#c6d0e6;font-weight:400;margin-top:16px;cursor:pointer}
.enter-form .check input{margin-top:2px;width:18px;height:18px;accent-color:var(--gold);flex:0 0 auto}
.enter-form .check a{color:var(--gold)}
.enter-form .err{color:#ff6b6b;font-size:12.5px}
.enter-form .err-block{display:block;margin:4px 0 0 28px}
.wwv-submit{display:block;width:auto;min-width:280px;margin:28px auto 0}
.wwv-submit:disabled{opacity:.6;cursor:default}
.form-msg{margin-top:14px;text-align:center;font-size:14px}
.form-msg.error{color:#ff6b6b}
.form-success{text-align:center;padding:30px 10px}
.form-success .ok-ico{width:60px;height:60px;border-radius:50%;background:var(--gold);color:#0A1140;font-size:32px;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.form-success h3{font-family:var(--f-head);font-size:22px}
@media(max-width:600px){.field-grid{grid-template-columns:1fr}.enter-form{padding:26px 20px}.file-name{max-width:45%}}
/* ---- Fluent Forms (VARTA theme) ---- */
.enter-form-wrap{max-width:none;margin:40px 0 0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:40px 44px}
.enter-form-wrap .frm-fluent-form fieldset{display:flex;flex-wrap:wrap;gap:2px 26px;border:none;padding:0;margin:0}
.enter-form-wrap .ff_screen_reader_title{flex-basis:100%}
.enter-form-wrap .ff-el-group{flex:1 1 calc(50% - 13px);margin-bottom:16px;min-width:220px}
.enter-form-wrap .ff-el-group:has(input[type=file]),
.enter-form-wrap .ff-el-group:has(.ff-el-form-check-input),
.enter-form-wrap .ff-el-group:has(.ff-btn-submit),
.enter-form-wrap .ff_submit_btn_wrapper,
.enter-form-wrap .ff-message-success{flex-basis:100%}
.enter-form-wrap .ff-el-input--label{margin-bottom:7px}
.enter-form-wrap .ff-el-input--label label{color:var(--muted);font-size:14px;font-weight:600}
.enter-form-wrap .ff-el-form-control{width:100%;background:#0a1330;border:1px solid var(--line);border-radius:12px;color:#fff;padding:13px 14px;font-size:15px;font-family:inherit;line-height:1.3}
.enter-form-wrap .ff-el-form-control:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,201,7,.15);outline:none}
.enter-form-wrap .ff-el-form-control::placeholder{color:#5e6b90}
/* checkboxes */
.enter-form-wrap .ff-el-form-check{display:flex;align-items:flex-start;gap:10px;margin:2px 0}
.enter-form-wrap .ff-el-form-check-input{width:18px;height:18px;accent-color:var(--gold);margin-top:2px;flex:0 0 auto}
.enter-form-wrap .ff-el-form-check-label,.enter-form-wrap .ff-el-form-check label{color:#c6d0e6;font-weight:400;font-size:14px;cursor:pointer}
.enter-form-wrap .ff-el-form-check a{color:var(--gold)}
/* file upload */
.enter-form-wrap .ff-el-group:has(input[type=file]) .ff-el-input--content{background:#0a1330;border:1.5px dashed #2a3a63;border-radius:12px;padding:14px 16px;transition:border-color .15s}
.enter-form-wrap .ff-el-group:has(input[type=file]) .ff-el-input--content:hover{border-color:var(--gold)}
.enter-form-wrap .ff-upload-btn,.enter-form-wrap .ff_upload_btn,.enter-form-wrap .ff-el-group:has(input[type=file]) button{background:#14213f;color:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 16px;font-weight:600;cursor:pointer}
.enter-form-wrap .ff-upload-preview,.enter-form-wrap .ff-uploaded-list{color:var(--muted);font-size:13px}
/* submit */
.enter-form-wrap .ff-el-group:has(.ff-btn-submit){text-align:center}
.enter-form-wrap .ff-btn-submit{background:var(--gold);color:#0A1140;border:none;border-radius:14px;font-family:var(--f-head);font-weight:800;padding:14px 46px;font-size:17px;cursor:pointer;min-width:280px;margin-top:10px;transition:filter .15s}
.enter-form-wrap .ff-btn-submit:hover{filter:brightness(1.06)}
/* validation + messages */
.enter-form-wrap .error-text,.enter-form-wrap .text-danger,.enter-form-wrap .ff-el-is-error em{color:#ff6b6b;font-size:12.5px}
.enter-form-wrap .ff-el-is-error .ff-el-form-control{border-color:#ff5a5a}
.enter-form-wrap .ff-message-success{background:rgba(255,201,7,.08);border:1px solid var(--line);border-radius:14px;color:#fff;padding:26px;text-align:center;font-size:16px}
@media(max-width:600px){.enter-form-wrap{padding:26px 20px}.enter-form-wrap .ff-el-group{flex-basis:100%}}
/* enter section polish */
.enter-section h2{text-align:center}
.enter-form-wrap .ff-el-group:has(input[type=file]) button,
.enter-form-wrap .ff_upload_btn,
.enter-form-wrap .ff-upload-btn,
.enter-form-wrap .ff-el-group:has(input[type=file]) .ff_upload_btn{background:#14213f!important;color:#fff!important;border:1px solid var(--line)!important;border-radius:10px!important;padding:10px 20px!important;font-weight:700!important;cursor:pointer}
.enter-form-wrap .ff-el-group:has(input[type=file]) button:hover,
.enter-form-wrap .ff_upload_btn:hover{border-color:var(--gold)!important}
/* fix browser autofill light background on dark form */
.enter-form-wrap .ff-el-form-control:-webkit-autofill,
.enter-form-wrap .ff-el-form-control:-webkit-autofill:hover,
.enter-form-wrap .ff-el-form-control:-webkit-autofill:focus,
.enter-form-wrap .ff-el-form-control:-webkit-autofill:active{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0 1000px #0a1330 inset !important;
  box-shadow:0 0 0 1000px #0a1330 inset !important;
  caret-color:#fff;
  transition:background-color 9999s ease-in-out 0s;
}
/* ============ PREMIUM PASS ============ */
/* optical typography */
body{font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,.hero-title{letter-spacing:-.02em}
h2{letter-spacing:-.015em}
h3{letter-spacing:-.01em}
h1,h2,h3{text-wrap:balance}
p,.lead,.sub{text-wrap:pretty}
html{scroll-behavior:smooth}

/* micro-interactions */
.btn{transition:transform .1s ease,filter .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.98)}
a,summary{transition:color .15s ease,opacity .15s ease}
#prizes .prize{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s ease,border-color .22s ease}
#prizes .prize:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.4);border-color:rgba(255,201,7,.35)}
#prizes .hero-prize:hover{box-shadow:0 0 0 1px rgba(255,201,7,.45),0 18px 50px rgba(0,0,0,.5)}

/* focus states (accessibility + craft) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,.btn:focus-visible,.ff-btn-submit:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
:focus:not(:focus-visible){outline:none}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important}
  #prizes .prize:hover{transform:none}
}
/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--gold);color:#0A1140;padding:10px 16px;border-radius:0 0 10px 0;font-weight:800;font-family:var(--f-head);text-decoration:none}
.skip-link:focus{left:0}

/* ---- FAQ ---- */
#faq .sub{text-align:center}
#faq .faq-list{max-width:820px;margin:34px auto 0;display:flex;flex-direction:column;gap:12px}
#faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
#faq summary{cursor:pointer;padding:18px 22px;font-family:var(--f-head);font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
#faq summary::-webkit-details-marker{display:none}
#faq summary::after{content:"+";color:var(--gold);font-size:26px;font-weight:700;transition:transform .2s ease;line-height:1}
#faq details[open] summary::after{transform:rotate(45deg)}
#faq details p{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.6;margin:0}
/* ---- Countdown ---- */
.cta-band .cd-label{margin:18px 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.countdown{display:flex;gap:14px;justify-content:center;margin:0 0 28px;flex-wrap:wrap}
.cd-unit{min-width:78px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 10px;display:flex;flex-direction:column;align-items:center}
.cd-n{font-family:var(--f-head);font-weight:900;font-size:36px;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.cd-l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.cd-closed{font-family:var(--f-head);font-weight:800;color:var(--gold);font-size:22px}
@media(max-width:600px){.cd-unit{min-width:62px;padding:10px 8px}.cd-n{font-size:27px}.countdown{gap:10px}}
/* ============ WOW LAYER — "charged" ============ */
#scroll-charge{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));box-shadow:0 0 12px rgba(255,201,7,.65);z-index:1500;pointer-events:none}
.js-anim .hero-copy>*{opacity:0;transform:translateY(18px)}
.js-anim .hero.hero-animate .hero-copy>*{opacity:1;transform:none;transition:opacity .65s cubic-bezier(.2,.7,.2,1),transform .65s cubic-bezier(.2,.7,.2,1)}
.js-anim .hero.hero-animate .hero-copy>*:nth-child(1){transition-delay:.06s}
.js-anim .hero.hero-animate .hero-copy>*:nth-child(2){transition-delay:.16s}
.js-anim .hero.hero-animate .hero-copy>*:nth-child(3){transition-delay:.3s}
.js-anim .hero.hero-animate .hero-copy>*:nth-child(4){transition-delay:.44s}
.js-anim .hero.hero-animate .hero-copy .y{animation:word-charge 1s ease .5s 1 both}
@keyframes word-charge{0%{text-shadow:0 0 0 rgba(255,201,7,0)}45%{text-shadow:0 0 24px rgba(255,201,7,.8)}100%{text-shadow:0 0 0 rgba(255,201,7,0)}}
#prizes .prize{position:relative}
.prize .sheen{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 62%);opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:3}
body.tilt-on #prizes .prize{transition:transform .12s ease,box-shadow .22s ease,border-color .22s ease}
body.tilt-on #prizes .prize:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
body.tilt-on #prizes .prize:hover .sheen{opacity:1}
.cta-band .btn-lg,.enter-form-wrap .ff-btn-submit{position:relative;isolation:isolate}
.cta-band .btn-lg::after,.enter-form-wrap .ff-btn-submit::after{content:"";position:absolute;inset:-3px;border-radius:inherit;box-shadow:0 0 26px 2px rgba(255,201,7,.5);opacity:.26;z-index:-1;pointer-events:none;animation:cta-breath 2.8s ease-in-out infinite}
@keyframes cta-breath{0%,100%{opacity:.2}50%{opacity:.58}}
.cta-band .btn-lg:hover::after,.enter-form-wrap .ff-btn-submit:hover::after{opacity:.8}
.countup{font-variant-numeric:tabular-nums}
/* ---- entry states (before/after window + preview) ---- */
.enter-preview-note{max-width:680px;margin:0 auto 14px;text-align:center;font-size:13px;color:var(--gold);background:rgba(255,201,7,.08);border:1px solid var(--line);border-radius:10px;padding:9px 14px}
.enter-state{text-align:center;padding:48px 32px}
.enter-state-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(255,201,7,.12);color:var(--gold);margin-bottom:10px}
.enter-state h3{font-family:var(--f-head);font-size:24px;margin:4px 0 10px}
.enter-state p{color:var(--muted);max-width:460px;margin:0 auto;line-height:1.6}

/* wwv-fix-prize-tilt: disable 3D tilt + sheen (overlap fix) */
body.tilt-on #prizes .prize:hover{transform:translateY(-4px)!important}
#prizes .prize .sheen{display:none!important}

/* wwv-fix-prize-img-height: override global img{height:auto} reset */
#prizes .prize-img{overflow:hidden}
#prizes .prize-img img{height:300px!important;max-height:300px!important;min-height:300px!important;width:100%!important;object-fit:cover!important;object-position:center!important}
