*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#05070d;
color:white;
overflow-x:hidden;
}

body::before{
content:'';
position:fixed;
inset:0;
background:
radial-gradient(circle at top right,
rgba(255,174,0,.08),
transparent 25%),
radial-gradient(circle at bottom left,
rgba(0,110,255,.10),
transparent 30%);
pointer-events:none;
z-index:-1;
}

/* HEADER */

header{

position:sticky;
top:0;
z-index:9999;

display:flex;
justify-content:space-between;
align-items:center;

padding:22px;

background:
linear-gradient(
180deg,
rgba(5,7,13,.96),
rgba(5,7,13,.82)
);

backdrop-filter:blur(18px);

border-bottom:
1px solid rgba(255,255,255,.05);

}

.logo{

font-size:56px;
font-weight:900;
line-height:.88;
letter-spacing:-2px;

}

.gold{
display:block;
color:#ffcc00;
}

.connect{

background:#22c55e;
color:black;

padding:16px 24px;

border-radius:18px;

font-weight:900;

border:none;
cursor:pointer;

transition:.25s;

}

.connect:hover{

transform:translateY(-2px);

box-shadow:
0 10px 24px rgba(34,197,94,.22);

}

/* NAV */

nav{

display:flex;
gap:24px;

}

nav a{

color:#d4d4d8;

text-decoration:none;

font-size:17px;
font-weight:700;

transition:.2s;

}

nav a:hover{
color:white;
}

/* HERO */

.hero{

padding:60px 24px 36px;
max-width:900px;

}

.mini{

color:#ffcc00;

font-size:13px;

letter-spacing:6px;

margin-bottom:24px;

}

.hero h1{

font-size:72px;
line-height:.95;
font-weight:900;
letter-spacing:-3px;

margin-bottom:24px;

max-width:760px;

}

.hero p{

font-size:22px;
line-height:1.6;

color:#9ca3af;

max-width:760px;

margin-bottom:34px;

}

/* CTA */

.cta{

display:inline-flex;
align-items:center;
justify-content:center;

padding:22px 36px;

background:#ffcc00;
color:black;

border-radius:22px;

font-weight:900;
font-size:20px;

text-decoration:none;

transition:.25s;

}

.cta:hover{

transform:translateY(-3px);

box-shadow:
0 10px 30px rgba(255,204,0,.25);

}

/* PREMIUM LANDING */

.premiumHero{

position:relative;

padding:
120px 24px 80px;

overflow:hidden;

display:flex;
justify-content:space-between;
align-items:flex-end;
gap:40px;

min-height:90vh;

}

.heroGlow{

position:absolute;

top:-200px;
right:-200px;

width:700px;
height:700px;

background:
radial-gradient(
circle,
rgba(255,204,0,.12),
transparent 70%
);

pointer-events:none;

animation:
heroGlowMove 8s ease-in-out infinite;

}

@keyframes heroGlowMove{

0%{
transform:scale(1);
}

50%{
transform:scale(1.12);
}

100%{
transform:scale(1);
}

}

.heroContent{

position:relative;
z-index:2;

max-width:760px;

}

.heroMini{

color:#ffcc00;

font-size:13px;

letter-spacing:5px;

margin-bottom:28px;

font-weight:700;

}

.premiumHero h1{

font-size:88px;

line-height:.9;

font-weight:900;

letter-spacing:-4px;

margin-bottom:28px;

max-width:900px;

}

.premiumHero p{

font-size:22px;

line-height:1.7;

color:#9ca3af;

max-width:760px;

margin-bottom:38px;

}

.heroButtons{

display:flex;
gap:18px;
flex-wrap:wrap;

}

.secondaryBtn{

display:flex;
align-items:center;
justify-content:center;

padding:22px 34px;

border-radius:22px;

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

color:white;

font-weight:800;

text-decoration:none;

transition:.25s;

}

.secondaryBtn:hover{

transform:translateY(-3px);

background:
rgba(255,255,255,.08);

}

/* OVERLAY */

.heroOverlay{

display:flex;
flex-direction:column;

gap:18px;

position:relative;
z-index:2;

min-width:280px;

}

.overlayCard{

background:
linear-gradient(
145deg,
rgba(16,20,32,.94),
rgba(8,12,20,.98)
);

border:
1px solid rgba(255,255,255,.06);

border-radius:26px;

padding:24px;

backdrop-filter:blur(18px);

box-shadow:
0 0 40px rgba(0,0,0,.35);

}

