:root{
  --bg:#07060d; --ink:#ecebf6; --muted:#9a93b8;
  --green:#73ffc7; --blue:#22d3ee; --pink:#ff5fd2; --soft:#a78bfa; --dark:#8462f0;
  --glass:rgba(24,20,42,.55); --edge:rgba(255,255,255,.09); --edge-hi:rgba(255,255,255,.16);
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI Variable","Segoe UI",system-ui,sans-serif; --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI Variable","Segoe UI",system-ui,sans-serif; --mono:"Cascadia Mono",Consolas,monospace;   
  --ease:cubic-bezier(.34,1.42,.64,1);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--ink);font:15px/1.6 var(--body);background:transparent;padding:0 16px;}
.glass{position:relative;overflow:hidden;isolation:isolate;background:var(--glass);border:1px solid var(--edge);border-radius:20px;
  backdrop-filter:blur(22px) saturate(165%);-webkit-backdrop-filter:blur(22px) saturate(165%);box-shadow:none}
.glass::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--blue) 6%,transparent) 55%,color-mix(in srgb,var(--blue) 15%,transparent))}
.bar{position:sticky;top:12px;z-index:10;max-width:1080px;margin:12px auto 0;display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:999px}
.bar img{width:30px;height:30px;border-radius:8px}
.bar span{font:800 14px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--green)}   
.bar nav{margin-left:auto;display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--edge)}
.bar nav a{color:var(--muted);text-decoration:none;font:600 13px/1 var(--body);padding:8px 14px;border-radius:999px;transition:background .25s,color .2s}
.bar nav a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.bar nav a.on{color:#fff;background:linear-gradient(135deg,var(--soft),var(--dark));box-shadow:none}
main{max-width:1080px;margin:0 auto;padding:clamp(40px,8vw,90px) 0 40px;display:grid;gap:clamp(40px,7vw,80px)}
.mark{text-align:center;display:grid;justify-items:center;gap:6px;animation:rise .8s var(--ease) both}
.mark img{width:min(220px,52vw);height:auto}   
.mark h1{margin:10px 0 0;font:800 clamp(44px,8vw,88px)/.95 var(--display);letter-spacing:-.01em;text-wrap:balance}
.motto{margin:6px 0 0;font:700 clamp(18px,2.6vw,26px)/1.2 var(--display);letter-spacing:.04em}
.motto b{font-weight:800}
.motto .o{color:var(--green)} .motto .m{color:var(--pink)} .motto .g{color:var(--blue)}
.contact{display:grid;justify-items:center;animation:rise .9s .08s var(--ease) both}
.card{width:min(560px,100%);padding:clamp(20px,4vw,32px);display:grid;gap:12px}
.card h2{margin:0;font:700 12px/1.2 var(--mono);color:var(--green);letter-spacing:.16em;text-transform:uppercase}   
.card .sub{margin:-4px 0 6px;color:var(--muted)}
.card input,.card textarea{width:100%;font:15px var(--body);color:var(--ink);background:rgba(0,0,0,.28);border:1px solid var(--edge);border-radius:14px;padding:13px 16px;outline:none;transition:border-color .2s,box-shadow .2s}
.card textarea{min-height:120px;resize:vertical}
.card input::placeholder,.card textarea::placeholder{color:#6f6a8c}
.card input:focus,.card textarea:focus{border-color:color-mix(in srgb,var(--soft) 65%,transparent);box-shadow:none}
.card .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.card .row{grid-template-columns:1fr}}
.send{justify-self:start;margin-top:4px;border:0;cursor:pointer;font:700 15px/1 var(--body);color:#fff;padding:14px 28px;border-radius:999px;
  background:linear-gradient(135deg,var(--pink),var(--soft));box-shadow:none;transition:transform .25s var(--ease),box-shadow .25s}
.send:hover{transform:translateY(-2px)}
.send:active{transform:scale(.96)}
.note{font-size:12px;color:var(--muted);min-height:18px}
footer{max-width:1080px;margin:0 auto 24px;padding:16px 20px;border-radius:999px;display:flex;justify-content:center;color:var(--muted);font:12px var(--mono);letter-spacing:.06em}
.demo-tag{position:fixed;right:16px;bottom:16px;z-index:20;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pink);
  padding:7px 12px;border-radius:999px;border:1px solid color-mix(in srgb,var(--pink) 40%,transparent);background:rgba(24,20,42,.8)}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
html,body{height:100%}
body{display:grid;grid-template-rows:auto 1fr auto;min-height:100dvh;height:100dvh;overflow:hidden}
.bar{margin-top:clamp(8px,1.6vh,14px);width:100%}
main{width:100%;padding:clamp(8px,2vh,24px) 0;gap:clamp(20px,4vw,64px);grid-template-columns:1fr 1fr;align-items:center;min-height:0}
.mark img{width:min(clamp(90px,22vh,220px),40vw)}
.mark h1{font-size:clamp(34px,min(7vw,9vh),84px);margin-top:clamp(4px,1vh,10px)}
.motto{font-size:clamp(15px,2.6vh,24px)}
.card{gap:clamp(6px,1.3vh,12px);padding:clamp(14px,2.6vh,30px)}
.card input,.card textarea{padding:clamp(8px,1.4vh,13px) 14px}
.card textarea{min-height:clamp(54px,12vh,120px);height:clamp(54px,14vh,140px);resize:none}
.send{padding:clamp(10px,1.6vh,14px) 26px}
footer{margin-bottom:clamp(8px,1.6vh,20px);width:100%;padding:clamp(8px,1.4vh,14px) 20px}
@media (max-width:820px){body{height:auto;overflow:auto}main{grid-template-columns:1fr}}
.bar,main,footer{max-width:none!important;width:100%}
body{padding:0 clamp(12px,2.5vw,48px)}
main{grid-template-columns:1.1fr 1fr;gap:clamp(20px,5vw,120px)}
.mark img{width:min(clamp(90px,24vh,300px),40vw)}
.mark h1{font-size:clamp(34px,min(7.5vw,11vh),150px)}
.motto{font-size:clamp(15px,min(2vw,3.4vh),36px)}
.card{width:100%;max-width:820px;justify-self:stretch}
.contact{justify-items:stretch}
@media (max-width:820px){main{grid-template-columns:1fr}.card{max-width:none}.mark h1{font-size:clamp(34px,11vw,64px)}}