/* Premium 2026 portfolio direction */
:root {
  --ink: #06142f;
  --ink-2: #0b2145;
  --gold: #d8a52c;
  --gold-soft: #f4d988;
  --paper: #fbfaf6;
}

body { background: var(--paper); }
header { border-bottom: 1px solid rgba(216,165,44,.14); }
.logo { letter-spacing: -.02em; }
.nav-cta { box-shadow: 0 10px 30px rgba(216,165,44,.22); }

.hero {
  min-height: 860px;
  padding: 170px 0 120px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(216,165,44,.25), transparent 25%),
    radial-gradient(circle at 5% 20%, rgba(32,75,135,.18), transparent 28%),
    linear-gradient(135deg, #fdfcf8 0%, #f8f5ec 48%, #eef3f9 100%);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .32;
  pointer-events: none;
  background-image: linear-gradient(rgba(6,20,47,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(6,20,47,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.hero-grid { grid-template-columns: 1.12fr .88fr; gap: 76px; }
.hero-content { position: relative; z-index: 4; }
.hero-tag {
  width: fit-content;
  padding: 9px 15px;
  border: 1px solid rgba(216,165,44,.42);
  color: var(--ink-2);
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 28px rgba(6,20,47,.08);
}
.hero-tag span { color: #1ba66a; text-shadow: 0 0 10px rgba(27,166,106,.6); }
.hero-title {
  max-width: 820px;
  margin-top: 22px;
  font-size: clamp(50px, 6.1vw, 86px);
  line-height: .99;
  letter-spacing: -.055em;
  color: var(--ink) !important;
  background: none;
  -webkit-text-fill-color: initial;
}
.typing-text { color: #b87b06; position: relative; }
.hero-description { max-width: 680px; font-size: 18px; line-height: 1.82; color: #42526b; }
.hero-ctas { margin-top: 32px; }
.btn-primary { padding: 17px 25px; box-shadow: 0 14px 34px rgba(6,20,47,.19); }
.btn-secondary { padding: 16px 24px; background: rgba(255,255,255,.62); }
.hero-stats { margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(6,20,47,.1); max-width: 650px; }
.stat-num { font-size: 31px; color: var(--ink); }
.stat-label { max-width: 100px; line-height: 1.25; }

.hero-image-wrapper { min-height: 610px; display: grid; place-items: center; }
.hero-image-wrapper::before,
.hero-image-wrapper::after {
  content: '';
  position: absolute;
  border-radius: 42% 58% 63% 37% / 38% 38% 62% 62%;
  transform: rotate(9deg);
}
.hero-image-wrapper::before { width: 470px; height: 560px; background: linear-gradient(145deg,var(--ink),#102f5d); box-shadow: 0 40px 85px rgba(6,20,47,.28); }
.hero-image-wrapper::after { width: 494px; height: 584px; border: 2px solid rgba(216,165,44,.7); transform: rotate(4deg); }
.hero-image-container { width: 430px; height: 540px; border-radius: 42% 58% 63% 37% / 38% 38% 62% 62%; border: 0; overflow: hidden; z-index: 2; box-shadow: none; }
.hero-image-container img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.hero-badge {
  left: -10px;
  bottom: 74px;
  z-index: 5;
  padding: 17px 21px;
  border: 1px solid rgba(216,165,44,.35);
  box-shadow: 0 18px 45px rgba(6,20,47,.2);
}
.hero-badge .icon { background: linear-gradient(135deg,#f8de95,var(--gold)); }
.hero-glow { display: none; }

body > .container[style*="margin-top: -35px"] { margin-top: -66px !important; }
body > .container[style*="margin-top: -35px"] .glass-card { background: rgba(255,255,255,.86); border-color: rgba(216,165,44,.2); box-shadow: 0 24px 60px rgba(6,20,47,.12); }

@media (max-width: 1050px) {
  .hero { min-height: auto; }
  .hero-grid { gap: 34px; }
  .hero-image-wrapper { transform: scale(.88); }
}
@media (max-width: 820px) {
  .hero { padding: 130px 0 92px; }
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-image-wrapper { min-height: 570px; margin-top: 20px; }
  .hero-content { align-items: flex-start; }
  .hero-description { margin-left: 0; }
  .hero-ctas { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .hero { padding-top: 112px; }
  .hero-title { font-size: 47px; }
  .hero-description { font-size: 16px; }
  .hero-image-wrapper { min-height: 450px; transform: none; }
  .hero-image-wrapper::before { width: 320px; height: 390px; }
  .hero-image-wrapper::after { width: 336px; height: 406px; }
  .hero-image-container { width: 296px; height: 370px; }
  .hero-badge { left: 4px; bottom: 24px; }
  .hero-stats { gap: 14px; }
}