/* ============================================================
   Tayyib — thetayyib.de
   Design system carried from the app: deep-green transparent-authority.
   ============================================================ */
:root{
  --green:#0F6E56;        /* brand / chrome */
  --green-bright:#1D9E75; /* halal */
  --green-ink:#0B4E3D;
  --amber:#BA7517;        /* mushbooh */
  --amber-ink:#854F0B;
  --red:#A32D2D;          /* not halal */
  --red-ink:#8A2020;
  --gray:#5F5E5A;         /* unknown */
  --sand:#F7F5EF;         /* surface */
  --sand-2:#EFEDE4;
  --card:#FFFFFF;
  --ink:#1A1A1A;
  --muted:#5C5C56;
  --line:rgba(0,0,0,.09);
  --tint-green:#EAF3DE;
  --tint-amber:#FAEEDA;
  --tint-red:#FCEBEB;
  --tint-gray:#F1EFE8;
  /* Page background field, mixed from the brand greens and the Play-asset mint. Deep green and
     bright halal green bleed in from the top corners over a mint base. The base stays mint the
     whole way down (never fading to near-white), so a long page scrolled past the first screen
     still sits on colour instead of grey. Dark ink stays readable on all three. */
  --mint-base-1:#D6ECE2;
  --mint-base-2:#E8F4EE;
  --mint-base-3:#DFF0E9;
  --radius:18px;
  --radius-sm:12px;
  --maxw:1080px;
  --ff-display:"Display QF Fix","Bricolage Grotesque",-apple-system,system-ui,sans-serif;
  --ff-body:"Inter",-apple-system,system-ui,sans-serif;
  --ff-ar:"Noto Naskh Arabic",serif;
}

/* Bricolage's Q/F carry a heavy swash tail; borrow just those four glyphs
   from Inter (already loaded, matching weight) — every other letter stays Bricolage. */
@font-face{
  font-family:"Display QF Fix";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/cf-fonts/v/inter/5.2.8/latin/wght/normal.woff2") format("woff2"),
      local("Arial Bold"), local("Segoe UI Bold"), local("Arial");
  unicode-range:U+0046, U+0051, U+0066, U+0071; /* F Q f q */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;font-family:var(--ff-body);color:var(--ink);
  /* Deep brand green from the top-left, bright halal green from the top-right, over a mint base
     that stays mint the whole way down. Fixed and viewport-sized, so the same framing (green
     corners at the top, mint everywhere else) holds at every scroll position rather than the
     colour running out below the first screen. Falls back to flat sand for very old engines. */
  background:var(--sand);
  background:
    radial-gradient(78% 58% at 6% -2%, rgba(15,110,86,.16), transparent 62%),
    radial-gradient(74% 54% at 98% 3%, rgba(29,158,117,.14), transparent 62%),
    linear-gradient(158deg, var(--mint-base-1) 0%, var(--mint-base-2) 50%, var(--mint-base-3) 100%);
  /* All layers viewport-fixed, so the green corners frame every screen, not just the document top. */
  background-attachment:fixed;
  line-height:1.6;-webkit-font-smoothing:antialiased;
  font-size:17px;
}
html[dir="rtl"] body{font-family:var(--ff-ar);line-height:1.85}
html[dir="rtl"] .display{font-family:var(--ff-ar)}

.display{font-family:var(--ff-display);font-weight:700;letter-spacing:-.02em;line-height:1.08}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
img{max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--green-bright);outline-offset:3px;border-radius:4px}

/* ---- top nav ---- */
/* Translucent mint rather than translucent sand, so the sticky bar sits into the green field
   instead of reading as a warm strip laid over it. */
.nav{position:sticky;top:0;z-index:50;background:rgba(221,239,230,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  height:64px;max-width:var(--maxw);margin:0 auto;padding:0 24px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);
  font-weight:700;font-size:20px;color:var(--green);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.leaf{width:34px;height:34px;border-radius:9px;background:var(--green);
  display:grid;place-items:center;flex:none}
.leaf svg{width:20px;height:20px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--ink);font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--green)}
.nav-cta{background:var(--green);color:#fff!important;padding:9px 16px;
  border-radius:10px;font-size:14px;font-weight:600}
