/* Captixy — midnight navy · coral · neural */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --bg:           #070B1F;
  --bg-soft:      #111530;
  --bg-elev-1:    #1A1E3A;
  --bg-elev-2:    #222747;
  --bg-elev-3:    #2A2F52;
  --cream:        #B9BED6;
  --cream-soft:   #7E849F;
  --cream-deep:   #F7F8FF;
  --ink:          #070B1F;
  --primary:      #F7F8FF;
  --orange:       #FF6B73;
  --orange-soft:  #FF8289;
  --orange-deep:  #E94F5D;
  --peach:        #FFB077;
  --purple:       #7B61FF;
  --border-indigo:#2A2F52;
  --success:      #35D399;
  --warning:      #FBBF5C;
  --error:        #FF4D6D;
  --glow-coral:   0 12px 32px rgba(255,107,115,0.28);
  --grad-brand:   linear-gradient(135deg, #FF6B73 0%, #FFB077 100%);
  --grad-cta:     linear-gradient(135deg, #FF6B73 0%, #FF8A7A 100%);
  --grad-cta-hover:linear-gradient(135deg, #FF8289 0%, #FFB077 100%);
  --grad-dark:    linear-gradient(180deg, #070B1F 0%, #111530 100%);
  --glow-ai:      radial-gradient(circle, rgba(255,107,115,0.28) 0%, rgba(123,97,255,0.12) 38%, rgba(7,11,31,0) 70%);
}

* {
  font-family: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scrollbar-gutter: stable both-edges;
}

html, body {
  background: var(--bg);
  color: var(--primary);
  scroll-behavior: smooth;
  overflow-x: clip;
}

html { scroll-padding-top: 96px; }

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

.font-serif, .serif {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
}

/* ===== Brand utilities — coral CTAs · dark glass cards · neural inputs ===== */

.btn-coral {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--glow-coral);
  transition: background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.btn-coral:hover {
  background: var(--grad-cta-hover);
  box-shadow: 0 16px 38px rgba(255,107,115,0.36);
}
.btn-coral:active { background: linear-gradient(135deg, #E94F5D 0%, #FF6B73 100%); }

.btn-ghost-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-indigo);
  color: var(--primary);
  transition: background 220ms ease, border-color 220ms ease;
}
.btn-ghost-dark:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,107,115,0.45);
}

.glass-card {
  background: rgba(26,30,58,0.72);
  border: 1px solid rgba(42,47,82,0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.glass-card:hover {
  border-color: rgba(123,97,255,0.35);
  box-shadow: 0 28px 90px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,107,115,0.18);
}

.glass-subtle {
  background: rgba(17,21,48,0.55);
  border: 1px solid rgba(42,47,82,0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.input-dark {
  background: var(--bg-soft);
  border: 1px solid var(--border-indigo);
  color: var(--primary);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.input-dark::placeholder { color: var(--cream-soft); }
.input-dark:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,107,115,0.16);
}

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

.ai-glow { background: var(--glow-ai); }

/* ===== Highlighted pricing card ===== */

@property --popular-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card-popular {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
}
.card-popular::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--popular-angle, 0deg),
    #FF6B73 0%,
    #FFB077 22%,
    #7B61FF 50%,
    #FF6B73 78%,
    #FF6B73 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: popular-rotate 5.5s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.card-popular::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,107,115,0.35), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(123,97,255,0.22), transparent 60%);
  filter: blur(28px);
  z-index: -1;
  pointer-events: none;
  animation: popular-pulse 4s ease-in-out infinite;
}
.card-popular > * { position: relative; z-index: 2; }

@keyframes popular-rotate {
  to { --popular-angle: 360deg; }
}
@keyframes popular-pulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.03); }
}

.popular-badge {
  background: linear-gradient(135deg, #FF6B73 0%, #FFB077 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(255,107,115,0.4);
  position: relative;
  overflow: hidden;
}
.popular-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: popular-shimmer 3.2s linear infinite;
}
@keyframes popular-shimmer {
  to { transform: translateX(100%); }
}

