/* ============================================================
   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; }

/* ---- mobile header: undo the desktop compact-header negative margins ----
   nicepage.css tail pulls .u-menu/-40px, .u-language/-31px, .u-cart/-24px up
   (desktop alignment); on mobile that pins everything to the screen top edge.
   Rebuild the small-screen header as one vertically-centred flex row. */
@media (max-width: 991px){
  header.u-header .u-sheet-1{
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important;
    align-items:center !important;
    min-height:60px !important; padding:0 8px;
  }
  header.u-header .u-sheet-1 > *{ width:auto !important; flex:0 0 auto; }
  header.u-header .u-logo{ order:1; margin:0 !important; height:32px !important; }
  header.u-header .u-logo img{ height:100% !important; width:auto !important; object-fit:contain; }
  header.u-header .u-language{ order:2; margin:0 12px 0 auto !important; transform:none !important; }
  header.u-header .u-menu{ order:3; margin:0 10px 0 0 !important; }
  header.u-header .u-shopping-cart{ order:4; margin:0 !important; }
}

/* ---- partner logo grid: kill the fixed min-heights that stretch the rows ----
   index.css pins .u-section-11 .u-repeater-1 to min-height 782/647/1996px
   (Nicepage bakes in the desktop row count). On mobile that 1996px is spread
   across 8 rows, so each ~95px logo sits in a 241px cell with huge gaps.
   Let the grid size to its content at every width. */
[data-cms-section="partners"] .u-repeater-1{ min-height:0 !important; }
[data-cms-section="partners"] .u-list-1{ min-height:0 !important; }
[data-cms-section="partners"] .u-sheet-1{ min-height:0 !important; }
[data-cms-section="partners"] .u-repeater-item{ align-self:center; }
@media (max-width: 991px){
  [data-cms-section="partners"] .u-repeater-1{ grid-gap:14px !important; }
  [data-cms-section="partners"] .u-list-1{ margin:34px 0 !important; }
  /* each cell also carries 30px top+bottom padding — 60px of dead space
     around a ~79px logo. Tighten it so the grid reads as one block. */
  [data-cms-section="partners"] .u-container-layout{ padding:8px 10px !important; }
}

/* ---- footer: drop the pointless hamburger, show the links themselves ----
   Nicepage renders the footer nav as an off-canvas menu (data-responsive-from
   =MD), so below ~992px the five footer links collapse into a hamburger that
   just repeats the header menu. In a footer that is noise: footers list links.
   Also rebuild the mobile footer as a centred column — the Nicepage margins
   (58/74px tops, margin-left:316px) left a large empty band. */
footer .u-menu .u-hamburger-link{ display:none !important; }
footer .u-menu .u-nav-container{
  position:static !important; display:block !important;
  width:auto !important; height:auto !important; overflow:visible !important;
}
footer .u-menu .u-nav{
  display:flex !important; flex-wrap:wrap; justify-content:center;
  gap:4px 20px; margin:0; padding:0;
}
footer .u-menu .u-nav-link{ padding:6px 2px !important; white-space:nowrap; }

/* The six social icons all ship with href="" (Nicepage hides each icon, but the
   wrapper still reserves a 28px band). Collapse it only while every link is
   blank — add a real URL in the dashboard and the row comes back by itself. */
footer .u-social-icons:not(:has(a[href]:not([href=""]))){ display:none !important; }

@media (max-width: 991px){
  footer .u-sheet-1{
    min-height:0 !important;
    display:flex !important; flex-direction:column; align-items:center;
    gap:16px; padding:26px 16px !important;
  }
  footer .u-logo{ order:1; margin:0 !important; }
  footer .u-menu{ order:2; margin:0 !important; width:100% !important; height:auto !important; }
  footer .u-social-icons{ order:3; margin:0 !important; }
}

/* ===================== SHARED HERO LAYER (all pages) =====================
   The .lg-* hero rules live in index.css, which ONLY the homepage loads —
   service pages load Social-media.css / Animation.css instead. So on
   /Video-Editing, /Content-Design and /Copywriting the hero rendered
   unstyled: .lg-hero-cta fell back to display:block, stacking the two CTAs
   with zero gap (they visually overlapped), the eyebrow lost its pill and
   the title its gradient. glossy.css is loaded by every page, so the shared
   layout belongs here. Buttons are deliberately NOT re-declared — the shiny
   CTA rule above owns them. Background/padding of .lg-hero stay owned by
   the rules above too; only layout is restored. */
