/* MRWINNER444 REFERENCE DESIGN V2
   Approved visual direction: royal black / warm gold / discreet velvet green.
   Deeper image-led visuals, tighter rhythm, no fake financial promises.
*/
:root{--bg:#070907;--surface:#0b100b;--panel:#0e1510;--line:rgba(232,184,95,.33);--gold:#e4be73;--gold-light:#fae2ae;--green:#0d2419;--ink:#fff1d3;--muted:#aab0a4}
body{background:#050806;color:#f3eee5}
.site-header{height:67px;border-bottom:1px solid rgba(221,179,101,.45);background:rgba(5,7,5,.97);box-shadow:0 3px 26px rgba(0,0,0,.3)}
.site-header-inner{max-width:1460px}
.brand{font-size:25px;letter-spacing:-.04em}
.brand-crown{font-size:34px}
.nav-main{gap:23px}
.nav-link{font-size:12px}
.header-actions .btn{padding:10px 15px}
.hero{min-height:0;height:510px;background:radial-gradient(ellipse at 80% 36%,#443116 0%,#0b0f0a 58%,#050805 100%);border-bottom:1px solid rgba(248,190,89,.65)}
.hero-art{width:68%;height:100%;top:0;right:0;background-image:url('/static/assets/hero-reference.webp');background-position:50% 29%;background-size:cover;filter:saturate(.85) sepia(.08) contrast(1.12);transform:scale(1.01)}
.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,4,3,.26),transparent 38%),linear-gradient(90deg,rgba(6,9,6,.5),transparent 42%)}
.hero-vignette{background:linear-gradient(90deg,#050906 0%,rgba(5,9,6,.98) 26%,rgba(5,9,6,.88) 36%,rgba(5,9,6,.27) 57%,rgba(5,9,6,.04) 82%),linear-gradient(0deg,rgba(4,8,5,.42),transparent 27%)}
.hero-layout{max-width:1460px}
.hero-copy{padding:30px 0 48px;max-width:620px}
.hero .eyebrow{font-size:10px;letter-spacing:.34em;color:#eccb8d}
.hero h1{font-size:clamp(48px,4.5vw,70px);text-transform:uppercase;letter-spacing:-.015em;font-weight:700;line-height:1.08;margin:17px 0 16px;color:#fae7b9;text-shadow:0 3px 4px #000,0 0 40px rgba(0,0,0,.67)}
.hero h1 em{color:#e8bc6b}
.hero p{max-width:415px;line-height:1.6;font-size:14px;color:#ede6d6;margin-bottom:23px;text-shadow:0 1px 5px black}
.hero-actions .btn-gold{box-shadow:0 1px 0 #fff6cb inset,0 8px 24px #02020164}
.hero-footnotes{margin-top:30px;font-size:11px;gap:18px}
.hero-footnotes i{color:#f4cb7e;font-size:18px}
.hero-ornament{position:absolute;right:7%;top:16%;width:39px;height:39px;border:1px solid rgba(255,217,139,.8);border-radius:50%;opacity:.8}
.hero-ornament:before{content:"›";font:27px Georgia,serif;color:#ffe0a0;position:absolute;top:-3px;left:14px}
.hero-indicators{position:absolute;right:11%;bottom:19px;display:flex;align-items:center;gap:7px}
.hero-indicators span{display:block;width:6px;height:6px;background:#f5dfa3;border-radius:50%;opacity:.45}.hero-indicators span.on{opacity:1;width:20px;border-radius:8px}
.container{width:min(1460px,calc(100% - 100px))}
.section-pad{padding-block:46px}
.quick-perks{padding:12px 0 14px;background:#080d09;border-bottom:1px solid rgba(213,159,81,.45)}
.perks-grid{gap:13px}
.perk{height:187px;min-height:0;border-radius:8px;border:1px solid rgba(244,182,78,.55);padding:0;background:radial-gradient(ellipse at 5% 65%,#244327 0%,#0a100b 66%);position:relative;box-shadow:0 9px 35px #0007;display:flex;align-items:center;overflow:hidden;justify-content:flex-end}
.perk:before{opacity:.25;background:linear-gradient(130deg,rgba(255,220,123,.11),transparent 38%),radial-gradient(circle at 70% 100%,rgba(210,165,78,.22),transparent 60%)}
.perk:after{content:"";height:1px;position:absolute;left:8px;right:8px;top:7px;background:linear-gradient(90deg,transparent,rgba(250,201,107,.65),transparent)}
.perk:hover{transform:translateY(-3px);background:linear-gradient(130deg,#173020,#0b120d);border-color:#efc077}
.perk-media{position:absolute;inset:-9px auto -8px -18px;width:49%;display:grid;place-items:center;z-index:1;pointer-events:none;filter:drop-shadow(0 6px 12px rgba(236,175,60,.15))}
.perk-media img{width:100%;height:100%;object-fit:contain;transform:scale(1.1)}
.perk-words{position:relative;z-index:2;width:62%;padding:22px 20px 17px 14px;text-align:left;margin-left:auto;background:linear-gradient(90deg,rgba(4,7,5,.03),rgba(4,7,5,.81) 12%,rgba(5,9,5,.89) 85%)}
.perk strong{font:700 22px/1.1 var(--serif);text-transform:uppercase;color:#ffe0a3;text-shadow:0 2px 9px #000}
.perk small{font-size:11px;color:#e6d8c3;line-height:1.4;margin-top:10px;min-height:31px}
.perk-cta{display:inline-flex;justify-content:space-between;align-items:center;gap:15px;background:linear-gradient(120deg,#f5e4b5,#d5a858);color:#150f06;padding:7px 12px;border-radius:4px;margin-top:11px;font-size:10px;font-weight:800}
.perk-cta b{font-size:15px}
.games-section{background:linear-gradient(180deg,#070b08,#050907)}
.section-heading{margin-bottom:16px;align-items:center}
.section-heading .small-eyebrow{font-size:9px;margin-bottom:6px;letter-spacing:.26em}
.section-heading h2{font-size:31px;line-height:1.24;color:#efd39a;font-weight:700;text-transform:uppercase}
.section-heading p{margin-top:6px;font-size:11px;color:#b1b4a8}
.chip-strip{padding-bottom:15px;gap:7px}
.chip{font-size:10px;padding:6px 12px;border-color:rgba(198,166,109,.29);background:#0c130e}
.games-grid{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.game-card{padding-bottom:7px}
.game-image-wrap{aspect-ratio:1.27;border-radius:7px;border:1px solid rgba(219,161,70,.65);box-shadow:inset 0 0 0 1px rgba(255,211,128,.07),0 2px 5px #000a}
.game-image{filter:saturate(1.05)}
.game-title{margin-top:7px;font-size:11px}
.game-provider{font-size:9px}
.favorite-button{top:5px;right:5px;width:23px;height:23px;font-size:15px}
.vip-spotlight{background:radial-gradient(ellipse at 45% 52%,#1830214f,transparent 50%),linear-gradient(100deg,#0a160f,#10170e 48%,#070b08);padding-block:30px 34px;border-block:1px solid rgba(238,185,100,.48);position:relative;overflow:hidden}
.vip-spotlight:before{content:"";pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent,transparent 130px,rgba(181,128,49,.055) 130px,rgba(181,128,49,.055) 131px)}
.vip-grid{position:relative;z-index:1;grid-template-columns:1fr 1.1fr .79fr;min-height:285px;gap:20px}
.vip-copy .small-eyebrow{margin-bottom:8px}
.vip-copy h2{font:700 clamp(33px,3.25vw,48px)/1.16 var(--serif);color:#f7d8a2}
.vip-copy h2 em{color:#f9ce78}
.vip-copy p{font-size:13px;line-height:1.65}
.vip-visual{min-height:260px}
.vip-scene-photo{position:absolute;inset:0;background:url('/static/assets/vip-reference.webp') center/cover no-repeat;opacity:.28;filter:blur(1.1px) saturate(.77);mix-blend-mode:screen}
.vip-card{width:min(340px,94%);height:205px;transform:rotate(-7deg);border-radius:10px;border:1px solid #c89437;box-shadow:0 28px 60px rgba(0,0,0,.9),0 4px 20px rgba(234,174,77,.14),inset 0 0 0 2px rgba(242,196,108,.14);background:linear-gradient(130deg,#111713 0%,#080a08 45%,#1d2118 72%,#070907 100%)}
.vip-card:before{border-color:rgba(240,200,110,.39)}
.vip-card strong{font-size:62px;color:#f4c96d;text-shadow:0 2px 6px #24160a}
.vip-card-crown{font-size:41px}
.vip-benefits{border-left:1px solid rgba(238,185,99,.4)}
.vip-benefits>div{padding:12px 0}
.vip-benefits strong{color:#f2d598;font-size:15px}
.vip-benefits small{font-size:10px}
.feature-promo{padding-block:37px;background:linear-gradient(90deg,#0b1710,#101009,#0a120d)}
.feature-promo-content{min-height:220px;grid-template-columns:.6fr 1fr .65fr}
.orbit-circle{width:160px;height:160px;box-shadow:0 0 0 4px rgba(201,161,74,.17),0 0 0 9px rgba(120,71,11,.17),inset 0 0 40px rgba(191,137,56,.2)}
.orbit-circle span{font-size:88px}
.promo-story h2{font-size:40px}
.promo-story p{font-size:12px}
.promo-stat strong{font-size:36px}
.provider-name{height:62px;min-width:147px;font-family:var(--serif);color:#f2e6d0;border:1px solid rgba(199,153,82,.34);background:linear-gradient(120deg,#0b140d,#0b0b09)}
.providers-section{padding-block:39px;border-bottom:1px solid rgba(219,174,80,.45)}
.jackpot-section{padding:29px 0;overflow:hidden;position:relative;border-block:1px solid rgba(229,170,81,.49);background:radial-gradient(ellipse at 45% 52%,rgba(153,97,26,.28),transparent 37%),linear-gradient(94deg,#0b120c,#211707 47%,#0d160e)}
.jackpot-section:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(110deg,transparent,transparent 120px,rgba(222,176,97,.05) 121px,transparent 122px);pointer-events:none}
.jackpot-layout{min-height:145px;display:grid;grid-template-columns:1fr 1fr auto;gap:27px;align-items:center;position:relative}
.jackpot-copy h2{font:700 36px/1.05 var(--serif);text-transform:uppercase;margin:4px 0;color:#ecd096}
.jackpot-copy h2 em{font-style:normal;color:#ffd785}
.jackpot-copy p{font-size:12px;color:#d0c6aa;margin:8px 0 0}
.jackpot-medallion{justify-self:center;display:flex;align-items:center;gap:17px;color:#f0c87d;filter:drop-shadow(0 0 12px rgba(205,146,50,.4))}
.jackpot-medallion span{font-size:66px}
.jackpot-medallion strong{font:700 58px var(--serif);letter-spacing:-.1em}
.jackpot-medallion small{font:700 10px var(--sans);letter-spacing:.3em}
.mobile-showcase{background:linear-gradient(100deg,#0b120d 0%,#09100b 45%,#17170b 100%);padding:48px 0 0;border-bottom:1px solid var(--line);overflow:hidden}
.mobile-showcase-layout{display:grid;grid-template-columns:1.3fr .8fr .85fr;gap:25px;align-items:center;min-height:282px}
.mobile-copy h2{font:700 37px/1.15 var(--serif);margin:8px 0;color:#ebd3a2;text-transform:uppercase}
.mobile-copy h2 em{font-style:normal;color:#e3b663}
.mobile-copy p{font-size:12px;color:#b5b7a7;line-height:1.65;max-width:380px}
.mobile-showcase .btn{margin-top:13px}
.mobile-preview{height:282px;display:flex;justify-content:center;align-items:flex-end;position:relative;perspective:600px}
.preview-phone{width:160px;height:310px;transform:rotate(11deg) translateY(35px);background:linear-gradient(130deg,#192419,#060907);border:6px solid #bf9957;border-radius:25px;box-shadow:12px 13px 45px #000b,0 0 0 2px rgba(248,204,105,.5);padding:10px;color:#e9c67b;text-align:center;position:relative;overflow:hidden}
.phone-camera{background:#000;border-radius:20px;width:47px;height:9px;position:absolute;top:3px;left:50%;transform:translateX(-50%)}
.phone-top{font:700 13px var(--serif);padding:10px 0;border-bottom:1px solid var(--line)}
.phone-head{font:700 12px var(--serif);text-align:left;margin:15px 0 10px}
.phone-game-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:5px}
.phone-game-tiles span{aspect-ratio:1.1;background:#192118 center/cover;border-radius:4px;border:1px solid #735b2b}
.phone-game-tiles span:nth-child(1){background-image:url('https://gator.drakon.casino/storage/drakon/Sweet-Bonanza.webp')}
.phone-game-tiles span:nth-child(2){background-image:url('https://gator.drakon.casino/storage/drakon/Gates-of-Olympus.webp')}
.phone-game-tiles span:nth-child(3){background-image:url('https://gator.drakon.casino/storage/drakon/Big-Bass-Bonanza.webp')}
.phone-game-tiles span:nth-child(4){background-image:url('https://gator.drakon.casino/storage/drakon/Sugar-Rush.webp')}
.phone-bottom{font-size:17px;margin-top:15px}
.mobile-features{display:grid;gap:16px;color:#c4b18c;font-size:13px}
.mobile-features>div{padding-bottom:13px;border-bottom:1px solid var(--line)}
.mobile-features span{color:#e3bd75;margin-right:12px;font-size:21px}
.trust-row{background:#090d09;border-block:1px solid var(--line)}
.trust-inner{display:flex;justify-content:space-between;min-height:77px;gap:23px;align-items:center}
.trust-inner span{display:flex;align-items:center;gap:11px;font-size:12px;color:#ded3b7}
.trust-inner b{font:24px var(--serif);color:#e2b968}
.site-footer{background:linear-gradient(180deg,#050906,#060706)}
.footer-primary{padding-top:44px;padding-bottom:38px;gap:33px}
.footer-brand p{max-width:280px}
.footer-bottom{padding:18px 0}
@media(max-width:1250px){
 .container{width:calc(100% - 60px)}
 .games-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
 .perk strong{font-size:18px}
 .perk-words{width:64%;padding:15px}
 .perk-media{width:53%}
 .hero h1{font-size:57px}
}
@media(max-width:980px){
 .container{width:calc(100% - 40px)}
 .nav-main{top:67px}
 .hero{height:520px}
 .hero-art{width:77%}
 .hero h1{font-size:54px}
 .perks-grid{grid-template-columns:1fr;gap:9px}
 .perk{height:145px}
 .perk-media{width:35%;left:6%;height:100%;top:0}
 .perk-words{width:67%}
 .games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .vip-grid{grid-template-columns:1fr 1.2fr}
 .vip-benefits{grid-column:1/-1;display:flex;padding:0;border-left:0;border-top:1px solid var(--line)}
 .vip-benefits>div{flex:1}
 .mobile-showcase-layout{grid-template-columns:1fr 1fr}
 .mobile-features{grid-column:1/-1;display:flex;gap:24px}
 .mobile-features>div{flex:1}
 .jackpot-layout{grid-template-columns:1fr 1fr}
 .jackpot-layout>.btn{grid-column:2;justify-self:center}
}
@media(max-width:640px){
 .container{width:calc(100% - 30px)}
 .site-header{height:62px}
 .nav-main{top:62px}
 .hero{min-height:620px;height:650px}
 .hero-art{width:100%;height:65%;background-size:cover;background-position:56% 12%;top:0}
 .hero-vignette{background:linear-gradient(0deg,#050806 5%,rgba(5,8,6,.97) 26%,rgba(5,8,6,.37) 69%,rgba(5,8,6,.15)),linear-gradient(90deg,#06090640,transparent)}
 .hero-layout{align-items:flex-end;min-height:640px;padding-bottom:40px}
 .hero-copy{padding:0}
 .hero .eyebrow{font-size:9px}
 .hero h1{font-size:clamp(24px,7.2vw,32px);line-height:1.15;margin:12px 0}
 .hero p{font-size:12px}
 .hero-ornament{right:9%;top:20%}
 .hero-indicators{bottom:9px;right:42%}
 .hero-footnotes{margin-top:19px}
 .quick-perks{padding-block:12px}
 .perk{height:129px}
 .perk-media{width:46%;left:0}
 .perk-words{width:64%;padding:12px 10px}
 .perk strong{font-size:16px}
 .perk small{font-size:10px;margin-top:7px;min-height:25px}
 .perk-cta{font-size:9px;margin-top:7px;padding:5px 9px}
 .section-pad{padding-block:30px}
 .section-heading{flex-direction:column;align-items:flex-start;gap:8px}
 .section-heading h2{font-size:clamp(20px,5.8vw,24px)}
 .section-heading .small-text-link{margin-top:2px}
 .games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .game-image-wrap{aspect-ratio:1.35}
 .vip-grid{grid-template-columns:1fr}
 .vip-spotlight{padding:33px 0}
 .vip-visual{min-height:230px}
 .vip-benefits{grid-column:1;display:grid}
 .vip-benefits>div{padding:11px 0}
 .feature-promo-content{grid-template-columns:1fr}
 .jackpot-layout{grid-template-columns:1fr;text-align:center;gap:12px}
 .jackpot-copy h2{font-size:32px}
 .jackpot-layout>.btn{grid-column:1;justify-self:center}
 .jackpot-medallion{justify-self:center}
 .mobile-showcase-layout{grid-template-columns:1fr}
 .mobile-preview{height:220px;overflow:hidden}
 .preview-phone{transform:rotate(8deg) translateY(76px)}
 .mobile-features{grid-column:1;display:grid;padding-bottom:24px;gap:8px}
 .mobile-features>div{padding-bottom:8px}
 .trust-inner{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-block:20px}
 .trust-inner span{font-size:10px}
 .footer-primary{padding-block:32px}
}
