/* ============================================================
   Logoland — GLOSSY design layer (glass + gloss, purple brand)
   Additive overlay inspired by aitrader.gold's glossy execution,
   kept in Logoland's own purple palette. Loaded after index.css.
   ============================================================ */
:root{
  --gl-glass: rgba(255,255,255,.055);
  --gl-glass-strong: rgba(255,255,255,.08);
  --gl-border: rgba(255,255,255,.10);
  --gl-edge: rgba(255,255,255,.22);      /* top specular edge highlight */
  --gl-purple: #9880ff;
  --gl-purple-2: #7c5cff;
  --gl-grad: linear-gradient(135deg,#a78bff 0%,#7c5cff 100%);
  --gl-glow: 0 5px 16px rgba(124,92,255,.26);
  --gl-shadow: 0 5px 16px rgba(0,0,0,.20);
  --gl-sheen: linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 62%);
}

/* ---- Ambient depth: fixed radial glow blobs behind everything ---- */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(48% 40% at 15% 8%, rgba(152,128,255,.16), transparent 70%),
    radial-gradient(42% 38% at 88% 22%, rgba(91,120,255,.12), transparent 72%),
    radial-gradient(50% 46% at 60% 100%, rgba(124,92,255,.12), transparent 72%);
}
body > *{ position:relative; z-index:1; }

/* ============ GLASS PANELS (cards) ============ */
/* ONLY the custom .lg-* cards (solid backgrounds) get glass. Nicepage
   .u-container-style cards are NOT touched — some use a background-image
   (e.g. the Services grid), and a `background:` override would erase it. */
