:root{
  /* ГРАФІТ (default / dark) */
  --void:#0B0B0D; --panel:#141417; --panel2:#17171b; --hair:#2A2A2F; --hair2:#202024;
  --gold:#E8B23A; --gold-hi:#FFE9A8; --gold-lo:#7A5612;
  --bone:#ECE9E2; --steel:#8A8A93; --steel-dim:#71717a;
  --green:#3FB68B; --red:#D8604E;
  --glass:rgba(11,11,13,.72); --vignette-col:rgba(0,0,0,.55); --cmd-bg:rgba(7,7,9,.6); --grain-op:.05; --grid-op:.35;
  --f-display:'Archivo Expanded','Inter',system-ui,sans-serif;
  --f-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --f-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease2:cubic-bezier(.22,1,.36,1);
  --gut:clamp(16px,4vw,64px);
  --maxw:1280px;
  /* кований карбон + золоті вкраплення (процедурний SVG) */
  --carbon-alpha:.5; --carbon-gold-alpha:.55;
  --carbon-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.009 0.013' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.62 0.62 0.62 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --carbon-gold:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.5' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.91 0 0 0 0 0.70 0 0 0 0 0.23 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* ДЕНЬ / ПАПІР (light) */
html[data-theme="day"]{
  --void:#F4F1EA; --panel:#EBE6DA; --panel2:#E3DCCD; --hair:#D8D0BF; --hair2:#E6DFD1;
  --gold:#9A781E; --gold-hi:#C99A2E; --gold-lo:#6E541A;
  --bone:#1A1712; --steel:#6A6256; --steel-dim:#928A7A;
  --green:#2C8F66; --red:#BC4630;
  --glass:rgba(244,241,234,.82); --vignette-col:rgba(120,108,84,.16); --cmd-bg:rgba(225,219,206,.6); --grain-op:.03; --grid-op:.6;
  --carbon-alpha:.10; --carbon-gold-alpha:.4;
}
/* САПФІР (deep night blue) */
html[data-theme="sapphire"]{
  --void:#080B14; --panel:#0E1322; --panel2:#121a2e; --hair:#1E2740; --hair2:#141C30;
  --gold:#E8B23A; --gold-hi:#FFE9A8; --gold-lo:#7A5612;
  --bone:#E3E8F4; --steel:#808AA4; --steel-dim:#5C667E;
  --green:#3FB68B; --red:#E0685A;
  --glass:rgba(8,11,20,.74); --vignette-col:rgba(0,0,8,.55); --cmd-bg:rgba(6,9,18,.62); --grain-op:.05; --grid-op:.4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--void); color:var(--bone); font-family:var(--f-body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; cursor:default;
}
body.menu-open{overflow:hidden}
.mono{font-family:var(--f-mono); font-feature-settings:'tnum' 1,'zero' 1; font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1}
a{color:inherit; text-decoration:none}
::selection{background:var(--gold); color:#000}

.skip-link{position:fixed; top:-50px; left:12px; z-index:200; background:var(--gold); color:#000; padding:9px 16px; border-radius:2px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; transition:top .2s}
.skip-link:focus{top:8px}
/* ---- fixed background layers ---- */
.grid-bg{position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--hair2) 1px,transparent 1px),linear-gradient(90deg,var(--hair2) 1px,transparent 1px);
  background-size:64px 64px; opacity:var(--grid-op);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 90%);
}
.grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:var(--grain-op); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 0%,transparent 55%,var(--vignette-col) 100%);}

