/* ----- Webnix Service Pages (shared) ----- */
:root{
  --text:#0b0b0b;
  --muted:#646b7a;
  --bg:#ffffff;
  --card:#ffffff;
  --purple:#6c47ff;
  --purple-700:#5a37ff;
  --border:#e7e9ef;
  --shadow-sm: 0 6px 18px rgba(17,24,39,.06);
  --shadow-md: 0 10px 24px rgba(17,24,39,.10);
  --shadow-lg: 0 20px 40px rgba(108,71,255,.22);
  --maxw: 1120px;
  --nav-h: 52px; /* fixed navbar height compensation */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  padding-top: var(--nav-h); /* avoid overlap with fixed navbar */
}
a{color:inherit;text-decoration:none}

/* container */
.container{ width:min(var(--maxw),92vw); margin-inline:auto; }

/* NAV (match homepage: keep bar small, scale only logo image) */
.navbar{position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(255,255,255,.84); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid rgba(0,0,0,.04); box-shadow:0 4px 16px rgba(17,24,39,.06);
  --logo-layout-h:26px; --logo-scale:3.6; }
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:40px;letter-spacing:.2px}
/* scope big scaling to NAVBAR only */
.navbar .brand{ overflow:visible }
.navbar .brand img{
  height:var(--logo-layout-h) !important; max-height:var(--logo-layout-h) !important; width:auto;
  object-fit:contain; display:block; transform:scale(var(--logo-scale)); transform-origin:left center;
}
@media (min-width:480px){ .navbar{ --logo-scale:4.0; } }
@media (min-width:768px){ .navbar{ --logo-scale:3.6; } }
.nav-links{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.nav-links a{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 8px;font-weight:800;font-size:14.5px;color:#0f172a;opacity:.9;border-radius:10px}
.nav-links a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:linear-gradient(90deg,#6c47ff,#5a37ff);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;border-radius:2px}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta .btn{height:42px;padding:0 18px;border-radius:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:12px;border:1.5px solid transparent;font-weight:700;font-size:14.5px;transition:.15s ease}
.btn-primary{color:#fff;background:linear-gradient(180deg,#6c47ff 0%,#5a37ff 100%);box-shadow:var(--shadow-lg)}
.btn-outline{background:#fff;color:#0f172a;border-color:var(--border);box-shadow:var(--shadow-sm)}
.hamburger{display:none;background:transparent;border:0;padding:10px;cursor:pointer;position:relative}
.hamburger span,.hamburger::before,.hamburger::after{content:"";display:block;height:2px;width:22px;background:#111;margin:5px 0;border-radius:2px;transition:.2s ease}
.hamburger.is-open span{opacity:0}
.hamburger.is-open::before{transform:translateY(7px) rotate(45deg)}
.hamburger.is-open::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:920px){
  .nav-links,.nav-cta{display:none}
  .hamburger{display:block}
  .mobile-menu{position:fixed;inset:var(--nav-h) 0 0 0;background:rgba(15,18,30,.55);backdrop-filter:blur(2px);border-top:0;box-shadow:none;display:none;z-index:9999;overflow:auto}
  .mobile-menu.open{display:block;animation:menuSlide .18s ease-out}
  @keyframes menuSlide{ from{ opacity:0; transform:translateY(-6px)} to{ opacity:1; transform:translateY(0)} }
  .mobile-menu ul{list-style:none;margin:12px auto 10px;padding:12px 14px;display:grid;gap:4px;width:min(520px,92vw);background:#fff;border:1px solid #e9edf6;border-radius:14px;box-shadow:0 16px 26px rgba(17,24,39,.12);color:#0f172a;position:relative;z-index:10000}
  .mobile-menu li+li{ border-top:1px dashed #eff2f8 }
  .mobile-menu a{display:block;padding:14px 10px;font-weight:800;font-size:18px;letter-spacing:.2px;border-radius:10px;color:#0f172a}
  .mobile-menu a:hover{background:#f6f7ff}
  .mobile-menu .pad{padding:12px; width:min(520px,92vw); margin:0 auto 14px}
  .mobile-menu .pad .btn{ width:100%; height:48px; border-radius:12px }
}

/* HERO */
.service-hero{
  padding: 22px 0 10px;
  background:
    radial-gradient(900px 420px at 82% -10%, #efe9ff 0%, #faf8ff 42%, transparent 62%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 100%);
}
.kicker{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:#9aa3b2;font-weight:800}
h1{font-size:clamp(28px,5.4vw,44px);line-height:1.15;letter-spacing:-.01em;margin:6px 0 12px}
.lead{color:var(--muted);max-width:70ch;font-size:15.8px;margin:0 0 16px}

/* hero media card */
.media-wrap{margin-top:10px;background:#fff;border:1px solid #edf0f6;border-radius:18px;box-shadow:0 12px 28px rgba(17,24,39,.08);overflow:hidden}
.media{position:relative}
.media img{display:block;width:100%;height:auto}
.media::after{
  content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background: radial-gradient(560px 240px at 10% 10%, rgba(108,71,255,.12), transparent 60%);
}

/* CONTENT */
.page{padding: 18px 0 72px}
.grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:980px){ .grid{grid-template-columns:minmax(0,1fr) 320px;gap:26px} }

.card{background:#fff;border:1px solid #edf0f6;border-radius:16px;box-shadow:var(--shadow-sm);padding:18px}
.card h2{font-size:22px;margin:6px 0 8px}
.card p{color:#1f2430;font-size:15.2px;line-height:1.7;margin:0 0 12px}
.card ul{margin:8px 0 10px;padding-left:18px}
.card li{margin:6px 0}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #e6e9f2;border-radius:999px;background:#fff;box-shadow:0 8px 18px rgba(15,18,30,.06);font-weight:800}
.badge .dot{width:8px;height:8px;border-radius:999px;background:var(--purple)}

/* sticky aside */
.aside{position:relative}
@media (min-width:980px){
  .aside{position:sticky; top:96px; align-self:start}
}
.aside .mini{display:grid;gap:12px}
.kpi{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid #eef0f4;border-radius:12px;background:#fff}
.kpi strong{font-size:16px}
.kpi span{font-weight:800;color:#4b5563}

/* FAQ */
.faq{margin-top:12px}
.faq h2{font-size:22px;margin:0 0 10px}
.faq-item{border:1px solid #edf0f6;border-radius:14px;background:#fff;box-shadow:0 8px 18px rgba(17,24,39,.05);margin:10px 0;overflow:hidden}
.faq-q{width:100%;text-align:left;background:#fff;border:0;padding:14px 16px;font-weight:800;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-q:hover{background:#fafbff}
.faq-a{display:none;padding:0 16px 14px 16px;color:#475063;font-size:15px;line-height:1.7;border-top:1px solid #f1f3f8}
.faq-item.open .faq-a{display:block}
.chev{transition:.2s ease}
.faq-item.open .chev{transform:rotate(180deg)}

/* CTA */
.cta{
  margin-top:24px;padding:18px;border-radius:16px;color:#fff;
  background:linear-gradient(180deg,#6c47ff 0%,#5a37ff 100%);
  box-shadow:0 18px 36px rgba(108,71,255,.28)
}
.cta h3{margin:4px 0 10px;font-size:22px}
.cta p{margin:0 0 12px;color:#f1edff}
.cta .btn{background:#fff;color:#0f172a;border:0;box-shadow:0 8px 18px rgba(17,24,39,.12)}

/* FOOTER (simple) */
.site-footer{border-top:1px solid #edf0f6;padding:28px 0 40px;margin-top:56px;background:#fff}
.footer-min{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-min .brand img{height:22px;max-height:22px}
.footer-min small{color:#8a93a3;font-weight:700}

/* FIX: make the mobile menu overlay the page (not clipped by the header) */
@media (max-width:920px){
  .mobile-menu{
    position: fixed;                /* keep it on top of the page */
    top: var(--nav-h);              /* start below the navbar */
    left: 0;
    right: 0;
    bottom: auto;                   /* override the previous bottom:0 from inset */
    height: calc(100dvh - var(--nav-h)); /* take full viewport height below navbar */
    z-index: 99999;                 /* ensure it’s above hero/art */
  }
}

/* === Mobile menu: white panel + black text, purple CTA === */
@media (max-width:920px){
  /* light overlay instead of dark */
  .mobile-menu{
    background: rgba(255,255,255,.82) !important;
  }

  /* white card panel */
  .mobile-menu ul{
    background: #ffffff !important;
    border: 1px solid #e8ebf3 !important;
    border-radius: 16px !important;
    padding: 12px 12px 8px !important;
    gap: 0 !important;
    box-shadow: 0 16px 26px rgba(17,24,39,.12);
  }
  .mobile-menu li+li{ border-top: 1px solid #eff2f8 !important; }

  /* menu rows */
  .mobile-menu a{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 12px !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #0b0b0b !important;        /* black text */
    font-weight: 700 !important;
    font-size: 16px !important;
    transition: background .15s ease, transform .15s ease, color .15s ease;
  }
  .mobile-menu a::after{
    content:"›";
    font-size:20px;
    color:#0b0b0b;                    /* black chevron */
    opacity:.35;
    transform: translateX(2px);
  }
  .mobile-menu a:hover{ background:#f6f7ff !important; }
  .mobile-menu a:active{ background:#f0f3ff !important; }
  .mobile-menu a:focus-visible{
    outline:none;
    box-shadow:0 0 0 2px rgba(108,71,255,.85) inset; /* purple focus ring */
    border-radius:10px;
  }

  /* CTA under list */
  .mobile-menu .pad{
    width:min(520px,92vw);
    margin: 0 auto 14px !important;
    padding: 12px 12px 16px !important;
    background: transparent;
  }
  .mobile-menu .pad .btn{
    width:100% !important; height:48px !important; border-radius:12px !important;
  }
  .mobile-menu .pad .btn-primary{
    background:#6C47FF !important;    /* requested purple */
    color:#fff !important;
    border-color:transparent !important;
    box-shadow:0 12px 22px rgba(108,71,255,.28) !important;
  }
}

@media (min-width:980px) {
  .grid {
    grid-template-columns: 1fr 1fr; /* Ensure equal columns for desktop */
    gap: 32px; /* Adjust spacing for better alignment */
  }

  .aside {
    position: sticky;
    top: 80px; /* Adjust sticky position for better visibility */
    align-self: flex-start;
  }

  .card {
    padding: 24px; /* Increase padding for better spacing */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
  }
}

/* ===========================
   PC fixes (>=980px only)
   — keeps mobile styles unchanged
   =========================== */
@media (min-width:980px){

  /* 1) Stop the logo from visually overflowing the navbar on desktop */
  .navbar{ --logo-scale: 1; }                 /* disable big transform on PC */
  .navbar .brand img{
    height: 36px !important;
    max-height: 36px !important;
    transform: none !important;
  }

  /* Give the page a bit more top offset to clear the (now taller) navbar */
  :root{ --nav-h: 72px; }  /* body already uses padding-top: var(--nav-h) */

  /* 2) Restore proper layout: main content + 320px aside */
  .grid{
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 28px !important;
  }

  /* If there is no .aside in the grid, collapse to one column automatically */
  .grid:not(:has(.aside)){
    grid-template-columns: 1fr !important;
  }

  /* 3) Desktop tidy-ups */
  .aside{
    position: sticky;
    top: calc(var(--nav-h) + 24px);  /* stay below the fixed navbar */
    align-self: start;
  }
  .card{
    padding: 24px;
    box-shadow: var(--shadow-sm);
  }
}

/* ===== Desktop-only: hide the mobile menu container ===== */
@media (min-width: 920px) {
  /* never render the mobile overlay on desktop */
  #mobileMenu,
  .mobile-menu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: static !important;
    inset: auto !important;
    height: auto !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* hide hamburger on desktop just in case JS toggles it */
  .hamburger { display: none !important; }
}