/* ============================================================
   site.css — shared design for landing + static pages
   Navy hero, light sections, blue buttons, yellow highlights.
   ============================================================ */
@font-face{
  font-family:"SiteFont";
  src:url("NizarbeINSportBlack.ttf") format("truetype");
  font-weight:normal;font-style:normal;font-display:swap;
}
:root{
  --navy:#0b2f72;
  --navy2:#08224f;
  --blue:#3d8bfd;
  --blue2:#2f74e0;
  --sky:#eaf2ff;
  --yellow:#ffd666;
  --ink:#14233f;
  --muted:#5b6b88;
  --bg:#f6f9fe;
  --card:#fff;
  --line:#e3eaf6;
  --body:#33435f;--heading:#0b2f72;--chip:#f3f7fe;--chip2:#e8f1ff;--line2:#b9d1f7;--soft:#f8fbff;--bar:#dfe6f3;
  --font:"SiteFont","Cairo","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.65;overflow-x:hidden;
}
img{max-width:100%;}
a{color:var(--blue2);}
.container{width:min(1120px,100% - 32px);margin-inline:auto;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:700;line-height:1;
  padding:11px 20px;border-radius:10px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(61,139,253,.35);}
.btn-blue:hover{background:var(--blue2);}
.btn-yellow{background:var(--yellow);color:#4a3600;}
.btn-yellow:hover{background:#ffcb45;}
.btn-outline{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35);}
.btn-outline:hover{background:rgba(255,255,255,.18);}
.btn img{width:20px;height:20px;border-radius:50%;object-fit:cover;}
.btn-lg{padding:13px 22px;font-size:15px;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--navy);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.08);}
.site-header .container{display:flex;align-items:center;gap:14px;height:60px;}
.logo-link{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:800;font-size:16px;letter-spacing:.3px;flex:none;}
.logo-link img{width:34px;height:34px;border-radius:9px;object-fit:contain;background:#fff;padding:2px;}
.nav{display:flex;gap:2px;margin-inline-start:auto;}
.nav a{color:#d3e0fa;text-decoration:none;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:600;}
.nav a:hover,.nav a.on{background:rgba(255,255,255,.12);color:#fff;}
.hdr-actions{display:flex;align-items:center;gap:10px;}
.hdr-lang{
  -webkit-appearance:none;appearance:none;font-family:inherit;font-size:13px;font-weight:700;color:#fff;
  height:36px;padding:0 28px 0 12px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background-color:rgba(255,255,255,.08);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23d3e0fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
}
[dir="rtl"] .hdr-lang{padding:0 12px 0 28px;background-position:left 9px center;}
.hdr-lang option{background:#fff;color:#14233f;}
.site-header .btn{padding:0 16px;height:36px;}
@media (max-width:760px){
  .nav{display:none;}
  .hdr-actions{margin-inline-start:auto;}
  .logo-link span{font-size:15px;}
}
@media (max-width:420px){
  .logo-link span{display:none;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  padding:clamp(36px,6vw,78px) 0 clamp(44px,7vw,92px);
  background:
    radial-gradient(800px 380px at 85% 0%, rgba(61,139,253,.38), transparent 62%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0) 0 0/22px 22px,
    linear-gradient(180deg,var(--navy),var(--navy2));
}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;}
.hero h1{font-size:clamp(29px,4.8vw,50px);line-height:1.18;margin:0 0 14px;font-weight:800;letter-spacing:-.4px;}
.hero p.lead{font-size:clamp(15px,2vw,17px);color:#cddbf7;margin:0 0 22px;max-width:520px;}
.hl{background:linear-gradient(var(--yellow),var(--yellow)) 0 94%/100% 5px no-repeat;padding-bottom:3px;}
[dir="rtl"] .hl{background-position:100% 94%;}
.hero-cta-label{font-size:13px;color:#a9bde6;margin:0 0 10px;font-weight:600;}
.lang-row{display:flex;flex-wrap:wrap;gap:10px;}
.hero-art{display:flex;justify-content:center;}
.hero-art svg{width:100%;max-width:470px;height:auto;filter:drop-shadow(0 22px 40px rgba(0,0,0,.35));}
@media (max-width:860px){
  .hero .container{grid-template-columns:1fr;text-align:center;}
  .hero p.lead{margin-inline:auto;}
  .lang-row{justify-content:center;}
  .hero-art{order:-1;}
  .hero-art svg{max-width:300px;}
}

/* ---------- Sections ---------- */
.section{padding:clamp(40px,6vw,76px) 0;}
.section.alt{background:var(--sky);}
.sec-head{text-align:center;max-width:620px;margin:0 auto clamp(24px,4vw,40px);}
.sec-head h2{font-size:clamp(24px,3.6vw,34px);margin:0 0 8px;font-weight:800;letter-spacing:-.3px;}
.sec-head p{margin:0;color:var(--muted);font-size:15px;}

.features{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.feature{
  background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px;
  box-shadow:0 1px 3px rgba(20,35,63,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.feature:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(20,35,63,.09);border-color:#cfe0fb;}
.f-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--sky);color:var(--blue2);
}
.f-ico svg{width:23px;height:23px;}
.feature h3{margin:0 0 6px;font-size:16.5px;}
.feature p{margin:0;color:var(--muted);font-size:14px;}
@media (max-width:980px){.features{grid-template-columns:repeat(2,1fr);}}
@media (max-width:520px){.features{grid-template-columns:1fr;}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s;}
.step{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 20px 20px;}
.step .num{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:12px;
  background:var(--blue);color:#fff;font-weight:800;font-size:15px;
}
.step h3{margin:0 0 6px;font-size:16.5px;}
.step p{margin:0;color:var(--muted);font-size:14px;}
@media (max-width:760px){.steps{grid-template-columns:1fr;}}

.templates{display:flex;justify-content:center;gap:clamp(18px,4vw,44px);flex-wrap:wrap;}
.tpl{text-align:center;}
.tpl .paper{
  width:clamp(104px,14vw,148px);aspect-ratio:210/297;background:#fff;border-radius:10px;
  box-shadow:0 14px 34px rgba(20,35,63,.14);border:1px solid var(--line);overflow:hidden;
  display:flex;transition:transform .2s ease;
}
.tpl:hover .paper{transform:translateY(-5px) rotate(-1deg);}
.tpl b{display:block;margin-top:12px;font-size:15px;}
.p-lines{padding:12px 11px;flex:1;display:flex;flex-direction:column;gap:6px;}
.p-lines i{display:block;height:5px;border-radius:3px;background:var(--bar);}
.p-lines i.h{height:9px;width:55%;background:#14233f;margin-bottom:4px;}
.p-lines i.s{width:35%;background:var(--blue);margin-top:6px;}
.p-side{width:34%;background:var(--navy);padding:12px 8px;display:flex;flex-direction:column;gap:6px;align-items:center;}
.p-side .av{width:30px;height:30px;border-radius:50%;background:#fff;opacity:.9;margin-bottom:4px;}
.p-side i{display:block;height:4px;width:100%;border-radius:2px;background:rgba(255,255,255,.4);}

/* ---------- CTA band ---------- */
.cta{
  background:
    radial-gradient(700px 300px at 15% 0%, rgba(61,139,253,.35), transparent 60%),
    linear-gradient(180deg,var(--navy),var(--navy2));
  color:#fff;text-align:center;padding:clamp(40px,6vw,70px) 0;
}
.cta h2{margin:0 0 8px;font-size:clamp(24px,3.6vw,34px);font-weight:800;}
.cta p{margin:0 auto 22px;color:#cddbf7;max-width:520px;}
.cta .lang-row{justify-content:center;}

/* ---------- Static pages (about / faq / privacy / terms) ---------- */
.page-band{background:linear-gradient(180deg,var(--navy),var(--navy2));height:110px;}
.doc{
  position:relative;width:min(860px,100% - 32px);margin:-62px auto 40px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 44px rgba(20,35,63,.1);padding:clamp(20px,4vw,38px);line-height:1.85;
}
.doc h1{font-size:clamp(25px,4vw,32px);margin:0 0 4px;font-weight:800;}
.doc .upd{color:var(--muted);font-size:13px;margin-bottom:20px;}
.doc h2{font-size:19px;margin:26px 0 8px;color:var(--heading);}
.doc p{color:var(--body);margin:0 0 12px;}
.doc a{color:var(--blue2);}
.lang-box{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.lang-box button{
  font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  padding:8px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--chip);color:var(--ink);transition:background .15s,border-color .15s;
}
.lang-box button:hover{border-color:var(--line2);background:var(--chip2);}
.lang-box button.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.about-section,.faq-section,.policy-section,.terms-section{display:none;}
.about-section.active,.faq-section.active,.policy-section.active,.terms-section.active{display:block;}
.rtl{direction:rtl;text-align:right;}
.faq-item{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px;}
.faq-item h2{margin:0 0 6px;font-size:16.5px;color:var(--ink);}
.faq-item p{margin:0;}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  width:36px;height:36px;flex:none;display:inline-grid;place-items:center;cursor:pointer;padding:0;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);border-radius:9px;
  transition:background .15s ease,border-color .15s ease;
}
.theme-toggle:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);}
.theme-toggle svg{width:18px;height:18px;}
html[data-theme="dark"] .t-moon{display:none;}
html:not([data-theme="dark"]) .t-sun{display:none;}

/* ---------- Dark mode ---------- */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1020;--card:#111a30;--sky:#0d1830;--ink:#e8eef9;--muted:#9db0d0;
  --line:rgba(255,255,255,.1);--body:#c4d0e8;--heading:#8cb8ff;
  --chip:rgba(255,255,255,.06);--chip2:rgba(255,255,255,.12);--line2:rgba(255,255,255,.25);
  --soft:rgba(255,255,255,.04);--bar:rgba(255,255,255,.14);
  --navy:#081a40;--navy2:#060f27;
}
html[data-theme="dark"] .doc a,html[data-theme="dark"] .doc p a{color:#8cb8ff;}
html[data-theme="dark"] .f-ico{background:rgba(61,139,253,.16);color:#8cb8ff;}
html[data-theme="dark"] .feature,html[data-theme="dark"] .step{box-shadow:none;}
html[data-theme="dark"] .feature:hover{border-color:rgba(140,184,255,.4);box-shadow:0 14px 30px rgba(0,0,0,.35);}
html[data-theme="dark"] .doc{box-shadow:0 18px 44px rgba(0,0,0,.45);}
html[data-theme="dark"] .tpl .paper{box-shadow:0 14px 34px rgba(0,0,0,.5);}

/* ============================================================
   Custom scrollbar (page + inner scroll areas), light & dark
   ============================================================ */
:root{--sb-track:#e9f0fb;--sb-thumb:#a9c2ea;--sb-thumb-hover:#3d8bfd;}
html[data-theme="dark"]{--sb-track:#0a1020;--sb-thumb:#2c3d66;--sb-thumb-hover:#4a9bff;}
html,*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent;}
html{scrollbar-color:var(--sb-thumb) var(--sb-track);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--sb-track);}
::-webkit-scrollbar-thumb{
  background:var(--sb-thumb);border-radius:999px;
  border:3px solid var(--sb-track);background-clip:padding-box;
  transition:background .2s ease;
}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:padding-box;}
::-webkit-scrollbar-thumb:active{background:#2f74e0;background-clip:padding-box;}
::-webkit-scrollbar-corner{background:transparent;}
/* inner panels: slimmer, transparent track */
.form-pane::-webkit-scrollbar,.preview-scroll::-webkit-scrollbar{width:9px;height:9px;}
.form-pane::-webkit-scrollbar-track,.preview-scroll::-webkit-scrollbar-track{background:transparent;}
.form-pane::-webkit-scrollbar-thumb,.preview-scroll::-webkit-scrollbar-thumb{border:2px solid transparent;}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--sb-thumb);background-clip:padding-box;border-color:var(--sb-track);}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hover);background-clip:padding-box;}
html[data-theme="dark"] .form-pane::-webkit-scrollbar-thumb,html[data-theme="dark"] .preview-scroll::-webkit-scrollbar-thumb{border-color:transparent;}
html[data-theme="dark"] *{scrollbar-color:var(--sb-thumb) transparent;}

/* mini template mockups (landing) */
.templates{gap:clamp(14px,2.4vw,30px);}
.p-lines.c i{margin-inline:auto;}
.p-lines.c i.h{margin-inline:auto;}
.paper.v-cre,.paper.v-cmp,.paper.v-ele{flex-direction:column;}
.v-cre .p-banner{height:22%;background:var(--blue);}
.v-cre .p-cols,.v-ele .p-cols{display:flex;flex:1;}
.v-cre .p-lines{flex:1;}
.v-cre .p-sidebg{width:34%;background:#dbe8fd;padding:10px 7px;display:flex;flex-direction:column;gap:6px;}
.v-cre .p-sidebg i{display:block;height:4px;border-radius:2px;background:#9db9e8;}
.p-row{display:flex;gap:6px;align-items:center;}
.p-row i.s{width:22%;margin-top:0;flex:none;}
.p-row i{flex:1;}
.v-ele .p-ehead{padding:10px 10px 6px;border-bottom:3px double var(--blue);display:flex;flex-direction:column;gap:5px;align-items:center;}
.v-ele .p-ehead i{display:block;height:4px;border-radius:2px;background:#cfd8ea;width:70%;}
.v-ele .p-ehead i.h{height:7px;width:55%;background:#14233f;}
.v-ele .p-lines{flex:1;}
.v-ele .p-lines.edge{flex:0 0 32%;border-inline-start:1px solid var(--line);}