/* dabrusi v2 (JBALVIN-inspired minimal dark aesthetic)
   scoped to body.v2 to avoid breaking legacy pages */
body.v2 { background:#0b0c0f; color:#f2f2f2; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body.v2 a { color: inherit; }
body.v2 #wrapper { background: transparent; }

body.v2 header { position: sticky; top: 0; z-index: 1000; background: rgba(11,12,15,.75); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,.08); }
body.v2 header .logo img { display:block; }
body.v2 header .main-nav a { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; opacity: .9; }
body.v2 header .main-nav a:hover { opacity: 1; }
body.v2 header .social a { opacity: .85; }
body.v2 header .social a:hover { opacity: 1; }

.v2-section { padding: 64px 0; }
.v2-wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.v2-section__head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom: 24px; flex-wrap:wrap; }
.v2-h2 { font-size: clamp(22px, 3vw, 34px); margin:0; letter-spacing: -0.02em; }
.v2-lead { margin:0; opacity:.8; max-width: 60ch; }

.v2-hero { position: relative; min-height: calc(100vh - 70px); display:grid; place-items:center; overflow:hidden; }
.v2-hero::before { content:""; position:absolute; inset:0; background-image: var(--hero-bg); background-size: cover; background-position: center; transform: scale(1.02); }
.v2-hero__overlay { position:absolute; inset:0; background: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,.25), rgba(0,0,0,.85)); }
.v2-hero__content { position:relative; width: min(1120px, calc(100% - 40px)); padding: 72px 0; }
.v2-kicker { font-size: 12px; letter-spacing: .2em; opacity:.85; }
.v2-title { font-size: clamp(42px, 7vw, 88px); line-height: 1.02; margin: 14px 0 10px; letter-spacing: -0.03em; }
.v2-subtitle { font-size: clamp(16px, 2.2vw, 20px); opacity:.9; max-width: 52ch; margin: 0 0 22px; }
.v2-cta { display:flex; gap:12px; flex-wrap:wrap; margin: 8px 0 18px; }
.v2-btn { display:inline-flex; align-items:center; justify-content:center; padding: 12px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); text-decoration:none; font-weight: 600; font-size: 14px; }
.v2-btn--primary { background: #ffffff; color:#0b0c0f; border-color: transparent; }
.v2-btn:hover { border-color: rgba(255,255,255,.35); }
.v2-btn--primary:hover { opacity:.92; }

.v2-hero__meta { display:flex; gap:10px; flex-wrap:wrap; margin-top: 8px; }
.v2-pill { display:inline-flex; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); text-decoration:none; font-size: 13px; opacity:.95; }
.v2-pill:hover { background: rgba(255,255,255,.12); }

.v2-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.v2-card { grid-column: span 6; border-radius: 18px; overflow:hidden; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); text-decoration:none; display:flex; flex-direction:column; min-height: 320px; }
.v2-card__img { flex: 1 1 auto; background-image: var(--img); background-size: cover; background-position: center; }
.v2-card__body { padding: 16px; display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; }
.v2-card__title { font-size: 18px; font-weight: 800; letter-spacing:-0.02em; }
.v2-card__meta { font-size: 13px; opacity:.75; margin-top: 4px; }
.v2-card__cta { font-size: 12px; letter-spacing:.18em; text-transform:uppercase; opacity:.85; }
.v2-card:hover { border-color: rgba(255,255,255,.22); transform: translateY(-1px); }

.v2-note { margin-top: 18px; opacity:.78; }
.v2-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 8px; border:1px solid rgba(255,255,255,.10); }

.v2-prose p { margin: 0 0 12px; opacity:.9; max-width: 70ch; font-size: 16px; line-height: 1.6; }

.v2-contact { display:flex; gap:12px; flex-wrap:wrap; }

@media (max-width: 820px){
  .v2-section { padding: 44px 0; }
  .v2-card { grid-column: span 12; min-height: 280px; }
}
