
/* =========================================================
   Unlock Meta — Premium Dark/Light Theme
   Matches the supplied reference: cinematic navy, glass cards,
   blue glow, pill navigation and premium spacing.
   ========================================================= */
:root {
    --um-dark-bg:#041226;
    --um-dark-bg-2:#071b35;
    --um-dark-surface:rgba(12,34,65,.78);
    --um-dark-surface-2:rgba(10,29,55,.92);
    --um-dark-border:rgba(117,181,255,.16);
    --um-dark-text:#f5f9ff;
    --um-dark-muted:#91a7c4;
    --um-glow:0 0 50px rgba(24,126,255,.18);
    --um-light-bg:#f5f8fc;
    --um-light-surface:#fff;
    --um-light-border:#e3eaf4;
}

/* Default = dark, as in the reference image */
.home-page {
    background:
      radial-gradient(circle at 10% 18%, rgba(21,117,255,.08), transparent 25%),
      radial-gradient(circle at 90% 50%, rgba(0,194,255,.06), transparent 26%),
      var(--um-dark-bg);
    color:var(--um-dark-text);
}
.home-page #main-header {
    background:rgba(3,15,31,.76);
    border:0;
    box-shadow:0 12px 45px rgba(0,0,0,.20);
    backdrop-filter:blur(18px) saturate(140%);
}
.home-page #main-header .navbar {
    min-height:68px;
}
.home-page #main-header .container {
    margin-top:8px;
    margin-bottom:8px;
    padding:6px 12px;
    border:1px solid rgba(107,178,255,.11);
    border-radius:22px;
    background:rgba(8,28,53,.70);
}
.home-page .navbar-nav .nav-link {
    color:#aebfd5 !important;
    border-radius:12px;
    padding:9px 12px !important;
    font-size:.88rem;
}
.home-page .navbar-nav .nav-link:hover,
.home-page .navbar-nav .nav-link.active {
    color:#fff !important;
    background:rgba(31,128,255,.10);
}
.home-page .brand-name,.home-page .brand-name-ar { color:#fff !important; }
.home-page .brand-name strong { color:#2585ff !important; }
.home-page .brand-icon {
    background:linear-gradient(135deg,#0f5fe8,#28b7ff) !important;
    color:#fff !important;
    box-shadow:0 8px 25px rgba(23,126,255,.32);
}
.home-page .theme-toggle {
    width:40px;height:40px;border-radius:50%;
    border:1px solid rgba(124,187,255,.16);
    background:rgba(255,255,255,.055);
    color:#dcecff;
    display:inline-flex;align-items:center;justify-content:center;
    cursor:pointer;transition:.25s ease;position:relative;
}
.home-page .theme-toggle:hover { transform:translateY(-1px); background:rgba(29,130,255,.14); border-color:rgba(65,158,255,.4); }
.home-page .theme-icon-sun { display:none; }
.home-page .theme-toggle-mobile { width:100%; height:46px; border-radius:14px; justify-content:space-between; padding:0 15px; }
.home-page .theme-toggle-mobile span { display:flex; align-items:center; }

/* Hero */
.home-page .hero-section {
    min-height:760px;
    padding:112px 0 90px;
    background:
      radial-gradient(circle at 22% 28%, rgba(17,104,242,.20), transparent 24%),
      radial-gradient(circle at 82% 22%, rgba(31,152,255,.22), transparent 25%),
      radial-gradient(circle at 90% 85%, rgba(0,200,255,.11), transparent 26%),
      linear-gradient(135deg,#031124 0%,#061b36 48%,#092a4f 100%);
}
.home-page .hero-section::before {
    background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.035) 50%,transparent 82%);
}
.home-page .hero-grid { opacity:.28; background-size:58px 58px; }
.home-page .hero-badge { background:rgba(39,135,255,.10); border-color:rgba(75,165,255,.22); color:#cce4ff; }
.home-page .hero-title { color:#fff; font-size:clamp(2.6rem,5vw,4.5rem); line-height:1.12; }
.home-page .hero-title .highlight { background:linear-gradient(100deg,#58bfff,#fff 52%,#79aaff); -webkit-background-clip:text;background-clip:text; }
.home-page .hero-desc { color:#a9bbd2; }
.home-page .hero-actions .btn-primary { background:linear-gradient(135deg,#0876ff,#1598ff); border:0; box-shadow:0 12px 32px rgba(12,116,255,.30); }
.home-page .hero-actions .btn-primary:hover { transform:translateY(-2px); box-shadow:0 18px 38px rgba(12,116,255,.38); }
.home-page .hero-actions .btn-hero:not(.btn-primary) { background:rgba(255,255,255,.045) !important; color:#fff !important; border:1px solid rgba(130,192,255,.24) !important; }
.home-page .hero-stats { border-color:rgba(136,193,255,.14); }
.home-page .hero-stat-item { border-color:rgba(136,193,255,.13); }
.home-page .hero-stat-label { color:#7890ad; }

/* Visual card */
.home-page .hero-visual::before { background:radial-gradient(circle,rgba(35,154,255,.32),rgba(35,154,255,0) 68%); }
.home-page .hero-card-main {
    background:linear-gradient(145deg,rgba(9,31,59,.94),rgba(4,20,40,.96));
    border:1px solid rgba(105,181,255,.22);
    box-shadow:0 42px 110px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.05);
}
.home-page .mockup-header { border-color:rgba(131,184,235,.12); }
.home-page .mockup-title { color:#a6b9d2; }
.home-page .mockup-service-item { background:rgba(255,255,255,.035); border-color:rgba(112,176,230,.13); }
.home-page .mockup-service-item:hover { background:rgba(32,128,255,.08); border-color:rgba(71,157,255,.30); }
.home-page .mockup-service-name { color:#eef6ff; }
.home-page .mockup-service-price { color:#829ab8; }
.home-page .floating-card { background:rgba(8,29,55,.86); border-color:rgba(111,184,255,.18); color:#fff; backdrop-filter:blur(18px); box-shadow:0 20px 45px rgba(0,0,0,.34); }

/* Stats strip */
.home-page .stats-strip { background:linear-gradient(180deg,#061a33,#071d38); border-color:rgba(105,177,255,.10); }
.home-page .stat-number { color:#f5f9ff; }
.home-page .stat-label { color:#8096b2; }
.home-page .stat-item::after { background:rgba(122,178,231,.13); }

/* Common sections */
.home-page .section { background:transparent; }
.home-page .services-section,.home-page .steps-section,.home-page .contact-section { background:transparent; }
.home-page .why-us-section { background:linear-gradient(180deg,rgba(8,28,53,.32),rgba(4,18,36,.55)); }
.home-page .section::before { background:linear-gradient(90deg,transparent,rgba(55,151,255,.15),transparent); }
.home-page .section-tag { background:rgba(30,132,255,.09); border-color:rgba(68,160,255,.18); color:#62b5ff; }
.home-page .section-title { color:#f2f7ff; }
.home-page .section-desc { color:#849ab6; }

/* Cards */
.home-page .service-card,
.home-page .why-us-section .feature-card,
.home-page .why-us-section .why-card,
.home-page .steps-section .step-card,
.home-page .contact-card,
.home-page .faq-accordion .accordion-item,
.home-page section.bg-light article {
    background:linear-gradient(145deg,rgba(10,35,66,.82),rgba(6,24,46,.88)) !important;
    border-color:rgba(101,169,230,.15) !important;
    box-shadow:0 15px 45px rgba(0,0,0,.20) !important;
    color:#eaf3ff;
}
.home-page .service-card:hover,
.home-page .why-card:hover,
.home-page section.bg-light article:hover { border-color:rgba(66,157,255,.36) !important; box-shadow:0 25px 60px rgba(0,0,0,.30) !important; }
.home-page .service-image { background:#071d36; }
.home-page .service-name,.home-page .why-card h3,.home-page .why-card h4,.home-page .contact-title { color:#eef6ff; }
.home-page .service-desc,.home-page .why-card p,.home-page .contact-value { color:#849bb7; }
.home-page .service-meta { border-color:rgba(116,172,221,.12); }
.home-page .why-icon { background:rgba(23,126,255,.10); color:#59b8ff; }
.home-page .why-card:hover .why-icon { background:rgba(23,126,255,.16); color:#70c4ff; }
.home-page .step-title { color:#edf5ff; }
.home-page .step-desc { color:#849bb6; }
.home-page .step-num { box-shadow:0 10px 28px rgba(16,120,255,.22); }
.home-page .faq-accordion .accordion-button { background:transparent; color:#eaf3ff; }
.home-page .faq-accordion .accordion-button:not(.collapsed) { color:#68baff; background:rgba(22,121,255,.07); }
.home-page .faq-accordion .accordion-body { color:#8ea5bf; background:rgba(255,255,255,.015); }
.home-page .faq-accordion .accordion-button::after { filter:invert(1) brightness(1.8); }
.home-page .contact-icon-wrap { box-shadow:0 10px 30px rgba(17,125,255,.18); }
.home-page section.bg-light { background:transparent !important; }
.home-page section.bg-light article .text-dark,
.home-page section.bg-light article h3,
.home-page section.bg-light article h4 { color:#edf5ff !important; }
.home-page section.bg-light article .text-muted { color:#8198b3 !important; }

/* CTA / footer */
.home-page .cta-banner { box-shadow:inset 0 1px rgba(255,255,255,.08),inset 0 -1px rgba(0,0,0,.15); }
.home-page #main-footer { background:#020f20 !important; border-top:1px solid rgba(88,161,232,.10); }
.home-page #main-footer .footer-title,.home-page #main-footer .brand-name { color:#f4f8ff !important; }
.home-page #main-footer .footer-desc,.home-page #main-footer .footer-links a,.home-page #main-footer .footer-contact a { color:#8197b3; }
.home-page #main-footer .footer-links a:hover,.home-page #main-footer .footer-contact a:hover { color:#55b6ff; }

/* Light mode */
html.theme-light .home-page {
    background:#f5f8fc;
    color:#17243a;
}
html.theme-light .home-page #main-header { background:rgba(255,255,255,.82); border-bottom:1px solid #e4ebf5; box-shadow:0 10px 35px rgba(23,45,75,.08); }
html.theme-light .home-page #main-header .container { background:rgba(255,255,255,.90); border-color:#e6edf6; }
html.theme-light .home-page .navbar-nav .nav-link { color:#53627a !important; }
html.theme-light .home-page .navbar-nav .nav-link:hover,html.theme-light .home-page .navbar-nav .nav-link.active { color:#126be7 !important; background:#eef5ff; }
html.theme-light .home-page .brand-name { color:#10213a !important; }
html.theme-light .home-page .brand-name-ar { color:#6b7a91 !important; }
html.theme-light .home-page .theme-toggle { background:#f0f5fb; color:#126be7; border-color:#dce7f4; }
html.theme-light .home-page .theme-icon-moon { display:none; }
html.theme-light .home-page .theme-icon-sun { display:inline-block; }
html.theme-light .home-page .hero-section { background:radial-gradient(circle at 80% 20%,rgba(55,154,255,.16),transparent 28%),linear-gradient(135deg,#eaf4ff,#f8fbff 55%,#e9f4ff); }
html.theme-light .home-page .hero-title { color:#10233d; text-shadow:none; }
html.theme-light .home-page .hero-title .highlight { background:linear-gradient(100deg,#0b67e8,#1b9dff); -webkit-background-clip:text;background-clip:text; }
html.theme-light .home-page .hero-desc { color:#52657e; }
html.theme-light .home-page .hero-badge { color:#2865a6; background:rgba(255,255,255,.72); border-color:#d8e7f7; }
html.theme-light .home-page .hero-actions .btn-hero:not(.btn-primary) { color:#1d4e83 !important; background:rgba(255,255,255,.70) !important; border-color:#cfe0f3 !important; }
html.theme-light .home-page .hero-stat-label { color:#667b95; }
html.theme-light .home-page .hero-card-main { background:linear-gradient(145deg,#fff,#edf6ff); border-color:#d7e7f8; box-shadow:0 35px 80px rgba(25,84,140,.18); }
html.theme-light .home-page .mockup-title { color:#657790; }
html.theme-light .home-page .mockup-header { border-color:#dfe8f3; }
html.theme-light .home-page .mockup-service-item { background:#f6f9fd; border-color:#e1eaf4; }
html.theme-light .home-page .mockup-service-name { color:#1c2c43; }
html.theme-light .home-page .mockup-service-price { color:#72839a; }
html.theme-light .home-page .floating-card { background:rgba(255,255,255,.92); color:#1b2d45; border-color:#dce7f3; }
html.theme-light .home-page .stats-strip { background:#fff; border-color:#e5edf6; }
html.theme-light .home-page .stat-number { color:#17283f; }
html.theme-light .home-page .stat-label { color:#718198; }
html.theme-light .home-page .section-title { color:#17283f; }
html.theme-light .home-page .section-desc { color:#718198; }
html.theme-light .home-page .section-tag { background:#edf5ff; border-color:#d7e7f7; color:#1764ad; }
html.theme-light .home-page .service-card,html.theme-light .home-page .why-us-section .why-card,html.theme-light .home-page .steps-section .step-card,html.theme-light .home-page .contact-card,html.theme-light .home-page .faq-accordion .accordion-item,html.theme-light .home-page section.bg-light article { background:#fff !important; border-color:#e0e8f2 !important; color:#1b2b43; box-shadow:0 10px 32px rgba(30,54,82,.06) !important; }
html.theme-light .home-page .service-name,html.theme-light .home-page .why-card h3,html.theme-light .home-page .why-card h4,html.theme-light .home-page .contact-title,html.theme-light .home-page .step-title { color:#1b2b43; }
html.theme-light .home-page .service-desc,html.theme-light .home-page .why-card p,html.theme-light .home-page .contact-value,html.theme-light .home-page .step-desc { color:#708098; }
html.theme-light .home-page .faq-accordion .accordion-button { color:#22334c; }
html.theme-light .home-page .faq-accordion .accordion-button:not(.collapsed) { color:#126be7; background:#f4f8fd; }
html.theme-light .home-page .faq-accordion .accordion-body { color:#6e7f96; background:#fff; }
html.theme-light .home-page .faq-accordion .accordion-button::after { filter:none; }
html.theme-light .home-page #main-footer { background:#071a31 !important; }

@media (max-width:991.98px) {
    .home-page #main-header .container { margin-inline:10px; }
    .home-page .hero-section { padding-top:90px; }
}
@media (max-width:575.98px) {
    .home-page #main-header .container { border-radius:18px; }
    .home-page .hero-section { min-height:auto; padding-top:70px; }
    .home-page .hero-title { font-size:2.35rem; }
}
