/* =====================================================
   FINAMAN ERP — Pharma Landing Page Stylesheet
   WordPress Theme Asset: assets/css/pharma-erp.css
   Design system: FINAMAN ERP Homepage branding
   ===================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── DESIGN TOKENS ── */
:root {
  --navy:        #123A7A;
  --blue:        #123A7A;
  --blue2:       #0E2F63;
  --accent:      #F4A12A;
  --green:       #10B981;
  --red:         #EF4444;
  --light:       #F7F8FA;
  --white:       #FFFFFF;
  --gray:        #F7F8FA;
  --text:        #0F172A;
  --muted:       #64748B;
  --border:      #E5E7EB;
  --dark:        #0F172A;
  --wa:          #25D366;
  --btn-radius:  10px;
  --card-radius: 18px;
  --trans-slow:  0.8s cubic-bezier(0.16, 1, 0.3, 1);
  --trans-fast:  0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════ */
.pe-topbar {
  background: var(--navy);
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pe-topbar-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pe-topbar-logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
}
.pe-topbar-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.pe-topbar-name span { color: var(--accent); }

.pe-topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.pe-topbar-phone {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pe-topbar-phone strong { color: #fff; }

.pe-topbar-wa-btn {
  background: var(--wa);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--btn-radius);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.pe-topbar-wa-btn:hover {
  background: #20bc5a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,0.3);
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.pe-hero{
    background:
        /* Fade ONLY on right side */
        linear-gradient(
            to left,
            rgba(255,255,255,.55) 0%,
            rgba(255,255,255,.30) 12%,
            rgba(255,255,255,.10) 25%,
            rgba(255,255,255,0) 40%
        ),

        url("https://logixinfotech.in/wp-content/uploads/2026/07/Hero-bg2.webp")
        right center / 100% auto no-repeat,

        #ffffff;

    padding:70px 40px 120px;
}
@media(max-width:991px){

.pe-hero::before{
    width:100%;
    opacity:.12;
    background-position:center;
}

}
.pe-hero-inner{
    position:relative;
    z-index:2;
}
.pe-hero-bg-grid{
display:none;
}
.pe-hero-glow {
  position: absolute;
  top: -120px; right: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(244,161,42,0.12) 0%, transparent 65%);
  border-radius: 50%;
  pointer-events: none;
}

.pe-hero-inner {
  max-width: 1060px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items:flex-start;
}

/* Hero Badge */
.pe-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(244,161,42,0.12);
  border: 1px solid rgba(244,161,42,0.30);
  color: var(--accent);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 24px;
  animation: pe-slideDown .5s ease both;
}
.pe-badge-dot {
  width: 7px; height: 7px;
  background: var(--green);
  border-radius: 50%;
  animation: pe-blink 1.5s infinite;
}
@keyframes pe-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Hero Headline */
.pe-hero h1 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(40px,4.5vw,60px);
  font-weight: 900;
  color: #0F172A;
  line-height: 1.02;
  margin-bottom: 20px;
  letter-spacing: -2px;
  max-width:680px;
  animation: pe-slideDown .6s ease .1s both;
}
.pe-hero h1 em{
    font-style: normal;
    background: #2563EB;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.pe-hero-glow,
.pe-hero-glow2{
display:none;
}
.pe-t-bullet{
color:#0F172A;
font-weight:700;
}

.pe-t-bullet svg{
color:#16A34A;
}
/* ===========================
   HERO STATS CARD
=========================== */

.pe-hero-stats{
    margin-top:10px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:#fff;
    border:1px solid #E5E7EB;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(15,23,42,.08);
}

.pe-stat{
    padding:28px 20px;
    text-align:center;
    position:relative;
}

.pe-stat:not(:last-child){
    border-right:1px solid #E5E7EB;
}

.pe-stat-icon{
    width:64px;
    height:64px;
    margin:0 auto 5px;
    background:#F3F7FF;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pe-stat-icon img{
    width:40px;
    height:40px;
    object-fit:contain;
}

.pe-stat-num{
    font-size:15px;
    font-weight:800;
    line-height:1;
    color:#163C8F;
    margin-bottom:8px;
}

.pe-stat-label{
    font-size:10px;
    line-height:1.5;
    color:#64748B;
}

/* remove old divider */
.pe-stat-divider{
    display:none;
}

@media(max-width:768px){

.pe-hero-stats{
grid-template-columns:repeat(2,1fr);
}

.pe-stat{
padding:22px 15px;
}

.pe-stat:nth-child(2){
border-right:none;
}

.pe-stat:nth-child(1),
.pe-stat:nth-child(2){
border-bottom:1px solid #E5E7EB;
}

.pe-stat-num{
font-size:40px;
}

.pe-stat-label{
font-size:14px;
}

.pe-stat-icon{
width:56px;
height:56px;
}

}
/* ===========================
   HERO MOBILE
=========================== */

@media (max-width:768px){

.pe-hero{

    padding:28px 18px 50px;
    background-position:70% top;
    background-size:cover;

}

.pe-hero-inner{

    grid-template-columns:1fr;
    gap:28px;

}

.pe-hero-badge{

    display:none;

}

/* ---------- Heading ---------- */

.pe-hero h1{

    max-width:100%;
    text-align:center;

    font-size:52px;
    line-height:1.02;
    letter-spacing:-2px;

    margin-bottom:18px;

}

.pe-hero-desc{

    text-align:center;
    font-size:16px;
    line-height:1.75;

    max-width:100%;

}

/* ---------- Stats ---------- */

.pe-hero-stats{

    margin-top:28px;

    grid-template-columns:repeat(2,1fr);

    border-radius:18px;

}

.pe-stat{

    padding:18px 12px;

}

.pe-stat:nth-child(2){

    border-right:none;

}

.pe-stat:nth-child(1),
.pe-stat:nth-child(2){

    border-bottom:1px solid #E5E7EB;

}

.pe-stat-icon{

    width:50px;
    height:50px;

    margin-bottom:10px;

}

.pe-stat-icon img{

    width:28px;
    height:28px;

}

.pe-stat-num{

    font-size:15px;
    line-height:1.2;
    margin-bottom:6px;

    letter-spacing:-.3px;

}

.pe-stat-label{

    font-size:11px;
    line-height:1.35;

}
@media (max-width:768px){

.pe-hero{
    background:
        linear-gradient(
            rgba(255,255,255,.40),
            rgba(255,255,255,.80)
        ),
        url("https://logixinfotech.in/wp-content/uploads/2026/07/Hero-bg2.webp")
        center center / cover no-repeat;
}

}
/* Hide only on mobile */
@media (max-width:768px){
    .feat-hide-mobile{
        display:none !important;
    }
}
/* ---------- Demo Form ---------- */

.pe-demo-card{

    margin-top:6px;

}

}
/* ══════════════════════════════════════════
   FORM CARD
   Exact styling from working live page —
   translated to pe- prefix for new page
══════════════════════════════════════════ */

/* Card wrapper */
.pe-form-card {
  background: var(--white);
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  animation: pe-slideUp .7s ease .2s both;
  position: relative;
  overflow: hidden;
}
.pe-form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), var(--accent));
}