/* ===== Backgrounds ===== */
.noise-overlay {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.bg-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Animated mesh-gradient — warm orange, copper, cream blobs */
.mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.mesh::before, .mesh::after, .mesh > .blob {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
  mix-blend-mode: screen;
}
.mesh::before {
  width: 65vw; height: 65vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle at 50% 50%, rgba(255,107,115, 0.6), transparent 60%);
  top: -10%; left: -10%;
  animation: drift1 28s ease-in-out infinite alternate;
}
.mesh::after {
  width: 55vw; height: 55vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle at 50% 50%, rgba(255,130,137, 0.45), transparent 60%);
  bottom: -15%; right: -10%;
  animation: drift2 32s ease-in-out infinite alternate;
}
.mesh .blob {
  width: 40vw; height: 40vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle at 50% 50%, rgba(247,248,255, 0.20), transparent 60%);
  top: 30%; left: 35%;
  animation: drift3 36s ease-in-out infinite alternate;
}

@keyframes drift1 {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(10%, 6%, 0) scale(1.1); }
}
@keyframes drift2 {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(-12%, -8%, 0) scale(1.15); }
}
@keyframes drift3 {
  0%   { transform: translate3d(0,0,0) scale(0.95); }
  100% { transform: translate3d(8%, -10%, 0) scale(1.05); }
}

