/* Public home page. Own tokens (h- prefix) so the app's light/dark switching never changes it; app.css is only loaded for the fonts. */
.home{
  --night:#14201a; --night-2:#1c2b23; --night-line:#2c3d33;
  --gold:#d9a85f; --gold-deep:#a9752e; --gold-soft:#f1e3c9;
  --paper:#f7f8f3; --tint:#eaf0e8; --card:#ffffff; --line:#d8dfd3;
  --ink:#17201b; --ink-soft:#4b5850; --on-night:#e9efe8; --on-night-soft:#a9b8ad;
  --ok:#3f7a58; --ok-soft:#dcebe1; --bad:#b8432f; --bad-soft:#f6dfd9; --late:#9a6a1f; --late-soft:#f5e7c8;
  --display:'Markazi Text','Georgia',serif; --body:'IBM Plex Sans Arabic','Tahoma',sans-serif;
  --gutter:clamp(16px,4vw,32px);
  height:auto; min-height:100vh; display:flex; flex-direction:column; margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.7;
}
html{height:auto; scroll-behavior:smooth; scroll-padding-top:76px;}
.home *{box-sizing:border-box;}
.home h1,.home h2,.home h3{font-family:var(--display); font-weight:700; margin:0; line-height:1.15; text-wrap:balance; letter-spacing:0;}
.home p{margin:0;}
:where(.home) a{color:inherit;}
.h-wrap{width:100%; max-width:1120px; margin-inline:auto; padding-inline:var(--gutter);}
.h-narrow{max-width:760px;}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px; border-radius:4px;}

/* buttons */
.h-btn{display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border-radius:10px; font:inherit; font-weight:600; font-size:15px; text-decoration:none; border:1.5px solid transparent; cursor:pointer; transition:transform .15s, background .15s, border-color .15s, color .15s;}
.h-btn:active{transform:translateY(1px);}
.h-btn-gold{background:var(--gold); color:#20180a;} .h-btn-gold:hover{background:#e4b872;}
.h-btn-ghost{border-color:var(--ink-soft); color:var(--ink);} .h-btn-ghost:hover{border-color:var(--gold-deep); color:var(--gold-deep);}
.h-btn-line,.h-lang{min-height:40px; padding:0 18px; border-color:#4a5d51; color:var(--on-night); font-size:14px;} .h-btn-line:hover{border-color:var(--gold); color:var(--gold);}
.h-lang{display:inline-flex; align-items:center; background:transparent; margin-inline-start:0;}
.h-nav{margin-inline-end:auto;}

/* top bar (sits on the dark hero) */
.h-top{position:relative; z-index:5; background:var(--night); border-bottom:1px solid var(--night-line);}
.h-top-row{display:flex; align-items:center; gap:22px; min-height:72px;}
.h-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--on-night); font-family:var(--display); font-size:24px; font-weight:700;}
.h-brand img{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));}
.h-nav{display:flex; gap:22px; margin-inline-start:auto; font-size:14px;}
.h-nav a{color:var(--on-night-soft); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent;} .h-nav a:hover{color:var(--gold);}
.h-nav a[aria-current="page"]{color:var(--gold); border-bottom-color:var(--gold);}
.h-pagehead{background:radial-gradient(900px 260px at 85% 0%, rgba(217,168,95,.22), transparent 70%), var(--tint); color:var(--ink); padding:40px 0 44px; border-bottom:1px solid var(--line);}
.h-pagehead h1{font-size:clamp(40px,6vw,62px); color:var(--ink);}
.h-pagehead p{color:var(--ink-soft); font-size:18px; margin-top:12px;}

/* hero */
.h-hero{background:radial-gradient(900px 480px at 85% 5%, rgba(217,168,95,.22), transparent 70%), var(--paper); color:var(--ink); padding:56px 0 64px; overflow:hidden;}
.h-hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
.h-eyebrow{color:var(--gold-deep); font-size:14px; font-weight:600; letter-spacing:.02em; margin-bottom:14px;}
.h-hero h1{font-size:clamp(44px,7vw,76px); color:var(--ink);}
html[dir="ltr"] .h-hero h1{line-height:1.02; font-size:clamp(40px,6vw,66px);}
.h-lead{font-size:18px; color:var(--ink-soft); margin-top:22px; max-width:34em;}
.home main{flex:1; display:flex; flex-direction:column;}
.home main>section:only-child{flex:1;}
.h-hero-full{display:flex; align-items:center;}
.h-hero-full .h-hero-grid{width:100%;}
.h-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;}

