/* ================================================
   LANDING CSS — Hero, Metrics, Marquee, Services, Projects, Process, CTA, Contact, Cursor, Canvas
   KLD Soluciones Theme v2.0.0
=============================================== */

/* ================================================
   CANVAS BG
=============================================== */
#kld-canvas { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* ================================================
   CURSOR
=============================================== */
.cursor { position:fixed; border-radius:50%; pointer-events:none; z-index:99999; mix-blend-mode:exclusion; transform:translate(-50%,-50%); left:0; top:0; will-change:transform; }
.cursor-dot { width:8px; height:8px; background:#fff; }
.cursor-ring { width:40px; height:40px; border:1.5px solid rgba(255,255,255,0.55); background:transparent; transition:width .4s var(--ease), height .4s var(--ease), opacity .4s; }
.cursor-ring.hovered { width:60px; height:60px; opacity:.45; }
@media (hover:none) { .cursor { display:none; } }

/* ================================================
   HERO
=============================================== */
.hero {
  position:relative; min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + clamp(3rem,8vh,6rem)) 4vw clamp(4rem,8vh,6rem);
  overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0;
  background-image: url('assets/images/hero-bg.webp');
  background-size:cover; background-position:center;
  opacity:0; z-index:0; transform-origin:center;
  animation:kbFadeIn 1.2s ease .3s forwards, kenBurns 18s ease-in-out 1.5s infinite alternate;
}
@keyframes kbFadeIn { to { opacity:.13; } }
@keyframes kenBurns { from { transform:scale(1); } to { transform:scale(1.07); } }
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(11,11,15,.15) 0%, rgba(11,11,15,.05) 30%, rgba(11,11,15,.75) 75%, rgba(11,11,15,1) 100%);
}
.hero-content { position:relative; z-index:2; max-width:950px; }
.hero-label {
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.68rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent2); margin-bottom:1.75rem;
  opacity:0; transform:translateX(-16px);
  transition:opacity .7s ease .2s, transform .7s var(--ease) .2s;
}
.hero-label::before { content:''; width:28px; height:1px; background:var(--accent2); }
.hero-label.visible { opacity:1; transform:translateX(0); }
.hero-title {
  font-size:clamp(2.8rem,7.5vw,7rem); font-weight:900; line-height:1.03;
  letter-spacing:-.035em; margin-bottom:1.75rem; overflow:visible;
}
.hero-title .word { display:inline-block; transform:translateY(110%); opacity:0; transition:transform 1.1s var(--ease), opacity .75s ease; will-change:transform; }
.hero-title .word.visible { transform:translateY(0); opacity:1; }
.accent-word { background:linear-gradient(100deg,var(--accent2) 0%,#93c5fd 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-sub {
  font-size:clamp(.95rem,1.55vw,1.3rem); line-height:1.7; color:var(--muted); max-width:580px;
  opacity:0; transform:translateY(18px); transition:opacity .9s ease .7s, transform .9s var(--ease) .7s;
}
.hero-sub.visible { opacity:1; transform:translateY(0); }
.hero-actions {
  display:flex; gap:1rem; flex-wrap:wrap; margin-top:2.5rem;
  opacity:0; transform:translateY(18px); transition:opacity .9s ease .95s, transform .9s var(--ease) .95s;
}
.hero-actions.visible { opacity:1; transform:translateY(0); }
.hero-scroll {
  position:absolute; bottom:2.5rem; right:4vw; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.6rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:var(--muted); writing-mode:vertical-lr;
  opacity:0; animation:fadeUp 1s ease 1.8s forwards;
}
.hero-scroll::before { content:''; width:1px; height:56px; background:linear-gradient(to bottom,transparent,var(--muted)); animation:scrollPulse 2.2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:.3;transform:scaleY(.4);transform-origin:top;} 50%{opacity:1;transform:scaleY(1);} }
@keyframes fadeUp { to { opacity:1; } }

