/* Beleg — shared styles. "Noir × Cashmere": black + rose gold for big moments, milk / taupe / espresso for every day. */
:root{
  --bg:#FBF7F4; --surface:#FFFFFF; --ink:#2E2420; --muted:#7A6A60; --line:#E9DFD6;
  --red:#3B2F2A; --red-ink:#FBF7F4; --gold:#A8735A; --gold-soft:#F3E7DE; --night:#0B0B0B;
  --ok:#3F7A57; --warn:#A8662A; --bad:#A63A32;
  --display:"Cormorant Garamond","Times New Roman",serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --caps:"Tenor Sans","Manrope",sans-serif;
  --brand:var(--red);
  --rg:linear-gradient(100deg,#B98266,#F1CDB5 48%,#A86F55 85%);
  --taupe:#CDBCA8;
  --wood:repeating-linear-gradient(92deg,#3E2E26 0 3px,#46342B 3px 7px,#3A2A22 7px 9px);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0B0B0B; --surface:#151312; --ink:#EDE2D8; --muted:#A8968B; --line:#2A2522;
  --red:#D9AE94; --red-ink:#0B0B0B; --gold:#C99A80; --gold-soft:#241B17; --night:#000000;
  --ok:#7BC596; --warn:#E0A56A; --bad:#EE7B70; color-scheme:dark}}
body.noir{
  --bg:#0B0B0B; --surface:#151312; --ink:#EDE2D8; --muted:#A8968B; --line:#2A2522;
  --red:#D9AE94; --red-ink:#0B0B0B; --gold:#C99A80; --gold-soft:#241B17; --night:#000000;
  --ok:#7BC596; --warn:#E0A56A; --bad:#EE7B70; color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
a{color:var(--red)}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:640px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-right)) 64px max(16px,env(safe-area-inset-left))}
.wrap.wide{max-width:1040px}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 10px;flex-wrap:wrap}
.logo{font-family:var(--display);font-weight:700;font-size:26px;color:var(--red);text-decoration:none}
.logo small{font-family:var(--body);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);margin-left:6px}
.nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.nav a,.nav button{font:700 14px var(--body);color:var(--muted);text-decoration:none;background:none;border:0;padding:8px 10px;border-radius:10px;cursor:pointer}
.nav a.on{color:var(--red);background:var(--gold-soft)}
h1{font-family:var(--display);font-weight:700;font-size:30px;line-height:1.15;margin:8px 0 6px;text-wrap:balance}
h2{font-family:var(--display);font-weight:500;font-size:22px;margin:0}
h3{font-size:16px;margin:0}
.lead{color:var(--muted);margin:0 0 18px}
.muted{color:var(--muted);font-size:14px;margin:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;display:grid;gap:14px;margin-bottom:16px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
label.f{display:grid;gap:6px;font-size:14px;font-weight:700}
.hint{font-size:13px;color:var(--muted);font-weight:500}
input,select,textarea{width:100%;font:500 16px var(--body);color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;min-height:48px}
input[type=color]{padding:4px;height:48px}
textarea{min-height:96px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:14px 18px;font:800 16px var(--body);cursor:pointer;background:var(--brand);color:var(--red-ink);width:100%;min-height:52px;text-decoration:none}
.btn.ghost{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn.gold{background:var(--gold);color:#2B1517}
.btn.sm{width:auto;padding:8px 14px;font-size:14px;min-height:40px}
.btn.danger{background:transparent;color:var(--bad);border:2px solid var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:10px 16px;font:700 15px var(--body);cursor:pointer;font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--red-ink)}
.err{color:var(--bad);font-size:14px;font-weight:700;margin:0}
.okmsg{color:var(--ok);font-size:14px;font-weight:700;margin:0}
.banner{border-radius:14px;padding:12px 14px;font-size:14.5px;font-weight:600}
.banner.warn{background:color-mix(in srgb,var(--warn) 15%,transparent)}
.banner.bad{background:color-mix(in srgb,var(--bad) 14%,transparent)}
.banner.ok{background:color-mix(in srgb,var(--ok) 14%,transparent)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.stat span{font-size:12.5px;color:var(--muted);font-weight:600}
.stat b{display:block;font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
td input,td select{min-height:38px;padding:6px 8px;font-size:14px;width:auto}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800}
.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.pill.mute{background:var(--line);color:var(--muted)}
.code{font-family:ui-monospace,Menlo,monospace;font-weight:800;letter-spacing:2px}
.qr{background:#fff;padding:8px;border-radius:10px;width:180px;height:180px;margin:0 auto}
.qr svg{width:100%;height:100%;display:block}
.tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs button{border:0;background:none;font:800 15px var(--body);color:var(--muted);padding:12px 12px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--red);border-bottom-color:var(--red)}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:999px;font-size:14px;font-weight:700;z-index:50;max-width:calc(100% - 32px);text-align:center}
.toast.bad{background:var(--bad);color:#fff}
.center{text-align:center}
.biz{display:flex;gap:12px;align-items:center}
.biz .lg{width:52px;height:52px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:22px;flex:none;overflow:hidden}
.biz .lg img{width:100%;height:100%;object-fit:cover}
.biz div{min-width:0}
.biz strong{display:block;font-size:17px}
.biz span{font-size:13.5px;color:var(--muted)}
.steps{display:grid;gap:10px}
.steps div{display:flex;gap:10px;align-items:flex-start}
.n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;font-size:13px;flex:none}
.empty{text-align:center;color:var(--muted);padding:24px 8px}
.foot{margin-top:28px;text-align:center;font-size:13px;color:var(--muted)}
/* gift box */
.stage{display:grid;place-items:center;padding:16px 0 40px}
.box{position:relative;width:220px;height:190px;cursor:pointer;border:0;background:none;padding:0}
.box .base{position:absolute;left:15px;right:15px;bottom:0;height:130px;border-radius:8px;background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 85%,#fff 15%),var(--brand) 55%,color-mix(in srgb,var(--brand) 80%,#000 20%));box-shadow:0 18px 30px -14px rgba(60,10,20,.55)}
.box .lid{position:absolute;left:0;right:0;top:28px;height:42px;border-radius:8px;background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 80%,#fff 20%),var(--brand));transition:transform .7s cubic-bezier(.5,-.3,.3,1.4),opacity .7s}
.box .rib{position:absolute;left:50%;width:26px;margin-left:-13px;top:28px;bottom:0;background:linear-gradient(90deg,#EBD39A,var(--gold) 60%,#9C7322)}
.box .rib-h{position:absolute;left:15px;right:15px;bottom:52px;height:22px;background:linear-gradient(180deg,#EBD39A,var(--gold))}
.box .bow{position:absolute;left:50%;top:-6px;transform:translateX(-50%);width:104px;height:87px;transition:transform .7s,opacity .7s}
.box .tap{position:absolute;left:0;right:0;bottom:-34px;font-size:15px;font-weight:800;color:var(--ink)}
.box.open .lid{transform:translate(-30px,-60px) rotate(-28deg);opacity:0}
.box.open .bow{transform:translate(-80%,-70px) rotate(-30deg);opacity:0}
.box:not(.open){animation:wiggle 2.4s ease-in-out infinite;transform-origin:50% 100%}
@keyframes wiggle{0%,80%,100%{transform:none}85%{transform:rotate(-3deg)}90%{transform:rotate(3deg)}95%{transform:rotate(-2deg)}}
.card{background:var(--surface);border:1.5px solid var(--gold);border-radius:20px;overflow:hidden;text-align:center;box-shadow:0 20px 40px -24px rgba(60,10,20,.45)}
.card .topc{background:linear-gradient(180deg,var(--gold-soft),var(--surface));padding:24px 20px 18px;display:grid;gap:8px}
.card .foil{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:800;color:var(--gold)}
.card .to{font-family:var(--display);font-style:italic;font-size:26px;color:var(--brand)}
.card .msg{white-space:pre-wrap;color:var(--muted)}
.card .tear{position:relative;border-top:2px dashed var(--line);margin:0 18px}
.card .tear::before,.card .tear::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--bg);border:1.5px solid var(--gold)}
.card .tear::before{left:-32px}.card .tear::after{right:-32px}
.card .bottom{padding:18px 20px 22px;display:grid;gap:10px}
.card .amt{font-family:var(--display);font-size:36px;font-weight:700;font-variant-numeric:tabular-nums}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:45}
@media (prefers-reduced-motion:reduce){.box,.box .lid,.box .bow{animation:none!important;transition:none}}
/* segmented choice */
.seg{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.seg button{border:0;background:var(--bg);color:var(--muted);padding:12px 8px;font:800 15px var(--body);cursor:pointer;min-height:48px}
.seg button[aria-pressed="true"]{background:var(--brand);color:#fff}
/* service cards (shop) */
.svcs{display:grid;gap:10px}
.svc{display:flex;gap:12px;align-items:center;text-align:left;width:100%;border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:16px;padding:10px;cursor:pointer;font-family:var(--body)}
.svc[aria-pressed="true"]{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.svc .ph{width:72px;height:72px;border-radius:12px;flex:none;background:linear-gradient(135deg,var(--gold-soft),color-mix(in srgb,var(--brand) 25%,var(--gold-soft)));display:grid;place-items:center;font-family:var(--display);font-size:26px;color:var(--brand);overflow:hidden}
.svc .ph img{width:100%;height:100%;object-fit:cover}
.svc .tx{flex:1;min-width:0;display:grid;gap:2px}
.svc .tx b{font-size:16px}
.svc .tx span{font-size:13.5px;color:var(--muted);line-height:1.35}
.svc .pr{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.svc .tick{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.svc[aria-pressed="true"] .tick{background:var(--brand);border-color:var(--brand)}
/* catalog */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.shop-card{display:grid;grid-template-rows:auto 1fr;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s}
.shop-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(60,10,20,.45)}
.shop-card .band{height:84px;position:relative;display:flex;align-items:flex-end;padding:0 14px}
.shop-card .band .lg{width:56px;height:56px;border-radius:14px;background:var(--surface);border:3px solid var(--surface);margin-bottom:-26px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:24px;overflow:hidden;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.shop-card .band .lg img{width:100%;height:100%;object-fit:cover}
.shop-card .body{padding:32px 14px 14px;display:grid;gap:4px;align-content:start}
.shop-card .body b{font-size:17px}
.shop-card .body .t{font-size:14px;color:var(--muted);line-height:1.4}
.shop-card .body .meta{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:13.5px;font-weight:700}
.shop-card .body .meta span:last-child{color:var(--red)}
.searchbar{display:flex;gap:8px;margin-bottom:12px}
.chiprow{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;scrollbar-width:thin}
.chiprow .chip{white-space:nowrap;font-size:14px;padding:8px 14px}
/* ---- v2 polish ---- */
.logo{display:inline-flex;align-items:center;gap:8px}
.logo svg,.logo img{width:28px;height:28px;flex:none}
/* logged-in navigation: top on computers, bottom tab bar on phones */
.bottomnav{display:none}
@media (max-width:720px){
  .topnav a{display:none}
  .bottomnav{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:20;
    background:var(--surface);border-top:1px solid var(--line);
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-shadow:0 -6px 18px -12px rgba(60,10,20,.25)}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 2px 10px;text-decoration:none;color:var(--muted);font-size:11.5px;font-weight:800;text-align:center;line-height:1.2}
  .bottomnav a svg{width:24px;height:24px}
  .bottomnav a.on{color:var(--red)}
  body.has-bottomnav .wrap{padding-bottom:96px}
  body.has-bottomnav .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}
/* compact "your page" card */
.share{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.share .qr{width:96px;height:96px;margin:0;padding:6px;border:1px solid var(--line)}
.share .lnk{font-weight:800;font-size:15px;word-break:break-all;color:var(--ink);text-decoration:none}
.iconrow{display:flex;gap:8px;flex-wrap:wrap}
.iconbtn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;padding:7px 11px;font:700 13.5px var(--body);cursor:pointer;text-decoration:none;min-height:38px}
.iconbtn svg{width:16px;height:16px}
.iconbtn:hover{border-color:var(--brand);color:var(--brand)}
/* tabs: scroll sideways with a soft edge so people see there is more */
.tabs{position:sticky;top:0;z-index:5;background:var(--bg);scrollbar-width:none}
@media (max-width:720px){.tabs{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}}
.tabs::-webkit-scrollbar{display:none}
.tabs button{display:inline-flex;align-items:center;gap:6px}
.tabs .cnt{background:var(--red);color:#fff;border-radius:999px;font-size:11.5px;padding:1px 7px;font-weight:800}
/* tables become cards on phones */
@media (max-width:640px){
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:100%}
  table.rt thead,table.rt tr:has(> th){display:none}
  table.rt tr{border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:10px;background:var(--surface)}
  table.rt td{border:0;padding:4px 0;white-space:normal;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right}
  table.rt td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:12.5px;font-weight:700;text-align:left;flex:none}
  table.rt td:first-child{font-size:16px;font-weight:700;text-align:left}
  table.rt td.row{justify-content:flex-end}
  .tbl{overflow:visible}
}
/* landing price cards: denser */
.price .panel{gap:4px}
.price .panel .big{font-size:30px;line-height:1.1;margin:4px 0}
.plan-pct{display:inline-block;background:var(--gold-soft);border-radius:999px;padding:3px 10px;font-weight:800;font-size:13px;width:max-content}
/* gift reveal */
.reveal{animation:rise .5s ease}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{animation:none}}
/* landing */
.hero{background:var(--night);color:#F8EBD6;border-radius:24px;padding:32px 22px;display:grid;gap:14px;margin:8px 0 20px}
.hero h1{color:#F8EBD6;font-size:clamp(30px,7vw,44px)}
.hero h1 em{color:#E0B85C}
.hero p{color:#CDB9A6;margin:0;font-size:17px}
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){.price{grid-template-columns:1fr}}
.price .panel{margin:0}
.price b.big{font-family:var(--display);font-size:28px;color:var(--red)}

/* Beleg logo (H ribbon wordmark) + motion */
.logo{color:var(--ink)}
.logo svg.logo-h{width:auto;height:54px;margin:-6px 0 -4px}
.logo small{margin-left:0}
.logo-h path{stroke-dasharray:1;stroke-dashoffset:0}
.intro .logo-h path{stroke-dashoffset:1;animation:bdraw .6s cubic-bezier(.65,0,.35,1) forwards}
.intro .logo-h path:nth-child(1){animation-duration:1.1s}
.intro .logo-h path:nth-child(2){animation-delay:1s}.intro .logo-h path:nth-child(3){animation-delay:1.2s}
.intro .logo-h path:nth-child(4){animation-delay:1.55s}.intro .logo-h path:nth-child(5){animation-delay:1.65s}
.intro .logo-h text{clip-path:inset(0 100% 0 0);animation:bwipe 1.1s cubic-bezier(.65,0,.35,1) .1s forwards}
.intro .logo-h .k,.tie .k{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:bpop .35s cubic-bezier(.34,1.56,.64,1) 1.45s forwards}
@keyframes bdraw{to{stroke-dashoffset:0}}
@keyframes bwipe{to{clip-path:inset(0 0 0 0)}}
@keyframes bpop{to{transform:scale(1)}}
/* gift box: F bow ties itself before the box can be opened */
.tie path{stroke-dasharray:1;stroke-dashoffset:1;animation:bdraw .6s cubic-bezier(.65,0,.35,1) forwards}
.tie .k{animation-delay:.2s}
.tie path:nth-child(1){animation-delay:.3s}.tie path:nth-child(2){animation-delay:.4s}
.tie path:nth-child(3){animation-delay:.9s}.tie path:nth-child(4){animation-delay:1s}
/* loader: ribbon keeps drawing */
.loading{display:flex;flex-direction:column;align-items:center;gap:6px}
.loading svg{width:120px;height:36px}
.loading path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:bloop 2.2s cubic-bezier(.65,0,.35,1) infinite}
@keyframes bloop{0%{stroke-dashoffset:1}45%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
@media (max-width:560px){.logo svg.logo-h{height:46px}}
@media (prefers-reduced-motion:reduce){
  .logo-h path,.tie path,.loading path{animation:none!important;stroke-dashoffset:0!important}
  .logo-h text{animation:none!important;clip-path:none!important}
  .logo-h .k,.tie .k{animation:none!important;transform:none!important}
}

/* ================= v3 · Noir × Cashmere ================= */
h1{font-weight:500;font-size:38px;line-height:1.08;letter-spacing:-.2px}
h2{font-weight:500;font-size:27px;line-height:1.15}
.stat b,.price b.big,.card .amt{font-weight:600}
.price b.big{color:var(--ink);font-size:32px}
.btn{border-radius:999px;font-weight:700;letter-spacing:.2px}
.btn.gold{background:var(--rg);color:#1A1210}
.btn.ghost{border-width:1.5px}
.panel{border-radius:22px}
.n{background:transparent;color:var(--gold);border:1px solid var(--gold);font-family:var(--display);font-size:16px;font-weight:600;width:28px;height:28px}
.nav a.on{background:transparent;color:var(--ink);border-radius:0;box-shadow:inset 0 -1.5px 0 var(--gold)}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold)}
.tabs .cnt{background:var(--gold)}
@media (max-width:720px){.bottomnav a.on{color:var(--ink)}.bottomnav a.on svg{color:var(--gold)}}
.shop-card .body .meta span:last-child{color:var(--gold)}
.plan-pct{background:var(--gold-soft);color:var(--ink)}
.kicker{font-family:var(--caps);text-transform:uppercase;letter-spacing:4px;font-size:11px;color:var(--gold)}
a{color:var(--gold)}

/* hero = Noir: black, one hairline rose-gold ring, foil type */
.hero{background:#0B0B0B;color:#E9DCD2;border-radius:28px;padding:34px 22px 32px;position:relative;overflow:hidden;text-align:center;justify-items:center;gap:12px}
.hero:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,.016) 7px 8px);pointer-events:none}
.hero > *{position:relative}
.hero h1{color:#F1E6DC;font-weight:500;font-size:clamp(34px,8vw,52px);max-width:16ch;margin:0}
.hero h1 em{background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#B9A79B;max-width:38ch}
.hero .kicker{color:#C99A80}
.hero .btn{width:auto;padding:14px 30px}
.hero .btn.line{background:transparent;color:#F1E6DC;border:1px solid #C99A80;font-family:var(--caps);font-weight:400;letter-spacing:3px;text-transform:uppercase;font-size:13px}
.ring{position:relative;width:min(240px,62vw);aspect-ratio:1;margin:4px auto 6px}
.ring svg{position:absolute;inset:0;width:100%;height:100%}
.ring .w{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.ring .w b{font-family:"Bodoni Moda",var(--display);font-style:italic;font-weight:500;font-size:clamp(44px,13vw,60px);line-height:1;background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.ring .w span{display:block;margin-top:8px;font-family:var(--caps);letter-spacing:5px;font-size:9px;color:#C99A80;text-transform:uppercase}
.ring path{stroke-dasharray:1;stroke-dashoffset:1;animation:bdraw 1.6s cubic-bezier(.65,0,.35,1) .2s forwards}
.ring .bowp path{animation-duration:.6s;animation-delay:1.6s}
.ring .w{opacity:0;animation:rise .9s ease .5s forwards}

/* Cashmere sculpture: wood arch, taupe arch, brushed-gold rod and sphere */
.sculpt{position:relative;height:230px;width:250px;flex:none}
.sculpt .a1{position:absolute;left:6px;top:10px;width:128px;height:220px;border-radius:64px 64px 0 0;background:var(--wood);box-shadow:inset -8px 0 18px rgba(0,0,0,.25)}
.sculpt .a2{position:absolute;right:4px;top:90px;width:120px;height:140px;border-radius:60px 60px 0 0;background:linear-gradient(160deg,#D6C6B3,#B9A58F)}
.sculpt .rod{position:absolute;left:30px;top:0;width:3px;height:230px;border-radius:2px;background:linear-gradient(90deg,#9A7A3E,#E9CF8E,#A8853F)}
.sculpt .disc{position:absolute;left:46px;top:54px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4A382F,#2E221C 70%);border:2px solid #CDAA62;box-shadow:0 18px 28px -14px rgba(40,20,10,.6);display:grid;place-items:center;text-align:center;color:#F1E6D6}
.sculpt .disc small{display:block;font-family:var(--caps);font-size:8px;letter-spacing:3px;color:#CDAA62}
.sculpt .disc b{display:block;font-family:var(--display);font-size:30px;font-weight:600;line-height:1;margin:4px 0}
.sculpt .disc em{font-family:var(--display);font-size:14px}
.sculpt .mini{position:absolute;right:26px;top:42px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#B9A08A,#8E7663);border:1.5px solid #CDAA62}
.sculpt .ball{position:absolute;left:8px;bottom:22px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#FBEBC0,#D6AE5E 45%,#8F6A2A 90%);box-shadow:0 8px 14px -6px rgba(60,40,10,.6)}
.cashmere{display:flex;gap:22px;align-items:center;background:linear-gradient(180deg,#F6EEE7,#EFE4DA);border-radius:28px;padding:26px 22px;margin-bottom:16px;color:#2E2420}
.cashmere h2{font-size:32px;margin:6px 0}
.cashmere h2 i{color:#8E7663}
.cashmere p{color:#7A6A60;margin:0 0 16px}
.cashmere .btn{width:auto;padding:14px 26px;background:#3B2F2A;color:#FBF7F4}
@media (max-width:640px){.cashmere{flex-direction:column;text-align:center}.cashmere .sculpt{margin:0 auto}}

/* category arches in the catalog */
.shop-card{border-radius:22px}
.shop-card .band{height:96px;background:var(--wood)!important}
.shop-card:nth-child(3n+2) .band{background:linear-gradient(160deg,#D6C6B3,#B9A58F)!important}
.shop-card:nth-child(3n+3) .band{background:linear-gradient(160deg,#C9A39C,#A88079)!important}
.shop-card .band .lg{border-radius:50%;border:2px solid #CDAA62;color:var(--biz,#3B2F2A)!important}
.biz .lg{background:var(--biz,#3B2F2A)}

/* gift box: black lacquer box, wood lid, rose-gold satin */
.box .base{background:linear-gradient(160deg,#1E1B19,#0E0D0C);border:1px solid #4A372E;box-shadow:0 22px 34px -16px rgba(0,0,0,.7)}
.box .lid{background:var(--wood);border:1px solid #4A372E}
.box .rib{background:linear-gradient(90deg,#A86F55,#F1CDB5 50%,#A86F55)}
.box .rib-h{background:linear-gradient(180deg,#F1CDB5,#B98266)}
.box .tap{font-family:var(--caps);font-weight:400;letter-spacing:3px;text-transform:uppercase;font-size:12px;color:var(--gold)}

/* the gift card itself: always Noir */
.card{background:linear-gradient(135deg,#191919,#0F0F0F);border:1px solid #6E4E40;border-radius:20px;color:#EDE2D8;box-shadow:0 30px 50px -28px rgba(0,0,0,.8);
  --ink:#EDE2D8;--muted:#A8968B;--line:#2E2722;--surface:#151312;--red:#D9AE94;--red-ink:#0B0B0B;--brand:#D9AE94}
.card .topc{background:transparent;padding-top:28px}
.card .foil{font-family:var(--caps);font-weight:400;letter-spacing:4px;color:#C99A80}
.card .to{color:#F1E6DC;font-size:30px}
.card .amt{background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:42px}
.card .tear{border-top:1px dashed #4A372E}
.card .tear::before,.card .tear::after{background:var(--page,#0B0B0B);border-color:#6E4E40}
body.noir .stage h1, body.noir h1{color:#F1E6DC}
@media (prefers-reduced-motion:reduce){.ring path,.ring .w{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}}

/* ================= Beleg Corporate ================= */
.linkbtn{background:none;border:0;color:var(--gold);font:700 14px var(--body);padding:12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ev-head{text-align:center;display:grid;gap:4px;margin-top:6px}
.ev-head h1{font-size:clamp(34px,9vw,48px)}
.scratch{position:relative;border-radius:20px;overflow:hidden;border:1px solid #6E4E40;background:linear-gradient(135deg,#191919,#0F0F0F);min-height:240px;display:grid;place-items:center;text-align:center;padding:24px;user-select:none;margin-bottom:6px}
.scratch .prize{display:grid;gap:6px}
.scratch .prize small{font-family:var(--caps);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:#C99A80}
.scratch .prize b{font-family:var(--display);font-size:30px;font-weight:600;text-wrap:balance;color:#F1E6DC}
.scratch .amt{font-family:var(--display);font-size:34px;font-weight:600;background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.scratch canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .6s}
.ev-live{grid-template-columns:1fr}

/* big screen: 16:9 TV/projector, still usable on a laptop or phone */
body.screen{overflow-x:hidden}
.scr{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr auto;gap:3vw;padding:4vw 5vw 3vw;position:relative}
.scr:before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(115deg,transparent 0 9px,rgba(255,255,255,.014) 9px 10px),radial-gradient(60% 50% at 80% 30%,rgba(185,130,102,.12),transparent 70%);pointer-events:none}
.scr > *{position:relative}
.scr-left{display:flex;flex-direction:column;justify-content:center;gap:1.4vw}
.scr-left .kicker{font-size:clamp(11px,1.1vw,18px)}
.scr-left h1{font-size:clamp(40px,6.4vw,120px);line-height:1;margin:0;color:#F1E6DC;font-weight:500;text-wrap:balance}
.scr-greet{font-family:var(--display);font-style:italic;font-size:clamp(17px,1.8vw,32px);color:#C9B5A8;margin:0;max-width:30ch;line-height:1.3}
.scr-prog p{margin:10px 0 0;color:#A8968B;font-size:clamp(14px,1.3vw,22px)}
.scr-prog b{color:#F1E6DC;font-family:var(--display);font-size:1.5em;font-weight:600}
.scr-bar{height:4px;background:#2A2522;border-radius:4px;overflow:hidden;max-width:560px}
.scr-bar i{display:block;height:100%;width:0;background:var(--rg);transition:width 1s ease}
.scr-grand{display:grid;gap:4px;border-top:1px solid #2E2722;padding-top:1.2vw;max-width:560px}
.scr-grand b{font-family:var(--display);font-size:clamp(20px,2.2vw,40px);font-weight:500;background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent}
.scr-qr{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4vw;text-align:center}
.scr-frame{padding:clamp(10px,1.2vw,22px);border-radius:28px;background:linear-gradient(135deg,#F1CDB5,#A86F55 55%,#E7BFA6);box-shadow:0 30px 80px -30px rgba(201,154,128,.45)}
.scr-frame #qr{background:#fff;border-radius:18px;padding:clamp(8px,1vw,18px);width:clamp(220px,28vw,520px);aspect-ratio:1}
.scr-frame #qr svg{width:100%;height:100%;display:block}
.scr-how{margin:0;font-family:var(--caps);text-transform:uppercase;letter-spacing:3px;font-size:clamp(12px,1.1vw,20px);color:#C99A80;line-height:1.7}
.scr-how i{font-family:var(--display);text-transform:none;letter-spacing:0;font-size:1.8em;color:#F1E6DC}
.scr-url{margin:0;color:#7E6E64;font-size:clamp(12px,1vw,17px);letter-spacing:1px}
.scr-feed{grid-column:1/-1;display:flex;gap:2vw;align-items:center;border-top:1px solid #2A2522;padding-top:1.4vw;overflow:hidden;white-space:nowrap}
.scr-feed #feed{display:flex;gap:2.4vw;overflow:hidden}
.scr-feed .fi{display:flex;gap:10px;align-items:baseline;font-size:clamp(14px,1.25vw,22px);animation:rise .6s ease}
.scr-feed .fi b{color:#F1E6DC;font-weight:700}
.scr-feed .fi span{font-family:var(--display);font-style:italic;color:#C9B5A8;font-size:1.15em;max-width:32ch;overflow:hidden;text-overflow:ellipsis}
.scr-tools{position:fixed;right:16px;bottom:16px;display:flex;gap:8px;opacity:.25;transition:opacity .3s;z-index:5}
.scr-tools:hover,.scr-tools:focus-within{opacity:1}
.scr-tools .iconbtn{background:#151312;color:#EDE2D8;border-color:#2E2722}
.scr-draw{position:fixed;inset:0;z-index:40;background:rgba(5,5,5,.94);display:grid;place-items:center;text-align:center;cursor:pointer;animation:rise .4s ease}
.scr-draw .kicker{font-size:clamp(13px,1.4vw,24px);color:#C99A80}
.scr-draw .big{font-family:var(--display);font-size:clamp(120px,22vw,380px);line-height:1;color:#F1E6DC}
.scr-draw .nm{font-family:var(--display);font-size:clamp(56px,10vw,190px);line-height:1.1;color:#8C7366;margin-top:2vw;min-height:1.2em}
.scr-draw .nm.win{background:var(--rg);-webkit-background-clip:text;background-clip:text;color:transparent;animation:pop2 .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes pop2{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.scr-setup{position:fixed;inset:0;display:grid;place-items:center;color:#EDE2D8;font-size:20px}
@media (max-width:820px){
  .scr{grid-template-columns:1fr;grid-template-rows:auto;padding:24px 16px 80px;gap:24px}
  .scr-left{text-align:center;align-items:center}
  .scr-feed{flex-direction:column;align-items:flex-start;white-space:normal}
  .scr-feed #feed{flex-direction:column;gap:10px}
}
@media (prefers-reduced-motion:reduce){.scr-bar i,.scratch canvas{transition:none}.scr-feed .fi,.scr-draw,.scr-draw .nm.win{animation:none}}