.overlayLabel{

font-size:12px;

letter-spacing:2px;

color:#7d8796;

margin-bottom:10px;

}

.overlayValue{

font-size:42px;

font-weight:900;

line-height:1;

}

.goldText{
color:#ffcc00;
}

/* PREMIUM TICKER */

.premiumTicker{

display:flex;
gap:60px;

overflow:hidden;

white-space:nowrap;

padding:18px 24px;

border-top:
1px solid rgba(255,255,255,.05);

border-bottom:
1px solid rgba(255,255,255,.05);

background:
linear-gradient(
90deg,
rgba(255,204,0,.04),
rgba(255,255,255,.01)
);

font-size:14px;

color:#d4d4d8;

}

/* PREVIEW */

.previewSection{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

padding:100px 24px;

align-items:center;

}

.previewText h2{

font-size:64px;

line-height:.95;

font-weight:900;

letter-spacing:-3px;

margin-bottom:24px;

max-width:620px;

}

.previewText p{

font-size:20px;

line-height:1.7;

color:#9ca3af;

max-width:620px;

margin-bottom:34px;

}

.previewCard{

position:relative;

background:
linear-gradient(
145deg,
rgba(10,15,25,.98),
rgba(6,10,18,1)
);

border:
1px solid rgba(255,255,255,.06);

border-radius:32px;

padding:34px;

overflow:hidden;

box-shadow:
0 0 60px rgba(0,0,0,.4);

}

.previewGlow{

position:absolute;

top:-120px;
right:-120px;

width:320px;
height:320px;

background:
radial-gradient(
circle,
rgba(255,204,0,.14),
transparent 70%
);

pointer-events:none;

}

.previewHeader{

display:flex;
align-items:center;
gap:12px;

margin-bottom:28px;

font-size:18px;
font-weight:900;

}

.liveDot{

width:12px;
height:12px;

border-radius:999px;

background:#00ff99;

box-shadow:
0 0 12px #00ff99;

animation:
livePulse 1.6s infinite;

}

@keyframes livePulse{

0%{
opacity:.5;
}

50%{
opacity:1;
}

100%{
opacity:.5;
}

}

.terminalItem{

padding:16px 0;

border-bottom:
1px solid rgba(255,255,255,.06);

font-size:15px;

color:#d4d4d8;

}

/* STATS */

.stats{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:18px;

padding:20px 24px;

}

/* CARDS */

.card,
.panel{

background:
linear-gradient(
145deg,
rgba(10,15,25,.96),
rgba(5,8,15,.98)
);

border-radius:30px;

padding:26px;

position:relative;

overflow:hidden;

border:
1px solid rgba(255,255,255,.05);

box-shadow:
0 0 40px rgba(0,0,0,.35);

transition:.25s;

}

.card::before,
.panel::before{

content:'';

position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(255,204,0,.05),
transparent 35%
);

pointer-events:none;

}

/* PREMIUM WELLS */

#wells{

display:grid;

grid-template-columns:
repeat(auto-fill,minmax(340px,1fr));

gap:24px;

padding:0 24px 60px;

}

.well{

position:relative;

overflow:hidden;

padding:34px;

border-radius:34px;

background:
linear-gradient(
145deg,
rgba(10,15,25,.98),
rgba(5,8,15,1)
);

border:
1px solid rgba(255,255,255,.06);

box-shadow:
0 0 50px rgba(0,0,0,.38);

transition:.3s;

}

.well:hover{

transform:translateY(-6px);

box-shadow:
0 0 60px rgba(255,204,0,.10);

}

.wellGlow{

position:absolute;

top:-120px;
right:-120px;

width:260px;
height:260px;

background:
radial-gradient(
circle,
rgba(255,204,0,.14),
transparent 70%
);

pointer-events:none;

}

.mythicWell{
border:1px solid rgba(255,59,59,.22);
}

.legendaryWell{
border:1px solid rgba(255,204,0,.18);
}

.epicWell{
border:1px solid rgba(168,85,247,.18);
}

.rareWell{
border:1px solid rgba(59,130,246,.18);
}

.badge{

display:inline-flex;

padding:10px 14px;

border-radius:999px;

font-size:12px;

font-weight:900;

background:
rgba(255,255,255,.05);

border:
1px solid rgba(255,255,255,.08);

position:relative;
z-index:2;

}

