@tailwind base;
@tailwind components;
@tailwind utilities;

/* ─── Design Tokens ─────────────────────────────────────────── */
:root {
  --brand:      #18c26e;
  --brand-mid:  #12a45c;
  --brand-dark: #0d8048;
  --brand-5:    rgba(24,194,110,.05);
  --brand-10:   rgba(24,194,110,.10);
  --brand-15:   rgba(24,194,110,.15);
  --brand-20:   rgba(24,194,110,.20);
  --mint-bg:    #f0fdf7;
  --ink:        #0d1117;
  --ink-60:     #4b5563;
  --ink-40:     #6b7280;
  --ink-20:     #9ca3af;
  --surface:    #ffffff;
  --surface-2:  #f8fafb;
  --surface-3:  #f1f5f2;
  --border:     #e5eae8;
  --border-2:   #d1d5d3;
  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-xl: 24px;
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 4px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.05);
  --shadow:     0 4px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);
  --shadow-md:  0 8px 24px rgba(0,0,0,.09),0 2px 8px rgba(0,0,0,.05);
  --shadow-lg:  0 20px 50px rgba(0,0,0,.10),0 4px 16px rgba(0,0,0,.06);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  /* legacy aliases */
  --green: #18c26e; --green-dark: #0d8048;
}

@layer base {
  html { scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
  body {
    font-family: var(--font);
    background-color: var(--surface);
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1,h2,h3,h4,h5,h6 {
    font-family: var(--font);
    font-weight: 800;
    line-height: 1.15;
    text-transform: none;
    letter-spacing: -0.02em;
  }
}

@layer components {

  /* ── Pill badge ─────────────────────────────────────────────── */
  .pill {
    display:inline-flex; align-items:center; gap:7px;
    font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--brand-dark); background:var(--brand-10);
    border-radius:100px; padding:5px 14px;
  }
  .pill-dot {
    width:6px; height:6px; border-radius:50%; background:var(--brand); flex-shrink:0;
    animation:pulse-dot 2.2s ease-in-out infinite;
  }
  @keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.65} }

  /* ── Buttons ────────────────────────────────────────────────── */
  .btn-green {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-weight:700; font-size:15px; padding:13px 24px;
    background:var(--brand); color:#fff; border:none; border-radius:var(--r);
    cursor:pointer; text-decoration:none;
    transition:background .18s,transform .15s,box-shadow .15s;
    box-shadow:0 2px 12px rgba(24,194,110,.35);
  }
  .btn-green:hover { background:var(--brand-mid); transform:translateY(-1px); box-shadow:0 6px 20px rgba(24,194,110,.4); }

  .btn-green-lg {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-weight:700; font-size:16px; padding:15px 30px;
    background:var(--brand); color:#fff; border:none; border-radius:var(--r);
    cursor:pointer; text-decoration:none;
    transition:background .18s,transform .15s,box-shadow .15s;
    box-shadow:0 2px 16px rgba(24,194,110,.35);
  }
  .btn-green-lg:hover { background:var(--brand-mid); transform:translateY(-1px); box-shadow:0 8px 24px rgba(24,194,110,.45); }

  .btn-outline {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-weight:700; font-size:15px; padding:12px 22px;
    background:transparent; color:var(--ink); border:1.5px solid var(--border-2);
    border-radius:var(--r); cursor:pointer; text-decoration:none;
    transition:border-color .18s,background .18s,color .18s;
  }
  .btn-outline:hover { border-color:var(--brand); color:var(--brand-dark); background:var(--brand-5); }

  .btn-outline-lg {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-weight:700; font-size:16px; padding:14px 28px;
    background:transparent; color:var(--ink); border:1.5px solid var(--border-2);
    border-radius:var(--r); cursor:pointer; text-decoration:none;
    transition:border-color .18s,background .18s,color .18s;
  }
  .btn-outline-lg:hover { border-color:var(--brand); color:var(--brand-dark); background:var(--brand-5); }

  /* ── Cards ──────────────────────────────────────────────────── */
  .saas-card {
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow-sm);
    transition:box-shadow .2s,transform .2s;
  }
  .saas-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }

  /* ── Platform scroll ────────────────────────────────────────── */
  .platform-slider { overflow:hidden; }
  .platform-row { display:flex; width:max-content; gap:12px; }
  .platform-row-1 { animation:slideLeft  30s linear infinite; }
  .platform-row-2 { animation:slideRight 30s linear infinite; }
  @keyframes slideLeft  { 0%{transform:translateX(0)}    100%{transform:translateX(-50%)} }
  @keyframes slideRight { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)}    }

  .platform-icon {
    width:72px; height:72px; flex-shrink:0; border-radius:var(--r-lg);
    background:var(--surface-2); border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s,transform .2s,box-shadow .2s;
  }
  .platform-icon:hover { border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--shadow); }
  .platform-icon img { width:40px; height:40px; object-fit:contain; }

  /* ── Logo strip ─────────────────────────────────────────────── */
  .logo-track { display:flex; gap:10px; animation:slide-logos 32s linear infinite; width:max-content; }
  @keyframes slide-logos { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  .logo-tile {
    width:60px; height:60px; border-radius:12px; border:1.5px solid var(--border);
    background:#fff; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:border-color .2s,box-shadow .2s;
  }
  .logo-tile:hover { border-color:var(--brand); box-shadow:0 2px 8px rgba(24,194,110,.15); }
  .logo-tile img { width:36px; height:36px; object-fit:contain; }

  /* ── Dashboard chrome ───────────────────────────────────────── */
  .dash-topbar { background:var(--ink); display:flex; align-items:center; gap:8px; padding:11px 14px; }
  .dash-dots { display:flex; gap:5px; }
  .dash-dots i { width:9px; height:9px; border-radius:50%; display:block; }
  .dash-url-bar {
    flex:1; background:rgba(255,255,255,.1); border-radius:6px; padding:3px 10px;
    font-size:11px; color:rgba(255,255,255,.35); text-align:center;
    font-family:monospace; letter-spacing:.02em;
  }
  .dash-live-dot { width:5px; height:5px; border-radius:50%; background:var(--brand); animation:blink-dot 1.2s ease-in-out infinite; }
  @keyframes blink-dot { 0%,100%{opacity:1} 50%{opacity:.3} }

  /* ── How it works ───────────────────────────────────────────── */
  .how-step { display:flex; gap:16px; padding:22px 0; border-bottom:1px solid var(--border); cursor:pointer; }
  .how-step:first-of-type { border-top:1px solid var(--border); }
  .step-num {
    width:34px; height:34px; border-radius:50%; border:1.5px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:var(--ink-40); flex-shrink:0; transition:all .2s;
  }
  .how-step.active .step-num { background:var(--brand); border-color:var(--brand); color:#fff; }
  .step-title { font-size:15px; font-weight:700; color:var(--ink-60); margin-bottom:5px; transition:color .15s; }
  .how-step.active .step-title { color:var(--ink); }
  .step-body { font-size:14px; color:var(--ink-40); line-height:1.65; }

  /* ── Pricing ────────────────────────────────────────────────── */
  .p-card { background:#fff; border:1.5px solid var(--border); border-radius:var(--r-xl); padding:30px; position:relative; }
  .p-card.featured { background:var(--ink); border-color:var(--ink); box-shadow:0 24px 48px rgba(13,17,23,.2); }
  .p-feat-check { width:16px; height:16px; border-radius:50%; background:var(--brand-10); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .p-card.featured .p-feat-check { background:rgba(24,194,110,.25); }

  /* ── Testimonial ────────────────────────────────────────────── */
  .testi-card { background:var(--surface-2); border:1.5px solid var(--border); border-radius:var(--r-xl); padding:28px; transition:all .2s; }
  .testi-card:hover { background:#fff; box-shadow:var(--shadow-md); }

  /* ── Industry tag ───────────────────────────────────────────── */
  .ind-tag {
    font-size:13px; font-weight:500; color:var(--ink-60); background:var(--surface-2);
    border:1.5px solid var(--border); border-radius:100px; padding:7px 18px;
    transition:all .15s; cursor:default; display:inline-block;
  }
  .ind-tag:hover { border-color:var(--brand); color:var(--brand-dark); background:var(--brand-5); }

  /* ── Rank result ────────────────────────────────────────────── */
  .rank-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; border:1.5px solid transparent; margin-bottom:8px; }
  .rank-item.r1 { background:rgba(24,194,110,.07); border-color:rgba(24,194,110,.25); }
  .rank-item.r2 { background:var(--surface-2); border-color:var(--border); opacity:.75; }
  .rank-item.r3 { background:var(--surface-2); border-color:var(--border); opacity:.45; }
  .rank-pos { width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; }
  .rank-item.r1 .rank-pos { background:var(--brand); color:#fff; }
  .rank-item.r2 .rank-pos,.rank-item.r3 .rank-pos { background:var(--surface-3); color:var(--ink-40); }

  /* ── Animations ─────────────────────────────────────────────── */
  .animate-marquee { display:flex; width:max-content; animation:marquee 25s linear infinite; }
  @keyframes marquee { 0%{transform:translateX(0%)} 100%{transform:translateX(-50%)} }
  .animate-on-scroll { opacity:0; }
  .animate-on-scroll.is-visible { animation-fill-mode:forwards; }
  .anim-fade-up    { animation-name:fadeUp;    animation-duration:.6s; animation-timing-function:ease; }
  .anim-fade-left  { animation-name:fadeLeft;  animation-duration:.6s; animation-timing-function:ease; }
  .anim-fade-right { animation-name:fadeRight; animation-duration:.6s; animation-timing-function:ease; }
  .anim-scale-in   { animation-name:scaleIn;   animation-duration:.5s; animation-timing-function:ease; }
  .anim-delay-1{animation-delay:.1s} .anim-delay-2{animation-delay:.2s}
  .anim-delay-3{animation-delay:.3s} .anim-delay-4{animation-delay:.4s}
  @keyframes fadeUp    { from{opacity:0;transform:translateY(40px)}  to{opacity:1;transform:translateY(0)}  }
  @keyframes fadeLeft  { from{opacity:0;transform:translateX(-40px)} to{opacity:1;transform:translateX(0)}  }
  @keyframes fadeRight { from{opacity:0;transform:translateX(40px)}  to{opacity:1;transform:translateX(0)}  }
  @keyframes scaleIn   { from{opacity:0;transform:scale(.85)}        to{opacity:1;transform:scale(1)}       }

  /* ── Legacy compat (other pages use these) ──────────────────── */
  .safe-area-bottom { padding-bottom:env(safe-area-inset-bottom,0px); }
  .font-blowout { font-family:var(--font) !important; font-weight:800; }
  .blowout-card { border:1.5px solid var(--border); box-shadow:var(--shadow-md); position:relative; background:var(--surface); border-radius:var(--r-xl); }
  .shadow-hard    { box-shadow:var(--shadow-md); }
  .shadow-hard-sm { box-shadow:var(--shadow-sm); }
  .shadow-hard-xl { box-shadow:var(--shadow-lg); }
  .primary-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-weight:700; font-size:15px; padding:13px 24px;
    background:var(--brand); color:#fff; border:none; border-radius:var(--r);
    cursor:pointer; text-decoration:none; transition:background .18s,transform .15s;
    box-shadow:0 2px 12px rgba(24,194,110,.35);
  }
  .primary-btn:hover { background:var(--brand-mid); transform:translateY(-1px); }
  .secondary-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-weight:700; font-size:15px; padding:12px 22px;
    background:transparent; color:var(--ink); border:1.5px solid var(--border-2);
    border-radius:var(--r); cursor:pointer; text-decoration:none;
    transition:border-color .18s,background .18s;
  }
  .secondary-btn:hover { border-color:var(--brand); background:var(--brand-5); }
  .featured-plan-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-weight:700; font-size:15px; padding:13px 24px;
    background:var(--brand); color:#fff; border:none; border-radius:var(--r);
    cursor:pointer; text-decoration:none; transition:background .18s;
    box-shadow:0 2px 12px rgba(24,194,110,.35);
  }
  .featured-plan-btn:hover { background:var(--brand-mid); }
  .bg-sale-green-10 { background-color:var(--brand-10); }
  .bg-sale-blue-10  { background-color:var(--brand-10); }
  .border-3 { border-width:3px; }
  .tab-button { padding:.75rem 1.5rem; border:1.5px solid var(--border); background:#fff; color:var(--ink); font-weight:600; border-radius:var(--r); transition:all .2s; cursor:pointer; }
  .tab-button:hover { box-shadow:var(--shadow); }
  .tab-button.active { background:var(--brand); color:#fff; border-color:var(--brand); }
  .tab-content { display:none; animation:fadeInUp .4s ease-out; }
  .tab-content.active { display:block; }
  @keyframes fadeInUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
}