@charset "UTF-8";
:root{
    --bg:#151413;
    --panel:#211f1d;
    --panel-2:#2b2825;
    --text:#f1e7d6;
    --muted:#c7b8a0;
    --iron:#77756e;
    --rust:#b45b39;
    --brick:#7d3f2f;
    --wood:#8a623b;
    --gold:#d1a15e;
    --line:rgba(225,198,150,.22);
    --shadow:0 18px 60px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    color:var(--text);
    background:
        radial-gradient(circle at 14% 10%, rgba(180,91,57,.18), transparent 30%),
        radial-gradient(circle at 86% 3%, rgba(119,117,110,.16), transparent 28%),
        linear-gradient(135deg,#10100f 0%,#1a1715 45%,#24211e 100%);
    font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
    line-height:1.75;
}
body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.18;
    background-image:
        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:42px 42px;
    z-index:-1;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(18,17,16,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 35px rgba(0,0,0,.25);
}
.brand-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    max-width:1240px;
    margin:auto;
    padding:16px 20px 10px;
}
.brand-logo,.footer-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    letter-spacing:.04em;
}
.brand-mark{
    display:inline-grid;
    place-items:center;
    min-width:70px;
    min-height:46px;
    padding:4px 12px;
    color:#1b1714;
    font-weight:900;
    font-size:27px;
    background:linear-gradient(135deg,#d4a268,#a65435 48%,#6f6e68);
    border:2px solid #342a22;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.35);
    clip-path:polygon(10% 0,100% 0,90% 100%,0 100%);
}
.brand-name{font-size:15px;color:var(--muted);font-weight:700}
.domain-line{margin:0;color:var(--muted);font-size:14px}
.main-nav{
    display:flex;
    gap:8px;
    max-width:1240px;
    margin:0 auto;
    padding:0 20px 12px;
    overflow:auto;
}
.main-nav a{
    white-space:nowrap;
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.08));
    color:#e6d7bd;
    font-size:14px;
}
.main-nav a:hover,.main-nav a.active{border-color:var(--rust);color:#fff;background:rgba(180,91,57,.18)}
.fake-search{
    max-width:1240px;
    margin:0 auto 14px;
    padding:0 20px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}
.fake-search input{
    width:100%;
    border:1px solid rgba(209,161,94,.32);
    background:#121110;
    color:var(--text);
    border-radius:0;
    padding:13px 16px;
    outline:none;
}
.fake-search button,.btn{
    border:1px solid rgba(209,161,94,.48);
    background:linear-gradient(135deg,#b45b39,#7d3f2f 55%,#35322e);
    color:#fff5df;
    padding:12px 18px;
    font-weight:800;
    cursor:pointer;
    box-shadow:inset 0 0 20px rgba(255,255,255,.07);
}
.search-note{
    grid-column:1/-1;
    margin:0;
    color:var(--muted);
    font-size:13px;
    min-height:22px;
}
.hero{
    min-height:76vh;
    display:grid;
    align-items:center;
    position:relative;
    background:
        linear-gradient(90deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.63) 48%,rgba(13,13,13,.25) 100%),
        var(--hero-image) center/cover no-repeat;
    border-bottom:1px solid var(--line);
}
.hero-inner{max-width:1240px;margin:auto;padding:90px 20px}
.eyebrow{color:var(--gold);font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px}
.hero h1,.page-hero h1{
    max-width:920px;
    margin:0;
    font-size:clamp(42px,7vw,88px);
    line-height:1.05;
    letter-spacing:-.05em;
    text-shadow:0 5px 24px rgba(0,0,0,.6);
}
.hero p{max-width:760px;font-size:clamp(17px,2vw,24px);color:#e8d8bf}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.btn.secondary{background:transparent;color:var(--text)}
.section{max-width:1240px;margin:0 auto;padding:72px 20px}
.section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:24px;
    border-bottom:1px solid var(--line);
    padding-bottom:18px;
    margin-bottom:28px;
}
.section h2{
    margin:0;
    font-size:clamp(28px,4vw,48px);
    letter-spacing:-.04em;
}
.section-head p{margin:0;max-width:620px;color:var(--muted)}
.grid{display:grid;gap:22px}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.video-card,.card,.review,.faq-item,.creator-card,.partner,.story-card{
    position:relative;
    background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(0,0,0,.12)),var(--panel);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.video-shell{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#0f0f0e;
}
.video-shell video{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.12)}
.video-shell:before{
    content:"";
    position:absolute;
    inset:-30%;
    opacity:0;
    background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 48%,rgba(209,161,94,.22) 54%,transparent 70%);
    transform:translateX(-60%) rotate(10deg);
    transition:opacity .25s ease,transform .58s ease;
    z-index:3;
}
.video-shell:after{
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    background-image:radial-gradient(circle,rgba(180,91,57,.58) 1px,transparent 1.8px);
    background-size:12px 12px;
    mix-blend-mode:screen;
    z-index:4;
}
.video-card:hover .video-shell:before{opacity:.8;transform:translateX(58%) rotate(10deg)}
.video-card:hover .video-shell:after{opacity:.22;animation:rustShake .25s steps(2,end) infinite}
@keyframes rustShake{0%{transform:translate(0,0)}50%{transform:translate(2px,-1px)}100%{transform:translate(-1px,1px)}}
.play-pill{
    position:absolute;
    inset:auto 18px 18px auto;
    z-index:5;
    opacity:0;
    transform:translateY(8px);
    transition:.22s ease;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(10,10,10,.74);
    color:#fff;
    padding:10px 16px;
    cursor:pointer;
}
.video-card:hover .play-pill{opacity:1;transform:none}
.video-body,.card,.review,.faq-item,.creator-card,.story-card{padding:22px}
.video-body h3,.card h3,.story-card h3,.creator-card h3{margin:0 0 10px;font-size:22px}
.video-body p,.card p,.review p,.faq-item p,.story-card p,.creator-card p{color:var(--muted);margin:0 0 14px}
.metrics,.tags{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;color:#e7d4b8}
.metrics span,.tags span{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(0,0,0,.22);
    padding:5px 8px;
}
.story-grid{grid-template-columns:1.2fr .8fr}
.story-image{
    min-height:420px;
    background:var(--story-image) center/cover no-repeat;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.gallery figure{margin:0;position:relative;border:1px solid var(--line);overflow:hidden;background:#111}
.gallery img{width:100%;height:260px;object-fit:cover;transition:transform .38s ease}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.78));font-size:14px}
.creator-card img{width:92px;height:92px;object-fit:cover;border:2px solid rgba(209,161,94,.38);border-radius:50%;margin-bottom:14px}
.partner{
    padding:26px 18px;
    text-align:center;
    color:#ebdac1;
    font-weight:900;
    background:repeating-linear-gradient(45deg,rgba(180,91,57,.12) 0 8px,rgba(0,0,0,.06) 8px 16px),var(--panel-2);
}
.faq-item h3{margin:0 0 8px;font-size:19px;color:#ffe6bf}
.review strong{display:block;color:#ffe6bf;margin-top:12px}
.contact-box{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:24px;
}
.qr-row{display:flex;gap:14px;flex-wrap:wrap}
.qr-row img{width:122px;height:auto;border:1px solid var(--line);background:#111;padding:8px}
.site-footer{
    border-top:1px solid var(--line);
    background:#11100f;
    padding:44px 20px;
}
.site-footer>div{max-width:1240px;margin-left:auto;margin-right:auto}
.footer-grid{max-width:1240px;margin:26px auto 0;display:grid;grid-template-columns:1.2fr .8fr .8fr .8fr;gap:24px}
.footer-grid h2{font-size:18px;color:#ffe0b2;margin:0 0 10px}
.footer-grid p,.footer-links{color:var(--muted);font-size:14px;margin:0 0 8px}
.footer-links{list-style:none;padding:0}
.footer-links a:hover{color:#fff}
.breadcrumb{max-width:1240px;margin:26px auto 0;padding:0 20px;color:var(--muted);font-size:14px}
.breadcrumb a{color:#f0d5a7}
.breadcrumb span{margin:0 8px}
.page-hero{
    background:
        linear-gradient(90deg,rgba(10,10,10,.91),rgba(10,10,10,.54)),
        var(--page-image) center/cover no-repeat;
    border-bottom:1px solid var(--line);
}
.page-hero-inner{max-width:1240px;margin:auto;padding:82px 20px}
.page-hero p{max-width:760px;color:#e8d8bf;font-size:20px}
.article-body{
    max-width:900px;
    margin:0 auto;
    padding:54px 20px 80px;
    color:#d9cdbb;
}
.article-body h2{color:#ffe0b2;font-size:34px}
.article-body blockquote{border-left:4px solid var(--rust);margin:28px 0;padding:12px 20px;background:rgba(255,255,255,.04);color:#f4dfbe}
.table-wrap{overflow:auto}
.seo-table{width:100%;border-collapse:collapse;min-width:620px}
.seo-table th,.seo-table td{border:1px solid var(--line);padding:12px;text-align:left}
.seo-table th{background:rgba(180,91,57,.18);color:#ffe0b2}
@media (max-width:980px){
    .grid.three,.grid.four,.footer-grid,.contact-box,.story-grid{grid-template-columns:1fr 1fr}
    .gallery{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
    .brand-bar{align-items:flex-start;flex-direction:column}
    .fake-search{grid-template-columns:1fr}
    .hero-inner{padding:64px 18px}
    .grid.three,.grid.four,.footer-grid,.contact-box,.story-grid,.gallery{grid-template-columns:1fr}
    .gallery img{height:220px}
    .section-head{display:block}
}