/* Form header */
.pe-form-head { margin-bottom: 20px; }
.pe-form-head h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 5px;
}
.pe-form-head p {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* Live indicator */
.pe-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #e8fff5;
  border: 1px solid #b0f0d6;
  color: var(--green);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 50px;
}
.pe-live-dot::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  animation: pe-blink 1.2s infinite;
}

/* Fields */
.field { margin-bottom: 13px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}
.field label .pe-req { color: var(--red); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--gray);
  transition: all .2s;
  outline: none;
  -webkit-appearance: none;
}
.field textarea {
  height: 40px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--blue);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(18,58,122,.1);
}
.field input::placeholder,
.field textarea::placeholder { color: #aab0c4; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Submit button */
.pe-demo-btn {
  width: 100%;
  padding: 17px 24px;
  background: #1D4ED8;
  color: var(--white);
  border: none;
  border-radius: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 6px;
  transition: all .25s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pe-demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(18,58,122,.4);
}

/* Action row — submit (80%) + WhatsApp (20%) side by side */
.pe-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.pe-form-actions .pe-demo-btn {
  flex: 4;
  width: auto;
  margin-top: 0;
}
.pe-wa-btn-mini {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wa);
  border-radius: 14px;
  text-decoration: none;
  transition: all .25s;
}
.pe-wa-btn-mini:hover {
  background: #20bc5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,211,102,.35);
}

