:root{
    --bg:#050505;
    --bg2:#120000;
    --steel:#b8b0a2;
    --bone:#e8dfcf;
    --blood:#6d0000;
    --blood2:#b30000;
    --gold:#8e6b2f;
    --shadow:rgba(0,0,0,.65);
    --panel:rgba(10,10,10,.72);
    --line:rgba(231,223,209,.18);
}

*{box-sizing:border-box;margin:0;padding:0;}

html, body{
    width:100%;
    min-height:100%;
}

body{
    font-family:Georgia, "Times New Roman", serif;
    color:var(--bone);
    background:
        radial-gradient(circle at 20% 20%, rgba(179,0,0,.18), transparent 26%),
        radial-gradient(circle at 80% 25%, rgba(255,120,0,.08), transparent 20%),
        linear-gradient(180deg, rgba(18,0,0,.92), rgba(5,5,5,.98)),
        url("metalbackground.jpg") center center / cover no-repeat fixed;
    position:relative;
    overflow-x:hidden;
}

/* intro */
.intro-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(circle at center, rgba(120,0,0,.18), transparent 30%),
        linear-gradient(180deg, rgba(0,0,0,.96), rgba(20,0,0,.96));
    transition:opacity 1.2s ease, visibility 1.2s ease;
}
.intro-overlay.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.intro-mark{
    text-align:center;
    animation:introPulse 2.2s ease-in-out infinite;
}
.intro-small{
    color:#b89e72;
    letter-spacing:.45em;
    font-size:clamp(.8rem, 1.1vw, 1rem);
    margin-bottom:12px;
    text-transform:uppercase;
}
.intro-big{
    color:#e5dccb;
    font-size:clamp(1.8rem, 5vw, 4.5rem);
    letter-spacing:.22em;
    text-transform:uppercase;
    text-shadow:
        0 0 12px rgba(255,255,255,.08),
        0 0 28px rgba(140,0,0,.35),
        0 10px 30px rgba(0,0,0,.75);
}

/* ambience */
.bg-shift, .vignette, .embers, .particles, .mouse-glow{
    position:fixed;
    inset:0;
    pointer-events:none;
}
.bg-shift{
    background:
        radial-gradient(circle at 50% 10%, rgba(255,255,255,.05), transparent 18%),
        radial-gradient(circle at 50% 100%, rgba(255,80,0,.08), transparent 22%);
    animation:bgPulse 8s ease-in-out infinite;
    z-index:0;
}
.vignette{
    background:radial-gradient(circle, transparent 45%, rgba(0,0,0,.55) 100%);
    z-index:0;
}
.embers{
    z-index:0;
    overflow:hidden;
}
.embers::before,
.embers::after{
    content:"";
    position:absolute;
    left:-10%;
    right:-10%;
    bottom:-5%;
    height:28vh;
    background:
        radial-gradient(circle at 10% 100%, rgba(255,130,20,.18), transparent 24%),
        radial-gradient(circle at 28% 100%, rgba(255,60,0,.15), transparent 26%),
        radial-gradient(circle at 48% 100%, rgba(255,160,40,.12), transparent 25%),
        radial-gradient(circle at 68% 100%, rgba(255,70,0,.15), transparent 26%),
        radial-gradient(circle at 88% 100%, rgba(255,130,20,.15), transparent 24%);
    filter:blur(14px);
    animation:emberGlow 3.8s ease-in-out infinite;
}
.embers::after{ animation-delay:1.8s; opacity:.55; }

.mouse-glow{
    width:280px;
    height:280px;
    margin-left:-140px;
    margin-top:-140px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(160,0,0,.16) 0%, rgba(255,120,0,.06) 28%, transparent 68%);
    z-index:0;
    filter:blur(18px);
}
.particles{
    z-index:0;
    overflow:hidden;
}
.particle{
    position:absolute;
    bottom:-20px;
    width:4px;
    height:4px;
    border-radius:50%;
    background:rgba(255,170,90,.85);
    box-shadow:0 0 10px rgba(255,110,20,.55);
    animation:floatParticle linear infinite;
}

/* structure */
.site-wrap{
    position:relative;
    z-index:1;
    width:min(1600px, 100%);
    min-height:100vh;
    display:grid;
    grid-template-rows:1fr auto;
    padding:10px 14px 8px;
}

.main-frame{
    position:relative;
    min-height:calc(100vh - 38px);
    border:1px solid rgba(214,209,196,.18);
    background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(16,0,0,.25));
    box-shadow:
        0 0 0 1px rgba(142,107,47,.18) inset,
        0 0 35px rgba(0,0,0,.55),
        0 0 50px rgba(109,0,0,.12) inset;
    overflow:hidden;
    border-radius:12px;
    backdrop-filter:blur(4px);
}

