/* =================================================================
   ABHINANDAN — Design System v2
   Modern industrial / premium fintech aesthetic.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* ---- Color palette ---- */
  --bg:            #F8FAFC;   /* app background, off-white/light gray */
  --bg-alt:        #F1F5F9;   /* secondary section background */
  --surface:       #FFFFFF;   /* cards, navbar, raised surfaces */
  --border:        #E2E8F0;   /* faint card/divider borders */
  --border-strong: #CBD5E1;

  --ink:           #0F172A;   /* deep slate/navy — headings, high-contrast text */
  --ink-soft:      #334155;   /* body copy */
  --muted:         #64748B;   /* secondary/meta text */
  --muted-soft:    #94A3B8;

  --accent:        #EA580C;   /* industrial orange — primary CTA */
  --accent-dark:   #C2410C;
  --accent-light:  #FFF1E8;   /* tint background for accent chips */
  --amber:         #F59E0B;   /* secondary accent — highlights, badges */
  --amber-light:   #FFFBEB;

  --success:       #16A34A;
  --success-light: #F0FDF4;

  /* gradient system — glossy "widget" treatment for icon badges, buttons, chips */
  --grad-amber:      linear-gradient(135deg, #FDBA74 0%, #EA580C 55%, #C2410C 100%);
  --grad-amber-soft: linear-gradient(150deg, #FFF7ED 0%, #FFE0C2 100%);
  --grad-navy:       linear-gradient(135deg, #334155 0%, #0B1220 100%);
  --grad-success:    linear-gradient(135deg, #4ADE80 0%, #16A34A 100%);
  --shadow-icon:      0 8px 20px rgba(234,88,12,0.28), inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -4px 8px rgba(0,0,0,0.14);
  --shadow-icon-hover: 0 10px 26px rgba(234,88,12,0.4), inset 0 1px 1px rgba(255,255,255,0.5), inset 0 -4px 8px rgba(0,0,0,0.16);
  --shadow-icon-navy: 0 8px 20px rgba(15,23,42,0.32), inset 0 1px 1px rgba(255,255,255,0.14), inset 0 -4px 8px rgba(0,0,0,0.3);

  /* dark sections (footer, contrast bands) */
  --navy-deep:     #0B1220;
  --navy:          #0F172A;
  --navy-soft:     #1E293B;
  --on-navy:       #E2E8F0;
  --on-navy-muted: #94A3B8;

  /* ---- Type ---- */
  --f-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --f-body:    'Inter', 'Plus Jakarta Sans', sans-serif;

  /* ---- Radius & elevation ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg: 0 16px 40px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.05);
  --shadow-glow: 0 8px 30px rgba(234,88,12,0.25);

  /* ---- Spacing ---- */
  --sp-xs: 0.4rem;
  --sp-sm: 0.8rem;
  --sp-md: 1.6rem;
  --sp-lg: 2.6rem;
  --sp-xl: 4.5rem;
  --sp-2xl: 7rem;

  --container: 1280px;
  --container-narrow: 880px;
  --nav-h: 76px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body{
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; font-size:inherit; outline:none; border:none; background:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------------------------------------------------------
   Typography
   --------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
}
h1{ font-size: clamp(2.6rem, 5.2vw, 4.2rem); font-weight: 800; }
h2{ font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3{ font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4{ font-size: 1.05rem; font-weight:600; }

p{ color: var(--ink-soft); }
.lede{ font-size: 1.15rem; line-height: 1.7; color: var(--muted); max-width: 600px; }
.section--dark .lede{ color: var(--on-navy-muted); }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family: var(--f-display); font-size:0.8rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--sp-sm);
}
.eyebrow::before{
  content:'';
  width: 6px; height: 6px; border-radius:50%;
  background: var(--accent);
}
.section--dark .eyebrow{ color: var(--amber); }

.section-head{ margin-bottom: var(--sp-lg); }
.section-head h2{ margin-bottom: 0.7rem; }

/* ---------------------------------------------------------------
   Layout
   --------------------------------------------------------------- */
.container{ width:100%; max-width: var(--container); margin:0 auto; padding: 0 var(--sp-lg); }
.container--narrow{ max-width: var(--container-narrow); }

.section{ padding: var(--sp-2xl) 0; position: relative; }
.section--dark{ background: var(--navy); color: var(--on-navy); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4{ color: #fff; }
.section--dark p{ color: var(--on-navy-muted); }
.section--alt{ background: var(--bg-alt); }
.section--surface{ background: var(--surface); }

@media (max-width: 900px){
  .section{ padding: var(--sp-xl) 0; }
  .container{ padding: 0 1.25rem; }
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.9rem 1.7rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}
.btn svg{ width:16px; height:16px; flex-shrink:0; transition: transform 0.3s ease; }
.btn:hover svg{ transform: translateX(3px); }
.btn:hover{ transform: translateY(-2px); }

.btn--accent{
  background: var(--grad-amber);
  color: #fff;
  box-shadow: var(--shadow-glow), inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -3px 6px rgba(0,0,0,0.14);
}
.btn--accent:hover{ box-shadow: 0 12px 36px rgba(234,88,12,0.38), inset 0 1px 1px rgba(255,255,255,0.4), inset 0 -3px 6px rgba(0,0,0,0.16); filter: brightness(1.04); }

.btn--dark{
  background: var(--grad-navy);
  color: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,0.22), inset 0 1px 1px rgba(255,255,255,0.1);
}
.btn--dark:hover{ box-shadow: 0 12px 30px rgba(15,23,42,0.3), inset 0 1px 1px rgba(255,255,255,0.14); filter: brightness(1.12); }

.btn--ghost{
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.28);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover{ background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45); }

.btn--outline{
  background: transparent;
  border-color: var(--border-strong);
  color: var(--ink);
}
.btn--outline:hover{ border-color: var(--ink); background: var(--bg-alt); }

.btn--sm{ padding: 0.6rem 1.2rem; font-size: 0.85rem; }
.btn-row{ display:flex; gap: 0.9rem; flex-wrap: wrap; align-items:center; }

/* ---------------------------------------------------------------
   Page hero (sub-pages) — shared across about/brands/products/contact
   --------------------------------------------------------------- */
.page-hero{
  position: relative;
  padding: calc(var(--nav-h) + 5rem) 0 var(--sp-xl);
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-soft) 100%);
  overflow: hidden;
}
.page-hero::before{
  content:'';
  position:absolute; top:-20%; right:-10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(234,88,12,0.18) 0%, transparent 70%);
  pointer-events:none;
}
.page-hero__crumb{
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.85rem; color: var(--on-navy-muted); margin-bottom: var(--sp-md);
  position: relative; z-index:1;
}
.page-hero__crumb a:hover{ color: var(--amber); }
.page-hero h1{ color:#fff; position: relative; z-index:1; max-width: 760px; }
.page-hero__sub{ font-size:1.1rem; color: var(--on-navy-muted); max-width:600px; margin-top: var(--sp-md); position:relative; z-index:1; }

/* ---------------------------------------------------------------
   Cards (shared base for product/partner cards)
   --------------------------------------------------------------- */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* ---------------------------------------------------------------
   Scroll reveal (fade-in-up, staggered)
   --------------------------------------------------------------- */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible{ opacity:1; transform: translateY(0); }

.stagger > *{
  opacity:0; transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stagger.visible > *{ opacity:1; transform: translateY(0); }
.stagger.visible > *:nth-child(1){ transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2){ transition-delay: 0.1s; }
.stagger.visible > *:nth-child(3){ transition-delay: 0.15s; }
.stagger.visible > *:nth-child(4){ transition-delay: 0.2s; }
.stagger.visible > *:nth-child(5){ transition-delay: 0.25s; }
.stagger.visible > *:nth-child(6){ transition-delay: 0.3s; }
.stagger.visible > *:nth-child(7){ transition-delay: 0.35s; }
.stagger.visible > *:nth-child(8){ transition-delay: 0.4s; }

/* ---------------------------------------------------------------
   Utility
   --------------------------------------------------------------- */
.text-center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-sm{ margin-top: var(--sp-sm); }
.mt-md{ margin-top: var(--sp-md); }
.mt-lg{ margin-top: var(--sp-lg); }
.mt-xl{ margin-top: var(--sp-xl); }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background: var(--bg-alt); }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--muted-soft); }