/* Velura Services — design tokens, motion system, component classes.
   Extracted from index.html so every page shares one copy. */

:root {
    --accent: #2DA5A0;
    --accent-soft: #D6EFEE;
    --navy: #1B3A6B;
    --navy-deep: #0F2342;
    --ink: #1F2937;
    --line: rgba(15,35,66,.08);
    --hair: rgba(15,35,66,.06);
  }
  html { scroll-behavior: smooth; }
  body { font-family: 'Manrope', system-ui, sans-serif; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }

  /* Subtle grid background for hero */
  .grid-bg {
    background-image:
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  .noise {
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 3px 3px;
  }

  /* Striped placeholder pattern */
  .stripe-placeholder {
    background-color: #EEF2F7;
    background-image: repeating-linear-gradient(135deg, rgba(10,37,64,.06) 0 8px, transparent 8px 16px);
  }
  .stripe-placeholder-dark {
    background-color: #0E2E52;
    background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 8px, transparent 8px 16px);
  }

  /* ============================
     Motion system
     ============================ */

  /* Scroll reveal — directional + variants */
  [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
  [data-reveal].is-in { opacity: 1; transform: translateY(0); }
  [data-reveal-x="left"] { transform: translateX(-32px); }
  [data-reveal-x="left"].is-in { transform: translateX(0); }
  [data-reveal-x="right"] { transform: translateX(32px); }
  [data-reveal-x="right"].is-in { transform: translateX(0); }
  [data-reveal-scale] { transform: translateY(20px) scale(.96); }
  [data-reveal-scale].is-in { transform: translateY(0) scale(1); }

  /* Marquee */
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee-track { animation: marquee 40s linear infinite; }

  /* Subtle continuous float */
  @keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }
  .float-soft { animation: float-soft 4.5s ease-in-out infinite; }

  /* Slow drift for ambient orbs */
  @keyframes drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(20px, -10px) scale(1.05); }
    66%      { transform: translate(-15px, 12px) scale(0.97); }
  }
  .drift  { animation: drift 18s ease-in-out infinite; }
  .drift-2 { animation: drift 22s ease-in-out infinite reverse; }

  /* Shimmer on accent words */
  @keyframes shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  /* Pulse rings for the FAB */
  @keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(45,165,160,.45); } 70% { box-shadow: 0 0 0 14px rgba(45,165,160,0); } 100% { box-shadow: 0 0 0 0 rgba(45,165,160,0); } }
  .pulse { animation: ringPulse 2.2s ease-out infinite; }

  /* Word-by-word slide-in for hero headline */
  .word-stagger > span {
    display: inline-block;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .word-stagger.is-in > span { opacity: 1; transform: translateY(0); }

  /* Card hover micro-motions */
  .card-lift { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease; }
  .card-lift:hover { transform: translateY(-6px); }

  /* Icon micro-motion on hover */
  .icon-tile { transition: transform .5s cubic-bezier(.22,.61,.36,1), background-color .35s ease, color .35s ease; }
  .group:hover .icon-tile { transform: translateY(-2px) scale(1.08) rotate(-4deg); }

  /* Arrow nudge on hover */
  .nudge-arrow { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
  .group:hover .nudge-arrow { transform: translateX(4px); }

  /* Accent underline link */
  .ul-accent { position: relative; }
  .ul-accent::after {
    content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: var(--accent); transition: width .45s cubic-bezier(.22,.61,.36,1);
  }
  .ul-accent:hover::after { width: 100%; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .marquee-track, .pulse, .float-soft, .drift, .drift-2 { animation: none; }
    [data-reveal] { opacity: 1; transform: none; }
    .word-stagger > span { opacity: 1; transform: none; }
  }

  /* Process timeline progress */
  .step-dot { transition: background .4s ease, transform .4s ease, box-shadow .4s ease; }
  .step-line { transition: width 1.2s cubic-bezier(.2,.7,.2,1); }

  /* Navbar shadow on scroll */
  .nav-scrolled { box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); background: rgba(255,255,255,.85); }

  /* Explore More mega menu */
  .mega-panel { transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1); }
  .mega-panel[data-open="true"]  { opacity: 1; transform: translateY(0);    visibility: visible; pointer-events: auto; }
  .mega-panel[data-open="false"] { opacity: 0; transform: translateY(-6px); visibility: hidden;  pointer-events: none;
                                   transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility 0s linear .22s; }
  .mega-chevron { display: inline-flex; transition: transform .25s ease; }
  .mega-chevron[data-open="true"] { transform: rotate(180deg); }

  /* Buttons */
  .btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.25rem; border-radius: 8px; font-weight: 600; font-size: 14px; letter-spacing: .01em; transition: all .25s ease; min-height: 44px; }
  .btn-primary { background: var(--navy); color: #fff; }
  .btn-primary:hover { background: var(--navy-deep); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(7,26,48,.18); }
  .btn-accent { background: var(--accent); color: #fff; }
  .btn-accent:hover { background: #1F8A85; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(45,165,160,.30); }
  .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); }
  .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }
  .btn-outline { background: transparent; color: var(--navy); border: 1px solid rgba(10,37,64,.18); }
  .btn-outline:hover { border-color: var(--navy); background: var(--navy-50, #F4F7FB); }

  /* Section divider tag */
  .eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color: var(--navy); }
  .eyebrow::before { content:''; width:24px; height:1px; background: var(--accent); }

  /* Form inputs */
  .input { width:100%; padding: .85rem 1rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 14px; color: var(--ink); transition: border .2s ease, box-shadow .2s ease; }
  .input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 4px rgba(10,37,64,.06); }
  .input.error { border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220,38,38,.08); }

  /* WhatsApp pulse */
  /* (now combined with motion system above) */

  /* Counter num */
  .counter { font-variant-numeric: tabular-nums; }

  /* ============================
     Accessibility
     ============================ */

  /* Visible, branded focus ring for all interactive elements */
  *:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .btn:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(45,165,160,.25);
  }
  /* Don't break the fancy ring on inputs */
  .input:focus-visible {
    outline: none;
  }

  /* Skip-to-content link */
  .skip-link {
    position: absolute;
    top: -40px;
    left: 12px;
    background: var(--navy-deep);
    color: #fff;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
    z-index: 9999;
    text-decoration: none;
    transition: top .25s ease;
  }
  .skip-link:focus { top: 12px; }

  /* Screen-reader-only utility */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }

  /* Testimonial quote fade */
  @keyframes quote-in {
    from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
  }
  .animate-quote { animation: quote-in .7s cubic-bezier(.22,.61,.36,1) both; }

  /* Image slot tweaks */
  image-slot { display:block; }

  /* Density - mobile scales down */
  body.density-cozy   { --pad-y: 56px; }
  body.density-comfy  { --pad-y: 64px; }
  body.density-spacious { --pad-y: 80px; }
  @media (min-width: 768px) {
    body.density-cozy   { --pad-y: 96px; }
    body.density-comfy  { --pad-y: 120px; }
    body.density-spacious { --pad-y: 160px; }
  }
  section.padded { padding-top: var(--pad-y, 64px); padding-bottom: var(--pad-y, 64px); }

  /* Hide scroll bar for marquee container */
  .no-scrollbar::-webkit-scrollbar { display: none; }
  .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
    .pulse { animation: none; }
    [data-reveal] { opacity: 1; transform: none; }
    .mega-panel, .mega-chevron { transition: none; }
    .mega-panel[data-open="false"] { transition: none; }
  }
  /* (motion system has its own reduced-motion block above) */