/* ---- crosshair ---- */
#crosshair{position:fixed; inset:0; z-index:30; pointer-events:none; opacity:0; transition:opacity .4s}
#crosshair.on{opacity:1}
#crosshair .ln{position:absolute; background:var(--hair); }
#crosshair .v{width:1px; top:0; bottom:0}
#crosshair .h{height:1px; left:0; right:0}
#crosshair .coord{position:absolute; font-family:var(--f-mono); font-size:9px; color:var(--steel-dim); letter-spacing:.1em; padding:2px 4px}
@media(hover:none){#crosshair{display:none!important}}

/* ---- top HUD ---- */
header{position:fixed; top:0; left:0; right:0; z-index:60; height:46px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:0 var(--gut); border-bottom:1px solid var(--hair);
  background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; color:var(--steel); text-transform:uppercase; white-space:nowrap}
.brand b{color:var(--bone); font-weight:700}
.live{display:inline-flex; align-items:center; gap:6px; color:var(--green)}
.live .dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:blink 1.6s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.clock{color:var(--steel-dim)}
header nav{display:flex; gap:22px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase}
header nav a{color:var(--steel); transition:color .25s; position:relative; padding:4px 0}
header nav a:hover{color:var(--bone)}
.hud-right{display:flex; align-items:center; gap:18px; white-space:nowrap}
.hud-price{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--steel)}
.hud-price b{color:var(--gold)}
.lang{display:flex; gap:0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; border:1px solid var(--hair); border-radius:2px; overflow:hidden}
.lang button{background:none; border:none; color:var(--steel-dim); padding:4px 7px; cursor:pointer; font-family:inherit; font-size:inherit; transition:.2s}
.lang button.act{background:var(--gold); color:#000}
.theme{display:flex; align-items:center; gap:7px}
.theme .sw{width:16px; height:16px; border-radius:50%; border:1px solid var(--hair); cursor:pointer; padding:0; position:relative; transition:transform .2s var(--ease)}
.theme .sw:hover{transform:scale(1.15)}
.theme .sw.act{box-shadow:0 0 0 2px var(--void),0 0 0 3px var(--gold)}
.sw-graphite{background:radial-gradient(circle at 32% 30%,#2A2A2F,#0B0B0D)}
.sw-day{background:radial-gradient(circle at 32% 30%,#fff,#E2D9C4)}
.sw-sapphire{background:radial-gradient(circle at 32% 30%,#23335c,#080B14)}
.menu-btn{display:none}

/* ---- layout ---- */
main{position:relative; z-index:10}
section{padding:0 var(--gut); position:relative}
.wrap{max-width:var(--maxw); margin:0 auto; width:100%}
.label{font-family:var(--f-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); display:flex; align-items:center; gap:12px}
.label .idx{color:var(--gold-lo)}
.rule{height:1px; background:var(--hair); transform-origin:left; position:relative; overflow:visible}
.rule.draw{transform:scaleX(0)}
.rule.draw.in{transform:scaleX(1); transition:transform 1s var(--ease2)}
.rule.draw.in::after{content:''; position:absolute; right:0; top:-1px; height:3px; width:28px;
  background:linear-gradient(90deg,transparent,var(--gold-hi)); animation:sheenFade 1s ease-out forwards}
@keyframes sheenFade{0%{opacity:1}100%{opacity:0}}

/* ---- HERO ---- */
#hero{min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-top:46px; position:relative}
.hero-tag{font-family:var(--f-mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--steel-dim); margin-bottom:clamp(18px,4vh,40px)}
.wordmark{position:relative; display:inline-block; font-family:var(--f-display); font-weight:800;
  font-size:clamp(58px,15vw,168px); line-height:.9; letter-spacing:-.01em;}
.wordmark .base{color:transparent; -webkit-text-stroke:1px var(--hair); text-stroke:1px var(--hair)}
.wordmark .fill{position:absolute; inset:0; color:var(--gold); -webkit-text-stroke:0;
  clip-path:inset(0 0 100% 0)}
.wordmark .dot{color:var(--gold-lo)}
.hero-price{margin-top:clamp(20px,4vh,40px); display:flex; align-items:baseline; gap:16px; justify-content:center; flex-wrap:wrap}
.flap-row{display:inline-flex; font-family:var(--f-mono); font-weight:500; font-size:clamp(24px,4vw,34px); color:var(--gold); letter-spacing:.02em}
.flap{display:inline-block; height:1.05em; overflow:hidden; position:relative; vertical-align:bottom}
.flap .strip{display:flex; flex-direction:column; transition:transform .42s var(--ease2)}
.flap .cell{height:1.05em; line-height:1.05em}
.flap.sep{color:var(--gold)}
.chg{font-family:var(--f-mono); font-size:clamp(13px,1.6vw,16px); letter-spacing:.03em}
.chg.up{color:var(--green)} .chg.down{color:var(--red)}
.hero-offer{margin:clamp(20px,4vh,34px) auto 0; max-width:20ch; font-family:var(--f-serif); font-weight:500; font-size:clamp(23px,4.6vw,42px); line-height:1.12; color:var(--bone); letter-spacing:-.01em}
.hero-offer .g{color:var(--gold); font-style:italic}
.hero-eng{margin-top:14px; font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:var(--steel-dim); text-transform:uppercase}
.hero-proof{display:inline-block; margin-top:16px; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); border-bottom:1px solid var(--hair); padding-bottom:3px; transition:color .2s,border-color .2s}
.hero-proof:hover{color:var(--gold); border-color:var(--gold)}
@media(max-width:768px){ #hero{min-height:auto; padding-top:96px; padding-bottom:72px} .hero-offer{max-width:16ch} .hero-base{display:none} }
/* ---- showcase (image-trail за курсором) ---- */
#showcase{position:relative; padding-top:46px}
.show-stage{position:relative; height:min(58vh,460px); overflow:hidden; margin-top:16px}
.show-word{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-serif); font-style:italic; font-size:clamp(52px,12vw,140px); line-height:1; color:var(--bone); opacity:.9; pointer-events:none; z-index:1; letter-spacing:-.02em}
.show-word b{color:var(--gold); font-style:normal; font-weight:500}
.show-field{position:absolute; inset:0; z-index:3; pointer-events:none}
.tr-card{position:absolute; width:118px; height:150px; border-radius:8px; overflow:hidden; transform:translate(-50%,-50%) scale(.5) rotate(var(--r,0deg)); opacity:0; transition:transform .55s cubic-bezier(.16,.84,.28,1),opacity .5s ease; z-index:3; box-shadow:0 22px 50px -22px #000; border:1px solid var(--hair); will-change:transform,opacity}
.tr-card.in{transform:translate(-50%,-50%) scale(1) rotate(var(--r,0deg)); opacity:1}
.tr-card.out{transform:translate(-50%,-60%) scale(.9) rotate(var(--r,0deg)); opacity:0}
.tr-card .im{position:absolute; inset:0; background-size:cover; background-position:center}
.tr-card .gl{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%)}
.tr-card .tick{position:absolute; top:8px; right:8px; width:13px; height:13px; border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); opacity:.85}
.tr-card .cap{position:absolute; left:10px; right:10px; bottom:9px}
.tr-card .cap b{display:block; font-family:var(--f-mono); font-size:11px; color:var(--bone)}
.tr-card .cap span{display:block; margin-top:2px; font-family:var(--f-mono); font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-hi)}
.show-hint{position:absolute; left:0; right:0; bottom:14px; text-align:center; font-family:var(--f-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-dim); z-index:6; pointer-events:none}
/* fallback: статична клікабельна сітка (mobile / reduced-motion) */
.show-stage.grid{height:auto; overflow:visible}
.show-grid{position:relative; inset:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; pointer-events:auto}
.show-grid .show-card{position:relative; width:100%; height:172px; border-radius:9px; overflow:hidden; border:1px solid var(--hair); box-shadow:0 18px 44px -26px #000; cursor:pointer; background:#111; padding:0}
.show-grid .show-card .im{position:absolute; inset:0; background-size:cover; background-position:center}
.show-grid .show-card .gl{position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.66) 100%)}
.show-grid .show-card .tick{position:absolute; top:10px; right:10px; width:15px; height:15px; border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); opacity:.85}
.show-grid .show-card .cap{position:absolute; left:12px; right:12px; bottom:11px; text-align:left}
.show-grid .show-card .cap b{display:block; font-family:var(--f-mono); font-size:12px; color:var(--bone)}
.show-grid .show-card .cap span{display:block; margin-top:2px; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-hi)}
.show-grid .show-card:hover{border-color:var(--gold); box-shadow:0 22px 54px -24px var(--gold)}
@media(max-width:760px){ .show-word{font-size:clamp(40px,15vw,90px)} .show-grid{grid-template-columns:1fr 1fr} .show-grid .show-card{height:140px} .show-hint{display:none} }
/* ---- cinema (кіно-прокрутка на весь екран → папка проєктів) ---- */
#cinema{position:relative}
.cin-track{position:relative; height:300vh}
.cin-sticky{position:sticky; top:0; height:100vh; overflow:hidden; background:#0b0b0d}
.cin-panel{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; will-change:opacity,transform}
.cin-bg{position:absolute; inset:0}
.cin-bg svg{position:absolute; inset:0; width:100%; height:100%}
.cin-ov{position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%, transparent 25%, rgba(0,0,0,.55) 100%); z-index:1}
.cin-tx{position:relative; z-index:2; text-align:center; max-width:19ch; padding:0 26px}
.cin-tx b{display:block; font-family:var(--f-serif); font-style:italic; font-weight:500; font-size:clamp(30px,6.2vw,74px); line-height:1.03; color:var(--bone); text-shadow:0 4px 40px rgba(0,0,0,.5)}
.cin-tx span{display:block; margin-top:14px; font-family:var(--f-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold)}
.cin-folder{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; z-index:6; background:radial-gradient(85% 85% at 50% 45%, #141417, #0b0b0d)}
.cin-fi{width:128px; height:100px; position:relative; filter:drop-shadow(0 22px 44px rgba(0,0,0,.5))}
.cin-fi:before{content:''; position:absolute; left:8px; top:0; width:54px; height:19px; background:var(--gold-lo); border-radius:7px 13px 0 0}
.cin-fi:after{content:''; position:absolute; left:0; top:13px; right:0; bottom:0; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); border-radius:11px; box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.cin-folder .lb{margin-top:22px; font-family:var(--f-mono); font-weight:700; font-size:16px; letter-spacing:.16em; color:var(--bone)}
.cin-folder .go{margin-top:9px; font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold)}
.cin-folderbtn{background:none; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; padding:0}
.cin-folderbtn:hover .cin-fi{transform:translateY(-3px); transition:transform .25s}
.cin-prog{position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.07); z-index:8}
.cin-prog i{display:block; height:100%; width:0; background:var(--gold)}
.cin-scrollhint{position:absolute; bottom:20px; left:0; right:0; text-align:center; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel-dim); z-index:8; pointer-events:none; transition:opacity .3s}
@media(max-width:760px){
  .cin-track{height:auto}
  .cin-sticky{position:relative; height:auto; display:block}
  .cin-panel{position:relative; inset:auto; opacity:1!important; transform:none!important; height:74vh}
  .cin-folder{position:relative; inset:auto; opacity:1!important; transform:none!important; height:56vh}
  .cin-scrollhint,.cin-prog{display:none}
}
.hero-base{position:absolute; left:0; right:0; bottom:96px; height:1px; background:var(--hair); overflow:hidden}
.hero-base .scan{position:absolute; top:0; height:1px; width:24%; background:linear-gradient(90deg,transparent,var(--gold-hi),transparent); left:-30%; animation:scan 6s var(--ease) infinite}
@keyframes scan{0%{left:-30%}100%{left:110%}}
.hero-down{position:absolute; bottom:42px; left:0; right:0; text-align:center; font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--steel)}
.hero-down a{position:relative; padding-bottom:8px}
.hero-down a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); animation:breathe 3.2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:1}}
.hero-down .arr{display:block; margin-bottom:8px; color:var(--gold); animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---- ACCOUNT ---- */
#account{padding-top:clamp(70px,11vh,140px); padding-bottom:clamp(70px,11vh,130px)}
.acc-h{font-family:var(--f-serif); font-weight:500; font-size:clamp(30px,5.5vw,68px); line-height:1.05; margin:24px 0; max-width:14ch}
.acc-sub{color:var(--steel); font-size:clamp(15px,2vw,18px); max-width:46ch; line-height:1.7}
.cli{margin-top:40px; background:var(--panel); border:1px solid var(--hair); border-radius:3px; padding:22px 24px; max-width:640px; font-family:var(--f-mono)}
.cli .prompt{color:var(--steel-dim); font-size:13px}
.cli .prompt b{color:var(--gold)}
.cli-links{display:flex; gap:14px; flex-wrap:wrap; margin-top:20px}
.cli-links a{display:inline-flex; align-items:center; gap:9px; border:1px solid var(--hair); padding:14px 20px; min-height:46px; box-sizing:border-box; border-radius:2px; font-size:12px; letter-spacing:.08em; color:var(--bone); transition:.25s; text-transform:uppercase}
.cli-links a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}

