:root { --ink:#171512; --paper:#d7c5a5; --paper-light:#eadcc3; --vermilion:#a3291f; --gold:#b29158; --border:rgba(45,34,24,.24); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--ink); font-family:Georgia,'Times New Roman',serif; }
a { color:inherit; text-decoration:none; }
.hero { min-height:100svh; position:relative; overflow:hidden; isolation:isolate; background:var(--paper); }
.hero::before { content:'武 士 道\A猿 侍 魂\A不 動 心'; white-space:pre; position:absolute; inset:6rem auto auto 3%; z-index:-1; font-size:clamp(5rem,15vw,13rem); line-height:.85; letter-spacing:.03em; color:rgba(50,35,23,.045); writing-mode:vertical-rl; }
.hero::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(circle at 25% 45%,transparent 0 32%,rgba(32,25,19,.12) 90%),repeating-linear-gradient(95deg,rgba(50,34,20,.018) 0 1px,transparent 1px 5px); mix-blend-mode:multiply; }
.hero-image { position:absolute; inset:0 0 0 34%; z-index:-2; background:linear-gradient(90deg,var(--paper) 0%,rgba(215,197,165,.76) 11%,transparent 38%),url('samurai-ape-hero.png') 64% center/cover no-repeat; transform:scale(1.02); animation:breathe 12s ease-in-out infinite alternate; }
.site-header { position:relative; z-index:5; height:108px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.25rem,5vw,5.5rem); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:.8rem; font:700 .78rem/1 Arial,sans-serif; letter-spacing:.22em; }
.brand-sun { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:var(--vermilion); color:var(--paper-light); font-size:1.15rem; box-shadow:inset 0 0 0 2px rgba(235,220,195,.25); }
nav { display:flex; align-items:center; gap:.45rem; }
nav a { display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border); padding:.75rem 1rem; font:700 .66rem/1 Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; transition:.25s ease; }
nav a:hover { background:var(--ink); color:var(--paper-light); transform:translateY(-2px); }
.hero-copy { position:relative; z-index:3; width:min(680px,55vw); padding:clamp(5rem,12vh,10rem) 0 7rem clamp(1.25rem,8vw,9.5rem); }
.eyebrow { display:flex; align-items:center; gap:.75rem; margin:0 0 1.3rem; font:700 .66rem/1 Arial,sans-serif; letter-spacing:.28em; text-transform:uppercase; }
.eyebrow span { width:42px; height:2px; background:var(--vermilion); }
h1 { margin:0; color:var(--ink); font-size:clamp(5.2rem,10.4vw,11.5rem); line-height:.7; font-weight:700; letter-spacing:-.065em; text-transform:uppercase; text-shadow:0 1px 0 rgba(255,255,255,.25); }
h1 span { color:transparent; -webkit-text-stroke:1.5px var(--ink); }
.hero-jp { position:absolute; right:-1.5rem; top:27%; margin:0; color:rgba(163,41,31,.72); font-size:clamp(3rem,5vw,6rem); writing-mode:vertical-rl; letter-spacing:.12em; }
.hero-lede { max-width:440px; margin:2.25rem 0 0; padding-left:1.25rem; border-left:2px solid var(--vermilion); font-size:clamp(1rem,1.4vw,1.22rem); line-height:1.65; font-style:italic; }
.hero-actions { display:flex; align-items:center; gap:1.8rem; margin-top:2rem; }
.seal-button { display:inline-flex; align-items:center; gap:1rem; padding:1rem 1.25rem; color:#f1e5d0; background:var(--vermilion); font:700 .7rem/1 Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; box-shadow:5px 5px 0 var(--ink); transition:.25s ease; }
.seal-button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); }
.text-link { font:700 .68rem/1 Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:.35rem; }
.scroll-cue { position:absolute; right:3.5rem; bottom:2rem; z-index:3; display:flex; align-items:center; gap:.8rem; font:600 .55rem/1 Arial,sans-serif; letter-spacing:.22em; writing-mode:vertical-rl; }
.scroll-cue i { height:54px; width:1px; background:var(--ink); animation:pulse 1.8s ease-in-out infinite; }
.ticker { overflow:hidden; border-block:1px solid #332c25; background:#0f0e0c; color:#d7c5a5; font:700 .65rem/1 Arial,sans-serif; letter-spacing:.22em; white-space:nowrap; }
.ticker div { width:max-content; padding:1rem 0; animation:ticker 28s linear infinite; }
.ticker span { color:#c33b2e; }
.paper-section { position:relative; overflow:hidden; background-color:var(--paper-light); background-image:repeating-linear-gradient(94deg,rgba(67,45,24,.018) 0 1px,transparent 1px 6px),radial-gradient(circle at 50% -10%,rgba(255,249,232,.85),transparent 45%); }
.legend { min-height:930px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:clamp(3rem,7vw,8rem); align-items:center; padding:clamp(6rem,11vw,10rem) clamp(1.25rem,8vw,9rem); }
.kanji-watermark { position:absolute; right:-2vw; bottom:-10vw; color:rgba(32,24,18,.035); font-size:30vw; line-height:1; writing-mode:vertical-rl; pointer-events:none; }
.legend-art { position:relative; padding:1.1rem; border:1px solid rgba(43,34,25,.4); box-shadow:18px 20px 0 rgba(42,31,22,.08); }
.legend-art::before,.legend-art::after { content:''; position:absolute; width:48px; height:48px; border-color:var(--vermilion); }
.legend-art::before { left:-8px; top:-8px; border-left:3px solid var(--vermilion); border-top:3px solid var(--vermilion); }
.legend-art::after { right:-8px; bottom:-8px; border-right:3px solid var(--vermilion); border-bottom:3px solid var(--vermilion); }
.legend-art img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; filter:saturate(.82) contrast(1.04); }
.art-stamp { position:absolute; right:-25px; bottom:8%; display:grid; place-items:center; width:70px; height:70px; border:3px double rgba(232,213,179,.85); background:var(--vermilion); color:#eadcc3; font-size:1.15rem; line-height:1.05; transform:rotate(5deg); }
.section-kicker { margin:0 0 1.2rem; color:var(--vermilion); font:700 .62rem/1 Arial,sans-serif; letter-spacing:.28em; text-transform:uppercase; }
.section-kicker.light { color:#cf5a48; }
.legend h2,.section-heading h2,.token-intro h2 { margin:0; font-size:clamp(3.2rem,6vw,6.7rem); line-height:.86; letter-spacing:-.05em; text-transform:uppercase; }
h2 em { color:var(--vermilion); font-weight:400; text-transform:none; }
.brush-rule { width:80px; height:8px; margin:2rem 0; background:var(--ink); clip-path:polygon(0 33%,91% 0,100% 46%,87% 100%,0 69%); }
.legend-copy>p:not(.section-kicker),.token-intro>p:not(.section-kicker) { max-width:590px; color:#4d443b; font-size:1.03rem; line-height:1.8; }
.drop-cap::first-letter { float:left; margin:.12em .12em 0 0; color:var(--vermilion); font-size:4.4rem; line-height:.7; }
blockquote { margin:2.2rem 0 0; padding:1.4rem 0 0 1.5rem; border-top:1px solid rgba(48,37,26,.25); border-left:4px solid var(--vermilion); font-size:1.4rem; line-height:1.45; font-style:italic; }
blockquote span { display:block; margin-top:.8rem; color:#76695b; font:700 .58rem/1 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.code-section,.buy-section { position:relative; overflow:hidden; background:#171512; color:#e6d7bd; padding:clamp(6rem,10vw,10rem) clamp(1.25rem,8vw,9rem); }
.code-section::before { content:'武士道'; position:absolute; right:-3vw; top:-1.5vw; color:rgba(229,215,190,.025); font-size:25vw; line-height:1; pointer-events:none; }
.section-heading { position:relative; z-index:1; max-width:700px; }
.section-heading h2 { font-size:clamp(3.5rem,7vw,7.8rem); }
.virtues { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); margin-top:5rem; border-block:1px solid #454038; }
.virtue { position:relative; min-height:360px; padding:2rem clamp(1.5rem,3vw,3.5rem); border-right:1px solid #454038; overflow:hidden; }
.virtue:last-child { border:0; }
.virtue>span { color:#8d8170; font:600 .62rem/1 Arial,sans-serif; letter-spacing:.18em; }
.virtue-kanji { position:absolute; right:.5rem; top:-1rem; color:rgba(204,183,150,.06); font-size:12rem; }
.virtue h3,.step h3 { position:relative; margin:8rem 0 .8rem; color:#eadcc3; font-size:2.2rem; font-weight:400; text-transform:uppercase; }
.virtue p,.step p { max-width:270px; color:#928878; font-size:.95rem; line-height:1.7; }
.token-section { display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(3rem,7vw,8rem); padding:clamp(7rem,11vw,11rem) clamp(1.25rem,8vw,9rem); }
.token-intro { align-self:center; }
.token-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(44,34,24,.35); box-shadow:12px 12px 0 rgba(43,31,20,.08); }
.token-grid article { position:relative; min-height:250px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:1.5rem; border-right:1px solid rgba(44,34,24,.28); background:rgba(244,231,207,.38); }
.token-grid article:nth-child(3) { border:0; }
.metric { color:var(--vermilion); font-size:clamp(3rem,5vw,5.2rem); line-height:1; letter-spacing:-.06em; }
.token-grid small { margin-top:1rem; font:700 .6rem/1.2 Arial,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.token-grid article>i { position:absolute; right:.8rem; top:.8rem; color:rgba(31,24,18,.25); font-size:.8rem; font-style:normal; writing-mode:vertical-rl; }
.contract-card { grid-column:1/-1; min-height:190px!important; align-items:flex-start!important; border-top:1px solid rgba(44,34,24,.28)!important; border-right:0!important; }
.contract-card code { width:100%; overflow:hidden; margin:1rem 0; color:#4a4037; font:600 clamp(.72rem,1.2vw,.9rem)/1.4 'Courier New',monospace; text-overflow:ellipsis; }
.contract-card button { display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; font:700 .6rem/1 Arial,sans-serif; letter-spacing:.14em; transition:.2s ease; }
.contract-card button:hover { background:var(--ink); color:var(--paper-light); }
.buy-section { text-align:center; }
.sun-disc { position:absolute; left:50%; top:3rem; width:min(46vw,640px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; color:rgba(22,19,16,.2); background:rgba(151,36,28,.5); font-size:19vw; transform:translateX(-50%); }
.centered { margin:0 auto; text-align:center; }
.steps { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:5rem; text-align:left; }
.step { position:relative; min-height:330px; padding:2rem; border:1px solid #4b443a; background:rgba(18,16,13,.74); backdrop-filter:blur(7px); }
.step-top { display:flex; justify-content:space-between; align-items:center; color:#b33a2d; font-size:2rem; }
.step small { display:block; margin-top:4rem; color:#8c8172; font:700 .58rem/1 Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.step h3 { margin:1rem 0 .8rem; }
.step-line { position:absolute; top:50%; right:-2rem; width:2rem; height:1px; background:#7c2c25; }
.big-cta { position:relative; z-index:1; margin-top:3.5rem; padding:1.25rem 1.7rem; }
footer { display:grid; grid-template-columns:1fr 1.2fr .8fr; gap:2rem; align-items:center; padding:3rem clamp(1.25rem,5vw,5rem) 1.4rem; background:#0e0d0b; color:#baac94; border-top:1px solid #3b352e; }
.footer-mark { display:flex; align-items:center; gap:.85rem; }
.footer-mark div { display:flex; flex-direction:column; gap:.3rem; }
.footer-mark strong { color:#e0d0b6; font:700 .75rem/1 Arial,sans-serif; letter-spacing:.18em; }
.footer-mark small { font:600 .48rem/1 Arial,sans-serif; letter-spacing:.18em; }
footer>p { margin:0; color:#6f665a; font-size:.72rem; line-height:1.6; text-align:center; }
.footer-links { display:flex; justify-content:flex-end; gap:1.5rem; font:700 .58rem/1 Arial,sans-serif; letter-spacing:.14em; }
.footer-links a:hover { color:#d14a3b; }
.copyright { grid-column:1/-1; padding-top:1.2rem; border-top:1px solid #2a2722; color:#514b43; font:600 .5rem/1 Arial,sans-serif; letter-spacing:.16em; text-align:center; }
.reveal { animation:reveal both linear; animation-timeline:view(); animation-range:entry 5% cover 30%; }
@keyframes breathe { to { transform:scale(1.06) translate3d(-.6%,.3%,0); } }
@keyframes pulse { 50% { opacity:.18; transform:scaleY(.6); } }
@keyframes ticker { to { transform:translateX(-50%); } }
@keyframes reveal { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; } }
@media (max-width:980px) { .legend,.token-section{grid-template-columns:1fr}.legend-art{max-width:760px}.legend-copy{max-width:650px}.virtues{grid-template-columns:1fr}.virtue{min-height:260px;border-right:0;border-bottom:1px solid #454038}.virtue:last-child{border-bottom:0}.virtue h3{margin-top:5rem}.token-intro{max-width:650px}.steps{gap:1rem}.step-line{right:-1rem;width:1rem} }
@media (max-width:760px) { .site-header{height:82px}.brand span:last-child{display:none}nav{gap:.25rem}nav a{padding:.62rem .55rem;font-size:.56rem}.pump-nav svg{display:none}.hero-image{inset:0;opacity:.78;background-position:68% center}.hero::after{background:linear-gradient(90deg,rgba(215,197,165,.98) 0%,rgba(215,197,165,.84) 48%,rgba(215,197,165,.08) 100%)}.hero-copy{width:86vw;padding-top:18vh}h1{font-size:clamp(4.5rem,22vw,7.5rem)}.hero-jp{right:-2.5rem}.hero-lede{max-width:330px}.scroll-cue{display:none}.hero-actions{align-items:flex-start;flex-direction:column;gap:1.3rem}.legend{min-height:auto;padding-block:6rem}.art-stamp{right:-6px;width:58px;height:58px}.legend-copy h2,.token-intro h2,.section-heading h2{font-size:3.5rem}.code-section,.buy-section{padding-block:6rem}.virtues{margin-top:3rem}.token-grid{grid-template-columns:1fr}.token-grid article{min-height:180px;border-right:0;border-bottom:1px solid rgba(44,34,24,.28)}.contract-card{grid-column:1}.steps{grid-template-columns:1fr}.step{min-height:280px}.step-line{display:none}.sun-disc{width:90vw;top:8rem;font-size:35vw}footer{grid-template-columns:1fr;text-align:center}.footer-mark{justify-content:center}.footer-links{justify-content:center}.copyright{grid-column:1} }