/* ================================================
   METRICS
=============================================== */
.metrics { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.metric { padding:3rem 4vw; border-right:1px solid var(--border); opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s var(--ease); }
.metric:last-child { border-right:none; }
.metric.visible { opacity:1; transform:translateY(0); }
.metric-value {
  font-size:clamp(2.4rem,4vw,3.4rem); font-weight:900; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(135deg,var(--text) 0%,var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.metric-label { font-size:.78rem; color:var(--muted); margin-top:.5rem; font-weight:500; }
@media (max-width:768px) {
  .metrics { grid-template-columns:repeat(2,1fr); }
  .metric { border-right:none; border-bottom:1px solid var(--border); }
  .metric:nth-child(2n) { border-left:1px solid var(--border); }
}

/* ================================================
   SECTIONS (Shared)
=============================================== */
.section { position:relative; z-index:1; padding:clamp(5rem,10vw,9rem) 4vw; }
.section-inner { max-width:1280px; margin:0 auto; }
.section-label { display:inline-flex; align-items:center; gap:.75rem; font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent2); margin-bottom:1.5rem; }
.section-label::before { content:''; width:28px; height:1px; background:var(--accent2); }
.section-title { font-size:clamp(2rem,4vw,3.5rem); font-weight:800; letter-spacing:-.025em; line-height:1.1; }

/* ================================================
   MARQUEE
=============================================== */
.marquee-section { position:relative; z-index:1; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:1.4rem 0; }
.marquee-track { display:flex; gap:4rem; animation:marqueeScroll 25s linear infinite; white-space:nowrap; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item { flex-shrink:0; font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:1.5rem; }
.marquee-item::after { content:'✦'; color:var(--accent2); font-size:.55rem; }
@keyframes marqueeScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ================================================
   PROJECTS
=============================================== */
.projects-section { background:var(--surface); }
.projects-header { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:4.5rem; flex-wrap:wrap; }
.projects-grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:1.5rem; }
.project-card {
  position:relative; border-radius:16px; overflow:hidden; background:var(--surface2);
  border:1px solid var(--border); cursor:pointer;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s;
  transform-style:preserve-3d; will-change:transform;
}
.project-card:hover { box-shadow:0 32px 64px rgba(0,0,0,.55), 0 0 0 1px rgba(37,99,235,.2); border-color:rgba(37,99,235,.28); }
.project-card-large { grid-row:span 2; display:flex; flex-direction:column; }
.project-img-placeholder { width:100%; aspect-ratio:16/10; overflow:hidden; position:relative; }
.project-card-large .project-img-placeholder { aspect-ratio:auto; flex-grow:1; height:100%; min-height:400px; }
.project-img-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.project-card:hover .project-img-video { transform:scale(1.05); }
.project-strip { padding:1.2rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; background:var(--surface2); position:relative; z-index:1; flex-shrink:0; }
.project-strip-tag { font-size:.62rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--accent2); margin-bottom:.2rem; }
.project-strip-title, .nav-links a:hover, .nav-links a.active, .current-menu-item > a { color:var(--text); }
.nav-links a:hover::after, .nav-links a.active::after, .current-menu-item > a::after { width:100%; }
.project-strip-arrow { width:34px; height:34px; border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s, border-color .3s, transform .35s var(--ease); }
.project-card:hover .project-strip-arrow { background:var(--accent); border-color:var(--accent); transform:translateX(4px); }
@media (max-width:900px) { .projects-grid { grid-template-columns:1fr; } .project-card-large { grid-row:auto; } .project-card-large .project-img-placeholder { min-height:300px; } }

/* ================================================
   SERVICES (8 items)
=============================================== */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3.5rem; }
.service-card {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:2.25rem 1.75rem; position:relative; overflow:hidden;
  transition:border-color .45s, transform .45s var(--ease), box-shadow .45s; cursor:pointer;
}
.service-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 40%,var(--glow) 0%,transparent 60%); opacity:0; transition:opacity .5s; pointer-events:none; }
.service-card:hover { border-color:rgba(37,99,235,.38); transform:translateY(-8px); box-shadow:0 24px 48px rgba(0,0,0,.4); }
.service-card:hover::before { opacity:1; }
.service-number { font-size:.62rem; font-weight:700; letter-spacing:.2em; color:var(--accent2); margin-bottom:1.5rem; }
.service-icon { font-size:1.9rem; margin-bottom:1.2rem; display:block; }
.service-title { font-size:1.08rem; font-weight:700; line-height:1.3; margin-bottom:.85rem; }
.service-desc { font-size:.875rem; line-height:1.7; color:var(--muted); }
.service-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:600; color:var(--accent2); margin-top:1.5rem; border-bottom:1px solid transparent; transition:border-color .3s, gap .3s var(--ease); }
.service-card:hover .service-link { border-color:var(--accent2); gap:.75rem; }
@media (max-width:1024px) { .services-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .services-grid { grid-template-columns:1fr; } }

