/*
  BEEU Next-Gen Styles (plugin stylesheet), v0.2.0
  Values from beeu-nextgen-design/tokens.css.

  How it works with Elementor:
  - Elementor elements carry global classes with these names (ng-section, ng-card...). The classes in
    Elementor stay empty; this file styles them. Global classes render under their label in the page.
  - This file prints after Elementor's base styles and before the page's own styles (see beeu-ng.php),
    so it beats Elementor's defaults and anything set on an element in the editor beats it.
  - Text (h1, h2, h3, p) is styled by tag inside .ng-page at zero specificity (:where).
  - Card rows wrap and centre themselves, so there are no breakpoints to manage per page.

  0.2.0: fixes from the design-control review of the case 004 MVP (2026-10-16): hero glows under glass,
  closed and inset glass sections, balanced headings, AAA contrast on card and table text, split cards,
  centred last rows, a table with visible rules and marks, header rhythm, pill arrow, visible dividers.
  Plus motion: scroll reveal (ng-motion.js), ribbon wipe and glass light sweep (CSS), Hairline figures.
*/

:root {
  --ng-black: #000000;
  --ng-glass: #0E0E0E;
  --ng-card-top: #0D0D0D;
  --ng-bento: #171717;
  --ng-raised: #1D1D1D;
  --ng-panel: #262626;
  --ng-pill: #383838;
  --ng-wine: #2F111E;
  --ng-line-top: #666666;
  --ng-line: #484848;
  --ng-line-soft: #363636;
  --ng-line-side: #2A2A2A;
  --ng-rule: #1A1A1A;
  --ng-ink: #FFFFFF;
  --ng-ink-soft: #E6E6E6;
  --ng-ink-2: #B5B5B5;
  --ng-ink-3: #999999;
  --ng-pink: #F1638F;
  --ng-pink-soft: #F58FB8;   /* AAA on wine (7.8:1); the token pink-hot is 5.3:1 there */
  --ng-cyan: #4EDAE4;
  --ng-pink-hot: #ED5798;
  --ng-ribbon: linear-gradient(90deg, #F1638F 0%, #4EDAE4 100%);
  --ng-font: "Poppins", "Segoe UI", system-ui, sans-serif;
  --ng-font-ui: "Inter", "Segoe UI", system-ui, sans-serif;
  --ng-content: 1310px;
  --ng-gutter: 65px;
  --ng-section-pad: 100px;
  --ng-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 1024px) { :root { --ng-gutter: 40px; --ng-section-pad: 72px; } }
@media (max-width: 767px)  { :root { --ng-gutter: 20px; --ng-section-pad: 48px; } }

/* ---- Page and sections ------------------------------------------------- */

.elementor .ng-page {
  background-color: var(--ng-black);
  color: var(--ng-ink);
  font-family: var(--ng-font);
  padding: 0;
  overflow: hidden;
}

/* A section centres its own content: no wrapper element needed. */
.elementor .ng-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--ng-section-pad) max(var(--ng-gutter), calc((100% - var(--ng-content)) / 2));
}

