/* ==========================================================================
   Home page, sgcUI showcase (home/v18.html and index.html)
   Every class is namespaced .uix-* so nothing here collides with style.css
   or css/home.css. Loaded only by the sgcUI front page.
   ========================================================================== */

:root {
  --uix-ink:    #071630;
  --uix-ink-2:  #0D2350;
  --uix-blue:   #0057B8;
  --uix-sky:    #5AA2FF;
  --uix-amber:  #F0A400;
  --uix-mist:   #EEF2F8;
  --uix-slate:  #4E5F77;
  --uix-line:   #D9E1EC;
  --uix-std:    #3B82F6;
  --uix-pro:    #16A34A;
  --uix-ent:    #9333EA;
  --uix-ease:   cubic-bezier(.2,.7,.1,1);
}

.uix-page { overflow-x: clip; }
.uix-wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.uix-sec { padding: 104px 0; background: #fff; }
.uix-sec--mist { background: var(--uix-mist); }
.uix-sec--ink { background: var(--uix-ink); color: #DCE6F5; }

.uix-h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.04; font-weight: 800;
  letter-spacing: -.035em; color: var(--uix-ink); margin: 0 0 18px; max-width: 18ch;
}
.uix-sec--ink .uix-h2 { color: #fff; }
.uix-lede { font-size: 1.125rem; line-height: 1.6; color: var(--uix-slate); max-width: 62ch; margin: 0; }
.uix-sec--ink .uix-lede { color: #A9BAD3; }
.uix-head { margin-bottom: 56px; }
.uix-head--center { text-align: center; }
.uix-head--center .uix-h2, .uix-head--center .uix-lede { margin-left: auto; margin-right: auto; }

/* Buttons ---------------------------------------------------------------- */
.uix-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none;
  transition: transform .2s var(--uix-ease), background-color .2s, box-shadow .2s, color .2s;
}
.uix-btn:hover { transform: translateY(-2px); text-decoration: none; }
.uix-btn--amber { background: var(--uix-amber); color: #1A1200; box-shadow: 0 10px 30px -10px rgba(240,164,0,.7); }
.uix-btn--amber:hover { background: #FFB61F; color: #1A1200; }
.uix-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.uix-btn--ghost:hover { color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.uix-btn--blue { background: var(--uix-blue); color: #fff; }
.uix-btn--blue:hover { background: #00489A; color: #fff; }
.uix-btn--line { color: var(--uix-ink); box-shadow: inset 0 0 0 1.5px var(--uix-line); background: #fff; }
.uix-btn--line:hover { color: var(--uix-blue); box-shadow: inset 0 0 0 1.5px var(--uix-blue); }
.uix-page a:focus-visible, .uix-page button:focus-visible, .uix-page video:focus-visible {
  outline: 3px solid var(--uix-amber); outline-offset: 3px; border-radius: 6px;
}

/* Hero ------------------------------------------------------------------- */
.uix-hero {
  position: relative; background: var(--uix-ink); color: #fff; overflow: hidden;
  padding: 56px 0 64px; isolation: isolate;
}
.uix-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(0,87,184,.55), transparent 70%),
    radial-gradient(40% 50% at 10% 100%, rgba(90,162,255,.18), transparent 70%);
}
.uix-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.uix-hero-grid { display: grid; grid-template-columns: minmax(0, 12fr) minmax(0, 12fr); gap: 56px; align-items: center; }
.uix-hero-copy { position: relative; z-index: 2; }
.uix-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  font-size: .875rem; color: #C9D6EA; margin-bottom: 22px; text-decoration: none;
}
.uix-badge:hover { color: #fff; text-decoration: none; }
.uix-badge b { background: var(--uix-amber); color: #1A1200; border-radius: 999px; padding: 3px 10px; font-weight: 800; font-size: .8125rem; }
.uix-h1 {
  font-size: clamp(2.6rem, 4.6vw, 4.1rem); line-height: .98; font-weight: 900;
  letter-spacing: -.045em; margin: 0 0 28px; color: #fff;
}
.uix-h1 .uix-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.1em; }
.uix-h1 .uix-line > span { display: block; }
.uix-h1 .uix-line--soft { color: #8FB8F0; }
/* CJK headlines: no negative tracking, a size that keeps each line whole */
html:lang(ja) .uix-h1, html:lang(zh) .uix-h1, html:lang(ko) .uix-h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem); letter-spacing: 0; line-height: 1.16;
}
html:lang(ko) .uix-h1 { word-break: keep-all; }
.uix-sub { font-size: 1.125rem; line-height: 1.6; color: #B7C6DC; max-width: 52ch; margin: 0 0 30px; }
.uix-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 28px; }
.uix-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.uix-chips li {
  font-size: .8125rem; font-weight: 600; color: #C9D6EA; padding: 6px 12px; border-radius: 8px;
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

/* The 3D collage. --uix-px/--uix-py come from the pointer (-1..1), --uix-s from
   scroll (0..1), all written by js/home-sgcui.js. */
.uix-stage { position: relative; perspective: 1900px; --uix-px: 0; --uix-py: 0; --uix-s: 0; margin-right: -12vw; }
.uix-tilt {
  position: relative; transform-style: preserve-3d;
  transform:
    rotateY(calc((-13deg + var(--uix-px) * 4deg) * (1 - var(--uix-s))))
    rotateX(calc((7deg - var(--uix-py) * 3deg) * (1 - var(--uix-s))))
    rotateZ(calc(1.5deg * (1 - var(--uix-s))));
  transition: transform .5s var(--uix-ease);
}
.uix-win {
  position: relative; border-radius: 12px; overflow: hidden; background: #0F1B2E;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 60px 120px -30px rgba(0,0,0,.75), 0 30px 60px -30px rgba(0,87,184,.6);
}
.uix-win-bar {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px;
  background: #F7F9FC; color: #1E293B; font-size: .78rem; font-weight: 500;
}
.uix-win-bar i { width: 14px; height: 14px; border-radius: 3px; background: var(--uix-blue); flex: none; }
.uix-win-bar span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uix-win-ctl { display: flex; gap: 22px; flex: none; }
.uix-win-ctl s { display: block; width: 10px; height: 10px; text-decoration: none; position: relative; }
.uix-win-ctl s:nth-child(1)::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: #475569; }
.uix-win-ctl s:nth-child(2) { box-shadow: inset 0 0 0 1px #475569; }
.uix-win-ctl s:nth-child(3)::before, .uix-win-ctl s:nth-child(3)::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 5px; height: 1px; background: #475569; transform: rotate(45deg);
}
.uix-win-ctl s:nth-child(3)::after { transform: rotate(-45deg); }
.uix-win video, .uix-win img { display: block; width: 100%; height: auto; }
.uix-win--hero .uix-media { aspect-ratio: 16 / 9; background: #0F1B2E; }
.uix-win--hero video { width: 100%; height: 100%; object-fit: cover; }

.uix-float {
  position: absolute; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 40px 80px -24px rgba(0,0,0,.7);
  transition: transform .5s var(--uix-ease);
}
.uix-float img { display: block; width: 100%; height: auto; }
.uix-float--a { width: 30%; left: -6%; top: 16%;
  transform: translateZ(90px) translate(calc(var(--uix-px) * -10px), calc(var(--uix-py) * -8px + var(--uix-s) * 60px)); }
.uix-float--b { width: 36%; left: 6%; bottom: -18%;
  transform: translateZ(160px) translate(calc(var(--uix-px) * -18px), calc(var(--uix-py) * -12px + var(--uix-s) * -50px)); }
.uix-float--c { width: 28%; right: 8%; top: -22%;
  transform: translateZ(60px) translate(calc(var(--uix-px) * 10px), calc(var(--uix-py) * 6px + var(--uix-s) * 90px)); }
.uix-float-tag {
  position: absolute; left: 10px; bottom: 10px; font-size: .72rem; font-weight: 700; color: #fff;
  background: rgba(7,22,48,.82); padding: 4px 9px; border-radius: 6px;
}

/* One orchestrated entrance: headline lines rise, the collage swings in. */
@media (prefers-reduced-motion: no-preference) {
  .uix-h1 .uix-line > span { animation: uix-rise .9s var(--uix-ease) both; }
  .uix-h1 .uix-line:nth-child(2) > span { animation-delay: .08s; }
  .uix-h1 .uix-line:nth-child(3) > span { animation-delay: .16s; }
  .uix-stage { animation: uix-swing 1.3s .15s var(--uix-ease) both; }
}
@keyframes uix-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes uix-swing { from { opacity: 0; transform: translateX(80px) rotateY(-14deg); } to { opacity: 1; transform: none; } }

/* Flip demo: theme ------------------------------------------------------- */
.uix-flip { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.uix-ctrl { position: sticky; top: 110px; }
.uix-seg {
  display: inline-flex; padding: 4px; border-radius: 12px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--uix-line), 0 1px 2px rgba(7,22,48,.06); margin: 0 0 12px;
}
.uix-seg button {
  appearance: none; border: 0; background: transparent; font: inherit; font-weight: 700; font-size: .95rem;
  color: var(--uix-slate); padding: 10px 18px; border-radius: 9px; cursor: pointer; min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
}
.uix-seg button[aria-pressed="true"] { background: var(--uix-ink); color: #fff; }
.uix-seg svg { width: 18px; height: 18px; }
.uix-ctrl-label { display: block; font-size: .875rem; font-weight: 600; color: var(--uix-ink); margin: 26px 0 8px; }
.uix-pairs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.uix-pairs button {
  appearance: none; border: 0; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--uix-slate);
  box-shadow: inset 0 0 0 1px var(--uix-line); min-height: 40px;
}
.uix-pairs button[aria-pressed="true"] { color: var(--uix-blue); box-shadow: inset 0 0 0 2px var(--uix-blue); }
.uix-code {
  margin: 28px 0 0; padding: 16px 18px; border-radius: 10px; background: var(--uix-ink); color: #C9D6EA;
  font-family: var(--font-mono); font-size: .8125rem; line-height: 1.7; overflow-x: auto;
}
.uix-code b { color: var(--uix-amber); font-weight: 500; }
.uix-note { font-size: .875rem; color: var(--uix-slate); margin: 14px 0 0; line-height: 1.55; }

.uix-shot { position: relative; border-radius: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 1px rgba(7,22,48,.08), 0 40px 80px -40px rgba(7,22,48,.45); }
.uix-shot[hidden] { display: none; }
.uix-layer { display: block; }
.uix-layer + .uix-layer { position: absolute; inset: 0; }
.uix-layer img { display: block; width: 100%; height: auto; }
/* The dark layer sits on top and is revealed by a circle growing from the
   toggle side. --uix-r is 0% in light, 150% in dark. */
.uix-layer--dark { clip-path: circle(var(--uix-r, 0%) at 0% 0%); transition: clip-path .9s var(--uix-ease); }
.uix-themed[data-uix-theme="dark"] .uix-layer--dark { --uix-r: 150%; }
/* Demo screenshots carry a light margin around the window: crop it away. */
.uix-crop { position: relative; aspect-ratio: 1436 / 932; overflow: hidden; }
.uix-crop img { position: absolute; max-width: none; width: 108.08%; left: -4.04%; top: -6.22%; height: auto; }
.uix-layer--crop + .uix-layer--crop { position: absolute; inset: 0; }

/* Flip demo: RTL mock ---------------------------------------------------- */
.uix-rtl { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; margin-top: 96px; }
.uix-mock {
  border-radius: 12px; overflow: hidden; background: #F7F9FC; color: #1E293B;
  box-shadow: 0 0 0 1px rgba(7,22,48,.08), 0 40px 80px -40px rgba(7,22,48,.45);
  font-size: .8125rem;
}
.uix-mock-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--uix-line); }
.uix-mock-logo { width: 22px; height: 22px; border-radius: 6px; background: var(--uix-blue); flex: none; }
.uix-mock-title { font-weight: 700; }
.uix-mock-search { flex: 1; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--uix-line); }
.uix-mock-user { width: 26px; height: 26px; border-radius: 50%; background: #DCE6F5; flex: none; }
.uix-mock-body { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 300px; }
.uix-mock-nav { list-style: none; margin: 0; padding: 12px 8px; background: #fff; border-inline-end: 1px solid var(--uix-line); }
.uix-mock-nav li { padding: 8px 10px; border-radius: 6px; color: var(--uix-slate); display: flex; align-items: center; gap: 8px; }
.uix-mock-nav li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px currentColor; flex: none; }
.uix-mock-nav li.is-on { background: #E8F1FB; color: var(--uix-blue); font-weight: 700; box-shadow: inset 3px 0 0 var(--uix-blue); }
[dir="rtl"] .uix-mock-nav li.is-on { box-shadow: inset -3px 0 0 var(--uix-blue); }
.uix-mock-main { padding: 14px; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; }
.uix-kpi { background: #fff; border-radius: 8px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--uix-line); }
.uix-kpi small { display: block; color: var(--uix-slate); font-size: .72rem; }
.uix-kpi strong { display: block; font-size: 1.25rem; letter-spacing: -.02em; }
.uix-kpi em { font-style: normal; font-size: .72rem; color: #15803D; font-weight: 600; }
.uix-chart { grid-column: span 2; background: #fff; border-radius: 8px; padding: 12px; box-shadow: inset 0 0 0 1px var(--uix-line); }
.uix-chart small, .uix-gauge small { display: block; font-weight: 600; margin-bottom: 10px; }
.uix-bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; }
.uix-bars i { flex: 1; background: linear-gradient(180deg, #5AA2FF, var(--uix-blue)); border-radius: 4px 4px 0 0; }
.uix-gauge { background: #fff; border-radius: 8px; padding: 12px; box-shadow: inset 0 0 0 1px var(--uix-line); text-align: center; }
.uix-gauge svg { width: 100%; max-width: 140px; height: auto; }
.uix-gauge svg .uix-needle { transform-origin: 60px 60px; transform: rotate(var(--uix-needle, 38deg)); transition: transform .8s var(--uix-ease); }

.uix-mock [lang="ar"] { font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif; }
.uix-mock .uix-t-r { display: none; }
.uix-mock[dir="rtl"] .uix-t-l { display: none; }
.uix-mock[dir="rtl"] .uix-t-r { display: inline; }
.uix-real { margin: 24px 0 0; }
.uix-real img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px rgba(7,22,48,.08); }
.uix-real figcaption { font-size: .8125rem; color: var(--uix-slate); margin-top: 8px; }

/* Product grid by edition ------------------------------------------------ */
.uix-ed { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; padding: 40px 0; border-top: 1px solid var(--uix-line); }
.uix-ed:first-of-type { border-top: 0; padding-top: 0; }
.uix-ed-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--uix-ink); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.uix-ed-name::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--uix-ed); }
.uix-ed-desc { color: var(--uix-slate); margin: 0 0 10px; font-size: .95rem; line-height: 1.5; }
.uix-ed-price { font-size: .875rem; color: var(--uix-ink); font-weight: 600; }
.uix-ed--std { --uix-ed: var(--uix-std); }
.uix-ed--pro { --uix-ed: var(--uix-pro); }
.uix-ed--ent { --uix-ed: var(--uix-ent); }
.uix-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.uix-tile a { display: block; text-decoration: none; color: inherit; border-radius: 12px; }
.uix-tile-media {
  position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #0F1B2E;
  box-shadow: 0 0 0 1px rgba(7,22,48,.08), 0 1px 0 var(--uix-ed) inset;
  transition: transform .35s var(--uix-ease), box-shadow .35s;
}
.uix-tile-media img, .uix-tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.uix-tile-media video { opacity: 0; transition: opacity .3s; }
.uix-tile.is-playing .uix-tile-media video { opacity: 1; }
.uix-tile-media::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--uix-ed);
}
.uix-tile a:hover .uix-tile-media, .uix-tile a:focus-visible .uix-tile-media {
  transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(7,22,48,.08), 0 24px 40px -20px rgba(7,22,48,.5);
}
.uix-tile-play {
  position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(7,22,48,.78); display: grid; place-items: center; transition: opacity .2s;
}
.uix-tile-play::before { content: ""; border-left: 9px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.uix-tile.is-playing .uix-tile-play { opacity: 0; }
.uix-tile h3 { font-size: 1.0625rem; font-weight: 800; color: var(--uix-ink); margin: 14px 0 4px; letter-spacing: -.01em; }
.uix-tile p { font-size: .9rem; color: var(--uix-slate); margin: 0; line-height: 1.45; }
.uix-tile a:hover h3 { color: var(--uix-blue); }

/* Feature rows ----------------------------------------------------------- */
.uix-rows { display: grid; gap: 96px; }
.uix-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.uix-row:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.uix-row:nth-child(even) .uix-row-media { order: 2; }
.uix-row-media {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(7,22,48,.06), 0 40px 80px -40px rgba(7,22,48,.35);
}
.uix-row-media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.uix-row h3 { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 800; color: var(--uix-ink); margin: 0 0 14px; }
.uix-row-kicker { display: inline-block; font-weight: 700; font-size: .9rem; color: var(--uix-blue); margin-bottom: 10px; text-decoration: none; }
.uix-row ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.uix-row li { position: relative; padding-left: 26px; color: var(--uix-slate); line-height: 1.55; }
.uix-row li::before { content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 7px; border-left: 2px solid var(--uix-blue); border-bottom: 2px solid var(--uix-blue); transform: rotate(-45deg); }
.uix-row p { color: var(--uix-slate); line-height: 1.6; margin: 0; }
.uix-link { font-weight: 700; color: var(--uix-blue); text-decoration: none; }
.uix-link:hover { text-decoration: underline; }

/* Tour ------------------------------------------------------------------- */
.uix-theatre { max-width: 1040px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 120px -40px rgba(0,87,184,.6); }
.uix-theatre video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

/* Platforms -------------------------------------------------------------- */
.uix-plat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--uix-line); border-bottom: 1px solid var(--uix-line); }
.uix-plat > div { padding: 36px 32px; }
.uix-plat > div + div { border-left: 1px solid var(--uix-line); }
.uix-plat h3 { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--uix-ink); margin: 0 0 8px; }
.uix-plat p { color: var(--uix-slate); margin: 0; line-height: 1.55; }
.uix-plat ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 14px 0 0; }
.uix-plat li { font-size: .8125rem; font-weight: 600; padding: 4px 10px; border-radius: 6px; background: var(--uix-mist); color: var(--uix-ink); }

/* Editions teaser -------------------------------------------------------- */
.uix-eds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.uix-edc { background: #fff; border-radius: 14px; padding: 30px 28px; box-shadow: 0 0 0 1px var(--uix-line); position: relative; overflow: hidden; }
.uix-edc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--uix-ed); }
.uix-edc h3 { margin: 0 0 4px; font-size: 1.375rem; font-weight: 800; color: var(--uix-ink); letter-spacing: -.02em; }
.uix-edc-price { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; color: var(--uix-ink); margin: 14px 0 2px; }
.uix-edc-price small { font-size: .9rem; font-weight: 500; color: var(--uix-slate); letter-spacing: 0; }
.uix-edc p { color: var(--uix-slate); margin: 0; line-height: 1.55; font-size: .95rem; }
.uix-edc--ent { box-shadow: 0 0 0 2px var(--uix-ent); }
.uix-eds-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; margin-top: 28px; color: var(--uix-slate); }
.uix-eds-foot p { margin: 0; max-width: 70ch; line-height: 1.55; }

