/* Velev Solutions — shared styles (hand-written port of the original build) */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root{
  --bg:#0a0a0b; --surface:#141416; --surface-2:#1a1a1c; --border:#222; --border-2:#333;
  --fg:#f5f5f5; --muted:#888; --muted-2:#666; --muted-3:#444;
  --gold:#c9a962; --gold-light:#d9bd7c;
  --display:"Playfair Display",Georgia,serif; --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:#c9a9624d}
.font-display{font-family:var(--display)}
.font-mono{font-family:var(--mono)}
.text-gold{color:var(--gold)}

/* ambient */
.noise{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.02;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 50% 0%,rgba(201,169,98,.03) 0%,transparent 50%)}
.container{position:relative;z-index:1;max-width:72rem;margin:0 auto;padding-left:max(1rem,env(safe-area-inset-left,0px));padding-right:max(1rem,env(safe-area-inset-right,0px))}
@media (min-width:768px){.container{padding-left:max(2rem,env(safe-area-inset-left,0px));padding-right:max(2rem,env(safe-area-inset-right,0px))}}
.rule{width:6rem;height:1px;margin:0 auto;background:linear-gradient(to right,transparent,var(--gold),transparent)}

/* header / footer (shared) */
.site-header{text-align:center;padding:2rem 0}
@media (min-width:768px){.site-header{padding:3rem 0}}
.wordmark{display:inline-block;font-family:var(--display);font-weight:700;font-size:2.25rem;letter-spacing:.025em;text-decoration:none;color:var(--fg);line-height:1}
@media (min-width:768px){.wordmark{font-size:3rem}}
.wordmark b{color:var(--gold);font-weight:700}
.site-header h1{font-family:var(--display);font-weight:600;font-size:1.5rem;margin:1rem 0 .5rem;color:var(--fg);line-height:1.2}
@media (min-width:768px){.site-header h1{font-size:1.875rem}}
.site-header p{color:var(--muted-2);font-size:.875rem;margin:0}
@media (min-width:768px){.site-header p{font-size:1rem}}
.site-header .rule{margin-top:1.5rem}
.site-footer{text-align:center;padding:2rem 0}
@media (min-width:768px){.site-footer{padding:3rem 0}}
.site-footer .rule{margin-bottom:2rem}
.site-footer .ask{color:var(--muted-2);font-size:.875rem;margin:0 0 1rem}
.mailbox{display:inline-flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;border-radius:.75rem;background:var(--surface);border:1px solid var(--border);max-width:100%}
.mailbox svg{width:1rem;height:1rem;flex:none}
.mailbox span{font-family:var(--mono);font-size:.875rem;color:var(--fg);word-break:break-all}
.mailbox button{background:none;border:0;padding:.5rem;border-radius:.5rem;cursor:pointer;color:var(--muted-2);display:grid;place-items:center;transition:background .2s,color .2s}
.mailbox button:hover{background:var(--surface-2);color:var(--gold)}
.mailbox button.ok{color:#22c55e}
.site-footer .copy{margin:2rem 0 0;color:var(--muted-3);font-size:.75rem}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* puzzle grid */
.grid{padding:2rem 0;display:grid;gap:1rem;grid-template-columns:1fr;max-width:24rem;margin:0 auto}
@media (min-width:640px){.grid{grid-template-columns:repeat(2,1fr);max-width:48rem}}
@media (min-width:768px){.grid{padding:3rem 0;grid-template-columns:repeat(3,1fr);max-width:64rem}}
.puzzle-piece{position:relative;overflow:hidden;border-radius:1rem;aspect-ratio:4/3;background:var(--surface);cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);display:block;color:inherit;text-decoration:none;max-width:100%}
.puzzle-piece::before{content:"";position:absolute;inset:0;border:2px solid var(--gold);border-radius:1rem;opacity:.3;transition:all .4s ease;pointer-events:none;z-index:3}
.puzzle-piece:hover::before{opacity:1;box-shadow:0 0 30px #c9a96266,inset 0 0 30px #c9a9621a}
.puzzle-piece:hover{transform:scale(1.03) translateY(-5px);z-index:10}
.puzzle-piece .img{position:absolute;inset:0;overflow:hidden}
.puzzle-image{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.puzzle-piece:hover .puzzle-image{transform:scale(1.08)}
.puzzle-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,10,11,.95) 0%,rgba(10,10,11,.7) 40%,rgba(10,10,11,.2) 70%,transparent 100%)}
.puzzle-piece .body{position:absolute;inset:0;padding:1.5rem;display:flex;flex-direction:column;justify-content:flex-end;z-index:2}
.puzzle-piece .label{font-family:var(--mono);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.puzzle-piece h3{font-family:var(--display);font-weight:600;font-size:1.5rem;margin:0 0 .25rem;color:var(--fg);line-height:1.2}
.puzzle-piece .sub{font-size:.875rem;color:var(--muted);margin:0 0 .75rem}
.puzzle-piece .desc{font-size:.75rem;color:var(--muted-2);margin:0 0 1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-gold{position:relative;display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:.875rem}
.link-gold::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--gold);transition:width .3s ease}
.puzzle-piece:hover .link-gold::after,.link-gold:hover::after{width:100%}
.link-gold svg{width:.75rem;height:.75rem}
.puzzle-piece .dot{position:absolute;top:.75rem;right:.75rem;width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);opacity:.6;z-index:3}
.badge-soon{padding:.25rem .75rem;font-family:var(--mono);font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.05em;background:#c9a96226;color:var(--gold);border:1px solid rgba(201,169,98,.3)}
.puzzle-piece .row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.puzzle-piece.future{cursor:default}
.puzzle-piece.future::before{border-color:#444;opacity:.5}
.puzzle-piece.future:hover::before{opacity:.7;box-shadow:none}
.puzzle-piece.future:hover{transform:none}
.puzzle-piece.future .puzzle-image{filter:grayscale(1);opacity:.4}
.puzzle-piece.future .label{color:#555}.puzzle-piece.future h3{color:#666}.puzzle-piece.future .sub{color:#444}
.future-overlay{position:absolute;inset:0;background:linear-gradient(to top,#0a0a0bfa,#0a0a0bd9,#0a0a0b99)}
.stay{display:flex;align-items:center;gap:.5rem;color:#444;font-family:var(--mono);font-size:.75rem;letter-spacing:.05em}
.stay svg{width:1rem;height:1rem;animation:subtle-pulse 3s ease-in-out infinite}
@keyframes subtle-pulse{0%,100%{opacity:.5}50%{opacity:1}}
/* entrance (replaces GSAP stagger) */
@keyframes enter{from{opacity:0;transform:scale(.9) translateY(30px)}to{opacity:1;transform:none}}
.grid .puzzle-piece{animation:enter .6s cubic-bezier(.34,1.56,.64,1) both}
.grid .puzzle-piece:nth-child(1){animation-delay:.3s}.grid .puzzle-piece:nth-child(2){animation-delay:.4s}.grid .puzzle-piece:nth-child(3){animation-delay:.5s}
.grid .puzzle-piece:nth-child(4){animation-delay:.6s}.grid .puzzle-piece:nth-child(5){animation-delay:.7s}.grid .puzzle-piece:nth-child(6){animation-delay:.8s}
@media (prefers-reduced-motion:reduce){.grid .puzzle-piece{animation:none}.puzzle-piece,.puzzle-image,.link-gold::after{transition:none}}