/* ---- MAKER / клеймо майстра ---- */
.maker-grid{display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:start; margin-top:10px}
.maker-seal svg{width:154px; height:154px; display:block}
.maker-body .ai-h{margin-bottom:10px}
.maker-facts{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 20px}
.maker-facts .mf{border-left:2px solid var(--gold); border-radius:0; padding:3px 0 3px 13px}
.maker-facts .mf b{display:block; font-family:var(--f-mono); font-size:12px; letter-spacing:.03em; color:var(--bone); font-weight:700; margin-bottom:5px}
.maker-facts .mf span{font-size:13px; color:var(--steel); line-height:1.5}
.maker-steps{display:flex; flex-wrap:wrap; gap:10px 22px; font-family:var(--f-mono); font-size:12px; letter-spacing:.05em; color:var(--steel-dim)}
@media(max-width:760px){ .maker-grid{grid-template-columns:1fr; gap:22px; justify-items:start} .maker-facts{grid-template-columns:1fr; gap:12px} .maker-seal svg{width:112px; height:112px} }

/* ---- FOOTER TICKER ---- */
.fine{padding:24px var(--gut) 40px; max-width:var(--maxw); margin:0 auto; font-family:var(--f-mono); font-size:10.5px; color:var(--steel-dim); letter-spacing:.05em; line-height:1.8; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; border-top:1px solid var(--hair2)}
.fine .sig{color:var(--steel)}

/* reveal — "виринання з-під води": розмиття + підйом + сплеск над поверхнею */
.rv{opacity:0}
.rv.in{animation:surface 1.25s var(--ease) both; animation-delay:calc(var(--i,0)*.07s)}
@keyframes surface{
  0%  {opacity:0; transform:translateY(60px) scale(.955); filter:blur(16px)}
  45% {opacity:1}
  62% {filter:blur(0)}
  74% {transform:translateY(-8px) scale(1.008)}   /* пробив поверхню */
  88% {transform:translateY(2px) scale(.999)}      /* осідання, як на хвилі */
  100%{opacity:1; transform:translateY(0) scale(1); filter:blur(0)}
}

