:root{
  --bg:#0F0F12;
  --panel:#141419;
  --panel2:#1A1A20;
  --text:#F5F5F5;
  --muted:#B8B8C2;
  --gold:#C9A24D;
  --gold2:#E2C37A;
  --line:rgba(201,162,77,.25);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:
    radial-gradient(1100px 700px at 20% 0%, rgba(201,162,77,.10), transparent 55%),
    radial-gradient(900px 600px at 90% 10%, rgba(201,162,77,.08), transparent 55%),
    linear-gradient(180deg, #0C0C10 0%, var(--bg) 55%, #0B0B0F 100%);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
a:hover{color:var(--gold)}

.container{
  width:min(1120px, calc(100% - 32px));
  margin:0 auto;
}

.small-muted{color:var(--muted)}
.section{ padding: 70px 0; }
.section-title{ font-size: 1.9rem; margin:0 0 14px 0; font-weight:900; letter-spacing:-.2px; }
.section-subtitle{ color: var(--muted); max-width: 820px; margin:0; line-height:1.55; }

h1,h2,h3{letter-spacing:-.2px}
h1{font-weight:900}

/* Navbar */
.navbar{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(15,15,18,.62);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.navbar img{height:40px; width:auto}

.navlinks{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.navlinks a{
  color:rgba(245,245,245,.86);
}
.navlinks a:hover{
  color:var(--gold);
}

/* Buttons */
.btn{
  display:inline-block;
  padding:.72rem 1rem;
  border-radius:12px;
  font-weight:800;
  border:1px solid transparent;
}
.btn-gold{
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
  border: none;
  color:#141419;
  box-shadow: 0 10px 30px rgba(201,162,77,.25);
}
.btn-gold:hover{filter:brightness(1.05); color:#141419}
.btn-outline{
  border:1px solid rgba(201,162,77,.8);
  color:var(--text);
  background:transparent;
}
.btn-outline:hover{
  background: rgba(201,162,77,.12);
  border-color: rgba(201,162,77,1);
  color:var(--text);
}

/* Hero */
.hero{
  padding: 74px 0 42px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-80px -40px -80px -40px;
  background:
    radial-gradient(700px 420px at 15% 10%, rgba(201,162,77,.16), transparent 60%),
    radial-gradient(650px 380px at 95% 15%, rgba(201,162,77,.12), transparent 60%);
  pointer-events:none;
}
.hero-lines{
  position:absolute;
  inset:0;
  opacity:.85;
  background:
    linear-gradient(115deg, transparent 0%, transparent 45%, rgba(201,162,77,.10) 46%, rgba(201,162,77,.18) 49%, transparent 52%, transparent 100%),
    linear-gradient(115deg, transparent 0%, transparent 55%, rgba(201,162,77,.08) 56%, rgba(201,162,77,.14) 59%, transparent 62%, transparent 100%);
  transform: translateY(-10px);
  animation: drift 9s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{
  from{transform: translateY(-10px) translateX(-8px)}
  to{transform: translateY(8px) translateX(12px)}
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:22px;
  align-items:start;
  position:relative;
}
@media(max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
}
.hero h1{
  margin:0 0 14px 0;
  font-size: clamp(2.1rem, 3.5vw, 3.35rem);
  line-height:1.08;
}
.hero .lead{
  color:rgba(245,245,245,.86);
  font-size:1.08rem;
  margin:0 0 18px 0;
}

/* Components */
.badge-gold{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem .85rem;
  border:1px solid rgba(201,162,77,.35);
  color: rgba(245,245,245,.92);
  background: rgba(20,20,25,.55);
  border-radius: 999px;
  margin-bottom:14px;
}

.cardx{
  background: linear-gradient(180deg, rgba(20,20,25,.95) 0%, rgba(18,18,22,.85) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pad{padding:20px}
.cardx:hover{
  border-color: rgba(201,162,77,.20);
  transform: translateY(-2px);
  transition: all .18s ease;
}

.icon-pill{
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(201,162,77,.12);
  border: 1px solid rgba(201,162,77,.25);
}
.hr-gold{
  height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,162,77,.45) 40%, rgba(201,162,77,.10) 60%, transparent 100%);
  border:none;
  margin: 22px 0;
}

.grid4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
@media(max-width: 980px){
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width: 520px){
  .grid4{grid-template-columns:1fr}
}

/* Footer */
.footer{
  padding: 28px 0;
  color: rgba(245,245,245,.78);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer a{color:rgba(245,245,245,.78)}
.footer a:hover{color:var(--gold)}

/* WhatsApp */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.72rem .9rem;
  border-radius: 999px;
  background: rgba(20,20,25,.88);
  border:1px solid rgba(201,162,77,.30);
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
.whatsapp-float:hover{
  border-color: rgba(201,162,77,.60);
  transform: translateY(-1px);
  transition: all .15s ease;
}
.whatsapp-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(46, 213, 115, 1);
  box-shadow: 0 0 0 6px rgba(46, 213, 115, .14);
}

/* Forms */
.form-control{
  width:100%;
  padding:.75rem .9rem;
  border-radius:12px;
  background: rgba(10,10,14,.65);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  outline:none;
}
.form-control:focus{
  background: rgba(10,10,14,.75);
  border-color: rgba(201,162,77,.55);
  box-shadow: 0 0 0 .2rem rgba(201,162,77,.12);
}

/* Portfolio */
.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}
@media(max-width: 900px){
  .portfolio-grid{grid-template-columns:1fr}
}
.portfolio-img{
  width:100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.25);
}
@media (max-width: 576px){
  .portfolio-img{ height: 190px; }
}
.tag-row{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  display:inline-flex;
  padding:.25rem .6rem;
  border-radius:999px;
  border:1px solid rgba(201,162,77,.28);
  background: rgba(201,162,77,.10);
  color: rgba(245,245,245,.92);
  font-size:.85rem;
}