/* AL6ABE3 Home – Dark Tech Luxury + Printed Animation (PRO v3) */

/* ===== Global vars for HOME (so header/menu can use them) ===== */
body.home{
  --bg:#070a0d;
  --bg2:#04060a;
  --text:#eaf2f6;

  /*
   * Increase muted text opacity on the home page to improve readability
   * against the dark hero and section backgrounds. The previous value of
   * 0.72 made secondary text appear too faint; bumping it to 0.82 gives
   * better contrast while staying within the design's aesthetic.
   */
  --muted:rgba(234,242,246,.82);

  --cyan:#00e5ff;
  --cyan2:#00a8c0;
  --ring:rgba(0,229,255,.18);

  --panel: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.12);
  --stroke2: rgba(0,229,255,.20);

  --shadow: 0 24px 70px rgba(0,0,0,.60);
  --shadow2: 0 18px 55px rgba(0,0,0,.55);

  /* Typography: good for EN/HE/AR */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial,
    "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans Arabic",
    "Rubik", "Heebo", "Cairo", sans-serif;
}

/* ===== Base / reset only for AL6 home ===== */
.al6-home{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  color: var(--text);
}

/* Reset ONLY inside our custom home section (not the whole theme header) */
.al6-home .entry-content,
.al6-home .wp-block-group__inner-container{
  padding:0 !important;
  margin:0 !important;
}
.al6-home .entry-content > *{ margin:0; }

/* Hide default WP page title ONLY on homepage */
body.home .wp-block-post-title,
body.home .entry-title,
body.home h1.entry-title{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* =========================
   Header / Menu – AL6ABE3 (PRO)
   ========================= */

/* catch both common header placements */
body.home header.wp-block-template-part,
body.home .wp-site-blocks > header.wp-block-template-part{
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--stroke) !important;
  padding: 10px 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

/* keep header inner blocks aligned and not white */
body.home header.wp-block-template-part .wp-block-group,
body.home header.wp-block-template-part .wp-block-columns,
body.home header.wp-block-template-part .wp-block-column{
  background: transparent !important;
}

/* nice center width like your hero */
body.home header.wp-block-template-part .wp-block-group.alignwide,
body.home header.wp-block-template-part .wp-block-group.alignfull{
  width: min(1160px, calc(100% - 44px)) !important;
  margin: 0 auto !important;
}

/* glow swirl */
body.home header.wp-block-template-part::before{
  content:"";
  position:absolute;
  top:-120%; left:-10%; right:-10%; bottom:-10%;
  background:
    radial-gradient(320px 200px at 10% 120%, rgba(0,229,255,.18), transparent 60%),
    radial-gradient(380px 220px at 86% 20%, rgba(0,229,255,.14), transparent 62%),
    radial-gradient(420px 240px at 50% -30%, rgba(0,229,255,.12), transparent 64%);
  filter: blur(48px);
  opacity:.55;
  animation: al6HeaderSwirl 28s ease-in-out infinite;
  pointer-events:none;
}
@keyframes al6HeaderSwirl{
  0%{ transform: translateX(0) translateY(0); }
  50%{ transform: translateX(-30px) translateY(18px); }
  100%{ transform: translateX(0) translateY(0); }
}

/* site title */
body.home header.wp-block-template-part .wp-block-site-title a{
  color: var(--cyan) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  transition: background .2s ease, color .2s ease !important;
}
body.home header.wp-block-template-part .wp-block-site-title a:hover{
  color: var(--text) !important;
  background: rgba(255,255,255,.08) !important;
}

/* nav links */
body.home header.wp-block-template-part nav.wp-block-navigation a.wp-block-navigation-item__content{
  color: var(--text) !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: background .24s ease, color .24s ease, transform .2s ease !important;
}
body.home header.wp-block-template-part nav.wp-block-navigation a.wp-block-navigation-item__content:hover,
body.home header.wp-block-template-part nav.wp-block-navigation a.wp-block-navigation-item__content:focus{
  background: rgba(255,255,255,.08) !important;
  color: var(--cyan) !important;
  transform: translateY(-1px) !important;
}

/* desktop: force open menu + hide burger */
@media (min-width: 900px){
  body.home header.wp-block-template-part .wp-block-navigation__responsive-container-open{
    display:none !important;
  }
  body.home header.wp-block-template-part .wp-block-navigation__responsive-container{
    position: static !important;
    inset: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.home header.wp-block-template-part .wp-block-navigation__container{
    display:flex !important;
    align-items:center !important;
    gap: 18px !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
  }
}

/* Hide the entire default footer (the block template part). */
footer.wp-block-template-part{
  display: none !important;
}

/* ===== HERO ===== */
.al6-hero{
  width: 100%;
  position:relative;
  padding: clamp(64px, 7vw, 110px) 0;
  overflow:hidden;

  background:
    radial-gradient(1100px 650px at 18% 12%, rgba(0,229,255,.16), transparent 58%),
    radial-gradient(900px 520px at 82% 18%, rgba(0,229,255,.10), transparent 62%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 55%, var(--bg2) 100%);
}

/* Vignette + tech glow */
.al6-bg{
  position:absolute; inset:-2px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.56), rgba(0,0,0,.88)),
    radial-gradient(circle at 30% 18%, rgba(0,229,255,.16), transparent 58%),
    radial-gradient(circle at 74% 42%, rgba(0,229,255,.10), transparent 62%);
  pointer-events:none;
}