/* ---- POUR overlay ---- */
#pour{position:fixed; inset:0; z-index:9000; pointer-events:none; display:none}
#pour.on{display:block; pointer-events:auto}
#pourcanvas{position:fixed; inset:0; width:100%; height:100%; display:block}
#pourfallback{position:fixed; inset:0; background:linear-gradient(180deg,var(--gold-hi),var(--gold) 30%,var(--gold-lo)); clip-path:inset(0 0 100% 0); display:none}
.pour-stamp{position:fixed; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; z-index:9100;
  font-family:var(--f-display); font-weight:800; color:#1a1206; opacity:0; mix-blend-mode:overlay; pointer-events:none}
.pour-stamp .ps-sym{font-size:clamp(40px,9vw,110px); letter-spacing:.04em}
.pour-stamp .ps-l{font-family:var(--f-mono); font-weight:500; font-size:13px; letter-spacing:.3em; margin-top:14px; color:#0e0a03}

/* ---- toast ---- */
#toast{position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); z-index:9700;
  background:var(--panel); border:1px solid var(--gold-lo); color:var(--bone); padding:13px 20px; border-radius:3px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.04em; opacity:0; pointer-events:none; transition:.4s var(--ease)}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- AI concierge «ДИЛЕР / КАРАТ» ---- */
#ccLauncher{position:fixed; right:var(--gut); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:8000;
  display:inline-flex; align-items:center; gap:10px; height:50px; padding:0 18px 0 15px;
  background:var(--glass); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--hair); border-left:2px solid var(--gold); border-radius:3px; cursor:pointer;
  transition:transform .25s var(--ease),border-color .25s,box-shadow .25s; color:var(--bone)}
#ccLauncher:hover{transform:translateY(-2px); border-color:var(--gold); box-shadow:0 12px 34px -14px var(--gold)}
#ccLauncher .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); animation:blink 1.6s var(--ease) infinite; flex:none}
#ccLauncher .lbl{display:flex; flex-direction:column; align-items:flex-start; line-height:1.2}
#ccLauncher .lbl b{font-family:var(--f-mono); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase}
#ccLauncher .lbl span{font-family:var(--f-mono); font-size:8.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel-dim)}
#ccLauncher.hide{opacity:0; pointer-events:none; transform:translateY(10px)}
#ccLauncher .su-host{width:36px; height:36px; flex:none; display:block; margin:-3px -4px -3px -5px}
.cc-head .su-host{width:42px; height:42px; flex:none; display:block; margin:-2px 0}

.cc-scrim{position:fixed; inset:0; z-index:8090; background:var(--cmd-bg); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s}
.cc-scrim.on{opacity:1; pointer-events:auto}

#ccPanel{position:fixed; right:var(--gut); bottom:24px; z-index:8100; width:min(400px,92vw); height:min(620px,80vh);
  display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--hair); border-radius:6px;
  box-shadow:0 30px 80px -20px #000; overflow:hidden; opacity:0; transform:translateY(16px) scale(.98); pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
#ccPanel.on{opacity:1; transform:none; pointer-events:auto}
.cc-head{display:flex; align-items:center; gap:9px; height:52px; padding:0 14px; border-bottom:1px solid var(--hair); flex:none}
.cc-head .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:blink 1.6s var(--ease) infinite;flex:none}
.cc-head .ti{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--bone)}
.cc-head .ti b{font-weight:700}
.cc-head .ti .st{color:var(--green); margin-left:7px; font-size:10px; letter-spacing:.14em}
.cc-head .sp{flex:1}
.cc-head button{width:30px; height:30px; background:none; border:none; color:var(--steel); cursor:pointer; font-family:var(--f-mono); font-size:15px; border-radius:2px; transition:.2s}
.cc-head button:hover{color:var(--bone); background:var(--panel2)}
.cc-log{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:18px 16px; display:flex; flex-direction:column}
.cc-log::-webkit-scrollbar{width:8px}.cc-log::-webkit-scrollbar-thumb{background:var(--hair); border-radius:4px}
.cc-greet{font-family:var(--f-serif); font-size:21px; line-height:1.2; color:var(--bone); margin-bottom:6px}
.cc-greet .g{color:var(--gold); font-style:italic}
.cc-greet-sub{font-size:13px; color:var(--steel); margin-bottom:18px; line-height:1.5}
.cc-starters{display:flex; flex-direction:column; gap:8px}
.cc-starter{text-align:left; background:none; border:1px solid var(--hair); border-radius:2px; padding:11px 13px;
  font-family:var(--f-mono); font-size:12px; color:var(--bone); cursor:pointer; transition:.2s var(--ease); line-height:1.4}
