:root { --background: #1a0d0f; --foreground: #f4ece2; --card: #24141a; --muted: #2a1a1f; --muted-foreground: #a89a92; --border: rgba(120,60,60,.35); --primary: #b31b1b; --primary-hover: #cc2020; --blood: #8b1a1a; --bone: #f4ece2; --font-display: "Bebas Neue", Impact, sans-serif; --font-sans: "Inter", system-ui, -apple-system, sans-serif; }
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background-color:var(--background);background-image:radial-gradient(ellipse 80% 50% at 20% 0%,rgba(160,40,40,.35),transparent 60%),radial-gradient(ellipse 60% 40% at 80% 100%,rgba(120,30,30,.25),transparent 60%);background-attachment:fixed;color:var(--foreground);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,.brand-name{font-family:var(--font-display);font-weight:400;letter-spacing:.02em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* --- Navigation Base & Mobile View --- */
.nav-wrap{position:fixed;top:10px;left:0;right:0;margin:0 auto;z-index:50;width:min(92%,880px)}
.nav{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;border:1px solid var(--border);background:rgba(36,20,26,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:12px 16px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.brand{display:flex;align-items:center;gap:8px}
.brand-img{width:32px;height:32px;border-radius:6px;image-rendering:pixelated}
.brand-name{font-size:20px;letter-spacing:.18em;color:var(--bone)}
.menu-toggle,.menu-close{display:inline-flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--border);background:rgba(36,20,26,.4);color:var(--foreground);cursor:pointer;line-height:1;transition:all .25s}
.menu-toggle{width:42px;height:42px;font-size:22px}
.menu-close{width:36px;height:36px;font-size:18px;align-self:flex-end}
.menu-toggle:hover,.menu-close:hover{transform:translateY(-2px);background:var(--card);border-color:rgba(204,32,32,.55)}
.nav-links{display:none;position:fixed;top:0;right:0;width:min(66vw,170px);height:100vh;flex-direction:column;gap:16px;font-size:15px;color:var(--muted-foreground);padding:12px 16px 24px;background:rgba(26,13,15,.96);border-left:1px solid var(--border);box-shadow:-24px 0 40px rgba(0,0,0,.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transform:translateX(100%);transition:transform .3s;z-index:60}
.nav-links.is-open{display:flex;transform:translateX(0)}
.nav-links a{padding:10px 0;border-bottom:1px solid rgba(120,60,60,.22);transition:color .2s}
.nav-links a:hover{color:var(--foreground)}

/* --- Desktop Override --- */
@media(min-width:640px){
  .menu-toggle,.menu-close{display:none}
  .nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);background:rgba(36,20,26,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:12px 16px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
  .nav{border:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;box-shadow:none;width:auto}
  .nav-links{display:flex;position:static;width:auto;height:auto;transform:none;flex-direction:row;align-items:center;gap:24px;padding:0;margin-left:auto;border:none;box-shadow:none;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-links a{padding:0;border:none}
}

/* Layout Utilities */
.section{padding:96px 24px}
.container{max-width:1120px;margin:0 auto}
.container-narrow{max-width:768px;margin:0 auto}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.3em;color:var(--primary);margin-bottom:12px}
.section-title{font-size:clamp(2.5rem,6vw,4rem);color:var(--bone);line-height:1}
.contact-title{font-size:clamp(1.25rem,2.8vw,2rem);max-width:16ch;margin:0 auto}
.lead{margin-top:24px;font-size:18px;line-height:1.6;color:var(--muted-foreground);max-width:640px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;gap:20px}
.count{color:var(--muted-foreground);font-size:14px}

/* Hero Section */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:128px 24px 80px}
.hero-inner{margin:0 auto;max-width:1120px;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
.hero-copy{order:2}
.hero-avatar{order:1;position:relative;display:flex;justify-content:center}
@media(min-width:768px){.hero-inner{grid-template-columns:1fr 1fr}.hero-copy{order:1}.hero-avatar{order:2}}
.hero-title{font-size:clamp(3.75rem,10vw,8rem);line-height:.9}
.hero-sub{color:var(--muted-foreground);font-size:clamp(2.25rem,6vw,4rem);display:inline-block}
.text-gradient-blood{background:linear-gradient(180deg,var(--bone) 0%,var(--bone) 55%,var(--blood) 100%);-webkit-background-clip:text;color:transparent}

/* Buttons */
.cta-row{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.cta-row.center{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:10px;font:600 14px var(--font-sans);cursor:pointer;border:1px solid transparent;transition:all .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(179,27,27,.35)}
.btn-primary:hover{background:var(--primary-hover);box-shadow:0 14px 28px rgba(179,27,27,.42)}
.btn-ghost{background:rgba(36,20,26,.4);color:var(--foreground);border-color:var(--border)}
.btn-ghost:hover{background:var(--card);border-color:rgba(204,32,32,.55)}

/* Visual Elements */
.avatar-glow{position:absolute;inset:0;filter:blur(60px);background:rgba(179,27,27,.3);border-radius:50%}
.avatar-img{position:relative;width:min(80%,384px);image-rendering:pixelated;filter:drop-shadow(0 20px 40px rgba(139,26,26,.6))}
.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);color:var(--muted-foreground);font-size:12px;letter-spacing:.25em}

/* Gallery Grid */
.gallery{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:640px){.gallery{grid-template-columns:repeat(2,1fr)}}
.thumb{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--border);background:var(--card)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.thumb:hover img{transform:scale(1.05)}

/* Contact / Footer */
.contact-card{max-width:768px;margin:0 auto;border:1px solid var(--border);background:rgba(36,20,26,.6);backdrop-filter:blur(10px);padding:32px 24px;border-radius:24px;text-align:center}
@media(min-width:768px){.contact-card{padding:40px}}
.footer{border-top:1px solid var(--border);padding:32px;text-align:center;font-size:12px;color:var(--muted-foreground)}
.footer-link{color:var(--primary-hover);font-weight:600;transition:all .25s}
.footer-link:hover{color:var(--bone);text-shadow:0 0 12px rgba(244,236,226,.25)}

/* Noise Grain */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/></svg>");mix-blend-mode:overlay;opacity:.35;border-radius:inherit}

/* Mobile Adjustments */
@media(max-width:640px){
  .section{padding:72px 16px}
  .hero{padding:112px 16px 72px}
  .hero-sub{font-size:clamp(1.8rem,10vw,2.8rem)}
  .lead{font-size:16px}
  .contact-title{max-width:100%;font-size:clamp(1.1rem,5vw,1.6rem)}
  .contact-card{padding:24px 16px}
  .cta-row{justify-content:center;gap:10px}
  .footer{padding:24px 16px;line-height:1.5}
}