/* ================================================
   PROCESS
=============================================== */
.process-section { background:var(--surface); }
.process-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden; margin-top:3.5rem; }
.process-step { background:var(--surface); padding:3rem 2.25rem; transition:background .4s; }
.process-step:hover { background:var(--surface2); }
.process-step-num { font-size:4.5rem; font-weight:900; letter-spacing:-.04em; line-height:1; color:var(--border); margin-bottom:1.5rem; transition:color .4s; }
.process-step:hover .process-step-num { color:rgba(37,99,235,.14); }
.process-step-title { font-size:1.05rem; font-weight:700; margin-bottom:.75rem; }
.process-step-desc { font-size:.875rem; line-height:1.7; color:var(--muted); }
@media (max-width:768px) { .process-grid { grid-template-columns:1fr; } }

/* ================================================
   CTA
=============================================== */
.cta-section { position:relative; overflow:hidden; }
.cta-section::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(800px,90vw); height:min(600px,80vh); background:radial-gradient(ellipse,rgba(37,99,235,.1) 0%,transparent 70%); pointer-events:none; }
.cta-inner { max-width:800px; margin:0 auto; text-align:center; }
.cta-title { font-size:clamp(2.5rem,5vw,4.5rem); font-weight:900; letter-spacing:-.03em; line-height:1.05; margin-bottom:1.5rem; }
.cta-sub { font-size:clamp(.95rem,1.4vw,1.2rem); color:var(--muted); line-height:1.7; margin-bottom:3rem; }
.cta-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ================================================
   CONTACT
=============================================== */
.contact-section { background:var(--surface); }
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:start; }
.contact-info-label { font-size:.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.65rem; }
.contact-info-value { font-size:1rem; color:var(--text); margin-bottom:2rem; }
.contact-info-value a { color:var(--accent2); transition:opacity .25s; }
.contact-info-value a:hover { opacity:.8; }
@media (max-width:900px) { .contact-grid { grid-template-columns:1fr; gap:3rem; } }

.form-group { margin-bottom:1.5rem; }
.form-label { display:block; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem; }
.form-control {
  width:100%; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.875rem 1.1rem;
  font-family:var(--font); font-size:.9rem; color:var(--text); transition:border-color .3s, box-shadow .3s; outline:none;
}
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control { resize:vertical; min-height:140px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:640px) { .form-row { grid-template-columns:1fr; } }

/* ================================================
   BLOG PREVIEW (on landing)
=============================================== */
.blog-preview-section { position:relative; z-index:1; padding:6rem 4vw; background:var(--bg); border-top:1px solid var(--border); }
.blog-preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:2rem; }

/* ================================================
   INNER PAGE HERO (Servicios, Proyectos, Soluciones)
=============================================== */
.inner-hero { position:relative; padding:calc(var(--nav-h) + 6rem) 4vw 4rem; background:radial-gradient(ellipse at center top,rgba(37,99,235,0.1) 0%,transparent 70%); text-align:center; border-bottom:1px solid var(--border); overflow:hidden; }
.inner-hero::before { content:''; position:absolute; inset:0; background:url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>'); opacity:0.04; pointer-events:none; mix-blend-mode:overlay; }
.inner-label { font-size:.75rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent2); margin-bottom:1rem; display:block; }
.inner-title { font-size:clamp(2.5rem,6vw,4.5rem); font-weight:900; letter-spacing:-.03em; line-height:1.1; margin-bottom:1.5rem; }
.inner-sub { font-size:clamp(1rem,1.4vw,1.2rem); color:var(--muted); max-width:600px; margin:0 auto; line-height:1.7; }

