/*
Theme Name: BerryQuartz Modern
Theme URI: https://berryquartz.com
Author: BerryQuartz
Description: Modern gradient redesign for BerryQuartz broker directory -- animated hero illustration, clean single-panel mega menu, glassmorphic cards.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: berryquartz-modern
*/


:root{
  --navy-950:#050e1c;
  --navy-900:#0a1a2f;
  --navy-800:#0f2440;
  --navy-700:#16324f;
  --teal:#16c7b5;
  --teal-dark:#0ea89a;
  --violet:#6c6ff0;
  --ink:#0b1520;
  --muted:#64748b;
  --border:#e7ebf2;
  --bg:#f6f8fb;
  --white:#ffffff;
  --radius:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.brand{font-family:'Sora',sans-serif;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001s !important; animation-iteration-count:1 !important; transition-duration:0.001s !important;}
}

/* ===== HEADER ===== */
header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px;}
.brand .mark{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg,var(--teal),var(--violet));
}
.brand .accent{background:linear-gradient(135deg,var(--teal),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent;}

nav#mainnav{display:flex; align-items:center; gap:2px;}
.nav-item{position:relative;}
.nav-trigger{
  display:flex; align-items:center; gap:6px;
  background:none; border:none; cursor:pointer;
  font-size:15px; font-weight:500; color:var(--ink);
  padding:10px 14px; border-radius:9px;
  transition:background .15s ease, color .15s ease;
}
.nav-trigger:hover{background:#eef2f7;}
.nav-item.active .nav-trigger{color:var(--teal-dark); background:#eafbf9;}
.nav-trigger svg{width:13px; height:13px; transition:transform .2s ease;}
.nav-item.active .nav-trigger svg{transform:rotate(180deg);}

.cta{
  background:linear-gradient(135deg,var(--teal),var(--violet));
  color:#fff; border:none; padding:12px 22px; border-radius:11px;
  font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px;
  cursor:pointer; box-shadow:0 8px 20px -6px rgba(22,199,181,0.5);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta:hover{transform:translateY(-1px); box-shadow:0 12px 26px -6px rgba(22,199,181,0.6);}

.menu-surface{position:absolute; top:100%; left:0; right:0; display:flex; justify-content:center; pointer-events:none;}
.panel{
  position:absolute; top:10px; background:var(--white);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:0 24px 48px -14px rgba(5,14,28,0.18);
  padding:28px; display:grid; gap:36px;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(0.98);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events:none;
}
.panel.open{opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;}
.col{min-width:210px;}
.col-title{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 14px;}
.col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px;}
.col a.item{
  display:block; font-size:14.5px; padding:8px 10px; margin:0 -10px; border-radius:9px;
  transition:background .12s ease, color .12s ease;
}
.col a.item:hover{background:#eafbf9; color:var(--teal-dark);}
.col .empty{font-size:13.5px; color:var(--muted); font-style:italic; padding:8px 0;}
.col .view-all{margin-top:10px; display:inline-block; font-size:13.5px; font-weight:600; color:var(--teal-dark);}
.col .view-all:hover{text-decoration:underline;}

#panel-brokers{grid-template-columns:220px 220px; left:32px;}
#panel-reviews{grid-template-columns:240px; left:150px;}
#panel-tools{grid-template-columns:220px; left:330px;}
#panel-guides{grid-template-columns:240px; left:460px;}
#panel-about{grid-template-columns:220px; right:32px; left:auto;}

.backdrop{position:fixed; inset:0; background:rgba(5,14,28,0.28); opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s; z-index:150;}
.backdrop.open{opacity:1; visibility:visible;}

/* ===== HERO ===== */
.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  padding:88px 32px 120px;
}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:0.35; pointer-events:none;}
.blob-1{width:520px; height:520px; background:var(--teal); top:-180px; left:-140px; animation:drift1 22s ease-in-out infinite;}
.blob-2{width:420px; height:420px; background:var(--violet); bottom:-160px; right:-100px; animation:drift2 26s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,50px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-30px,-40px);}}