.aprBadge{

display:inline-flex;

padding:10px 16px;

border-radius:999px;

background:
rgba(34,197,94,.12);

border:
1px solid rgba(34,197,94,.24);

color:#22c55e;

font-size:14px;

font-weight:900;

margin-top:18px;

position:relative;
z-index:2;

}

.wellTitle{

font-size:44px;

font-weight:900;

line-height:.95;

margin-top:24px;

margin-bottom:12px;

letter-spacing:-2px;

position:relative;
z-index:2;

}

.wellSub{

font-size:15px;

color:#7d8796;

margin-bottom:28px;

position:relative;
z-index:2;

}

.wellYield{

font-size:56px;

font-weight:900;

line-height:1;

margin-bottom:30px;

position:relative;
z-index:2;

}

.wellMeta{

display:flex;

justify-content:space-between;

gap:20px;

margin-bottom:30px;

position:relative;
z-index:2;

}

.metaLabel{

font-size:11px;

letter-spacing:2px;

color:#7d8796;

margin-bottom:8px;

}

.metaValue{

font-size:20px;

font-weight:800;

}

.wellBtn{

width:100%;

padding:20px;

border:none;

border-radius:22px;

background:#ffcc00;

color:black;

font-size:17px;

font-weight:900;

cursor:pointer;

transition:.25s;

position:relative;
z-index:2;

}

.wellBtn:hover{

transform:translateY(-2px);

box-shadow:
0 12px 28px rgba(255,204,0,.25);

}

/* GRID */

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

padding:0 24px 30px;

}

/* MAP */

#map{

height:520px;

margin:0 24px 34px;

border-radius:30px;

overflow:hidden;

border:
1px solid rgba(255,255,255,.05);

}

/* FEED */

#feed{

display:flex;
flex-direction:column;

gap:12px;

max-height:420px;

overflow:hidden;

}

.feed{

background:
linear-gradient(
90deg,
rgba(255,204,0,.04),
rgba(255,255,255,.015)
);

border:
1px solid rgba(255,255,255,.04);

padding:14px 16px;

border-radius:16px;

font-size:14px;

line-height:1.5;

color:#d4d4d8;

display:flex;
justify-content:space-between;

gap:20px;

transition:.3s;

}

.feed:hover{

transform:translateX(4px);

border:
1px solid rgba(255,204,0,.18);

}

/* MOBILE */

@media(max-width:900px){

.logo{
font-size:34px;
}

.stats,
.grid,
.previewSection{
grid-template-columns:1fr;
}

#wells{
grid-template-columns:1fr;
padding:0 16px 40px;
}

.well{
padding:26px;
border-radius:28px;
}

.wellTitle{
font-size:34px;
}

.wellYield{
font-size:42px;
}

.wellMeta{
flex-direction:column;
gap:16px;
}

.premiumHero{

padding:
40px 16px 40px;

flex-direction:column;

align-items:flex-start;

gap:30px;

min-height:auto;

}

.premiumHero h1{
font-size:44px;
line-height:.92;
letter-spacing:-2px;
}

.premiumHero p{
font-size:18px;
line-height:1.5;
}

.heroButtons{
width:100%;
flex-direction:column;
}

.secondaryBtn,
.cta{
width:100%;
}

.heroOverlay{
width:100%;
display:grid;
grid-template-columns:1fr;
}

.overlayValue{
font-size:30px;
}

.previewText h2{
font-size:40px;
}

.previewText p{
font-size:17px;
}

#map{
margin:0 16px 20px;
height:420px;
}

header{
padding:16px;
align-items:flex-start;
}

nav{
gap:16px;
margin-top:6px;
}

nav a{
font-size:15px;
}

.card,
.panel{
padding:20px;
}

}

/* =========================
CINEMATIC WELL CARDS
========================= */

.well{

position:relative;
overflow:hidden;

padding:34px;

border-radius:34px;

background:
linear-gradient(
145deg,
rgba(10,15,25,.98),
rgba(5,8,15,1)
);

border:
1px solid rgba(255,255,255,.06);

box-shadow:
0 0 40px rgba(0,0,0,.38);

transition:
transform .35s,
box-shadow .35s,
border .35s;

isolation:isolate;

}

/* PREMIUM HOVER */

.well:hover{

transform:
translateY(-8px)
scale(1.01);

}

/* ANIMATED BACKGROUND */

.well::before{

content:'';

position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(255,255,255,.05),
transparent 35%
);

pointer-events:none;

z-index:0;

}

/* GLOW SYSTEM */

