:root{
  --deep:#024d7e; --deep2:#013a61; --navy:#0b2149;
  --azure:#2274da; --turq:#49b1c8; --light:#aadbe6;
  --white:#ffffff; --ink:#0b2149; --ink-soft:#4a5f74;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Heebo',system-ui,sans-serif;background:var(--deep2);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased}
.app{max-width:460px;margin:0 auto;min-height:100vh;background:#eaf2f8;
  box-shadow:0 0 80px rgba(0,0,0,.4);position:relative;overflow:hidden}

/* header */
.head{background:var(--deep);color:var(--white);padding:34px 26px 26px;position:relative;overflow:hidden;text-align:center}
.head.tall{padding-bottom:34px}
.head::before{content:"";position:absolute;top:-12%;left:50%;transform:translateX(-50%);width:210px;height:112%;
  background:linear-gradient(180deg,rgba(170,219,230,.6),rgba(73,177,200,.16) 45%,transparent 78%);
  clip-path:polygon(38% 0,62% 0,86% 100%,14% 100%);filter:blur(3px)}
.lamp{position:relative;width:48px;height:48px;margin:0 auto 4px}
.lamp svg{width:48px;height:48px}
.head .k{font-size:.62rem;letter-spacing:.26em;color:var(--light);font-weight:700;position:relative;margin-top:4px}
.head h1{font-family:'Frank Ruhl Libre',Georgia,serif;font-weight:900;font-size:1.9rem;line-height:1.05;margin:6px 0 4px;position:relative}
.head h1 em{font-style:italic;font-weight:400;color:var(--turq)}
.flow{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:12px;font-size:.8rem;font-weight:600;position:relative;flex-wrap:wrap}
.flow b{color:var(--white)} .flow i{color:var(--turq);font-style:normal;font-weight:700}
.flow b:first-of-type{color:var(--light)}
.back{position:absolute;top:20px;right:20px;color:var(--light);text-decoration:none;font-size:.8rem;font-weight:600;z-index:2}

/* content */
.content{padding:22px 18px 30px}
.who{text-align:center;color:var(--azure);font-weight:700;font-size:.82rem;letter-spacing:.04em;margin-bottom:4px}
.lead{text-align:center;color:var(--ink-soft);font-size:.95rem;max-width:34ch;margin:0 auto 20px}

/* role doors */
.doors{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.door{background:var(--white);border:1px solid #d7e5f0;border-radius:18px;padding:22px 20px;text-decoration:none;color:inherit;
  display:flex;align-items:center;gap:16px;transition:transform .15s,box-shadow .15s,border-color .15s}
.door:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(2,77,126,.16);border-color:var(--azure)}
.door .big{width:58px;height:58px;border-radius:16px;background:var(--deep);color:var(--white);display:grid;place-items:center;flex-shrink:0}
.door .big svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.7}
.door .t b{display:block;font-family:'Frank Ruhl Libre',serif;font-size:1.4rem;color:var(--navy)}
.door .t span{font-size:.85rem;color:var(--ink-soft)}
.door .arw{margin-right:auto;color:var(--azure);font-size:1.5rem;font-weight:700}

/* tiles */
.tiles{display:flex;flex-direction:column;gap:12px}
.tile{background:var(--white);border:1px solid #d7e5f0;border-radius:16px;padding:16px 17px;display:flex;align-items:center;gap:14px;
  text-decoration:none;color:inherit;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.tile:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(2,77,126,.14);border-color:var(--azure)}
