/* ===========================================================
   PeregrineGPay - Fluent/Microsoft 365-style design system
   =========================================================== */

:root{
  --blue-dark:#004578;
  --blue:#0078D4;
  --blue-mid:#2B88D8;
  --cyan:#50E6FF;
  --ink-900:#201F1E;
  --ink-700:#323130;
  --ink-500:#605E5C;
  --ink-300:#A19F9D;
  --surface-0:#FFFFFF;
  --surface-1:#FAF9F8;
  --surface-2:#F3F2F1;
  --surface-3:#EDEBE9;
  --success:#107C10;
  --danger:#D13438;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:14px;
  --shadow-sm:0 1.6px 3.6px rgba(0,0,0,.09), 0 .3px .9px rgba(0,0,0,.08);
  --shadow-md:0 6.4px 14.4px rgba(0,0,0,.1), 0 1.2px 3.6px rgba(0,0,0,.08);
  --shadow-lg:0 25.6px 57.6px rgba(0,0,0,.14), 0 4.8px 14.4px rgba(0,0,0,.08);
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, Roboto, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink-700);
  background:var(--surface-1);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ color:var(--ink-900); font-weight:600; margin:0 0 .5em; line-height:1.2; }
p{ margin:0 0 1em; line-height:1.6; color:var(--ink-500); }
a{ color:var(--blue); text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img,svg{ display:block; }
button{ font-family:inherit; cursor:pointer; }

.text-gradient{
  background:linear-gradient(90deg,var(--blue) 0%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.eyebrow{
  display:inline-block;
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue); margin-bottom:.6em;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65em 1.4em; border-radius:var(--radius-sm);
  font-weight:600; font-size:.95rem; border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--blue-dark); box-shadow:var(--shadow-md); }
.btn-outline{ border-color:var(--ink-300); color:var(--ink-700); background:transparent; }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); }
.btn-ghost{ color:var(--ink-700); padding:.65em .8em; }
.btn-ghost:hover{ color:var(--blue); }
.btn-lg{ padding:.85em 1.8em; font-size:1.02rem; }
.btn-sm{ padding:.45em 1em; font-size:.85rem; }
.btn-full{ width:100%; }

/* ---------- Layout helpers ---------- */
.section{ max-width:1180px; margin:0 auto; padding:5.5rem 1.5rem; }
.section-tinted{ background:var(--surface-2); max-width:100%; }
.section-tinted > *{ max-width:1180px; margin-left:auto; margin-right:auto; }
.section-head{ max-width:680px; margin:0 auto 3rem; text-align:center; }
.section-head h2{ font-size:2.1rem; }
.grid{ display:grid; gap:1.5rem; }
.grid-2{ grid-template-columns:1fr 1fr; align-items:center; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
.fine-print{ font-size:.8rem; color:var(--ink-300); text-align:right; margin-top:-.5rem; }

/* ---------- Fade-up animation ---------- */
.fade-up{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.in-view{ opacity:1; transform:translateY(0); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:box-shadow .2s ease;
}
.nav.scrolled{ box-shadow:var(--shadow-sm); }
.nav-inner{
  max-width:1280px; margin:0 auto; padding:.7rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.brand{ display:flex; align-items:center; gap:.55rem; }
.brand-name{ font-size:1.12rem; font-weight:400; color:var(--ink-900); }
.brand-name strong{ font-weight:700; color:var(--blue); }
.nav-links{ display:flex; gap:1.6rem; }
.nav-links a{ color:var(--ink-700); font-size:.93rem; font-weight:600; }
.nav-links a:hover{ color:var(--blue); }
.nav-actions{ display:flex; align-items:center; gap:.6rem; }
.nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:none; padding:.4rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink-900); border-radius:2px; }

/* ---------- Hero ---------- */
.hero{
  padding:8.5rem 1.5rem 5rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(80,230,255,.18), transparent 45%),
    radial-gradient(circle at 85% 10%, rgba(0,120,212,.14), transparent 50%),
    var(--surface-1);
}
.hero-grid{
  max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr;
  gap:3rem; align-items:center;
}
.hero-copy h1{ font-size:2.9rem; letter-spacing:-.01em; }
.hero-sub{ font-size:1.08rem; max-width:34rem; }
.hero-actions{ display:flex; gap:.8rem; margin:1.6rem 0 1.4rem; flex-wrap:wrap; }
.hero-trust{ display:flex; gap:.5rem; font-size:.82rem; color:var(--ink-300); font-weight:600; }

