*{margin:0;padding:0;box-sizing:border-box}

:root{
    --navy-top:#26307a;
    --navy-1:#1d2a72;
    --navy-2:#16205f;
    --navy-3:#101a4d;
    --navy-deep:#0b1338;
    --navy-card:#1a2570;
    --navy-tile:#172a6e;
    --tile-1:#1e2a86;
    --tile-2:#15206e;
    --line:rgba(255,255,255,.12);
    --blue-bright:#2f6fd6;
    --blue-soft:#5a8ee8;
    --orange:#f15a22;
    --orange-deep:#d8470f;
    --orange-hover:#ff6f33;
    --gold:#ffd566;
    --white:#fff;
    --text-body:#b9c2e6;
    --text-muted:#8b95c2;
    --shadow:0 18px 50px rgba(0,0,0,.45);
    --shadow-sm:0 8px 24px rgba(0,0,0,.32);
}

html{scroll-behavior:smooth}
body{
    font-family:'Open Sans',sans-serif;
    background:#0b1338;
    color:var(--text-body);
    min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
}

/* === BACKGROUND === */
.page-bg{
    position:fixed;inset:0;z-index:0;
    background:linear-gradient(180deg,#26307a 0%,#1a2566 22%,#131d54 55%,#0d1644 100%);
}
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(100px);opacity:.18;animation:float 10s ease-in-out infinite alternate}
.orb-1{width:480px;height:480px;background:#2f6fd6;top:-160px;left:-120px;animation-duration:12s}
.orb-2{width:380px;height:380px;background:#f15a22;bottom:-120px;right:-100px;opacity:.1;animation-duration:15s;animation-delay:2s}
.orb-3{width:320px;height:320px;background:#3f82ec;top:45%;left:65%;opacity:.1;animation-duration:17s;animation-delay:4s}
@keyframes float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(28px,-36px) scale(1.07)}}

.wrapper{position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh}

/* === HEADER === */
.header{
    padding:14px 30px;
    background:rgba(13,22,68,.55);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:100;transition:background .3s;
}
.header:hover{background:rgba(13,22,68,.8)}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;width:100%;gap:20px}

/* Logo + FIFA badge */
.logo{display:flex;align-items:center;user-select:none;cursor:pointer;flex-shrink:0;position:relative}
.logo img{height:38px;width:auto;filter:drop-shadow(0 0 10px rgba(241,90,34,.55));transition:filter .3s,transform .3s}
.logo:hover img{filter:drop-shadow(0 0 16px rgba(241,90,34,.85));transform:scale(1.08)}
.fifa-badge{position:absolute;top:-10px;right:-26px;transform:rotate(8deg);transform-origin:center;font-family:'Montserrat',sans-serif;font-weight:800;font-size:9px;letter-spacing:.5px;line-height:1;white-space:nowrap;color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-deep));padding:3px 6px;border-radius:5px;box-shadow:0 3px 8px rgba(241,90,34,.45);pointer-events:none;transition:transform .3s}
.logo:hover .fifa-badge{transform:rotate(8deg) scale(1.08)}

/* Header right: store badges + register */
.header-right{display:flex;align-items:center;gap:14px}
.store-badges{display:flex;align-items:center;gap:8px}
.store-icon{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:9px;
    background:rgba(0,0,0,.35);border:1px solid var(--line);
    color:#fff;transition:all .25s;
}
.store-icon:hover{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.35);transform:translateY(-2px)}

.btn{border:none;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:.4px;border-radius:8px;padding:10px 24px;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:all .28s cubic-bezier(.25,.8,.25,1)}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,transparent 60%);opacity:0;transition:opacity .3s}
.btn:hover::after{opacity:1}
.btn-register{background:linear-gradient(135deg,var(--orange) 0%,var(--orange-deep) 100%);color:#fff;box-shadow:0 6px 18px rgba(241,90,34,.4)}
.btn-register:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(241,90,34,.55)}
.btn-register:active{transform:translateY(0)}