/* Final CTA -------------------------------------------------------------- */
.uix-final { position: relative; text-align: center; overflow: hidden; }
.uix-final .uix-h2 { max-width: 20ch; margin-left: auto; margin-right: auto; font-size: clamp(2.25rem, 5vw, 4rem); }
.uix-final .uix-cta { justify-content: center; margin: 32px 0 0; }
.uix-final-strip { display: flex; gap: 16px; justify-content: center; margin: 0 0 56px; }
.uix-final-strip img { width: 200px; height: auto; border-radius: 8px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.uix-final-strip img:nth-child(1) { transform: rotate(-5deg) translateY(16px); }
.uix-final-strip img:nth-child(3) { transform: rotate(5deg) translateY(16px); }

/* More from eSeGeCe ------------------------------------------------------ */
.uix-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.uix-more a { display: block; padding: 26px 26px 24px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--uix-line); text-decoration: none; color: inherit; transition: box-shadow .2s; }
.uix-more a:hover { box-shadow: 0 0 0 2px var(--uix-blue); }
.uix-more h3 { font-size: 1.25rem; font-weight: 800; color: var(--uix-ink); margin: 0 0 8px; letter-spacing: -.02em; }
.uix-more p { font-size: .95rem; color: var(--uix-slate); margin: 0; line-height: 1.55; }
.uix-more .uix-more--lead { grid-column: span 2; background: var(--uix-ink); box-shadow: none; }
.uix-more .uix-more--lead h3 { color: #fff; font-size: 1.75rem; }
.uix-more .uix-more--lead p { color: #B7C6DC; max-width: 60ch; }
.uix-more .uix-more--lead:hover { box-shadow: 0 0 0 2px var(--uix-sky); }
.uix-packs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 28px 0 0; }
.uix-packs a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--uix-line); font-weight: 700; font-size: .875rem; color: var(--uix-ink); text-decoration: none; }
.uix-packs a:hover { color: var(--uix-blue); box-shadow: inset 0 0 0 1.5px var(--uix-blue); }
.uix-packs-label { font-weight: 700; color: var(--uix-ink); margin: 40px 0 0; }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .uix-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .uix-stage { margin-right: 0; max-width: 760px; margin-top: 24px; }
  .uix-flip, .uix-rtl, .uix-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .uix-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .uix-row:nth-child(even) .uix-row-media { order: 0; }
  .uix-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .uix-ctrl { position: static; }
  .uix-ed { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .uix-eds, .uix-more { grid-template-columns: minmax(0, 1fr); }
  .uix-more .uix-more--lead { grid-column: auto; }
}
@media (max-width: 860px) {
  .uix-plat { grid-template-columns: minmax(0, 1fr); }
  .uix-plat > div + div { border-left: 0; border-top: 1px solid var(--uix-line); }
  .uix-sec { padding: 72px 0; }
}
@media (max-width: 640px) {
  .uix-wrap { padding: 0 16px; }
  .uix-hero { padding: 56px 0 48px; }
  .uix-tilt { transform: none; }
  .uix-float--a, .uix-float--c { display: none; }
  .uix-float--b { width: 46%; left: auto; right: -4%; bottom: -18%; transform: none; }
  .uix-stage { margin-bottom: 40px; }
  .uix-mock-body { grid-template-columns: 96px minmax(0, 1fr); }
  .uix-mock-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .uix-mock-main .uix-kpi:nth-child(3) { display: none; }
  .uix-chart { grid-column: span 2; }
  .uix-gauge { grid-column: span 2; }
  .uix-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .uix-tile p { display: none; }
  .uix-final-strip { display: none; }
  .uix-seg button { padding: 10px 12px; }
  .uix-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .uix-tilt, .uix-float, .uix-layer--dark, .uix-tile-media, .uix-btn, .uix-gauge svg .uix-needle { transition: none; }
}

