/* =========================================================
   QAFAR-AF DIGITAL CENTER
   Main stylesheet
   Easy to edit:
   - Colors: :root
   - Logo size: .qafaraf-logo-img
   - Mobile logo: @media max-width 991px
========================================================= */

:root{
  --navy:#03192b;
  --navy2:#062743;
  --blue:#07344f;
  --blue2:#0b4c6d;
  --yellow:#ffd700;
  --gold:#f4a900;
  --white:#ffffff;
  --muted:rgba(255,255,255,.76);
  --card:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.15);
  --dark:#041f31;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'Poppins',sans-serif;
  color:#fff;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,215,0,.18), transparent 25%),
    radial-gradient(circle at 85% 18%, rgba(255,255,255,.10), transparent 28%),
    linear-gradient(135deg,#041f31 0%, #07344f 48%, #0b4c6d 100%);
}

a{
  text-decoration:none;
}

.container{
  max-width:1180px;
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar{
  background:rgba(4,31,49,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:10px 0;
  box-shadow:0 8px 25px rgba(0,0,0,.22);
}

.navbar .container{
  align-items:center;
}

.brand-modern{
  display:flex;
  align-items:center;
  gap:10px;
}

.brand-logo-img{
  width:48px;
  height:48px;
  object-fit:contain;
  background:#fff;
  border-radius:10px;
  padding:3px;
}

.brand-name{
  display:block;
  color:var(--yellow);
  font-weight:900;
  font-size:1.15rem;
  line-height:1;
}

.brand-sub{
  display:block;
  color:#ffe680;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:5px;
}

.navbar-toggler{
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  border-radius:12px;
}

.navbar-toggler:focus{
  box-shadow:none;
}

.nav-link{
  color:#fff!important;
  font-weight:700;
  font-size:.9rem;
  padding:8px 9px!important;
}

.nav-link:hover,
.nav-link.active{
  color:var(--yellow)!important;
}

/* Qafar-Af Logo on the right */
.qafaraf-logo-corner{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:20px;
  min-width:220px;
}

.qafaraf-logo-img{
  height:95px;
  width:auto;
  max-width:260px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
  transition:all .3s ease;
}

.qafaraf-logo-img:hover{
  transform:scale(1.03);
}

/* =========================================================
   HERO
========================================================= */

.hero{
  position:relative;
  padding:74px 0 50px;
  overflow:hidden;
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.hero::before{
  width:500px;
  height:500px;
  right:-170px;
  top:70px;
  background:rgba(255,215,0,.10);
  filter:blur(6px);
}

.hero::after{
  width:340px;
  height:340px;
  left:-120px;
  bottom:-120px;
  background:rgba(255,255,255,.08);
  filter:blur(10px);
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:34px;
  align-items:center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:999px;
  color:#ffe680;
  background:rgba(255,215,0,.10);
  border:1px solid rgba(255,215,0,.34);
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
  font-size:.76rem;
  margin-bottom:20px;
}

.hero h1{
  color:#fff;
  font-size:clamp(2.8rem,7vw,5.9rem);
  line-height:.95;
  font-weight:950;
  text-transform:uppercase;
  margin:0 0 18px;
  text-shadow:8px 8px 0 rgba(0,0,0,.20);
}

.hero h1 span{
  color:var(--yellow);
}

.hero p{
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.85;
  max-width:700px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:26px;
}

.btn-main{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  border-radius:999px;
  padding:13px 24px;
  font-weight:900;
  transition:.25s ease;
  cursor:pointer;
}

.btn-yellow{
  background:var(--yellow);
  color:#062743;
}

.btn-glass{
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
}

.btn-main:hover{
  transform:translateY(-3px);
  color:#062743;
}

.hero-panel{
  border-radius:34px;
  padding:28px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.17);
  box-shadow:0 35px 90px rgba(0,0,0,.28);
  backdrop-filter:blur(18px);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.stat-card{
  padding:20px;
  border-radius:22px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}

.stat-card strong{
  display:block;
  color:var(--yellow);
  font-size:2rem;
  font-weight:950;
}

.stat-card span{
  color:rgba(255,255,255,.78);
  font-size:.9rem;
}

/* =========================================================
   COMMON SECTIONS
========================================================= */

.section{
  padding:76px 0;
}

.section-title{
  text-align:center;
  max-width:860px;
  margin:0 auto 42px;
}

.section-kicker{
  color:var(--yellow);
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
  font-size:.78rem;
}

.section-title h2{
  margin:14px 0;
  color:#fff;
  font-size:clamp(2rem,4vw,3.2rem);
  font-weight:950;
}

.section-title p{
  color:var(--muted);
  line-height:1.85;
}

/* =========================================================
   PILLARS
========================================================= */

.pillar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.pillar-card,
.scholar-card,
.roadmap-card,
.quiz-card,
.lesson-card,
.submit-info{
  background:var(--card);
  border:1px solid var(--border);
}

.pillar-card{
  padding:30px 24px;
  border-radius:28px;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
  transition:.3s ease;
}

.pillar-card:hover{
  transform:translateY(-8px);
  border-color:rgba(255,215,0,.52);
  background:rgba(255,215,0,.10);
}

.pillar-icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:var(--yellow);
  color:#062743;
  font-size:1.75rem;
  margin-bottom:20px;
}

.pillar-card h3{
  color:var(--yellow);
  font-weight:900;
  margin-bottom:12px;
}

.pillar-card p{
  color:var(--muted);
  line-height:1.75;
}

.pillar-card ul{
  margin:16px 0 0;
  padding-left:18px;
  color:rgba(255,255,255,.86);
}

.pillar-card li{
  margin-bottom:7px;
}

/* =========================================================
   WORD HUB
========================================================= */

.wordhub{
  background:
    radial-gradient(circle at top right, rgba(255,215,0,.10), transparent 30%),
    linear-gradient(180deg,rgba(3,25,43,.45),rgba(6,39,67,.65));
}

.hub-shell{
  padding:28px;
  border-radius:34px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
  box-shadow:0 30px 75px rgba(0,0,0,.22);
}

.search-row{
  display:grid;
  grid-template-columns:1fr 210px 150px;
  gap:12px;
  margin-bottom:22px;
}

.search-row input,
.search-row select,
.form-grid input,
.form-grid select,
.form-grid textarea{
  width:100%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  border-radius:16px;
  padding:14px 16px;
  outline:none;
}

.search-row select option,
.form-grid select option{
  color:#062743;
}

.search-row input::placeholder,
.form-grid input::placeholder,
.form-grid textarea::placeholder{
  color:rgba(255,255,255,.55);
}

.search-row button,
.form-grid button,
.quiz-btn{
  border:0;
  background:var(--yellow);
  color:#062743;
  border-radius:16px;
  padding:14px 18px;
  font-weight:900;
  cursor:pointer;
}

.word-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.word-card{
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);
  transition:.25s ease;
}

.word-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,215,0,.45);
}