.cc-starter:hover{border-color:var(--gold); transform:translateY(-1px)}
.cc-msg{max-width:88%; margin-bottom:16px; font-size:14px; line-height:1.55; word-wrap:break-word}
.cc-msg .tag{font-family:var(--f-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:5px; display:block}
.cc-msg.me{margin-left:auto; text-align:left}
.cc-msg.me .tag{color:var(--steel-dim); text-align:right}
.cc-msg.me .body{background:var(--panel2); border:1px solid var(--hair); border-radius:8px 8px 2px 8px; padding:9px 12px; color:var(--bone); font-family:var(--f-body)}
.cc-msg.bot{margin-right:auto}
.cc-msg.bot .tag{color:var(--gold-lo)}
.cc-msg.bot .body{border-left:2px solid var(--hair); padding-left:12px; color:var(--bone); font-family:var(--f-body)}
.cc-msg.bot.live .body{border-left-color:var(--gold)}
.cc-msg.err .body{border-left-color:var(--red)}
.cc-msg .body a{color:var(--gold); text-decoration:underline; text-underline-offset:2px}
.cc-msg .body code{font-family:var(--f-mono); color:var(--gold-lo); font-size:.92em}
.cc-msg .body strong{color:var(--bone); font-weight:600}
.cc-sym{font-family:var(--f-mono); font-size:.85em; letter-spacing:.06em; color:var(--gold-lo); border:1px solid var(--hair); border-radius:2px; padding:0 4px; cursor:pointer}
.cc-sym:hover{color:var(--gold); border-color:var(--gold)}
.cc-caret{color:var(--gold); animation:blink 1s var(--ease) infinite; font-weight:700}
.cc-typing{display:inline-flex; gap:4px; align-items:center; padding:2px 0}
.cc-typing i{width:5px; height:5px; border-radius:50%; background:var(--steel); animation:ccdot 1.2s var(--ease) infinite}
.cc-typing i:nth-child(2){animation-delay:.2s}.cc-typing i:nth-child(3){animation-delay:.4s}
@keyframes ccdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.cc-order-wrap{display:flex; justify-content:center; margin:16px 2px 6px}
.cc-order{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; font-weight:700; letter-spacing:.03em; color:#1b1500; background:var(--gold); border:1px solid var(--gold-hi); border-radius:3px; padding:11px 17px; cursor:pointer; transition:transform .2s var(--ease),box-shadow .2s; text-align:center; line-height:1.25}
.cc-order:hover{transform:translateY(-1px); box-shadow:0 12px 30px -12px var(--gold)}
.cc-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.cc-cta a{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--hair); padding:9px 14px; border-radius:2px; font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--bone); transition:.2s}
.cc-cta a:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-1px)}
.cc-retry{margin-top:10px; background:none; border:1px solid var(--hair); color:var(--steel); padding:7px 12px; border-radius:2px; font-family:var(--f-mono); font-size:11px; cursor:pointer}
.cc-retry:hover{border-color:var(--gold); color:var(--gold)}
.cc-input{flex:none; display:flex; align-items:flex-end; gap:8px; border-top:1px solid var(--hair); padding:11px 12px calc(11px + env(safe-area-inset-bottom)); background:var(--panel2)}
.cc-input .pr{font-family:var(--f-mono); color:var(--gold); font-size:15px; line-height:34px; flex:none}
.cc-input textarea{flex:1; background:none; border:none; outline:none; color:var(--bone); font-family:var(--f-mono); font-size:14px; resize:none; line-height:1.45; max-height:96px; padding:8px 0}
.cc-input textarea::placeholder{color:var(--steel-dim)}
.cc-send{flex:none; width:36px; height:36px; border:1px solid var(--hair); border-radius:2px; background:none; color:var(--steel); font-family:var(--f-mono); font-size:16px; cursor:pointer; transition:.2s}
.cc-send.ready{border-color:var(--gold); color:var(--gold)}
.cc-send.ready:hover{transform:translateY(-1px)}
.cc-send:disabled{opacity:.4; cursor:not-allowed}
/* ---- voice: mic (speech-in) + speaker toggle (speech-out) ---- */
.cc-mic{flex:none; width:36px; height:36px; border:1px solid var(--hair); border-radius:2px; background:none; color:var(--steel); cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center; padding:0}
.cc-mic:hover{color:var(--bone); border-color:var(--steel)}
.cc-mic svg{width:16px; height:16px; display:block}
.cc-mic.live{border-color:#e5484d; color:#e5484d; animation:micpulse 1.15s ease-in-out infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.5)}50%{box-shadow:0 0 0 7px rgba(229,72,77,0)}}
.cc-voice svg{width:16px; height:16px; display:block; margin:auto}
.cc-voice .w{opacity:.28; transition:opacity .2s}
.cc-voice.on{color:var(--gold)}
.cc-voice.on .w{opacity:1}
@keyframes spk{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.45)}50%{box-shadow:0 0 0 6px rgba(212,175,55,0)}}
body.cc-speaking .cc-voice.on{animation:spk 1.1s ease-in-out infinite}
.cc-fine{flex:none; font-family:var(--f-mono); font-size:9px; letter-spacing:.04em; color:var(--steel-dim); text-align:center; padding:0 12px 8px; background:var(--panel2)}
.cc-grab{display:none}
@media(max-width:720px){
  #ccPanel{right:0; left:0; bottom:0; top:auto; width:100%; height:88dvh; max-height:88dvh; border-radius:14px 14px 0 0; border-left:none; border-right:none; border-bottom:none; transform:translateY(100%)}
  #ccPanel.on{transform:none}
  .cc-grab{display:block; width:40px; height:4px; border-radius:2px; background:var(--hair); margin:8px auto 0; flex:none}
}
@media(max-width:560px){
  #ccLauncher{padding:0; width:46px; justify-content:center}
  #ccLauncher .lbl{display:none}
}

/* ---- live demo desk ---- */
.desk-h{font-family:var(--f-serif); font-size:clamp(26px,4.4vw,44px); line-height:1.06; color:var(--bone); margin:6px 0 10px}
.desk-h .g{color:var(--gold); font-style:italic}
.desk-sub{max-width:62ch; color:var(--steel); font-size:15px; line-height:1.6; margin-bottom:22px}
.desk-chips{display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; margin-bottom:18px; scroll-snap-type:x proximity}
.desk-chips::-webkit-scrollbar{height:6px}.desk-chips::-webkit-scrollbar-thumb{background:var(--hair); border-radius:3px}
.desk-chip{flex:0 0 auto; scroll-snap-align:start; min-width:152px; text-align:left; background:none; border:1px solid var(--hair); border-radius:3px; padding:11px 13px; cursor:pointer; transition:transform .2s var(--ease),border-color .2s; display:flex; flex-direction:column; gap:3px}
.desk-chip b{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--steel-dim)}
.desk-chip span{font-size:13px; color:var(--bone)}
.desk-chip i{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.03em; color:var(--steel-dim); font-style:normal}
.desk-chip:hover{border-color:var(--gold); transform:translateY(-2px)}
.desk-chip.act{border-color:var(--gold); border-left:2px solid var(--gold)}
.desk-chip.act b{color:var(--gold)}
.desk-benefit{margin:-6px 0 18px; font-size:13.5px; line-height:1.5; color:var(--gold-hi); max-width:66ch}
.desk-benefit:empty{display:none}
.desk-benefit b{color:var(--gold); font-weight:400}
.desk-stage{display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start}
.desk-chat{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--hair); border-radius:6px; overflow:hidden}
.desk-chat-head{display:flex; align-items:center; gap:9px; height:48px; padding:0 14px; border-bottom:1px solid var(--hair); flex:none}
.desk-chat-head .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px var(--gold); animation:blink 1.6s var(--ease) infinite; flex:none}
.desk-name{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--bone)}
.cc-livebadge{font-family:var(--f-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); border:1px solid var(--hair); border-radius:2px; padding:2px 6px}
.cc-livebadge.prev{color:var(--gold-hi)}
.desk-chat-head .sp{flex:1}
.desk-chat-head button{width:28px; height:28px; background:none; border:none; color:var(--steel); cursor:pointer; font-family:var(--f-mono); font-size:14px; border-radius:2px; transition:.2s}
.desk-chat-head button:hover{color:var(--bone); background:var(--panel2)}
.desk-chat .cc-log{flex:1; height:min(440px,56vh)}
.cc-empty{padding:8px 0}
.cc-scriptnote{margin-top:8px; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.04em; color:var(--gold-hi); opacity:.8}
.desk-assay{background:var(--panel2); border:1px solid var(--hair); border-radius:6px; padding:18px 16px}
.desk-assay .da-h{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-dim); margin-bottom:6px}
.desk-assay .da-row{display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--hair); font-size:13px; line-height:1.5}
.desk-assay .da-row b{flex:none; color:var(--gold); font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; width:54px}
.desk-assay .da-row span{color:var(--steel)}
.desk-assay .da-foot{margin-top:14px; padding-top:12px; border-top:1px solid var(--hair); font-family:var(--f-mono); font-size:9.5px; letter-spacing:.06em; color:var(--steel-dim)}
@media(max-width:880px){ .desk-stage{grid-template-columns:1fr} .desk-assay{order:2} }

