/* === OVERFLOW FIX - prevents horizontal scroll / white stripe === */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
.elementor-section,
.e-con,
.elementor-container,
.elementor-widget-container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =============================================================
   FG-STROY Design System — Midnight Violet + Electric Lime
   Near-monochrome violet system with lime as typographic device
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ── Brand & Accent ── */
  --c-midnight:        #150f23;  /* Primary action, deepest surface */
  --c-ink-violet:      #1f1633;  /* Hero canvas + body text on light */
  --c-lime:            #c2ef4e;  /* Headline highlight chip + footer divider */
  --c-pink:            #fa7faa;  /* Sticker outlines, chart points */
  --c-link:            #6a5fc1;  /* Inline link emphasis */
  --c-deep-violet:     #422082;  /* Select fills, spotlight cards */
  --c-mid-violet:      #79628c;  /* Tag chips, faint accent on dark */

  /* ── Surfaces ── */
  --s-dark-canvas:     #1f1633;  /* Hero, product, feature bg */
  --s-night:           #150f23;  /* Cards on dark, code blocks, featured tier */
  --s-light-canvas:    #ffffff;  /* Pricing, contact, dense pages */
  --s-press-light:     #f0f0f0;  /* Pressed inverted on dark */
  --s-press-stronger:  #efefef;  /* Active inverted/light buttons */

  /* ── Hairlines ── */
  --h-violet:          #362d59;  /* 1px borders on dark cards */
  --h-cool:            #cfcfdb;  /* 1px borders on text inputs */
  --h-cloud:           #e5e7eb;  /* Pricing card borders, table dividers */

  /* ── Text ── */
  --t-on-primary:      #ffffff;  /* Text on dark canvas + CTA labels */
  --t-ink:             #1f1633;  /* Body text on light canvas */
  --t-ink-press:       #1a1a1a;  /* Pressed inverted buttons */
  --t-on-dark-muted:   #bdb8c0;  /* Secondary text on dark canvas */

  /* ── Fonts ── */
  --font-display: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --font-ui:      "Manrope", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", Monaco, monospace;

  /* ── Radii ── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  10px;
  --radius-xxl: 14px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-1:     0 2px 6px 0 rgba(21, 15, 35, 0.18);
  --shadow-2:     0 12px 28px -10px rgba(21, 15, 35, 0.34), 0 4px 8px -4px rgba(21, 15, 35, 0.18);
  --shadow-glow:  0 0 0 3px rgba(194, 239, 78, 0.30);

  /* ── Legacy aliases (so existing inline styles still work for now) ── */
  --color-primary:           var(--c-midnight);
  --color-ink-deep:          var(--c-ink-violet);
  --color-on-primary:        var(--t-on-primary);
  --color-accent-terra:      var(--c-pink);
  --color-accent-terra-deep: #e26a8f;
  --color-accent-ochre:      var(--c-lime);
  --color-accent-ochre-deep: #9bc63a;
  --color-surface-canvas-dark:  var(--s-dark-canvas);
  --color-surface-canvas-light: var(--s-light-canvas);
  --color-surface-night:        var(--s-night);
  --color-surface-paper:        #fafafa;
  --color-surface-sand:         var(--s-press-stronger);
  --color-hairline-stone:  var(--h-cloud);
  --color-hairline-iron:   var(--h-violet);
  --color-hairline-shadow: var(--h-cool);
  --color-ink:           var(--t-ink);
  --color-ink-press:     var(--t-ink-press);
  --color-ink-muted:     #5a5168;
  --color-on-dark-muted: var(--t-on-dark-muted);
  --color-on-dark-faint: rgba(255, 255, 255, 0.10);
  --color-ring-focus:    rgba(194, 239, 78, 0.40);
}

/* ── Global resets ── */
body {
  font-family: var(--font-ui);
  color: var(--t-ink);
  background: var(--s-light-canvas);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }

.elementor-section, .e-container { font-family: var(--font-ui); }
.elementor-widget-heading .elementor-heading-title { font-family: var(--font-display); }

/* ── Lime highlight chip (headline keyword device) ── */
.chip-lime,
.chip-ochre {  /* legacy alias */
  background: var(--c-lime);
  color: var(--t-ink);
  border-radius: var(--radius-xs);
  padding: 0 12px;
  display: inline-block;
  box-shadow: none;
  font-weight: inherit;
}

.chip-pink,
.chip-terra {
  background: var(--c-pink);
  color: var(--t-ink);
  border-radius: var(--radius-xs);
  padding: 0 12px;
  display: inline-block;
}

/* ── Dark canvas with subtle noise grain ── */
.bg-dark,
.fgs-section-dark {
  background-color: var(--s-dark-canvas);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,0.06) 50%, transparent 51%),
    radial-gradient(1px 1px   at 28% 62%, rgba(194,239,78,0.10)  50%, transparent 51%),
    radial-gradient(1px 1px   at 41% 88%, rgba(255,255,255,0.07) 50%, transparent 51%),
    radial-gradient(2px 2px   at 58% 24%, rgba(255,255,255,0.04) 50%, transparent 51%),
    radial-gradient(1px 1px   at 72% 71%, rgba(250,127,170,0.12) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 84% 12%, rgba(255,255,255,0.06) 50%, transparent 51%),
    radial-gradient(1px 1px   at 93% 48%, rgba(255,255,255,0.05) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6%  78%, rgba(255,255,255,0.06) 50%, transparent 51%);
  color: var(--t-on-primary);
}

