/* ============================================================
   GLASS THEME #062 "BARF – FROSTED"
   logicsdev/assets/css/glass.css  — loaded after every other stylesheet.

   Colours, blur and glass strength come from CSS variables. They can be
   changed without code in: Appearance > Customize > LogicsDev – edit website
   > Site-wide: colours & glass.
   ============================================================ */

/* ── PAGE BACKGROUND: icy gradient + soft round shapes behind the glass ── */
html { background: var(--bg-1); }

body {
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 100%) fixed;
  color: var(--white);
  position: relative;
  isolation: isolate;
}

/* Round shapes behind the glass. They float slowly (Customizer: "Animate the round shapes"). */
.ld-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--shape-opacity, 1);
}
.ld-bg span {
  position: absolute;
  border-radius: 50%;
  translate: -50% -50%;
  will-change: transform;
  animation: ldFloatA var(--shape-speed, 22s) ease-in-out infinite alternate;
}
.ld-bg__c1 { left: 30%; top: 8%; width: 44vmax; height: 44vmax; background: var(--shape-1); }
.ld-bg__c2 { left: 74%; top: 92%; width: 52vmax; height: 52vmax; background: var(--shape-2); animation-name: ldFloatB !important; animation-duration: calc(var(--shape-speed, 22s) * 1.25) !important; }
.ld-bg__c3 { left: 96%; top: 45%; width: 28vmax; height: 28vmax; background: var(--shape-3); animation-name: ldFloatC !important; animation-duration: calc(var(--shape-speed, 22s) * .9) !important; }
.ld-bg__c4 { left: 8%; top: 72%; width: 16vmax; height: 16vmax; background: var(--shape-2); animation-name: ldFloatD !important; animation-duration: calc(var(--shape-speed, 22s) * .7) !important; }

@keyframes ldFloatA { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, -6vh) scale(1.06); } 100% { transform: translate(14vw, 4vh) scale(.96); } }
@keyframes ldFloatB { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-10vw, 8vh) scale(.94); } 100% { transform: translate(-4vw, 18vh) scale(1.05); } }
@keyframes ldFloatC { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12vw, -10vh) scale(1.08); } 100% { transform: translate(6vw, -16vh) scale(1); } }
@keyframes ldFloatD { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(14vw, 10vh) scale(1.3); } 100% { transform: translate(-6vw, 20vh) scale(.9); } }

body.ld-no-shapes .ld-bg { display: none; }
body.ld-shapes-still .ld-bg span { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ld-bg span { animation: none !important; } }

::selection { background: var(--orange); color: #fff; }

/* ── SECTIONS: let the background shine through ─────────────── */
.ld-services,
.ld-platforms,
.ld-why,
.ld-why-about,
.ld-markets,
.hww-section,
.ld-page-hero,
.ld-story-section,
.ld-values-section,
.ld-team-section,
.ld-seo,
.ld-faq,
.ld-hero {
  background: transparent;
}

/* ── THE GLASS RECIPE ───────────────────────────────────────── */
.ld-service-card,
.ld-plat-card,
.ld-market-card,
.ld-global-card,
.ld-value-card,
.ld-value-card-new,
.ld-team-card,
.hww-card,
.ld-seo__block,
.ld-faq__item,
.ld-contact-panel,
.ld-why__panels,
.ld-story__stat,
.ld-story__milestones,
.ld-about__stats,
.ld-hero__stats > div,
.ld-step,
.platform-item,
.ld-markets__also-chips span,
.country-chip,
.ld-extras__card,
.ld-glass-page__body {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-soft);
}

.ld-service-card,
.ld-plat-card,
.ld-market-card,
.ld-global-card,
.ld-value-card,
.ld-value-card-new,
.ld-team-card,
.hww-card,
.ld-seo__block,
.ld-contact-panel,
.ld-why__panels,
.ld-story__milestones,
.ld-extras__card,
.ld-glass-page__body {
  border-radius: var(--glass-radius, 24px);
}

.ld-hero__stats > div,
.ld-step,
.ld-story__stat,
.ld-about__stats,
.ld-faq__item,
.platform-item { border-radius: 14px; }

