/* =====================================================
   Ads2Core — Global Main CSS
   Purpose: Centralized styles for all pages
   Author: Cleaned & optimized
===================================================== */

/* ===============================
   ROOT VARIABLES (ONLY ONCE)
================================ */
:root{
  --brand-1: #2a2a72;
  --brand-2: #9b2fb6;
  --accent: #1f9ae0;
  --muted: #6b7280;

  --glass-bg: rgba(255,255,255,0.06);
  --card-radius: 16px;
}

/* ===============================
   BASE / TYPOGRAPHY
================================ */
html, body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

p{
  line-height: 1.6;
  color: #374151;
}

h1, h2, h3, h4{
  letter-spacing: -0.01em;
}

/* ===============================
   GLOBAL UTILITIES
================================ */
.page-min-h{
  min-height: calc(100vh - 160px);
}

/* ===============================
   GLASS HEADER
================================ */
.glass{
  background: var(--glass-bg);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.site-header.scrolled{
  box-shadow: 0 6px 18px rgba(15,23,42,0.12);
}

/* ===============================
   BUTTONS
================================ */
.btn-primary{
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color: #fff;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 10px 24px rgba(42,42,114,.14);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{
  transform: translateY(-3px);
}

.btn-ghost{
  border: 1px solid rgba(15,23,42,0.08);
  padding: 0.6rem 1rem;
  border-radius: 10px;
}

/* ===============================
   GRADIENT TEXT
================================ */
.gradient-text{
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2),#ff8a60);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 6s linear infinite;
}

@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@media (prefers-reduced-motion: reduce){
  .gradient-text{ animation: none; }
}

/* ===============================
   CARDS (GLOBAL)
================================ */
.card{
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 6px 20px rgba(2,6,23,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(2,6,23,0.1);
}

/* ===============================
   HERO DECORATIVE BLOBS
================================ */
.hero-blob{
  will-change: transform, opacity;
}
.hero-blob--float{
  animation: floatY 6s ease-in-out infinite;
}

@keyframes floatY{
  0%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(12px) rotate(3deg)}
  100%{transform:translateY(0) rotate(-3deg)}
}

/* ===============================
   FLOATING ENQUIRY BUTTON
================================ */
.fab-enquiry{
  right: 1rem;
  bottom: 1.25rem;
  z-index: 60;
}

/* ===============================
   PORTFOLIO SLIDER (INDEX)
================================ */
.pf-slider{
  overflow: hidden;
  position: relative;
}
.pf-track{
  display: flex;
  gap: 24px;
  width: max-content;
  animation: pf-scroll 35s linear infinite;
}
.pf-slider:hover .pf-track{
  animation-play-state: paused;
}

.pf-card{
  min-width: 320px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: .35s ease;
}
.pf-card img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: .6s;
}
.pf-content{
  padding: 16px;
}
.pf-content p{
  font-size: 14px;
  color: #6b7280;
}
.pf-content span{
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f3f4f6;
}

.pf-card:hover{
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 25px 55px rgba(107,33,168,.35);
}
.pf-card:hover img{
  transform: scale(1.1);
}
.pf-card:hover span{
  background: linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color: #fff;
}

@keyframes pf-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

@media(max-width:768px){
  .pf-card{min-width:260px;}
}

/* ===============================
   TESTIMONIALS
================================ */
.testimonial-card{
  border: 1px solid rgba(15,23,42,0.04);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.testimonial-card.active,
.testimonial-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(15,23,42,0.12);
}