/* Reuse: aurora alias kept for older sections */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px);
  opacity: 0.7; mix-blend-mode: screen;
  animation: drift1 28s ease-in-out infinite alternate;
}
.aurora::before {
  width: 60vw; height: 60vw; max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, rgba(255,107,115, 0.55), transparent 60%);
  top: -10%; left: -10%;
}
.aurora::after {
  width: 55vw; height: 55vw; max-width: 750px; max-height: 750px;
  background: radial-gradient(circle, rgba(255,130,137, 0.40), transparent 60%);
  bottom: -15%; right: -10%;
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora-soft::before {
  background: radial-gradient(circle, rgba(255,107,115, 0.28), transparent 60%);
}
.aurora-soft::after {
  background: radial-gradient(circle, rgba(255,130,137, 0.20), transparent 60%);
}

/* Animated grid — pulses */
.grid-pulse {
  background-image:
    linear-gradient(to right, rgba(247,248,255,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,248,255,0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  animation: grid-pulse 6s ease-in-out infinite alternate;
}
@keyframes grid-pulse {
  0%   { opacity: 0.7; }
  100% { opacity: 1.0; }
}

/* Dot grid — alternative texture */
.dot-grid {
  background-image: radial-gradient(rgba(247,248,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Marquee */
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-vertical {
  display: flex; flex-direction: column;
  animation: marquee-v 24s linear infinite;
}
@keyframes marquee-v {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Caret */
.caret {
  display: inline-block; width: 0.55ch; height: 1em;
  background: currentColor; vertical-align: -0.12em; margin-left: 0.08em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Lift + tilt */
.lift { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.lift:hover { transform: translateY(-3px); }

.tilt { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.tilt:hover { transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-4px); }

/* Hairlines */
.hairline        { box-shadow: inset 0 0 0 1px rgba(247,248,255, 0.10); }
.hairline-strong { box-shadow: inset 0 0 0 1px rgba(247,248,255, 0.22); }
.hairline-ink    { box-shadow: inset 0 0 0 1px rgba(7,11,31, 0.10); }
.hairline-ink-strong { box-shadow: inset 0 0 0 1px rgba(7,11,31, 0.22); }

/* Spin */
.spin-slow         { animation: spin 22s linear infinite; }
.spin-slow-reverse { animation: spin 28s linear infinite reverse; }
.spin-medium       { animation: spin 12s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Floating bob */
.bob       { animation: bob 5s ease-in-out infinite; }
.bob-delay { animation: bob 5s ease-in-out -2.5s infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-elev-2); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg-elev-3); }

/* Eyebrow */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247,248,255, 0.55);
}
.eyebrow-orange {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow-ink {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(7,11,31, 0.55);
}
.eyebrow-ai {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
}
.text-ai { color: var(--purple); }
.bg-ai-soft { background: rgba(123,97,255,0.12); }
.ring-ai { box-shadow: 0 0 0 1px rgba(123,97,255,0.32), 0 8px 24px -4px rgba(123,97,255,0.32); }

/* Link hover underline */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Glows */
.glow-orange {
  box-shadow:
    0 0 0 1px rgba(255,107,115, 0.35),
    0 30px 80px -20px rgba(255,107,115, 0.35),
    0 0 60px -10px rgba(255,107,115, 0.18);
}
.glow-cream {
  box-shadow:
    0 0 0 1px rgba(247,248,255, 0.20),
    0 30px 80px -30px rgba(247,248,255, 0.10);
}

/* Marquee fades */
.fade-edges {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.fade-edges-v {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}

/* Pulsing ring */
.pulse-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(255,107,115, 0.45);
  animation: pulse-ring 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.9; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Floating particles */
.particle {
  position: absolute; border-radius: 50%;
  background: rgba(255,130,137, 0.6);
  filter: blur(0.5px);
  animation: float 12s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.4; }
  50%      { transform: translate3d(0, -30px, 0); opacity: 1; }
}

/* Sound bars */
.sound-bar {
  display: inline-block; width: 2px;
  background: var(--orange); margin: 0 1px;
  border-radius: 1px; animation: bar 1.2s ease-in-out infinite;
}
.sound-bar:nth-child(2) { animation-delay: 0.15s; background: var(--purple); }
.sound-bar:nth-child(3) { animation-delay: 0.3s; }
.sound-bar:nth-child(4) { animation-delay: 0.45s; background: var(--purple); }
@keyframes bar {
  0%, 100% { height: 4px; }
  50%      { height: 14px; }
}

/* Orbit ring */
.orbit-ring {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(247,248,255, 0.15);
}

/* SVG path draw */
.draw-path {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: draw 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Endless dashed path flow */
.flow-path {
  stroke-dasharray: 4 6;
  animation: flow 1.4s linear infinite;
}
@keyframes flow {
  to { stroke-dashoffset: -10; }
}

/* Heartbeat pulse for "live" indicator */
.heartbeat {
  animation: heartbeat 1.6s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 70%, 100% { transform: scale(1); }
  20%           { transform: scale(1.18); }
  40%           { transform: scale(0.92); }
}

/* Conic spinner — warm orange */
.conic-glow {
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,107,115,0.6) 90deg, transparent 180deg);
  animation: spin 6s linear infinite;
}

/* Wave bars */
.wave-bar {
  display: inline-block;
  width: 3px;
  background: var(--orange);
  border-radius: 999px;
  animation: wave 1.4s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { height: 6px; }
  50%      { height: 22px; }
}

/* Tailwind helpers */
.text-primary  { color: var(--primary) !important; }
.bg-primary    { background-color: var(--primary) !important; }
.text-orange   { color: var(--orange); }
.bg-orange     { background-color: var(--orange); }
.bg-cream      { background-color: var(--cream); }
.bg-cream-soft { background-color: var(--cream-soft); }
.bg-cream-deep { background-color: var(--cream-deep); }
.text-cream-deep { color: var(--cream-deep); }
.text-cream      { color: var(--cream); }
.text-ink      { color: var(--ink); }

/* On-cream variants */
.on-cream      { color: var(--ink); }
.on-cream-soft { color: rgba(7,11,31, 0.65); }
.on-cream-mute { color: rgba(7,11,31, 0.45); }

/* Cursor typed */
.type-cursor::after {
  content: "▏";
  display: inline-block;
  margin-left: 1px;
  color: var(--orange);
  animation: blink 1s steps(1) infinite;
}

/* Animated underline for headings (waved) */
.scribble {
  position: relative;
}
.scribble svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  width: 100%;
  height: 0.25em;
}

/* Light lavender section backdrop — tuned for navy text + deep coral accents */
.cream-vignette {
  /* Scoped tokens for the section: brighter surface + firm navy text contrast. */
  --cream-soft: #FFFFFF;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,107,115,0.08), transparent 56%),
    radial-gradient(circle at 80% 80%, rgba(123,97,255,0.07), transparent 56%),
    #E2E6F2;
}
.cream-vignette .on-cream      { color: #070B1F; }
.cream-vignette .on-cream-soft { color: rgba(7,11,31, 0.92); }
.cream-vignette .on-cream-mute { color: rgba(7,11,31, 0.78); }
.cream-vignette .hairline-ink  { box-shadow: inset 0 0 0 1px rgba(7,11,31, 0.24); }
.cream-vignette .hairline-ink-strong { box-shadow: inset 0 0 0 1px rgba(7,11,31, 0.32); }

/* Deep-coral accents tuned to read on light lavender backgrounds */
.text-orange-deep { color: var(--orange-deep); }
.bg-orange-deep  { background-color: var(--orange-deep); }
.eyebrow-deep-coral {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

/* Skewing shimmer */
.shimmer {
  position: relative; overflow: hidden;
}
.shimmer::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.08) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: shimmer 5s linear infinite;
}
@keyframes shimmer {
  to { transform: translateX(100%); }
}