/* === MAIN === */
.main{flex:1;padding:28px 30px 50px;display:flex;justify-content:center;position:relative;z-index:1}
.content-card{max-width:1100px;width:100%;position:relative;animation:cardIn .6s ease-out}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* === PROMO BANNER === */
.promo-banner{
    position:relative;border-radius:16px;overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    background:#16205f;
    box-shadow:var(--shadow);margin-bottom:14px;
    min-height:230px;display:flex;align-items:center;
}
.promo-banner-bg{
    position:absolute;inset:0;z-index:0;
    background:
        radial-gradient(circle at 88% 50%, rgba(47,111,214,.45) 0%, transparent 45%),
        repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 26px),
        linear-gradient(120deg,#1f3aa6 0%,#182a8e 45%,#13206f 100%);
}
/* user-supplied banner image layer (set via {{BANNER_IMAGE}}); empty = transparent, fallback shows */
.promo-banner-img{
    position:absolute;inset:0;z-index:1;
    background-size:cover;background-position:center;background-repeat:no-repeat;
}
/* readability scrim so white text stays legible over any photo */
.promo-banner-img::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(13,22,68,.78) 0%, rgba(13,22,68,.5) 45%, rgba(13,22,68,.18) 100%);
}
/* decorative ball — shown only with the CSS fallback (no custom image) */
.promo-banner-bg::after{
    content:'';position:absolute;right:6%;top:50%;transform:translateY(-50%);z-index:0;
    width:150px;height:150px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff 0 12%,#e9e9e9 18%,#bcbcbc 40%,#8d8d8d 70%);
    box-shadow:inset -8px -10px 22px rgba(0,0,0,.45),0 14px 30px rgba(0,0,0,.4);
    opacity:.92;
}
/* hide the ball + scrim when a non-empty image URL is present */
.promo-banner:has(.promo-banner-img[style*="url('http"]) .promo-banner-bg::after,
.promo-banner:has(.promo-banner-img[style*="url('assets"]) .promo-banner-bg::after,
.promo-banner:has(.promo-banner-img[style*="url('/"]) .promo-banner-bg::after,
.promo-banner:has(.promo-banner-img[style*="url('."]) .promo-banner-bg::after{display:none}
/* if image is empty, remove the dark scrim so the fallback art reads naturally */
.promo-banner-img:not([style*="url('http"]):not([style*="url('assets"]):not([style*="url('/"]):not([style*="url('."])::before{display:none}
.promo-banner-inner{position:relative;z-index:2;width:100%;text-align:center;padding:34px 30px}
.promo-banner-title{
    font-family:'Montserrat',sans-serif;font-weight:900;
    font-size:38px;line-height:1.1;color:#fff;text-transform:uppercase;
    text-shadow:0 3px 14px rgba(0,0,0,.4);margin:0 auto 12px;max-width:620px;
}
.promo-banner-sub{color:rgba(255,255,255,.9);font-size:16px;margin-bottom:22px}

/* === CTA BUTTON === */
.cta-btn{
    display:inline-block;background:linear-gradient(135deg,var(--orange) 0%,var(--orange-deep) 100%);
    color:#fff;text-decoration:none;padding:14px 46px;border-radius:8px;
    font-family:'Montserrat',sans-serif;font-size:15px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
    position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(241,90,34,.4);
    transition:all .3s cubic-bezier(.25,.8,.25,1);
}
.cta-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}
.cta-btn:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(241,90,34,.55)}
.cta-btn:hover::before{left:100%}
.cta-btn:active{transform:translateY(0)}
.cta-btn.cta-sm{padding:11px 26px;font-size:13px}