.wellGlow{

position:absolute;

top:-140px;
right:-140px;

width:320px;
height:320px;

border-radius:999px;

filter:blur(10px);

opacity:.9;

pointer-events:none;

animation:
glowPulse 4s ease-in-out infinite;

z-index:0;

}

@keyframes glowPulse{

0%{
transform:scale(1);
opacity:.75;
}

50%{
transform:scale(1.12);
opacity:1;
}

100%{
transform:scale(1);
opacity:.75;
}

}

/* MYTHIC */

.mythicWell{

border:
1px solid rgba(255,70,70,.35);

box-shadow:
0 0 45px rgba(255,70,70,.16);

}

.mythicWell .wellGlow{

background:
radial-gradient(
circle,
rgba(255,70,70,.40),
transparent 70%
);

}

/* LEGENDARY */

.legendaryWell{

border:
1px solid rgba(255,204,0,.28);

box-shadow:
0 0 45px rgba(255,204,0,.12);

}

.legendaryWell .wellGlow{

background:
radial-gradient(
circle,
rgba(255,204,0,.34),
transparent 70%
);

}

/* EPIC */

.epicWell{

border:
1px solid rgba(168,85,247,.34);

box-shadow:
0 0 45px rgba(168,85,247,.16);

}

.epicWell .wellGlow{

background:
radial-gradient(
circle,
rgba(168,85,247,.34),
transparent 70%
);

}

/* RARE */

.rareWell{

border:
1px solid rgba(59,130,246,.30);

box-shadow:
0 0 45px rgba(59,130,246,.14);

}

.rareWell .wellGlow{

background:
radial-gradient(
circle,
rgba(59,130,246,.30),
transparent 70%
);

}

/* COMMON */

.commonWell{

border:
1px solid rgba(255,255,255,.08);

}

.commonWell .wellGlow{

background:
radial-gradient(
circle,
rgba(255,255,255,.12),
transparent 70%
);

}

/* BADGE */

.badge{

display:inline-flex;

align-items:center;
justify-content:center;

padding:10px 16px;

border-radius:999px;

font-size:12px;

font-weight:900;

letter-spacing:1px;

background:
rgba(255,255,255,.06);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(12px);

position:relative;
z-index:2;

}

/* TITLES */

.wellTitle{

font-size:48px;

font-weight:900;

line-height:.95;

margin-top:24px;
margin-bottom:12px;

letter-spacing:-2px;

position:relative;
z-index:2;

}

.wellSub{

font-size:15px;

color:#7d8796;

margin-bottom:30px;

position:relative;
z-index:2;

}

/* PRODUCTION */

.wellYield{

font-size:64px;

font-weight:900;

line-height:1;

margin-bottom:26px;

position:relative;
z-index:2;

text-shadow:
0 0 18px rgba(255,255,255,.08);

}

/* META */

.wellMeta{

display:flex;

justify-content:space-between;

gap:18px;

margin-bottom:26px;

position:relative;
z-index:2;

}

.metaBlock{

flex:1;

padding:16px;

border-radius:18px;

background:
rgba(255,255,255,.03);

border:
1px solid rgba(255,255,255,.05);

backdrop-filter:blur(10px);

}

.metaLabel{

font-size:11px;

letter-spacing:2px;

color:#7d8796;

margin-bottom:8px;

}

.metaValue{

font-size:22px;

font-weight:900;

}

/* APR */

.aprBadge{

display:inline-flex;

padding:12px 18px;

border-radius:999px;

background:
rgba(34,197,94,.12);

border:
1px solid rgba(34,197,94,.24);

color:#22c55e;

font-size:14px;

font-weight:900;

margin-bottom:24px;

position:relative;
z-index:2;

box-shadow:
0 0 20px rgba(34,197,94,.12);

}

/* BUTTON */

.wellBtn{

width:100%;

padding:22px;

border:none;

border-radius:22px;

background:#ffcc00;

color:black;

font-size:18px;

font-weight:900;

cursor:pointer;

transition:.25s;

position:relative;
z-index:2;

}

.wellBtn:hover{

transform:translateY(-2px);

box-shadow:
0 12px 30px rgba(255,204,0,.28);

}

/* MOBILE */

@media(max-width:900px){

.well{

padding:26px;

border-radius:28px;

}

.wellTitle{

font-size:38px;

}

.wellYield{

font-size:50px;

}

.wellMeta{

flex-direction:column;

}

.metaBlock{

padding:14px;

}

.wellBtn{

padding:18px;

font-size:16px;

}

}