/* WhatsApp button inside form */
.pe-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: var(--wa);
  color: var(--white);
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 12px;
  transition: all .25s;
}
.pe-wa-btn:hover {
  background: #20bc5a;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(37,211,102,.35);
}
.pe-wa-btn span,
.pe-wa-btn div { color: var(--white); }
.pe-wa-sub { font-size: 11px; font-weight: 500; opacity: .85; }

/* OR divider */
.pe-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.pe-or-divider::before,
.pe-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Trust note */
.pe-form-trust {
  margin-top: 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ══════════════════════════════════════════
   SUCCESS STATE
══════════════════════════════════════════ */
.pe-success-state {
  display: none;
  text-align: center;
  padding: 20px 0;
}
.pe-success-icon {
  width: 68px; height: 68px;
  background: linear-gradient(135deg, var(--green), #0a8f5e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--white);
  margin: 0 auto 18px;
  animation: pe-popIn .5s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes pe-popIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.pe-success-state h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
}
.pe-success-state p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
}
.pe-next-steps {
  background: var(--gray);
  border-radius: 12px;
  padding: 18px;
  margin-top: 20px;
  text-align: left;
  border: 1px solid var(--border);
}
.pe-next-steps h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .8px;
  margin-bottom: 12px;
}
.pe-next-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
}
.pe-next-step:last-child { border: none; }
.pe-ns-num {
  width: 22px; height: 22px;
  min-width: 22px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Responsive — form card */
@media (max-width: 900px) {
  .pe-form-card { max-width: 480px; }
}
@media (max-width: 600px) {
  .pe-field-row { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
 /*═══════════════════════════════════════
 CLIENT LOGO SECTION
═══════════════════════════════════════*/

.pe-carousel-section{
    background:#fff;
    padding:55px 0;
    overflow:hidden;
}

.pe-carousel-label{
    display:table;
    margin:0 auto 35px;
    padding:8px 22px;
    background:#F2F7FF;
    color:#1E3A8A;
    font-size:12px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    border-radius:50px;
}

.pe-carousel-track-wrap{
    overflow:hidden;
    position:relative;
}

.pe-carousel-track{
    display:flex;
    align-items:center;
    gap:24px;
    width:max-content;
    animation:pe-scrollLeft 30s linear infinite;
}

.pe-carousel-track:hover{
    animation-play-state:paused;
}

@keyframes pe-scrollLeft{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}

/* Logo Cards */



/* Fade edges */

.pe-carousel-track-wrap::before,
.pe-carousel-track-wrap::after{

    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:120px;
    z-index:5;
    pointer-events:none;

}

.pe-carousel-track-wrap::before{

    left:0;
    background:linear-gradient(90deg,#fff,transparent);

}

.pe-carousel-track-wrap::after{

    right:0;
    background:linear-gradient(-90deg,#fff,transparent);

}


/* Tablet */

@media(max-width:991px){

.pe-carousel-logo{

    flex:0 0 180px;
    width:180px;
    height:82px;

}

}
.pe-logo-small{
    width:120px !important;
    height:45px !important;
}
.pe-logo-axa{
    width:250px !important;
    height:95px !important;
}
/* Mobile */

@media(max-width:768px){

.pe-carousel-section{

    padding:40px 0;

}

.pe-carousel-track{

    gap:16px;

}

.pe-carousel-logo{

    flex:0 0 150px;      /* shows about 3 cards */
    width:150px;
    height:72px;

    padding:14px;

}

.pe-carousel-track-wrap::before,
.pe-carousel-track-wrap::after{

    width:40px;

}

}
.pe-logo-card{

    flex:0 0 210px;

    width:210px;
    height:90px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#fff;

    border:1px solid #E7EDF7;

    border-radius:10px;

    box-shadow:0 8px 22px rgba(15,23,42,.08);

    transition:.35s;
}

.pe-logo-card:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(16,24,40,.16);
}

.pe-carousel-logo{

    width:200px;

    height:82px;

    max-width:none;

    max-height:none;

    object-fit:contain;

    padding:0;

    background:none;

    border:none;

    box-shadow:none;

}

@media(max-width:768px){

.pe-logo-card{

    width:150px;
    height:70px;
    flex:0 0 150px;

}

.pe-carousel-logo{

    width:190px;
    height:72px;

}

}

/* ══════════════════════════════════════════
   SHARED SECTION STYLES
══════════════════════════════════════════ */
.pe-section { padding: 72px 40px; }
.pe-section-inner { max-width: 1060px; margin: 0 auto; }

.pe-section-tag {
  display: inline-block;
  background: rgba(18,58,122,0.08);
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.pe-section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 12px;
  letter-spacing: -1px;
}
.pe-section-title em { font-style: normal; color: var(--navy); }
.pe-section-sub {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 600px;
}

/* ══════════════════════════════════════════
/*=========================================
PROBLEM SECTION
=========================================*/

.pe-problem-section{

    background:#F5F9FF;
    padding:90px 0;

}

/* Grid */

.pe-problems-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:55px;

}

/* Card */

.pe-problem-card{

    background:#fff;

    border-radius:22px;

    padding:34px 26px;

    text-align:center;

    border:1px solid #E7EEF8;

    box-shadow:
    0 12px 35px rgba(17,24,39,.06);

    transition:.45s cubic-bezier(.16,1,.3,1);

    opacity:0;
    transform:translateY(50px);

    animation:problemFade .8s forwards;

    position:relative;

}

/* Stagger */

.pe-problem-card:nth-child(2){animation-delay:.08s;}
.pe-problem-card:nth-child(3){animation-delay:.16s;}
.pe-problem-card:nth-child(4){animation-delay:.24s;}
.pe-problem-card:nth-child(5){animation-delay:.32s;}
.pe-problem-card:nth-child(6){animation-delay:.40s;}
.pe-problem-card:nth-child(7){animation-delay:.48s;}
.pe-problem-card:nth-child(8){animation-delay:.56s;}

@keyframes problemFade{

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* Hover */

.pe-problem-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 55px rgba(30,58,138,.12);

}

/* Icon */

.pe-problem-icon{

    width:82px;
    height:82px;

    margin:0 auto 22px;

    border-radius:50%;

    background:#FFF2F2;          /* light red */

    border:1px solid #FFD6D6;

    display:flex;
    align-items:center;
    justify-content:center;

}

.pe-problem-card:hover .pe-problem-icon{

    transform:scale(1.08) rotate(5deg);

    background:#E3EEFF;

}

.pe-problem-icon img{

    width:40px;
    height:40px;

    filter:
        invert(22%)
        sepia(90%)
        saturate(2700%)
        hue-rotate(345deg)
        brightness(98%)
        contrast(95%);

}

/* Title */

.pe-problem-text{

    font-size:14px;

    font-weight:500;

    line-height:1.55;

    color:#1E293B;

    text-align:center;

}

/* Remove old badge */

.pe-solve-tag{

    display:none;

}

/* Tablet */

@media(max-width:991px){

.pe-problems-grid{

    grid-template-columns:repeat(2,1fr);

}

}

/* Mobile */

@media(max-width:768px){

.pe-problem-section{

    padding:60px 0;

}

.pe-problems-grid{

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.pe-problem-card{

    padding:24px 16px;

}

.pe-problem-icon{

    width:62px;
    height:62px;
    margin-bottom:16px;

}

.pe-problem-icon img{

    width:30px;
    height:30px;

}

.pe-problem-title{

    font-size:16px;

}

.pe-problem-desc{

    font-size:13px;

    line-height:1.6;

}

}
/* ── FINAMAN ERP FEATURES (NEW SECTION) ── */
.features {
 background:
    radial-gradient(circle at top right,#3158C8 0%,transparent 35%),
    radial-gradient(circle at bottom left,#2749B6 0%,transparent 40%),
    linear-gradient(180deg,#143B96,#0B2C78);
}
.feat-stats-row {
display: flex;
justify-content: center;
gap: 48px;
margin-bottom: 50px;
padding-bottom: 30px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.feat-stat-item {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
color: var(--white);
}
.feat-stat-item i {
font-size: 20px;
color: var(--accent);
}
.feat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.feat-card {
background: var(--white);
border-radius: 12px;
padding: 32px 24px;
border: 1px solid var(--border);
box-shadow: 0 8px 24px rgba(0,0,0,0.04);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
transform: translateZ(0);
}
.feat-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(18, 58, 122, 0.1);
border-color: var(--blue);
}
.feat-card i{
    width:72px;
    height:72px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 0 22px;

    font-size:34px;
    color:var(--blue);

    background:#EEF4FF;
    border-radius:50%;

    flex-shrink:0;

    line-height:1;
}

@keyframes floatIcon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.feat-card h4 {
font-size: 17px;
font-weight: 800;
margin-bottom: 12px;
}
.feat-card p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
}
/* Section Heading */
.features .sec-title{
    color:#ffffff;
}

.features .sec-desc{
    color:rgba(255,255,255,.72);
}

.features .sec-label{
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.18);
    color:#FDBA3B;   /* Accent orange */
}
/* ── MODULES ── */
.modules { background: #F5F9FF; border-top: 1px solid var(--border); }
.mod-grid{
display:grid;
grid-template-columns:repeat(5,minmax(180px,1fr));
gap:22px;
justify-content:center;
}
.mod-card { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 30px 15px; text-align: center; transition: 0.3s; box-shadow: 0 6px 18px rgba(0,0,0,.03); }
.mod-card:hover { background: var(--sky); border-color: var(--blue); transform: translateY(-5px); }
.mod-card .mod-ico { font-size: 32px; margin-bottom: 12px; color: var(--blue); }
.mod-card h4 { font-size: 14px; font-weight: 800; margin-bottom: 5px; }
.mod-card p { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* ══════════════════════════════════════════
   TESTIMONIALS / VIDEOS
══════════════════════════════════════════ */
.pe-testimonials-section {
  background: var(--white);
  padding: 80px 40px;
}
.pe-testimonials-inner { max-width: 1060px; margin: 0 auto; }
.pe-videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.pe-video-card {
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1);
  cursor: pointer;
}
.pe-video-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(18,58,122,0.12);
  border-color: var(--navy);
}
.pe-video-thumb {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #111;
  cursor: pointer;
}
.pe-video-thumb img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.pe-video-card:hover .pe-video-thumb img { transform: scale(1.04); }
.pe-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  z-index: 2;
  box-shadow: 0 8px 28px rgba(0,0,0,0.15);
}
.pe-play-btn svg {
  width: 22px; height: 22px;
  fill: var(--navy);
  margin-left: 4px;
}
.pe-video-card:hover .pe-play-btn {
  background: var(--white);
  transform: translate(-50%, -50%) scale(1.10);
  box-shadow: 0 12px 36px rgba(18,58,122,0.20);
}
.pe-video-frame-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  display: none;
}
.pe-video-frame-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}
.pe-video-info {
  padding: 18px 20px;
  background: var(--white);
  border-top: 1px solid var(--border);
}
.pe-video-company {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.pe-video-label {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}
.pe-video-label::before { content: '★★★★★'; font-size: 11px; color: var(--accent); }


/* ══════════════════════════════════════════
   BOTTOM CTA
══════════════════════════════════════════ */
.pe-bottom-cta {
  background: var(--light);
  border-top: 1px solid var(--border);
  padding: 72px 40px;
  text-align: center;
}
.pe-bottom-cta h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(26px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -0.8px;
}
.pe-bottom-cta h2 span { color: var(--navy); }
.pe-bottom-cta p {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 36px;
  line-height: 1.7;
}
.pe-bottom-cta-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pe-big-demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 40px;
  background: var(--navy);
  color: var(--white);
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 6px 24px rgba(18,58,122,0.22);
}
.pe-big-demo-btn:hover {
  background: var(--blue2);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(18,58,122,0.32);
}
.pe-big-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: var(--wa);
  color: var(--white);
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 6px 20px rgba(37,211,102,0.22);
}
.pe-big-wa-btn:hover {
  background: #1fad57;
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(37,211,102,0.38);
}
/*==================================
FAQ
==================================*/

.pe-faq-section{

padding:90px 0;

background:#fff;

}

.pe-faq-head{

display:flex;

justify-content:space-between;

align-items:flex-end;

margin-bottom:50px;

gap:30px;

}

.pe-faq-btn{

padding:12px 22px;

border:2px solid #D7E5FF;

border-radius:12px;

font-weight:700;

color:#1E3A8A;

text-decoration:none;

transition:.3s;

}

.pe-faq-btn:hover{

background:#1E3A8A;

color:#fff;

}

.pe-faq-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:18px;

}