/* ---- AI engineering + pipeline ---- */
.ai-h{font-family:var(--f-serif); font-size:clamp(24px,4vw,40px); line-height:1.08; color:var(--bone); margin:6px 0 10px}
.ai-sub{max-width:64ch; color:var(--steel); font-size:15px; line-height:1.6; margin-bottom:26px}
.ai-caps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair)}
.ai-cap{background:var(--panel); padding:18px 16px}
.ai-cap .ic{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; color:var(--gold-lo); margin-bottom:9px}
.ai-cap h3{font-size:15px; color:var(--bone); margin-bottom:7px; font-weight:600}
.ai-cap p{font-size:12.5px; line-height:1.55; color:var(--steel)}
.ai-diag{margin:24px 0 8px; font-family:var(--f-mono); font-size:clamp(10px,1.6vw,13px); letter-spacing:.02em; color:var(--steel); overflow-x:auto; white-space:nowrap; padding-bottom:6px}
.ai-diag .m{color:var(--steel-dim)}
.ai-diag .gold{color:var(--gold); border:1px solid var(--gold-lo); border-radius:2px; padding:2px 7px}
.ai-note{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.02em; color:var(--steel-dim); max-width:64ch}
.ai-pipe{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair)}
.ai-step{background:var(--panel); padding:18px 16px; position:relative}
.ai-step .st{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; color:var(--gold); margin-bottom:9px}
.ai-step h3{font-size:14px; color:var(--bone); margin-bottom:7px; font-weight:600}
.ai-step p{font-size:12.5px; line-height:1.55; color:var(--steel)}
@media(max-width:880px){ .ai-caps{grid-template-columns:repeat(2,1fr)} .ai-pipe{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .ai-caps{grid-template-columns:1fr} .ai-pipe{grid-template-columns:1fr} }

/* ---- works (live projects) ---- */
.works-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; margin-top:8px}
.work-card{text-align:left; background:var(--panel); border:1px solid var(--hair); border-radius:8px; padding:22px 20px; cursor:pointer; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s; display:flex; flex-direction:column; gap:9px}
.work-card:hover{transform:translateY(-3px); border-color:var(--gold); box-shadow:0 18px 50px -22px var(--gold)}
.wk-top{display:flex; align-items:center; justify-content:space-between}
.wk-sym{font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--gold)}
.wk-cat{font-family:var(--f-mono); font-size:9px; letter-spacing:.16em; color:var(--steel-dim)}
.wk-name{font-family:var(--f-serif); font-size:26px; line-height:1.1; color:var(--bone)}
.wk-desc{font-size:14px; line-height:1.55; color:var(--steel)}
.wk-stack{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.03em; color:var(--steel-dim)}
.wk-foot{display:flex; align-items:center; justify-content:space-between; margin-top:6px; padding-top:12px; border-top:1px solid var(--hair)}
.wk-dom{font-family:var(--f-mono); font-size:12px; color:var(--bone)}
.wk-go{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; color:var(--gold)}
.works-note{margin-top:16px; font-family:var(--f-mono); font-size:11px; letter-spacing:.04em; color:var(--steel-dim)}
@media(max-width:720px){ .works-grid{grid-template-columns:1fr} }

/* ---- forged carbon + gold flecks ---- */
.carbon{position:relative; isolation:isolate}
.carbon::before,.carbon::after{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none}
.carbon::before{background:var(--carbon-tex); background-size:280px 280px; opacity:var(--carbon-alpha); z-index:0}
.carbon::after{background:var(--carbon-gold); background-size:190px 190px; opacity:var(--carbon-gold-alpha); z-index:0; mix-blend-mode:screen}
html[data-theme="day"] .carbon::after{mix-blend-mode:normal}
.carbon > *{position:relative; z-index:1}
.work-card:hover::after{opacity:calc(var(--carbon-gold-alpha) + .25)}
.carbon.soft::before{opacity:calc(var(--carbon-alpha) * .5)}
.carbon.soft::after{opacity:calc(var(--carbon-gold-alpha) * .55)}

/* ---- responsive ---- */
@media(max-width:1000px){
  header nav{display:none}
  .menu-btn{display:inline-flex; background:none; border:1px solid var(--hair); color:var(--bone); width:40px; height:34px; border-radius:2px; cursor:pointer; align-items:center; justify-content:center; font-size:16px}
  .hud-price{display:none}
  .mobile-nav{position:fixed; inset:46px 0 0; z-index:55; background:var(--void); display:none; flex-direction:column; padding:30px var(--gut); gap:4px}
  .mobile-nav.on{display:flex}
  .mobile-nav a{font-family:var(--f-mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); padding:18px 0; border-bottom:1px solid var(--hair)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important; animation-iteration-count:1 !important}
  .rv,.rv.in{opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; animation-delay:0 !important}
}

