:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
html { overflow-x: clip; }
body {
background: #050505;
color: #f5f5f5;
font-family: 'Manrope', sans-serif;
overflow-x: clip;
max-width: 100vw;
}
.tabular-nums { font-variant-numeric: tabular-nums; }
.gold-text {
background: linear-gradient(135deg, #F5D77A 0%, #D4AF37 50%, #B8941F 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.gold-bg {
background: linear-gradient(135deg, #F5D77A 0%, #D4AF37 50%, #B8941F 100%);
}
.gold-border {
border: 1px solid transparent;
background: linear-gradient(#0A0A0A, #0A0A0A) padding-box,
linear-gradient(135deg, rgba(245,215,122,0.6), rgba(184,148,31,0.2)) border-box;
}
.gold-glow {
box-shadow: 0 0 30px rgba(212,175,55,0.35), 0 0 60px rgba(212,175,55,0.15);
}
.gold-glow:hover { box-shadow: 0 0 45px rgba(212,175,55,0.55), 0 0 90px rgba(212,175,55,0.25); }
.glass {
background: rgba(20,20,20,0.55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(212,175,55,0.18);
}
.glass:hover { border-color: rgba(212,175,55,0.45); }
.mesh-bg {
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(212,175,55,0.12), transparent 60%),
radial-gradient(ellipse 60% 40% at 90% 30%, rgba(212,175,55,0.08), transparent 60%),
radial-gradient(ellipse 60% 40% at 10% 70%, rgba(212,175,55,0.06), transparent 60%),
#050505;
}
.candles {
background-image:
linear-gradient(180deg, transparent 30%, rgba(212,175,55,0.08) 30%, rgba(212,175,55,0.08) 70%, transparent 70%);
background-size: 14px 100%;
background-repeat: repeat-x;
opacity: 0.25;
}
.stars::before {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(1px 1px at 20% 30%, rgba(212,175,55,0.6), transparent),
radial-gradient(1px 1px at 80% 60%, rgba(212,175,55,0.4), transparent),
radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.4), transparent),
radial-gradient(1px 1px at 60% 20%, rgba(212,175,55,0.5), transparent),
radial-gradient(1px 1px at 90% 90%, rgba(255,255,255,0.3), transparent),
radial-gradient(1px 1px at 10% 50%, rgba(212,175,55,0.5), transparent);
background-size: 600px 600px;
animation: twinkle 6s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes twinkle { from { opacity: .35 } to { opacity: .9 } }
.pulse-ring { animation: pulse-ring 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
@keyframes pulse-ring {
0% { box-shadow: 0 0 0 0 rgba(212,175,55,0.6); }
100% { box-shadow: 0 0 0 22px rgba(212,175,55,0); }
}
.live-dot {
width: 8px; height: 8px; border-radius: 50%; background: #22C55E;
box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.65); }
70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.nav-link { position: relative; transition: color .2s; }
.nav-link:hover { color: #F5D77A; }
.nav-link::after {
content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px;
background: linear-gradient(90deg, #F5D77A, #B8941F);
transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }
.tab-btn.active {
background: linear-gradient(135deg, rgba(245,215,122,0.18), rgba(184,148,31,0.08));
border-color: rgba(212,175,55,0.6);
color: #F5D77A;
}
.level-row { transition: background .2s, transform .2s; }
.level-row:hover { background: rgba(212,175,55,0.08); transform: translateX(4px); }
.phone {
width: 270px; height: 540px;
border-radius: 38px;
background: #0A0A0A;
border: 6px solid #1f1f1f;
box-shadow: 0 30px 80px rgba(212,175,55,0.25), inset 0 0 0 2px rgba(212,175,55,0.18);
position: relative;
overflow: hidden;
}
.phone::before {
content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%);
width: 90px; height: 22px; border-radius: 12px; background: #050505;
}
@media (max-width: 640px) {
.phone { width: 240px; height: 480px; }
}
/* sticky mobile CTA bar */
.sticky-mobile-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
background: rgba(8,8,10,0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid rgba(212,175,55,0.18);
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) { .sticky-mobile-bar { display: none; } }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .25s; }
details > summary:focus-visible { outline: 2px solid #D4AF37; outline-offset: 4px; border-radius: 8px; }
.floating { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
.marquee { display: flex; gap: 3rem; animation: scroll 38s linear infinite; }
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.prize-card {
background: linear-gradient(140deg, rgba(212,175,55,0.10), rgba(0,0,0,0.6));
border: 1px solid rgba(212,175,55,0.35);
transition: transform .3s, box-shadow .3s, border-color .3s;
}
.prize-card:hover {
transform: translateY(-6px);
border-color: rgba(245,215,122,0.7);
box-shadow: 0 25px 50px rgba(212,175,55,0.18);
}
/* Certificate styles */
.cert-card {
background:
radial-gradient(ellipse 80% 50% at 20% 0%, rgba(212,175,55,0.08), transparent 60%),
linear-gradient(180deg, rgba(20,18,12,0.85), rgba(10,10,10,0.95));
border: 1px solid rgba(212,175,55,0.35);
position: relative;
}
.cert-card::after {
content:''; position:absolute; inset:0; border-radius: inherit; pointer-events:none;
background: linear-gradient(135deg, rgba(245,215,122,0.06), transparent 30%, transparent 70%, rgba(245,215,122,0.06));
}
.cert-stamp {
width: 110px; height: 110px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(245,215,122,0.35), rgba(184,148,31,0.12) 70%, transparent);
border: 2px solid rgba(212,175,55,0.7);
box-shadow: 0 0 30px rgba(212,175,55,0.25), inset 0 0 20px rgba(212,175,55,0.15);
display: flex; align-items: center; justify-content: center;
position: relative;
transform: rotate(-8deg);
}
.cert-stamp svg { width: 100%; height: 100%; }
.cert-stamp .stamp-core {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
font-weight: 800; color: #F5D77A; text-align: center; line-height: 1;
}
.cert-stamp .stamp-core .big { font-size: 14px; letter-spacing: 0.5px; }
.cert-stamp .stamp-core .sm { font-size: 9px; opacity: 0.85; margin-top: 2px; letter-spacing: 1px; }
.cert-dl dt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(212,175,55,0.85); margin-bottom: 2px; }
.cert-dl dd { font-size: 14px; color: #EFE9D6; font-weight: 500; }
.cert-dl .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
/* count-up tabular */
.count-up { font-variant-numeric: tabular-nums; }
/* Lloyd's chip */
.trust-chip {
transition: transform .2s, border-color .2s, background .2s;
}
.trust-chip:hover { transform: translateY(-2px); border-color: rgba(212,175,55,0.45); background: rgba(212,175,55,0.06); }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.floating, .marquee, .stars::before, .live-dot, .pulse-ring { animation: none !important; }
html { scroll-behavior: auto; }
}
/* iOS auto-zoom-fix */
@supports (-webkit-touch-callout: none) {
input, textarea, select { font-size: 16px; }
}
/* chart sized by parent wrapper; canvas fills it */
::selection { background: rgba(212,175,55,0.4); color: #fff; }
/* FAQ category tabs */
.faq-cat-btn.active {
background: linear-gradient(135deg, rgba(245,215,122,0.18), rgba(184,148,31,0.08));
border-color: rgba(212,175,55,0.6);
color: #F5D77A;
}