/* ============================================================
   UNIWEBAPPS — Global: reset, typography, reusable components
   Premium editorial system. Define ONCE here.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--uwa-fb);
  font-size: var(--uwa-fs-body);
  line-height: 1.7;
  color: var(--uwa-t2);
  background: var(--uwa-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, picture { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

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

:focus-visible {
  outline: 3px solid var(--uwa-blue-soft);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Container ---- */
.uwa-container {
  width: 100%;
  max-width: var(--uwa-container);
  margin-inline: auto;
  padding-inline: 1.75rem;
}
.uwa-container--wide { max-width: var(--uwa-container-wide); }
.uwa-container--narrow { max-width: 860px; }

/* ---- Typography ---- */
.uwa-display, .uwa-h1, .uwa-h2, .uwa-h3, .uwa-h4 {
  font-family: var(--uwa-fh);
  color: var(--uwa-t1);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.uwa-display { font-size: var(--uwa-fs-display); font-weight: 600; }
.uwa-h1 { font-size: var(--uwa-fs-h1); }
.uwa-h2 { font-size: var(--uwa-fs-h2); line-height: 1.06; }
.uwa-h3 { font-size: var(--uwa-fs-h3); line-height: 1.15; }
.uwa-h4 { font-size: var(--uwa-fs-h4); line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }

/* ---- Serif accent (editorial emphasis words) ---- */
.uwa-serif {
  font-family: var(--uwa-fh);
  font-style: normal;
  font-weight: 600;
}
.uwa-serif--grad {
  background: var(--uwa-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.uwa-lead { font-size: var(--uwa-fs-lead); line-height: 1.55; color: var(--uwa-t2); }
.uwa-body { font-size: var(--uwa-fs-body); color: var(--uwa-t2); }
.uwa-small { font-size: var(--uwa-fs-small); color: var(--uwa-t3); }

.uwa-accent-text {
  background: var(--uwa-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Overline (decorative label with index dot) ---- */
.uwa-overline {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: var(--uwa-fs-label);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--uwa-t1);
}
.uwa-overline::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--uwa-grad);
}
.uwa-overline--muted { color: var(--uwa-t3); }
.uwa-overline--light { color: var(--uwa-tw); }

/* ---- Section spacing ---- */
.uwa-section { padding-block: var(--uwa-sp-2xl); position: relative; }
.uwa-section--sm { padding-block: var(--uwa-sp-xl); }
.uwa-section--white { background: var(--uwa-bg-alt); }
.uwa-section--tint { background: var(--uwa-tint); }
.uwa-section--dark { background: var(--uwa-bg-dark); color: var(--uwa-tw-soft); }
.uwa-section--dark .uwa-h1,
.uwa-section--dark .uwa-h2,
.uwa-section--dark .uwa-h3 { color: var(--uwa-tw); }

/* ---- Section header ---- */
.uwa-section-header { max-width: 620px; }
.uwa-section-header--center { margin-inline: auto; text-align: center; }
.uwa-section-header__title { margin-top: var(--uwa-sp-lg); }
.uwa-section-header__desc { margin-top: var(--uwa-sp-md); font-size: var(--uwa-fs-lead); color: var(--uwa-t2); }
.uwa-section-topline {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: var(--uwa-sp-xl);
}

/* ---- Buttons ---- */
.uwa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 1rem 1.6rem 1rem 1.9rem;
  font-family: var(--uwa-fh);
  font-size: var(--uwa-fs-body);
  font-weight: 500;
  border-radius: var(--uwa-r-full);
  transition: transform var(--uwa-duration) var(--uwa-ease),
              box-shadow var(--uwa-duration) var(--uwa-ease),
              background var(--uwa-duration) var(--uwa-ease),
              color var(--uwa-duration) var(--uwa-ease),
              border-color var(--uwa-duration) var(--uwa-ease);
  white-space: nowrap;
}
.uwa-btn__ico {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 0.8rem;
  transition: transform var(--uwa-duration) var(--uwa-ease);
}

.uwa-btn--primary { background: var(--uwa-ink); color: var(--uwa-tw); }
.uwa-btn--primary .uwa-btn__ico { background: rgba(255,255,255,0.16); }
.uwa-btn--primary:hover { transform: translateY(-3px); box-shadow: var(--uwa-shadow-md); }
.uwa-btn--primary:hover .uwa-btn__ico { transform: rotate(45deg); }

.uwa-btn--accent { background: var(--uwa-grad); color: #fff; box-shadow: var(--uwa-shadow-glow); }
.uwa-btn--accent:hover { transform: translateY(-3px); box-shadow: 0 22px 44px rgba(36,86,230,0.4); }
.uwa-btn--accent:hover .uwa-btn__ico { transform: rotate(45deg); }
.uwa-btn--accent .uwa-btn__ico { background: rgba(255,255,255,0.2); }

.uwa-btn--outline { border: 1.5px solid var(--uwa-border-ink); color: var(--uwa-t1); background: transparent; }
.uwa-btn--outline:hover { border-color: var(--uwa-ink); transform: translateY(-3px); }

.uwa-btn--light { background: var(--uwa-tw); color: var(--uwa-ink); }
.uwa-btn--light .uwa-btn__ico { background: rgba(16,26,52,0.1); }
.uwa-btn--light:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.28); }
.uwa-btn--light:hover .uwa-btn__ico { transform: rotate(45deg); }