/* ================= БАГАТОСТОРІНКОВІСТЬ: навігація, лоти, прес-перехід ================= */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* --- шапка: активний розділ + золота чорнильна риска --- */
.brand{text-decoration:none}
header nav{position:relative}
header nav a.act{color:var(--gold)}
.nav-ink{position:absolute; left:0; bottom:2px; height:1px; width:0; background:var(--gold);
  box-shadow:0 0 10px var(--gold); opacity:0; pointer-events:none; border-radius:1px;
  transition:transform .5s var(--ease2), width .5s var(--ease2), opacity .3s}
.nav-ink.on{opacity:.9}
.mobile-nav a.act{color:var(--gold)}

/* --- кнопки --- */
.btn-gold,.btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:3px; font-family:var(--f-mono); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; font-weight:700; cursor:pointer;
  transition:transform .28s var(--ease), box-shadow .28s, border-color .28s, color .28s, background .28s}
.btn-gold{background:var(--gold); color:#000; border:1px solid var(--gold)}
.btn-gold:hover{transform:translateY(-2px); box-shadow:0 18px 44px -18px var(--gold)}
.btn-ghost{background:none; color:var(--bone); border:1px solid var(--hair)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); transform:translateY(-2px)}

/* --- ЛОТИ: карта сайту як біржова дошка --- */
#lots{padding-top:clamp(56px,9vh,120px); padding-bottom:clamp(46px,8vh,100px)}
.lots-h{font-family:var(--f-serif); font-weight:500; font-size:clamp(26px,4.4vw,46px); line-height:1.06;
  letter-spacing:-.01em; margin:16px 0 10px; max-width:19ch}
.lots-h .g{color:var(--gold); font-style:italic}
.lots-sub{max-width:56ch; color:var(--steel); font-size:15px; line-height:1.6; margin-bottom:clamp(20px,3vh,32px)}
.lot-board{border-top:1px solid var(--hair)}
.lot{position:relative; display:grid; grid-template-columns:60px minmax(0,1fr) auto 30px; align-items:center;
  gap:18px; padding:22px 12px; border-bottom:1px solid var(--hair); overflow:hidden;
  transition:padding-left .4s var(--ease)}
.lot-fill{position:absolute; inset:0 auto 0 0; width:0; pointer-events:none;
  background:linear-gradient(90deg,rgba(232,178,58,.14),rgba(232,178,58,.02) 62%,transparent 88%);
  transition:width .55s var(--ease2)}
.lot::after{content:''; position:absolute; left:0; bottom:-1px; height:1px; width:0; background:var(--gold);
  box-shadow:0 0 12px var(--gold); transition:width .55s var(--ease2)}
.lot:hover,.lot:focus-visible{padding-left:24px}
.lot:hover .lot-fill,.lot:focus-visible .lot-fill{width:100%}
.lot:hover::after,.lot:focus-visible::after{width:100%}
.lot-idx{font-size:12px; letter-spacing:.2em; color:var(--gold-lo); transition:color .3s}
.lot:hover .lot-idx{color:var(--gold)}
.lot-body{display:flex; flex-direction:column; gap:6px; min-width:0; position:relative}
.lot-name{font-family:var(--f-serif); font-weight:500; font-size:clamp(19px,2.4vw,28px); line-height:1.14; color:var(--bone)}
.lot-sub{font-size:13.5px; line-height:1.5; color:var(--steel); max-width:60ch}
.lot-tag{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel-dim);
  border:1px solid var(--hair); border-radius:2px; padding:5px 9px; white-space:nowrap; position:relative; transition:.3s}
.lot:hover .lot-tag{border-color:var(--gold-lo); color:var(--gold)}
.lot-go{font-size:17px; color:var(--gold); text-align:right; opacity:.3; position:relative;
  transform:translateX(-8px); transition:transform .38s var(--ease), opacity .38s}
.lot:hover .lot-go{transform:translateX(0); opacity:1}

/* --- вітрина: кнопка «усі роботи» --- */
.show-more{display:flex; justify-content:center; padding-top:clamp(18px,3vh,34px)}

/* --- нижній заклик на головній --- */
#homecta{padding-top:clamp(40px,6vh,80px); padding-bottom:clamp(60px,10vh,120px)}
.hc{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  border:1px solid var(--hair); border-radius:8px; padding:clamp(24px,3.6vw,42px)}
.hc-h{font-family:var(--f-serif); font-weight:500; font-size:clamp(22px,3.2vw,34px); line-height:1.1; margin-bottom:9px}
.hc-s{color:var(--steel); font-size:14.5px; line-height:1.6; max-width:52ch}
.hc-acts{display:flex; gap:12px; flex-wrap:wrap}

/* --- перша секція підсторінки (під фіксованою шапкою) --- */
.page-first{padding-top:clamp(92px,14vh,168px)}
/* фокус після переходу ставимо програмно (для читалок) — рамку показуємо лише клавіатурі */
main h1[tabindex="-1"]:focus{outline:none}
main h1[tabindex="-1"]:focus-visible{outline:2px solid var(--gold); outline-offset:8px; border-radius:2px}

/* друга секція на сторінці (у монолиті секції стояли впритул — тепер дихають) */
main>section+section:not(#cinema):not(#showcase):not(#lots):not(#homecta){padding-top:clamp(46px,8vh,96px)}

/* --- перехід між лотами внизу підсторінки --- */
.lotnav{display:flex; gap:14px; width:100%; max-width:calc(var(--maxw) + var(--gut) + var(--gut));
  margin:clamp(46px,8vh,96px) auto clamp(56px,9vh,110px); padding:0 var(--gut)}
.ln-a{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:12px; border:1px solid var(--hair);
  border-radius:4px; padding:18px 20px; background:none;
  transition:border-color .3s, transform .3s var(--ease), background .3s}
.ln-a.next{justify-content:flex-end; text-align:right}
.ln-a b{font-family:var(--f-serif); font-weight:500; font-size:clamp(15px,1.9vw,21px); color:var(--bone)}
.ln-a .mono{color:var(--gold); font-size:13px; transition:transform .3s var(--ease)}
.ln-a:hover{border-color:var(--gold); transform:translateY(-2px); background:var(--panel)}
.ln-a.prev:hover .mono{transform:translateX(-4px)}
.ln-a.next:hover .mono{transform:translateX(4px)}

/* --- підвал: карта сайту --- */
.foot-nav{display:flex; flex-wrap:wrap; gap:10px 26px; max-width:var(--maxw); margin:0 auto;
  padding:22px var(--gut) 0; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel-dim)}