/* === CATEGORY TILES === */
.cat-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:0 0 34px}
.cat-tile{
    display:flex;align-items:center;gap:12px;
    background:linear-gradient(135deg,var(--tile-1),var(--tile-2));
    border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:14px 16px;
    color:#fff;text-decoration:none;
    font-family:'Montserrat',sans-serif;font-weight:700;font-size:12.5px;line-height:1.2;
    transition:all .26s;
}
.cat-tile:hover{transform:translateY(-3px);border-color:rgba(90,142,232,.6);box-shadow:0 12px 28px rgba(0,0,0,.4)}
.cat-tile.active{background:linear-gradient(135deg,var(--orange),var(--orange-deep));border-color:transparent;box-shadow:0 8px 22px rgba(241,90,34,.4)}
.cat-ico{flex-shrink:0;width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.cat-tile.active .cat-ico{background:rgba(255,255,255,.22)}
.cat-ico svg{width:20px;height:20px;color:#fff}

/* === SECTION TITLES / TEXT === */
.section-title{font-family:'Montserrat',sans-serif;font-weight:800;font-size:26px;color:#fff;text-align:center;margin:34px 0 18px;line-height:1.3}
.intro-text{font-size:14.5px;line-height:1.8;color:var(--text-body);text-align:center;max-width:1040px;margin:0 auto 22px}

/* === INFO TABLE === */
.info-table{width:100%;margin:6px 0 30px;border-collapse:separate;border-spacing:0;border:1px solid rgba(255,255,255,.18);border-radius:8px;overflow:hidden;font-size:14px}
.info-table td{padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.1);line-height:1.5}
.info-table td:first-child{width:38%;color:#fff;font-weight:600;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.info-table td:last-child{color:var(--text-body);text-align:center}
.info-table tr:last-child td{border-bottom:none}
.info-table tr:nth-child(odd){background:rgba(255,255,255,.04)}
.info-table tr:nth-child(even){background:rgba(255,255,255,.07)}
.info-table tr{transition:background .2s}
.info-table tr:hover{background:rgba(47,111,214,.18)}

/* === PROMO WC-2026 === */
.promo-wc{
    display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
    background:linear-gradient(120deg,#1c2e8a 0%,#15217a 100%);
    border:1px solid rgba(255,255,255,.12);border-radius:14px;overflow:hidden;
    margin:30px 0;box-shadow:var(--shadow);
}
.promo-wc-text{padding:34px 38px;display:flex;flex-direction:column;justify-content:center}
.promo-wc-text h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:25px;color:#fff;text-transform:uppercase;line-height:1.2;margin-bottom:14px}
.promo-wc-text p{color:rgba(255,255,255,.88);font-size:15px;margin-bottom:18px;line-height:1.4}
.promo-wc-art{position:relative;overflow:hidden;background:linear-gradient(135deg,#14a8c9,#2b3da8);min-height:170px}
/* user-supplied promo image layer (set via {{PROMO_IMAGE}}); empty = transparent, fallback shows */
.promo-wc-img{position:absolute;inset:0;z-index:2;background-size:cover;background-position:center;background-repeat:no-repeat}
.promo-wc-art .b{position:absolute;border-radius:50%;opacity:.9}
.promo-wc-art .b1{width:90px;height:90px;background:#14b8a6;top:-10px;left:6%}
.promo-wc-art .b2{width:70px;height:70px;background:#f59e0b;top:40%;left:0}
.promo-wc-art .b3{width:80px;height:80px;background:#ef4444;bottom:-15px;left:22%}
.promo-wc-art .b4{width:100px;height:100px;background:#eab308;top:-20px;right:18%}
.promo-wc-art .b5{width:75px;height:75px;background:#22c55e;bottom:-10px;right:6%}
.promo-wc-art .b6{width:60px;height:60px;background:#a855f7;top:38%;right:30%}
/* hide colorful circles when a non-empty promo image URL is present */
.promo-wc-art:has(.promo-wc-img[style*="url('http"]) .b,
.promo-wc-art:has(.promo-wc-img[style*="url('assets"]) .b,
.promo-wc-art:has(.promo-wc-img[style*="url('/"]) .b,
.promo-wc-art:has(.promo-wc-img[style*="url('."]) .b{display:none}

/* === SUPPORT LIST === */
.support-list{list-style:none;max-width:1040px;margin:8px auto 24px;padding:0}
.support-list li{position:relative;padding-left:26px;margin-bottom:11px;font-size:14.5px;line-height:1.6;color:var(--text-body)}
.support-list li::before{content:'';position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px rgba(241,90,34,.55)}

/* === FAQ === */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:1100px;margin:14px auto 0}
.faq-item{background:linear-gradient(135deg,#1d2a82,#15216e);border:1px solid rgba(255,255,255,.12);border-radius:9px;overflow:hidden;transition:border-color .25s}
.faq-item:hover{border-color:rgba(90,142,232,.5)}
.faq-item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 24px;color:#fff;font-family:'Montserrat',sans-serif;font-weight:600;font-size:14.5px}
.faq-item > summary::-webkit-details-marker{display:none}
.faq-item > summary::after{content:'+';font-size:24px;font-weight:300;line-height:1;color:#fff;transition:transform .3s;flex-shrink:0}
.faq-item[open] > summary::after{transform:rotate(45deg)}
.faq-answer{padding:0 24px 18px;color:var(--text-body);font-size:14px;line-height:1.75}

/* ====== GENERATOR {{content}} typography (inner pages + SEO block) ====== */
.content-card h2:not(.section-title):not(.promo-wc-text h2){font-family:'Montserrat',sans-serif;font-size:24px;font-weight:800;color:#fff;margin:34px 0 16px;text-align:center;line-height:1.3}
.content-card h3{font-family:'Montserrat',sans-serif;font-size:19px;font-weight:700;color:#fff;margin:26px 0 12px;line-height:1.4}
.content-card h4{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:#fff;margin:20px 0 10px}
.content-card p{font-size:14.5px;line-height:1.8;color:var(--text-body);margin-bottom:16px}
.content-card strong{color:#fff;font-weight:700}
.content-card a.text-link{color:var(--blue-soft);text-decoration:none;font-weight:600}
.content-card a.text-link:hover{color:#fff;text-decoration:underline}
.content-card>ul,.content-card>ol{margin:14px auto 20px;padding-left:0;list-style:none;max-width:1040px}
.content-card>ul li,.content-card>ol li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14.5px;line-height:1.7;color:var(--text-body)}
.content-card>ul li::before{content:'';position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--orange);box-shadow:0 0 8px rgba(241,90,34,.5)}
.content-card>ol{counter-reset:c}
.content-card>ol li{counter-increment:c}
.content-card>ol li::before{content:counter(c);position:absolute;left:0;top:0;width:23px;height:23px;border-radius:6px;background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.content-card table:not(.info-table){width:100%;margin:22px 0;border-collapse:separate;border-spacing:0;border:1px solid rgba(255,255,255,.18);border-radius:8px;overflow:hidden;font-size:14px}
.content-card table:not(.info-table) th{background:linear-gradient(135deg,var(--orange),var(--orange-deep));color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;padding:13px 18px;text-align:left}
.content-card table:not(.info-table) td{padding:11px 18px;color:var(--text-body);border-bottom:1px solid rgba(255,255,255,.1)}
.content-card table:not(.info-table) tr:nth-child(even){background:rgba(255,255,255,.05)}

/* inner-page page image */
.page-image{margin:0 auto 26px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.04);box-shadow:var(--shadow);max-width:1000px}
.page-image img{display:block;width:100%;max-height:500px;object-fit:cover}

/* inner content card gets a subtle panel */
.content-card--inner{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:16px;padding:36px 44px}
.content-card--inner .section-title{margin-top:0}

/* === FOOTER === */
.footer{background:linear-gradient(180deg,rgba(28,42,110,.55) 0%,rgba(13,22,68,.9) 100%);border-top:1px solid var(--line);position:relative;margin-top:20px}
.footer-main{display:grid;grid-template-columns:1.4fr .9fr 1fr;gap:40px;padding:46px 30px 36px;max-width:1100px;margin:0 auto;align-items:start}
.footer-brand .logo{display:inline-block;margin-bottom:18px}
.footer-brand .logo img{height:40px;width:auto}
.footer-support{margin-bottom:18px}
.footer-support h4,.footer-social-block h4{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:700;color:#fff;margin-bottom:8px}
.footer-email{color:var(--text-body);text-decoration:underline;font-size:14px;transition:color .2s}
.footer-email:hover{color:var(--orange)}
.footer-social{display:flex;gap:10px;margin-top:4px}
.social-link{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text-muted);transition:all .3s}
.social-link:hover{background:var(--orange);color:#fff;border-color:var(--orange);transform:translateY(-2px);box-shadow:0 8px 18px rgba(241,90,34,.35)}

.footer-links{padding-top:6px}
.footer-links ul{list-style:none}
.footer-links li{margin-bottom:10px}
.footer-links a{color:var(--text-body);text-decoration:none;font-size:14px;transition:color .2s}
.footer-links a:hover{color:#fff}

.footer-pay{padding-top:6px}
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:220px;margin-left:auto}
.pay-badge{
    display:flex;align-items:center;justify-content:center;height:38px;border-radius:7px;
    background:#fff;color:#1a2570;
    font-family:'Montserrat',sans-serif;font-weight:800;font-size:12px;letter-spacing:.3px;
    box-shadow:0 4px 12px rgba(0,0,0,.25);transition:transform .25s;
}
.pay-badge:hover{transform:translateY(-2px)}

.footer-disclaimer{padding:22px 30px;max-width:1100px;margin:0 auto;border-top:1px solid var(--line)}
.footer-disclaimer p{font-size:12px;line-height:1.7;color:var(--text-muted);text-align:center}
.footer-disclaimer a{color:var(--text-body);text-decoration:underline}
.footer-disclaimer a:hover{color:#fff}
.footer-bottom{padding:16px 30px;border-top:1px solid var(--line);text-align:center}
.footer-bottom p{font-size:12px;color:var(--text-muted)}
.footer-bottom a{color:var(--text-body);text-decoration:underline}
.footer-bottom a:hover{color:#fff}

/* Scroll to top */
.scroll-top{position:fixed;bottom:30px;right:30px;width:46px;height:46px;border-radius:12px;background:var(--orange);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(241,90,34,.45);transition:all .3s;opacity:0;pointer-events:none;z-index:90}
.scroll-top.visible{opacity:1;pointer-events:all}
.scroll-top:hover{background:var(--orange-hover);transform:translateY(-2px)}

/* === BURGER === */
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;width:40px;height:40px;padding:6px;z-index:200;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:24px;height:2.5px;background:#fff;border-radius:3px;transition:all .35s cubic-bezier(.4,.01,.165,.99);transform-origin:center}
.burger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* === MOBILE OVERLAY === */
.mobile-overlay{display:none;position:fixed;inset:0;z-index:150;background:rgba(13,22,68,.98);backdrop-filter:blur(20px);flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .35s ease;pointer-events:none}
.mobile-overlay.open{display:flex;opacity:1;pointer-events:all}
.mobile-overlay .mobile-nav{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:30px}
.mobile-overlay .mobile-nav a{color:var(--text-body);text-decoration:none;font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;letter-spacing:.5px;padding:12px 30px;border-radius:12px;transition:all .3s}
.mobile-overlay .mobile-nav a:hover,.mobile-overlay .mobile-nav a.active{color:#fff;background:rgba(255,255,255,.08)}
.mobile-overlay .mobile-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.mobile-overlay .mobile-actions .btn{width:250px;justify-content:center;font-size:14px;padding:14px 30px}

/* === RESPONSIVE === */
@media(max-width:900px){
    .cat-tiles{grid-template-columns:repeat(2,1fr)}
    .promo-wc{grid-template-columns:1fr}
    .promo-wc-art{min-height:160px;order:-1}
    .footer-main{grid-template-columns:1fr;gap:28px;padding:34px 20px 28px}
    .pay-grid{margin-left:0;max-width:260px}
}
@media(max-width:768px){
    .burger{display:flex}
    .header{padding:12px 16px}
    .store-badges{display:none}
    .promo-banner-title{font-size:26px}
    .section-title{font-size:21px}
    .promo-banner-bg::after{width:100px;height:100px;right:4%}
    .main{padding:22px 14px 40px}
    .content-card--inner{padding:26px 20px}
    .info-table{font-size:13px}
    .info-table td{padding:9px 12px}
    .cta-btn{padding:13px 34px;font-size:13px}
}
@media(max-width:560px){
    .cat-tiles{grid-template-columns:1fr}
    .header-right{gap:10px}
}
@media(max-width:420px){
    .logo img{height:32px}
    .btn-register{padding:9px 16px;font-size:12px}
}