/* Foaia de stil a prezentării (app/prezentare/index.html), scoasă din
   pagină într-un fișier: politica de conținut (app/_headers) ajunge la
   „style-src 'self'” numai fără blocuri <style> în pagini. */
/* Pagina de prezentare: cine intră pe domeniu fără un link primit de la un
   local trebuie să înțeleagă în două minute ce e, cât costă și cum începe.
   Culorile sunt ale aplicației de la ușă, ca să fie aceeași casă. */
:root{
  /* Culorile, cu temele și color-scheme, sunt în paleta site-ului
     (app/paleta.css): „Încearcă demo-ul” se scrie cu --on-gold, emblema și
     linia mărcii cu --gold, cuvântul ei cu --ink. Aici, rotunjimea. */
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:"Karla",system-ui,sans-serif;font-size:16px;line-height:1.55;
  padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
a{color:var(--gold)}
.pagina{max-width:920px;margin:0 auto;padding:0 20px 60px}
header.sus{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:22px 0 6px}
/* Vorba stă sub marcă, pe un rând, de la marginea ei din stânga. */
.marca-si-vorba small{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}
.btn.mic{padding:7px 13px;font-size:12.5px;flex:0 0 auto}
/* marca: desenul vine din cadru.js, ca în consolă, scris aici ca pagina să
   meargă și fără script. Regulile de mai jos sunt cele din consola/stil.css,
   rând cu rând; numai auriul are aici alt nume (--gold, nu --accent). */
.marca{display:block;width:158px;text-decoration:none;line-height:0}
.marca.mare{width:210px}
.marca-semn{width:100%;height:auto;display:block;color:var(--gold)}
.marca-semn .cuvant{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:27px;fill:currentColor;stroke:currentColor;stroke-width:.5}
.marca-semn .inel,.marca-semn .masa,.marca-semn .spatar{fill:none;stroke:currentColor}
.marca-semn .inel{stroke-width:1.6}
.marca-semn .masa{stroke-width:3}
.marca-semn .spatar{stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.marca-semn .sezut,.marca-semn .plin{fill:currentColor}
/* Marca lată (Marca.lata din cadru.js), a prezentării: emblema în stânga, iar
   lângă ea cuvântul în Karla groasă, în culoarea scrisului, cu linia aurie
   sub el. Consola a rămas cu emblema deasupra cuvântului; aici, lângă
   titlurile și butoanele paginii, proprietarul a ales-o pe asta
   (02.10.2026). Regulile de mai sus rămân cele ale consolei; astea sunt
   numai ale paginii și trec peste ele. Emblema e micșorată cam la jumătate,
   deci liniile ei sunt puțin mai groase decât în marca consolei; rămâne
   aurie, prin currentColor de pe .marca-semn. */
.marca.lata{width:300px;max-width:100%}
.marca.lata .cuvant{font-family:"Karla",system-ui,sans-serif;font-weight:800;font-size:54px;fill:var(--ink);stroke:none}
.marca.lata .linie{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round}
.marca.lata .inel{stroke-width:1.9}
.marca.lata .masa{stroke-width:3.4}
.marca.lata .spatar{stroke-width:3}
.erou{padding:22px 0 26px}
/* Intrarea în consolă stă unde o caută oricine, sus în dreapta: „Intră”
   pentru cine are cont, „Fă-ți cont” pentru cine vine prima oară. Până
   acum colțul era al butonului de temă, iar drumul spre cont era un link
   mic în josul paginii. */
.intrare{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-end;flex:1 1 150px}
/* Pe telefon marca e mai mică și stă singură pe rândul ei, sus în stânga;
   butoanele trec sub ea, de la aceeași margine. */
@media (max-width:600px){
  .marca.lata{width:230px}
  .marca-si-vorba{flex:1 0 100%}
  .intrare{justify-content:flex-start}
}
/* Eroul arată produsul, nu numai spune de el: ușa pe telefon, lângă text.
   Pe laptop, jumătatea dreaptă stătea goală, iar prima poză venea după o
   mie cinci sute de pixeli. */
.erou{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px 44px;align-items:center}
.erou-poza{margin:0}
.erou-poza img{display:block;width:100%;height:auto;border:1.5px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:0 18px 44px var(--umbra-poza)}
.erou-poza img.luminos{display:none}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .erou-poza img.luminos{display:block} :root:not([data-theme="dark"]) .erou-poza img.intunecat{display:none} }
:root[data-theme="light"] .erou-poza img.luminos{display:block}
:root[data-theme="light"] .erou-poza img.intunecat{display:none}
:root[data-theme="dark"] .erou-poza img.luminos{display:none}
:root[data-theme="dark"] .erou-poza img.intunecat{display:block}
.erou .nota{font-size:14px;color:var(--ink-2);margin:14px 0 0;max-width:52ch}
@media (max-width:760px){
  .erou{grid-template-columns:1fr}
  .erou-poza{max-width:210px;margin:6px auto 0}
}
/* Lățimea titlului în em, nu în ch: ch e lățimea cifrei 0 din font, iar Bodoni Moda
   o are mai îngustă decât Prata. Cu 22ch, titlul se strângea de la 674 la 600 px pe
   laptop și trecea pe trei rânduri, cu „strigat.” singur pe ultimul. 15.3em e exact
   lățimea de dinainte, oricare ar fi fontul. */
h1{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:clamp(28px,5vw,44px);line-height:1.15;margin:0 0 14px;max-width:15.3em}
.erou p{font-size:18px;color:var(--ink-2);max-width:52ch;margin:0 0 22px}
.butoane{display:flex;flex-wrap:wrap;gap:10px}
/* „font:inherit”: un <button> nu ia singur scrisul paginii. „Tema” e buton,
   „Intră” și „Fă-ți cont” sunt legături: fără el, butonul ieșea în fontul
   sistemului și mai scund decât ele (30 px lângă 35). Grosimea se scrie
   după, fiindcă „font” o duce înapoi la cea a paginii; mărimea celor mici
   rămâne a lui .btn.mic, de mai sus. */
.btn{display:inline-block;padding:12px 18px;border-radius:99px;border:1.5px solid var(--gold);color:var(--gold);font:inherit;font-weight:700;text-decoration:none;background:var(--surface);cursor:pointer}
.btn.plin{background:var(--gold);color:var(--on-gold)}
h2{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:26px;margin:44px 0 14px}
.pasi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pas{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px}
.pas b{display:block;font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:19px;margin-bottom:6px}
.pas span{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.pas p{margin:6px 0 0;color:var(--ink-2)}
.poze{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.poze figure{margin:0}
.poze img{display:block;width:100%;height:auto;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface)}
/* poza temei de pe ecran: pe întuneric cea întunecată, pe luminos cea luminoasă */
.poze img.luminos{display:none}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .poze img.luminos{display:block} :root:not([data-theme="dark"]) .poze img.intunecat{display:none} }
:root[data-theme="light"] .poze img.luminos{display:block}
:root[data-theme="light"] .poze img.intunecat{display:none}
:root[data-theme="dark"] .poze img.luminos{display:none}
:root[data-theme="dark"] .poze img.intunecat{display:block}
.poze figcaption{margin-top:8px;font-size:13px;color:var(--ink-2);text-align:center}
.poze .lat{grid-column:1 / -1}
@media (max-width:600px){ .poze{grid-template-columns:1fr} }
ul.ce{columns:2;column-gap:28px;padding-left:20px;margin:0}
ul.ce li{break-inside:avoid;margin:0 0 8px;color:var(--ink-2)}
ul.ce li b{color:var(--ink);font-weight:600}
.preturi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.pret{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px;text-align:center}
.pret b{display:block;font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:30px;color:var(--gold)}
.pret span{display:block;color:var(--ink-2);margin-top:4px}
.pret small{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.nota{font-size:13.5px;color:var(--ink-3);margin-top:10px}
.demo{background:var(--ok-soft);border:1.5px solid var(--ok);border-radius:var(--r);padding:18px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.demo .qr{width:140px;height:140px;border-radius:10px;background:var(--qr-fond);padding:6px}
.demo .qr svg{width:100%;height:100%;display:block}
.demo p{margin:0 0 10px;color:var(--ink-2)}
.contact{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:18px}
.contact b{font-family:"Bodoni Moda",Georgia,serif;font-weight:400;font-size:20px}
footer{margin-top:44px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px 18px}
@media (max-width:600px){ .demo{grid-template-columns:1fr} ul.ce{columns:1} }