/* ================================
ROLEXBOOK LANDING PAGE
SIMPLE READABLE CSS
================================ */

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

html { scroll-behavior: smooth; }

body {
background: #060708;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

:root {
--gold: #e8b73f;
--gold-light: #ffd76a;
--dark: #0d1014;
--card: #12161c;
--muted: #98a1ad;
--border: #2a323b;
}

/* HEADER */

.header {
height: 76px;
padding: 0 7%;
display: flex;
align-items: center;
justify-content: space-between;
background: #050607;
border-bottom: 1px solid #332711;
position: sticky;
top: 0;
z-index: 10;
}

.logo { font-size: 25px; font-weight: 900; }
.logo span { color: var(--gold); }

nav { display: flex; gap: 25px; }
nav a { color: #c9cdd2; font-size: 14px; }
nav a:hover { color: var(--gold); }

/* BUTTONS */

.btn {
display: flex;
padding: 13px 24px;
border-radius: 7px;
font-weight: 800;
border: 1px solid transparent;
cursor: pointer;
align-items: center;
}

.btn.gold { background: var(--gold); color: #080808; }
.btn.gold:hover { background: var(--gold-light); }
.btn.outline { border-color: #4b5560; }

.btn.gold i{
font-size: 20px;
margin-right: 6px;
}

/* HERO */

.hero {
min-height: 670px;
padding: 80px 7%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
background: radial-gradient(circle at 75% 40%, #3a2a0b, #060708 52%);
}

.hero-text { max-width: 650px; }

.label {
color: var(--gold);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 15px;
}

.hero h1 {
font-size: 65px;
line-height: 1.02;
margin-bottom: 22px;
}

.hero h1 span { display: block; color: var(--gold); }

.muted { color: var(--muted); }

.hero-text > .muted {
font-size: 18px;
margin-bottom: 30px;
}

.buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.stats {
display: flex;
gap: 35px;
margin-top: 42px;
}

.stats b {
display: block;
color: var(--gold);
font-size: 24px;
}

.stats small { color: var(--muted); }

.hero-card {
min-height: 440px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.orb {
width: 310px;
height: 310px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
font-size: 55px;
background: radial-gradient(circle, #2b220e, #080a0c 70%);
border: 1px solid #755a20;
box-shadow: 0 0 90px rgba(232,183,63,.14);
}

.mini-panel {
position: absolute;
right: 0;
bottom: 35px;
width: 300px;
padding: 23px;
background: #0d1116;
border: 1px solid #6a521c;
border-radius: 12px;
}

.mini-panel small { color: var(--gold); letter-spacing: 2px; }
.mini-panel h3 { font-size: 28px; margin: 5px 0; }
.mini-panel p { color: var(--muted); font-size: 11px; }

/* SECTIONS */

.section { padding: 100px 7%; }

.heading {
text-align: center;
max-width: 700px;
margin: 0 auto 50px;
}

.heading h2,
.dark-section h2,
.business h2,
.b2c h2,
.contact h2 {
font-size: 43px;
line-height: 1.15;
margin-bottom: 15px;
}

.heading h2 span,
.dark-section h2 span,
.contact h2 span { color: var(--gold); }

/* CARDS */

.grid {
display: grid;
gap: 18px;
}

.grid.four { grid-template-columns: repeat(4, 1fr); }

.card {
min-height: 220px;
padding: 30px;
background: linear-gradient(145deg, #17140d, #0d0f12);
border: 1px solid #302a1b;
border-radius: 12px;
}

.card:hover { border-color: var(--gold); }

.card > b { color: var(--gold); font-size: 13px; }
.card h3 { margin: 25px 0 10px; font-size: 21px; }
.card p { color: var(--muted); font-size: 14px; margin-bottom: 15px; }
.card a { color: var(--gold); font-size: 13px; font-weight: 700; }

/* SPORTS ID */

.dark-section {
padding: 100px 7%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
background: radial-gradient(circle at 75% 50%, #392b0e, #070809 48%);
}

.dark-section > div:first-child { max-width: 620px; }

.dark-section h2 span { display: block; }

.checks {
list-style: none;
margin: 25px 0 30px;
}

.checks li { margin: 10px 0; color: #d8dde2; }
.checks li::before { content: "✓"; color: #29d17d; margin-right: 10px; }

.sports-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}

.sports-grid div {
min-height: 190px;
padding: 25px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(145deg, #1d180d, #0b0d10);
border: 1px solid #4e3c18;
border-radius: 13px;
font-size: 45px;
}

.sports-grid div:hover { border-color: var(--gold); }
.sports-grid strong { font-size: 14px; margin-top: 8px; }

/* B2B */

.business {
padding: 100px 7%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
}

.business h2 { font-size: 44px; }

.dashboard {
min-height: 360px;
padding: 30px;
background: #0e1217;
border: 1px solid #2a3440;
border-radius: 16px;
}

.dashboard header {
height: auto;
padding: 0 0 18px;
border: 0;
position: static;
background: none;
display: flex;
justify-content: space-between;
color: var(--gold);
font-size: 11px;
}

.dashboard header span { color: #7e8995; }

.bars {
height: 200px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 18px;
}

.bars i {
width: 35px;
display: block;
background: linear-gradient(#e8b73f, #725513);
border-radius: 5px 5px 0 0;
}

.bars i:nth-child(1) { height: 55px; }
.bars i:nth-child(2) { height: 95px; }
.bars i:nth-child(3) { height: 130px; }
.bars i:nth-child(4) { height: 85px; }
.bars i:nth-child(5) { height: 155px; }

.dash-stats {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 10px;
}

.dash-stats b {
padding: 14px;
background: #151b22;
color: var(--gold);
}

.dash-stats small {
display: block;
color: #7b8590;
font-weight: normal;
}

/* B2C */

.b2c {
padding: 100px 7%;
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 90px;
align-items: center;
background: #0b0e12;
}

.phone {
width: 245px;
min-height: 450px;
padding: 22px 17px;
margin: auto;
background: #10151b;
border: 4px solid #29333e;
border-radius: 32px;
}

.notch {
width: 65px;
height: 7px;
margin: 0 auto 25px;
background: #303943;
border-radius: 10px;
}

.phone h3 { color: var(--gold); margin-bottom: 18px; }

.phone > div:not(.notch) {
padding: 15px;
margin-bottom: 10px;
background: #171e26;
border: 1px solid #28333e;
border-radius: 9px;
}

.phone small {
display: block;
color: #7f8994;
margin-top: 5px;
}

.feature-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin: 25px 0 30px;
color: #d9dee3;
}

/* CONTACT */

.contact {
padding: 100px 7%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;
align-items: center;
background: radial-gradient(circle at 20% 50%, #2b210d, #08090b 50%);
}

.contact h2 span { display: block; }

form {
display: flex;
flex-direction: column;
gap: 13px;
}

input, select, textarea {
width: 100%;
padding: 15px;
background: #0e1217;
border: 1px solid #303944;
border-radius: 7px;
color: white;
font-family: Arial, sans-serif;
}

textarea { min-height: 130px; resize: vertical; }

input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--gold);
}

/* FOOTER */

footer {
padding: 45px 7%;
background: #030405;
border-top: 1px solid #2a2110;
}

footer p { color: var(--muted); margin: 8px 0; }
footer small { color: #68727e; display: block; max-width: 900px; }

/* RESPONSIVE */

@media (max-width: 1000px) {
nav { gap: 12px; }
nav a { font-size: 12px; }
.grid.four { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 800px) {
.header {
height: auto;
padding: 18px 5%;
flex-wrap: wrap;
gap: 15px;
}

nav {
order: 3;
width: 100%;
justify-content: center;
flex-wrap: wrap;
}

.hero,
.dark-section,
.business,
.b2c,
.contact {
grid-template-columns: 1fr;
}

.hero h1 { font-size: 52px; }
}

@media (max-width: 550px) {
.header { padding: 16px 5%; }

.hero { padding: 60px 6%; }
.hero h1 { font-size: 40px; }

.hero-buttons {
flex-direction: column;
}

.hero-buttons .btn { text-align: center; }

.stats { gap: 20px; }

.grid.four,
.sports-grid,
.feature-list {
grid-template-columns: 1fr;
}

.heading h2,
.dark-section h2,
.business h2,
.b2c h2,
.contact h2 {
font-size: 34px;
}

.mini-panel { width: 250px; }
}