/* ================================================
   SERVICE DETAIL SECTIONS (Servicios page)
=============================================== */
.service-detail { padding:clamp(5rem,8vw,7rem) 4vw; border-bottom:1px solid var(--border); }
.service-detail:nth-child(even) { background:var(--surface); }
.service-inner { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.service-inner.reverse { grid-template-columns:1fr 1fr; direction:rtl; }
.service-inner.reverse > * { direction:ltr; }
.sd-num { font-size:5rem; font-weight:900; color:rgba(255,255,255,.03); line-height:0.8; margin-bottom:1rem; }
.sd-title { font-size:2.2rem; font-weight:800; letter-spacing:-.02em; margin-bottom:1.5rem; display:flex; align-items:center; gap:1rem; }
.sd-desc { font-size:1rem; line-height:1.7; color:var(--muted); margin-bottom:2rem; }
.sd-features { list-style:none; margin-bottom:2.5rem; }
.sd-features li { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; font-size:.95rem; font-weight:500; }
.sd-features li::before { content:'✓'; color:var(--accent2); font-weight:700; }
.sd-visual { position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/3; background:var(--surface2); border:1px solid var(--border); box-shadow:0 24px 48px rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; }
.sd-visual::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(37,99,235,.15) 0%,transparent 70%); }
.sd-visual-icon { font-size:6rem; position:relative; z-index:2; opacity:.8; transform:scale(1); transition:transform .5s var(--ease); }
.service-detail:hover .sd-visual-icon { transform:scale(1.15) rotate(5deg); }
@media (max-width:900px) { .service-inner, .service-inner.reverse { grid-template-columns:1fr; gap:3rem; } .sd-visual { order:-1; } }