.tile .ic{width:46px;height:46px;border-radius:12px;background:var(--deep);color:var(--white);display:grid;place-items:center;flex-shrink:0}
.tile .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.tile .txt{flex:1}
.tile .txt b{display:block;font-size:1.03rem;font-weight:700;color:var(--navy)}
.tile .txt span{font-size:.79rem;color:var(--ink-soft)}
.tile .arw{color:var(--azure);font-size:1.3rem;font-weight:700}
.tile.soon{opacity:.6} .tile.soon .ic{background:#b9c9d6;color:#fff}
.tile.soon .badge{font-size:.62rem;background:var(--azure);color:#fff;padding:2px 9px;border-radius:99px;font-weight:700}

/* journey map */
.mapcard{background:var(--deep);border-radius:18px;padding:22px 18px;margin-top:20px;color:var(--white);position:relative;overflow:hidden}
.mapcard::before{content:"";position:absolute;top:0;right:-20%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(170,219,230,.14),transparent)}
.mapcard h3{font-family:'Frank Ruhl Libre',serif;font-size:1.16rem;margin-bottom:18px;text-align:center;position:relative}
.map{display:flex;justify-content:space-between;position:relative}
.map::before{content:"";position:absolute;top:15px;right:9%;left:9%;height:2px;background:rgba(170,219,230,.35)}
.stop{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;width:24%}
.stop .dot{width:32px;height:32px;border-radius:50%;background:var(--white);color:var(--deep);display:grid;place-items:center;z-index:1;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.stop .dot svg{width:17px;height:17px;stroke:var(--deep);fill:none;stroke-width:1.9}
.stop:last-child .dot{box-shadow:0 0 0 3px rgba(73,177,200,.65)}
.stop small{font-size:.72rem;color:rgba(255,255,255,.9);font-weight:600}

.disc{margin-top:20px;background:#dcebf5;border:1px solid #b9d4e8;border-radius:14px;padding:13px 15px;font-size:.78rem;color:var(--ink-soft);text-align:center}
.disc b{color:var(--deep)}

.foot{text-align:center;padding:22px 20px 26px;background:var(--deep2);color:rgba(255,255,255,.72)}
.foot img{width:150px;height:auto;opacity:.95;margin-bottom:8px}
.foot .u{font-size:.72rem}

/* highlighted QR entry card (facilitator hub) */
.tile.hl{background:var(--deep);border-color:var(--deep)}
.tile.hl .txt b{color:var(--white)} .tile.hl .txt span{color:var(--light)}
.tile.hl .ic{background:var(--white);color:var(--deep)} .tile.hl .arw{color:var(--turq)}

/* QR aid page */
.qrwrap{background:var(--white);border:1px solid #d7e5f0;border-radius:20px;padding:26px;text-align:center;margin-top:6px}
.qrwrap img{width:min(240px,70%);height:auto;border:1px solid #e3edf5;border-radius:12px;padding:8px;background:#fff}
.qrwrap h3{font-family:'Frank Ruhl Libre',serif;color:var(--navy);font-size:1.3rem;margin-bottom:6px}
.qrwrap p{color:var(--ink-soft);font-size:.9rem;max-width:30ch;margin:0 auto 16px}
.qrwrap .link{display:block;margin-top:14px;font-size:.78rem;color:var(--azure);word-break:break-all}

/* ===== DESKTOP VIEW (נוח לעבודה במחשב) ===== */
@media (min-width:900px){
  body{padding:0}
  .app{max-width:960px;min-height:100vh;background:#eaf2f8}
  .head{padding:52px 40px 40px}
  .lamp{width:60px;height:60px} .lamp svg{width:60px;height:60px}
  .head h1{font-size:2.7rem} .head .k{font-size:.72rem} .flow{font-size:1rem;margin-top:16px}
  .content{padding:34px 40px 44px;max-width:900px;margin:0 auto}
  .lead{font-size:1.08rem;max-width:52ch;margin-bottom:26px}
  .doors{flex-direction:row}
  .door{flex:1}
  .tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .tile{padding:20px 22px}
  .mapcard{padding:30px 26px}
  .mapcard h3{font-size:1.35rem}
  .stop .dot{width:40px;height:40px} .stop .dot svg{width:21px;height:21px}
  .stop small{font-size:.85rem}
  .map::before{top:19px}
  .foot img{width:180px}
  .qrwrap img{width:280px}
}