/* the ledger: the page's one signature - a class register whose stamps are pressed in one by one */
.h-ledger{margin:0; background:#fff; color:var(--ink); border-radius:14px; padding:22px 22px 18px; box-shadow:0 26px 50px -24px rgba(20,32,26,.4), 0 0 0 1px var(--line); position:relative;}
.h-ledger::before{content:''; position:absolute; inset-block:14px; inset-inline-start:0; width:5px; background:var(--gold-deep); border-radius:0 3px 3px 0;}
.h-ledger-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding-bottom:12px; border-bottom:1.5px solid var(--line);}
.h-ledger-title{font-family:var(--display); font-size:24px; font-weight:700; line-height:1.2;}
.h-ledger-sub{font-size:13px; color:var(--ink-soft);}
.h-ledger-tag{font-size:11px; color:var(--ink-soft); border:1px dashed var(--line); border-radius:999px; padding:1px 10px; white-space:nowrap;}
.h-ledger-rows{list-style:none; margin:0; padding:0;}
.h-ledger-rows li{display:flex; align-items:center; justify-content:space-between; padding:11px 2px; border-bottom:1px dashed var(--line);}
.h-name{font-weight:500;}
.h-stamp{display:inline-block; font-size:12.5px; font-weight:700; padding:3px 14px; border-radius:6px; border:2px solid currentColor; transform:rotate(-4deg); opacity:0; animation:press .45s cubic-bezier(.2,.9,.3,1.3) var(--d,0s) forwards;}
.h-stamp-ok{color:var(--ok); background:var(--ok-soft);}
.h-stamp-bad{color:var(--bad); background:var(--bad-soft); transform:rotate(3deg);}
.h-stamp-late{color:var(--late); background:var(--late-soft);}
.h-sms{margin-top:16px; background:var(--night-2); color:var(--on-night); border-radius:12px; padding:14px 16px; opacity:0; animation:rise .5s ease var(--d,0s) forwards;}
.h-sms-label{font-size:12px; color:var(--gold); font-weight:600;}
.h-sms p{font-size:14px; margin-top:4px; line-height:1.6;}
.h-sms-state{font-size:12px; color:var(--on-night-soft); margin-top:8px;}
.h-sms-state::before{content:'✓'; color:var(--gold); margin-inline-end:6px;}
@keyframes press{0%{opacity:0; transform:scale(1.9) rotate(-10deg);} 100%{opacity:1; transform:scale(1) rotate(var(--r,-4deg));}}
.h-stamp-bad{--r:3deg;}
@keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}

/* sections */
.h-sec{padding:84px 0;}
.h-sec-first{padding-top:56px;}
.h-sec-tint{background:var(--tint);}
.h-sec h2{font-size:clamp(32px,4.4vw,46px); margin-bottom:26px;}
.h-big{font-size:clamp(19px,2.4vw,23px); line-height:1.75; color:var(--ink);}
.h-soft{color:var(--ink-soft); margin-top:14px;}

