/* =========================

   Brand + Logo Colors

   ========================= */

:root{

  --blue: #1e40af;            /* Build */

  --gold: #f59e0b;            /* Zone */

  --white: #ffffff;           /* Pro  */

  --text: #0f172a;



  --logo-size: 36px;

}



/* Reset */

*{margin:0;padding:0;box-sizing:border-box}

body{font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#fff}



/* Navbar */

header{width:100%;position:absolute;top:0;left:0;z-index:10;padding:18px 40px}

nav{display:flex;justify-content:space-between;align-items:center}



/* Logo (Pro أبيض — Build أزرق — Zone ذهبي لامع) */

.brand-logo{font-weight:900;font-size:var(--logo-size);letter-spacing:.3px;user-select:none;line-height:1;display:flex;gap:.15em}

.brand-logo .pro{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55)}

.brand-logo .build{color:var(--blue);text-shadow:0 2px 6px rgba(0,0,0,.2),0 0 0 #000}

.brand-logo .zone{

  background: linear-gradient(135deg,#ffe29a,#f7b733 35%,#f59e0b 60%,#d97706 85%);

  -webkit-background-clip:text; background-clip:text; color:transparent;

  text-shadow:0 1px 8px rgba(0,0,0,.25);

}



/* Nav links */

nav ul{display:flex;list-style:none;gap:20px}

nav a{color:#fff;text-decoration:none;font-weight:700}

.pro-btn{background:#f59e0b;color:#111 !important;padding:8px 16px;border-radius:8px}



/* Hero */

.hero{

  min-height:100vh;

  background:url('images/hero-bg.jpg') center/cover no-repeat;

  position:relative;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 20px;

}

.hero::before{

  content:"";position:absolute;inset:0;

  /* أوفرلاي خفيف جداً للحفاظ على وضوح الصورة */

  background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,.15), rgba(0,0,0,.35));

  pointer-events:none;

}

.overlay{position:relative;z-index:1;max-width:980px}

.hero h1{

  font-size: clamp(32px, 5.2vw, 56px);

  margin-bottom:14px;line-height:1.1;

  color:#fff;

  text-shadow: 0 3px 16px rgba(0,0,0,.55), 0 0 1px rgba(255,255,255,.6); /* أبيض ناصع مع حواف */

}

.hero p{

  font-size: clamp(15px, 1.5vw, 18px);

  margin-bottom:22px;opacity:.98;color:#eef2ff;

  text-shadow:0 2px 12px rgba(0,0,0,.45);

}



.buttons{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}

.btn{padding:12px 18px;border-radius:10px;border:0;font-weight:800;cursor:pointer}

.primary{background:#2563eb;color:#fff}

.secondary{background:transparent;color:#fff;border:2px solid #fff}

.dark{background:#0b1220;color:#fff}



.job-id{display:flex;justify-content:center;gap:10px;margin-top:8px}

.job-id input{padding:10px;border-radius:10px;border:none;width:240px}

.job-id button{padding:10px 14px;border:none;background:#2563eb;color:#fff;border-radius:10px;font-weight:800}



/* Links row under hero */

.links-row{padding:28px 16px;text-align:center}

.links-row a{color:#0b3c7d;font-weight:700;text-decoration:none;margin:0 10px}



/* ===== Modal & grid ===== */

.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:9999}

.sheet{background:#0e132b;border:1px solid rgba(255,255,255,.12);border-radius:18px;width:min(880px,100%);max-height:92vh;display:flex;flex-direction:column;overflow:hidden}

.sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px;color:#E9ECF5;border-bottom:1px solid rgba(255,255,255,.08)}

.btn.xsm{padding:8px 12px;border-radius:8px}

.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.25);color:#E9ECF5}



.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:14px 16px}

@media (max-width:820px){.grid{grid-template-columns:repeat(3,1fr)}}

@media (max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}}



.icon{background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:18px;text-align:center;color:#E9ECF5;cursor:pointer;transition:.2s}

.icon:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.25)}

.icon .emoji{font-size:28px;display:block;margin-bottom:6px}

.icon span{font-size:12px;color:#A7B0C4}



.hidden{display:none}

.cat-title{color:#E9ECF5;padding:0 16px;margin-top:4px}



.upload-wrap{display:flex;align-items:center;gap:12px;padding:0 16px;margin-top:8px;flex-wrap:wrap}

.upload-wrap input[type=file]{display:none}

.btn.outline{background:transparent;border:1px dashed #7aa2ff;color:#dbe7ff}

.hint{color:#aab3c9;font-size:.9rem}



.card{background:#121735;border:1px solid rgba(255,255,255,.12);border-radius:16px;margin:12px 16px;padding:14px;color:#E9ECF5}

.form-wrap h4{margin-bottom:6px}

.sep{opacity:.25;margin:12px 0;border:none;border-top:1px solid rgba(255,255,255,.15)}

label{display:block;margin:.5rem 0 .25rem;font-weight:700}

input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #334155;background:#0b1220;color:#E9ECF5}

.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

@media(max-width:620px){.row2{grid-template-columns:1fr}}



.sticky-footer{position:sticky;bottom:0;display:flex;gap:10px;align-items:center;justify-content:flex-start;padding:12px 16px;background:linear-gradient(180deg,rgba(14,19,43,0),rgba(14,19,43,.9) 35%,#0e132b 70%);border-top:1px solid rgba(255,255,255,.12)}

.ok{color:#10b981}.err{color:#ef4444}



/* Responsive tweaks */

@media (max-width: 780px){

  header{padding:14px 16px}

  nav ul a{font-size:15px}

  :root{--logo-size: 26px}

}

@media (max-width: 520px){

  :root{--logo-size: 22px}

  nav ul{gap:12px}

  nav a{font-size:14px}

  .pro-btn{font-size:13px;padding:6px 10px}

}