*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #080c14; color: #e2e8f0; font-family: 'DM Sans', sans-serif; overflow-x: hidden; }

@keyframes fadeUp   { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:translateY(0) } }
@keyframes pulseGlow{ 0%,100%{opacity:.35} 50%{opacity:.65} }

/* ── BG ── */
.bg { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.bg-grid { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(37,99,235,.10) 1px,transparent 1px); background-size:36px 36px; }
.bg-g1   { position:absolute; top:-240px; right:-240px; width:700px; height:700px; background:radial-gradient(circle,rgba(37,99,235,.13) 0%,transparent 70%); animation:pulseGlow 7s ease-in-out infinite; }
.bg-g2   { position:absolute; bottom:-200px; left:-200px; width:560px; height:560px; background:radial-gradient(circle,rgba(37,99,235,.08) 0%,transparent 70%); animation:pulseGlow 9s ease-in-out infinite 3s; }

/* ── NAV ── */
nav { position:sticky; top:0; z-index:200; width:100%; display:flex; justify-content:space-between; align-items:center; padding:18px 56px; background:rgba(8,12,20,.88); backdrop-filter:blur(20px); border-bottom:1px solid rgba(37,99,235,.12); }
.nav-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo { height:30px; width:30px; object-fit:contain; background:#fff; border-radius:8px; padding:4px; box-sizing:border-box; display:block; }
.nav-logo-text { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:800; letter-spacing:1px; color:#e2e8f0; line-height:1; display:flex; flex-direction:column; }
.nav-logo-sub { font-size:9px; font-weight:600; letter-spacing:2.5px; color:#64748b; margin-top:3px; }
.nav-links { display:flex; align-items:center; gap:40px; }
.nav-links a { color:#64748b; text-decoration:none; font-size:13px; font-weight:500; letter-spacing:.3px; transition:color .2s; }
.nav-links a:hover { color:#e2e8f0; }
.lang-btn { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:#2563eb; border:1px solid rgba(37,99,235,.35); background:rgba(37,99,235,.07); padding:7px 16px; border-radius:5px; cursor:pointer; letter-spacing:1.5px; transition:all .2s; }
.lang-btn:hover { background:rgba(37,99,235,.18); border-color:rgba(37,99,235,.6); }

/* ── LAYOUT ── */
.wrap { max-width:1200px; margin:0 auto; padding:88px 56px; position:relative; z-index:1; }
.lbl { font-family:'JetBrains Mono',monospace; font-size:11px; color:#2563eb; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px; }
.ttl { font-family:'Barlow Condensed',sans-serif; font-size:clamp(38px,5vw,58px); font-weight:700; color:#e2e8f0; letter-spacing:-.5px; margin-bottom:52px; }
.div  { max-width:1200px; margin:0 auto; padding:0 56px; position:relative; z-index:1; }
.div-line { height:1px; background:linear-gradient(to right,transparent,rgba(37,99,235,.18),transparent); }

/* ── HERO ── */
.hero { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; padding:20px 56px 64px; }
.hero::before { content:''; position:absolute; top:50%; left:50%; width:min(1400px,150%); height:900px; transform:translate(-50%,-50%); background:radial-gradient(ellipse at center, rgba(37,99,235,.16) 0%, rgba(37,99,235,.06) 35%, transparent 70%); pointer-events:none; z-index:0; }
.hero-card { position:relative; z-index:1; max-width:760px; width:100%; border-radius:20px; overflow:hidden; background:#0b1422; border:1px solid rgba(37,99,235,.25); box-shadow:0 24px 60px rgba(0,0,0,.5), 0 0 40px rgba(37,99,235,.1); animation:fadeUp 1s ease both; }
@media (min-width:1400px) { .hero-card { max-width:1180px; } }
.hero-frame { position:relative; width:100%; padding-top:28px; display:flex; align-items:center; justify-content:center; background:#000; overflow:hidden; }
.hero-frame::before { content:''; position:absolute; inset:-20px; background:url('forja-hero.jpg') center/cover no-repeat; filter:blur(38px) brightness(.55) saturate(1.25); transform:scale(1.15); z-index:0; }
.hero-frame::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, transparent 60%, #0b1422 100%); z-index:1; }
.hero-img { position:relative; z-index:2; width:auto; height:auto; max-width:92%; max-height:640px; object-fit:contain; display:block; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); opacity:0; transition:opacity .6s ease; }
.hero-img.is-loaded { opacity:1; }
.hero-in { width:100%; padding:36px 40px 44px; text-align:center; }
.hero-mono { font-family:'JetBrains Mono',monospace; font-size:13px; color:#2563eb; margin-bottom:14px; letter-spacing:2.5px; text-transform:uppercase; }
.hero-title { font-family:'Barlow Condensed',sans-serif; font-size:clamp(22px,2.6vw,28px); font-weight:700; color:#e2e8f0; line-height:1.2; margin:0 0 16px; letter-spacing:-.3px; }
.hero-sub { font-size:15.5px; color:#94a3b8; line-height:1.75; margin:0 0 36px; }
.hero-cta { display:flex; gap:14px; justify-content:center; flex-wrap:nowrap; }

@media (min-width:900px) {
  .hero-card { display:flex; flex-direction:row; align-items:stretch; max-width:1080px; }
  .hero-frame { flex:0 0 46%; padding:0; }
  .hero-frame::after { background:linear-gradient(to right, transparent 82%, #0b1422 100%); }
  .hero-img { width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
  .hero-in { flex:1; display:flex; flex-direction:column; justify-content:center; text-align:left; padding:48px 56px; }
  .hero-title, .hero-sub { max-width:460px; }
  .hero-cta { justify-content:flex-start; }
}

/* ── BUTTONS ── */
.btn-p { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 24px; background:#2563eb; color:#fff; text-decoration:none; font-size:14px; font-weight:600; border-radius:7px; white-space:nowrap; transition:all .2s; }
.btn-p:hover { background:#1d4ed8; transform:translateY(-3px); box-shadow:0 12px 32px rgba(37,99,235,.35); }
.btn-icon { flex-shrink:0; }
.btn-o { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 24px; border:1px solid rgba(37,99,235,.3); color:#94a3b8; text-decoration:none; font-size:14px; font-weight:500; border-radius:7px; background:transparent; white-space:nowrap; transition:all .2s; }
.btn-o:hover { border-color:#2563eb; color:#e2e8f0; transform:translateY(-3px); }

/* ── SERVICES ── */
.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.svc-card { background:#0b1422; border:1px solid rgba(37,99,235,.11); border-radius:14px; padding:32px 28px; transition:all .25s; }
.svc-card:hover { border-color:rgba(37,99,235,.38); transform:translateY(-5px); box-shadow:0 16px 48px rgba(0,0,0,.4); }
.svc-icon { width:48px; height:48px; background:rgba(37,99,235,.1); border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:24px; }
.svc-name { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:700; color:#e2e8f0; margin-bottom:12px; }
.svc-desc { font-size:13.5px; color:#64748b; line-height:1.75; }

/* ── PROJECTS ── */
.prj-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:18px; }
.prj-card { background:#0b1422; border:1px solid rgba(37,99,235,.11); border-radius:14px; padding:28px; display:flex; flex-direction:column; transition:border-color .25s; }
.prj-card:hover { border-color:rgba(37,99,235,.32); }
.prj-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; gap:12px; }
.prj-icon { width:44px; height:44px; background:rgba(37,99,235,.1); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.prj-closed { font-family:'JetBrains Mono',monospace; font-size:9.5px; color:#475569; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); padding:4px 11px; border-radius:20px; white-space:nowrap; align-self:center; flex-shrink:0; }
.prj-name { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; color:#e2e8f0; margin-bottom:10px; line-height:1.2; }
.prj-desc { font-size:13px; color:#64748b; line-height:1.75; flex:1; margin-bottom:18px; }
.prj-tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-family:'JetBrains Mono',monospace; font-size:10px; padding:3px 9px; border-radius:4px; background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.18); color:#7ca5d4; }

/* ── STACK ── */
.stk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.stk-card { background:#0b1422; border:1px solid rgba(37,99,235,.11); border-radius:12px; padding:22px 20px; }
.stk-name { font-family:'JetBrains Mono',monospace; font-size:9.5px; color:#2563eb; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid rgba(37,99,235,.12); }
.stk-items { display:flex; flex-wrap:wrap; gap:6px; }
.stk-item { font-size:12px; padding:4px 10px; border-radius:5px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); color:#94a3b8; }

/* ── CONTACT ── */
.ct-sec { position:relative; z-index:1; padding:88px 56px 120px; text-align:center; }
.ct-in { max-width:640px; margin:0 auto; }
.ct-ttl { font-family:'Barlow Condensed',sans-serif; font-size:clamp(38px,5vw,62px); font-weight:700; color:#e2e8f0; letter-spacing:-.5px; margin-bottom:18px; line-height:.95; }
.ct-sub { font-size:16px; color:#64748b; margin-bottom:52px; line-height:1.6; }
.ct-grid { display:grid; grid-template-columns:1fr; gap:14px; max-width:280px; margin:0 auto; }
.ct-card { background:#0b1422; border:1px solid rgba(37,99,235,.18); border-radius:14px; padding:28px 20px; text-decoration:none; color:inherit; display:flex; flex-direction:column; align-items:center; gap:12px; transition:all .25s; }
.ct-card:hover { border-color:#2563eb; transform:translateY(-5px); box-shadow:0 16px 48px rgba(0,0,0,.45); }
.ct-icon { width:44px; height:44px; background:rgba(37,99,235,.1); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.ct-lbl { font-family:'JetBrains Mono',monospace; font-size:8.5px; color:#475569; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:6px; }
.ct-val { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#94a3b8; font-weight:500; line-height:1.5; word-break:break-all; }

/* ── FOOTER ── */
footer { position:relative; z-index:1; border-top:1px solid rgba(37,99,235,.10); padding:24px 56px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.ft-brand { display:flex; align-items:center; gap:10px; }
.ft-icon { width:22px; height:22px; background:#2563eb; border-radius:3px; display:flex; align-items:center; justify-content:center; }
.ft-icon span { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:800; color:#fff; line-height:1; }
.ft-name { font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700; letter-spacing:2px; color:#334155; }
.ft-copy { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#334155; }

@media (max-width:768px) {
  nav,.wrap,.div,.ct-sec,footer { padding-left:24px; padding-right:24px; }
  .nav-links a { display:none; }
  .hero { padding:16px 24px 48px; }
  .hero-in { padding:28px 24px 32px; }
  .hero-frame { padding-top:20px; }
  .hero-img { max-width:92%; max-height:480px; }
  .hero-cta { gap:8px; }
  .btn-p, .btn-o { padding:13px 10px; font-size:12.5px; }
  .prj-grid { grid-template-columns:1fr; }
}