.ld-markets__also-chips span,
.country-chip { border-radius: 99px; }

.ld-service-card:hover,
.ld-plat-card:hover,
.ld-market-card:hover,
.ld-value-card-new:hover,
.ld-team-card:hover,
.hww-card:hover,
.ld-seo__block:hover,
.platform-item:hover {
  background: var(--surface-3);
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 14px 40px rgba(30, 70, 110, .16);
}

/* Glass sheets for the ticker and footer */
.ld-ticker-wrap,
.ld-footer {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border-color: var(--glass-edge);
}

/* ── HEADER ─────────────────────────────────────────────────── */
.ld-header.scrolled .ld-nav {
  background: rgba(255, 255, 255, .6);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 6px 24px rgba(30, 70, 110, .08);
}
.ld-mega__panel {
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
}
.ld-mobile-menu { border-bottom: 1px solid var(--glass-edge); }
.ld-nav__links a.ld-nav__cta,
.ld-nav__cta { color: #fff !important; border-radius: 99px; }
.ld-logo img { height: var(--logo-h, 40px); }
body.ld-logo-dark .ld-logo img { filter: brightness(0) saturate(100%) invert(12%) sepia(28%) saturate(1500%) hue-rotate(178deg); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn-primary,
.ld-nav__cta { border-radius: 99px; color: #fff; }
.btn-primary:hover { color: #fff; box-shadow: 0 10px 28px var(--orange-glow); }
.btn-secondary {
  border-radius: 99px;
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-edge);
}
.btn-dark { background: var(--white); color: var(--black); border-radius: 99px; }
.btn-dark:hover { background: #0c1b2b; color: #fff; }

/* CTA band: deep accent glass panel */
.ld-cta-band {
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .22) 0 18%, transparent 18.5%),
    radial-gradient(circle at 88% 85%, rgba(255, 255, 255, .14) 0 22%, transparent 22.5%),
    var(--orange);
  color: #fff;
}
.ld-cta-band h2 { color: #fff; }

/* ── FORMS ──────────────────────────────────────────────────── */
.ld-form-group input,
.ld-form-group select,
.ld-form-group textarea {
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(19, 38, 58, .14);
  color: var(--white);
  border-radius: 12px;
}
.ld-form-group input:focus,
.ld-form-group select:focus,
.ld-form-group textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-dim);
  outline: none;
}
.ld-form-group select option { background: #fff; color: #13263a; }

/* ── ICONS & SMALL DETAILS ──────────────────────────────────── */
.ld-pin { color: var(--orange); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--orange-dim); }
.ld-pin svg { width: 22px; height: 22px; }
.market-flag.ld-pin { font-size: 0; margin-bottom: 1rem; }
.ld-service-card__icon svg[stroke="var(--orange)"] { stroke: var(--orange); }


a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ── EXTRA CONTENT BAND (photos + page editor blocks) ───────── */
.ld-extras { padding: 70px 6vw; display: grid; gap: 28px; }
.ld-extras__head { max-width: 760px; }
.ld-extras__head h2 { margin-top: .4rem; }
.ld-extras__head p { color: var(--white-soft); line-height: 1.8; margin-top: .8rem; }
.ld-extras__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.ld-extras__card { overflow: hidden; display: grid; }
.ld-extras__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ld-extras__card figcaption { padding: 14px 18px; color: var(--white-soft); font-size: .9rem; line-height: 1.6; }
.ld-extras__card figcaption strong { display: block; color: var(--white); font-size: 1rem; margin-bottom: 2px; }

.ld-content-blocks { max-width: 900px; color: var(--white-soft); line-height: 1.85; font-size: 1rem; }
.ld-content-blocks > * + * { margin-top: 1.1rem; }
.ld-content-blocks h2, .ld-content-blocks h3, .ld-content-blocks h4 { color: var(--white); margin-top: 1.8rem; }
.ld-content-blocks a { color: var(--orange); text-decoration: underline; }
.ld-content-blocks ul, .ld-content-blocks ol { padding-left: 1.4rem; list-style: revert; }
.ld-content-blocks img { border-radius: 14px; }
.ld-content-blocks .wp-block-button__link { background: var(--orange); color: #fff; border-radius: 99px; text-decoration: none; padding: 12px 26px; }
.ld-content-blocks blockquote { border-left: 3px solid var(--orange); padding-left: 1.2rem; color: var(--white); }

/* ── SIMPLE GLASS PAGE (page.php / "LogicsDev – Glass Page") ── */
.ld-glass-page { padding: 150px 6vw 90px; display: grid; gap: 30px; }
.ld-glass-page__hero { max-width: 900px; display: grid; gap: 14px; }
.ld-glass-page__hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; }
.ld-glass-page__hero p { color: var(--white-soft); font-size: 1.1rem; line-height: 1.8; max-width: 640px; }
.ld-glass-page__media img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 22px; border: 1px solid var(--glass-edge); box-shadow: var(--shadow-soft); }
.ld-glass-page__body { padding: clamp(22px, 4vw, 48px); }
.ld-glass-page__body .ld-content-blocks { max-width: none; }

