/* ==========================================================================
   AppFocus — base.css   [ AURORA ]
   Light-first, gradient bloom, frosted glass. Dark mode ships as an alternate.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, picture, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; }

html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

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

/* ---------------------------------------------------------------------- */
/* AURORA — light is the brand default                                     */
/* ---------------------------------------------------------------------- */
:root {
  /* Accents */
  --accent:    #5B4BFF;
  --accent-2:  #00C2D1;
  --accent-3:  #D654FF;
  --accent-ink:#4A3AE0;

  /* Per-product accents (contrast-checked on light ground) */
  --p-hotel:   #5B4BFF;
  --p-ctv:     #0094A8;
  --p-service: #D97706;
  --p-trade:   #E11D5C;
  --p-event:   #9333EA;
  --p-invoice: #00A86B;

  /* Ground + glass */
  --bg:        #FBFBFE;
  --bg-2:      #FFFFFF;
  --glass:     rgba(255, 255, 255, .72);
  --glass-2:   rgba(255, 255, 255, .55);
  --solid:     #F4F5FA;
  --line:      #E6E8F2;
  --line-2:    #D6D9E8;

  /* Ink — neutrals biased slightly toward the indigo accent */
  --tx:        #0E1018;
  --tx-dim:    #545A73;
  --tx-faint:  #8E93AB;

  /* Shadows tinted with the accent, never flat grey */
  --sh-sm: 0 2px 8px -3px rgba(24, 22, 70, .12);
  --sh:    0 10px 30px -14px rgba(24, 22, 70, .28);
  --sh-lg: 0 26px 60px -28px rgba(24, 22, 70, .38);

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;

  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-display: 'Plus Jakarta Sans', var(--f-body);
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --container: 1400px;
  --container-text: 1100px;   /* narrower rail for long-form reading blocks */
  --nav-h: 66px;

  color-scheme: light;
}

/* Dark alternate — softened slate, not near-black */
:root[data-theme="dark"] {
  --accent:    #8B7BFF;
  --accent-2:  #3BE0EE;
  --accent-3:  #E27BFF;
  --accent-ink:#6C5BF5;

  --p-hotel:   #8B7BFF;
  --p-ctv:     #3BD5E8;
  --p-service: #FBB040;
  --p-trade:   #FF6B8E;
  --p-event:   #C77DFF;
  --p-invoice: #34E39B;

  --bg:      #14161F;
  --bg-2:    #1B1E2A;
  --glass:   rgba(255,255,255,.045);
  --glass-2: rgba(255,255,255,.028);
  --solid:   #1E2130;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.16);

  --tx:       #EEF0F6;
  --tx-dim:   #A2A8BD;
  --tx-faint: #737A92;

  --sh-sm: 0 2px 8px -3px rgba(0,0,0,.5);
  --sh:    0 10px 30px -14px rgba(0,0,0,.65);
  --sh-lg: 0 26px 60px -26px rgba(0,0,0,.8);

  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}

/* ---------------------------------------------------------------------- */
/* THE AURORA BLOOM — the signature of this direction                      */
/* Sits behind the hero, drifts slowly, never scrolls with the page.       */
/* ---------------------------------------------------------------------- */
.bloom {
  position: absolute;
  top: -260px; left: 50%;
  width: min(1180px, 130vw);
  height: 720px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  filter: blur(76px);
  opacity: .72;
  background:
    radial-gradient(circle at 27% 46%, color-mix(in srgb, var(--accent) 44%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 68% 37%, color-mix(in srgb, var(--accent-2) 40%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 48% 72%, color-mix(in srgb, var(--accent-3) 24%, transparent) 0%, transparent 58%);
}
:root[data-theme="dark"] .bloom { filter: blur(88px); opacity: .5; }

main, header, section, footer, nav { position: relative; z-index: 1; }

/* ---------------------------------------------------------------------- */
/* Typography                                                              */
/* ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }

h1 { font-size: clamp(2.7rem, 5.8vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); letter-spacing: -.028em; }
h4 { font-size: 1.02rem; letter-spacing: -.022em; }

p { color: var(--tx-dim); }

.label {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--accent);
}
.label::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.label.center { justify-content: center; }

.grad {
  background: linear-gradient(100deg, var(--accent) 8%, var(--accent-2) 62%, var(--accent-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dim { color: var(--tx-dim); }

/* ---------------------------------------------------------------------- */
/* Layout                                                                  */
/* ---------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(22px, 3vw, 40px); }
.container.narrow { max-width: var(--container-text); }

.section { padding-block: clamp(70px, 9vw, 132px); }
.section-tight { padding-block: clamp(52px, 6vw, 84px); }

.head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 66px); }
.head.center { margin-inline: auto; text-align: center; }
.head h2 { margin-top: 18px; }
.head p { margin-top: 18px; font-size: 1.07rem; max-width: 66ch; }
.head.center p { margin-inline: auto; }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }