/* ==========================================================================
   AVENIQ SOLUTIONS — DESIGN SYSTEM & CORE STYLES
   Tokens · Reset · Typography · Buttons · Utilities · Motion system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

:root {
  /* ---- Brand (official) ---- */
  --primary-purple: #6A1B9A;
  --accent-purple:  #8E24AA;
  --dark-navy:      #10152F;
  --light-background: #F7F7FB;
  --white:          #FFFFFF;
  --text-dark:      #171A2B;
  --text-gray:      #606477;

  /* ---- Extended purple ramp ---- */
  --purple-800: #4A1270;
  --purple-700: #5A1685;
  --purple-600: #6A1B9A;
  --purple-500: #8E24AA;
  --purple-400: #A44BC2;
  --purple-300: #C48CE0;
  --purple-200: #E1C6F1;
  --purple-100: #F0E4F8;
  --purple-50:  #F9F4FD;

  /* ---- Accent themes (from brand board) ---- */
  --blue:       #1E88E5;  --blue-100:   #E3F0FC;
  --teal:       #12B5A5;  --teal-100:   #DFF6F3;
  --pink:       #EE3F7E;  --pink-100:   #FDE6EF;
  --orange:     #FB8C00;  --orange-100: #FFF0DD;
  --cyan:       #22D3EE;

  /* ---- Navy ramp (dark surfaces) ---- */
  --navy-900: #0B0F24;
  --navy-800: #171D3A;
  --navy-700: #1F274D;
  --navy-600: #28335F;
  --navy-text: #B5B9CB;
  --navy-text-dim: #7E849E;

  /* ---- Neutrals ---- */
  --text-muted:    #8E92A4;
  --border:        #E6E8F0;
  --border-subtle: #EEF0F6;
  --border-strong: #D6D9E6;
  --surface-2:     #FBFBFE;

  /* ---- Gradients ---- */
  --grad-brand:   linear-gradient(135deg, #8E24AA 0%, #6A1B9A 100%);
  --grad-brand-x: linear-gradient(120deg, #9C27B0 0%, #6A1B9A 48%, #1E88E5 100%);
  --grad-text:    linear-gradient(110deg, #8E24AA 0%, #6A1B9A 45%, #1E88E5 100%);
  --grad-blue:    linear-gradient(135deg, #42A5F5 0%, #1E88E5 100%);
  --grad-teal:    linear-gradient(135deg, #2DD4BF 0%, #0E9F91 100%);
  --grad-pink:    linear-gradient(135deg, #F06292 0%, #E91E63 100%);
  --grad-orange:  linear-gradient(135deg, #FFB74D 0%, #FB8C00 100%);
  --grad-navy:    linear-gradient(160deg, #1B2247 0%, #10152F 60%, #0B0F24 100%);
  --grad-surface: linear-gradient(180deg, #FFFFFF 0%, #F7F7FB 100%);

  /* ---- Typography ---- */
  --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs:   0.78rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.15rem;
  --fs-xl:   clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --fs-h3:   clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h2:   clamp(1.85rem, 1.35rem + 1.9vw, 2.75rem);
  --fs-h1:   clamp(2.35rem, 1.5rem + 3.4vw, 4.1rem);
  --fs-display: clamp(2.5rem, 1.6rem + 3.8vw, 4.4rem);

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(16, 21, 47, 0.05), 0 1px 1px rgba(16, 21, 47, 0.03);
  --shadow-sm: 0 2px 6px rgba(16, 21, 47, 0.05), 0 6px 16px rgba(16, 21, 47, 0.05);
  --shadow-md: 0 4px 10px rgba(16, 21, 47, 0.06), 0 14px 30px rgba(16, 21, 47, 0.08);
  --shadow-lg: 0 10px 20px rgba(16, 21, 47, 0.07), 0 28px 56px rgba(16, 21, 47, 0.12);
  --shadow-xl: 0 18px 36px rgba(16, 21, 47, 0.10), 0 44px 90px rgba(16, 21, 47, 0.16);
  --shadow-brand: 0 10px 28px rgba(106, 27, 154, 0.28);
  --shadow-brand-lg: 0 18px 44px rgba(106, 27, 154, 0.34);
  --ring-brand: 0 0 0 4px rgba(142, 36, 170, 0.16);

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;
  --r-pill: 9999px;

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:    0.18s;
  --t-normal:  0.3s;
  --t-slow:    0.6s;

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 820px;
  --gutter: 24px;
  --nav-h: 76px;
  --section-y: clamp(64px, 6vw + 24px, 112px);
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--font-body);
  color: var(--text-dark);
  background-color: var(--light-background);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-dark);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); }

p { color: var(--text-gray); margin-bottom: 1rem; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--primary-purple); text-decoration: none; transition: color var(--t-fast) var(--ease-soft); }
a:hover { color: var(--accent-purple); }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

ul, ol { list-style: none; }

strong { font-weight: 600; color: var(--text-dark); }

::selection { background: rgba(142, 36, 170, 0.18); color: var(--text-dark); }

/* Focus — visible and on-brand for keyboard users only */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid rgba(142, 36, 170, 0.55);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); position: relative; overflow: hidden; }
.section--sm { padding-block: clamp(40px, 4vw + 16px, 72px); }
.section--flush-top { padding-top: 0; }

.bg-white { background-color: var(--white); }
.bg-light { background-color: var(--light-background); }
.bg-soft  { background: var(--grad-surface); }
.bg-dark  { background: var(--dark-navy); color: var(--white); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--white); }
.bg-dark p { color: var(--navy-text); }

/* Subtle dotted texture used behind selected sections */
.bg-dots {
  background-color: var(--light-background);
  background-image: radial-gradient(rgba(16, 21, 47, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Ambient gradient glows for section backgrounds */
.glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; }
.glow--purple { background: rgba(142, 36, 170, 0.16); }
.glow--blue   { background: rgba(30, 136, 229, 0.14); }
.glow--teal   { background: rgba(18, 181, 165, 0.14); }
.glow--pink   { background: rgba(238, 63, 126, 0.12); }

.section > .container { position: relative; z-index: 1; }

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */
.sec-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 4vw, 60px);
}

.sec-head--left { text-align: left; margin-left: 0; }

.sec-head--split {
  max-width: none;
  text-align: left;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.sec-head--split > div { max-width: 640px; }

.sec-head h2 { margin-bottom: 14px; }

.lead {
  font-size: var(--fs-lg);
  color: var(--text-gray);
  line-height: 1.65;
}

/* Eyebrow / tag pill */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  font-family: var(--font-heading);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  background: var(--purple-50);
  color: var(--primary-purple);
  border: 1px solid rgba(106, 27, 154, 0.14);
  margin-bottom: 18px;
  white-space: nowrap;
}
.eyebrow::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.14);
}
.eyebrow--blue   { background: var(--blue-100);   color: var(--blue);   border-color: rgba(30,136,229,0.18); }
.eyebrow--blue::before   { box-shadow: 0 0 0 3px rgba(30,136,229,0.16); }
.eyebrow--teal   { background: var(--teal-100);   color: #0E8F82;       border-color: rgba(18,181,165,0.22); }
.eyebrow--teal::before   { box-shadow: 0 0 0 3px rgba(18,181,165,0.18); }
.eyebrow--pink   { background: var(--pink-100);   color: #D62A6B;       border-color: rgba(238,63,126,0.2); }
.eyebrow--pink::before   { box-shadow: 0 0 0 3px rgba(238,63,126,0.16); }
.eyebrow--orange { background: var(--orange-100); color: #D97400;       border-color: rgba(251,140,0,0.22); }
.eyebrow--orange::before { box-shadow: 0 0 0 3px rgba(251,140,0,0.16); }
.eyebrow--light  { background: rgba(255,255,255,0.1); color: #E9D5FF; border-color: rgba(255,255,255,0.18); }
.eyebrow--light::before  { box-shadow: 0 0 0 3px rgba(233,213,255,0.2); }

/* Gradient text */
.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}

/* Underlined highlight (hand-drawn stroke) */
.mark {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.mark::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.28em;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(142,36,170,0.28), rgba(30,136,229,0.22));
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--ease-out) 0.35s;
}
.reveal.is-in .mark::after, .is-loaded .hero .mark::after { transform: scaleX(1); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--white);
  --btn-fg: var(--text-dark);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--t-normal) var(--ease-out),
    box-shadow var(--t-normal) var(--ease-out),
    background-color var(--t-fast) var(--ease-soft),
    border-color var(--t-fast) var(--ease-soft),
    color var(--t-fast) var(--ease-soft);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--t-normal) var(--ease-out); }
.btn:hover svg.arrow, .btn:focus-visible svg.arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0) scale(0.985); }
.btn[disabled], .btn.is-loading { opacity: 0.7; pointer-events: none; }

.btn-primary {
  --btn-bg: var(--grad-brand);
  --btn-fg: var(--white);
  background: var(--grad-brand);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(106, 27, 154, 0.26), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-primary::before {
  /* shine sweep */
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.28) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease-out);
  z-index: -1;
}
.btn-primary:hover, .btn-primary:focus-visible {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand-lg), inset 0 1px 0 rgba(255,255,255,0.22);
}
.btn-primary:hover::before { left: 130%; }

.btn-secondary {
  --btn-bg: var(--white);
  --btn-fg: var(--text-dark);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  color: var(--primary-purple);
  border-color: rgba(106, 27, 154, 0.35);
  background: var(--purple-50);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--primary-purple);
  padding-inline: 14px;
}
.btn-ghost:hover { background: var(--purple-50); color: var(--purple-700); }

.btn-white {
  --btn-bg: var(--white);
  --btn-fg: var(--primary-purple);
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.btn-white:hover, .btn-white:focus-visible {
  background: #F6EEFB;
  color: var(--purple-700);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.28);
}

.btn-outline-white {
  --btn-bg: rgba(255,255,255,0.04);
  --btn-fg: var(--white);
  border-color: rgba(255,255,255,0.32);
  backdrop-filter: blur(6px);
}
.btn-outline-white:hover, .btn-outline-white:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
  color: var(--white);
  transform: translateY(-2px);
}

