/*
Theme Name: CariFro Beats Perfect
Theme URI: https://carifrobeats.com
Author: CariFro Beats
Version: 4.0
Description: Full CariFro Beats homepage with content, images, blog layout, island culture, and Elementor-ready pages.
*/

:root{
  --bg:#050505;
  --bg2:#111;
  --card:#171717;
  --orange:#ff8a00;
  --gold:#f7c548;
  --green:#00c853;
  --teal:#00d5c0;
  --red:#ff3131;
  --text:#fff;
  --muted:#bdbdbd;
  --line:rgba(255,255,255,.13);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.6;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(0,0,0,.9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  max-width:1220px;
  margin:auto;
  padding:16px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.logo{
  font-size:30px;
  font-weight:900;
  letter-spacing:.4px;
}
.logo .cari{color:var(--orange)}
.logo .fro{color:var(--green)}
.nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  color:#ddd;
  font-size:14px;
}
.nav a:hover{color:var(--orange)}

.hero{
  min-height:92vh;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.35),rgba(0,0,0,.78)),
    url('assets/carifro-hero-culture.png') center/cover no-repeat;
  position:relative;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 25%,rgba(255,138,0,.24),transparent 30%),
             radial-gradient(circle at 80% 70%,rgba(0,213,192,.16),transparent 28%);
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:1220px;
  margin:auto;
  padding:110px 22px;
}
.kicker{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:3px;
  font-weight:900;
  font-size:13px;
}
.hero h1{
  font-size:clamp(50px,8vw,105px);
  line-height:.95;
  margin:18px 0;
  max-width:980px;
  text-shadow:0 8px 40px rgba(0,0,0,.7);
}
.gradient-text{
  background:linear-gradient(90deg,var(--orange),var(--gold),var(--green),var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p{
  max-width:780px;
  font-size:22px;
  color:#f0f0f0;
  text-shadow:0 3px 18px rgba(0,0,0,.8);
}
.cta-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:32px;
}
.btn{
  display:inline-block;
  padding:14px 24px;
  border-radius:999px;
  font-weight:900;
  border:1px solid var(--line);
}
.btn-primary{
  background:linear-gradient(90deg,var(--orange),var(--gold));
  color:#090909;
}
.btn-secondary{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.section{padding:90px 22px}
.wrap{max-width:1220px;margin:auto}
.section-title{
  font-size:clamp(34px,5vw,62px);
  line-height:1.05;
  margin:0 0 15px;
}
.lead{
  color:var(--muted);
  font-size:20px;
  max-width:860px;
}
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:center;
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid var(--line);
  border-radius:24px;
  padding:28px;
  box-shadow:0 25px 70px rgba(0,0,0,.28);
}
.image-card{
  border-radius:28px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.dark-band{
  background:
    radial-gradient(circle at 20% 10%,rgba(255,138,0,.16),transparent 32%),
    radial-gradient(circle at 80% 80%,rgba(0,213,192,.14),transparent 32%),
    #0c0c0c;
}
.formula-grid,.island-grid,.blog-grid,.culture-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr));
  gap:18px;
  margin-top:34px;
}
.formula-item{border-left:4px solid var(--orange)}
.formula-item:nth-child(2){border-color:var(--green)}
.formula-item:nth-child(3){border-color:var(--gold)}
.formula-item:nth-child(4){border-color:var(--teal)}
.formula-item:nth-child(5){border-color:var(--red)}
.formula-item h3,.island-card h3,.blog-card h3{margin-top:0}
.island-card{
  background:#101010;
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
}
.island-card small{
  color:var(--gold);
  font-weight:900;
}
.culture-grid div{
  padding:24px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
}
.moodboard{
  min-height:540px;
  border-radius:32px;
  background:
    linear-gradient(0deg,rgba(0,0,0,.50),rgba(0,0,0,.14)),
    url('assets/carifro-culture-collage.png') center/cover no-repeat;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.48);
}
.blog-card{overflow:hidden;padding:0}
.blog-img{
  height:180px;
  background:
    linear-gradient(135deg,rgba(255,138,0,.25),rgba(0,200,83,.18)),
    url('assets/carifro-moodboard.png') center/cover no-repeat;
}
.blog-card:nth-child(2) .blog-img{background-position:left center}
.blog-card:nth-child(3) .blog-img{background-position:right center}
.blog-card .inside{padding:23px}
.page-content{min-height:70vh}
.footer{
  background:#000;
  border-top:1px solid var(--line);
  padding:45px 22px;
  color:#aaa;
}
.footer .wrap{
  display:flex;
  justify-content:space-between;
  gap:25px;
  flex-wrap:wrap;
}
.tagline{
  color:white;
  font-size:26px;
  font-weight:900;
}
@media(max-width:850px){
  .grid-2{grid-template-columns:1fr}
  .nav{display:none}
  .hero{min-height:82vh}
}