.h-roles{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.h-roles article{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px;}
.h-roles h3{font-size:24px; margin-bottom:8px; color:var(--gold-deep);}
.h-roles p{font-size:15px; color:var(--ink-soft);}

.h-features{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1.5px solid var(--ink);}
.h-features li{padding:22px 4px 22px 22px; border-bottom:1px solid var(--line);}
.h-features li:not(:nth-child(3n+1)){border-inline-start:1px solid var(--line); padding-inline-start:24px;}
.h-features h2{font-size:23px; margin-bottom:6px;}
.h-features p{font-size:15px; color:var(--ink-soft);}

.h-steps{list-style:none; margin:0; padding:0; counter-reset:s; display:grid; gap:14px;}
.h-steps li{counter-increment:s; display:grid; grid-template-columns:44px 1fr; column-gap:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px;}
.h-steps li::before{content:counter(s); grid-row:span 2; align-self:center; width:44px; height:44px; border-radius:50%; background:var(--night); color:var(--gold); font-family:var(--display); font-size:24px; font-weight:700; display:flex; align-items:center; justify-content:center;}
.h-steps b{font-size:17px;} .h-steps span{color:var(--ink-soft); font-size:15px;}

.h-dark{background:var(--night); color:var(--on-night);}
.h-dark h2{color:#fff;}
.h-secure{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:22px;}
.h-secure li{border-top:2px solid var(--gold); padding-top:14px;}
.h-secure h2{font-size:22px; color:#fff; margin-bottom:6px;}
.h-secure p{font-size:14.5px; color:var(--on-night-soft);}
.h-secure-light li{border-top-color:var(--gold-deep);}
.h-secure-light h2{color:var(--ink); font-size:26px;}
.h-secure-light p{color:var(--ink-soft); font-size:16px;}

.h-owner{max-width:760px;}
.h-link{display:inline-block; margin-top:14px; font-weight:600; color:var(--gold-deep); text-decoration:underline; text-underline-offset:4px; direction:ltr;}

.h-contact{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start;}
.h-form{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; display:grid; gap:16px;}
.h-field label{display:block; font-size:14px; font-weight:600; margin-bottom:6px;}
.h-field input,.h-field textarea{width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:11px 14px; transition:border-color .15s, box-shadow .15s;}
.h-field textarea{resize:vertical; min-height:110px;}
.h-field input:focus,.h-field textarea:focus{outline:none; border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-soft);}
.h-field .h-bad{border-color:var(--bad);}
.h-trap{position:absolute; inset-inline-start:-10000px; width:1px; height:1px; overflow:hidden;}
.h-form-msg{min-height:1.5em; font-size:14.5px; font-weight:500;}
.h-form-msg.h-err{color:var(--bad);} .h-form-msg.h-good{color:var(--ok);}
.h-submit{width:100%;} .h-submit[disabled]{opacity:.6; cursor:progress;}

.h-foot{background:var(--night); color:var(--on-night-soft); font-size:13px; padding:12px 0; text-align:center; border-top:1px solid var(--night-line);}
.h-foot a{color:var(--gold); text-decoration:none;} .h-foot a:hover{text-decoration:underline;}

/* tablet / phone */
@media (max-width:980px){
  .h-hero-grid{grid-template-columns:1fr; gap:40px;}
  .h-roles{grid-template-columns:repeat(2,1fr);}
  .h-features{grid-template-columns:repeat(2,1fr);}
  .h-features li:not(:nth-child(3n+1)){border-inline-start:0; padding-inline-start:4px;}
  .h-features li:nth-child(2n){border-inline-start:1px solid var(--line); padding-inline-start:24px;}
  .h-secure{grid-template-columns:repeat(2,1fr);}
  .h-contact{grid-template-columns:1fr; gap:24px;}
}
@media (max-width:640px){
  .h-top-row{gap:10px; flex-wrap:wrap; padding-block:10px 4px; min-height:0;}
  .h-brand{margin-inline-end:auto; font-size:22px;}
  .h-btn-line{padding:0 12px;}
  .h-nav{order:3; width:100%; margin:0; gap:20px; overflow-x:auto; padding-bottom:4px; white-space:nowrap;}
  .h-hero{padding:36px 0 48px;}
  .h-hero-full{display:block;}
  .h-pagehead{padding:14px 0 40px;}
  .h-sec{padding:60px 0;}
  .h-sec-first{padding-top:40px;}
  .h-roles,.h-features,.h-secure{grid-template-columns:1fr;}
  .h-features li,.h-features li:nth-child(2n),.h-features li:not(:nth-child(3n+1)){border-inline-start:0; padding-inline:4px;}
  .h-form{padding:20px;}
  .h-actions .h-btn{flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .h-stamp,.h-sms{animation:none; opacity:1;}
  .h-stamp{transform:rotate(var(--r,-4deg));}
}