@media (max-width: 640px) {
  .ld-extras { padding: 50px 5vw; }
  .ld-glass-page { padding: 120px 5vw 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-lightning-flash, .bolt-1, .bolt-2, .bolt-3, .bolt-streak { animation: none !important; }
}

/* ============================================================
   v1.4.1 SPACING FIXES
   The old dark design drew 1px divider lines by putting cards
   edge-to-edge on a coloured grid. Glass cards need real gaps.
   ============================================================ */
.ld-seo__grid,
.ld-markets__cards,
.ld-platforms__grid {
  gap: 20px;
  background: transparent;
  border: 0;
}
.ld-platforms__grid { gap: 14px; }

.ld-story__stats {
  gap: 14px;
  background: transparent;
  border: 0;
  overflow: visible;
}

/* Cards with a top accent line: keep the line inside the rounded corners */
.ld-seo__block,
.ld-service-card,
.ld-market-card,
.ld-value-card-new,
.ld-team-card,
.hww-card,
.ld-story__stat { overflow: hidden; }

.ld-seo__block { padding: 36px 34px; }
.ld-seo__block:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* FAQ: each question is its own glass card with inner space */
.ld-faq__list {
  display: grid;
  gap: 12px;
}
.ld-faq__item,
.ld-faq__item:first-child {
  border: 1px solid var(--glass-edge);
  padding: 0 26px;
}
.ld-faq__item summary {
  padding: 1.35rem 0;
  cursor: pointer;
}
.ld-faq__item[open] { background: rgba(255, 255, 255, .42); }
.ld-faq__icon { border-radius: 10px; }
.ld-faq__item[open] .ld-faq__icon::before,
.ld-faq__item[open] .ld-faq__icon::after { background: #fff; }
.ld-faq__a p { padding: 0 2.5rem 1.5rem 0; }

@media (max-width: 1024px) {
  .ld-markets__cards { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ld-seo__grid { gap: 14px; }
  .ld-seo__block { padding: 26px 22px; }
  .ld-faq__item,
  .ld-faq__item:first-child { padding: 0 18px; }
  .ld-faq__item summary { padding: 1.1rem 0; }
  .ld-faq__a p { padding: 0 0 1.2rem; }
}
.ld-faq__item summary:hover .ld-faq__q,
.ld-faq__item[open] .ld-faq__q { color: var(--orange); }

/* Why LogicsDev: tabs and panel as two matching glass cards */
.ld-why__body { gap: 16px; border: 0; }
.ld-why__tabs {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--glass-edge);
  border-radius: var(--glass-radius, 24px);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.ld-why__tab:last-child { border-bottom: 0; }
.ld-why__tab-num { color: rgba(19, 38, 58, .32); }
.ld-why__panels { overflow: hidden; }
@media (max-width: 900px) { .ld-why__body { grid-template-columns: 1fr; } }

/* Mobile menu button: the three lines need a width */
.ld-nav__toggle { align-items: stretch; }
.ld-nav__toggle span { width: 100%; }

/* Contact form button matches the other rounded buttons */
.ld-form-submit,
.ld-contact-panel button[type="submit"],
#ldSubmitBtn { border-radius: 99px; }


/* ============================================================
   v1.4.2 READABLE TEXT: dark text everywhere
   ============================================================ */
.service-tag,
.hww-tag,
.ld-why__chip,
.ld-hero__tag,
.market-tz,
.ld-markets__also-chips span,
.country-chip {
  color: var(--orange-bright);
  font-weight: 700;
}
.ld-why__tab-num { color: rgba(0, 0, 0, .55); }
.ld-why__tab.active .ld-why__tab-num { color: var(--orange); }
.ld-form-note,
.ld-footer__bottom p,
.ld-footer__bottom { color: rgba(0, 0, 0, .75); }
.ld-form-group input::placeholder,
.ld-form-group textarea::placeholder { color: rgba(0, 0, 0, .45); }
.ld-nav__links a { color: rgba(0, 0, 0, .82); }
.ld-nav__links a:hover { color: var(--orange); }
.ld-hero__title .outlined { -webkit-text-stroke-color: var(--white); }

/* ============================================================
   v1.5.0 THEME #062 "BARF – FROSTED"
   Heavier frost: 28px blur, 40% white glass, 24px corners.
   (To go back to #061 "Saaf": Customize > Site-wide > blur 12, whiteness 16, roundness 18.)
   ============================================================ */
.ld-service-card:hover,
.ld-plat-card:hover,
.ld-market-card:hover,
.ld-value-card-new:hover,
.ld-team-card:hover,
.hww-card:hover,
.ld-seo__block:hover,
.platform-item:hover { background: var(--surface-3); border-color: rgba(255, 255, 255, .85); }
.ld-faq__item[open] { background: rgba(255, 255, 255, .6); }

/* ============================================================
   FONTS: Montserrat / Poppins (Customize > Site-wide > Font)
   Bebas Neue only has one weight and is all capitals; the other
   fonts need a bold weight on headings and the big numbers.
   ============================================================ */
body:is(.ld-font-montserrat, .ld-font-poppins) :is(h1, h2, h3, h4, h5, .stat-num, .hww-card__title, .hww-title, .ld-story__stat-num, .ld-story__tl-year, .ld-team-card__name, .ld-why__tab-num, .ld-logo) {
  font-weight: 700;
  letter-spacing: -0.01em;
}
body:is(.ld-font-montserrat, .ld-font-poppins) :is(h1, h2) { line-height: 1.08; }
body:is(.ld-font-montserrat, .ld-font-poppins) :is(h3, h4, h5) { line-height: 1.2; }
body:is(.ld-font-montserrat, .ld-font-poppins) .ld-hero__title .line { line-height: 1.02; }

/* ============================================================
   TOP BANNER HEADINGS IN CAPITALS (Customize > Site-wide)
   Capitals are wider, so the letters get a little smaller and
   a touch of spacing to stay readable and inside the screen.
   ============================================================ */
body.ld-hero-caps :is(.ld-hero__title, .ld-page-hero__content h1, .ld-glass-page__hero h1) {
  text-transform: uppercase;
}
body.ld-hero-caps:is(.ld-font-montserrat, .ld-font-poppins) .ld-hero__title { font-size: clamp(2.2rem, 6.4vw, 5.6rem); letter-spacing: .005em; }
body.ld-hero-caps:is(.ld-font-montserrat, .ld-font-poppins) :is(.ld-page-hero__content h1, .ld-glass-page__hero h1) { font-size: clamp(2rem, 4.6vw, 4rem); letter-spacing: .005em; }
@media (max-width: 480px) {
  body.ld-hero-caps:is(.ld-font-montserrat, .ld-font-poppins) .ld-hero__title { font-size: clamp(1.7rem, 8.4vw, 2.4rem); }
  body.ld-hero-caps:is(.ld-font-montserrat, .ld-font-poppins) :is(.ld-page-hero__content h1, .ld-glass-page__hero h1) { font-size: clamp(1.6rem, 8vw, 2.2rem); overflow-wrap: anywhere; }
}
.ld-logo img { width: auto; max-width: min(260px, 60vw); object-fit: contain; }