/* decoration */
.ornament{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    color:rgba(232,223,207,.45);
    letter-spacing:8px;
    font-size:12px;
    z-index:2;
    user-select:none;
}
.ornament-top{ top:10px; }
.ornament-bottom{ bottom:10px; }

.bloodline{
    position:absolute;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(160,0,0,.45), transparent);
    opacity:.12;
    z-index:1;
}
.blood-1{ top:15%; left:10%; width:80%; }
.blood-3{ top:84%; left:12%; width:76%; }

.corner-svg{
    position:absolute;
    width:70px;
    height:70px;
    opacity:.52;
    z-index:2;
}
.corner-svg svg{
    width:100%;
    height:100%;
    fill:none;
    stroke:rgba(214,209,196,.55);
    stroke-width:2;
}
.corner-svg .inner{ stroke:rgba(142,107,47,.65); }
.corner-tl{ top:8px; left:8px; }
.corner-tr{ top:8px; right:8px; }
.corner-bl{ bottom:8px; left:8px; }
.corner-br{ bottom:8px; right:8px; }

.corner-logo{
    position:fixed;
    top:10px;
    left:10px;
    width:92px;
    max-width:10vw;
    height:auto;
    z-index:3;
    opacity:.9;
    filter:drop-shadow(0 0 10px rgba(0,0,0,.7));
}

/* single-column layout */
.hero-grid.single-column{
    display:flex !important;
    flex-direction:column !important;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    min-height:100%;
    padding:36px 18px 20px;
}
.hero-grid.single-column .hero-left,
.hero-grid.single-column .hero-right{
    width:100%;
    max-width:920px;
    min-height:auto;
    text-align:center;
    border:none !important;
    padding:0 !important;
}
.hero-grid.single-column .hero-right{
    display:flex;
    justify-content:center;
}
.hero-grid.single-column .video-panel{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}
.brand-block{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:6px;
}

.welcome-image{
    width:clamp(150px, 20vw, 280px);
    max-height:14vh;
    object-fit:contain;
    filter:drop-shadow(0 0 18px rgba(0,0,0,.55));
}

.eyebrow{
    color:#b89563;
    letter-spacing:.38em;
    text-transform:uppercase;
    font-size:clamp(.72rem, .95vw, .92rem);
    opacity:.95;
    animation:revealSoft 1.6s ease both;
}
.site-subtitle{
    position:relative;
    display:inline-block;
    animation:revealSoft 2.1s ease both;
    font-size:clamp(.8rem, 1.2vw, 1.05rem);
    letter-spacing:.35em;
    text-transform:uppercase;
    color:#c7b79d;
    opacity:.92;
}
.site-subtitle::after{
    content:"";
    display:block;
    width:100%;
    height:1px;
    margin-top:8px;
    background:linear-gradient(90deg, transparent, rgba(179,0,0,.95), transparent);
    box-shadow:0 0 14px rgba(179,0,0,.35);
}

.video-frame.cinematic-frame{
    position:relative;
    width:min(100%, 640px);
    margin:0 auto;
    padding:10px 10px 8px;
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(214,209,196,.12);
    background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28)),
        radial-gradient(circle at 50% 20%, rgba(179,0,0,.08), transparent 35%);
    box-shadow:
        0 0 0 1px rgba(142,107,47,.12) inset,
        0 0 24px rgba(0,0,0,.28) inset,
        0 18px 45px rgba(0,0,0,.55),
        0 0 35px rgba(143,18,18,.12);
}
.cinematic-frame::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.06), transparent 16%, transparent 84%, rgba(0,0,0,.35)),
        linear-gradient(90deg, rgba(255,255,255,.04), transparent 18%, transparent 82%, rgba(255,255,255,.03));
    pointer-events:none;
    z-index:2;
}
.cinematic-frame::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.09) 48%, transparent 100%);
    transform:translateX(-140%);
    animation:shineSweep 4.8s ease-in-out infinite;
    pointer-events:none;
    z-index:2;
}
.no-blood-zone{ position:relative; z-index:5; }

.video-label{
    display:inline-block;
    margin-bottom:12px;
    padding:8px 12px;
    border:1px solid rgba(214,209,196,.16);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
    color:#ceb58a;
    font-size:.78rem;
    letter-spacing:.25em;
    text-transform:uppercase;
    border-radius:999px;
}
.video-frame video{
    width:50% !important;
    max-width:420px;
    height:auto !important;
    max-height:24vh !important;
    display:block;
    margin:0 auto;
    border-radius:10px;
    object-fit:cover;
    transition:transform .45s ease, box-shadow .45s ease;
    border:1px solid rgba(214,209,196,.14);
}
.video-frame:hover video{
    transform:scale(1.018);
    box-shadow:0 0 22px rgba(179,0,0,.18);
}