/* ================================================
   SOLUCION DETAIL (CPT single)
=============================================== */
.solucion-hero { padding:calc(var(--nav-h) + 4rem) 4vw 3rem; text-align:center; background:radial-gradient(ellipse at center top,rgba(37,99,235,0.08) 0%,transparent 70%); border-bottom:1px solid var(--border); }
.solucion-category { font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent2); margin-bottom:1rem; display:block; }
.solucion-title { font-size:clamp(2rem,5vw,3.5rem); font-weight:900; letter-spacing:-.03em; line-height:1.1; margin-bottom:1.5rem; max-width:800px; margin-left:auto; margin-right:auto; }
.solucion-content { max-width:800px; margin:0 auto; padding:4rem 4vw 6rem; }
.solucion-content h2 { font-size:1.75rem; font-weight:700; margin-top:3rem; margin-bottom:1rem; color:var(--text); }
.solucion-content h3 { font-size:1.4rem; font-weight:700; margin-top:2rem; margin-bottom:.75rem; color:var(--text); }
.solucion-content p { font-size:1.05rem; line-height:1.85; color:#d1d1d6; margin-bottom:1.5rem; }
.solucion-content ul, .solucion-content ol { margin-bottom:1.5rem; padding-left:1.5rem; }
.solucion-content li { margin-bottom:.5rem; font-size:1rem; line-height:1.7; color:#d1d1d6; }
.solucion-content a { color:var(--accent2); border-bottom:1px dashed var(--accent2); }
.solucion-content a:hover { color:#fff; border-bottom-style:solid; }
.solucion-content blockquote { border-left:3px solid var(--accent); padding-left:1.5rem; margin:2rem 0; font-style:italic; color:#fff; }

/* ================================================
   BLOG STYLES
=============================================== */
.blog-header { padding:calc(var(--nav-h) + 4rem) 4vw 2rem; max-width:1200px; margin:0 auto; }
.blog-title { font-size:clamp(2.5rem,5vw,4.5rem); font-weight:900; line-height:1.05; letter-spacing:-.03em; margin-bottom:1rem; }
.blog-title span { background:linear-gradient(100deg,var(--accent2) 0%,#93c5fd 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.blog-desc { font-size:clamp(1rem,1.5vw,1.2rem); color:var(--muted); max-width:600px; line-height:1.7; }
.blog-content { padding:2rem 4vw 6rem; max-width:1200px; margin:0 auto; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(350px,1fr)); gap:2rem; }

.post-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.post-card:hover { transform:translateY(-6px); border-color:rgba(37,99,235,.38); box-shadow:0 24px 48px rgba(0,0,0,.4); }
.post-card-img-link { width:100%; aspect-ratio:16/9; display:block; overflow:hidden; background:var(--surface2); position:relative; }
.post-card-img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.post-card:hover .post-card-img { transform:scale(1.05); }
.post-card-body { padding:1.75rem; display:flex; flex-direction:column; flex-grow:1; }
.post-card-meta { font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent2); margin-bottom:.75rem; display:flex; gap:.75rem; }
.post-card-title { font-size:1.25rem; font-weight:700; line-height:1.3; margin-bottom:.75rem; color:var(--text); }
.post-card-title a:hover { color:var(--accent2); }
.post-card-excerpt { font-size:.9rem; line-height:1.6; color:var(--muted); margin-bottom:1.5rem; flex-grow:1; }
.post-card-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:var(--accent2); margin-top:auto; }
.post-card-link span { transition:transform .3s var(--ease); }
.post-card:hover .post-card-link span { transform:translateX(4px); }

.single-post-container { padding:calc(var(--nav-h) + 4rem) 4vw 6rem; max-width:800px; margin:0 auto; min-height:80vh; }
.post-meta-top { font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--accent2); margin-bottom:1.5rem; display:flex; gap:1rem; }
.post-single-title { font-size:clamp(2.2rem,4vw,3.5rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:2rem; color:#ffffff; }
.post-featured-image { margin-bottom:3rem; border-radius:16px; overflow:hidden; border:1px solid var(--border); }
.post-featured-image img { width:100%; max-height:480px; object-fit:cover; }
.post-content-body { font-size:1.05rem; line-height:1.85; color:#d1d1d6; }
.post-content-body h2, .post-content-body h3, .post-content-body h4 { color:#ffffff; font-weight:700; letter-spacing:-.015em; margin-top:2.5rem; margin-bottom:1rem; line-height:1.3; }
.post-content-body h2 { font-size:1.75rem; }
.post-content-body h3 { font-size:1.4rem; }
.post-content-body p { margin-bottom:1.75rem; }
.post-content-body blockquote { border-left:3px solid var(--accent); padding-left:1.5rem; margin:2rem 0; font-style:italic; color:#ffffff; }
.post-content-body ul, .post-content-body ol { margin-bottom:1.75rem; padding-left:1.5rem; }
.post-content-body li { margin-bottom:.5rem; }
.post-content-body a { color:var(--accent2); border-bottom:1px dashed var(--accent2); }
.post-content-body a:hover { color:#ffffff; border-bottom-style:solid; }

/* Pagination */
.pagination { display:flex; justify-content:center; gap:.5rem; margin-top:4rem; }
.pagination .page-numbers { padding:.5rem 1rem; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--muted); font-weight:600; font-size:.88rem; }
.pagination .page-numbers:hover, .pagination .page-numbers.current { background:var(--accent); border-color:var(--accent); color:#ffffff; }

/* 404 */
.error-404 { padding:calc(var(--nav-h) + 6rem) 4vw 6rem; text-align:center; }
.error-404 h1 { font-size:clamp(4rem,10vw,8rem); font-weight:900; color:var(--border); line-height:1; margin-bottom:1rem; }
.error-404 p { font-size:1.1rem; color:var(--muted); margin-bottom:2rem; }