html,body{margin:0;padding:0;background:#f7f4ee;color:#1b1712;-webkit-font-smoothing:antialiased;overflow-x:hidden}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:hover{color:oklch(0.55 0.11 47)}
button:focus-visible,a:focus-visible{outline:2px solid oklch(0.55 0.11 47);outline-offset:3px;border-radius:4px}
img{max-width:100%}
@keyframes mf-halo{0%,100%{scale:1;opacity:.34}50%{scale:1.16;opacity:.14}}
@keyframes mf-pulse{0%,100%{scale:1;opacity:1}50%{scale:1.35;opacity:.72}}
@keyframes mf-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mf-fade{from{opacity:0}to{opacity:1}}
@keyframes mf-haze{0%,100%{opacity:.95;scale:1}50%{opacity:1;scale:1.02}}
@keyframes mf-node{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes mf-wave{0%,100%{scale:1 .35}50%{scale:1 1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

.shell{height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(18px,3vw,40px) clamp(20px,4.6vw,66px) clamp(14px,2vw,26px);font-family:'IBM Plex Sans','Noto Sans SC',system-ui,sans-serif;position:relative}
.bg-wash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 70% at 74% 46%, rgba(255,252,246,.9), rgba(247,244,238,0) 70%)}
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;position:relative;z-index:20;animation:mf-fade .9s ease both}
.brand{display:flex;align-items:center;gap:11px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:oklch(0.55 0.11 47)}
.brand span{font-family:'Playfair Display',Georgia,serif;font-size:22px;letter-spacing:.005em}
.hdr-right{display:flex;align-items:center;gap:14px 16px;flex-wrap:wrap;justify-content:flex-end}
.priv{display:flex;align-items:center;gap:9px;font-family:'IBM Plex Mono','Noto Sans SC',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(27,23,18,.42)}
.priv .dot{width:5px;height:5px;border-radius:50%;background:oklch(0.64 0.1 150)}
.priv-short{display:none}
.langctl{position:relative}
.lang-trigger{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 13px;border:1px solid rgba(27,23,18,.16);border-radius:999px;background:rgba(247,244,238,.6);cursor:pointer;font-family:'IBM Plex Mono','Noto Sans SC',monospace;font-size:11px;letter-spacing:.1em;color:#1b1712;transition:border-color .3s}
.lang-trigger:hover{border-color:rgba(27,23,18,.4)}
.lang-trigger svg{transition:transform .25s}
.lang-menu{list-style:none;margin:7px 0 0;padding:5px;position:absolute;right:0;top:100%;min-width:88px;background:#fbf9f4;border:1px solid rgba(27,23,18,.12);border-radius:14px;box-shadow:0 12px 34px rgba(27,23,18,.16);z-index:60;display:none}
.lang-menu.open{display:block}
.lang-menu li button{display:flex;align-items:center;width:100%;min-height:38px;padding:8px 12px;border:none;border-radius:9px;background:transparent;cursor:pointer;font-family:'IBM Plex Mono','Noto Sans SC',monospace;font-size:12px;letter-spacing:.12em;text-align:left;color:#1b1712;transition:background .2s}
.lang-menu li button:hover{background:rgba(27,23,18,.06)}
.lang-menu li button.active{background:rgba(180,110,50,.1);color:oklch(0.5 0.11 47)}

.stage{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);align-items:center;gap:clamp(20px,3.6vw,56px);position:relative;min-height:0;padding:clamp(4px,1vh,22px) 0}
.copy{max-width:46ch;animation:mf-rise 1s cubic-bezier(.2,.7,.2,1) both}
h1{margin:0;font-family:'Playfair Display','Noto Serif SC',Georgia,serif;font-weight:400;font-size:clamp(30px,min(4.3vw,6.4vh),64px);line-height:1.08;letter-spacing:-.012em;text-wrap:balance}
h1 em{font-style:italic;color:oklch(0.55 0.11 47)}
.body-copy{margin:clamp(10px,1.8vh,22px) 0 0;font-size:clamp(14px,min(1.05vw,2.1vh),16.5px);line-height:1.55;color:rgba(27,23,18,.68);max-width:44ch;text-wrap:pretty}
.body-copy .closing{display:block;margin-top:.6em;color:rgba(27,23,18,.5)}
.labels{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,1.4vw,20px) clamp(18px,2.4vw,32px);margin:clamp(12px,2vh,24px) 0 0;font-family:'IBM Plex Mono','Noto Sans SC',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(27,23,18,.5)}
.labels .item{display:flex;align-items:center;gap:9px}
.wave{display:flex;align-items:flex-end;gap:2px;height:12px}
.wave i{display:block;width:2px;height:12px;background:rgba(27,23,18,.34);animation:mf-wave 1.6s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.2s}
.wave i:nth-child(3){animation-delay:.4s}
.icon-ring{position:relative;width:12px;height:12px}
.icon-ring .o{position:absolute;inset:0;border:1px solid rgba(27,23,18,.28);border-radius:50%}
.icon-ring .i{position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:oklch(0.55 0.11 47)}
.icon-lock{position:relative;width:11px;height:12px}
.icon-lock .body{position:absolute;left:0;bottom:0;width:11px;height:7px;border:1px solid rgba(27,23,18,.32);border-radius:2px}
.icon-lock .shackle{position:absolute;left:2px;top:0;width:7px;height:6px;border:1px solid rgba(27,23,18,.32);border-bottom:none;border-radius:4px 4px 0 0}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin:clamp(16px,2.6vh,30px) 0 0}
.cta{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:clamp(13px,1.9vh,17px) clamp(22px,2vw,30px);border-radius:999px;background:#17130e;color:#f7f4ee;font-size:15px;font-weight:500;transition:background .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.cta:hover{background:oklch(0.36 0.06 47);color:#f7f4ee;transform:translateY(-2px)}
.cta .arrow{font-family:'IBM Plex Mono',monospace;font-size:12px;opacity:.55}

.portrait-wrap{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;animation:mf-fade 1.6s ease .25s both}
.portrait-frame{position:relative;width:100%;aspect-ratio:1.06;max-height:100%}
.portrait-frame img{pointer-events:none;position:absolute;left:-12%;top:-12%;width:124%;height:114%;object-fit:cover;object-position:46% 33%;mix-blend-mode:multiply;opacity:1;filter:contrast(1.1) saturate(1.05);-webkit-mask-image:radial-gradient(58% 56% at 50% 42%, #000 66%, rgba(0,0,0,.88) 82%, rgba(0,0,0,.34) 93%, transparent 100%);mask-image:radial-gradient(58% 56% at 50% 42%, #000 66%, rgba(0,0,0,.88) 82%, rgba(0,0,0,.34) 93%, transparent 100%);animation:mf-haze 18s ease-in-out infinite}
.glow{position:absolute;left:34%;top:12%;width:58%;height:58%;pointer-events:none;-webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 20%, transparent 92%);mask-image:radial-gradient(50% 50% at 50% 50%, #000 20%, transparent 92%);background:radial-gradient(50% 50% at 50% 50%, rgba(214,166,124,.14), rgba(214,166,124,0) 100%)}
.diagram{position:absolute;left:40%;top:12%;width:54%;aspect-ratio:1;pointer-events:none}
.ring{position:absolute;left:50%;top:50%;width:96%;height:96%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(27,23,18,.16)}
.halo{position:absolute;left:50%;top:50%;width:38%;height:38%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(180,110,50,.34),rgba(180,110,50,0) 70%);animation:mf-halo 8s ease-in-out infinite}
.node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
.node .dot{border-radius:50%;background:oklch(0.55 0.11 47);animation:mf-pulse 6s ease-in-out infinite}
.node-center{left:50%;top:50%}
.node-center span{font-family:'Playfair Display','Noto Serif SC',Georgia,serif;font-size:clamp(15px,1.6vw,21px)}
.node-you{left:16%;top:20%;gap:7px;animation:mf-node 12s ease-in-out .4s infinite}
.node-you .dot{width:8px;height:8px;background:rgba(27,23,18,.85)}
.node-you span{font-family:'IBM Plex Mono','Noto Sans SC',monospace;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:rgba(27,23,18,.9)}
.node-day{left:86%;top:34%;gap:7px;animation:mf-node 11s ease-in-out 1.5s infinite}
.node-care{left:50%;top:98%;gap:7px;animation:mf-node 10s ease-in-out .8s infinite}
.node-day .dot,.node-care .dot{width:6px;height:6px;background:rgba(27,23,18,.6)}
.node-day span,.node-care span{font-family:'IBM Plex Mono','Noto Sans SC',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:rgba(27,23,18,.62)}

footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:clamp(10px,1.6vh,18px);border-top:1px solid rgba(27,23,18,.1);font-family:'IBM Plex Mono','Noto Sans SC',monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(27,23,18,.36);position:relative;animation:mf-fade 1.2s ease .4s both}

@media (max-width:900px){
 .shell{height:auto;min-height:100dvh;overflow:visible;display:flex;flex-direction:column;padding:clamp(18px,5vw,32px) clamp(20px,6vw,36px) 32px}
 .stage{grid-template-columns:1fr;gap:clamp(20px,4vh,34px);padding:clamp(16px,3vh,28px) 0;flex:1 0 auto}
 .stage .copy{order:2}
 .portrait-wrap{order:1;justify-self:center;width:min(78vw,320px);margin:0 auto}
 h1{font-size:clamp(32px,8.6vw,46px)}
 .shell > footer{margin-top:14px}
}
@media (max-width:520px){
 .priv-full{display:none}
 .priv-short{display:inline}
 .portrait-wrap{width:min(84vw,290px)}
}