*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;line-height:1.8;scroll-behavior:smooth}
body{background-color:#0A0A08;color:#B8B0A0;font-family:'Noto Sans',sans-serif;font-weight:400;overflow-x:hidden}

.noise-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1000;opacity:0;mix-blend-mode:overlay;transition:opacity 400ms;background-image:url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E")}
.noise-overlay.visible{opacity:0.03}

.bg-shapes{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.bg-shape{position:absolute;opacity:0;transition:opacity 400ms ease-out}
.bg-shape.visible{opacity:0.04}
.shape-1{width:300px;height:300px;top:10%;left:5%}
.shape-2{width:200px;height:200px;top:30%;right:10%}
.shape-3{width:400px;height:400px;bottom:20%;left:15%}
.shape-4{width:150px;height:150px;top:60%;right:20%}

.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;z-index:1}
.hero-title{font-family:'Noto Serif',serif;font-weight:700;font-size:15vw;color:#F5F0E0;letter-spacing:-0.01em;line-height:1;transform:rotate(-1.5deg);opacity:0;transition:opacity 400ms cubic-bezier(0.16,1,0.3,1),transform 400ms cubic-bezier(0.16,1,0.3,1)}
.hero-title.visible{opacity:1;transform:rotate(-1.5deg) scale(1)}
.hero-line{width:0;height:1px;background:#C4A840;margin:24px auto;transition:width 300ms ease-out}
.hero-line.visible{width:200px}
.hero-sub{font-family:'Noto Sans',sans-serif;font-weight:400;font-size:0.95rem;color:#8A7A50;letter-spacing:0.04em;opacity:0;transition:opacity 400ms ease-out}
.hero-sub.visible{opacity:1}

.scroll-glyph{display:flex;justify-content:center;padding:40px 0;position:relative;z-index:1}
.scroll-glyph svg{width:40px;height:40px;transition:transform 100ms linear}

.content-section{max-width:680px;margin:0 auto;padding:0 24px 16vh;position:relative;z-index:1;opacity:0;transform:translateY(24px);transition:opacity 500ms ease-out,transform 500ms ease-out}
.content-section.visible{opacity:1;transform:translateY(0)}

.section-frame{border:3px solid #C4A840;padding:2px;position:relative}
.section-inner{background:#1A1A0A;padding:40px 32px}

.section-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.iso-icon{width:32px;height:32px;flex-shrink:0;opacity:0;transition:opacity 500ms ease-out}
.iso-icon.visible{opacity:1}
.section-tag{font-family:'Noto Serif',serif;font-weight:900;font-size:0.75rem;color:#C4A840;letter-spacing:0.1em;text-transform:uppercase;background:#1A1A0A}

.section-title{font-family:'Noto Serif',serif;font-weight:700;font-size:2.2rem;color:#F5F0E0;letter-spacing:-0.01em;margin-bottom:16px;transform:rotate(-0.5deg)}
.section-body{font-family:'Noto Sans',sans-serif;font-weight:400;font-size:1rem;color:#B8B0A0;line-height:1.8;transform:rotate(0.3deg)}

.cards-section{max-width:680px;margin:0 auto;padding:0 24px 16vh;position:relative;z-index:1}
.cards-title{font-family:'Noto Serif',serif;font-weight:700;font-size:2rem;color:#F5F0E0;letter-spacing:-0.01em;margin-bottom:8px;transform:rotate(0.5deg)}
.cards-intro{font-family:'Noto Sans',sans-serif;font-size:0.85rem;color:#8A7A50;margin-bottom:32px}

.card-grid{display:grid;grid-template-columns:1fr;gap:24px}

.flip-card{width:100%;height:200px;perspective:1000px;cursor:pointer;position:relative;z-index:1}
.flip-card-inner{position:relative;width:100%;height:100%;transition:transform 500ms ease-in-out;transform-style:preserve-3d}
.flip-card.flipped .flip-card-inner{transform:rotateY(180deg)}
.flip-card-front,.flip-card-back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;padding:28px 24px;border:1px solid #2A2A18}
.flip-card-front{background:#1A1A0A}
.flip-card-back{background:#1A1A0A;transform:rotateY(180deg)}
.card-face-label{font-family:'Noto Serif',serif;font-weight:900;font-size:0.7rem;color:#C4A840;letter-spacing:0.1em;text-transform:uppercase;display:block;margin-bottom:12px}
.flip-card-front .card-face-text{font-family:'Noto Serif',serif;font-weight:700;font-size:1.1rem;color:#F5F0E0;line-height:1.5}
.flip-card-back .card-face-text{font-family:'Noto Sans',sans-serif;font-weight:400;font-size:0.9rem;color:#C4A840;line-height:1.65}

.site-footer{position:relative;z-index:1;padding:80px 24px;text-align:center}
.footer-watermark{font-family:'Noto Serif',serif;font-weight:700;font-size:8rem;color:#F5F0E0;opacity:0.04;letter-spacing:0.04em;text-transform:uppercase;line-height:1}

@media(max-width:768px){
    .hero-title{font-size:20vw}
    .section-inner{padding:28px 20px}
    .section-title{font-size:1.6rem}
    .flip-card{height:220px}
}