/* Light canvas */
.bg-light,
.fgs-section-light {
  background-color: var(--s-light-canvas);
}

/* ── Eyebrow ── */
.fgs-eyebrow {
  font: 700 13px/1.4 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-ink-muted);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fgs-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--c-lime);
}
.fgs-eyebrow.on-dark {
  color: var(--t-on-dark-muted);
}

/* ── Buttons ── */
.fgs-btn {
  font: 700 14px/1.14 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 13px 22px;
  border-radius: var(--radius-md);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity .12s ease, background-color .12s ease;
  text-decoration: none;
}
.fgs-btn:hover { opacity: 0.92; }
.fgs-btn-primary  { background: var(--c-midnight); color: var(--t-on-primary); }
.fgs-btn-primary:hover { background: var(--c-ink-violet); opacity: 1; }
.fgs-btn-violet   { background: var(--c-deep-violet); color: var(--t-on-primary); }
.fgs-btn-inverted { background: var(--t-on-primary); color: var(--t-ink); box-shadow: var(--shadow-1); }
.fgs-btn-inverted:hover { background: var(--s-press-stronger); opacity: 1; }
.fgs-btn-ghost-dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--t-on-primary);
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  font-weight: 500;
}
.fgs-btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.14); opacity: 1; }

/* ── Service cards ── */
.fgs-service-card {
  background: var(--s-light-canvas);
  border: 1px solid var(--h-cloud);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.fgs-service-card:hover {
  border-color: var(--c-link);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.fgs-service-card .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--c-link);
  font-weight: 700;
  letter-spacing: 1px;
}
.fgs-service-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.3px;
  margin: 0;
  color: var(--t-ink);
}
.fgs-service-card p {
  font: 400 15px/1.6 var(--font-ui);
  color: #5a5168;
  margin: 0;
}

.fgs-tag {
  display: inline-block;
  border: 1px solid var(--c-mid-violet);
  color: var(--c-ink-violet);
  font: 600 11px/1.3 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 9px;
  border-radius: var(--radius-xs);
  background: transparent;
}

/* ── Project card (on dark) ── */
.fgs-project-card {
  background: var(--s-night);
  border-radius: var(--radius-xxl);
  border: 1px solid var(--h-violet);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fgs-project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.5);
  border-color: var(--c-mid-violet);
}
.fgs-project-card .ph {
  height: 240px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #2a2147, #1a1230);
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.fgs-project-card .card-body { padding: 24px; }
.fgs-project-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.3px;
  margin: 0 0 4px;
  color: var(--t-on-primary);
}
.fgs-project-card .type-lbl {
  font: 700 11px/1.4 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--c-lime);
}
.fgs-project-card .stats {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--t-on-dark-muted);
}

/* ── Inline links ── */
a.fgs-link,
.elementor-widget-text-editor a:not(.elementor-button):not(.fgs-btn) {
  color: var(--c-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a.fgs-link:hover { color: var(--c-deep-violet); }

/* ── Contact form ── */
.wpcf7-form { display: flex; flex-direction: column; gap: 14px; }
.wpcf7-form .wpcf7-form-control-wrap, .wpcf7-form p { margin: 0; }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--h-cool);
  border-radius: var(--radius-sm);
  background: var(--s-light-canvas);
  color: var(--t-ink);
  font: 500 16px/1.5 var(--font-ui);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
  border-color: var(--c-lime);
  box-shadow: var(--shadow-glow);
}
.wpcf7-form textarea { min-height: 120px; resize: vertical; }
.wpcf7-form input[type="submit"] {
  width: 100%;
  padding: 14px;
  background: var(--c-midnight);
  color: var(--t-on-primary);
  border: none;
  border-radius: var(--radius-md);
  font: 700 14px/1.14 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background .15s;
}
.wpcf7-form input[type="submit"]:hover { background: var(--c-ink-violet); }
.wpcf7-mail-sent-ok {
  background: rgba(194, 239, 78, 0.18) !important;
  color: var(--t-ink) !important;
  padding: 12px 16px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--c-lime) !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background: rgba(250, 127, 170, 0.15) !important;
  color: #8b1d3a !important;
  padding: 12px 16px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--c-pink) !important;
  font-family: var(--font-ui) !important;
  font-size: 14px !important;
}
.wpcf7-not-valid-tip {
  color: #c64a73;
  font-size: 12px;
  font-family: var(--font-ui);
  margin-top: 4px;
}

@keyframes fgs-hero-pan{0%{transform:scale(1.10) translateX(-4%);}100%{transform:scale(1.10) translateX(4%);}}
@-webkit-keyframes fgs-hero-pan{0%{-webkit-transform:scale(1.10) translateX(-4%);}100%{-webkit-transform:scale(1.10) translateX(4%);}}