.uwa-btn--outline-light { border: 1.5px solid rgba(255,255,255,0.28); color: #fff; background: transparent; }
.uwa-btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-3px); }

/* text link with arrow */
.uwa-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 500; color: var(--uwa-t1);
  transition: color var(--uwa-duration) var(--uwa-ease), gap var(--uwa-duration) var(--uwa-ease);
}
.uwa-link i { transition: transform var(--uwa-duration) var(--uwa-ease); }
.uwa-link:hover { color: var(--uwa-blue); gap: 0.85rem; }
.uwa-link:hover i { transform: translate(2px,-2px); }

/* ---- Card ---- */
.uwa-card {
  background: var(--uwa-surface);
  border: 1px solid var(--uwa-border);
  border-radius: var(--uwa-r-lg);
  padding: var(--uwa-sp-xl);
  transition: transform var(--uwa-duration) var(--uwa-ease),
              box-shadow var(--uwa-duration) var(--uwa-ease),
              border-color var(--uwa-duration) var(--uwa-ease);
}
.uwa-card:hover { transform: translateY(-8px); border-color: transparent; box-shadow: var(--uwa-shadow-lg); }

/* ---- Grids ---- */
.uwa-grid { display: grid; gap: var(--uwa-sp-lg); }
.uwa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.uwa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.uwa-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Scroll reveal ---- */
.uwa-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--uwa-ease), transform 0.8s var(--uwa-ease);
  will-change: opacity, transform;
}
.uwa-reveal.is-visible { opacity: 1; transform: none; }
.uwa-reveal-d1 { transition-delay: 0.09s; }
.uwa-reveal-d2 { transition-delay: 0.18s; }
.uwa-reveal-d3 { transition-delay: 0.27s; }
.uwa-reveal-d4 { transition-delay: 0.36s; }

/* ---- Pill / tag ---- */
.uwa-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 1.15rem;
  font-size: var(--uwa-fs-small); font-weight: 500;
  color: var(--uwa-t1); background: var(--uwa-surface);
  border: 1px solid var(--uwa-border); border-radius: var(--uwa-r-full);
  transition: border-color var(--uwa-duration) var(--uwa-ease), color var(--uwa-duration) var(--uwa-ease), transform var(--uwa-duration) var(--uwa-ease);
}
.uwa-pill:hover { border-color: var(--uwa-blue); color: var(--uwa-blue); transform: translateY(-2px); }

/* ---- Visually hidden ---- */
.uwa-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}