.elementor .ng-hero {
  background-image:
    radial-gradient(55% 70% at 88% 18%, rgba(241, 99, 143, 0.16) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(45% 60% at 96% 72%, rgba(78, 218, 228, 0.14) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(40% 50% at 66% 0%, rgba(255, 170, 90, 0.10) 0%, rgba(0, 0, 0, 0) 62%);
}

/* A centred stack: eyebrow, heading, intro. Headings and groups may run to 940px, paragraphs to 780px. */
.elementor .ng-center { display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; }
.elementor .ng-center > * { max-width: 940px; }
.elementor .ng-center > p { max-width: 780px; }
/* Header rhythm from the language: eyebrow 24px to the H2 (16px gap + 8px). */
.elementor .ng-center > .ng-eyebrow { margin-bottom: 8px; }

/* ---- Type, by tag, easy to override ------------------------------------ */

:where(.ng-page) h1 {
  display: block; margin: 0; max-width: 940px;
  font: 500 clamp(28px, 4.4vw, 60px)/1.2 var(--ng-font);
  color: var(--ng-ink-soft);
  text-wrap: balance;
}
:where(.ng-page) h2 {
  display: block; margin: 0;
  font: 600 clamp(24px, 2.4vw, 32px)/1.45 var(--ng-font);
  color: var(--ng-ink);
  text-wrap: balance;
}
:where(.ng-page) h3 {
  display: block; margin: 0;
  font: 500 20px/1.35 var(--ng-font);
  color: var(--ng-ink);
  text-wrap: balance;
}
:where(.ng-page) p {
  display: block; margin: 0;
  font: 300 17px/1.75 var(--ng-font);
  color: var(--ng-ink-2);
  text-wrap: pretty;
}

.elementor .ng-eyebrow {
  font: 500 16px/1.4 var(--ng-font-ui);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ng-cyan);
}

/* The one ribbon phrase per view. Put it on the line under the H1.
   On load it wipes in pink to cyan over the plain ink (CSS only; still if motion is reduced). */
.elementor .ng-ribbon {
  display: block;
  font: 500 clamp(28px, 4.4vw, 60px)/1.2 var(--ng-font);
  text-wrap: balance;
  background-image: var(--ng-ribbon), linear-gradient(var(--ng-ink-soft), var(--ng-ink-soft));
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ng-wipe 1.2s var(--ng-ease) 0.25s both;
}
@keyframes ng-wipe { from { background-size: 0% 100%, 100% 100%; } to { background-size: 100% 100%, 100% 100%; } }

.elementor .ng-lead {
  max-width: 780px;
  font: 300 clamp(17px, 1.5vw, 20px)/1.6 var(--ng-font);
  color: var(--ng-ink-2);
}

/* ---- Surfaces ---------------------------------------------------------- */

/* Smoked glass: fill fades to black, hairline brightest on the top edge.
   A light sweeps once across the top edge as it arrives (CSS only). */
.elementor .ng-glass {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(180deg, var(--ng-glass) 0%, var(--ng-black) 100%) padding-box,
    linear-gradient(180deg, var(--ng-line-top) 0%, var(--ng-line-side) 40%, rgba(42, 42, 42, 0) 100%) border-box;
}
.elementor .ng-glass::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 10%;
  width: 30%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  opacity: 0;
  animation: ng-sweep 1.8s var(--ng-ease) 0.4s both;
}
@keyframes ng-sweep {
  0%   { transform: translateX(-30%); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateX(260%); opacity: 0; }
}

/* Glass on a whole section (e.g. a glass hero): keep the page margins and close the frame. */
.elementor .ng-section.ng-glass {
  width: calc(100% - 2 * var(--ng-gutter));
  max-width: var(--ng-content);
  margin: 24px auto 0;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px);
  background:
    linear-gradient(180deg, var(--ng-glass) 0%, var(--ng-black) 100%) padding-box,
    linear-gradient(180deg, var(--ng-line-top) 0%, var(--ng-line-side) 55%, #1F1F1F 100%) border-box;
}
/* A glass hero keeps its glows on top of the glass fill. */
.elementor .ng-hero.ng-glass {
  background:
    radial-gradient(55% 70% at 88% 18%, rgba(241, 99, 143, 0.22) 0%, rgba(0, 0, 0, 0) 62%) padding-box,
    radial-gradient(45% 60% at 96% 72%, rgba(78, 218, 228, 0.18) 0%, rgba(0, 0, 0, 0) 62%) padding-box,
    radial-gradient(40% 50% at 66% 0%, rgba(255, 170, 90, 0.12) 0%, rgba(0, 0, 0, 0) 62%) padding-box,
    linear-gradient(180deg, var(--ng-glass) 0%, var(--ng-black) 100%) padding-box,
    linear-gradient(180deg, var(--ng-line-top) 0%, var(--ng-line-side) 55%, #1F1F1F 100%) border-box;
}

/* Card row: three across on a wide page, two on a tablet, one on a phone; a short last row is centred. */
.elementor .ng-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  width: 100%;
  padding: 0;
}
.elementor .ng-grid > * { flex: 0 1 calc((100% - 48px) / 3); min-width: 0; }
@media (max-width: 1024px) { .elementor .ng-grid > * { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 767px)  { .elementor .ng-grid > * { flex-basis: 100%; } }

/* Card: a dark top (number, title) and a lighter panel for the body, as in the language's split card. */
.elementor .ng-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid var(--ng-line);
  border-radius: 16px;
  background-color: var(--ng-card-top);
}
.elementor .ng-card p:not(.ng-num) {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ng-ink-2);
  font-weight: 400;
}
.elementor .ng-card > p:last-child:not(.ng-num) {
  margin: auto -28px -28px;
  padding: 18px 28px 24px;
  background-color: var(--ng-panel);
  border-top: 1px solid var(--ng-line-soft);
}
/* Cards without a numeral (pillars) get a short ribbon rule instead. */
.elementor .ng-card:not(:has(.ng-num))::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 3px;
  background-image: var(--ng-ribbon);
}