/* Subtle grid drift */
.al6-hero::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    linear-gradient(to right, rgba(0,229,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,229,255,.06) 1px, transparent 1px);
  background-size: 66px 66px;
  opacity:.18;
  mask-image: radial-gradient(circle at 25% 22%, rgba(0,0,0,1) 0%, rgba(0,0,0,.32) 58%, transparent 82%);
  pointer-events:none;
  animation: al6Grid 18s linear infinite;
}
@keyframes al6Grid{
  0%{ background-position: 0 0, 0 0; }
  100%{ background-position: 240px 0, 0 240px; }
}

/* Floating orbs */
.al6-hero::after{
  content:"";
  position:absolute; inset:-30%;
  background:
    radial-gradient(circle at 22% 30%, rgba(0,229,255,.16), transparent 36%),
    radial-gradient(circle at 78% 32%, rgba(0,229,255,.12), transparent 40%),
    radial-gradient(circle at 56% 76%, rgba(0,229,255,.10), transparent 44%);
  filter: blur(10px);
  pointer-events:none;
  opacity:.72;
  animation: al6Orbs 11s ease-in-out infinite alternate;
}
@keyframes al6Orbs{
  from{ transform: translate3d(0,0,0) scale(1); opacity:.72; }
  to{ transform: translate3d(0,-18px,0) scale(1.03); opacity:1; }
}

.al6-wrap{
  width:min(1160px, calc(100% - 44px));
  margin:0 auto;
  position:relative;
  z-index:2;
}

.al6-hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(18px, 3vw, 40px);
  align-items:center;
}

.al6-eyebrow{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(0,229,255,.78);
  margin-bottom:12px;
}

/* ===== Printed title ===== */
.al6-title{
  font-size: clamp(44px, 6vw, 80px);
  line-height: .95;
  margin:0 0 14px;
  font-weight:850;
  letter-spacing: -0.02em;
  text-shadow: 0 0 36px rgba(0,229,255,.12);
}
.al6-dot{ color:var(--cyan); }

.al6-title .al6-letter,
.al6-title .al6-word{
  display:inline-block;
  opacity:0;
  transform: translateY(10px) scale(.985);
  filter: blur(1px);
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
  will-change: transform, opacity, filter;
}
.al6-title.is-printed .al6-letter,
.al6-title.is-printed .al6-word{
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2,.8,.2,1),
    filter .55s ease;
}

.al6-sub{
  margin:0 0 18px;
  color:var(--muted);
  max-width: 54ch;
  font-size: 16px;
  line-height:1.7;
}

.al6-badges{ display:flex; gap:10px; flex-wrap:wrap; margin: 18px 0 22px; }
.al6-badge{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(234,242,246,.80);
}

/* ===== Buttons ===== */
.al6-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.al6-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 14px;
  font-weight:750;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  backface-visibility:hidden;
}
.al6-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(0,229,255,.35);
  box-shadow: 0 14px 36px rgba(0,0,0,.46);
}
.al6-btn:active{ transform: translateY(0); }

.al6-btn-primary{
  background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan2) 100%);
  color:#001417;
  border:none;
  box-shadow:
    0 0 0 6px var(--ring),
    0 18px 46px rgba(0,0,0,.58);
}
.al6-btn-ghost{ background: rgba(255,255,255,.04); }
.al6-btn-disabled{ opacity:.55; cursor:not-allowed; }

/* ===== Preview card (lux glass) ===== */
.al6-hero-card{
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
  backdrop-filter: blur(8px);
}

/* Corner accent (premium) */
.al6-hero-card::after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width: 160px; height:160px;
  background: radial-gradient(circle at center, rgba(0,229,255,.22), transparent 62%);
  transform: rotate(18deg);
  pointer-events:none;
  opacity:.85;
}

.al6-card-top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.al6-card-title{
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(234,242,246,.78);
}
.al6-dots{ display:flex; gap:6px; }
.al6-dots i{ width:6px; height:6px; border-radius:50%; background: rgba(0,229,255,.55); opacity:.7; }

