:root{
  --bg:#ffffff;
  --ink:#000000;
  --font: 'Permanent Marker', cursive;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow:hidden}
.stage{height:100vh;display:flex;align-items:center;justify-content:center;position:relative;padding:30px}
.fade-in{opacity:0;animation:fadeIn .6s ease-out forwards}
@keyframes fadeIn{to{opacity:1}}

/* diagonal accent */
.diagonal{position:absolute;left:10%;top:8%;width:1200px;height:1px;background:transparent;pointer-events:none;transform:rotate(-12deg);}
.diagonal::before{content:'';display:block;width:100%;height:2px;border-top:2px dashed var(--ink);transform:translateY(0) rotate(0);opacity:.6}

/* top-right buttons */
.top-right-controls{position:absolute;right:40px;top:30px;display:flex;gap:10px}
.hand-btn{background:transparent;border:2px solid var(--ink);padding:8px 12px;font-family:var(--font);cursor:pointer;border-radius:8px;position:relative;transition:transform .12s ease}
.hand-btn.small{padding:6px 10px;font-size:13px}
.hand-btn.big{padding:12px 18px;font-size:18px}
.hand-btn::after{content:'';position:absolute;inset:0;border:1px solid var(--ink);transform:translate(3px,-3px) rotate(-1deg);opacity:.7;pointer-events:none;border-radius:8px}

/* jitter animation */
.hand-btn:hover{animation:jitter .22s infinite}
@keyframes jitter{0%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translate(0,0)}}

/* layout container centered with controlled width so whole block is centered */
.layout{display:flex;align-items:center;justify-content:center;gap:30px;max-width:1100px;width:100%}

/* left graphic */
.left-graphic{flex:0 0 360px;display:flex;align-items:center;justify-content:center;transform:translateX(-20px)}
.logo{max-width:100%;height:auto;width:320px;display:block;filter:contrast(1.02)}

/* central content */
.central{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:8px 0}
.brand-box{background:transparent;padding:6px 0}
.brand-title{font-size:34px;margin:0}
.brand-sub{font-size:13px;margin:6px 0 0;color:var(--ink)}

/* hand divider */
.divider-hand{width:220px;height:1px;border-top:2px solid var(--ink);transform:rotate(-2deg);margin:10px 0 6px;opacity:.7}

/* scheme */
.scheme-hand{display:flex;align-items:center;gap:10px;font-size:15px}
.scheme-item{border:2px solid var(--ink);padding:6px 10px;border-radius:8px;position:relative}
.scheme-item::after{content:'';position:absolute;inset:0;border:1px solid var(--ink);transform:translate(3px,-3px) rotate(-1deg);opacity:.6;border-radius:8px}
.scheme-arrow{font-size:18px}

/* insights */
.insights-block{margin-top:6px;width:100%}
.insights-title{font-size:18px;margin:4px 0 8px}
.cards{display:flex;gap:12px}
.card{flex:1;border:2px solid var(--ink);padding:12px;border-radius:10px;background:transparent;cursor:default;transition:transform .18s ease, box-shadow .18s ease;min-width:0}
.card:focus, .card:hover{animation:cardJitter .25s;transform:translateY(-6px) scale(1.01);box-shadow:0 10px 30px rgba(0,0,0,0.06)}
@keyframes cardJitter{0%{transform:translateY(0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}100%{transform:translateY(0)}}
.card-title{font-weight:700;margin-bottom:8px}
.card-meta{font-size:13px;color:var(--ink)}

/* cta */
.cta-block{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.cta-text{font-size:14px;margin:0}
.site-footer{margin-top:14px;width:100%}
.hand-line{border:none;border-top:1px solid var(--ink);width:85%;opacity:.6;margin:8px 0}

/* modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.06);pointer-events:none}
.modal[aria-hidden="false"]{display:flex;pointer-events:auto}
.modal-card{background:var(--bg);border:2px solid var(--ink);padding:20px;border-radius:12px;text-align:center;transform:scale(.8);opacity:0;animation:zoomIn .28s ease forwards}
@keyframes zoomIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}

/* responsive: stack and allow scroll if small */
@media (max-width:900px){
  html,body{overflow:auto}
  .stage{padding:18px}
  .layout{flex-direction:column;align-items:center;gap:18px;max-width:720px}
  .left-graphic{flex:0 0 auto;transform:translateX(0);}
  .logo{width:60vw;max-width:360px}
  .central{align-items:center;text-align:center}
  .cards{flex-direction:column;width:100%}
  .hand-line{width:95%}
}