/* Outlined stacked numeral, 01 to 07. */
.elementor .ng-num {
  font: 600 56px/1 var(--ng-font);
  color: transparent;
  -webkit-text-stroke: 1.5px #8C8C8C;
}
@media (max-width: 767px) { .elementor .ng-num { font-size: 36px; } }

/* ---- Hairline figure (assets/ng-figures.js draws into it) --------------- */
/* In Elementor: a Div block with the classes ng-fig and ng-fig-<name>, e.g. ng-fig-service-split. */

.elementor .ng-fig {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 8px auto 24px;
  padding: 0;
  border-radius: 16px;
  border: 1px solid var(--ng-line-soft);
  background-color: #0A0A0A;
}
.elementor .ng-fig .ng-fig-stage {
  --hairline-plate: #0A0A0A;
  --hairline-edge: #8E8E8E;
  --hairline-mid: #555;
  --hairline-lo: #363636;
  --hairline-hi: #4EDAE4;
  --hairline-stroke: 1;
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 16px;
}
.elementor .ng-fig .ng-fig-read {
  position: absolute;
  top: 16px;
  right: 18px;
  font: 500 12px/1 var(--ng-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ng-ink-3);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: color 0.2s;
}
.elementor .ng-fig .ng-fig-read.is-on { color: var(--ng-cyan); }

/* ---- Before and after table -------------------------------------------- */
/* .ng-cmp holds rows; each row holds two paragraphs (before, after). The first row is the header.
   Two columns on every screen; the marks carry the meaning, not only the colour. */

.elementor .ng-cmp {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  border: 1px solid var(--ng-line-soft);
}
.elementor .ng-cmp > * {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
  border-bottom: 1px solid var(--ng-line-soft);
}
.elementor .ng-cmp > :last-child { border-bottom: 0; }
.elementor .ng-cmp > * > * { padding: 22px 28px; font-size: 16px; line-height: 1.5; }
.elementor .ng-cmp > * > :first-child { background-color: var(--ng-black); color: var(--ng-ink-2); font-weight: 400; }
.elementor .ng-cmp > * > :last-child  { background-color: var(--ng-wine); color: var(--ng-ink); font-weight: 500; }
.elementor .ng-cmp > :not(:first-child) > :first-child::before { content: "\2715"; margin-right: 12px; color: #6E6E6E; }
.elementor .ng-cmp > :not(:first-child) > :last-child::before  { content: "\2713"; margin-right: 12px; color: var(--ng-pink-soft); }
.elementor .ng-cmp > :first-child > * {
  font: 500 13px/1.4 var(--ng-font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.elementor .ng-cmp > :first-child > :first-child { background-color: var(--ng-bento); }
.elementor .ng-cmp > :first-child > :last-child {
  color: var(--ng-pink-soft);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, rgba(0, 0, 0, 0) 1px 7px);
}
@media (max-width: 767px) {
  .elementor .ng-cmp > * > * { padding: 14px 14px; font-size: 14px; }
  .elementor .ng-cmp > :not(:first-child) > *::before { margin-right: 8px; }
}

/* ---- Dividers ---------------------------------------------------------- */
/* Elementor's divider draws in black by default, which vanishes on this page. */
.elementor .e-divider-base { background-color: var(--ng-line-soft); }
.elementor .ng-center > .e-divider-base { width: 120px; margin: 8px auto; }

/* ---- Action ------------------------------------------------------------ */

.elementor .ng-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid #494949;
  background-color: var(--ng-pill);
  color: var(--ng-ink);
  font: 500 14px/1 var(--ng-font);
  text-decoration: none;
  transition: border-color 0.6s var(--ng-ease), background-color 0.6s var(--ng-ease);
}
.elementor .ng-pill::after { content: "\2192"; margin-left: 10px; transition: transform 0.3s var(--ng-ease); }
.elementor .ng-pill:hover { border-color: var(--ng-line-top); background-color: #404040; }
.elementor .ng-pill:hover::after { transform: translateX(3px); }
.elementor .ng-pill:focus-visible { outline: 2px solid var(--ng-cyan); outline-offset: 3px; }

/* ---- Scroll reveal (only once ng-motion.js has run and added .ng-js) ---- */

.ng-js .ng-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ng-ease), transform 0.7s var(--ng-ease);
}
.ng-js .ng-reveal.ng-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .elementor .ng-pill, .elementor .ng-pill::after { transition: none; }
  .elementor .ng-ribbon, .elementor .ng-glass::before { animation: none; }
  .elementor .ng-glass::before { opacity: 0; }
  .ng-js .ng-reveal { opacity: 1; transform: none; transition: none; }
}