:root{
    --grad: linear-gradient(135deg, #5888C1 0%, #412E79 100%);
  }
  html { scroll-behavior: smooth; }
  body { font-family: 'Inter', sans-serif; background:#FCFBFE; color:#160F27; }
  h1,h2,h3,h4,.font-display{ font-family:'Fraunces', serif; font-optical-sizing: auto; }

  ::selection{ background:#D9C9F0; color:#241743; }

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

  .glass{
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
  }
  .glass-dark{
    background: rgba(11,18,32,0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
  }

  .noise-bg{
    background-image: radial-gradient(circle at 20% 20%, rgba(88,136,193,0.12), transparent 40%),
                       radial-gradient(circle at 85% 10%, rgba(65,46,121,0.14), transparent 45%),
                       radial-gradient(circle at 50% 90%, rgba(88,136,193,0.07), transparent 40%);
  }

  .card-hover{ transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1); }
  .card-hover:hover{ transform: translateY(-6px); box-shadow: 0 8px 24px rgba(37,99,235,0.10), 0 24px 48px rgba(37,99,235,0.12); }

  .fade-up{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
  .fade-up.in{ opacity:1; transform: translateY(0); }

  .float{ animation: floaty 6s ease-in-out infinite; }
  .float-slow{ animation: floaty 8s ease-in-out infinite; }
  .float-rev{ animation: floaty 7s ease-in-out infinite reverse; }
  @keyframes floaty{
    0%,100%{ transform: translateY(0px); }
    50%{ transform: translateY(-14px); }
  }

  .process-step{
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .process-step:hover{
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(65,46,121,.14);
    border-color: rgba(88,136,193,.38);
  }
  .process-step:not(:last-child)::after{
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    z-index: 5;
    color: #5888C1;
    background: #fff;
    border: 1px solid rgba(88,136,193,.22);
    box-shadow: 0 6px 18px rgba(65,46,121,.12);
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
  }
  @media (min-width:1024px){
    .process-step:not(:last-child)::after{
      right: -23px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  @media (max-width:1023px){
    .process-step:not(:last-child)::after{
      left: 50%;
      bottom: -35px;
      transform: translateX(-50%) rotate(90deg);
    }
  }

  .radar-ring{
    position:absolute; border-radius:9999px; border:1px solid rgba(88,136,193,0.30);
    animation: ripple 3.6s ease-out infinite;
  }
  @keyframes ripple{
    0%{ transform: scale(0.6); opacity:.9; }
    100%{ transform: scale(1.8); opacity:0; }
  }

  .dot-grid{
    background-image: radial-gradient(rgba(65,46,121,0.16) 1.4px, transparent 1.4px);
    background-size: 18px 18px;
  }

  .timeline-line{
    background: linear-gradient(180deg, #5888C1 0%, #412E79 100%);
  }

  .num-badge{
    background: var(--grad);
  }

  input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible{
    outline: 2px solid #412E79;
    outline-offset: 2px;
  }

  /* Signature motif: radiating burst, echoes the mark in the logo */
  .fan-burst{ animation: fan-spin 90s linear infinite; transform-origin: center; }
  @keyframes fan-spin{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }

  /* Image placeholders — swap the background-image url for the real photo;
     the gradient + icon underneath is just a graceful placeholder until then. */
  .img-slot{
    background-size: cover; background-position: center;
    display: flex; align-items:center; justify-content:center;
  }
  .img-slot .img-slot-label{
    text-align:center; color: rgba(255,255,255,0.85);
    font-family:'Inter',sans-serif; font-size: 11px; letter-spacing:.06em; text-transform:uppercase;
    padding: 0 1.5rem;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation: none !important; transition: none !important; }
  }

  .scrollbar-hide::-webkit-scrollbar{ display:none; }
  .scrollbar-hide{ -ms-overflow-style:none; scrollbar-width:none; }

  dialog::backdrop{ background: rgba(22,15,39,.68); backdrop-filter: blur(5px); }
  dialog[open]{ animation: modal-in .22s ease-out; }
  @keyframes modal-in{
    from{ opacity:0; transform:translateY(14px) scale(.985); }
    to{ opacity:1; transform:translateY(0) scale(1); }
  }
  .form-field{
    width:100%; border:1px solid #D8D3E1; border-radius:.75rem; background:#fff;
    padding:.72rem .9rem; color:#160F27; font-size:.875rem;
  }
  .form-field::placeholder{ color:#94A3B8; }
  .form-label{ display:block; color:#334155; font-size:.78rem; font-weight:600; margin-bottom:.4rem; }
  body.modal-open{ overflow:hidden; }