/* ============================================================================
   OI PAY — Marketing site: premium white Material + soft neumorphic / glass
   Loaded AFTER frontend/css/style.css. Harmonises palette with the dashboard,
   adds tactile depth, and makes every section fully responsive.
   Behaviour untouched.
   ========================================================================== */

:root{
  --primary-color:#5a4bff;
  --secondary-color:#00b8a6;
  --accent-color:#ff6b57;

  --oip-ink:#171821;
  --oip-ink-soft:#4a4c5a;
  --oip-ink-mute:#7a7d8f;
  --oip-line:#ecebe4;              /* warm hairline */
  --oip-cream:#faf9f5;             /* soft cream ground */
  --oip-cream-2:#f4f2ec;
  --oip-surface:#ffffff;

  --oip-r-sm:14px; --oip-r-md:20px; --oip-r-lg:28px; --oip-r-xl:36px; --oip-r-pill:999px;

  /* neumorphic dual shadow on cream */
  --oip-neu:  8px 8px 20px rgba(24,22,15,.06), -8px -8px 20px rgba(255,255,255,.9);
  --oip-neu-sm: 4px 4px 12px rgba(24,22,15,.05), -4px -4px 12px rgba(255,255,255,.85);
  --oip-neu-in: inset 3px 3px 8px rgba(24,22,15,.06), inset -3px -3px 8px rgba(255,255,255,.9);
  --oip-glass-shadow: 0 20px 60px rgba(24,26,60,.12), 0 6px 18px rgba(24,26,60,.06);

  --oip-ease:cubic-bezier(.2,0,0,1);
}

html{scroll-behavior:smooth}
body{
  font-family:"Inter","Hind Siliguri",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--oip-ink);
  background:var(--oip-cream);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:"Inter","Hind Siliguri",sans-serif;
  font-weight:800;letter-spacing:-.022em;text-wrap:balance;color:var(--oip-ink);
}
.gradient-text-premium,.gradient-text{
  background:linear-gradient(120deg,var(--primary-color),var(--secondary-color));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* fluid typography */
h1,.display-3{font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem) !important;line-height:1.08 !important}
.display-6{font-size:clamp(1.4rem,1rem + 1.8vw,2.1rem) !important}
.lead,h2.h4{font-size:clamp(1rem,.94rem + .35vw,1.2rem)}

/* ---- Header / navbar -------------------------------------------------- */
#header.header{
  background:color-mix(in srgb,#ffffff 78%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid color-mix(in srgb,var(--oip-line) 70%,transparent);
  box-shadow:none;transition:box-shadow .3s var(--oip-ease);
  padding:10px 0;
}
#header.header.header-scrolled,#header.header.sticked{box-shadow:0 8px 30px rgba(24,26,60,.08)}
#header .logo img{max-height:38px;width:auto}
#header .logo span{font-weight:800;font-size:1.35rem;letter-spacing:-.02em;color:var(--oip-ink)}

#navbar ul{gap:2px}
#navbar a,#navbar a:focus{
  color:var(--oip-ink-soft);font-weight:600;font-size:15px;
  padding:9px 16px;border-radius:var(--oip-r-pill);
  transition:background .2s var(--oip-ease),color .2s var(--oip-ease);
}
#navbar a:hover,#navbar .active,#navbar li:hover>a{
  color:var(--primary-color);background:color-mix(in srgb,var(--primary-color) 9%,transparent);
}
#navbar .getstarted,#navbar .getstarted:focus{
  background:linear-gradient(135deg,var(--primary-color),#4a3ce6);color:#fff;padding:10px 24px;
  box-shadow:0 10px 24px color-mix(in srgb,var(--primary-color) 30%,transparent);
}
#navbar .getstarted:hover{filter:brightness(1.04);transform:translateY(-1px)}
.mobile-nav-toggle{color:var(--oip-ink) !important;font-size:28px}

/* ---- Buttons -------------------------------------------------------- */
.btn-get-started,.btn-main,.cta-btn,.btn-buy,
.php-email-form button[type="submit"]{
  border-radius:var(--oip-r-pill) !important;font-weight:700;letter-spacing:.01em;
  padding:14px 32px;
  background:linear-gradient(135deg,var(--primary-color) 0%,#4a3ce6 100%) !important;
  border:0 !important;color:#fff !important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--primary-color) 26%,transparent) !important;
  transition:transform .2s var(--oip-ease),box-shadow .2s var(--oip-ease),filter .2s var(--oip-ease);
}
.btn-get-started:hover,.btn-main:hover,.cta-btn:hover,.btn-buy:hover{
  filter:brightness(1.05);transform:translateY(-2px);
  box-shadow:0 18px 38px color-mix(in srgb,var(--primary-color) 34%,transparent) !important;
}

/* ---- Hero ---------------------------------------------------------- */
#hero,.hero,.hero-premium{
  background:
    radial-gradient(1000px 520px at 8% -10%, color-mix(in srgb,var(--primary-color) 12%,transparent), transparent 60%),
    radial-gradient(760px 420px at 100% 10%, color-mix(in srgb,var(--secondary-color) 10%,transparent), transparent 62%),
    var(--oip-cream) !important;
  padding:clamp(96px,8vw,150px) 0 clamp(64px,7vw,110px) !important;
}
.hero-badge-modern{
  background:var(--oip-surface);box-shadow:var(--oip-neu-sm);border:1px solid var(--oip-line);
  border-radius:var(--oip-r-pill);color:var(--primary-color);
}