.word-card .tag{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,215,0,.14);
  color:var(--yellow);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:12px;
}

.word-card h3{
  font-size:1.65rem;
  font-weight:950;
  color:#fff;
}

.word-card p{
  color:var(--muted);
  line-height:1.65;
  margin-bottom:8px;
}

.word-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.word-actions button{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
}

.empty-state{
  text-align:center;
  padding:30px;
  color:rgba(255,255,255,.7);
}

/* =========================================================
   WORD MODAL
========================================================= */

.word-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  z-index:99999;
}

.word-modal.show{
  display:flex;
}

.word-modal-box{
  width:min(720px,100%);
  max-height:88vh;
  overflow:auto;
  border-radius:28px;
  background:#fffaf0;
  color:#062743;
  padding:30px;
  box-shadow:0 35px 90px rgba(0,0,0,.38);
  position:relative;
}

.modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#062743;
  color:#fff;
  font-size:1.2rem;
}

.word-modal-box h3{
  color:#062743;
  font-weight:950;
  font-size:2.3rem;
  margin-bottom:10px;
}

.word-modal-box .modal-tag{
  display:inline-block;
  background:var(--yellow);
  color:#062743;
  font-weight:900;
  padding:7px 14px;
  border-radius:999px;
  margin-bottom:16px;
}

/* =========================================================
   CATEGORIES
========================================================= */

.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.category-card{
  padding:24px 16px;
  border-radius:24px;
  background:var(--card);
  border:1px solid var(--border);
  text-align:center;
  cursor:pointer;
  transition:.25s ease;
  color:#fff;
}

.category-card:hover{
  background:rgba(255,215,0,.12);
  transform:translateY(-5px);
}

.category-card i{
  color:var(--yellow);
  font-size:1.9rem;
  margin-bottom:13px;
}

.category-card strong{
  display:block;
  font-weight:900;
}

/* =========================================================
   SUBMIT FORM
========================================================= */

.submit-section{
  background:linear-gradient(180deg,rgba(6,39,67,.55),rgba(3,25,43,.82));
}

.submit-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
  align-items:start;
}

.submit-info{
  padding:32px;
  border-radius:30px;
}

.submit-info h2{
  font-weight:950;
  color:#fff;
  margin:12px 0;
}

.submit-info p{
  color:var(--muted);
  line-height:1.8;
}

.form-grid{
  display:grid;
  gap:12px;
  padding:24px;
  border-radius:30px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--border);
}

.form-grid textarea{
  min-height:120px;
  resize:vertical;
}

.form-message{
  display:none;
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,215,0,.16);
  color:#ffe680;
  font-weight:800;
}

/* =========================================================
   QUIZ / LEARNING
========================================================= */

.learning-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.quiz-card,
.lesson-card{
  padding:30px;
  border-radius:30px;
}

.quiz-options{
  display:grid;
  gap:10px;
  margin:18px 0;
}

.quiz-option{
  border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:16px;
  padding:13px;
  font-weight:800;
  text-align:left;
}

.quiz-option.correct{
  background:rgba(44,190,99,.25);
  border-color:rgba(44,190,99,.65);
}

.quiz-option.wrong{
  background:rgba(220,60,60,.25);
  border-color:rgba(220,60,60,.65);
}