/* ===============================
   CLIENT LOGO MARQUEE
================================ */
.clients-slider{
  width:100%;
  display:flex;
  justify-content:center;
}
.clients-card{
  width:100%;
  max-width:1100px;
  background:#fff;
  border-radius:12px;
  padding:18px 14px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,0.04);
}
.clients-track{
  display:flex;
  gap:2.5rem;
  animation: clients-scroll linear infinite;
}
.clients-item{
  width:120px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.clients-item img{
  max-width:100%;
  max-height:100%;
  opacity:.9;
}

@keyframes clients-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ===============================
   COUNTERS
================================ */
.counter{
  font-weight: 800;
}

/* ===============================
   FOOTER SOCIAL ICONS
================================ */
.footer-social{
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.footer-social a{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,var(--brand-1),var(--brand-2));
  color: #fff;
  font-size: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.footer-social a:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(155,47,182,.35);
}

/* ===============================
   ACCESSIBILITY
================================ */
:focus{
  outline: none;
}

:root{
  --brand-1:#6b21a8;
  --brand-2:#d946ef;
}

/* slider layout */
.pf-slider{
  overflow:hidden;
  position:relative;
}
.pf-track{
  display:flex;
  gap:24px;
  width:max-content;
  animation: pf-scroll 35s linear infinite;
}
.pf-slider:hover .pf-track{
  animation-play-state: paused;
}

/* cards */
.pf-card{
  min-width: 320px;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.35s ease;
}
.pf-card img{
  width:100%;
  height:190px;
  object-fit:cover;
  transition:.6s;
}
.pf-content{
  padding:16px;
}
.pf-content h3{
  font-weight:600;
}
.pf-content p{
  font-size:14px;
  color:#6b7280;
}
.pf-content span{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  padding:4px 12px;
  border-radius:999px;
  background:#f3f4f6;
}

/* hover highlight */
.pf-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 25px 55px rgba(107,33,168,.35);
}
.pf-card:hover img{
  transform:scale(1.1);
}
.pf-card:hover span{
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color:#fff;
  box-shadow:0 0 12px rgba(217,70,239,.6);
}

/* animation */
@keyframes pf-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* responsive */
@media(max-width:768px){
  .pf-card{ min-width:260px; }
}

