@font-face{font-family:'Vazirmatn';font-weight:400;font-display:swap;src:url(fonts/vazirmatn-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:'Vazirmatn';font-weight:600;font-display:swap;src:url(fonts/vazirmatn-arabic-600-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:'Vazirmatn';font-weight:700;font-display:swap;src:url(fonts/vazirmatn-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:'Vazirmatn';font-weight:400;font-display:swap;src:url(fonts/vazirmatn-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Vazirmatn';font-weight:700;font-display:swap;src:url(fonts/vazirmatn-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Arvo';font-weight:700;font-display:swap;src:url(fonts/arvo-latin-700-normal.woff2) format('woff2')}
:root{
  --yellow:#f1c40f;
  --yellow-soft:#fbf1c4;
  --yellow-edge:#c9a30b;
  --slate:#34495e;
  --slate-deep:#26364a;
  --cream:#fffcf2;
  --muted:#5f6f80;
  --line:#e8e2cd;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Vazirmatn',system-ui,sans-serif;
  background:radial-gradient(700px 360px at 85% -8%, var(--yellow-soft), transparent 62%), var(--cream);
  background-attachment:fixed;
  color:var(--slate-deep);
  min-height:100vh;
  line-height:1.9;
  display:flex;justify-content:center;
}
.wrap{width:100%;max-width:460px;padding:56px 26px 48px}

/* ---------- photo: arch frame, tilted yellow shape, ring, dots ---------- */
.photo-stage{position:relative;width:100%;max-width:290px;margin:0 auto;padding:0 0 10px}
.blob{position:absolute;z-index:1;left:-20px;top:40px;right:26px;bottom:10px;
  background:var(--yellow);border-radius:999px 999px 28px 28px;transform:rotate(-5deg)}
.ring{position:absolute;z-index:3;right:-14px;top:22px;width:68px;height:68px;border-radius:50%;
  border:3px solid var(--slate);pointer-events:none}
.ring::after{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--yellow);border:3px solid var(--slate)}
.dots{position:absolute;z-index:1;left:-24px;bottom:50px;width:72px;height:72px;
  background-image:radial-gradient(var(--slate) 2px, transparent 2.3px);background-size:14px 14px;opacity:.35}
.arch{position:relative;z-index:2;margin:0;aspect-ratio:4/5;
  border-radius:999px 999px 28px 28px;overflow:hidden;border:6px solid #fff;
  background:var(--slate);box-shadow:0 30px 60px -24px rgba(38,54,74,.55)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:42% 22%;display:block}

/* floating chip */
.chip{position:absolute;z-index:4;background:#fff;border-radius:16px;
  box-shadow:0 18px 36px -14px rgba(38,54,74,.5);color:var(--slate)}
.chip-hey{left:-18px;bottom:18px;padding:10px 20px;
  font-family:'Arvo',Georgia,serif;font-weight:700;font-size:1.15rem;line-height:1.3;
  border-left:5px solid var(--yellow)}
.chip-hey b{background:linear-gradient(transparent 60%, var(--yellow) 60%);font-weight:700}

/* ---------- link buttons ---------- */
.links{display:flex;flex-direction:column;gap:16px;margin-top:40px}
.btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-decoration:none;background:var(--yellow);color:var(--slate-deep);
  border-radius:10px;padding:16px 22px;min-height:54px;
  font-weight:700;font-size:1rem;line-height:1.6;
  box-shadow:0 4px 0 var(--yellow-edge);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn .arrow{font-size:1.15rem;flex-shrink:0}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--yellow-edge)}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--yellow-edge)}
.btn:focus-visible{outline:3px solid var(--slate);outline-offset:3px}

/* ---------- inner pages ---------- */
.back-link{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  color:var(--slate);font-weight:600;font-size:.95rem;margin-bottom:22px;
  padding:4px 14px;background:var(--yellow-soft);border-radius:999px;
}
.back-link:hover{background:var(--yellow)}
.back-link:focus-visible{outline:3px solid var(--slate);outline-offset:3px}
.card{
  background:#fff;color:var(--slate-deep);border:1px solid var(--line);border-radius:16px;
  padding:28px 24px;box-shadow:0 18px 36px -22px rgba(38,54,74,.35);
}
.card h1{font-size:1.35rem;line-height:1.7;color:var(--slate)}
.card .bar{width:56px;height:5px;background:var(--yellow);border-radius:4px;margin:10px 0 18px}
.card h2{font-size:1.1rem;margin:22px 0 6px;color:var(--slate)}
.card p{margin-bottom:12px;color:var(--slate-deep)}
.card ul{padding-right:22px;margin-bottom:12px}
.card li{margin-bottom:6px}
.card a{color:var(--slate);font-weight:600}
.card .btn{margin-top:22px;color:var(--slate-deep);font-weight:700}
.card .email{text-align:right;font-weight:700;font-size:1.1rem}

@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---------- brand slate background ---------- */
body{background:var(--slate);background-attachment:scroll}
.ring{border-color:var(--yellow)}
.ring::after{border-color:var(--yellow);background:var(--slate)}
.dots{background-image:radial-gradient(#fff 2px, transparent 2.3px);opacity:.3}
.arch{box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.card{border-color:transparent;box-shadow:9px 9px 0 var(--yellow)}

/* ---------- compact home page: fits one screen, no scrolling ---------- */
.photo-stage{max-width:min(225px, 31vh);padding-bottom:8px}
.home-main{padding-top:max(22px, 3.5vh)}
.ring{width:52px;height:52px;right:-12px;top:16px}
.ring::after{inset:10px}
.dots{width:54px;height:54px;left:-18px;bottom:34px;background-size:12px 12px}
.blob{left:-14px;top:30px;right:20px}
.arch{border-width:5px}
.chip-hey{left:-14px;bottom:12px;padding:6px 14px;font-size:1rem;border-radius:13px}
.links{gap:12px;margin-top:max(22px, 3.2vh)}
.links .btn{min-height:48px;padding:11px 20px;font-size:.95rem}

/* two larger buttons */
.links{gap:16px}
.links .btn{min-height:68px;padding:16px 24px;font-size:1.05rem}

/* ---------- compact inner pages: button stays clear of the Netlify badge ---------- */
.page-main{padding:18px 22px 84px}
.page-main .back-link{margin-bottom:12px;padding:2px 12px;font-size:.88rem;line-height:1.8}
.page-main .card{padding:20px 20px 22px;line-height:1.7}
.page-main .card h1{font-size:1.1rem;line-height:1.6}
.page-main .card .bar{width:44px;height:4px;margin:8px 0 14px}
.page-main .card p{font-size:.95rem;margin-bottom:8px}
.page-main .card ul{margin-bottom:8px}
.page-main .card li{font-size:.95rem;margin-bottom:2px}
.page-main .card .btn{margin-top:14px;min-height:52px;padding:12px 20px;font-size:1rem}
.page-main .card .email{font-size:1.05rem}