.lg-gc, .lg-step, .lg-pr-card, .lg-tst-card{
  position:relative;
  background: var(--gl-glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
          backdrop-filter: blur(18px) saturate(125%);
  border:1px solid var(--gl-border) !important;
  box-shadow: var(--gl-shadow), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
/* top specular edge highlight on glass cards */
.lg-gc::after, .lg-step::after, .lg-pr-card::after, .lg-tst-card::after{
  content:""; position:absolute; left:14px; right:14px; top:0; height:1px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--gl-edge), transparent);
  pointer-events:none; z-index:3;
}
.lg-step:hover, .lg-pr-card:hover, .lg-tst-card:hover{
  border-color: rgba(152,128,255,.35) !important;
  box-shadow: var(--gl-shadow), var(--gl-glow), inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform: translateY(-3px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* ============ BUTTONS ============ */
/* Every CTA on the site uses the one dark/transparent ShinyButton style — the
   shared rule lives in the block below. (Old glossy purple fills removed.) */

/* ===================== SERVICES SECTION (u-section-6) ===================== */
/* 1) remove the grey divider lines above & below the section */
[data-cms-section="social"]{ border-top:none !important; border-bottom:none !important; }

/* 2) align every LEARN MORE to the bottom of its card, so buttons line up
      across a row regardless of description length */
[data-cms-section="social"] .u-container-layout{ display:flex !important; flex-direction:column; height:100%; }
[data-cms-section="social"] h5.u-text{ font-weight:300 !important; }      /* lighter desc (kept) */
[data-cms-section="social"] h5.u-text br{ display:none !important; }       /* drop trailing <br><br><br> */
[data-cms-section="social"] .u-btn{ margin-top:auto !important; align-self:flex-start; }

/* 3) ShinyButton — ported from the supplied React component to plain CSS,
      re-themed to Logoland purple (was blue), sized to fit a card. */
@property --sb-angle  { syntax:"<angle>";      initial-value:0deg;  inherits:false; }
@property --sb-offset { syntax:"<angle>";      initial-value:0deg;  inherits:false; }
@property --sb-percent{ syntax:"<percentage>"; initial-value:5%;    inherits:false; }
@property --sb-shine  { syntax:"<color>";      initial-value:white; inherits:false; }

/* shared shiny CTA — ALL buttons: hero (.lg-btn), pricing (.lg-pr-cta),
   app cards (.lg-app-cta), every Nicepage .u-btn, and the header Free-demo pill */
.lg-btn, .lg-pr-cta, .lg-app-cta, .u-btn.u-button-style, .u-header a.u-nav-link[href*="demo"]{
  --sb-bg:#12131a; --sb-bg-subtle:#1b1d27;
  --sb-highlight:#9880ff; --sb-highlight-subtle:#b9a8ff;
  --sb-duration:3s; --sb-transition:800ms cubic-bezier(.25,1,.5,1);
  --radius:360px;                     /* Nicepage reads border-radius from this var */
  isolation:isolate; position:relative; overflow:hidden; cursor:pointer;
  /* overflow:hidden does NOT clip on inline boxes — some targets (contact email
     link, .lg-btn on pages without index.css) are display:inline, letting the
     shimmer square escape the button. Force a block-level box. */
  display:inline-block; vertical-align:middle;
  outline-offset:4px;
  padding:.72rem 1.7rem !important;
  font-family:'Roboto',sans-serif; font-size:.8rem !important; font-weight:600 !important;
  letter-spacing:.09em; line-height:1.2; text-transform:uppercase; text-decoration:none !important;
  border:1px solid transparent !important; border-radius:360px !important;
  background:
    linear-gradient(var(--sb-bg),var(--sb-bg)) padding-box,
    conic-gradient(from calc(var(--sb-angle) - var(--sb-offset)),
      transparent, var(--sb-highlight) var(--sb-percent),
      var(--sb-shine) calc(var(--sb-percent)*2),
      var(--sb-highlight) calc(var(--sb-percent)*3),
      transparent calc(var(--sb-percent)*4)) border-box !important;
  box-shadow:inset 0 0 0 1px var(--sb-bg-subtle) !important;
  color:#fff !important;
  transition:var(--sb-transition);
  transition-property:--sb-offset,--sb-percent,--sb-shine;
}
/* nicepage re-inlines buttons in three contexts (.u-text/.u-form-agree/
   .u-table-cell .u-btn.u-button-link, 0,3,0) which would break the overflow
   clip again — match all three and win. */
.u-text .u-btn.u-button-style,
.u-form-agree .u-btn.u-button-style,
.u-table-cell .u-btn.u-button-style{ display:inline-block; }
/* brute-force specificity to beat Nicepage's own per-button rules
   (border-radius:0 !important is 0,4,0; the custom text-color rule is 0,3,1) */
.u-btn.u-btn.u-btn.u-btn.u-btn{
  border-radius:360px !important; color:#fff !important; border:1px solid transparent !important;
}
.lg-btn::before, .lg-btn::after, .lg-pr-cta::before, .lg-pr-cta::after,
.lg-app-cta::before, .lg-app-cta::after, .u-btn.u-button-style::before, .u-btn.u-button-style::after,
.u-header a.u-nav-link[href*="demo"]::before, .u-header a.u-nav-link[href*="demo"]::after{
  content:""; pointer-events:none; position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:-1;
}
/* dots */
.lg-btn::before, .lg-pr-cta::before, .lg-app-cta::before,
.u-btn.u-button-style::before, .u-header a.u-nav-link[href*="demo"]::before{
  --size:calc(100% - 6px); width:var(--size); height:var(--size);
  background:radial-gradient(circle at 2px 2px,#fff .5px,transparent 0) padding-box;
  background-size:4px 4px; background-repeat:space;
  -webkit-mask-image:conic-gradient(from calc(var(--sb-angle) + 45deg),#000,transparent 10% 90%,#000);
  mask-image:conic-gradient(from calc(var(--sb-angle) + 45deg),#000,transparent 10% 90%,#000);
  border-radius:inherit; opacity:.35;
}
/* inner shimmer */
.lg-btn::after, .lg-pr-cta::after, .lg-app-cta::after,
.u-btn.u-button-style::after, .u-header a.u-nav-link[href*="demo"]::after{
  width:100%; aspect-ratio:1;
  background:linear-gradient(-50deg,transparent,var(--sb-highlight),transparent);
  -webkit-mask-image:radial-gradient(circle at bottom,transparent 40%,#000);
  mask-image:radial-gradient(circle at bottom,transparent 40%,#000);
  opacity:.55;
}
.lg-btn:active, .lg-pr-cta:active, .lg-app-cta:active,
.u-btn.u-button-style:active, .u-header a.u-nav-link[href*="demo"]:active{ translate:0 1px; }
/* animation PAUSED at rest, RUNS on hover/focus */
.lg-btn, .lg-btn::before, .lg-pr-cta, .lg-pr-cta::before, .lg-app-cta, .lg-app-cta::before,
.u-btn.u-button-style, .u-btn.u-button-style::before,
.u-header a.u-nav-link[href*="demo"], .u-header a.u-nav-link[href*="demo"]::before{
  animation: sb-angle var(--sb-duration) linear infinite paused,
             sb-angle calc(var(--sb-duration)/.4) linear infinite reverse paused;
  animation-composition:add;
}
.lg-btn::after, .lg-pr-cta::after, .lg-app-cta::after,
.u-btn.u-button-style::after, .u-header a.u-nav-link[href*="demo"]::after{
  animation: sb-shimmer var(--sb-duration) linear infinite paused,
             sb-shimmer calc(var(--sb-duration)/.4) linear infinite reverse paused;
  animation-composition:add;
}
.lg-btn:is(:hover,:focus-visible), .lg-pr-cta:is(:hover,:focus-visible), .lg-app-cta:is(:hover,:focus-visible),
.u-btn.u-button-style:is(:hover,:focus-visible), .u-header a.u-nav-link[href*="demo"]:is(:hover,:focus-visible){
  --sb-percent:20%; --sb-offset:95deg; --sb-shine:var(--sb-highlight-subtle);
}
.lg-btn:is(:hover,:focus-visible), .lg-btn:is(:hover,:focus-visible)::before, .lg-btn:is(:hover,:focus-visible)::after,
.lg-pr-cta:is(:hover,:focus-visible), .lg-pr-cta:is(:hover,:focus-visible)::before, .lg-pr-cta:is(:hover,:focus-visible)::after,
.lg-app-cta:is(:hover,:focus-visible), .lg-app-cta:is(:hover,:focus-visible)::before, .lg-app-cta:is(:hover,:focus-visible)::after,
.u-btn.u-button-style:is(:hover,:focus-visible), .u-btn.u-button-style:is(:hover,:focus-visible)::before, .u-btn.u-button-style:is(:hover,:focus-visible)::after,
.u-header a.u-nav-link[href*="demo"]:is(:hover,:focus-visible), .u-header a.u-nav-link[href*="demo"]:is(:hover,:focus-visible)::before, .u-header a.u-nav-link[href*="demo"]:is(:hover,:focus-visible)::after{ animation-play-state:running; }
@keyframes sb-angle{ to{ --sb-angle:360deg; } }
@keyframes sb-shimmer{ to{ rotate:360deg; } }
@media (prefers-reduced-motion: reduce){
  .lg-btn, .lg-btn::before, .lg-btn::after, .lg-pr-cta, .lg-pr-cta::before, .lg-pr-cta::after,
  .lg-app-cta, .lg-app-cta::before, .lg-app-cta::after,
  .u-btn.u-button-style, .u-btn.u-button-style::before, .u-btn.u-button-style::after,
  .u-header a.u-nav-link[href*="demo"], .u-header a.u-nav-link[href*="demo"]::before, .u-header a.u-nav-link[href*="demo"]::after{ animation:none !important; }
}

/* ============ GLASS PILLS / BADGES ============ */
.lg-eyebrow, .lg-app-badge{
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.25);
}

/* ============ HEADER: frosted glass bar ============ */
header.u-header{
  -webkit-backdrop-filter: blur(16px) saturate(120%);
          backdrop-filter: blur(16px) saturate(120%);
  background: rgba(18,20,28,.62) !important;
  border-bottom:1px solid rgba(255,255,255,.07);
  box-shadow: 0 3px 14px rgba(0,0,0,.18);
}

/* ============ HERO: deepen + gloss the trust bar ============ */
.lg-hero{ background: transparent !important; }
.lg-trustbar{
  background: var(--gl-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border:1px solid var(--gl-border); border-radius:16px; padding:18px 26px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ============ PROMO CARD media: glossy top sheen ============ */
.lg-app-media{ position:relative; }
.lg-app-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14), transparent 42%);
}

@media (prefers-reduced-motion: reduce){
  .lg-btn-primary::before, .lg-app-cta::before, .u-btn::before{ transition:none; }
  .lg-step:hover, .lg-pr-card:hover, .lg-tst-card:hover{ transform:none; }
}

/* ============ HERO — elegant floating shapes (ported from HeroGeometric) ============ */
.lg-hero{ background:#0a0a0f !important; }
.lg-hero-shapes{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
/* top/bottom vignette so shapes fade at the edges and the text stays readable */
.lg-hero-shapes::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to top, #0a0a0f 0%, transparent 42%, transparent 60%, rgba(10,10,15,.85) 100%);
}
.lg-shape{ position:absolute; opacity:0; will-change:transform,opacity;
  animation: lg-shape-in 2.4s cubic-bezier(.23,.86,.39,.96) both; animation-delay:var(--d,0s); }
.lg-shape > i{ display:block; width:100%; height:100%; position:relative; border-radius:999px;
  border:2px solid rgba(255,255,255,.15); box-shadow:0 8px 32px rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  background:linear-gradient(90deg, var(--c), transparent);
  animation: lg-shape-float 12s ease-in-out infinite; }
.lg-shape > i::after{ content:""; position:absolute; inset:0; border-radius:999px;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 70%); }
@keyframes lg-shape-in{
  from{ opacity:0; transform:translateY(-150px) rotate(var(--r-start)); }
  to  { opacity:1; transform:translateY(0) rotate(var(--r)); } }
@keyframes lg-shape-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(15px); } }
/* the 5 shapes — purple-brand palette (indigo/violet/purple/fuchsia/blue) */
.lg-shape-1{ --r:12deg;  --r-start:-3deg;  --c:rgba(99,102,241,.15);  --d:.3s; left:-5%;  top:16%;    width:600px; height:140px; }
.lg-shape-2{ --r:-15deg; --r-start:-30deg; --c:rgba(139,92,246,.15);  --d:.5s; right:-2%; top:70%;    width:500px; height:120px; }
.lg-shape-3{ --r:-8deg;  --r-start:-23deg; --c:rgba(152,128,255,.15); --d:.4s; left:6%;   bottom:6%;  width:300px; height:80px;  }
.lg-shape-4{ --r:20deg;  --r-start:5deg;   --c:rgba(208,107,255,.14); --d:.6s; right:16%; top:10%;    width:200px; height:60px;  }
.lg-shape-5{ --r:-25deg; --r-start:-40deg; --c:rgba(91,140,255,.14);  --d:.7s; left:22%;  top:6%;     width:150px; height:40px;  }
@media (max-width:767px){
  .lg-shape-1{ width:320px; height:80px; } .lg-shape-2{ width:280px; height:70px; }
  .lg-shape-3{ width:180px; height:50px; } .lg-shape-4{ width:130px; height:40px; }
  .lg-shape-5{ width:100px; height:30px; }
}
@media (prefers-reduced-motion: reduce){
  .lg-shape{ animation:none !important; opacity:1 !important; }
  .lg-shape > i{ animation:none !important; }
}

/* ============ FAQ (data-cms-section=faq) — match the glossy dark/purple theme ============ */
/* each Q&A item becomes a glass card with rounded corners + a gap */
[data-cms-section="faq"] .u-accordion-item{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  margin-bottom: 12px !important;
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
[data-cms-section="faq"] .u-accordion-item:hover{ border-color: rgba(152,128,255,.35) !important; }
/* question header: replace the lime-yellow with transparent glass + white text */
[data-cms-section="faq"] .u-accordion-link,
[data-cms-section="faq"] a.u-accordion-link.u-custom-color-4{
  background: transparent !important; background-color: transparent !important;
  color: #fff !important;
  border: none !important; border-radius: 0 !important;
  padding: 20px 24px !important;
  font-weight: 600; letter-spacing: .01em;
}
[data-cms-section="faq"] .u-accordion-link .u-accordion-link-text{ color:#fff !important; }
/* open question: subtle purple tint + left accent */
[data-cms-section="faq"] .u-accordion-item:has(.u-accordion-link.active){
  background: rgba(152,128,255,.09) !important;
  border-color: rgba(152,128,255,.4) !important;
}
[data-cms-section="faq"] .u-accordion-link.active,
[data-cms-section="faq"] a.u-accordion-link.active.u-custom-color-4{
  background: transparent !important; background-color: transparent !important; color:#fff !important;
}
/* the +/- icon → brand purple */
[data-cms-section="faq"] .u-accordion-link-icon,
[data-cms-section="faq"] .u-accordion-link-icon svg,
[data-cms-section="faq"] .u-accordion-link-icon .u-svg-content{
  color:#9880ff !important; fill:#9880ff !important;
}
/* answer pane: transparent so the glass card shows, muted readable text */
[data-cms-section="faq"] .u-accordion-pane,
[data-cms-section="faq"] .u-accordion-pane.u-custom-color-2{
  background: transparent !important; background-color: transparent !important;
  color: #c7ccd8 !important;
  padding: 2px 24px 22px !important;
}

/* ============ RESPONSIVE fixes ============ */
/* keep every button label on one line (no 2-line wrap in tight footers) */
.lg-btn, .lg-pr-cta, .lg-app-cta, .u-btn.u-button-style, .u-header a.u-nav-link[href*="demo"]{ white-space:nowrap; }
/* on narrow mobile, let the promo-card footer wrap so the share row drops below the CTA */
@media (max-width:575px){
  [data-cms-list="promocards"] .lg-app-foot{ flex-wrap:wrap; }
}

/* mobile off-canvas menu: the compact-header tweak had left the OPEN drawer at
   header height (~81px), so the nav items spilled out below it. Restore a proper
   full-height drawer + full-screen overlay (only when open; desktop unaffected). */
.u-offcanvas.open .u-nav-container-collapse{ height:100vh !important; }
.u-offcanvas.open .u-nav-container-collapse > .u-container-style,
.u-offcanvas.open .u-nav-container-collapse .u-inner-container-layout,
.u-offcanvas.open .u-nav-container-collapse .u-sidenav{ height:100vh !important; min-height:100vh !important; }
.u-offcanvas.open .u-menu-overlay{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; }

/* ============ SERVICE PAGES (lg-svc-*) — clean glossy service landers ============ */
.lg-svc-hero{ padding:140px 24px 88px; }
.lg-svc-features{ padding:76px 24px; background:#12141b; position:relative; z-index:1; }
.lg-svc-wrap{ max-width:1080px; margin:0 auto; }
.lg-svc-h2{ font-family:'Archivo Black',sans-serif; font-weight:400; text-align:center; font-size:clamp(1.6rem,4vw,2.1rem); color:#fff; margin:0 0 10px; }
.lg-svc-lead{ text-align:center; color:#9aa0b3; max-width:640px; margin:0 auto 44px; line-height:1.6; }
.lg-svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.lg-svc-card{ position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:26px 24px; transition:border-color .25s ease, transform .25s ease; }
.lg-svc-card:hover{ border-color:rgba(152,128,255,.4); transform:translateY(-3px); }
.lg-svc-bar{ width:34px; height:4px; border-radius:3px; background:linear-gradient(90deg,#9880ff,#7c5cff); margin-bottom:16px; }
.lg-svc-card h3{ margin:0 0 8px; font-size:1.1rem; color:#fff; }
.lg-svc-card p{ margin:0; color:#9aa0b3; font-size:.95rem; line-height:1.55; }
.lg-svc-why{ padding:76px 24px; position:relative; z-index:1; }
.lg-svc-why .lg-svc-wrap{ max-width:920px; text-align:center; }
.lg-svc-points{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:22px; margin-top:36px; }
.lg-svc-point b{ display:block; color:#b9a8ff; font-size:1.4rem; font-family:'Archivo Black',sans-serif; font-weight:400; margin-bottom:6px; }
.lg-svc-point span{ color:#9aa0b3; font-size:.95rem; }
.lg-svc-cta{ padding:82px 24px; text-align:center; background:linear-gradient(180deg,#12141b,#0d0e13); position:relative; z-index:1; }
.lg-svc-cta h2{ font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(1.6rem,4vw,2.1rem); color:#fff; margin:0 0 12px; }
.lg-svc-cta p{ color:#9aa0b3; margin:0 0 28px; max-width:520px; margin-left:auto; margin-right:auto; }
@media (max-width:575px){ .lg-svc-hero{ padding:96px 18px 58px; } .lg-svc-features,.lg-svc-why{ padding:54px 18px; } }

/* ---- service page: AI band + how-it-works steps ---- */
.lg-svc-ai{ padding:78px 24px; background:linear-gradient(180deg,#12141b,#151220); position:relative; z-index:1; }
.lg-svc-ai .lg-svc-wrap{ max-width:900px; text-align:center; }
.lg-svc-ai-badge{ display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600; letter-spacing:.02em; color:#c7bcff; background:rgba(152,128,255,.12); border:1px solid rgba(152,128,255,.3); padding:7px 16px; border-radius:999px; margin-bottom:22px; }
.lg-svc-ai-badge .lg-dotpulse{ width:7px; height:7px; border-radius:50%; background:#9880ff; box-shadow:0 0 0 4px rgba(152,128,255,.25); }
.lg-svc-steps-wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:40px; text-align:left; }
.lg-svc-step{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:26px 24px; }
.lg-svc-step-n{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-family:'Archivo Black',sans-serif; background:rgba(152,128,255,.14); border:1px solid rgba(152,128,255,.3); color:#b9a8ff; margin-bottom:16px; }
.lg-svc-step h3{ margin:0 0 8px; font-size:1.1rem; color:#fff; }
.lg-svc-step p{ margin:0; color:#9aa0b3; font-size:.95rem; line-height:1.55; }

/* ---- service page: work showcase galleries ---- */
.lg-svc-show{ padding:76px 24px; position:relative; z-index:1; }
.lg-svc-show.alt{ background:#12141b; }
.lg-svc-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:36px; }
.lg-svc-shot{ position:relative; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03); transition:border-color .25s ease, transform .25s ease; }
.lg-svc-shot img, .lg-svc-shot video{ display:block; width:100%; height:280px; object-fit:cover; }
.lg-svc-shot:hover{ border-color:rgba(152,128,255,.4); transform:translateY(-3px); }
.lg-svc-obj{ max-width:760px; margin:34px auto 0; text-align:center; }
.lg-svc-obj h3{ color:#b9a8ff; font-size:1rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 10px; }
.lg-svc-obj p{ color:#9aa0b3; line-height:1.65; margin:0; }
/* copy sample cards (for the copywriting page) */
.lg-svc-samples{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; margin-top:36px; text-align:left; }
.lg-svc-sample{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:26px 24px; }
.lg-svc-sample .tag{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#b9a8ff; background:rgba(152,128,255,.12); border:1px solid rgba(152,128,255,.3); padding:4px 12px; border-radius:999px; margin-bottom:14px; }
.lg-svc-sample h3{ margin:0 0 8px; font-size:1.25rem; color:#fff; line-height:1.3; }
.lg-svc-sample p{ margin:0; color:#9aa0b3; font-size:.95rem; line-height:1.6; }
@media (max-width:575px){ .lg-svc-shot img, .lg-svc-shot video{ height:220px; } }

/* ---- service inquiry form (lg-form) + dark-glass restyle of existing forms ---- */
.lg-svc-form{ padding:80px 24px; background:#12141b; position:relative; z-index:1; }
.lg-svc-form .lg-svc-wrap{ max-width:640px; }
.lg-form{ display:flex; flex-direction:column; gap:16px; margin-top:34px; text-align:left; }
.lg-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:575px){ .lg-form-row{ grid-template-columns:1fr; } }
.lg-form label{ display:flex; flex-direction:column; gap:7px; color:#c3c8d4; font-size:.88rem; font-weight:600; letter-spacing:.02em; }
.lg-form input, .lg-form textarea{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:11px;
  color:#fff; padding:13px 15px; font-size:.98rem; font-family:'Open Sans',sans-serif;
  transition:border-color .2s ease, background .2s ease; width:100%;
}
.lg-form textarea{ min-height:130px; resize:vertical; }
.lg-form input::placeholder, .lg-form textarea::placeholder{ color:#788093; }
.lg-form input:focus, .lg-form textarea:focus{ outline:none; border-color:#9880ff; background:rgba(152,128,255,.07); }
.lg-form .lg-btn{ align-self:flex-start; }
.lg-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.lg-form-ok{ color:#7ee2a8; margin:0; }
.lg-form-err{ color:#ff8f8f; margin:0; }
/* existing Nicepage forms (Contact / free-demo): light grey inputs clash with
   the dark glossy theme — restyle them to the same dark glass fields. */
.u-form input.u-input, .u-form textarea.u-input, .u-form select.u-input{
  background-color:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important; border-radius:11px !important;
  color:#fff !important;
}
.u-form input.u-input::placeholder, .u-form textarea.u-input::placeholder{ color:#788093 !important; }
.u-form input.u-input:focus, .u-form textarea.u-input:focus, .u-form select.u-input:focus{
  outline:none !important; border-color:#9880ff !important; background-color:rgba(152,128,255,.07) !important;
}
.u-form select.u-input option{ background:#1b1d27; color:#fff; }

/* ---- header: language flags must not overlap the menu (desktop) ---- */
/* compact-header margins push .u-language into the first nav item; shift it left */
@media (min-width: 992px){
  header.u-header .u-language{ transform: translateX(-56px); }
}

/* ---- mobile hamburger drawer matches the header's glass style ---- */
.u-header .u-nav-container-collapse .u-sidenav{
  background: rgba(18,20,28,.96) !important;
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 8px 0 30px rgba(0,0,0,.45);
}
.u-header .u-popupmenu-items .u-nav-link{
  color:#fff !important; font-weight:600; letter-spacing:.01em;
  border-radius:10px;
  transition: color .2s ease, background .2s ease;
}
.u-header .u-popupmenu-items .u-nav-link:hover{
  color:#b9a8ff !important; background: rgba(152,128,255,.08) !important;
}
.u-header .u-menu-close{ color:#fff; }
.u-header .u-menu-close:hover{ color:#b9a8ff; }

/* ---- FAQ: kill Nicepage's lime hover/active flash on the question links ----
   nicepage.css paints #e8f24c !important via (0,4,1) selectors like
   a.u-button-style.u-button-style.u-active-custom-color-4:active — out-specify
   them (attr + 3 classes = 0,5,1) and keep the quiet purple tint instead. */
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link:hover,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link:focus,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link:active,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link.hover,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link.active{
  background: rgba(152,128,255,.08) !important;
  background-color: rgba(152,128,255,.08) !important;
  color: #fff !important;
}
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link:hover .u-accordion-link-text,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link:focus .u-accordion-link-text,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link:active .u-accordion-link-text,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link.active .u-accordion-link-text{
  color: #fff !important;
}
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link:hover .u-accordion-link-icon,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link:active .u-accordion-link-icon,
[data-cms-section="faq"] a.u-accordion-link.u-accordion-link.u-accordion-link.active .u-accordion-link-icon{
  color: #9880ff !important; fill: #9880ff !important;
}

/* trustbar logos live inside an editable list container — keep flex layout intact */
.lg-trustbar .lg-tb-logos{ display:contents; }