.lg-hero{ position:relative; overflow:hidden; text-align:center; }
.lg-hero-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(152,128,255,.28), transparent 70%),
    radial-gradient(40% 40% at 85% 30%, rgba(91,140,255,.18), transparent 70%),
    radial-gradient(45% 45% at 12% 65%, rgba(152,128,255,.14), transparent 70%); }
.lg-hero-grid{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 25%,#000,transparent 80%);
          mask-image: radial-gradient(70% 60% at 50% 25%,#000,transparent 80%); }
.lg-hero-inner{ position:relative; z-index:1; max-width:940px; margin:0 auto; }
.lg-eyebrow{ 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:26px; }
.lg-dotpulse{ width:7px; height:7px; border-radius:50%; background:#9880ff; box-shadow:0 0 0 4px rgba(152,128,255,.25); }
.lg-hero-title{ font-family:'Archivo Black',sans-serif; font-weight:400; margin:0 0 20px;
  font-size:clamp(2.3rem,6vw,4.4rem); line-height:1.04; letter-spacing:-.02em;
  background:linear-gradient(178deg,#fff 52%,#c3b6ff 122%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.lg-hero-sub{ max-width:620px; margin:0 auto 34px; color:#9aa0b3; font-size:clamp(1.02rem,1.6vw,1.2rem); line-height:1.6; }
/* the actual overlap fix: lay the CTAs out with a real gap */
.lg-hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:38px; }
.lg-hero-trust{ display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; color:#9aa0b3; font-size:.92rem; }
.lg-hero-trust b{ color:#fff; font-weight:600; }
.lg-stars{ color:#ffc93c; letter-spacing:1px; }
.lg-dot{ opacity:.4; }

/* ---- mobile drawer: dim the PAGE, not the panel ----
   Nicepage puts .u-menu-overlay (black, opacity .7) inside
   .u-nav-container-collapse *after* .u-sidenav, both at z-index:auto — so the
   dimmer paints over the panel too and the whole screen goes dark, menu
   included. Stack them explicitly: overlay below, panel above. */
.u-header .u-nav-container-collapse .u-menu-overlay{ z-index:1 !important; }
.u-header .u-nav-container-collapse .u-sidenav{ position:relative; z-index:2 !important; }

/* panel styled like the header bar: same glass, same type, purple accents */
.u-header .u-nav-container-collapse .u-sidenav{
  padding-top:14px;
}
.u-header .u-popupmenu-items .u-nav-item{ width:100%; }
.u-header .u-popupmenu-items .u-nav-link{
  display:block; text-align:left; padding:12px 22px !important;
  font-size:1rem; letter-spacing:.01em;
}
/* the Free-demo entry keeps the header's purple pill treatment */
.u-header .u-nav-container-collapse a.u-nav-link[href*="demo"]{
  margin:8px 18px; text-align:center;
}
.u-header .u-menu-close{ padding:10px 18px; }

/* ---- responsive menu depth ----
   The global menu now carries the six service pages so the mobile drawer has
   a direct link to each. Eleven items do NOT fit the desktop header — they
   wrapped to two rows and collided with the logo and the cart — so above the
   drawer breakpoint the header shows only the five primary entries; "Services"
   remains the way in (it scrolls to the grid that links all six). */
@media (min-width: 992px){
  .u-header .u-nav-container .u-nav-item:has(> a[href="/Social-media.html"]),
  .u-header .u-nav-container .u-nav-item:has(> a[href="/Content-Design.html"]),
  .u-header .u-nav-container .u-nav-item:has(> a[href="/Animation.html"]),
  .u-header .u-nav-container .u-nav-item:has(> a[href="/Video-Editing.html"]),
  .u-header .u-nav-container .u-nav-item:has(> a[href="/Product-Photography.html"]),
  .u-header .u-nav-container .u-nav-item:has(> a[href="/Copywriting.html"]){
    display:none !important;
  }
}
/* The footer is fed by the same global menu, so it inherited all eleven items:
   at 1024px and above the link row grew to 1105px and overlapped both the logo
   and the social icons, and at 390px it wrapped to five rows. A footer lists
   the primary destinations — the full service list belongs in the drawer — so
   the footer keeps the same five entries at every width. */
footer .u-nav-item:has(> a[href="/Social-media.html"]),
footer .u-nav-item:has(> a[href="/Content-Design.html"]),
footer .u-nav-item:has(> a[href="/Animation.html"]),
footer .u-nav-item:has(> a[href="/Video-Editing.html"]),
footer .u-nav-item:has(> a[href="/Product-Photography.html"]),
footer .u-nav-item:has(> a[href="/Copywriting.html"]){
  display:none !important;
}

/* ===================== FREE-DEMO / GRATIS-DEMO PAGES =====================
   These two pages are the paid-funnel landing pages. They were built from a
   bare Nicepage section shell, so the sections carry the template's tall
   min-heights while holding two lines of copy each, the "What do you need?"
   checkboxes render as raw browser defaults, and the three price tiers sit as
   three loose paragraphs. Everything below is layout only — no copy changes. */

/* 1) tighten the near-empty sections: let them size to their content */
#how-it-works .u-sheet, #why-logoland .u-sheet, #final-cta .u-sheet,
#fixed-prices .u-sheet, #lead .u-sheet{ min-height:0 !important; }
#how-it-works, #why-logoland, #final-cta{ padding:52px 20px !important; }
#fixed-prices{ padding:56px 20px !important; }
#how-it-works .u-sheet > *, #why-logoland .u-sheet > *,
#final-cta .u-sheet > *, #fixed-prices .u-sheet > *{ margin-top:0 !important; }
/* Nicepage positions each element with a trailing margin (the CTA carries
   margin-bottom:53px), which stacked on top of the section padding and left a
   dead band under every button. */
#how-it-works .u-sheet > *:last-child, #why-logoland .u-sheet > *:last-child,
#final-cta .u-sheet > *:last-child, #fixed-prices .u-sheet > *:last-child,
#lead .u-sheet > *:last-child{ margin-bottom:0 !important; }

/* 2) the "What do you need?" checkboxes become real selectable chips */
#lead .u-form-checkbox{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
#lead .u-form-checkbox br{ display:none; }
#lead .u-form-checkbox label{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:10px 16px; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
  color:#e7e7ea; font-size:.94rem; line-height:1;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}
#lead .u-form-checkbox label:hover{ border-color:rgba(152,128,255,.45); background:rgba(152,128,255,.08); }
#lead .u-form-checkbox input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; margin:0;
  width:18px; height:18px; border-radius:6px; flex:0 0 18px;
  border:1px solid rgba(255,255,255,.3); background:transparent;
  display:grid; place-content:center; transition:background .18s ease, border-color .18s ease;
}
#lead .u-form-checkbox input[type="checkbox"]::after{
  content:""; width:10px; height:10px; border-radius:2px; transform:scale(0);
  background:#fff; transition:transform .15s ease;
  clip-path:polygon(14% 44%, 0 60%, 40% 100%, 100% 22%, 84% 6%, 40% 68%);
}
#lead .u-form-checkbox input[type="checkbox"]:checked{ background:#9880ff; border-color:#9880ff; }
#lead .u-form-checkbox input[type="checkbox"]:checked::after{ transform:scale(1); }
#lead .u-form-checkbox label:has(input:checked){
  border-color:#9880ff; background:rgba(152,128,255,.14); color:#fff;
}
#lead .u-form-checkbox input[type="checkbox"]:focus-visible{ outline:2px solid #b9a8ff; outline-offset:3px; }

/* 3) the three price tiers read as one row of cards, not three stray lines */
#fixed-prices .u-sheet{ display:flex; flex-direction:column; align-items:center; }
#fixed-prices .u-text:not(.u-text-1){
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09);
  border-radius:16px; padding:24px 22px; margin:0 !important;
  max-width:340px; text-align:left; line-height:1.6;
}
@media (min-width: 900px){
  #fixed-prices .u-sheet{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px; align-items:stretch; justify-items:stretch; }
  #fixed-prices .u-text-1{ grid-column:1/-1; justify-self:center; }
  #fixed-prices .u-text:not(.u-text-1){ max-width:none; height:100%; }
  #fixed-prices .u-btn{ grid-column:1/-1; justify-self:center; }
}
/* one CTA per price section, not one per tier */
#fixed-prices .u-btn:not(:last-of-type){ display:none !important; }