:root{--bg:#070b14;--card:#0e1626;--tx:#e8f0ff;--mut:#8fa3c4;--ac:#00e5ff;--ac2:#7c4dff;--ln:#1c2a44;--ar1:#12301f;--ar2:#2c4a2a;--ar:#b9e6a6;--ru:#ff8a3d;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]){--bg:#f3f7fd;--card:#fff;--tx:#0b1830;--mut:#4d6285;--ac:#0077c8;--ac2:#6a3de8;--ln:#d5e0f0;--ar1:#e4f2dc;--ar2:#f6efd9;--ar:#2d6a2a;--ru:#c4531a}}
:root[data-theme="light"]{--bg:#f3f7fd;--card:#fff;--tx:#0b1830;--mut:#4d6285;--ac:#0077c8;--ac2:#6a3de8;--ln:#d5e0f0;--ar1:#e4f2dc;--ar2:#f6efd9;--ar:#2d6a2a;--ru:#c4531a}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--bg);color:var(--tx);font-family:"Segoe UI",system-ui,Arial,sans-serif;line-height:1.65;overflow-x:hidden}
a{color:var(--ac)}
nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 5vw;padding-top:calc(12px + env(safe-area-inset-top,0px));background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.logo{font-weight:800;letter-spacing:3px;font-size:1.15rem;color:var(--tx);text-decoration:none}.logo b{color:var(--ac)}
nav ul{display:flex;gap:18px;list-style:none;padding:0;align-items:center}nav ul a{color:var(--mut);text-decoration:none;font-size:.88rem}nav ul a:hover{color:var(--ac)}
.cta{background:linear-gradient(90deg,var(--ac),var(--ac2));color:#fff!important;padding:8px 16px;border-radius:20px}
#mb{display:none;background:none;border:1px solid var(--ln);color:var(--tx);border-radius:8px;padding:6px 11px;font-size:1.2rem}
@media(max-width:820px){#mb{display:block}nav ul{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:18px;border-bottom:1px solid var(--ln)}nav ul.open{display:flex}}
header{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:100px 5vw 60px}
canvas{position:absolute;inset:0;width:100%;height:100%}
.hero{position:relative;z-index:2;max-width:860px}
.tag{display:inline-block;border:1px solid var(--ac);color:var(--ac);padding:4px 14px;border-radius:20px;font-size:.78rem;letter-spacing:2px;margin-bottom:18px;animation:pulse 2.5s infinite}
h1{font-size:clamp(2rem,6vw,4.2rem);line-height:1.12;font-weight:800}
.glow{background:linear-gradient(90deg,var(--ac),var(--ac2),var(--ac));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:flow 4s linear infinite}
.lead{color:var(--mut);margin:16px auto 8px;max-width:680px}
.type{height:1.8em;margin:6px 0 24px;color:var(--mut);font-size:1.15rem}.type span{color:var(--ac);border-right:2px solid var(--ac);padding-right:4px;animation:blink .8s infinite}
.btn{display:inline-block;padding:12px 26px;border-radius:30px;text-decoration:none;font-weight:600;margin:6px;transition:.25s}
.b1{background:linear-gradient(90deg,var(--ac),var(--ac2));color:#fff;box-shadow:0 0 24px color-mix(in srgb,var(--ac) 40%,transparent)}.b1:hover{transform:translateY(-3px)}
.b2{border:1px solid var(--ac);color:var(--ac)}.b2:hover{background:var(--ac);color:var(--bg)}
section{padding:80px 5vw;max-width:1180px;margin:auto}
h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:10px}.sub{color:var(--mut);margin-bottom:34px;max-width:700px}
h3{margin-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{position:relative;background:var(--card);border:1px solid var(--ln);border-radius:16px;padding:26px;overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-6px);border-color:var(--ac);box-shadow:0 10px 36px color-mix(in srgb,var(--ac) 20%,transparent)}
.card:before{content:"";position:absolute;top:0;left:-100%;width:60%;height:2px;background:linear-gradient(90deg,transparent,var(--ac),transparent);animation:scan 3s infinite}
.card p,.card li{color:var(--mut);font-size:.94rem}.card ul{padding-left:18px;margin-top:8px}
.ic{font-size:2.2rem;display:inline-block;animation:float 3s ease-in-out infinite}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.chips span{border:1px solid var(--ln);background:var(--card);padding:6px 14px;border-radius:20px;font-size:.84rem;color:var(--mut)}
.proj{padding:0}.pv{height:150px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--ac) 14%,var(--card)) 0 12px,var(--card) 12px 24px);border-bottom:1px solid var(--ln)}
.proj div+div{padding:18px 22px 22px}.proj small{color:var(--ru);font-weight:600;letter-spacing:1px;font-size:.74rem}
.bal{max-width:none;background:linear-gradient(120deg,color-mix(in srgb,var(--ru) 12%,var(--bg)),var(--bg))}
.bal>div,.aroma>div{max-width:1180px;margin:auto;padding:80px 5vw}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;align-items:center}
.disc{width:min(260px,70vw);aspect-ratio:1;margin:auto;border-radius:50%;background:conic-gradient(from 0deg,var(--ru),#333,var(--ru),#333,var(--ru));display:flex;align-items:center;justify-content:center;animation:spin 14s linear infinite}
.disc i{width:55%;aspect-ratio:1;border-radius:50%;background:var(--bg);border:6px solid var(--ru)}
.aroma{max-width:none;background:linear-gradient(160deg,var(--ar1),var(--ar2))}
.aroma .sub,.aroma p{color:color-mix(in srgb,var(--tx) 78%,transparent)}.aroma h2{color:var(--ar)}.aroma h3{color:var(--tx)}
.art{max-width:360px;margin:auto;width:100%;animation:float 6s ease-in-out infinite}
.pc{background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid color-mix(in srgb,var(--ar) 30%,transparent);border-radius:14px;padding:18px;margin-top:14px}
.b3{border:1px solid var(--ar);color:var(--ar)}
details{background:var(--card);border:1px solid var(--ln);border-radius:12px;padding:14px 18px;margin-bottom:10px}summary{cursor:pointer;font-weight:600}details p{color:var(--mut);margin-top:8px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;text-align:center;margin-top:30px}.stats b{display:block;font-size:2.4rem;color:var(--ac)}.stats span{color:var(--mut);font-size:.88rem}
.soc{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}.soc a{border:1px solid var(--ln);padding:8px 16px;border-radius:24px;color:var(--tx);text-decoration:none}.soc a:hover{border-color:var(--ac);color:var(--ac)}
footer{padding:34px 5vw;border-top:1px solid var(--ln);color:var(--mut);font-size:.84rem;text-align:center}footer p{max-width:900px;margin:6px auto}
.wa{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;background:#25d366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:1.8rem;animation:ring 2s infinite}
.rv{opacity:0;transform:translateY(36px);transition:1s}.rv.on{opacity:1;transform:none}
@keyframes flow{to{background-position:200% center}}@keyframes blink{50%{border-color:transparent}}@keyframes pulse{50%{box-shadow:0 0 18px var(--ac)}}@keyframes scan{to{left:140%}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}100%{box-shadow:0 0 0 22px rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}