/* =====================================================================
   ByteExpert unified LIGHT identity for AMSS-family product pages
   Loaded AFTER suite.css. Converts full-bleed dark SECTIONS to light so
   the product pages feel like one continuous ByteExpert company site.
   Dark CARDS / device bezels (product tiles, bento accents, laptop
   frames, table header) are kept dark on purpose — Apple-style contrast.
   ===================================================================== */

:root{
  --blue:#1f6feb;          /* ByteExpert accent replaces #0071e3 */
  --blue-hover:#1a63d6;
  --be-navy:#0a1b3d;
}
html,body{background:#f2f6fd}

/* ---------------------------------------------------------------- NAV */
/* Always-light ByteExpert nav (suite.js toggles .dark over the hero — */
/* both states now render light so the toggle is invisible).           */
.global-nav,.global-nav.dark{
  background:rgba(242,246,253,.8);
  backdrop-filter:saturate(180%) blur(20px);
  color:var(--ink);
  border-bottom:1px solid rgba(20,40,90,.08);
}
.global-nav.dark .brand small,.brand small{color:#6e6e73}
.global-nav.dark .nav-links a,.nav-links a{color:#33343a;opacity:1}
.nav-links a:hover{color:var(--blue)}
.nav-links a.co-uplink{display:none}          /* brand logo now returns home */
.global-nav.dark .menu-button,.menu-button{color:var(--ink)}
.brand{gap:11px}
.brand-logo{height:24px;width:auto;display:block}
.brand-crumb{font-weight:800;color:var(--ink);font-size:15px;letter-spacing:-.01em;
  border-inline-start:1px solid var(--line);padding-inline-start:11px}
.mobile-menu{background:rgba(255,255,255,.98);color:var(--ink)}
.mobile-menu a{color:var(--ink);border-color:var(--line)}

/* -------------------------------------------------------------- HERO */
.hero{
  background:
    radial-gradient(58% 52% at 50% -4%,#d6e5ff 0,transparent 62%),
    radial-gradient(46% 46% at 88% 22%,#ece1ff 0,transparent 58%),
    radial-gradient(44% 44% at 10% 34%,#d8f0ff 0,transparent 58%),
    linear-gradient(180deg,#f3f8ff 0%,#f2f6fd 100%);
  color:var(--ink);
}
.hero:before{display:none}                    /* drop the purple glow */
.hero .eyebrow{color:#1f5fd0}
.hero .subhead{color:#4a4b50}
.hero .display span{
  background:linear-gradient(90deg,#1f6feb,#7b5cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-window{border:1px solid rgba(20,40,90,.1);box-shadow:0 40px 100px rgba(10,27,61,.22)}
/* hero interactive controls → light */
.hero-selector{border-color:rgba(20,40,90,.12);background:rgba(255,255,255,.6)}
.hero-selector-button{color:#5c6172}
.hero-selector-button.active{color:#0a1b3d;background:#fff;box-shadow:0 8px 22px rgba(10,27,61,.14)}
.hero-clarity-strip b{color:var(--ink)}
.hero-clarity-strip small{color:#5c6172}
.hero-clarity-strip i{color:#1f6feb}
.hero-clarity-strip span{border-color:rgba(20,40,90,.1)}
.hero-auto-progress{background:rgba(20,40,90,.12)}
.hero-auto-progress i{background:linear-gradient(90deg,#1f6feb,#7b5cff)}

/* dark-section hook: fix subheads on the now-light sections */
.dark-section .subhead{color:#4a4b50}

/* ------------------------------------------------------------ STORIES */
/* Section background flips to light; the .story-device laptop bezel    */
/* stays dark (it is a device frame, meant to be dark on a light page). */
.story{background:#fff;color:var(--ink)}
.story.master-story{background:#f5f8fd}
.story-intro .eyebrow{color:#1f5fd0}
.story-chapter .number{color:#8a8f9c}
.story-chapter h3{color:var(--ink)}
.story-chapter p{color:#5c5d63}
.story-chapter ul{color:#4a4b50}

/* -------------------------------------------------------- INTEGRATION */
.integration{background:#eef3fb;color:var(--ink)}
.integration .display .gradient-text{
  background:linear-gradient(90deg,#1f6feb,#7b5cff,#3db8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.flow-panel{background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(10,27,61,.1)}
.flow-panel p{color:#5c5d63}
.flow-badge{color:#6e6e73}
.flow-line:after{color:#1f6feb}
.benefit{border-top-color:rgba(20,40,90,.16)}
.benefit p{color:#5c5d63}

/* ---------------------------------------------------------- FINAL CTA */
.final-cta{
  background:linear-gradient(150deg,#e2ecff 0%,#ece3ff 55%,#e4f1ff 100%);
  color:var(--ink);
}
.final-cta p{color:#4a4b50}

/* ------------------------------------------------------------- FOOTER */
.footer{background:#eaf0fb;color:#5c6172}
.footer h4{color:var(--ink)}
.footer-bottom{border-top-color:rgba(20,40,90,.12)}
.footer .brand-logo{height:22px}

/* -------------------------------------- PRODUCT HERO (sec / mastersheet) */
.product-hero,.product-hero.light{
  background:
    radial-gradient(58% 52% at 50% -4%,#d6e5ff 0,transparent 62%),
    radial-gradient(46% 46% at 88% 22%,#ece1ff 0,transparent 58%),
    radial-gradient(44% 44% at 10% 34%,#d8f0ff 0,transparent 58%),
    linear-gradient(180deg,#f3f8ff 0%,#f2f6fd 100%);
  color:var(--ink);
}
.product-hero .eyebrow{color:#1f5fd0}
.product-hero .subhead{color:#4a4b50}
/* شعار البرنامج فوق العنوان (أيقونة الماسترشيت الرسمية على خلفية الهيرو الفاتحة) */
.product-hero .prod-logo{width:clamp(74px,9vw,108px);height:auto;display:block;margin:0 auto 20px;
  border-radius:24px;box-shadow:0 22px 50px rgba(10,27,61,.30)}
.product-hero .display{                       /* SEC / MasterSheet wordmark → brand gradient */
  background:linear-gradient(90deg,#1f6feb,#7b5cff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* .product-hero-frame stays a dark device bezel */

/* ---------------------------------- FEATURE SEQUENCE (dark band → light) */
.feature-sequence.dark{background:#f5f8fd;color:var(--ink)}
.feature-sequence.dark .feature-copy p{color:#5c5d63}

/* product subnav accent */
.product-subnav-links a:after{background:#1f6feb}

/* accent nudge already picked up by --blue: text-link, primary-pill,   */
/* nav-button, ecosystem connector, comparison amss-column all inherit. */
.comparison-head .amss-column{background:#1f6feb}

/* ── شريط منتج موحّد: أُزيل الشريط الفرعي (كان شريطين محيّرين) ── */
/* الهيرو كان حشوه العلوي 140px لشريطين ثابتين؛ الآن شريط واحد (52px) فنُقلّله */
.product-subnav{display:none !important}
.product-hero{padding-top:96px}
@media (max-width:760px){.product-hero{padding-top:80px}}

/* ── Liquid Glass hover (بأسلوب Apple) على روابط الشريط العلوي ──
   حبّة دائرية بتدرّج زجاجي لامع + بريق علوي + حدّ رفيع + ظل ناعم.
   لا نعتمد على backdrop-filter وحده (متداخل داخل شريط مضبَّب فلا يظهر)؛
   التدرّج + الحدّ + الظل هي ما يُظهر الشكل الزجاجي بوضوح. */
.global-nav .nav-links a{
  position:relative;padding:8px 17px;border-radius:999px;
  transition:background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease, color .2s ease, transform .25s ease;
}
.global-nav .nav-links a:hover{
  color:#0b3a86;
  background:rgba(255,255,255,.18);              /* شفّاف — يُرى ما خلفه، بحضور أوضح */
  -webkit-backdrop-filter:blur(16px) saturate(190%);
  backdrop-filter:blur(16px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),         /* بريق علوي قويّ */
    inset 0 -1px 0 rgba(255,255,255,.4),
    inset 0 0 0 1px rgba(255,255,255,.62),        /* حافة زجاجية أوضح */
    0 10px 26px rgba(20,50,110,.22),              /* ظل أعمق (رفع) */
    0 0 0 1px rgba(70,110,175,.38);               /* خيط خارجي أوضح */
}
/* الشريط الداكن (SEC عند التمرير) — زجاج أبيض شفّاف */
.global-nav.dark .nav-links a:hover{
  color:#fff;
  background:rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(255,255,255,.34),
    0 10px 26px rgba(0,0,0,.36);
}

/* ── «برامجنا» قائمة منسدلة للبرامج داخل صفحات المنتجات (مثل الرئيسية) ── */
.global-nav .drop{position:relative;display:inline-flex;align-items:center}
.global-nav .drop-trigger{cursor:pointer;user-select:none}
.global-nav .drop-trigger::after{content:"⌄";margin-inline-start:5px;font-size:.85em;opacity:.55}
.global-nav .mega{position:absolute;top:calc(100% + 14px);right:0;min-width:320px;background:#fff;border:1px solid #e6ecf5;
  border-radius:20px;box-shadow:0 26px 64px rgba(0,0,0,.18);padding:12px;display:grid;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s;z-index:1200}
.global-nav .drop:hover .mega,.global-nav .drop:focus-within .mega,.global-nav .drop.open .mega{opacity:1;visibility:visible;transform:none}
.global-nav .mega-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;text-decoration:none;color:#1d1d1f}
.global-nav .mega-item:hover{background:#f2f5fa}
.global-nav .mega-item .mi-ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;overflow:hidden}
.global-nav .mega-item .mi-ic.logo{background:#fff;border:1px solid #e6ecf5}
.global-nav .mega-item .mi-ic.logo img{width:100%;height:100%;object-fit:cover;display:block}
.global-nav .mega-item .mi-tx b{display:block;font-size:15px;color:#1d1d1f}
.global-nav .mega-item .mi-tx small{font-size:12.5px;color:#6e6e73}

/* ── سطر تسويقي في الهيرو بين العنوان والوصف (حجم متوسّط متناسق) ── */
.product-hero .hero-tagline{
  font-size:clamp(28px,4.2vw,46px);              /* أكبر بوضوح من الوصف */
  font-weight:800;line-height:1.3;letter-spacing:-.015em;
  margin:8px auto 18px;max-width:840px;color:#16294a;  /* أزرق غامق مثل لون اللوكو */
}
.product-hero.dark-section .hero-tagline{color:#cfe0ff}   /* لو استُخدم على هيرو داكن */