/* Jorge Veloso visual language for the DROM portfolio page */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
.portfolio-page { --jv-bg:#06070b; --jv-bg2:#0a0c12; --jv-surface:#0e1118; --jv-line:rgba(255,255,255,.09); --jv-text:#f3f5f9; --jv-muted:#a3acbd; --jv-purple:#6538ed; color:var(--jv-text); background:var(--jv-bg); font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.65; }
.portfolio-page :not(i):not(svg) { font-family:'Inter',system-ui,sans-serif; }
.portfolio-page h1,.portfolio-page h2,.portfolio-page h3 { font-family:'Inter Tight','Inter',sans-serif; font-weight:600; letter-spacing:-.045em; }
.portfolio-navbar { background:rgba(6,7,11,.86); border-bottom:1px solid var(--jv-line); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.portfolio-navbar.scrolled { background:rgba(6,7,11,.94); }
.portfolio-navbar .company-logo { width:136px; }
.portfolio-navbar .nav-link,.portfolio-page .company-mobile-menu .mobile-nav-link { color:var(--jv-muted); font-size:.875rem; font-weight:500; }
.portfolio-navbar .nav-link:hover,.portfolio-navbar .nav-link.active { color:var(--jv-text); }
.portfolio-navbar .nav-link.active { box-shadow:inset 0 -2px var(--jv-purple); }
.portfolio-page .company-mobile-menu { background:rgba(10,12,18,.98); }
.portfolio-page .mobile-menu-toggle { color:var(--jv-text); border-color:var(--jv-line); }
.portfolio-page .company-kicker { color:#a78bfa; font-family:'JetBrains Mono',monospace!important; font-size:.75rem; letter-spacing:.14em; }
.portfolio-hero { min-height:660px; background:var(--jv-bg2); }
.portfolio-hero-photo { filter:brightness(.42) saturate(.72); }
.portfolio-hero-wash { background:linear-gradient(90deg,rgba(6,7,11,.94),rgba(6,7,11,.72) 52%,rgba(6,7,11,.12)),linear-gradient(0deg,rgba(6,7,11,.55),transparent 62%); }
.portfolio-hero-copy { width:min(700px,68%); }
.portfolio-hero-copy h1 { max-width:700px; color:var(--jv-text); font-size:clamp(3rem,7vw,5.7rem); line-height:.99; font-weight:600; letter-spacing:-.065em; }
.portfolio-hero-copy h1 span,.portfolio-catalog-heading h2 span,.portfolio-section-heading h2 span,.portfolio-cta h2 span { color:var(--jv-purple); -webkit-text-fill-color:var(--jv-purple); }
.portfolio-hero-copy > p:not(.company-kicker) { max-width:560px; color:var(--jv-muted); font-size:1.05rem; line-height:1.7; }
.portfolio-hero-aside { color:var(--jv-muted); font-family:'JetBrains Mono',monospace!important; font-size:.7rem; }
.portfolio-hero-aside::after { border-color:var(--jv-purple); }
.portfolio-hero-caption { font-family:'JetBrains Mono',monospace!important; font-size:.7rem; }
.portfolio-page .btn-primary { color:#fff!important; background:var(--jv-purple); border-color:var(--jv-purple); box-shadow:0 8px 24px rgba(101,56,237,.26); }
.portfolio-page .btn-primary:hover { color:#fff!important; background:#542bd4; border-color:#542bd4; }
.portfolio-page .btn-primary::after { display:none; }
.portfolio-page .company-outline-btn { color:var(--jv-text); background:rgba(255,255,255,.04); border-color:var(--jv-line); }
.portfolio-page .company-outline-btn:hover { color:#fff; background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.24); }
.portfolio-catalog,.portfolio-experience,.portfolio-process,.portfolio-results { padding:clamp(56px,8vw,100px) 0; border-color:var(--jv-line); background:var(--jv-bg); }
.portfolio-catalog-heading,.portfolio-section-heading { gap:36px; margin-bottom:28px; }
.portfolio-catalog-heading h2,.portfolio-section-heading h2 { color:var(--jv-text); font-size:clamp(2rem,4vw,3rem); line-height:1.08; font-weight:600; }
.portfolio-catalog-heading > div:last-child > p,.portfolio-section-heading > p { color:var(--jv-muted); font-size:1rem; line-height:1.7; }
.portfolio-filter-tabs { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:10px; width:auto; margin:16px 0 0; padding:0; border:0; border-radius:0; background:transparent; }
.portfolio-filter-btn { min-height:38px; padding:8px 16px; border-color:var(--jv-line); color:var(--jv-muted); background:rgba(255,255,255,.035); font-size:.875rem; }
.portfolio-filter-btn:hover,.portfolio-filter-btn.active { color:#fff; border-color:var(--jv-purple); background:var(--jv-purple); }
.portfolio-status { color:var(--jv-muted); font-size:.9375rem; }
.portfolio-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.portfolio-card { border:1px solid var(--jv-line); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); box-shadow:0 14px 44px rgba(0,0,0,.16); }
.portfolio-card:hover { border-color:rgba(167,139,250,.42); box-shadow:0 20px 48px rgba(0,0,0,.3); }
.portfolio-card-image { height:220px; background:#111620; }
.portfolio-card-image::after { background:linear-gradient(transparent,rgba(6,7,11,.35)); }
.portfolio-card-image > span { color:#fff; background:rgba(10,12,18,.86); border-color:var(--jv-line); font-size:.75rem; }
.portfolio-card-content { min-height:120px; padding:18px 62px 20px 20px; }
.portfolio-card-content h3 { color:var(--jv-text); font-size:1.25rem; }
.portfolio-card-content p { color:var(--jv-muted); font-size:.9375rem; line-height:1.6; -webkit-line-clamp:3; }
.portfolio-card-content > a { width:38px; height:38px; right:14px; background:rgba(101,56,237,.18); color:#c4b5fd; }
.portfolio-card-content > a:hover { background:var(--jv-purple); color:#fff; }
.portfolio-client-list span,.portfolio-process-grid article,.portfolio-results-grid article { border:1px solid var(--jv-line); border-radius:16px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); color:var(--jv-muted); }
.portfolio-process-grid article > span { color:#c4b5fd; }
.portfolio-process-grid article > i,.portfolio-results-grid i { color:#a78bfa; }
.portfolio-process-grid h3,.portfolio-results-grid h3 { color:var(--jv-text); font-size:1rem; }
.portfolio-process-grid p,.portfolio-results-grid p { color:var(--jv-muted); font-size:.875rem; line-height:1.55; }
.portfolio-cta { margin:20px 18px 24px; padding:64px 0; border:1px solid var(--jv-line); border-radius:24px; background:linear-gradient(90deg,rgba(6,7,11,.94),rgba(6,7,11,.78)),url('img/hero-bg.jpg') center 72% / cover no-repeat; }
.portfolio-cta h2 { max-width:700px; color:var(--jv-text); font-size:clamp(2rem,4vw,3rem); line-height:1.08; font-weight:600; }
.portfolio-page .company-footer { color:var(--jv-muted); background:#06070b; border-color:var(--jv-line); }
.portfolio-page .company-footer a { color:var(--jv-muted); }
.portfolio-page .company-footer a:hover { color:var(--jv-text); }
@media(max-width:900px) { .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .portfolio-client-list { grid-template-columns:repeat(4,minmax(0,1fr)); } .portfolio-process-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) {
 .portfolio-hero,.portfolio-hero-layout { min-height:560px; }
 .portfolio-hero-copy { width:100%; max-width:550px; padding:100px 0 36px; }
 .portfolio-hero-copy h1 { font-size:clamp(2.8rem,12vw,4rem); }
 .portfolio-hero-copy > p:not(.company-kicker) { font-size:1rem; }
 .portfolio-catalog-heading,.portfolio-section-heading { grid-template-columns:1fr; gap:14px; }
 .portfolio-grid,.portfolio-process-grid,.portfolio-results-grid { grid-template-columns:1fr; }
 .portfolio-card-image { height:200px; }
 .portfolio-client-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .portfolio-cta { margin:12px 10px 16px; padding:40px 0; }
 .portfolio-cta-inner { grid-template-columns:1fr; gap:20px; }
 .portfolio-page .company-actions { flex-direction:column; align-items:stretch; }
 .portfolio-page .company-actions .btn { width:100%; }
}