/* LngGo — front-page.php  (front-page.php)
   كان <style> داخل القالب؛ يُحمَّل في هذه الصفحة وحدها بعد theme.css وheader.css (ls_page_css). */
/* Amita font loaded globally in header.php (async) — @import removed */
/* الألوان من theme.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Almarai','Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text-main);direction:rtl;}

/* ─── HERO ─────────────────────────────── */
.hp-hero{position:relative;width:100%;height:100vh;min-height:560px;overflow:hidden;background:#0a0515;}
.hp-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;}
.hp-hero-overlay{position:absolute;inset:0;background:linear-gradient(170deg,rgba(74,20,140,.3) 0%,rgba(5,2,20,.65) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;}
.hp-hero-sub{font-family:'Amita',sans-serif;font-size:clamp(1rem,2.8vw,1.3rem);color:rgba(255,255,255,.85);letter-spacing:3px;margin-bottom:10px;font-weight:700;}
/* العربيّة بلا letter-spacing: WebKit (كلّ متصفّحات iPhone وSafari) يفكّ اتّصال الحروف به */
.hp-hero-sub-ar{letter-spacing:0;}
.hp-hero-title{font-size:clamp(2rem,6vw,3.6rem);font-weight:900;color:var(--gold);letter-spacing:0;text-shadow:0 2px 20px rgba(0,0,0,.5);line-height:1.2;margin-bottom:12px;}
/* Shimmer — لمعان معدني يمر عبر العنوان الذهبي */
@supports (background-clip:text) or (-webkit-background-clip:text){
  .hp-hero-title{
    background:linear-gradient(110deg,#ffd700 0%,#ffd700 38%,#fff6c8 50%,#ffd700 62%,#ffd700 100%);
    background-size:220% auto;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;text-shadow:none;
    filter:drop-shadow(0 2px 14px rgba(0,0,0,.45));
    animation:hp-shimmer 4.5s linear infinite;
  }
}
@keyframes hp-shimmer{to{background-position:-220% center;}}
@media (prefers-reduced-motion:reduce){.hp-hero-title{animation:none;}}
.hp-hero-tagline{font-size:clamp(1rem,2.5vw,1.3rem);color:rgba(255,255,255,.85);margin-bottom:36px;max-width:600px;}
.hp-hero-btns{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;}
.hp-btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--primary-light);color:#fff;font-weight:900;font-size:1.05rem;padding:15px 38px;border-radius:6px;text-decoration:none;box-shadow:0 6px 24px rgba(74,20,140,.5);transition:transform .2s,background .2s;animation:hp-glow 2.4s ease-in-out infinite;}
.hp-btn-primary:hover{color:#fff;transform:translateY(-3px);background:var(--primary);animation-play-state:paused;}
/* Glow — نبض ضوئي يشد العين لزر البداية */
@keyframes hp-glow{
  0%,100%{box-shadow:0 6px 24px rgba(74,20,140,.5),0 0 0 0 rgba(124,67,189,.55);}
  50%    {box-shadow:0 6px 24px rgba(74,20,140,.5),0 0 0 14px rgba(124,67,189,0);}
}
@media (prefers-reduced-motion:reduce){.hp-btn-primary{animation:none;}}
.hp-btn-secondary{display:inline-flex;align-items:center;gap:8px;background:rgba(124,67,189,.55);backdrop-filter:blur(6px);color:#fff;font-weight:900;font-size:1.05rem;padding:15px 38px;border-radius:6px;text-decoration:none;border:2px solid rgba(255,255,255,.3);transition:transform .2s,background .2s;}
.hp-btn-secondary:hover{color:#fff;transform:translateY(-3px);background:var(--primary-light);}

/* ─── BROWSE DIVIDER ────────────────────── */
.hp-browse{display:flex;align-items:center;justify-content:center;gap:16px;max-width:820px;margin:52px auto 20px;padding:0 24px;}
.hp-browse::before,.hp-browse::after{content:'';flex:1;height:1.5px;background:var(--border);}
.hp-browse-text{font-size:1.15rem;font-weight:900;color:var(--primary);white-space:nowrap;}

/* ─── ABOUT ─────────────────────────────── */
.hp-about{max-width:820px;margin:0 auto 52px;padding:0 24px;}
.hp-about-text p{font-size:1.05rem;line-height:2.1;color:var(--text-muted);text-align:center;}

/* ─── CARDS — Bento Grid ─────────────────── */
.hp-cards{
  max-width:1080px;margin:0 auto;padding:0 24px 80px;
  display:grid;gap:22px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(150px,auto);
  grid-template-areas:
    "notes notes lect lect"
    "notes notes quiz apps"
    "coun  coun  tg   tg";
  perspective:1400px;
}
.hp-card--notes   {grid-area:notes;}
.hp-card--lectures{grid-area:lect;}
.hp-card--quiz    {grid-area:quiz;}
.hp-card--apps    {grid-area:apps;}
.hp-card--councils{grid-area:coun;}
.hp-card--telegram{grid-area:tg;}

.hp-card{display:flex;flex-direction:column;text-decoration:none;border-radius:var(--radius-lg);overflow:hidden;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;position:relative;transform-style:preserve-3d;}
.hp-card::before{content:'';position:absolute;top:0;right:0;left:0;height:4px;background:linear-gradient(90deg,var(--primary),var(--primary-light));z-index:2;}

/* 3D Tilt — كل بطاقة تميل باتجاه مختلف حسب موقعها */
@media (hover:hover){
  .hp-card:hover{box-shadow:var(--shadow-md);}
  .hp-card--notes:hover   {transform:translateY(-8px) rotateX(3deg) rotateY(3deg);}
  .hp-card--lectures:hover{transform:translateY(-8px) rotateX(4deg) rotateY(-3deg);}
  .hp-card--quiz:hover    {transform:translateY(-8px) rotateX(4deg) rotateY(4deg);}
  .hp-card--apps:hover    {transform:translateY(-8px) rotateX(4deg) rotateY(-4deg);}
  .hp-card--councils:hover{transform:translateY(-8px) rotateX(-3deg) rotateY(3deg);}
  .hp-card--telegram:hover{transform:translateY(-8px) rotateX(-3deg) rotateY(-3deg);}
}

.hp-card-img{width:100%;height:180px;object-fit:cover;display:block;}
/* البطاقة الكبيرة — الصورة تملأ المساحة المتاحة */
.hp-card--notes .hp-card-img{height:100%;flex:1;min-height:260px;}
.hp-card--quiz .hp-card-img,
.hp-card--apps .hp-card-img{height:130px;}

.hp-card-body{padding:18px 18px 20px;text-align:center;}
.hp-card--notes .hp-card-body{padding:22px 20px 24px;}
.hp-card--notes .hp-card-title{font-size:1.25rem;}
.hp-card-title{font-size:1rem;font-weight:900;color:var(--text-main);margin-bottom:12px;}
.hp-card-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-weight:800;font-size:.88rem;padding:9px 24px;border-radius:50px;text-decoration:none;transition:transform .2s;}
.hp-card-btn:hover{color:#fff;transform:translateY(-2px);}

/* Telegram card - special green */
.hp-card.telegram .hp-card-btn{background:linear-gradient(135deg,#0088cc,#229ED9);}

/* ─── زرّ LnggoStep تحت البطاقات (2.11.0) ─── */
/* position+z-index: .hp-cards فيها perspective فتصير طبقة تغطّي ما يتداخل مع حشوتها السفلى */
.hp-step-cta{position:relative;z-index:1;max-width:1080px;margin:-36px auto 72px;padding:0 24px;display:flex;justify-content:center;}
.hp-step-cta a{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:860px;
  background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-weight:900;font-size:1.15rem;
  padding:18px 28px;border-radius:50px;text-decoration:none;box-shadow:0 8px 28px rgba(74,20,140,.4);
  transition:transform .2s,box-shadow .2s;}
.hp-step-cta a:hover{color:#fff;transform:translateY(-3px);box-shadow:0 12px 34px rgba(74,20,140,.5);}
.hp-step-cta svg{flex-shrink:0;}

@media(max-width:900px){
  .hp-cards{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "notes notes"
      "lect  quiz"
      "apps  coun"
      "tg    tg";
  }
  .hp-card--notes .hp-card-img{min-height:200px;}
}
@media(max-width:768px){
  .hp-hero{height:85vh;}
}
@media(max-width:560px){
  .hp-cards{
    grid-template-columns:1fr;
    grid-template-areas:"notes" "lect" "quiz" "apps" "coun" "tg";
  }
  .hp-card--notes .hp-card-img,
  .hp-card--quiz .hp-card-img,
  .hp-card--apps .hp-card-img{height:180px;min-height:0;flex:none;}
  .hp-hero-btns{flex-direction:column;align-items:center;}
}