.foot-nav a{transition:color .25s}
.foot-nav a:hover{color:var(--gold)}
.foot-nav a.act{color:var(--bone)}

/* ================= ПРЕС: карбування переходу ================= */
#press{position:fixed; inset:0; z-index:9500; pointer-events:none; visibility:hidden}
#press.act{visibility:visible}
.pr-half{position:absolute; left:-1px; right:-1px; height:calc(50% + 1px); backface-visibility:hidden;
  transition:transform .32s cubic-bezier(.62,.02,.24,1)}
#press.act .pr-half{will-change:transform}
.pr-half.t{top:0; transform:translate3d(0,-100.6%,0);
  background:linear-gradient(180deg,#14100A 0%,#5C400E 22%,#C79A2E 56%,#E8B23A 78%,#FFE9A8 100%)}
.pr-half.b{bottom:0; transform:translate3d(0,100.6%,0);
  background:linear-gradient(0deg,#14100A 0%,#5C400E 22%,#C79A2E 56%,#E8B23A 78%,#FFE9A8 100%)}
.pr-half::after{content:''; position:absolute; inset:0; background-image:var(--carbon-tex);
  background-size:620px 620px; mix-blend-mode:overlay; opacity:.26}
.pr-edge{position:absolute; left:0; right:0; height:2px; background:#FFF6DC;
  box-shadow:0 0 20px 5px rgba(255,233,168,.7)}
.pr-half.t .pr-edge{bottom:0}
.pr-half.b .pr-edge{top:0}
/* золоті краплі, що тягнуться за пресом на розкритті */
.pr-half.t::before{content:''; position:absolute; left:0; right:0; bottom:-13px; height:13px; opacity:0;
  background:radial-gradient(7px 13px at 14px -2px,#FFE9A8 58%,transparent 60%) repeat-x 0 0/34px 13px;
  transition:opacity .2s}
#press.opening .pr-half.t::before{opacity:.85}
#press.shut .pr-half{transform:translate3d(0,0,0)}
#press.opening .pr-half{transition:transform .5s cubic-bezier(.2,.86,.24,1)}

/* напис «вибито» в металі: темна фарба + світлий підріз знизу (blend не використовуємо —
   half-и підняті на власний композит-шар, і multiply там не бачить золото) */
.pr-core{position:absolute; left:50%; top:50%; z-index:2; display:flex; align-items:center; gap:16px;
  transform:translate(-50%,-50%) scale(1.16); opacity:0; color:#2B1C05; white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,246,220,.5), 0 -1px 1px rgba(60,38,4,.35);
  transition:opacity .15s ease .26s, transform .42s var(--ease) .06s}
#press.shut .pr-core{opacity:1; transform:translate(-50%,-50%) scale(1)}
#press.opening .pr-core{opacity:0; transform:translate(-50%,-50%) scale(.94); transition:opacity .18s ease, transform .3s var(--ease)}
.pr-idx{font-size:12.5px; letter-spacing:.28em; font-weight:700}
.pr-rule{width:clamp(26px,5vw,54px); height:1px; background:currentColor; opacity:.55}
.pr-name{font-family:var(--f-display); font-weight:800; font-size:clamp(17px,3.2vw,32px);
  letter-spacing:.12em; text-transform:uppercase}
.pr-spark{position:absolute; left:0; right:0; top:50%; height:2px; opacity:0; z-index:3;
  background:linear-gradient(90deg,transparent,#fff,transparent); transform:translateY(-50%) scaleX(0)}
#press.shut .pr-spark{animation:prSpark .44s var(--ease) both}
@keyframes prSpark{0%{opacity:0; transform:translateY(-50%) scaleX(.1)}
  16%{opacity:1; transform:translateY(-50%) scaleX(1)} 100%{opacity:0; transform:translateY(-50%) scaleX(1)}}

/* стара сторінка відходить углиб, нова — виринає */
main{transition:opacity .3s ease, transform .3s var(--ease)}
body.nav-out main{opacity:.28; transform:scale(.986) translateY(-8px)}
main.nav-in>section:not(#cinema),main.nav-in>nav{animation:pgIn .55s var(--ease) both}
main.nav-in>:nth-child(2){animation-delay:.07s}
main.nav-in>:nth-child(3){animation-delay:.13s}
main.nav-in>:nth-child(n+4){animation-delay:.18s}
@keyframes pgIn{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}

/* тонка золота смужка прогресу, якщо сторінка вантажиться довше за прес */
.nav-prog{position:fixed; left:0; top:0; height:2px; width:0; z-index:9800; opacity:0; pointer-events:none;
  background:linear-gradient(90deg,var(--gold-lo),var(--gold),var(--gold-hi));
  box-shadow:0 0 12px var(--gold); transition:width .35s ease, opacity .3s}
.nav-prog.on{opacity:1}

@media(max-width:820px){
  /* шапка не влазила на вузьких екранах ще з монолиту — лишаємо тільки бренд + LIVE */
  .brand-sub,.brand .clock{display:none}
}
@media(max-width:760px){
  .lot{grid-template-columns:42px minmax(0,1fr) 22px; gap:12px; padding:18px 6px}
  .lot-tag{display:none}
  .lot:hover,.lot:focus-visible{padding-left:12px}
  .lots-h{max-width:none}
  .hc{flex-direction:column; align-items:flex-start}
  .hc-acts{width:100%}
  .hc-acts>*{flex:1 1 auto}
  .lotnav{flex-direction:column}
  .ln-a{padding:15px 16px}
  .pr-core{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  #press{display:none}
  main{transition:opacity .16s linear}
  body.nav-out main{opacity:0; transform:none}
  main.nav-in>section,main.nav-in>nav{animation:none !important}
  .lot,.lot-fill,.lot::after,.lot-go{transition:none !important}
}