:root{--bg:#fbf6ee;--surface:#fff;--ink:#1c2a24;--mute:#5d6b63;--green:#0f3d2e;--terra:#c8553d;--gold:#e8b04a;--line:#e6dccb;--hero:#0f3d2e;--heroink:#fbf6ee;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101a15;--surface:#18261f;--ink:#f2ece0;--mute:#a4b3a9;--green:#7fd1a8;--line:#2a3b32;--hero:#0a120e;--heroink:#f2ece0}}
:root[data-theme="dark"]{--bg:#101a15;--surface:#18261f;--ink:#f2ece0;--mute:#a4b3a9;--green:#7fd1a8;--line:#2a3b32;--hero:#0a120e;--heroink:#f2ece0}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Inter,system-ui,sans-serif}
h1,h2,h3{font-family:Fraunces,Georgia,serif;line-height:1.1;margin:0 0 .5em}
h1{font-size:clamp(2.6rem,8vw,5.5rem);font-weight:800}h2{font-size:clamp(1.9rem,4vw,3rem);font-weight:800}h3{font-size:1.3rem}
a{color:inherit}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
nav{max-width:1100px;margin:auto;display:flex;align-items:center;gap:6px;padding:10px 18px;overflow-x:auto}
.logo{font-family:Fraunces,serif;font-weight:800;margin-right:auto;white-space:nowrap;text-decoration:none;color:var(--green)}
nav a.l{padding:7px 13px;border-radius:99px;text-decoration:none;font-size:.92rem;font-weight:500;white-space:nowrap;color:var(--mute)}
nav a.l.on{background:var(--green);color:var(--bg)}
main{max-width:1100px;margin:auto;padding:0 18px 70px}
.page{display:none;animation:in .5s ease}.page.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero{background:var(--hero);color:var(--heroink);border-radius:28px;margin-top:22px;padding:clamp(28px,6vw,70px);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--terra),transparent 70%);opacity:.55;animation:float 8s ease-in-out infinite}
@keyframes float{50%{transform:translate(-30px,30px) scale(1.15)}}
.hero>*{position:relative;z-index:1}
.tag{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px}
.hero p{max-width:560px;opacity:.88;font-size:1.1rem}
.btn{display:inline-block;padding:13px 24px;border-radius:99px;background:var(--terra);color:#fff;font-weight:600;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:600;margin:8px 8px 0 0}
.btn.alt{background:transparent;border:1.5px solid currentColor}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px}
.sec{margin-top:54px}
.num{font-family:Fraunces,serif;font-size:3rem;font-weight:800;color:var(--terra);line-height:1}
.mute{color:var(--mute)}
.pill{display:inline-block;padding:3px 11px;border-radius:99px;background:color-mix(in srgb,var(--gold) 30%,transparent);font-size:.8rem;font-weight:600}
.ptitle{padding-top:42px}
.pillar{cursor:pointer;transition:.25s}.pillar:hover{transform:translateY(-4px);border-color:var(--terra)}
.pillar .more{max-height:0;overflow:hidden;transition:max-height .4s;color:var(--mute)}
.pillar.open .more{max-height:200px;margin-top:10px}
.pillar .ic{font-size:2rem}
.bar{margin:14px 0}.bar span{display:flex;justify-content:space-between;font-size:.92rem;font-weight:500}
.track{height:12px;background:var(--line);border-radius:9px;overflow:hidden;margin-top:5px}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--terra));border-radius:9px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.tl{border-left:3px solid var(--terra);margin-left:8px;padding-left:24px}
.tl div{position:relative;margin-bottom:26px}.tl div::before{content:"";position:absolute;left:-33px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--gold);border:3px solid var(--bg)}
.tl b{font-family:Fraunces,serif;font-size:1.15rem}
label{display:block;font-weight:600;font-size:.9rem;margin:14px 0 5px}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{padding:10px 16px;border-radius:99px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font:inherit;font-weight:500}
.opt.on{background:var(--green);color:var(--bg);border-color:var(--green)}
.result{margin-top:18px;padding:20px;border-radius:16px;background:color-mix(in srgb,var(--gold) 22%,var(--surface));border-left:5px solid var(--gold)}
.wall .q{border-bottom:1px solid var(--line);padding:12px 0}
.quote{font-family:Fraunces,serif;font-size:clamp(1.4rem,3vw,2.1rem);font-weight:500;border-left:5px solid var(--terra);padding-left:20px}
footer{text-align:center;color:var(--mute);font-size:.85rem;padding:30px 18px}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(232,176,74,.3) 1.6px,transparent 0) 0 0/26px 26px;-webkit-mask-image:linear-gradient(120deg,transparent 35%,#000);mask-image:linear-gradient(120deg,transparent 35%,#000)}
.hl{background:linear-gradient(90deg,var(--gold),#ff9a6c);-webkit-background-clip:text;background-clip:text;color:transparent}
.mq{overflow:hidden;margin-top:22px;border-block:1px solid var(--line);padding:14px 0;white-space:nowrap}
.mq div{display:inline-block;animation:mq 30s linear infinite}
.mq span{margin:0 26px;font-family:Fraunces,Georgia,serif;font-size:1.25rem;font-weight:800;color:var(--green)}
.mq span::before{content:"✦ ";color:var(--terra)}
@keyframes mq{to{transform:translateX(-50%)}}
.card{transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-4px);box-shadow:0 16px 30px -16px rgba(0,0,0,.35)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s,transform .7s}.rv.in{opacity:1;transform:none}
.cta{background:var(--hero);color:var(--heroink);border-radius:28px;padding:clamp(28px,6vw,60px);text-align:center}
.cta p{max-width:520px;margin:0 auto 14px;opacity:.88}
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:25;background:var(--terra);color:#fff;padding:13px 20px;border-radius:99px;font-weight:600;text-decoration:none;box-shadow:0 10px 24px -8px rgba(200,85,61,.7);animation:pulse 2.6s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}*{animation:none!important}}
.seg{display:flex;flex:none;margin-left:6px;border:1.5px solid var(--terra);border-radius:99px;overflow:hidden}
.seg button{border:0;background:transparent;color:var(--terra);padding:7px 13px;font:600 .82rem Inter,system-ui,sans-serif;cursor:pointer}
.seg button.on{background:var(--terra);color:#fff}
.gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:color-mix(in srgb,var(--hero) 95%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:24px;text-align:center;color:var(--heroink)}
.gbox{max-width:420px}.gbox p{opacity:.85}
.portrait{aspect-ratio:4/5;border-radius:24px;background:linear-gradient(160deg,var(--terra),var(--gold));display:grid;place-items:center;font-family:Fraunces,serif;font-size:6rem;color:#fff;font-weight:800}
nav .lang{margin-left:6px;padding:7px 14px;border-radius:99px;border:1.5px solid var(--terra);background:transparent;color:var(--terra);font:600 .85rem Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.two{display:grid;gap:30px;grid-template-columns:1fr;align-items:center}
@media(min-width:760px){.two{grid-template-columns:1fr 1.3fr}}
.portrait{aspect-ratio:2/3;overflow:hidden;padding:0}.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.hp{display:none}
@media(min-width:900px){.hp{display:block;position:absolute;right:5%;bottom:0;z-index:1;width:250px;aspect-ratio:2/3;object-fit:cover;object-position:center 15%;border-radius:22px 22px 0 0;box-shadow:0 20px 40px -14px rgba(0,0,0,.5)}}
.hero>.bgp{position:absolute;inset:0;z-index:0;background-repeat:no-repeat;background-size:cover;background-position:center 12%;opacity:.3;transform-origin:80% 30%;animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.07)}}
@media(min-width:900px){.hero>.bgp{opacity:.95;background-size:auto 118%;background-position:right 7% top 0;-webkit-mask-image:linear-gradient(90deg,transparent 52%,#000 80%);mask-image:linear-gradient(90deg,transparent 52%,#000 80%)}}
.av{width:34px;height:34px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:6px;border:2px solid var(--gold)}
.av.big{width:104px;height:104px;margin:0 0 14px;border-width:3px;display:block;margin-inline:auto}
.logo{display:flex;align-items:center}
.ico{width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--green) 13%,transparent);color:var(--green);display:grid;place-items:center;margin-bottom:12px}
.ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fab svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px;margin-right:4px}