/* WainFlosak – gemeinsames Design (arabisch RTL, mobile-first) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

:root{
  --bg:#FFF7E8; --card:#FFFFFF; --ink:#141414; --line:#141414;
  --yellow:#FFD400; --cyan:#17C3E0; --red:#F5333F; --green:#17B978;
  --muted:#5a5a5a; --soft:#FBEFD2;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Cairo',system-ui,sans-serif; line-height:1.7;
}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:760px; margin:0 auto; padding:0 16px}

/* Header */
header.top{border-bottom:3px solid var(--line); background:var(--card)}
header.top .bar{max-width:760px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px}
.logo{font-weight:900; font-size:21px; text-decoration:none; display:flex; align-items:center; gap:8px; white-space:nowrap}
.logo .coin{background:var(--yellow); border:3px solid var(--line); border-radius:50%; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; font-size:15px}
nav.menu{display:flex; gap:6px; flex-wrap:wrap}
nav.menu a{text-decoration:none; font-weight:700; font-size:15px; padding:6px 10px; border-radius:9px}
nav.menu a:hover,nav.menu a.active{background:var(--yellow); border:2px solid var(--line); padding:4px 8px}

/* Hero */
.hero{text-align:center; padding:34px 16px 6px}
.hero h1{font-size:32px; font-weight:900; margin:0 0 12px; line-height:1.3}
.hero h1 .hl{background:var(--yellow); padding:0 8px; border:3px solid var(--line); border-radius:10px; display:inline-block}
.hero p{font-size:18px; color:var(--muted); margin:0 auto; max-width:540px}
@media(min-width:640px){ .hero h1{font-size:40px} }

/* Section titles */
.sec-title{font-size:24px; font-weight:900; margin:30px 0 4px; display:flex; align-items:center; gap:8px}
.sec-sub{color:var(--muted); margin:0 0 16px}

/* Card grid */
.cards{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){ .cards{grid-template-columns:1fr} }
.tile{display:block; text-decoration:none; background:var(--card); border:3px solid var(--line);
  border-radius:16px; padding:16px; box-shadow:5px 5px 0 var(--line); transition:transform .08s}
.tile:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--line)}
.tile .ico{font-size:30px}
.tile h3{margin:8px 0 4px; font-size:18px; font-weight:800}
.tile p{margin:0; color:var(--muted); font-size:14px}
.tile.soon{opacity:.6; box-shadow:none}
.badge{display:inline-block; background:var(--soft); border:2px solid var(--line); border-radius:8px; font-size:12px; font-weight:700; padding:2px 8px; margin-top:8px}

/* Calculator */
.calc{background:var(--card); border:3px solid var(--line); border-radius:18px; padding:20px; box-shadow:6px 6px 0 var(--line); margin:18px 0}
.calc h2{font-size:22px; margin:0 0 4px; font-weight:900}
.calc .sub{color:var(--muted); font-size:15px; margin:0 0 14px}
.row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0}
.row label{font-weight:600; font-size:16px}
.row input{width:120px; padding:10px 12px; font-family:inherit; font-size:17px; font-weight:800;
  border:3px solid var(--line); border-radius:10px; text-align:center; background:#fff}
.out{margin-top:16px; border-top:3px dashed var(--line); padding-top:14px; text-align:center}
.out .big{font-size:42px; font-weight:900; color:var(--red); display:block; line-height:1.1}
.out .lbl{font-size:15px; color:var(--muted)}
.out .year{margin-top:8px; font-size:20px; font-weight:800}
.out .year b{color:var(--red)}
.tip{margin-top:14px; background:#E9FBF2; border:3px solid var(--green); border-radius:12px; padding:10px 14px; font-size:15px}
.tip b{color:var(--green)}
.note{font-size:13px; color:var(--muted); text-align:center; margin-top:10px}

/* Content */
.prose{background:var(--card); border:3px solid var(--line); border-radius:16px; padding:20px; margin:18px 0; box-shadow:5px 5px 0 var(--line)}
.prose h2{font-size:20px; margin:18px 0 8px}
.prose h2:first-child{margin-top:0}
.prose p{margin:10px 0}
.prose ul{margin:10px 0; padding-inline-start:22px}
.prose li{margin:6px 0}

/* CTA */
.cta{margin:30px 0; background:var(--cyan); border:3px solid var(--line); border-radius:18px; padding:20px; text-align:center; box-shadow:6px 6px 0 var(--line)}
.cta h3{margin:0 0 6px; font-size:20px}
.cta p{margin:0 0 8px}
.btn{display:inline-block; background:var(--red); color:#fff; text-decoration:none; font-weight:800;
  padding:12px 22px; border:3px solid var(--line); border-radius:12px}
.btn.yellow{background:var(--yellow); color:var(--ink)}

/* Footer */
footer{border-top:3px solid var(--line); margin-top:34px; background:var(--card)}
footer .in{max-width:760px; margin:0 auto; padding:20px 16px; color:var(--muted); font-size:14px}
footer a{color:var(--muted)}
footer .links{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; font-weight:700}
.disclaimer{background:var(--soft); border:2px solid var(--line); border-radius:12px; padding:10px 14px; font-size:13px; color:#4a4a4a; margin:16px 0}