/* Layout: white brand header + gold navigation bar as on memorycrystal.cz, one centred reading column of product cards, dark grey footer */
:root{
  --bg:#f6f5f1; --surface:#ffffff; --fg:#4a4a4a; --muted:#7a7a7a; --line:#e4e1d8;
  --gold:#d8b62d; --gold-ink:#7a6510; --gold-soft:#f6efd2; --blue:#0094c1; --blue-ink:#0a6f8f;
  --ok:#3d8b5a; --ok-soft:#e5f2e9; --warn:#b5651d; --warn-soft:#fbeedd; --footer:#444444; --footer-fg:#e6e6e6;
  --head-bg:#ffffff; --head-line:#e4e1d8; --head-muted:#777777; /* header stays white in both themes, like memorycrystal.cz (logo is dark grey) */
  --display:"Marcellus","Optima","Palatino Linotype",serif;
  --body:"Raleway","Segoe UI",system-ui,sans-serif;
  --ui:"Roboto","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1c1b19; --surface:#262522; --fg:#dedad0; --muted:#a39f94; --line:#3a3833;
  --gold:#d8b62d; --gold-ink:#e8cd63; --gold-soft:#3a3320; --blue:#33b4dc; --blue-ink:#6cc9e6;
  --ok:#6cc08a; --ok-soft:#203a29; --warn:#e3a062; --warn-soft:#3f2c1a; --footer:#121211; --footer-fg:#cfcbc2; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1c1b19; --surface:#262522; --fg:#dedad0; --muted:#a39f94; --line:#3a3833;
  --gold:#d8b62d; --gold-ink:#e8cd63; --gold-soft:#3a3320; --blue:#33b4dc; --blue-ink:#6cc9e6;
  --ok:#6cc08a; --ok-soft:#203a29; --warn:#e3a062; --warn-soft:#3f2c1a; --footer:#121211; --footer-fg:#cfcbc2; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 1rem/1.55 var(--body);margin:0}
a{color:var(--blue-ink)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.top{background:var(--head-bg);border-bottom:1px solid var(--head-line)}
.top .in,.bar .in,main,.foot .in{max-width:58rem;margin:0 auto;padding-inline:16px}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.brand{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--head-muted)}
.brand img{height:3.3rem;width:auto;display:block}
.brand small{display:block;font:500 .72rem/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--head-muted);border-left:1px solid var(--head-line);padding-left:.9rem}
.contact{font:400 .82rem/1.4 var(--ui);color:var(--head-muted);text-align:right}
.bar{background:var(--gold)}
.bar .in{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;padding-block:.55rem}
.bar .view{font:500 .8rem/1 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.langs{display:flex;gap:.25rem;flex-wrap:wrap}
.langs button{border:0;background:transparent;color:#fff;font:500 .78rem/1 var(--ui);letter-spacing:.06em;padding:.45rem .55rem;border-radius:3px}
.langs button[aria-pressed="true"]{background:#fff;color:#7a6510}
.langs button:hover{background:rgba(255,255,255,.22)}

main{padding-block:2rem 3rem;display:grid;gap:1.6rem}
.eyebrow{font:500 .72rem/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
h1{font:400 clamp(1.6rem,4vw,2.2rem)/1.15 var(--display);margin:.3rem 0 .4rem;color:var(--fg);text-wrap:balance}
h2{font:400 1.35rem/1.2 var(--display);margin:0;text-wrap:balance}
.lead{max-width:62ch;margin:0;color:var(--muted)}
.facts{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin:.9rem 0 0;padding:0;list-style:none;font:400 .88rem/1.4 var(--ui)}
.facts span{color:var(--muted)}
.facts b{font-weight:500;font-variant-numeric:tabular-nums}
.sum{display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1rem 1.2rem}
.sum .big{font:400 1.5rem/1 var(--display);font-variant-numeric:tabular-nums}
.sum .lbl{font:500 .72rem/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.meter{flex:1 1 12rem;min-width:0;height:.5rem;background:var(--line);border-radius:99px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold)}

.group{display:grid;gap:.8rem}
.ghead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.6rem 1rem;border-bottom:1px solid var(--line);padding-bottom:.6rem}
.ghead .years{font:400 .9rem var(--ui);color:var(--muted);margin-left:.4rem}
.btn{border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:99px;padding:.5rem 1rem;font:500 .8rem/1 var(--ui);letter-spacing:.05em;text-transform:uppercase}
.btn.ghost{background:transparent;color:var(--blue-ink)}
.share{background:var(--gold-soft);border-radius:6px;padding:.9rem 1rem;display:grid;gap:.6rem;font-size:.9rem}
.share .row{display:flex;gap:.5rem;flex-wrap:wrap}
.share input{flex:1 1 16rem;min-width:0;font:400 .85rem var(--ui);padding:.5rem .6rem;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--fg)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1.1rem 1.2rem;display:grid;gap:.9rem}
.chead{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:start}
.thumb{width:3.6rem;height:3.6rem;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.08)}
.thumb::after{content:"";position:absolute;left:22%;top:16%;width:30%;height:22%;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(1px)}
.cname{min-width:0}
.cname h3{font:600 1.05rem/1.3 var(--body);margin:0}
.cname .meta{font:400 .8rem/1.5 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums}
.pill{font:500 .72rem/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:.4rem .65rem;border-radius:99px;white-space:nowrap;background:var(--gold-soft);color:var(--gold-ink)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.steps{display:flex;gap:3px}
.steps i{flex:1;height:.4rem;border-radius:2px;background:var(--line)}
.steps i.d{background:var(--gold)}
.steps i.c{background:repeating-linear-gradient(45deg,var(--gold) 0 4px,var(--gold-soft) 4px 8px)}
.ok-all .steps i.d{background:var(--ok)}
.cfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.5rem;align-items:flex-end}
.now{font-size:.92rem;min-width:0}
.now b{font-weight:600}
.now .nx{color:var(--muted)}
.eta{text-align:right}
.eta .lbl{font:500 .7rem/1.3 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.eta .d{font:400 1.25rem/1.2 var(--display);font-variant-numeric:tabular-nums}
.tgt{flex-basis:100%;font:400 .8rem/1.4 var(--ui);color:var(--muted)}
.certline{font:400 .85rem/1.5 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums;margin-top:.2rem}
.certline b,.cname .meta b{font-weight:500;color:var(--fg);letter-spacing:.03em}
.qm{display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;margin-left:.35rem;padding:0;border:1px solid var(--blue);border-radius:50%;background:transparent;color:var(--blue-ink);font:600 .7rem/1 var(--ui);vertical-align:.1em}
.qm:hover,.qm[aria-expanded="true"]{background:var(--blue);color:#fff}
.tipbox{display:block;margin-top:.35rem;padding:.45rem .6rem;border-radius:4px;background:var(--gold-soft);color:var(--fg);font:400 .82rem/1.45 var(--ui);font-weight:400}
.tipbox[hidden]{display:none}
.note{font-size:.88rem;color:var(--warn);background:var(--warn-soft);border-radius:4px;padding:.5rem .7rem;margin:0}
details summary{cursor:pointer;font:500 .78rem/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-ink);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"+ "}
details[open] summary::before{content:"− "}
.tl{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:0}
.tl li{display:grid;grid-template-columns:1.2rem 1fr auto;gap:.7rem;align-items:baseline;padding:.35rem 0;font-size:.9rem;border-top:1px dashed var(--line)}
.tl li:first-child{border-top:0}
.tl .dot{width:.65rem;height:.65rem;border-radius:50%;border:2px solid var(--line);align-self:center}
.tl .d .dot{background:var(--gold);border-color:var(--gold)}
.tl .c .dot{border-color:var(--gold)}
.tl .c{font-weight:600}
.tl .when{font:400 .82rem var(--ui);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl .f{color:var(--muted)}

.hub{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.hub .card{gap:.5rem}
.hub ul{margin:0;padding-left:1.1rem;font-size:.9rem}
.demo{font:400 .82rem/1.5 var(--ui);color:var(--muted);border:1px dashed var(--line);border-radius:6px;padding:.7rem .9rem}
.back{font:500 .78rem var(--ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}

.foot{background:var(--footer);color:var(--footer-fg);font:400 .85rem/1.6 var(--ui)}
.foot .in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:1.6rem}
.foot b{font-weight:500}
@media (max-width:560px){
  .brand img{height:2.6rem}
  .contact{display:none}
  .chead{grid-template-columns:auto 1fr}
  .chead .pill{grid-column:2;justify-self:start}
  .eta{text-align:left}
}
@media (prefers-reduced-motion:no-preference){.card{transition:border-color .2s}.card:hover{border-color:var(--gold)}}
img.thumb{object-fit:cover;background:var(--surface)}
.thumb.glass{background:radial-gradient(circle at 40% 35%,#ffffff,#d9dde0 50%,#8e979c)}
.paw{width:.85em;height:.85em;fill:var(--gold);vertical-align:-.06em;margin-left:.35em;flex:none}
.infolink{margin:0}
.infolink a{display:inline-flex;align-items:center;gap:.6rem;font:500 .95rem/1.4 var(--body);color:var(--blue-ink);text-decoration:none;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:.55rem 1.1rem .55rem .6rem}
.infolink a:hover{border-color:var(--blue)}
.infolink svg{width:1.6rem;height:1.6rem;flex:none}
.infolink svg circle{fill:var(--blue)}
.infolink svg path{fill:#fff}

/* landing: request form and staff login */
.reqbox h2{font-size:1.5rem}
.reqform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1.2rem;margin-top:.4rem}
.reqform .wide{grid-column:1/-1}
.reqform label,.staffbox label{display:block;font:500 .78rem/1.3 var(--ui);letter-spacing:.04em;color:var(--muted);margin-bottom:.3rem}
.reqform input,.reqform textarea,.staffbox input{width:100%;font:400 .95rem/1.4 var(--body);padding:.6rem .7rem;border:1px solid var(--line);border-radius:4px;background:var(--surface);color:var(--fg)}
.reqform input:focus,.reqform textarea:focus,.staffbox input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(0,148,193,.15)}
.reqform .submitrow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.reqform .hint,.staffbox .hint{font:400 .8rem var(--ui);color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.flash{margin:0;padding:.7rem 1rem;border-radius:6px;font:500 .92rem/1.45 var(--ui)}
.flash.ok{background:var(--ok-soft);color:var(--ok)}
.flash.bad{background:var(--warn-soft);color:var(--warn)}
.staffbox{border-top:1px solid var(--line);padding-top:1.2rem}
.staffbox form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.staffbox label{flex-basis:100%}
.staffbox input{max-width:16rem}
@media (max-width:560px){.reqform{grid-template-columns:1fr}}
.staffbox .btn{padding-block:.72rem}