:root { --o:#FF7000; --g:#00943B; --k:#141414; --cream:#F7F4EE; --sand:#EDE7DC; --muted:#77736b; --line:#DCD5C8; }
  * { box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { margin:0; background:var(--cream); color:var(--k); font-family:'Readex Pro',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:inherit; text-decoration:none; }
  button { font-family:inherit; cursor:pointer; }
  .dsp { font-family:'Readex Pro',sans-serif; font-weight:300; letter-spacing:-.5px; line-height:1.1; }
  body[dir=ltr] .dsp { font-family:'Fraunces',serif; font-weight:400; letter-spacing:-1px; }
  .wrap { max-width:1240px; margin:auto; padding:0 24px; }
  .strip { background:var(--k); color:var(--cream); font-size:12px; letter-spacing:.5px; overflow:hidden; white-space:nowrap; }
  .strip .run { display:inline-block; padding:9px 0; animation:run 40s linear infinite; }
  .strip span { margin:0 28px; }
  @keyframes run { from { transform:translateX(0); } to { transform:translateX(50%); } }
  body[dir=ltr] .strip .run { animation-name:runl; }
  @keyframes runl { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  header { position:sticky; top:0; z-index:10; background:rgba(247,244,238,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .hd { display:flex; align-items:center; gap:28px; height:72px; }
  .logo { display:flex; align-items:center; gap:10px; }
  .logo img { width:34px; height:34px; }
  .logo b { font-family:'Fredoka',sans-serif; font-size:24px; font-weight:600; letter-spacing:-.3px; }
  nav { display:flex; gap:26px; font-size:14px; color:#3d3b37; }
  nav a:hover { color:var(--o); }
  .hd .sp { flex:1; }
  .ic { border:1px solid var(--line); background:transparent; height:40px; min-width:40px; padding:0 14px; border-radius:999px; font-size:13px; display:inline-flex; align-items:center; gap:8px; color:var(--k); }
  .ic .n { background:var(--k); color:var(--cream); border-radius:999px; min-width:18px; height:18px; font-size:11px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
  .hero { padding:40px 0 20px; }
  .hero .box { display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; min-height:560px; }
  .hero .kick { font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--o); margin-bottom:18px; }
  .hero h1 { margin:0; font-size:clamp(46px,7vw,96px); }
  .hero h1 em { font-style:normal; color:var(--o); }
  .hero p { color:#4a4741; font-size:17px; max-width:440px; line-height:1.9; margin:22px 0 32px; }
  .cta { display:inline-flex; align-items:center; gap:10px; background:var(--k); color:var(--cream); padding:16px 34px; border-radius:999px; font-size:15px; transition:background .2s; }
  .cta:hover { background:var(--o); }
  .hero .art { position:relative; aspect-ratio:4/5; background:var(--sand); border-radius:240px 240px 24px 24px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
  .hero .art img { width:52%; animation:bob 5s ease-in-out infinite; }
  @keyframes bob { 50% { transform:translateY(-8px); } }
  .hero .art .peek { position:absolute; width:34%; height:auto; inset:auto auto 0 4%; animation:none; }
  .sticker { position:absolute; background:var(--cream); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:13px; }
  .hero .s1 { top:9%; left:7%; }
  .hero .s2 { bottom:8%; right:7%; }
  .blob { display:none; }
  section { padding:56px 0; }
  .ttl { display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:28px; border-bottom:1px solid var(--line); padding-bottom:14px; }
  .ttl h2 { margin:0; font-size:clamp(30px,4vw,48px); }
  .cats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .cat { background:var(--sand); border-radius:20px; padding:28px; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; transition:background .2s; position:relative; }
  .cat:hover { background:#E5DDCF; }
  .cat .e { display:none; }
  .cat .no { position:absolute; top:24px; font-size:12px; letter-spacing:2px; color:var(--muted); }
  .cat h3 { margin:0; font-size:32px; }
  .cat p { margin:8px 0 0; color:var(--muted); font-size:14px; }
  .cat.on { outline:1.5px solid var(--k); }
  .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:28px 20px; }
  .pc { cursor:pointer; }
  .pc .im { aspect-ratio:4/5; border-radius:18px; background:var(--sand) center/cover no-repeat; position:relative; overflow:hidden; }
  .pc .im .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transition:transform .4s; }
  .pc:hover .im .ph { transform:scale(1.04); }
  .pc .im .ph img { width:38%; opacity:.85; }
  .pc .bd { position:absolute; top:12px; right:12px; }
  body[dir=ltr] .pc .bd { right:auto; left:12px; }
  .pill { background:var(--cream); border-radius:999px; padding:4px 12px; font-size:12px; }
  .pill.out { background:var(--k); color:var(--cream); }
  .pc h4 { margin:14px 2px 4px; font-size:15px; font-weight:400; }
  .pc .pr { margin:0 2px; font-size:14px; color:var(--muted); }
  .soon { border:1px solid var(--line); border-radius:20px; padding:56px 30px; text-align:center; grid-column:1/-1; }
  .soon h3 { margin:0 0 10px; font-size:32px; }
  .soon p { color:var(--muted); margin:0; }
  .band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:10px 0; }
  .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:8px; }
  .st .n { font-family:'Fredoka',sans-serif; font-size:14px; color:var(--o); letter-spacing:2px; }
  .st h3 { margin:10px 0 8px; font-size:20px; font-weight:400; }
  .st p { margin:0; color:var(--muted); line-height:1.9; font-size:14px; }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .card { border:1px solid var(--line); border-radius:20px; padding:30px; }
  .card h3 { margin:0 0 14px; font-size:30px; }
  .card p, .card li { line-height:1.9; color:#4a4741; font-size:14px; }
  .sz { width:100%; border-collapse:collapse; margin:10px 0; font-size:14px; }
  .sz td, .sz th { border-bottom:1px solid var(--line); padding:12px 6px; text-align:start; }
  .sz th { font-weight:600; color:var(--muted); font-size:12px; letter-spacing:1px; }
  details { border-bottom:1px solid var(--line); padding:16px 0; }
  details summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; font-size:15px; }
  details summary::after { content:'+'; font-size:20px; color:var(--muted); }
  details[open] summary::after { content:'–'; }
  details p { margin:10px 0 0; }
  footer { margin-top:40px; background:var(--k); color:var(--cream); padding:56px 0 30px; }
  .ft { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:24px; }
  .ft h4 { margin:0 0 12px; font-weight:400; color:#9d978c; font-size:13px; letter-spacing:1px; }
  .ft a { display:block; margin:8px 0; font-size:14px; }
  .ft a:hover { color:var(--o); }
  .ft .big { font-family:'Fredoka',sans-serif; font-size:44px; font-weight:600; }
  .ft p { color:#b9b3a8; font-size:14px; }
  .copy { margin-top:40px; padding-top:20px; border-top:1px solid #2c2c2c; font-size:12px; color:#8a857b; }
  .ov { position:fixed; inset:0; background:rgba(20,20,20,.35); z-index:30; display:none; }
  .ov.on { display:block; }
  .drawer { position:fixed; top:0; bottom:0; left:0; width:min(440px,100%); background:var(--cream); z-index:31; transform:translateX(-105%); transition:transform .3s; display:flex; flex-direction:column; }
  body[dir=ltr] .drawer { left:auto; right:0; transform:translateX(105%); }
  .drawer.on { transform:none !important; }
  .dh { display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); }
  .dh h3 { margin:0; font-size:24px; }
  .db { flex:1; overflow:auto; padding:10px 22px; }
  .df { border-top:1px solid var(--line); padding:18px 22px; display:flex; flex-direction:column; gap:12px; }
  .li { display:flex; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); }
  .li .th { width:70px; height:86px; border-radius:12px; background:var(--sand) center/cover; flex:none; }
  .li .tx { flex:1; }
  .li b { display:block; font-size:14px; font-weight:400; }
  .li small { color:var(--muted); }
  .qty { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
  .qty button { border:0; background:transparent; width:30px; height:28px; font-size:15px; }
  .qty span { min-width:22px; text-align:center; font-size:13px; }
  .row { display:flex; justify-content:space-between; font-size:14px; color:#4a4741; padding:3px 0; }
  .row.t { font-size:17px; color:var(--k); }
  .x { border:1px solid var(--line); background:transparent; width:36px; height:36px; border-radius:50%; font-size:18px; color:var(--k); }
  .bigbtn { border:0; background:var(--k); color:var(--cream); padding:16px; border-radius:999px; font-size:15px; width:100%; transition:background .2s; }
  .bigbtn:hover { background:var(--o); }
  .bigbtn:disabled { opacity:.35; background:var(--k); }
  .bigbtn.k { background:var(--o); }
  .md { position:fixed; z-index:31; inset:auto 0 0 0; margin:auto; top:50%; transform:translateY(-50%); width:min(960px,calc(100% - 24px)); max-height:92vh; overflow:auto; background:var(--cream); border-radius:24px; display:none; }
  .md.on { display:block; }
  .pd { display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:20px 28px 30px; }
  .pd .main { width:100%; aspect-ratio:4/5; object-fit:contain; border-radius:18px; background:var(--sand); display:block; }
  .pd .ths { display:flex; gap:8px; margin-top:10px; }
  .pd .ths img { width:60px; height:74px; object-fit:cover; border-radius:10px; cursor:pointer; opacity:.55; }
  .pd .ths img.on { opacity:1; }
  .pd h2 { margin:4px 0 10px; font-size:34px; }
  .pd .pr { font-size:18px; color:#4a4741; }
  .pd .ds { line-height:1.9; white-space:pre-line; color:var(--muted); font-size:14px; }
  .opts { margin:18px 0; }
  .opts b { display:block; margin-bottom:8px; font-weight:400; font-size:13px; color:var(--muted); }
  .opts button { border:1px solid var(--line); background:transparent; border-radius:999px; padding:9px 22px; margin:0 0 8px 8px; font-size:14px; color:var(--k); }
  .opts button.on { border-color:var(--k); background:var(--k); color:var(--cream); }
  form.co { display:grid; gap:14px; }
  .fl label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
  .fl input, .fl select, .fl textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:13px; font:400 15px 'Readex Pro',sans-serif; background:#fff; }
  .fl input:focus, .fl select:focus, .fl textarea:focus { outline:none; border-color:var(--k); }
  .pay { background:var(--sand); border-radius:14px; padding:16px; line-height:2; font-size:14px; }
  .pay code { background:var(--cream); border-radius:8px; padding:2px 10px; direction:ltr; display:inline-block; font-size:15px; }
  .msg { padding:12px; border-radius:12px; display:none; font-size:14px; }
  .msg.err { display:block; background:#F8E3DE; color:#9C2A1C; }
  .done { text-align:center; padding:40px 20px; }
  .done img { width:90px; }
  .toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120px); background:var(--k); color:var(--cream); padding:12px 24px; border-radius:999px; font-size:14px; z-index:40; transition:transform .25s, opacity .25s; opacity:0; pointer-events:none; }
  .toast.on { transform:translateX(-50%); opacity:1; }
  @media (max-width:860px) {
    nav { display:none; }
    .hero .box { grid-template-columns:1fr; min-height:0; gap:28px; }
    .hero .art { max-width:340px; width:100%; margin:auto; }
    .cats, .steps, .two, .ft { grid-template-columns:1fr; }
    .steps { gap:26px; }
    .grid { grid-template-columns:repeat(2,1fr); gap:20px 12px; }
    .pd { grid-template-columns:1fr; padding:14px 18px 24px; }
    .wrap { padding:0 16px; }
  }
  /* PHP site (Oct 2026): Lalezar for Arabic headings, real links, own pages */
  body[dir=rtl] .dsp { font-family:'Lalezar','Readex Pro',sans-serif; font-weight:400; letter-spacing:0; line-height:1.25; }
  a.pc, a.cat { color:inherit; }
  a.pc { display:block; }
  a.cat { display:flex; }
  nav a.on { color:var(--o); }
  .narrow { max-width:820px; }
  .policy h1 { font-size:clamp(30px,4vw,44px); margin:0 0 16px; }
  .policy p { font-size:15px; }
  .small { font-size:13px; color:var(--muted); }
  .ft { grid-template-columns:1.6fr 1fr 1fr 1fr; }
  .ft a.ftbtn { display:inline-block; margin-top:10px; border:1px solid #3a3a3a; border-radius:999px; padding:10px 20px; font-size:13px; }
  .ftbtn:hover { border-color:var(--o); color:var(--o); }
  .wa { position:fixed; bottom:20px; right:20px; z-index:44; width:56px; height:56px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(0,0,0,.18); }
  body[dir=rtl] .wa { right:auto; left:20px; }
  #coPage .cta { margin-top:12px; }
  @media (max-width:860px) { .wa { bottom:16px; width:50px; height:50px; } }
  /* coming soon / 404: calm, one accent only */
  .soon { background:#fff; border-color:var(--line); padding:64px 30px; }
  .soon::before { content:""; display:block; width:56px; height:52px; margin:0 auto 22px; background:url(logo.svg) center/contain no-repeat; opacity:.9; }
  .soon h3 { color:var(--k); }
  .soon p { max-width:420px; margin:0 auto; line-height:1.9; }
  .nf::before { display:none; }
  .nf img { display:block; margin:0 auto 14px; }
  .nf h1 { margin:0 0 8px; font-size:56px; }
  .nf p { margin:0 auto 26px; }