.lesson-list{
  display:grid;
  gap:12px;
}

.lesson-item{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.lesson-item i{
  color:var(--yellow);
  font-size:1.35rem;
  margin-top:3px;
}

/* =========================================================
   SCHOLARS
========================================================= */

.scholar-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.scholar-card{
  padding:24px;
  border-radius:24px;
}

.scholar-card h3{
  color:var(--yellow);
  font-weight:900;
}

/* =========================================================
   ROADMAP
========================================================= */

.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.roadmap-card{
  padding:24px 18px;
  border-radius:24px;
}

.roadmap-card span{
  color:var(--yellow);
  font-weight:950;
}

.roadmap-card h3{
  color:#fff;
  font-weight:900;
  margin:10px 0;
}

.roadmap-card p{
  color:var(--muted);
  line-height:1.65;
  font-size:.92rem;
}

/* =========================================================
   FOOTER
========================================================= */

.footer-note{
  text-align:center;
  padding:32px 16px;
  color:rgba(255,255,255,.68);
  background:#03192b;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:991px){

  .navbar-collapse{
    margin-top:14px;
    background:rgba(3,35,55,.78);
    padding:16px;
    border-radius:20px;
  }

  .qafaraf-logo-corner{
    justify-content:center;
    margin:20px auto 10px;
    width:100%;
    min-width:0;
  }

  .qafaraf-logo-img{
    height:110px;
    max-width:320px;
  }

  .hero-grid,
  .submit-grid,
  .learning-grid{
    grid-template-columns:1fr;
  }

  .pillar-grid,
  .word-grid,
  .category-grid,
  .scholar-grid,
  .roadmap-grid{
    grid-template-columns:1fr;
  }

  .search-row{
    grid-template-columns:1fr;
  }

  .hero{
    padding:46px 0 34px;
  }

  .section{
    padding:58px 0;
  }
}

@media(max-width:576px){

  .hero h1{
    font-size:2.7rem;
  }

  .qafaraf-logo-img{
    height:95px;
    max-width:280px;
  }

  .hero-actions .btn-main{
    width:100%;
  }

  .hub-shell,
  .submit-info,
  .quiz-card,
  .lesson-card{
    padding:20px;
    border-radius:24px;
  }
}

/* =========================================================
   2026 COMPLETE QAFAR-AF MVP ADDITIONS
   Smart search, contribution engine, publications template
========================================================= */
.hero-text h1{line-height:1.03;}
.hero-actions button.btn-main{border:0;}
.ai-search-note{
  max-width:1050px;margin:0 auto 18px;padding:14px 18px;border:1px solid var(--border);
  background:rgba(255,255,255,.09);border-radius:18px;display:flex;gap:12px;align-items:center;color:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.14);
}
.ai-search-note i{color:var(--yellow);font-size:1.2rem;}
.search-row select{min-height:54px;}
.quick-chips{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 22px;}
.quick-chips button{
  border:1px solid rgba(255,215,0,.35);background:rgba(255,215,0,.10);color:#fff;
  padding:8px 13px;border-radius:999px;font-weight:700;font-size:.9rem;
}
.quick-chips button:hover{background:var(--yellow);color:#05233a;}
.pending-word{outline:2px solid rgba(255,215,0,.5);}
.pending-word .tag{background:var(--yellow)!important;color:#09243a!important;}
.small-note{font-size:.92rem;color:rgba(255,255,255,.75);}
.export-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.export-actions button,.modal-actions button{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;
  padding:10px 14px;border-radius:14px;font-weight:800;
}
.export-actions button:hover,.modal-actions button:hover{background:var(--yellow);color:#062743;}
.form-message.error{background:rgba(255,80,80,.16);border-color:rgba(255,100,100,.5);color:#fff;}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;}
#quizScore{background:rgba(255,255,255,.12);border:1px solid var(--border);border-radius:999px;padding:6px 11px;font-weight:800;font-size:.88rem;}
.quiz-feedback{min-height:28px;margin-top:10px;font-weight:800;color:var(--yellow);}
.publication-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.publication-card{
  padding:26px;border-radius:26px;background:rgba(255,255,255,.09);border:1px solid var(--border);
  box-shadow:0 18px 45px rgba(0,0,0,.16);min-height:260px;display:flex;flex-direction:column;align-items:flex-start;
}
.publication-card>i{font-size:2rem;color:var(--yellow);margin-bottom:15px;}
.publication-card span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65);font-weight:800;}
.publication-card h3{margin:10px 0;font-size:1.16rem;font-weight:900;}
.publication-card p{color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.65;}
.publication-card a{margin-top:auto;color:var(--yellow);font-weight:900;text-decoration:none;}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}

@media (max-width:991px){
  .publication-grid{grid-template-columns:repeat(2,1fr);} 
  .quiz-top{align-items:flex-start;flex-direction:column;}
}
@media (max-width:575px){
  .hero-actions{align-items:stretch;}
  .hero-actions .btn-main{width:100%;justify-content:center;}
  .publication-grid{grid-template-columns:1fr;}
  .export-actions button{width:100%;}
  .ai-search-note{margin-left:12px;margin-right:12px;}
}