/* built hero artwork (replaces the old branded jpg) */
.oip-hero-art{max-width:440px}
.oip-hero-card{
  background:color-mix(in srgb,#ffffff 70%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--oip-r-xl);
  box-shadow:var(--oip-glass-shadow);
  padding:26px;
}
.oip-hero-card-head{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--oip-ink-soft);font-size:14px}
.oip-hero-logo{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;font-weight:800}
.oip-hero-lock{margin-left:auto;color:var(--secondary-color)}
.oip-hero-amount{margin:20px 0;padding:18px;border-radius:var(--oip-r-md);background:rgba(255,255,255,.6);border:1px solid var(--oip-line)}
.oip-hero-amount span{display:block;font-size:12px;color:var(--oip-ink-mute);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.oip-hero-amount strong{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.oip-hero-amount strong span{font-size:18px;color:var(--oip-ink-mute)}
.oip-hero-methods{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.oip-hero-methods span{font-size:12px;font-weight:600;color:var(--oip-ink-soft);
  background:rgba(255,255,255,.7);border:1px solid var(--oip-line);border-radius:var(--oip-r-pill);padding:6px 12px}
.oip-hero-pay{
  text-align:center;font-weight:700;color:#fff;padding:14px;border-radius:var(--oip-r-pill);
  background:linear-gradient(135deg,var(--primary-color),#4a3ce6);
  box-shadow:0 12px 26px color-mix(in srgb,var(--primary-color) 30%,transparent);
}
.oip-hero-chip{
  position:absolute;display:flex;align-items:center;gap:12px;
  background:color-mix(in srgb,#ffffff 82%,transparent);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--oip-r-md);
  box-shadow:var(--oip-glass-shadow);padding:12px 16px;
}
.oip-hero-chip--secure{left:-34px;top:38%}
.oip-hero-chip--settled{right:-30px;bottom:8%}
.oip-hero-chip-ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--primary-color);color:#fff;font-size:16px}
.oip-hero-chip-ic--ok{background:var(--secondary-color)}
@media(max-width:1199px){ .oip-hero-chip{position:static;margin-top:12px;width:100%} .oip-hero-art{max-width:420px} }
@media(max-width:991px){ .oip-hero-art{margin-top:36px} }

/* ---- Cards: services / features / values / team ------------------- */
.icon-box,.service-item,.feature-box,.member,.value-box,
.feature-card-premium,.features .feature-item,.portfolio-content{
  background:var(--oip-surface) !important;
  border:1px solid var(--oip-line) !important;
  border-radius:var(--oip-r-lg) !important;
  box-shadow:var(--oip-neu-sm) !important;
  transition:transform .28s var(--oip-ease),box-shadow .28s var(--oip-ease);
}
.icon-box:hover,.service-item:hover,.feature-box:hover,.member:hover,
.value-box:hover,.feature-card-premium:hover,.features .feature-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--oip-neu) !important;
}
.icon-box .icon,.service-item .icon,.feature-box .icon{
  border-radius:var(--oip-r-sm);
  background:color-mix(in srgb,var(--primary-color) 12%,transparent);
  color:var(--primary-color);box-shadow:var(--oip-neu-in);
}

/* ---- Pricing ---------------------------------------------------- */
#pricing,.pricing{background:var(--oip-cream-2) !important}
.pricing .box,.pricing-card-premium{
  background:var(--oip-surface) !important;padding:clamp(28px,3vw,46px) clamp(20px,2.4vw,32px) !important;
  border:1px solid var(--oip-line) !important;border-radius:var(--oip-r-lg) !important;
  box-shadow:var(--oip-neu-sm) !important;
  transition:transform .25s var(--oip-ease),box-shadow .25s var(--oip-ease);
}
.pricing .box:hover,.pricing-card-premium:hover{transform:translateY(-6px);box-shadow:var(--oip-neu) !important}
.pricing .box.featured,.pricing-card-premium.featured{border:2px solid var(--primary-color) !important;box-shadow:var(--oip-glass-shadow) !important}
.pricing .box .price,.pricing-card-premium .h2{font-weight:800;font-variant-numeric:tabular-nums}

/* ---- FAQ ------------------------------------------------------ */
.faq .accordion-item,.faq-item,.faq .faq-list li{
  border:1px solid var(--oip-line);border-radius:var(--oip-r-sm);
  margin-bottom:12px;background:var(--oip-surface);box-shadow:var(--oip-neu-sm);overflow:hidden;
}
.faq .accordion-button:not(.collapsed){color:var(--primary-color);background:color-mix(in srgb,var(--primary-color) 6%,transparent)}

/* ---- Blog --------------------------------------------------- */
.blog .post-item,.blog-card,.post-entry,.blog .entry{
  border:1px solid var(--oip-line);border-radius:var(--oip-r-lg);overflow:hidden;
  background:var(--oip-surface);box-shadow:var(--oip-neu-sm);
  transition:transform .28s var(--oip-ease),box-shadow .28s var(--oip-ease);
}
.blog .post-item:hover,.blog-card:hover,.blog .entry:hover{transform:translateY(-6px);box-shadow:var(--oip-neu)}

/* ---- Forms ------------------------------------------------- */
.php-email-form .form-control,.php-email-form input,.php-email-form textarea,.form-control{
  border-radius:var(--oip-r-sm);border:1px solid var(--oip-line);padding:13px 16px;
  background:var(--oip-surface);box-shadow:var(--oip-neu-in);
}
.php-email-form .form-control:focus,.form-control:focus{
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 20%,transparent);
}

/* ---- Footer --------------------------------------------- */
#footer.footer,#footer .footer-top{background:#141520;color:#c8c9d6}
#footer .footer-links a,#footer .footer-info p,#footer .footer-contact p,#footer .copyright{color:#a9abbc}
#footer .footer-links a:hover{color:#fff}
#footer h4{color:#fff}
#footer .social-links a{background:rgba(255,255,255,.08);border-radius:var(--oip-r-pill);transition:background .2s var(--oip-ease)}
#footer .social-links a:hover{background:var(--primary-color)}

.back-to-top{border-radius:var(--oip-r-pill) !important;background:var(--primary-color) !important;box-shadow:0 12px 26px color-mix(in srgb,var(--primary-color) 30%,transparent)}
.modal-content{border:0;border-radius:var(--oip-r-lg);box-shadow:var(--oip-glass-shadow)}

/* ============================================================================
   RESPONSIVE — every breakpoint, no overflow, touch-friendly
   ========================================================================== */
*,*::before,*::after{max-width:100%}
img,svg,video,iframe{max-width:100%;height:auto}
.container,.container-fluid,.container-xl{padding-left:16px;padding-right:16px}
section{overflow:hidden}

/* tablet */
@media(max-width:991.98px){
  .hero-premium,#hero{text-align:center}
  .hero-premium .d-flex.flex-wrap{justify-content:center}
  #navbar{background:#fff}
  .section-header .display-6,.section-header .h3{font-size:clamp(1.3rem,4.6vw,1.8rem) !important}
  .feature-card-premium{padding:30px}
}

/* phone */
@media(max-width:767.98px){
  #header .logo span{font-size:1.15rem}
  .hero-premium,#hero{padding:96px 0 60px !important}
  h1,.display-3{font-size:clamp(1.8rem,7vw,2.4rem) !important}
  .btn-get-started,.btn-main,.cta-btn{width:100%;justify-content:center;padding:14px 22px}
  .row{--bs-gutter-x:1rem}
  .pricing .box,.pricing-card-premium{padding:28px 22px !important}
  .oip-hero-card{padding:20px}
  .oip-hero-amount strong{font-size:26px}
  #footer .footer-top{text-align:center}
  #footer .social-links{justify-content:center;display:flex}
  table{display:block;overflow-x:auto;white-space:nowrap}
}

/* small phone */
@media(max-width:400px){
  .container,.container-xl{padding-left:12px;padding-right:12px}
  h1,.display-3{font-size:1.7rem !important}
  .oip-hero-methods span{font-size:11px;padding:5px 10px}
}

/* ---- UI polish + perceived speed --------------------------------- */
a,button{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,.btn:focus-visible,.form-control:focus-visible,#navbar a:focus-visible{
  outline:2px solid var(--primary-color);outline-offset:3px;border-radius:8px;
}
.btn-get-started:active,.btn-main:active,.cta-btn:active,#navbar .getstarted:active{transform:scale(.97)}
.icon-box,.service-item,.feature-box,.pricing .box,.blog .post-item{will-change:transform}
/* keep AOS snappy so nothing feels laggy */
[data-aos]{transition-duration:.5s !important}
img[loading="lazy"]{background:var(--oip-cream-2)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  [data-aos]{opacity:1 !important;transform:none !important}
}