/* buttons */
.cta-row{
    width:100%;
    max-width:760px;
    display:flex !important;
    flex-direction:row !important;
    justify-content:center;
    align-items:stretch;
    gap:14px;
    flex-wrap:nowrap;
}
.cta-link{
    width:100%;
    max-width:260px;
    min-width:220px;
    display:block;
    padding:8px 10px 12px;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(214,209,196,.14);
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22));
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cta-link::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 48%, transparent 100%);
    transform:translateX(-140%);
    transition:transform .6s ease;
    pointer-events:none;
}
.cta-link:hover::before{ transform:translateX(140%); }
.cta-link:hover{
    transform:translateY(-3px);
    border-color:rgba(217,182,118,.5);
    box-shadow:0 0 20px rgba(179,0,0,.14);
}
.cta-text{
    display:block;
    text-transform:uppercase;
    letter-spacing:.28em;
    color:#d8c8af;
    margin-bottom:8px;
    font-size:.82rem;
}
.cta-image{
    width:50%;
    height:auto;
    display:block;
    margin:0 auto;
}

/* text & socials after buttons */
.manifesto{
    max-width:760px;
    margin:0 auto;
    padding:.85rem 1rem;
    border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.22));
    box-shadow:0 0 18px rgba(0,0,0,.22) inset;
    border-radius:10px;
}
.manifesto p{
    margin:0 0 .5rem;
    line-height:1.25;
}
.tagline{
    font-size:clamp(.84rem, 1.15vw, 1rem);
    color:#e3d7c2;
}
.manifesto p:not(.tagline){
    font-size:clamp(.84rem, 1.05vw, .98rem);
    color:#d5cab8;
}
.mail-link{
    display:inline-block;
    margin-top:.2rem;
    color:#d9b676;
    text-decoration:none;
    font-size:clamp(.78rem, 1vw, .92rem);
    transition:.25s ease;
}
.mail-link:hover{
    color:#fff0c5;
    text-shadow:0 0 10px rgba(255,160,40,.35);
}
.social-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:2px;
}
.icon-link{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(214,209,196,.18);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
    border-radius:50%;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.icon-link img{
    width:22px;
    height:22px;
    object-fit:contain;
    filter:drop-shadow(0 0 8px rgba(0,0,0,.45));
}
.icon-link:hover{
    transform:translateY(-3px) scale(1.05);
    border-color:rgba(217,182,118,.55);
    box-shadow:0 0 16px rgba(179,0,0,.16);
}

footer{
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.76rem;
    color:#bba98f;
    letter-spacing:.08em;
    text-align:center;
    opacity:.92;
}

/* reveal */
.reveal{
    opacity:0;
    transform:translateY(24px);
    animation:revealSoft 1s ease forwards;
}
.reveal-1{ animation-delay:.25s; }
.reveal-2{ animation-delay:.5s; }
.reveal-3{ animation-delay:.75s; }
.reveal-4{ animation-delay:1s; }

/* animations */
@keyframes bgPulse{
    0%,100%{ opacity:.85; transform:scale(1); }
    50%{ opacity:1; transform:scale(1.02); }
}
@keyframes emberGlow{
    0%,100%{ opacity:.45; }
    50%{ opacity:.8; }
}
@keyframes floatParticle{
    0%{ transform:translateY(0) scale(1); opacity:0; }
    10%{ opacity:1; }
    100%{ transform:translateY(-110vh) translateX(30px) scale(1.4); opacity:0; }
}
@keyframes revealSoft{
    from{ opacity:0; transform:translateY(24px); filter:blur(6px); }
    to{ opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes introPulse{
    0%,100%{ transform:scale(1); opacity:.95; }
    50%{ transform:scale(1.025); opacity:1; }
}
@keyframes shineSweep{
    0%{ transform:translateX(-140%); }
    55%{ transform:translateX(140%); }
    100%{ transform:translateX(140%); }
}

/* responsive */
@media (max-width: 860px){
    .site-wrap{
        min-height:100vh;
        grid-template-rows:auto auto;
    }
    .main-frame{
        min-height:calc(100vh - 38px);
        overflow:visible;
    }
    .hero-grid.single-column{
        padding:68px 14px 24px;
    }
    .cta-row{
        flex-direction:column !important;
        align-items:center;
    }
    .cta-link{
        max-width:100%;
        min-width:0;
    }
    .video-frame video{
        width:70% !important;
        max-width:360px;
        max-height:22vh !important;
    }
    .corner-logo{ width:72px; }
}