/* ==========================================================================
   Single product home pages (home/v21.html sgcGrid, then v22 to v33 for the
   other sgcUI products). Every rule is scoped under .uix-product, so the
   sgcUI showcase (home/v18.html, index.html) is not affected.
   ========================================================================== */
.uix-product .uix-win--hero video { object-fit: contain; background: #F3F5F9; }

/* Stats band under the hero */
.uix-product .uix-stats-band { background: var(--uix-ink-2); color: #DCE6F5; padding: 30px 0; }
.uix-product .uix-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.uix-product .uix-stats li { padding-left: 18px; border-left: 2px solid var(--uix-amber); }
.uix-product .uix-stats strong { display: block; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 900; letter-spacing: -.03em; color: #fff; line-height: 1.1; }
.uix-product .uix-stats span { display: block; font-size: .875rem; line-height: 1.45; color: #A9BAD3; margin-top: 4px; }

/* Highlight cards */
.uix-product .uix-hl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
.uix-product .uix-hl li { padding: 26px 24px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--uix-line); }
.uix-product .uix-hl-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--uix-mist); color: var(--uix-blue); margin-bottom: 16px; }
.uix-product .uix-hl-icon svg { width: 22px; height: 22px; }
.uix-product .uix-hl h3 { font-size: 1.125rem; font-weight: 800; color: var(--uix-ink); margin: 0 0 8px; letter-spacing: -.02em; }
.uix-product .uix-hl p { font-size: .95rem; color: var(--uix-slate); margin: 0; line-height: 1.55; }

/* Feature rows: media at its own aspect ratio, a plain kicker */
.uix-product .uix-row-media--fit { aspect-ratio: auto; display: block; background: #F3F5F9; }
.uix-product .uix-row-media--fit video, .uix-product .uix-row-media--fit img { display: block; width: 100%; height: auto; }
.uix-product span.uix-row-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }

/* Gallery: 2 x 2 stills with captions */
.uix-product .uix-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.uix-product .uix-gallery figure { margin: 0; }
.uix-product .uix-gallery picture { display: block; border-radius: 12px; overflow: hidden; background: #F3F5F9; box-shadow: 0 0 0 1px rgba(7,22,48,.06), 0 30px 60px -36px rgba(7,22,48,.35); }
.uix-product .uix-gallery img { display: block; width: 100%; height: auto; }
.uix-product .uix-gallery figcaption { font-size: .95rem; color: var(--uix-slate); line-height: 1.55; margin-top: 14px; max-width: 60ch; }

/* Code sample */
.uix-product .uix-codegrid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.uix-product .uix-sec--ink .uix-code { background: #0B1F42; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.uix-product .uix-code--block { margin: 0; padding: 24px 26px; font-size: .84rem; line-height: 1.75; white-space: pre; }
.uix-product .uix-code i { font-style: normal; color: #7F93B2; }
.uix-product .uix-code em { font-style: normal; color: #9CD67E; }
.uix-product .uix-sec--ink .uix-note { color: #A9BAD3; }
.uix-product .uix-sec--ink .uix-link { color: var(--uix-sky); }

/* Editions: the product alone plus the editions that include it */
.uix-product .uix-eds--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Each card is a flex column: a fixed 24px flag slot (reserved on cards
   without a flag), then title and text, then price + link pushed to the
   bottom so every price row lines up whatever the text length. */
.uix-product .uix-eds--4 { align-items: stretch; }
.uix-product .uix-edc { display: flex; flex-direction: column; }
.uix-product .uix-edc > h3:first-child { margin-top: 36px; }
.uix-product .uix-edc p { margin-bottom: 14px; }
.uix-product .uix-edc .uix-edc-price { margin-top: auto; }
.uix-product .uix-edc .uix-link { padding-top: 14px; }
.uix-product .uix-edc--solo { --uix-ed: var(--uix-amber); }
.uix-product .uix-edc--here { box-shadow: 0 0 0 1.5px var(--uix-ed); }
.uix-product .uix-edc-flag { align-self: flex-start; box-sizing: border-box; height: 24px; line-height: 16px; white-space: nowrap; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--uix-ed); background: var(--uix-mist); padding: 4px 9px; border-radius: 6px; margin-bottom: 12px; }

/* Family: sibling tiles and every product by edition */
.uix-product .uix-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uix-product .uix-family { display: grid; grid-template-columns: 4fr 3fr 7fr; gap: 28px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--uix-line); }
.uix-product .uix-family-ed { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--uix-ink); margin: 0 0 14px; }
.uix-product .uix-family-ed::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--uix-ed); }
.uix-product .uix-family ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.uix-product .uix-family a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--uix-line); font-weight: 700; font-size: .875rem; color: var(--uix-ink); text-decoration: none; transition: box-shadow .2s, color .2s; }
.uix-product .uix-family a:hover { color: var(--uix-blue); box-shadow: inset 0 0 0 1.5px var(--uix-blue); }
.uix-product .uix-family a[aria-current="page"] { background: var(--uix-ink); color: #fff; box-shadow: none; }

@media (max-width: 1100px) {
  .uix-product .uix-stats, .uix-product .uix-hl, .uix-product .uix-eds--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uix-product .uix-codegrid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .uix-product .uix-family { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
  .uix-product .uix-hl, .uix-product .uix-eds--4, .uix-product .uix-gallery, .uix-product .uix-tiles--3 { grid-template-columns: minmax(0, 1fr); }
  .uix-product .uix-stats { gap: 20px 16px; }
  .uix-product .uix-edc > h3:first-child { margin-top: 0; }
  .uix-product .uix-code--block { padding: 18px 16px; font-size: .75rem; }
  .uix-product .uix-tiles--3 .uix-tile p { display: block; }
}