.pe-faq-item{

background:#fff;

border:1px solid #E5ECF8;

border-radius:14px;

overflow:hidden;

box-shadow:0 8px 22px rgba(16,24,40,.05);

transition:.3s;

}

.pe-faq-item:hover{

box-shadow:0 16px 35px rgba(16,24,40,.09);

}

.pe-faq-question{

width:100%;

background:#fff;

border:none;

padding:18px 22px;

display:flex;

justify-content:space-between;

align-items:center;

font-size:15px;

font-weight:700;

cursor:pointer;

color:#183153;

text-align:left;

}

.pe-faq-question span{

font-size:24px;

color:#1E3A8A;

transition:.3s;

}

.pe-faq-item.active .pe-faq-question span{

transform:rotate(45deg);

}

.pe-faq-answer{

max-height:0;

overflow:hidden;

transition:.35s;

padding:0 22px;

font-size:14px;

line-height:1.7;

color:#64748B;

}

.pe-faq-item.active .pe-faq-answer{

max-height:220px;

padding:0 22px 20px;

}

@media(max-width:991px){

.pe-faq-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.pe-faq-head{

flex-direction:column;

align-items:flex-start;

}

.pe-faq-grid{

grid-template-columns:1fr;

}

}

/* ══════════════════════════════════════════
   KEYFRAME ANIMATIONS
══════════════════════════════════════════ */
@keyframes pe-slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pe-slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pe-slideIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .pe-hero-inner          { grid-template-columns: 1fr; gap: 36px; }
  .pe-form-card           { max-width: 480px; }
  .pe-problems-grid       { grid-template-columns: repeat(2, 1fr); }
  .pe-features-grid       { grid-template-columns: repeat(2, 1fr); }
  .pe-modules-grid        { grid-template-columns: repeat(2, 1fr); }
  .pe-videos-grid         { grid-template-columns: 1fr; }
  .pe-wa-inner            { grid-template-columns: 1fr; }
  .pe-wa-cta-block        { min-width: unset; width: 100%; }
  .pe-topbar              { padding: 10px 20px; }
  .pe-hero,
  .pe-section,
  .pe-features-section,
  .pe-wa-section,
  .pe-bottom-cta,
  .pe-modules-section,
  .pe-testimonials-section { padding-left: 20px; padding-right: 20px; }
  .pe-footer              { padding: 20px; }
  .pe-bottom-cta-btns     { flex-direction: column; width: 100%; }
  .pe-big-demo-btn,
  .pe-big-wa-btn          { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .pe-topbar-phone        { display: none; }
  .pe-features-grid       { grid-template-columns: 1fr; }
  .pe-modules-grid        { grid-template-columns: repeat(2, 1fr); }
  .pe-hero-stats          { gap: 16px; }
  .pe-stat-divider        { display: none; }
  .pe-field-row           { grid-template-columns: 1fr; }
  .pe-problems-grid       { grid-template-columns: 1fr; }
}
/* ==========================================================
   MOBILE FIXES - PHARMA PAGE
   ========================================================== */

