:root{
  --blue:#1a4fa3;--deep:#0f2f6b;--cream:#f3e9cf;--legal:#f6e8a6;--orange:#e97a2b;--ink:#16233f;--mute:#59617a;--line:rgba(22,35,63,.16);
  --title:"Josefin Sans","Inter",system-ui,sans-serif;--text:"Inter",system-ui,sans-serif;--hand:"Caveat",cursive;--mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#5d4a3c;color:var(--ink);font:400 17px/1.6 var(--text);overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
#desk{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.no3d #desk{display:none}.no3d body{background:var(--cream)}
.no3d .gap{min-height:0!important}

/* —— antet: rigla —— */
.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:20px;padding:12px max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px));pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:flex;flex-direction:column;text-decoration:none;background:var(--cream);padding:8px 14px 6px;border-radius:3px;box-shadow:0 3px 10px rgba(50,25,5,.28);transform:rotate(-1deg)}
.brand b{font:600 18px/1.1 var(--title)}
.brand span{font:500 9px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.nav{--c:rgba(22,35,63,.75);margin:0 auto;display:flex;align-items:stretch;background-color:#f6efdb;background-image:repeating-linear-gradient(90deg,var(--c) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,var(--c) 0 1.4px,transparent 1.4px 50px);background-size:100% 6px,100% 11px;background-repeat:no-repeat;border-radius:3px;box-shadow:0 3px 10px rgba(50,25,5,.28);transition:background-color .25s}
.nav a{position:relative;padding:17px 18px 8px;font:500 14px/1 var(--text);text-decoration:none;color:var(--ink);transition:color .2s,background .2s}
.nav a::after{content:attr(data-n);position:absolute;left:5px;bottom:7px;font:500 9px/1 var(--mono);opacity:.55}
.nav a.on{font-weight:700;box-shadow:inset 0 -3px 0 var(--orange)}
.nav:hover{background-color:var(--blue);--c:rgba(255,255,255,.75)}
.nav:hover a{color:#fff}.nav a:hover{color:var(--blue)!important;background:#f6efdb}
.cta{background:var(--orange);color:#fff;border:0;border-radius:3px;padding:12px 18px;font:600 14px/1 var(--text);text-decoration:none;box-shadow:0 3px 10px rgba(50,25,5,.28);white-space:nowrap}
.cta:hover{background:var(--deep)}

/* —— pagini —— */
main{position:relative;z-index:2;display:block}
.gap{min-height:var(--h,100vh)}
.chap{position:relative;min-height:var(--h,150vh);padding:110px max(20px,env(safe-area-inset-right,0px)) 40px max(20px,env(safe-area-inset-left,0px));max-width:1320px;margin:auto}
.paper{position:sticky;top:96px;width:min(480px,100%);padding:26px 28px;background:var(--cream);box-shadow:0 18px 40px rgba(50,25,5,.32),0 2px 5px rgba(50,25,5,.2);border-radius:2px;transform:rotate(var(--r,-.5deg))}
.paper.right{margin-left:auto}
.paper.legal{background:var(--legal);background-image:repeating-linear-gradient(transparent 0 29px,rgba(60,110,190,.22) 29px 30px)}
.paper.blue{background:#122f68;color:#fff;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:24px 24px;outline:1px solid rgba(255,255,255,.6);outline-offset:-9px}
.paper.blue .kick,.paper.blue p{color:#e6eefb}
.kick{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 10px}
h1,h2,h3{font-family:var(--title);font-weight:600;line-height:1.08;margin:0 0 12px;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(28px,3.3vw,44px)}h3{font-size:22px}
p{margin:0 0 12px}
.hand{font:600 26px/1.15 var(--hand)}
em{font-style:italic}
.btn{display:inline-block;padding:13px 18px;background:var(--deep);color:#fff;border-radius:3px;text-decoration:none;font:600 14px/1 var(--text);margin:6px 8px 0 0}
.btn.alt{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn:hover{background:var(--orange);color:#fff}

/* —— hero: pe foaie —— */
.hero{position:relative;min-height:100vh;padding:110px max(24px,env(safe-area-inset-right,0px)) 40px max(24px,env(safe-area-inset-left,0px));display:grid;grid-template-columns:minmax(0,1fr);align-items:center;max-width:1320px;margin:auto}
.hero h1{font-size:clamp(34px,3.9vw,58px);color:var(--ink)}
.hero h1 em{color:var(--blue)}
.hero .lead{max-width:50ch;font-size:18px}
.hero .kick{color:var(--deep)}

.hero .paper{position:relative;top:0;width:min(640px,100%)}
.next{position:relative;align-self:flex-start;display:inline-block;padding:10px 16px;background:var(--legal);color:var(--ink);font:700 25px/1.05 var(--hand);text-decoration:none;box-shadow:0 8px 18px rgba(50,25,5,.3);transform:rotate(-1.2deg)}
.next:hover{background:var(--orange);color:#fff}
button.btn{border:0;cursor:pointer;font-family:var(--text)}
button.btn.alt{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px currentColor}
button.btn.alt:hover{background:var(--orange);color:#fff}
.tip{position:fixed;left:0;top:0;z-index:30;padding:5px 11px;background:var(--legal);color:var(--ink);font:700 21px/1 var(--hand);box-shadow:0 6px 14px rgba(50,25,5,.35);pointer-events:none;opacity:0;transition:opacity .15s;white-space:nowrap}
.tip.on{opacity:1}

/* —— video pe tabletă: hârtiile se dau la o parte —— */
main,.hint,.foot{transition:opacity .3s}
.peTableta main,.peTableta .hint,.peTableta .foot{opacity:0;pointer-events:none}
.peTableta body::after{content:"Esc, clic sau derulează ca să te întorci";position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;padding:8px 14px;background:var(--cream);color:var(--ink);font:500 11px/1.4 var(--mono);letter-spacing:.06em;box-shadow:0 6px 14px rgba(50,25,5,.3);white-space:nowrap}

/* —— biroul întreg: etichete pe obiecte —— */
.pins{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .35s}
.pins.on{opacity:1}
.pin{position:absolute;left:0;top:0;padding:8px 13px;background:var(--legal);color:var(--ink);font:700 21px/1 var(--hand);text-decoration:none;white-space:nowrap;box-shadow:0 6px 14px rgba(50,25,5,.35);border-radius:2px}
.pins.on .pin{pointer-events:auto}
.pin:hover{background:var(--orange);color:#fff}
body:has(main[data-zone=birou]) .foot{display:none}
.deskhint{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:5;margin:0;padding:8px 14px;background:var(--cream);font:500 11px/1.4 var(--mono);letter-spacing:.08em;box-shadow:0 6px 14px rgba(50,25,5,.3);white-space:nowrap}

/* —— locuri rezervate —— */
.slot{position:relative;display:grid;place-items:center;text-align:center;aspect-ratio:var(--ar,16/9);width:100%;background:rgba(15,47,107,.08);border:2px dashed var(--deep);border-radius:4px;color:var(--deep);padding:14px;overflow:hidden}
.slot b{display:block;font:600 22px/1.1 var(--title)}
.slot span{display:block;font:500 11px/1.5 var(--mono);letter-spacing:.08em;margin-top:6px}
.slot.tiny{--ar:3/1;margin-top:14px}.slot.tiny b{font-size:15px}
.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tape{position:absolute;top:-11px;left:50%;width:96px;height:22px;background:rgba(246,232,166,.8);transform:translateX(-50%) rotate(-2deg)}
.polar{position:relative;background:#fbf7ec;padding:12px;box-shadow:0 18px 40px rgba(50,25,5,.3);transform:rotate(1.4deg)}

/* —— pagini interioare —— */
.page{position:relative;padding:110px max(20px,env(safe-area-inset-right,0px)) 90px max(20px,env(safe-area-inset-left,0px));max-width:1320px;margin:auto;display:flex;flex-direction:column;gap:30px}
.page .paper{position:relative;top:0;width:min(600px,100%)}
.page>.first{margin-top:0}
.steps{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;counter-reset:s}
.steps li{padding:12px 0 10px;border-top:1px solid var(--line)}
.steps b{display:block;font:600 21px/1.15 var(--title);color:var(--deep)}
.steps span{font-size:15px;opacity:.92}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tai li{text-decoration:line-through;text-decoration-color:#c8452f}
ul.clean{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.tier{padding:16px 0;border-top:1px solid var(--line)}
.tier .pr{font:600 25px/1.1 var(--title);color:var(--blue)}
.tier .tag{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--mute)}
.form{display:grid;gap:12px}
.form label{display:grid;gap:4px;font:500 12px/1.4 var(--mono);letter-spacing:.06em}
.form input,.form textarea{font:400 16px var(--text);padding:11px;background:#fffdf5;border:1px solid var(--line);border-radius:2px;width:100%}
.note{font:500 11px/1.5 var(--mono);color:var(--mute)}
.foot{position:relative;z-index:2;text-align:center;font:500 11px/1.5 var(--mono);color:#fff;padding:18px 20px 26px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hint{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) rotate(-2deg);z-index:6;font:600 27px/1 var(--hand);color:var(--ink);background:var(--legal);padding:8px 16px;box-shadow:0 8px 18px rgba(50,25,5,.3);transition:opacity .4s;pointer-events:none;white-space:nowrap}
.hint.off{opacity:0}

@media(max-width:860px){
  .top{gap:8px;padding:8px 10px;flex-wrap:wrap}
  .brand{order:1}.cta{order:2;margin-left:auto;padding:10px 12px;font-size:13px}
  .nav{order:3;width:100%;margin:0;justify-content:space-between}
  .nav a{padding:15px 3px 7px;font-size:11.5px;flex:1;text-align:center}.pin{font-size:18px;padding:6px 9px}.nav a::after{display:none}
  .hero{padding-top:128px;align-content:start}
  .hero .lead{font-size:16px}
  .chap{padding:126px 14px 30px}
  .paper{top:118px;padding:18px 20px;width:100%}
  .paper p{font-size:15px}
  .page{padding:128px 14px 70px}
  .cols{grid-template-columns:minmax(0,1fr)}
  /* sus rămâne loc ca să se vadă obiectul de pe birou */
  .page>.paper.first{margin-top:42vh}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}