.btn-sm { padding: 9px 16px; font-size: 0.86rem; border-radius: 10px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-lg { padding: 16px 32px; font-size: 1.02rem; border-radius: 14px; }
.btn-lg svg { width: 20px; height: 20px; }
.btn-block { width: 100%; }

/* Inline text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--primary-purple);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-normal) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================================
   MOTION SYSTEM — scroll reveal + stagger
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.75s var(--ease-out),
    transform 0.85s var(--ease-out),
    filter 0.75s var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger, 90ms) + var(--delay, 0ms));
  will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.94); }
.reveal--blur  { filter: blur(8px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Keyframes shared across components */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes float-y-sm {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(28px, -22px) scale(1.06); }
  66%      { transform: translate(-18px, 18px) scale(0.96); }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes dash-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes bar-grow {
  from { transform: scaleY(0.15); }
  to   { transform: scaleY(1); }
}
@keyframes progress-fill {
  from { width: 0; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: 8px; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.wrap { flex-wrap: wrap; }
.w-100 { width: 100%; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px; left: 20px;
  background: var(--primary-purple);
  color: var(--white);
  padding: 12px 20px;
  z-index: 100001;
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 16px; color: var(--white); }

/* Mono chip used for placeholders / codes */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--light-background);
  border: 1px solid var(--border);
  color: var(--text-gray);
  white-space: nowrap;
}
.chip--placeholder {
  background: repeating-linear-gradient(135deg, #FFF8E5 0 6px, #FFF3D1 6px 12px);
  border: 1px dashed #E7B84F;
  color: #8A5A00;
}
.chip--brand { background: var(--purple-50); border-color: rgba(106,27,154,0.18); color: var(--primary-purple); }

/* Placeholder notice box */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: #FFFBEF;
  border: 1px dashed #E7B84F;
  color: #6B4A00;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}
.notice svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; color: #C58B00; }
.notice strong { color: #5A3D00; }

/* Page transition veil */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: var(--light-background);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-soft);
}
body.is-leaving .page-veil { opacity: 1; pointer-events: auto; }

/* Page enter — main content fades in once the preloader dismisses */
body.is-entering main, body.is-entering .site-header { opacity: 0; transform: translateY(8px); }
body.is-loaded main, body.is-loaded .site-header {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}