:root{
  --bg:#0f2a2e; --bg2:#173a3f; --ink:#eef3f0; --muted:#9db8b4;
  --amber:#ffb627; --line:rgba(238,243,240,.16);
  --font:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:light){
  :root{--bg:#f3efe6;--bg2:#e6e0d2;--ink:#12292d;--muted:#55706e;--amber:#d98e00;--line:rgba(18,41,45,.18)}
}
*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{
  font-family:var(--font);color:var(--ink);
  background:
    radial-gradient(60rem 40rem at 85% -10%,var(--bg2),transparent 60%),
    repeating-linear-gradient(135deg,transparent 0 22px,rgba(255,182,39,.05) 22px 44px),
    var(--bg);
  display:grid;place-items:center;padding:2rem 1.25rem;
}
.wrap{width:min(100%,40rem);display:flex;flex-direction:column;gap:1.75rem}

.brand{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{width:8rem;height:8rem;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 4px var(--line)}
.gears{width:7rem;height:auto;fill:var(--amber)}
.gear{transform-box:fill-box;transform-origin:center}
.g1{animation:spin 14s linear infinite}
.g2{animation:spin 9s linear infinite reverse}
.hole{fill:var(--bg)}
@keyframes spin{to{transform:rotate(360deg)}}

h1{font-size:clamp(2.2rem,7vw,3.6rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;max-width:16ch}
.lead{color:var(--muted);font-size:1.1rem;line-height:1.55;max-width:52ch}

.contact{border:1px solid var(--line);border-radius:16px;padding:1.25rem;background:rgba(255,255,255,.03)}
.contact h2{font-size:1.15rem;font-weight:600;margin-bottom:1rem}
.contact ul{list-style:none;padding:0;display:grid;gap:.75rem}
.contact li{display:flex;gap:.5rem;align-items:stretch}
.item{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;padding:.8rem 1rem;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:10px;transition:border-color .15s}
.item:hover{border-color:var(--amber)}
.label{color:var(--muted);font-size:.85rem}
.value{font-weight:600;font-size:1.05rem;overflow-wrap:anywhere}
.copy{padding:0 1.1rem;font:inherit;font-weight:600;color:#1a1200;background:var(--amber);border:0;border-radius:10px;cursor:pointer;transition:transform .15s}
.copy:active{transform:scale(.97)}
a:focus-visible,button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
#msg{min-height:1.3rem;margin-top:.75rem;font-size:.95rem;color:var(--amber)}

footer{color:var(--muted);font-size:.95rem;border-top:1px solid var(--line);padding-top:1rem}

@media (prefers-reduced-motion:reduce){.gear{animation:none}}