.hero-visual{ position:relative; }
.mica-card{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:1.1rem;
}
.dashboard-mock{ max-width:420px; margin-left:auto; }
.mock-header{ display:flex; align-items:center; gap:.4rem; padding-bottom:.7rem; border-bottom:1px solid var(--surface-3); margin-bottom:.8rem; }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot.red{ background:#FF5F57; } .dot.yellow{ background:#FEBC2E; } .dot.green{ background:#28C840; }
.mock-title{ margin-left:.5rem; font-size:.82rem; font-weight:600; color:var(--ink-500); }
.mock-chat{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:.9rem; }
.mock-bubble{ font-size:.82rem; padding:.55em .8em; border-radius:12px; max-width:90%; }
.mock-bubble.user{ align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:3px; }
.mock-bubble.ai{ align-self:flex-start; background:var(--surface-2); color:var(--ink-700); border-bottom-left-radius:3px; }
.mock-chart{ display:flex; justify-content:space-between; align-items:flex-end; height:110px; padding:.5rem .3rem 0; }
.bar-group{ display:flex; gap:4px; align-items:flex-end; height:100%; }
.bar{ width:11px; border-radius:3px 3px 0 0; background:var(--surface-3); }
.bar.alt{ background:linear-gradient(180deg,var(--cyan),var(--blue)); }

.floating-pill{
  position:absolute; background:#fff; border-radius:999px; padding:.5em 1em;
  font-size:.78rem; font-weight:700; box-shadow:var(--shadow-md); border:1px solid var(--surface-3);
}
.pill-shield{ top:-10px; left:-10px; color:var(--success); }
.pill-retry{ bottom:14px; left:-24px; color:var(--blue); }

/* ---------- Stats bar ---------- */
.stats-bar{ background:linear-gradient(90deg,var(--blue-dark),var(--blue) 60%, var(--blue-mid)); padding:2.4rem 1.5rem; }
.stats-inner{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat{ color:#fff; display:flex; flex-direction:column; gap:.2rem; }
.stat-num{ font-size:2.1rem; font-weight:700; }
.stat span:last-child{ font-size:.82rem; opacity:.85; }

/* ---------- Product cards ---------- */
.card{
  background:var(--surface-0); border-radius:var(--radius-md);
  padding:1.8rem; box-shadow:var(--shadow-sm); border:1px solid var(--surface-3);
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.icon-tile{
  width:46px; height:46px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; color:#fff; margin-bottom:1rem;
}
.icon-tile.blue{ background:var(--blue); }
.icon-tile.cyan{ background:linear-gradient(135deg,var(--cyan),var(--blue-mid)); }
.icon-tile.indigo{ background:var(--blue-dark); }
.product-card h3{ font-size:1.12rem; }

/* ---------- AI Suite ---------- */
.ai-tabs{ display:flex; justify-content:center; gap:.6rem; margin-bottom:3rem; }
.ai-tab{
  background:#fff; border:1px solid var(--surface-3); border-radius:999px;
  padding:.6em 1.4em; font-weight:600; font-size:.92rem; color:var(--ink-500);
}
.ai-tab.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
.ai-panel{ display:none; flex-direction:column; gap:4.5rem; }
.ai-panel.active{ display:flex; }

.ai-feature{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.ai-feature.reverse{ direction:rtl; }
.ai-feature.reverse > *{ direction:ltr; }
.chip{
  display:inline-block; background:var(--surface-3); color:var(--blue-dark);
  font-size:.76rem; font-weight:700; padding:.3em .8em; border-radius:999px; margin-bottom:.7em;
}
.checklist li{ position:relative; padding-left:1.5em; margin-bottom:.55em; color:var(--ink-700); font-size:.94rem; }
.checklist li::before{ content:"✓"; position:absolute; left:0; color:var(--blue); font-weight:700; }

.demo-card{ max-width:460px; }
.demo-chips{ display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.demo-chip{
  text-align:left; background:var(--surface-2); border:1px solid var(--surface-3);
  border-radius:var(--radius-sm); padding:.6em .9em; font-size:.85rem; color:var(--ink-700); font-weight:600;
}
.demo-chip:hover, .demo-chip.active{ border-color:var(--blue); color:var(--blue); background:#EAF3FC; }
.demo-output{ min-height:140px; background:var(--surface-1); border-radius:var(--radius-sm); padding:1rem; font-size:.85rem; }
.demo-placeholder{ color:var(--ink-300); margin:0; }
.demo-output .answer-line{ font-weight:700; color:var(--ink-900); margin-bottom:.6rem; }
.demo-output .mini-chart{ display:flex; gap:6px; align-items:flex-end; height:70px; }
.demo-output .mini-bar{ flex:1; background:linear-gradient(180deg,var(--cyan),var(--blue)); border-radius:3px 3px 0 0; }

.fraud-card{ text-align:center; }
.fraud-meter{ position:relative; width:160px; margin:0 auto .8rem; }
.meter-svg{ width:100%; }
#meterArc{ transition:stroke-dashoffset .6s ease, stroke .3s ease; }
.meter-readout{ position:absolute; bottom:0; left:0; right:0; text-align:center; }
.meter-readout span{ font-size:1.3rem; font-weight:700; color:var(--ink-900); display:block; }
.meter-readout small{ font-size:.72rem; color:var(--ink-300); }
.fraud-log{ text-align:left; display:flex; flex-direction:column; gap:.4rem; margin-top:.6rem; }
.log-row{ display:flex; justify-content:space-between; font-size:.82rem; color:var(--ink-500); }
.log-row .ok{ color:var(--success); font-weight:700; }
.log-row .warn{ color:var(--danger); font-weight:700; }

.retry-timeline{ margin-bottom:1rem; }
.retry-label{ font-size:.86rem; font-weight:600; margin-bottom:.8rem; color:var(--ink-700); }
.retry-track{ position:relative; display:flex; justify-content:space-between; padding:0 .4rem; }
.retry-track::before{ content:""; position:absolute; left:0; right:0; top:6px; height:2px; background:var(--surface-3); }
.retry-point{ position:relative; font-size:.74rem; font-weight:700; color:var(--ink-300); text-align:center; width:33%; }
.retry-point::before{ content:""; display:block; width:12px; height:12px; border-radius:50%; background:var(--surface-3); margin:0 auto .5rem; }
.retry-point.now::before{ background:var(--ink-500); }
.retry-point.blind{ color:var(--ink-300); }
.retry-point.smart{ color:var(--blue); }
.retry-point.smart::before{ background:var(--blue); box-shadow:0 0 0 4px rgba(0,120,212,.18); }
.retry-point.smart.pulse::before{ animation:pulse 1s ease 2; }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }

.device-switch{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
.device-btn{ background:var(--surface-2); border:1px solid var(--surface-3); border-radius:999px; padding:.4em 1em; font-size:.78rem; font-weight:600; color:var(--ink-500); }
.device-btn.active{ background:var(--blue); color:#fff; border-color:var(--blue); }
.checkout-mock{ background:var(--surface-1); border-radius:var(--radius-sm); padding:1rem; }
.checkout-meta{ display:flex; justify-content:space-between; font-size:.76rem; color:var(--ink-300); margin-bottom:.8rem; font-weight:700; }
.checkout-methods{ display:flex; flex-direction:column; gap:.5rem; }
.method-pill{ background:#fff; border:1px solid var(--surface-3); border-radius:var(--radius-sm); padding:.6em .9em; font-size:.85rem; font-weight:600; display:flex; justify-content:space-between; }
.method-pill span.tag{ font-size:.68rem; background:var(--surface-3); color:var(--ink-500); padding:.15em .5em; border-radius:999px; font-weight:700; }
.method-pill.top{ border-color:var(--blue); background:#EAF3FC; }

.autofill-card{ text-align:left; }
.autofill-row{ display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--ink-700); font-weight:600; margin-bottom:.4rem; }
.autofill-dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); flex-shrink:0; animation:blink 1s infinite; }
@keyframes blink{ 50%{ opacity:.25; } }
#autofillStep{ min-height:110px; margin-bottom:1rem; }

/* ---------- Security badges ---------- */
.badge-card{ text-align:center; background:#fff; border-radius:var(--radius-md); padding:1.4rem 1rem; border:1px solid var(--surface-3); box-shadow:var(--shadow-sm); }
.badge-card strong{ display:block; font-size:1.05rem; color:var(--ink-900); margin-bottom:.3em; }
.badge-card span{ font-size:.8rem; color:var(--ink-500); }

/* ---------- Pricing ---------- */
.pricing-toggle{ display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:2.5rem; font-size:.92rem; font-weight:600; color:var(--ink-500); }
.pricing-toggle em{ color:var(--success); font-style:normal; }
.switch{ position:relative; display:inline-block; width:44px; height:24px; }
.switch input{ opacity:0; width:0; height:0; }
.slider{ position:absolute; cursor:pointer; inset:0; background:var(--surface-3); border-radius:999px; transition:.2s; }
.slider::before{ content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:var(--shadow-sm); }
.switch input:checked + .slider{ background:var(--blue); }
.switch input:checked + .slider::before{ transform:translateX(20px); }

.price-card{ position:relative; text-align:left; }
.price-card.featured{ border-color:var(--blue); box-shadow:var(--shadow-md); transform:scale(1.02); }
.badge-popular{ position:absolute; top:-12px; right:1.5rem; background:var(--blue); color:#fff; font-size:.72rem; font-weight:700; padding:.3em .8em; border-radius:999px; }
.price{ display:flex; align-items:baseline; gap:.4rem; margin-bottom:.2rem; }
.price .amount{ font-size:2rem; font-weight:700; color:var(--ink-900); }
.price .per{ font-size:.8rem; color:var(--ink-300); }
.price-caption{ font-size:.85rem; margin-bottom:1rem; }
.price-card .checklist{ margin-bottom:1.4rem; }

/* ---------- Developers ---------- */
.dev-grid{ align-items:center; }
.code-window{ background:#1E1E1E; border-radius:var(--radius-md); padding:1.2rem; box-shadow:var(--shadow-lg); overflow:auto; }
.code-window .mock-header{ border-bottom-color:rgba(255,255,255,.1); }
.code-window .mock-title{ color:#aaa; }
.code-window pre{ margin:0; }
.code-window code{ font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size:.82rem; line-height:1.7; color:#D4D4D4; }
.tok-key{ color:#569CD6; } .tok-str{ color:#CE9178; } .tok-num{ color:#B5CEA8; } .tok-fn{ color:#DCDCAA; } .tok-comment{ color:#6A9955; }

/* ---------- Testimonials ---------- */
.testimonial-track{ position:relative; max-width:680px; margin:0 auto; min-height:150px; }
.testimonial-card{ display:none; text-align:center; }
.testimonial-card.active{ display:block; }
.testimonial-card p{ font-size:1.15rem; color:var(--ink-900); font-style:italic; }
.testimonial-author{ font-size:.85rem; font-weight:700; color:var(--blue); }
.testimonial-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.4rem; }
.testimonial-dots button{ width:8px; height:8px; border-radius:50%; background:var(--surface-3); border:none; padding:0; }
.testimonial-dots button.active{ background:var(--blue); width:20px; border-radius:4px; }

/* ---------- CTA / Signup ---------- */
.cta-banner{ background:linear-gradient(120deg,var(--blue-dark),var(--blue)); border-radius:var(--radius-lg); max-width:1180px; }
.cta-inner{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; padding:3rem; color:#fff; }
.cta-inner h2{ color:#fff; }
.cta-inner > div p{ color:rgba(255,255,255,.85); }
.signup-form{ background:#fff; border-radius:var(--radius-md); padding:1.5rem; display:flex; flex-direction:column; gap:.7rem; box-shadow:var(--shadow-lg); }
.signup-form input{
  padding:.7em .9em; border:1px solid var(--surface-3); border-radius:var(--radius-sm); font-size:.92rem; font-family:inherit;
}
.signup-form input:focus{ outline:2px solid var(--blue); outline-offset:1px; }
.form-success{ display:none; background:#DFF6DD; color:var(--success); font-size:.85rem; padding:.7em .9em; border-radius:var(--radius-sm); margin:0; }
.form-success.show{ display:block; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink-900); color:var(--surface-3); padding:4rem 1.5rem 1.5rem; }
.footer-top{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand p{ color:var(--ink-300); font-size:.88rem; max-width:22rem; }
.footer-brand .brand-name{ color:#fff; font-size:1.1rem; }
.footer-brand .brand-name strong{ color:var(--cyan); }
.footer-emails{ display:flex; flex-direction:column; gap:.3rem; margin-top:.8rem; }
.footer-emails a{ color:var(--cyan); font-size:.85rem; }
.footer-col h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.footer-col a, .footer-col p{ display:block; color:var(--ink-300); font-size:.88rem; margin-bottom:.6rem; }
.footer-col a:hover{ color:var(--cyan); }
.footer-col p{ margin-bottom:.3rem; }
.footer-bottom{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; padding-top:1.5rem; font-size:.8rem; color:var(--ink-300); flex-wrap:wrap; gap:.8rem; }
.footer-links a{ color:var(--ink-300); margin-left:1rem; }
.footer-links a:hover{ color:var(--cyan); }

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width:980px){
  .hero-grid, .ai-feature, .ai-feature.reverse, .dev-grid, .cta-inner{ grid-template-columns:1fr; direction:ltr; }
  .ai-feature.reverse{ direction:ltr; }
  .hero-visual{ order:-1; }
  .dashboard-mock{ margin:0 auto; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-5{ grid-template-columns:repeat(2,1fr); }
  .stats-inner{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
}

@media (max-width:720px){
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:#fff; flex-direction:column;
    padding:1rem 1.5rem; gap:1rem; box-shadow:var(--shadow-md); display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:flex; }
  .nav-actions .btn-ghost{ display:none; }
  .hero-copy h1{ font-size:2.1rem; }
  .section{ padding:3.5rem 1.2rem; }
  .grid-3, .grid-5{ grid-template-columns:1fr; }
  .stats-inner{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr; }
}