.nav-cta:hover{background:var(--green-ink);text-decoration:none}

/* language toggle */
.lang{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.lang button{border:0;background:transparent;padding:6px 11px;cursor:pointer;
  font-family:var(--ff-body);font-size:13px;font-weight:600;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--green);color:#fff}

.menu-btn{display:none;border:0;background:transparent;cursor:pointer;padding:6px}
.menu-btn svg{width:26px;height:26px;stroke:var(--ink)}

/* ---- generic section ---- */
.section{padding:84px 0}
.section.tight{padding:56px 0}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green);margin:0 0 14px}
html[dir="rtl"] .eyebrow{letter-spacing:0}
.h2{font-size:clamp(28px,4vw,40px);margin:0 0 16px}
.lede{font-size:19px;color:var(--muted);max-width:60ch;margin:0}

/* ---- hero ---- */
/* No fill of its own: the body's green field runs the whole page, and a sand block here would cut
   a hard edge across it right under the fold. */
.hero{padding:72px 0 64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,58px);margin:0 0 20px}
.hero h1 .accent{color:var(--green)}
.hero p.sub{font-size:20px;color:var(--muted);max-width:46ch;margin:0 0 28px}
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.note-muted{font-size:14px;color:var(--muted)}

/* google play button */
.gplay{display:inline-flex;align-items:center;gap:12px;background:var(--ink);
  color:#fff!important;padding:12px 22px;border-radius:13px;font-weight:600}
.gplay:hover{background:#000;text-decoration:none}
.gplay svg{width:24px;height:24px;flex:none}
.gplay .gp-small{display:block;font-size:11px;font-weight:500;opacity:.8;line-height:1}
.gplay .gp-big{display:block;font-size:18px;font-weight:700;line-height:1.2}

/* ---- the signature: interactive verdict card ---- */
.demo{background:var(--card);border:1px solid var(--line);border-radius:24px;
  box-shadow:0 30px 60px -34px rgba(15,110,86,.35);padding:18px;max-width:380px;margin-inline:auto}
.demo-tabs{display:flex;gap:7px;margin-bottom:16px}
.demo-tabs button{flex:1;border:1px solid var(--line);background:var(--sand);
  border-radius:10px;padding:9px 4px;cursor:pointer;font-family:var(--ff-body);
  font-size:13px;font-weight:600;color:var(--muted);transition:.15s}
.demo-tabs button[aria-pressed="true"]{color:#fff;border-color:transparent}
.demo-tabs button[data-v="halal"][aria-pressed="true"]{background:var(--green-bright)}
.demo-tabs button[data-v="mushbooh"][aria-pressed="true"]{background:var(--amber)}
.demo-tabs button[data-v="haram"][aria-pressed="true"]{background:var(--red)}
.demo-prod{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.demo-thumb{width:42px;height:42px;border-radius:10px;flex:none}
.demo-prod b{font-size:15px}
.demo-prod span{display:block;font-size:12px;color:var(--muted)}
.banner{border-radius:16px;padding:20px 16px;text-align:center;margin-bottom:14px}
.banner .ring{width:46px;height:46px;border-radius:50%;display:inline-grid;
  place-items:center;margin-bottom:8px}
.banner .ring svg{width:24px;height:24px;stroke:#fff;fill:none}
.banner .word{font-family:var(--ff-display);font-size:25px;font-weight:700;line-height:1}
.banner .tag{font-size:11px;font-weight:700;letter-spacing:.06em;margin-top:5px;display:block}
.banner.halal{background:var(--tint-green)} .banner.halal .ring{background:var(--green-bright)}
.banner.halal .word{color:var(--green-ink)} .banner.halal .tag{color:#3B6D11}
.banner.mushbooh{background:var(--tint-amber)} .banner.mushbooh .ring{background:var(--amber)}
.banner.mushbooh .word{color:var(--amber-ink)} .banner.mushbooh .tag{color:var(--amber-ink)}
.banner.haram{background:var(--tint-red)} .banner.haram .ring{background:var(--red)}
.banner.haram .word{color:var(--red-ink)} .banner.haram .tag{color:var(--red)}
.demo-why{font-size:13.5px;color:#3a3a3a;line-height:1.5;margin:0 0 12px}
.demo-row{display:flex;align-items:center;justify-content:space-between;
  background:var(--sand);border-radius:10px;padding:10px 12px;margin-bottom:7px}
.demo-row b{font-size:13.5px}
.demo-row span{display:block;font-size:11px;color:var(--muted)}
.chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:8px;white-space:nowrap}
.chip.mushbooh{background:var(--tint-amber);color:var(--amber-ink)}
.chip.haram{background:var(--tint-red);color:var(--red)}
.chip.halal{background:var(--tint-green);color:#3B6D11}
.demo-honesty{background:var(--tint-gray);border-radius:10px;padding:10px 12px;
  font-size:11.5px;color:#6E6E68;line-height:1.5;margin-top:4px}
.demo-honesty .src{color:var(--green);font-weight:600}

/* ---- feature trio ---- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px}
.feat .ic{width:44px;height:44px;border-radius:12px;background:var(--tint-green);
  display:grid;place-items:center;margin-bottom:16px}
.feat .ic svg{width:23px;height:23px;stroke:var(--green);fill:none}
.feat h3{font-family:var(--ff-display);font-size:19px;margin:0 0 8px}
.feat p{margin:0;color:var(--muted);font-size:15.5px}

/* ---- four verdict strip ---- */
.verdicts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vcard{border-radius:var(--radius-sm);padding:18px 16px;border:1px solid var(--line)}
.vcard .dot{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;margin-bottom:10px}
.vcard .dot svg{width:17px;height:17px;stroke:#fff;fill:none}
.vcard b{font-family:var(--ff-display);font-size:17px;display:block;margin-bottom:4px}
.vcard p{margin:0;font-size:13.5px;color:var(--muted)}
.vcard.halal{background:var(--tint-green)} .vcard.halal .dot{background:var(--green-bright)} .vcard.halal b{color:var(--green-ink)}
.vcard.haram{background:var(--tint-red)} .vcard.haram .dot{background:var(--red)} .vcard.haram b{color:var(--red-ink)}
.vcard.mushbooh{background:var(--tint-amber)} .vcard.mushbooh .dot{background:var(--amber)} .vcard.mushbooh b{color:var(--amber-ink)}
.vcard.unknown{background:var(--tint-gray)} .vcard.unknown .dot{background:var(--gray)} .vcard.unknown b{color:#4A4A45}

/* ---- honesty band ---- */
.band{background:var(--green);color:#fff;border-radius:26px;padding:54px 44px;
  text-align:center;max-width:var(--maxw)}
.band .eyebrow{color:#9FE1CB}
.band h2{font-family:var(--ff-display);font-size:clamp(26px,3.6vw,36px);margin:0 0 16px;color:#fff}
.band p{color:rgba(255,255,255,.9);max-width:62ch;margin:0 auto;font-size:18px}

/* ---- steps (how it works) ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;position:relative}
.step .num{font-family:var(--ff-display);font-size:15px;font-weight:700;color:var(--green);
  border:2px solid var(--green);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px}
.step h3{font-family:var(--ff-display);font-size:19px;margin:0 0 8px}
.step p{margin:0;color:var(--muted);font-size:15.5px}

/* can / can't */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px}
.col h3{font-family:var(--ff-display);font-size:20px;margin:0 0 16px;display:flex;align-items:center;gap:10px}
.col h3 .badge{width:26px;height:26px;border-radius:50%;display:grid;place-items:center}
.col h3 .badge svg{width:15px;height:15px;stroke:#fff;fill:none}
.col.can h3 .badge{background:var(--green-bright)} .col.cant h3 .badge{background:var(--gray)}
.col ul{margin:0;padding:0;list-style:none}
.col li{padding:9px 0;border-top:1px solid var(--line);font-size:15.5px;color:#33332f}
.col li:first-child{border-top:0}

/* about prose */
.prose{max-width:64ch}
.prose p{font-size:18px;color:#33332f;margin:0 0 18px}
.sources{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.sources .s{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:14px;font-weight:600;color:var(--green-ink)}

/* legal */
.legal-body{max-width:70ch}
.legal-body h2{font-family:var(--ff-display);font-size:22px;margin:28px 0 10px}
.legal-body p{color:#33332f;margin:0 0 12px}
.fill{background:#FFF7E6;border:1px dashed var(--amber);border-radius:10px;
  padding:3px 8px;color:var(--amber-ink);font-weight:600;font-size:.95em}

/* ---- ratgeber / articles ---- */
.crumb{font-size:13px;color:var(--muted);margin:0 0 16px}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--green)}
.article{max-width:74ch;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,5vw,56px);box-shadow:0 30px 60px -44px rgba(15,110,86,.3)}
@media (max-width:520px){.article{border-radius:var(--radius-sm)}}
.article .lede{margin:0 0 26px}
.article h2{font-family:var(--ff-display);font-size:clamp(22px,3vw,28px);margin:34px 0 12px;letter-spacing:-.01em}
.article h3{font-family:var(--ff-display);font-size:19px;margin:24px 0 8px}
.article p{color:#33332f;margin:0 0 16px}
.article ul,.article ol{margin:0 0 18px;padding-inline-start:22px;color:#33332f}
.article li{margin:6px 0}
.article strong{font-weight:700}
.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.article th,.article td{border:1px solid var(--line);padding:9px 12px;text-align:start;vertical-align:top}
.article th{background:var(--sand-2);font-weight:700}
.article .checklist{list-style:none;padding:0}
.article .checklist li{padding-inline-start:26px;position:relative}
.article .checklist li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--green-bright);font-weight:700}
.art-note{background:var(--tint-gray);border-radius:12px;padding:14px 16px;font-size:14px;color:#5a5a54;margin:26px 0 0}
.art-cta{background:var(--green);border-radius:18px;padding:26px 24px;margin:22px 0 0;text-align:center}
.art-cta p{color:rgba(255,255,255,.92);margin:0 0 14px;font-size:17px}
.art-cta .gplay{background:var(--ink)}
.ratgeber-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:30px}
.rg-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;color:var(--ink)}
.rg-card:hover{text-decoration:none;border-color:var(--green);box-shadow:0 20px 40px -30px rgba(15,110,86,.4)}
.rg-card h3{font-family:var(--ff-display);font-size:19px;margin:0 0 8px;color:var(--green-ink)}
.rg-card p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:860px){.ratgeber-grid{grid-template-columns:1fr}}

/* ---- footer ---- */
.foot{background:var(--ink);color:#cfcfca;padding:54px 0 34px;margin-top:0}
.foot a{color:#cfcfca}
.foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
  padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot .brand{color:#fff}
.foot-col h4{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8a8a84;margin:0 0 12px}
.foot-col a{display:block;font-size:15px;margin-bottom:8px;color:#cfcfca}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-top:22px;font-size:13px;color:#8a8a84}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:64px;inset-inline:0;
    flex-direction:column;align-items:flex-start;gap:4px;background:var(--sand);
    padding:16px 24px;border-bottom:1px solid var(--line)}
  .nav-links.open a{padding:8px 0}
  .menu-btn{display:block}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .demo{order:-1}
  .trio,.steps{grid-template-columns:1fr}
  .verdicts{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr}
  .section{padding:60px 0}
  .band{padding:40px 24px;border-radius:20px}
}
@media (max-width:420px){.verdicts{grid-template-columns:1fr}}