.hero-inner{
  position:relative; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--teal);
  background:rgba(22,199,181,0.12); border:1px solid rgba(22,199,181,0.3);
  padding:7px 14px; border-radius:999px; margin-bottom:22px;
}
.hero h1{
  font-size:clamp(34px,4.2vw,52px); line-height:1.12; margin:0 0 20px; color:#fff;
  max-width:560px;
}
.hero h1 .grad{background:linear-gradient(135deg,var(--teal),#8fa8ff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{font-size:17px; color:#a8b8cc; max-width:480px; line-height:1.65; margin:0 0 32px;}
.hero-ctas{display:flex; gap:14px; margin-bottom:44px;}
.btn-secondary{
  background:rgba(255,255,255,0.06); color:#fff; border:1px solid rgba(255,255,255,0.18);
  padding:13px 24px; border-radius:11px; font-weight:600; font-size:14.5px;
  transition:background .15s ease;
}
.btn-secondary:hover{background:rgba(255,255,255,0.12);}
.btn-primary{
  background:linear-gradient(135deg,var(--teal),var(--violet)); color:#fff; border:none;
  padding:13px 26px; border-radius:11px; font-weight:600; font-size:14.5px; cursor:pointer;
  box-shadow:0 10px 26px -8px rgba(22,199,181,0.55);
}
.stat-row{display:flex; gap:36px;}
.stat b{display:block; font-size:24px; color:#fff; font-family:'Sora',sans-serif;}
.stat span{font-size:13px; color:#8ea0b8;}

/* Signature hero illustration: stylized figure + animated glass panel */
.illustration{position:relative; height:460px; display:flex; align-items:center; justify-content:center;}
.figure-svg{width:100%; max-width:420px; height:auto; position:relative; z-index:2;}
.glass-panel{
  position:absolute; top:6%; right:2%; width:230px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.25);
  border-radius:18px; backdrop-filter:blur(16px);
  padding:18px; z-index:3; box-shadow:0 20px 50px -12px rgba(0,0,0,0.5);
  animation:float 5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);}}
.glass-panel .gp-title{font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#9fe8de; font-weight:700; margin-bottom:12px;}
.gp-row{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(255,255,255,0.06); border-radius:9px; padding:9px 11px; margin-bottom:8px;
  opacity:0; animation:rowIn .5s ease forwards;
}
.gp-row:nth-child(2){animation-delay:.6s;}
.gp-row:nth-child(3){animation-delay:1.2s;}
.gp-row:nth-child(4){animation-delay:1.8s;}
@keyframes rowIn{to{opacity:1;}}
.gp-row .name{font-size:12.5px; color:#eef4ff; font-weight:600;}
.gp-row .check{
  width:18px; height:18px; border-radius:50%; background:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.gp-row .check svg{width:10px; height:10px; stroke:#052018;}
.gp-row.best{background:rgba(22,199,181,0.18); border:1px solid rgba(22,199,181,0.4);}

/* ===== TRUST BAR ===== */
.trustbar{background:var(--white); border-bottom:1px solid var(--border); padding:22px 32px;}
.trustbar-inner{
  max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:center;
  gap:48px; flex-wrap:wrap; font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.02em;
}
.trustbar-inner span{display:flex; align-items:center; gap:8px;}

/* ===== SECTIONS ===== */
section.pad{padding:88px 32px;}
.section-inner{max-width:1280px; margin:0 auto;}
.section-head{max-width:560px; margin:0 0 48px;}
.section-head .kicker{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-dark); margin-bottom:12px;}
.section-head h2{font-size:clamp(26px,3vw,36px); margin:0 0 14px; line-height:1.2;}
.section-head p{color:var(--muted); font-size:15.5px; line-height:1.6; margin:0;}

/* Broker table */
.table-wrap{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 3px rgba(5,14,28,0.04);}
table{width:100%; border-collapse:collapse;}
thead tr{background:linear-gradient(135deg,var(--navy-900),var(--navy-800));}
th{color:#fff; text-align:left; font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; padding:16px 20px;}
tbody tr{border-top:1px solid var(--border); transition:background .15s ease;}
tbody tr:hover{background:#f8fcfb;}
td{padding:18px 20px; font-size:14.5px;}
.broker-name{display:flex; align-items:center; gap:12px; font-weight:700;}
.broker-avatar{width:34px; height:34px; border-radius:9px; background:linear-gradient(135deg,var(--teal),var(--violet)); flex-shrink:0;}
.score{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--teal-dark);}
.score .dot{width:7px; height:7px; border-radius:50%; background:var(--teal);}
.row-cta{
  background:var(--ink); color:#fff; padding:8px 16px; border-radius:8px; font-size:13px; font-weight:600;
  display:inline-block; transition:background .15s ease;
}
.row-cta:hover{background:var(--teal-dark);}

/* Feature cards */
.features{background:var(--white);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.feature-card{
  border:1px solid var(--border); border-radius:var(--radius); padding:28px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature-card:hover{transform:translateY(-4px); box-shadow:0 16px 36px -12px rgba(5,14,28,0.12); border-color:transparent;}
.feature-icon{
  width:44px; height:44px; border-radius:12px; margin-bottom:18px;
  background:linear-gradient(135deg,rgba(22,199,181,0.15),rgba(108,111,240,0.15));
  display:flex; align-items:center; justify-content:center;
}
.feature-icon svg{width:22px; height:22px; stroke:var(--teal-dark);}
.feature-card h3{font-size:17px; margin:0 0 10px;}
.feature-card p{font-size:14px; color:var(--muted); line-height:1.6; margin:0;}

/* Guides */
.guides{background:var(--bg);}
.guide-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease;}
.guide-card:hover{transform:translateY(-4px); box-shadow:0 16px 36px -12px rgba(5,14,28,0.12);}
.guide-thumb{height:140px; background:linear-gradient(135deg,var(--navy-900),var(--teal-dark));}
.guide-body{padding:20px;}
.guide-body .tag{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--teal-dark); margin-bottom:10px; display:block;}
.guide-body h3{font-size:15.5px; margin:0 0 8px; line-height:1.4;}
.guide-body p{font-size:13.5px; color:var(--muted); margin:0;}

/* Footer */
footer{background:var(--navy-950); color:#8ea0b8; padding:64px 32px 32px;}
.footer-inner{max-width:1280px; margin:0 auto;}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; margin-bottom:48px;}
.footer-brand .brand{color:#fff;}
.footer-brand p{font-size:13.5px; line-height:1.7; margin:14px 0 0; max-width:280px;}
.footer-col h4{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#5b6f88; margin:0 0 16px;}
.footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:14px; transition:color .15s ease;}
.footer-col a:hover{color:var(--teal);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12.5px;}

@media (max-width: 900px){
  nav#mainnav{display:none;}
  .hero-inner{grid-template-columns:1fr;}
  .illustration{height:320px; margin-top:20px;}
  .grid-3{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}