@media (max-width:768px){

/* 1. Less gap below navbar */
.pe-hero{
    padding:30px 20px 50px !important;
}

/* 2. Hide hero badge */
.pe-hero-badge{
    display:none !important;
}

/* 3. Better hero spacing */
.pe-hero-inner{
    gap:24px !important;
}

.pe-hero h1{
    margin-top:0 !important;
    font-size:34px !important;
    line-height:1.1 !important;
}

.pe-hero-desc{
    margin-top:14px !important;
    font-size:16px !important;
}

/* 4. Problem cards in 2 columns */
.pe-problems-grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:14px !important;
}

.pe-problem-card{
    padding:16px 14px !important;
}

.pe-problem-title{
    font-size:13px !important;
}

.pe-problem-desc{
    font-size:11px !important;
}

.pe-problem-emoji{
    font-size:22px !important;
}

}
/* ===========================
   FEATURES MOBILE FIX
=========================== */

@media (max-width:991px){

.features{
    padding:70px 0;
}

.feat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.feat-card{
    padding:24px 18px;
    border-radius:18px;
    min-height:230px;

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.feat-card i{
    margin:0 auto 18px;
}

.feat-card h4{
    font-size:18px;
    line-height:1.3;
}

.feat-card p{
    font-size:14px;
    line-height:1.55;
}

.feat-stats-row{
    gap:18px;
    justify-content:center;
}

.feat-stat-item{
    width:calc(50% - 10px);
    justify-content:center;
}

}
@media (max-width:768px){

.features{
    padding:60px 0;
}

.feat-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.feat-card{
    padding:20px 14px;
    min-height:200px;
}

.feat-card i{
    width:64px;
    height:64px;
    font-size:28px;
}

.feat-card h4{
    font-size:16px;
    margin-bottom:10px;
}

.feat-card p{
    font-size:13px;
    line-height:1.5;
}

.feat-stats-row{
    flex-direction:column;
    gap:16px;
}

.feat-stat-item{
    width:100%;
}

}
.reveal{
    opacity:0;
    transform:translateY(40px) scale(.98);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22,1,.36,1);

    will-change:transform,opacity;
}

.reveal.active{
    opacity:1;
    transform:translateY(0) scale(1);
}
/* =========================
   MODULES RESPONSIVE
========================= */

@media (max-width:991px){

    .mod-grid{
        grid-template-columns:repeat(3,1fr);
        gap:18px;
    }

}

@media (max-width:768px){

    .modules{
        padding:55px 0;
    }

    .mod-grid{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    .mod-card{
        padding:22px 12px;
        border-radius:14px;
    }

    .mod-card .mod-ico{
        font-size:52px;
        margin-bottom:14px;
    }

    .mod-card h4{
        font-size:18px;
        line-height:1.25;
        margin-bottom:6px;
    }

    .mod-card p{
        font-size:13px;
        line-height:1.4;
    }

}

@media (max-width:380px){

    .mod-grid{
        gap:12px;
    }

    .mod-card{
        padding:18px 10px;
    }

    .mod-card .mod-ico{
        font-size:46px;
    }

    .mod-card h4{
        font-size:16px;
    }

    .mod-card p{
        font-size:12px;
    }

}