/* ================================================= */
/* RELKO PEN – PREMIUM BLACK & GOLD MASTER CSS */
/* ================================================= */

:root{
--black:#0D0D0D;
--black-2:#141414;
--black-3:#1a1a1a;
--black-alt:#111418;
--gold:#D4AF37;
--gold-2:#FFD700;
--gold-grad:linear-gradient(135deg,#D4AF37,#FFD700);
--text-light:#e0e0e0;
--text-muted:#888;
--border:rgba(212,175,55,0.15);
--border-2:rgba(212,175,55,0.3);
--shadow-gold:0 0 30px rgba(212,175,55,0.15);
--radius:12px;
--radius-sm:8px;
--trans:all 0.3s ease;
--font-head:'Cinzel',serif;
--font-body:'Inter',sans-serif;
}

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

html{scroll-behavior:smooth;}

body.rp-body{
background:var(--black);
color:var(--text-light);
font-family:var(--font-body);
}

/* ================================================= */
/* PREMIUM RIGHT GOLD RIBBON */
/* ================================================= */

.rp-ribbon{
position:fixed;
top:50%;
right:0;
transform:translateY(-50%);
z-index:99999;
background:var(--gold-grad);
color:var(--black);
padding:18px 10px;
writing-mode:vertical-rl;
text-orientation:mixed;
font-family:var(--font-head);
font-size:12px;
font-weight:700;
letter-spacing:3px;
border-top-left-radius:14px;
border-bottom-left-radius:14px;
box-shadow:-6px 0 30px rgba(212,175,55,0.4);
transition:all 0.3s ease;
cursor:pointer;
}

.rp-ribbon:hover{
background:linear-gradient(180deg,#FFD700,#D4AF37);
box-shadow:-6px 0 40px rgba(212,175,55,0.7);
}

.rp-ribbon::after{
content:'';
position:absolute;
inset:0;
border-top-left-radius:14px;
border-bottom-left-radius:14px;
box-shadow:0 0 25px rgba(212,175,55,0.6);
opacity:0;
transition:opacity 0.3s ease;
}

.rp-ribbon:hover::after{
opacity:1;
}

@media(max-width:576px){
.rp-ribbon{display:none;}
}

/* ================================================= */
/* BASIC GLOBAL */
/* ================================================= */

a{
color:var(--gold);
text-decoration:none;
transition:var(--trans);
}

a:hover{color:var(--gold-2);}

h1,h2,h3,h4,h5,h6{
font-family:var(--font-head);
color:#fff;
line-height:1.3;
}

img{
max-width:100%;
height:auto;
display:block;
}

/* ================================================= */
/* NAVBAR */
/* ================================================= */

.rp-navbar{
background:rgba(13,13,13,0.95);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);
padding:12px 0;
transition:var(--trans);
}

.rp-navbar .nav-link{
color:var(--text-light)!important;
font-weight:500;
padding:6px 14px!important;
border-radius:6px;
font-size:14px;
transition:var(--trans);
}

.rp-navbar .nav-link:hover{
color:var(--gold)!important;
}

/* ================================================= */
/* BUTTONS */
/* ================================================= */

.rp-btn-gold{
background:var(--gold-grad);
color:var(--black)!important;
border:none;
font-weight:700;
border-radius:8px;
padding:10px 24px;
transition:var(--trans);
}

.rp-btn-gold:hover{
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(212,175,55,0.4);
}

.rp-btn-outline{
background:transparent;
color:var(--gold)!important;
border:1px solid var(--gold);
font-weight:600;
border-radius:8px;
padding:10px 24px;
transition:var(--trans);
}

.rp-btn-outline:hover{
background:var(--gold-grad);
color:var(--black)!important;
}

/* ================================================= */
/* HERO */
/* ================================================= */

.rp-hero{
min-height:100vh;
display:flex;
align-items:center;
background:var(--black);
padding-top:80px;
}

.hero-title{
font-size:clamp(2.2rem,5vw,4rem);
font-weight:700;
color:#fff;
margin-bottom:10px;
}

.hero-tagline{
font-family:var(--font-head);
font-size:clamp(1rem,2vw,1.4rem);
color:var(--gold);
letter-spacing:4px;
}

/* ================================================= */
/* FOOTER */
/* ================================================= */

.rp-footer{
background:var(--black-alt);
border-top:1px solid var(--border);
padding:60px 0 0;
}

.footer-bottom{
border-top:1px solid var(--border);
padding:20px 0;
margin-top:40px;
color:var(--text-muted);
font-size:13px;
}