:root { --brand-1: #6b21a8; --brand-2: #d946ef; --muted: #6b7280; --speed: 0.5; /* seconds per item */ }

    .clients-slider { width:100%; display:flex; justify-content:center; gap:1rem; }
    .clients-card {
      width:100%;
      max-width:1100px;
      background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.95));
      border-radius: 12px;
      padding: 18px 14px;
      box-shadow: 0 12px 36px rgba(15,23,42,0.06);
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(15,23,42,0.04);
    }

    /* track */
    .clients-track {
      display:flex;
      gap:2.5rem;
      align-items:center;
      /* will be replaced dynamically: total duration = count * --speed */
      animation: clients-scroll linear infinite;
      will-change: transform;
      align-items:center;
    }

    /* each logo */
    .clients-item {
      flex: 0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      width:120px; /* control size */
      height:64px;
      padding:8px;
      border-radius:8px;
      transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease, background .22s ease;
      background: rgba(255,255,255,0.0);
    }
    .clients-item img { max-width:100%; max-height:100%; display:block; filter: grayscale(0.03) contrast(0.98); opacity:0.92; }

    /* hover highlight: pause handled separately */
    .clients-item:hover, .clients-item:focus {
      transform: translateY(-6px) scale(1.04);
      box-shadow: 0 20px 40px rgba(107,33,168,0.12);
      background: linear-gradient(180deg, rgba(107,33,168,0.06), rgba(217,70,239,0.03));
      z-index: 4;
    }

    /* when individual item is hovered -> track should pause (see CSS below) */

    /* small left/right masks to fade logos near edges */
    .clients-card::before, .clients-card::after{
      content: "";
      position: absolute;
      top:0; bottom:0; width:68px;
      pointer-events: none;
      z-index:3;
    }
    .clients-card::before { left:0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
    .clients-card::after { right:0; background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); }

    /* pause animation on hover/focus inside card */
    .clients-card:hover .clients-track,
    .clients-card:focus-within .clients-track {
      animation-play-state: paused;
    }

    /* pause when any item hovered/focused (for browsers that don't support :focus-within reliably) */
    .clients-item:hover ~ .clients-track,
    .clients-item:focus ~ .clients-track { animation-play-state: paused; }

    /* entrance */
    .clients-card { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
    .clients-card.in-view { opacity:1; transform: none; }

    /* accessibility */
    @media (prefers-reduced-motion: reduce){
      .clients-track { animation: none !important; transform:none !important; }
      .clients-item { transition: none !important; }
    }

    /* keyframes placeholder — duration set dynamically by JS */
    @keyframes clients-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); } /* we duplicate items, move by half width */
    }

    :root{
      --brand-1: #6b21a8;
      --brand-2: #d946ef;
      --card-shadow: 0 12px 40px rgba(15,23,42,0.06);
    }

    /* reveal animation */
    #team-grid { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
    #team-grid.in-view { opacity: 1; transform: translateY(0); }

    /* base card */
    .team-card {
      position: relative;
      border: 1px solid rgba(15,23,42,0.04);
      transition: transform .28s cubic-bezier(.22,.9,.36,1), box-shadow .28s ease, border-color .28s ease, background .28s ease;
      will-change: transform;
      outline: none;
      overflow: hidden;
    }

    /* left accent strip (hidden by default) */
    .team-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 6px;
      border-top-left-radius: 12px;
      border-bottom-left-radius: 12px;
      background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
      transform: scaleY(0.6);
      opacity: 0;
      transition: transform .28s ease, opacity .28s ease;
    }

    /* hover/focus/active highlight */
    .team-card:hover,
    .team-card:focus,
    .team-card.active {
      transform: translateY(-10px);
      box-shadow: var(--card-shadow);
      border-color: rgba(107,33,168,0.12);
      background: linear-gradient(180deg, rgba(107,33,168,0.02), rgba(217,70,239,0.01));
      z-index: 2;
    }
    .team-card:hover::before,
    .team-card:focus::before,
    .team-card.active::before {
      transform: scaleY(1);
      opacity: 1;
    }

    /* small pulsing ring behind avatar when active */
    .team-card .avatar-ring {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 16px;
      width: 88px;
      height: 88px;
      border-radius: 999px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .28s ease, transform .28s ease;
      box-shadow: 0 8px 24px rgba(107,33,168,0.06);
    }
    .team-card.active .avatar-ring,
    .team-card:hover .avatar-ring,
    .team-card:focus .avatar-ring {
      opacity: 1;
    }

    /* smoother avatar layout adjustment so ring doesn't overlay badly */
    .team-card img { position: relative; z-index: 3; }

    /* subtle stagger for reveal when in view */
    .team-card { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s cubic-bezier(.22,.9,.36,1); }
    .team-card.in-view { opacity: 1; transform: translateY(0); }

    /* responsive tweaks */
    @media (max-width: 640px) {
      #team-grid { gap: 1rem; }
      .team-card img { height: 72px; width: 72px; }
    }

    /* accessibility: reduce motion */
    @media (prefers-reduced-motion: reduce) {
      #team-grid, .team-card { transition: none !important; transform: none !important; opacity: 1 !important; }
    }

    :root{
      --brand-1: #6b21a8;
      --brand-2: #d946ef;
      --muted: #6b7280;
    }

    /* container reveal */
    #timeline { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
    #timeline.in-view { opacity: 1; transform: translateY(0); }

    /* item base */
    .timeline-item { position: relative; transition: transform .28s cubic-bezier(.22,.9,.36,1), box-shadow .28s ease; outline: none; }
    .timeline-item h4 { display: inline-block; margin:0 0 .25rem 0; }
    .timeline-item p { margin: .25rem 0 0; color: #475569; }

    /* left vertical line (already from border-l) — keep subtle */
    /* dot base */
    .timeline-dot {
      position: absolute;
      left: -1.625rem; /* -26px */
      top: 0.25rem;
      width: 1.5rem;
      height: 1.5rem;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background: white;
      border-radius: 999px;
      border: 2px solid rgba(107,33,168,0.12);
      box-shadow: 0 2px 6px rgba(15,23,42,0.04);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      z-index: 2;
    }
    .timeline-dot .dot-icon { color: var(--muted); transition: color .22s ease; }

    /* pulse (blink) effect */
    .timeline-dot::after{
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 999px;
      left: 0; top: 0;
      transform: scale(1);
      opacity: 0;
      background: radial-gradient(circle at center, rgba(107,33,168,0.12), rgba(217,70,239,0.06) 60%, transparent 70%);
      transition: opacity .22s ease, transform .45s ease;
      pointer-events: none;
      z-index: 1;
    }

    /* activate highlight (hover/focus/active/pulse) */
    .timeline-item.active { transform: translateX(6px) translateY(-4px); z-index:3; }
    .timeline-item.active .timeline-dot { transform: scale(1.08); border-color: linear-gradient(90deg,var(--brand-1),var(--brand-2)); box-shadow: 0 12px 34px rgba(107,33,168,0.12); }
    .timeline-item.active .timeline-dot .dot-icon { color: var(--brand-1); }
    .timeline-item.active .timeline-dot::after { opacity: 1; transform: scale(1.6); }

    /* special 'pulse' class (used by auto-cycler) */
    .timeline-item.pulse .timeline-dot::after { animation: pulse-anim 1200ms ease-out 1; opacity: 1; transform: scale(1.4); }
    @keyframes pulse-anim {
      0% { opacity: 0.9; transform: scale(0.9); }
      40% { opacity: 0.45; transform: scale(1.6); }
      100% { opacity: 0; transform: scale(2.4); }
    }

    /* hover/focus stronger highlight, stops auto-cycle */
    .timeline-item:hover, .timeline-item:focus { transform: translateX(6px) translateY(-4px); }
    .timeline-item:hover .timeline-dot, .timeline-item:focus .timeline-dot { transform: scale(1.08); box-shadow: 0 12px 34px rgba(107,33,168,0.12); border-color: rgba(107,33,168,0.16); }
    .timeline-item:hover .dot-icon, .timeline-item:focus .dot-icon { color: var(--brand-1); }
    .timeline-item:hover .timeline-dot::after, .timeline-item:focus .timeline-dot::after { opacity: 1; transform: scale(1.6); }

    /* small left-label marker animation (tiny ring) */
    .timeline-item .mini-ring{
      position: absolute; left:-2.25rem; top: .4rem; width: .6rem; height: .6rem; border-radius: 999px;
      background: transparent; border: 2px solid rgba(107,33,168,0.12);
      transition: background .22s ease, transform .22s ease, border-color .22s ease;
    }
    .timeline-item.active .mini-ring, .timeline-item:hover .mini-ring { background: linear-gradient(180deg,var(--brand-1),var(--brand-2)); transform: scale(1.05); border-color: rgba(107,33,168,0.2); }

    /* responsive tweaks */
    @media (max-width:640px){
      .timeline-dot { left: -1.5rem; top:.2rem; }
      .timeline-item { padding-left: .5rem; }
    }

    /* respect reduced motion */
    @media (prefers-reduced-motion: reduce){
      #timeline, .timeline-item { transition: none !important; transform: none !important; }
      .timeline-dot::after, .timeline-item.pulse .timeline-dot::after { animation: none !important; opacity: 0 !important; }
    }

    .gradient-text {
      background: linear-gradient(90deg,#6b21a8,#d946ef);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    @media (prefers-reduced-motion: reduce) {
      .counter { transition: none !important; }
    }

    .pf-btn{
  padding:8px 18px;
  border-radius:999px;
  background:#e5e7eb;
  font-size:14px;
  transition:.3s;
}
.pf-btn.active,
.pf-btn:hover{
  background:linear-gradient(90deg,#6b21a8,#d946ef);
  color:#fff;
}

.pf-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:.35s;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.pf-card img{
  height:180px;
  width:100%;
  object-fit:cover;
  transition:.5s;
}
.pf-content{
  padding:16px;
}
.pf-content h3{
  font-weight:600;
}
.pf-content span{
  display:inline-block;
  margin-top:10px;
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:#f3f4f6;
}
.pf-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 45px rgba(107,33,168,.18);
}
.pf-card:hover img{
  transform:scale(1.08);
}
.pf-card:hover span{
  background:linear-gradient(90deg,#6b21a8,#d946ef);
  color:#fff;
}

:root { --brand-1: #6b21a8; --brand-2: #d946ef; --muted: #6b7280; --speed: 0.5; /* seconds per item */ }

    .clients-slider { width:100%; display:flex; justify-content:center; gap:1rem; }
    .clients-card {
      width:100%;
      max-width:1100px;
      background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.95));
      border-radius: 12px;
      padding: 18px 14px;
      box-shadow: 0 12px 36px rgba(15,23,42,0.06);
      overflow: hidden;
      position: relative;
      border: 1px solid rgba(15,23,42,0.04);
    }

    /* track */
    .clients-track {
      display:flex;
      gap:2.5rem;
      align-items:center;
      /* will be replaced dynamically: total duration = count * --speed */
      animation: clients-scroll linear infinite;
      will-change: transform;
      align-items:center;
    }

    /* each logo */
    .clients-item {
      flex: 0 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
      width:120px; /* control size */
      height:64px;
      padding:8px;
      border-radius:8px;
      transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease, background .22s ease;
      background: rgba(255,255,255,0.0);
    }
    .clients-item img { max-width:100%; max-height:100%; display:block; filter: grayscale(0.03) contrast(0.98); opacity:0.92; }

    /* hover highlight: pause handled separately */
    .clients-item:hover, .clients-item:focus {
      transform: translateY(-6px) scale(1.04);
      box-shadow: 0 20px 40px rgba(107,33,168,0.12);
      background: linear-gradient(180deg, rgba(107,33,168,0.06), rgba(217,70,239,0.03));
      z-index: 4;
    }

    /* when individual item is hovered -> track should pause (see CSS below) */

    /* small left/right masks to fade logos near edges */
    .clients-card::before, .clients-card::after{
      content: "";
      position: absolute;
      top:0; bottom:0; width:68px;
      pointer-events: none;
      z-index:3;
    }
    .clients-card::before { left:0; background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
    .clients-card::after { right:0; background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0)); }

    /* pause animation on hover/focus inside card */
    .clients-card:hover .clients-track,
    .clients-card:focus-within .clients-track {
      animation-play-state: paused;
    }

    /* pause when any item hovered/focused (for browsers that don't support :focus-within reliably) */
    .clients-item:hover ~ .clients-track,
    .clients-item:focus ~ .clients-track { animation-play-state: paused; }

    /* entrance */
    .clients-card { opacity:0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
    .clients-card.in-view { opacity:1; transform: none; }

    /* accessibility */
    @media (prefers-reduced-motion: reduce){
      .clients-track { animation: none !important; transform:none !important; }
      .clients-item { transition: none !important; }
    }

    /* keyframes placeholder — duration set dynamically by JS */
    @keyframes clients-scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); } /* we duplicate items, move by half width */
    }

    /* ================= CONTACT FORM FIX ================= */

/* Input, Select, Textarea – proper box look */
.input {
  width: 100%;
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  color: #111827;
  background-color: #ffffff;
  border: 1.5px solid #e5e7eb; /* visible border */
  border-radius: 0.75rem;
  outline: none;
  transition: all 0.25s ease;
}

/* Placeholder color */
.input::placeholder {
  color: #9ca3af;
}

/* Focus effect */
.input:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(217, 70, 239, 0.12);
}

/* Textarea height fix */
textarea.input {
  resize: vertical;
  min-height: 110px;
}

/* Select dropdown arrow fix */
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
  padding-right: 2.5rem;
}

/* Card spacing improvement */
.card {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

/* ================= BUTTON FIX ================= */

.btn-primary {
  display: flex;
  align-items: center;       /* vertical center */
  justify-content: center;   /* horizontal center */
  gap: 0.4rem;

  padding: 0.9rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;

  background: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  border-radius: 999px;
  border: none;
  cursor: pointer;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(155, 47, 182, 0.35);
}


body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}