.al6-card-body{
  position:relative;
  min-height: 285px;
  display:grid;
  place-items:center;
  padding: 30px;
}

.al6-logo{
  width:min(240px, 70%);
  height:auto;
  opacity:.97;
  filter: drop-shadow(0 0 22px rgba(0,229,255,.22));
  animation: al6LogoPulse 3.4s ease-in-out infinite;
}
@keyframes al6LogoPulse{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 0 18px rgba(0,229,255,.18)); }
  50%{ transform: scale(1.018); filter: drop-shadow(0 0 30px rgba(0,229,255,.34)); }
}

.al6-card-glow{
  position:absolute;
  inset:-30%;
  background: radial-gradient(circle at center, rgba(0,229,255,.30), transparent 65%);
  filter: blur(44px);
  animation: al6Glow 7.2s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes al6Glow{
  from { transform: scale(1); opacity:.50; }
  to { transform: scale(1.14); opacity:.90; }
}

/* Scanner line only on .al6-preview */
.al6-preview .al6-card-body::before{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  top:-40%;
  height: 42%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,229,255,.06) 35%,
    rgba(0,229,255,.18) 55%,
    rgba(0,229,255,.06) 75%,
    transparent 100%);
  filter: blur(2px);
  opacity:.50;
  pointer-events:none;
  animation: al6Scan 5.6s ease-in-out infinite;
}
@keyframes al6Scan{
  0%{ transform: translateY(0); opacity:0; }
  18%{ opacity:.55; }
  60%{ transform: translateY(255%); opacity:.62; }
  100%{ transform: translateY(360%); opacity:0; }
}

.al6-card-footer{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  font-size:12px;
  color: rgba(234,242,246,.62);
  border-top:1px solid rgba(255,255,255,.10);
}

/* ===== PRODUCTS ===== */
.al6-section{
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
  padding: clamp(52px, 6vw, 92px) 0;
}

.al6-section-head h2{
  margin:0 0 6px;
  font-size: 30px;
  letter-spacing:-0.01em;
}
.al6-section-head p{
  margin:0 0 24px;
  color: var(--muted);
  max-width: 70ch;
}

.al6-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 22px;
}

.al6-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 22px;
  position:relative;
  overflow:hidden;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Premium corner highlight on product cards */
.al6-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 100% 0%, rgba(0,229,255,.14), transparent 45%);
  opacity:.55;
  pointer-events:none;
}

.al6-card:hover{
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
  border-color: rgba(0,229,255,.35);
  box-shadow: var(--shadow2);
}

.al6-pill{
  display:inline-block;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(0,229,255,.86);
  background: rgba(0,229,255,.08);
  border:1px solid rgba(0,229,255,.18);
  padding: 6px 10px;
  border-radius:999px;
  margin-bottom: 10px;
}

.al6-card h3{ margin:0 0 8px; font-size:18px; }
.al6-card p{ margin:0 0 14px; color: var(--muted); line-height:1.6; }
.al6-card-soon{ opacity:.86; }

/* ===== Banner ===== */
.al6-banner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,229,255,.10), rgba(255,255,255,.04));
  border:1px solid rgba(0,229,255,.18);
  box-shadow: var(--shadow2);
}
.al6-banner h3{ margin:0 0 6px; font-size:22px; }
.al6-banner p{ margin:0; color: var(--muted); max-width: 70ch; }
.al6-banner-cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* ===== Reveal ===== */
.al6-reveal{
  opacity:0;
  transform: translateY(14px);
}
.al6-reveal.is-in{
  opacity:1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .al6-hero-grid{ grid-template-columns: 1fr; }
  .al6-card-body{ min-height: 240px; }
  .al6-cards{ grid-template-columns: 1fr; }
  .al6-banner{ flex-direction:column; align-items:flex-start; }
  .al6-wrap{ width:min(1120px, calc(100% - 28px)); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .al6-hero::before,
  .al6-hero::after,
  .al6-preview .al6-card-body::before,
  .al6-card-glow,
  .al6-logo{
    animation: none !important;
  }
  .al6-card:hover{ transform: translateY(-4px); }
}

/* ===== RTL (HE/AR) ===== */
:root[dir="rtl"] .al6-eyebrow{ letter-spacing:.06em; }
:root[dir="rtl"] .al6-hero-copy{ text-align:right; }
:root[dir="rtl"] .al6-cta{ justify-content:flex-start; }
:root[dir="rtl"] .al6-card-footer{ direction:ltr; }

/* Arabic/Hebrew title line-height */
html:lang(ar) .al6-title,
html:lang(he) .al6-title{
  line-height: 1.06;
}

/* Arabic/Hebrew eyebrow */
html:lang(ar) .al6-eyebrow,
html:lang(he) .al6-eyebrow{
  text-transform:none;
}