/* ============================================================
   ABSOFT IT SOLUTIONS — CONSOLIDATED STYLESHEET
   Redesigned: Premium Zoho Partner + Business Process Automation
   Structure:
     1.  Google Fonts
     2.  CSS Custom Properties
     3.  Reset & Base
     4.  Utility Classes
     5.  Buttons
     6.  Topbar
     7.  Header & Navbar
     8.  Hero Section (Enterprise)
     9.  Partner Strip
    10.  Clients Logo Strip
    11.  Automation Cards (What We Automate)
    12.  Process Timeline (How We Work)
    13.  Zoho Ecosystem Grid
    14.  Why Choose Us
    15.  Industry Verticals
    16.  Solution Configurator
    17.  Impact Stats
    18.  Testimonials
    19.  CTA Banner
    20.  Newsletter
    21.  Footer
    22.  Page Hero — Inner Pages
    23.  Capabilities Page — Pillars, Details, Stats
    24.  Animations & Scroll Reveal
    25.  Dark Theme Overrides
    26.  Responsive
============================================================ */


/* ============================================================
   1. GOOGLE FONTS
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700;800&display=swap');


/* ============================================================
   2. CSS CUSTOM PROPERTIES
============================================================ */
:root {
  /* Brand colors */
  --color-primary:        #1a7f3c;
  --color-primary-dark:   #155f2d;
  --color-primary-light:  #dcfce7;
  --color-accent:         #22c55e;

  /* Neutrals */
  --color-dark:           #0f172a;
  --color-dark-2:         #1e293b;
  --color-heading:        #0f172a;
  --color-text:           #374151;
  --color-gray:           #6b7280;
  --color-gray-light:     #f9fafb;
  --color-border:         #f1f5f9;
  --color-border-strong:  #e2e8f0;
  --color-white:          #ffffff;

  /* Typography */
  --font-primary:         'Inter', sans-serif;
  --font-heading:         'Poppins', sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  1.875rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  2.75rem;
  --fs-5xl:  3.5rem;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --lh-tight:  1.2;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 800px;

  /* Topbar + Header */
  --topbar-h:    36px;
  --header-h:    64px;
  --header-total: calc(var(--topbar-h) + var(--header-h));

  /* Radius */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm:   0 1px 3px rgba(15,23,42,.06);
  --shadow-md:   0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:   0 8px 30px rgba(15,23,42,.12);
  --shadow-xl:   0 20px 60px rgba(15,23,42,.15);

  /* Transitions */
  --ease:      cubic-bezier(.4,0,.2,1);
  --duration:  300ms;
}


/* ============================================================
   3. RESET & BASE
============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--header-total)}
body{font-family:var(--font-primary);font-size:var(--fs-base);font-weight:var(--fw-regular);line-height:var(--lh-normal);color:var(--color-text);background:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font:inherit;border:none;background:none;cursor:pointer}
input,textarea,select{font:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--fw-bold);line-height:var(--lh-tight);color:var(--color-heading)}


/* ============================================================
   4. UTILITY CLASSES
============================================================ */
.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6)}
.container--wide{max-width:var(--container-wide)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding:var(--space-24) 0}
.section__header{text-align:center;max-width:720px;margin:0 auto var(--space-16)}
.section__tag{display:inline-block;padding:var(--space-2) var(--space-5);background:var(--color-primary-light);color:var(--color-primary);font-size:var(--fs-sm);font-weight:var(--fw-semibold);border-radius:var(--radius-full);margin-bottom:var(--space-5);letter-spacing:.02em}
.section__title{font-size:var(--fs-4xl);line-height:1.15;margin-bottom:var(--space-5)}
.section__subtitle{font-size:var(--fs-md);color:var(--color-gray);line-height:var(--lh-loose);max-width:640px;margin:0 auto}


/* ============================================================
   5. BUTTONS
============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-primary);font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:1;border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);transition:all var(--duration) var(--ease);white-space:nowrap;cursor:pointer;border:2px solid transparent}

.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.btn--primary:hover{background:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,127,60,.3)}

.btn--outline{background:transparent;color:var(--color-primary);border-color:var(--color-border-strong)}
.btn--outline:hover{border-color:var(--color-primary);background:var(--color-primary-light)}

.btn--outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.btn--outline-white:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6)}

.btn--white{background:#fff;color:var(--color-primary);border-color:#fff}
.btn--white:hover{background:var(--color-primary-light);border-color:var(--color-primary-light);transform:translateY(-1px)}

.btn--ghost{background:transparent;color:var(--color-primary);border-color:transparent}
.btn--ghost:hover{background:var(--color-primary-light)}

.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--fs-base);border-radius:var(--radius-md)}

.btn--glow{box-shadow:0 0 20px rgba(26,127,60,.25),0 0 60px rgba(34,197,94,.1)}
.btn--glow:hover{box-shadow:0 0 30px rgba(26,127,60,.4),0 0 80px rgba(34,197,94,.2)}

.btn__icon{flex-shrink:0;transition:transform var(--duration) var(--ease)}
.btn:hover .btn__icon{transform:translateX(3px)}


/* ============================================================
   6. TOPBAR
============================================================ */
.topbar{background:var(--color-dark);color:rgba(255,255,255,.85);font-size:var(--fs-xs);height:var(--topbar-h);position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;transition:transform .25s ease}
.topbar .container{display:flex;align-items:center;justify-content:space-between}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.topbar__left{display:flex;align-items:center;gap:var(--space-2);color:rgba(255,255,255,.7)}
.topbar__left svg{flex-shrink:0;color:var(--color-accent)}
.topbar__right{display:flex;align-items:center;gap:var(--space-5)}
.topbar__contact{display:flex;align-items:center;gap:var(--space-2);color:rgba(255,255,255,.75);transition:color var(--duration) var(--ease)}
.topbar__contact:hover{color:#fff}
.topbar__contact svg{flex-shrink:0;opacity:.7}
.topbar__socials{display:flex;align-items:center;gap:var(--space-3)}
.topbar__social{color:rgba(255,255,255,.5);transition:color var(--duration) var(--ease);display:flex;align-items:center}
.topbar__social:hover{color:var(--color-accent)}


/* ============================================================
   7. HEADER & NAVBAR
============================================================ */
.header{position:fixed;top:var(--topbar-h);left:0;right:0;z-index:999;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border);height:var(--header-h);transition:top var(--duration) var(--ease),box-shadow var(--duration) var(--ease);overflow:visible}
/* JS toggles .scrolled when past topbar */
.header.scrolled{box-shadow:var(--shadow-md)}
/* JS toggles .topbar-hidden when topbar slides up */
.header.topbar-hidden{top:0}

/* Header container needs full height */
.header .container{height:100%;overflow:visible}

/* Navbar container */
.navbar{display:flex;align-items:center;justify-content:space-between;height:100%;overflow:visible;position:relative}
.navbar__logo{display:flex;align-items:center;flex-shrink:0}
.navbar__logo img{height:36px;width:auto}

/* Menu list */
.navbar__menu{display:flex;align-items:center;gap:var(--space-2);list-style:none;margin:0;padding:0;overflow:visible}
.navbar__item{position:relative;flex-shrink:0;display:flex;align-items:center}
.navbar__item--has-dropdown>.navbar__link{cursor:default}
.navbar__link{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-text);border-radius:var(--radius-sm);transition:color var(--duration) var(--ease),background var(--duration) var(--ease);white-space:nowrap;text-decoration:none}
.navbar__link:hover,.navbar__link.active{color:var(--color-primary);background:var(--color-primary-light)}

/* Chevron icon */
.navbar__chevron{width:14px;height:14px;transition:transform var(--duration) var(--ease);flex-shrink:0}
.navbar__item:hover .navbar__chevron{transform:rotate(180deg)}

/* ---- Dropdown (Industries, Insights) ---- */
.navbar__dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:280px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-3);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration) var(--ease),visibility var(--duration) var(--ease),transform var(--duration) var(--ease);z-index:1000}
.navbar__item:hover>.navbar__dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

.navbar__dropdown-section-label{font-family:var(--font-heading);font-size:10px;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-gray);padding:var(--space-2) var(--space-3);margin-top:var(--space-1)}

.navbar__dropdown-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-3);border-radius:var(--radius-sm);transition:all var(--duration) var(--ease)}
.navbar__dropdown-item:hover{background:var(--color-primary-light)}

.navbar__dropdown-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-light);border-radius:var(--radius-sm);flex-shrink:0;color:var(--color-gray)}
.navbar__dropdown-item:hover .navbar__dropdown-icon{color:var(--color-primary)}

.navbar__dropdown-link{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--color-heading);line-height:1.3}
.navbar__dropdown-link small{display:block;font-weight:var(--fw-regular);font-size:var(--fs-xs);color:var(--color-gray);margin-top:1px}

.navbar__dropdown-divider{height:1px;background:var(--color-border);margin:var(--space-2) var(--space-3)}

/* ---- Mega Menu (Capabilities) ---- */
.navbar__mega{position:absolute;top:100%;left:0;transform:translateY(8px);width:780px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--space-8);opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--duration) var(--ease),visibility var(--duration) var(--ease),transform var(--duration) var(--ease);z-index:1000;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
.navbar__item:hover>.navbar__mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}

.navbar__mega-col{}
.navbar__mega-col-label{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-heading);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-gray);margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border)}
.navbar__mega-col-label svg{flex-shrink:0;opacity:.5}

.navbar__mega-item{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);transition:all var(--duration) var(--ease);margin-bottom:var(--space-1)}
.navbar__mega-item:hover{background:var(--color-primary-light)}
.navbar__mega-item--platform .navbar__mega-title{color:var(--color-primary)}

.navbar__mega-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);flex-shrink:0}

.navbar__mega-title{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-heading);margin-bottom:2px;display:flex;align-items:center;gap:var(--space-2)}
.navbar__mega-desc{font-size:var(--fs-xs);color:var(--color-gray);line-height:1.4}

.navbar__mega-badge{display:inline-block;padding:1px 6px;background:var(--color-primary-light);color:var(--color-primary);font-size:10px;font-weight:var(--fw-semibold);border-radius:var(--radius-full);letter-spacing:.02em}

/* CTA inside mega */
.navbar__mega-cta-box{margin-top:var(--space-5);padding:var(--space-4);background:var(--color-gray-light);border-radius:var(--radius-md);border:1px dashed var(--color-border-strong)}
.navbar__mega-cta-text{font-size:var(--fs-xs);color:var(--color-gray);margin-bottom:var(--space-2)}
.navbar__mega-cta-link{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-primary);transition:all var(--duration) var(--ease)}
.navbar__mega-cta-link:hover{color:var(--color-primary-dark);gap:var(--space-3)}

/* ---- Header actions (phone + CTA + hamburger) ---- */
.navbar__actions{display:flex;align-items:center;gap:var(--space-4)}
.navbar__phone{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:var(--color-heading);transition:all var(--duration) var(--ease)}
.navbar__phone:hover{background:var(--color-primary-light);color:var(--color-primary)}
.navbar__phone svg{width:16px;height:16px}

.navbar__cta{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-5);background:var(--color-primary);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-semibold);border-radius:var(--radius-md);transition:all var(--duration) var(--ease)}
.navbar__cta:hover{background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 14px rgba(26,127,60,.3)}
.navbar__cta svg{width:14px;height:14px;transition:transform var(--duration) var(--ease)}
.navbar__cta:hover svg{transform:translateX(3px)}

/* ---- Hamburger toggle ---- */
.navbar__hamburger{display:none;flex-direction:column;gap:5px;padding:var(--space-2);cursor:pointer;background:none;border:none}
.navbar__hamburger span{display:block;width:22px;height:2px;background:var(--color-heading);border-radius:2px;transition:all var(--duration) var(--ease)}
.navbar__hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navbar__hamburger.open span:nth-child(2){opacity:0}
.navbar__hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ============================================================
   8. HERO SECTION — Enterprise / Automation
============================================================ */
.hero,.hero--enterprise{position:relative;min-height:calc(100vh - var(--header-total));display:flex;align-items:center;background:var(--color-dark);overflow:hidden;padding:calc(var(--header-total) + var(--space-16)) 0 var(--space-16)}

/* Gradient orbs */
.hero__gradient-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.35;pointer-events:none}
.hero__gradient-orb--1{width:600px;height:600px;background:var(--color-primary);top:-200px;left:-100px}
.hero__gradient-orb--2{width:400px;height:400px;background:var(--color-accent);bottom:-100px;right:-50px}
.hero__gradient-orb--3{width:300px;height:300px;background:#6366f1;top:50%;right:20%;opacity:.15}

/* Grid background */
.hero__grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}

.hero__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;position:relative;z-index:2}

/* Content */
.hero__content{color:#fff}
.hero__badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:rgba(255,255,255,.9);margin-bottom:var(--space-8);backdrop-filter:blur(8px)}
.hero__badge-logo{height:18px;width:auto}
.hero__badge-divider{width:1px;height:14px;background:rgba(255,255,255,.2)}
.hero__badge-dot{width:6px;height:6px;background:var(--color-accent);border-radius:50%;animation:pulse 2s infinite}
.hero__badge-live{color:var(--color-accent);font-weight:var(--fw-semibold)}

.hero__title{font-size:var(--fs-5xl);font-weight:var(--fw-extrabold);line-height:1.08;margin-bottom:var(--space-6);color:#fff;letter-spacing:-.02em}
.hero__title-gradient{background:linear-gradient(135deg,var(--color-accent),#6ee7b7,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.hero__description{font-size:var(--fs-md);line-height:var(--lh-loose);color:rgba(255,255,255,.7);max-width:520px;margin-bottom:var(--space-8)}

.hero__actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-10)}

/* Proof bar */
.hero__proof-bar{display:flex;align-items:center;gap:var(--space-4);padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.08)}
.hero__proof-avatars{display:flex;align-items:center}
.hero__proof-avatars span{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:#fff;border:2px solid var(--color-dark);margin-left:-8px}
.hero__proof-avatars span:first-child{margin-left:0}
.hero__proof-avatars span:nth-child(1){background:#3b82f6}
.hero__proof-avatars span:nth-child(2){background:#8b5cf6}
.hero__proof-avatars span:nth-child(3){background:#ec4899}
.hero__proof-avatars span:nth-child(4){background:#f59e0b}
.hero__proof-count{background:var(--color-primary)!important;font-size:10px!important}
.hero__proof-text{display:flex;flex-direction:column;gap:2px}
.hero__proof-text strong{font-size:var(--fs-sm);color:#fff}
.hero__proof-text span{font-size:var(--fs-xs);color:rgba(255,255,255,.5)}

/* Automation Panel Visual */
.hero__visual{position:relative}
.hero__automation-panel{background:rgba(15,23,42,.8);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-lg);overflow:hidden;backdrop-filter:blur(20px);box-shadow:0 25px 80px rgba(0,0,0,.4)}

.hero__panel-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02)}
.hero__visual-dots{display:flex;gap:6px}
.hero__visual-dots span{width:10px;height:10px;border-radius:50%}
.hero__visual-dots span:nth-child(1){background:#ef4444}
.hero__visual-dots span:nth-child(2){background:#f59e0b}
.hero__visual-dots span:nth-child(3){background:#22c55e}
.hero__panel-title{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:rgba(255,255,255,.5);letter-spacing:.02em}
.hero__panel-status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--color-accent)}
.hero__status-dot{width:6px;height:6px;background:var(--color-accent);border-radius:50%;animation:pulse 2s infinite}

/* Automation flow */
.hero__automation-flow{padding:var(--space-6) var(--space-5)}
.hero__flow-step{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid transparent;transition:all var(--duration) var(--ease)}
.hero__flow-step--active{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)}
.hero__flow-step--processing{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.15);animation:softPulse 2s infinite}

.hero__flow-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero__flow-icon--blue{background:rgba(59,130,246,.15);color:#60a5fa}
.hero__flow-icon--green{background:rgba(34,197,94,.15);color:#4ade80}
.hero__flow-icon--purple{background:rgba(139,92,246,.15);color:#a78bfa}
.hero__flow-icon--amber{background:rgba(245,158,11,.15);color:#fbbf24}

.hero__flow-label{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:#fff}
.hero__flow-sub{font-size:var(--fs-xs);color:rgba(255,255,255,.4);margin-top:2px}

.hero__flow-check{margin-left:auto;width:20px;height:20px;border-radius:50%;background:rgba(34,197,94,.15);color:var(--color-accent);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0}

.hero__flow-spinner{margin-left:auto;width:18px;height:18px;border:2px solid rgba(245,158,11,.2);border-top-color:#fbbf24;border-radius:50%;animation:spin 1s linear infinite;flex-shrink:0}

.hero__flow-connector{padding:0 0 0 calc(var(--space-4) + 18px);height:20px;display:flex;align-items:center}
.hero__flow-connector span{display:block;width:2px;height:100%;background:rgba(255,255,255,.08);margin:0 auto}
.hero__flow-connector--pulse span{background:linear-gradient(to bottom,rgba(245,158,11,.3),rgba(245,158,11,.05));animation:connectorPulse 2s infinite}

/* Panel footer metrics */
.hero__panel-footer{border-top:1px solid rgba(255,255,255,.06);padding:var(--space-4) var(--space-5);background:rgba(255,255,255,.02)}
.hero__panel-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);text-align:center}
.hero__panel-metric{display:flex;flex-direction:column;align-items:center}
.hero__panel-metric-val{display:block;font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-accent)}
.hero__panel-metric-label{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}


/* ============================================================
   9. PARTNER STRIP
============================================================ */
.partner-strip{background:var(--color-primary-light);padding:var(--space-6) 0;border-bottom:1px solid rgba(26,127,60,.08)}
.partner-strip__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);flex-wrap:wrap}
.partner-strip__badge{display:flex;align-items:center;gap:var(--space-4)}
.partner-strip__logo{height:48px;width:auto;border-radius:var(--radius-sm)}
.partner-strip__divider{width:1px;height:36px;background:rgba(26,127,60,.15)}
.partner-strip__title{font-family:var(--font-heading);font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--color-primary-dark)}
.partner-strip__sub{font-size:var(--fs-xs);color:var(--color-gray);margin-top:2px}
.partner-strip__stats{display:flex;gap:var(--space-10)}
.partner-strip__stat{text-align:center}
.partner-strip__stat-num{font-family:var(--font-heading);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-primary)}
.partner-strip__stat-label{font-size:var(--fs-xs);color:var(--color-gray);line-height:1.3;margin-top:2px}
.partner-strip__cta{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-primary);transition:all var(--duration) var(--ease)}
.partner-strip__cta:hover{color:var(--color-primary-dark);gap:var(--space-3)}


/* ============================================================
   10. CLIENTS LOGO STRIP
============================================================ */
.clients{padding:var(--space-12) 0;border-bottom:1px solid var(--color-border)}
.clients__label{text-align:center;font-size:var(--fs-sm);color:var(--color-gray);margin-bottom:var(--space-8);font-weight:var(--fw-medium);letter-spacing:.02em}
.clients__track-wrapper{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.clients__track{display:flex;gap:var(--space-12);animation:marquee 35s linear infinite;width:max-content}
.clients__logo{height:28px;width:auto;filter:grayscale(100%);opacity:.45;transition:all var(--duration) var(--ease)}
.clients__logo:hover{filter:grayscale(0);opacity:1}

@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}


/* ============================================================
   11. AUTOMATION CARDS — "What We Automate"
============================================================ */
.automation{background:var(--color-white)}
.automation__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}

.auto-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);transition:all var(--duration) var(--ease);display:flex;flex-direction:column}
.auto-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-lg);transform:translateY(-4px)}

.auto-card--highlight{background:linear-gradient(135deg,var(--color-dark),var(--color-dark-2));border-color:rgba(255,255,255,.1)}
.auto-card--highlight .auto-card__title,.auto-card--highlight .auto-card__text{color:#fff}
.auto-card--highlight .auto-card__text{color:rgba(255,255,255,.65)}
.auto-card--highlight .auto-card__list li{color:rgba(255,255,255,.7)}
.auto-card--highlight .auto-card__list li::before{color:var(--color-accent)}
.auto-card--highlight:hover{border-color:rgba(34,197,94,.3);box-shadow:0 8px 40px rgba(0,0,0,.3)}

.auto-card__icon-wrap{width:48px;height:48px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5);flex-shrink:0}
.auto-card__icon-wrap--blue{background:#eff6ff;color:#3b82f6}
.auto-card__icon-wrap--green{background:#f0fdf4;color:#16a34a}
.auto-card__icon-wrap--purple{background:#f5f3ff;color:#7c3aed}
.auto-card__icon-wrap--red{background:#fef2f2;color:#dc2626}
.auto-card__icon-wrap--amber{background:#fffbeb;color:#d97706}
.auto-card__icon-wrap--primary{background:rgba(34,197,94,.15);color:var(--color-accent)}

.auto-card__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);margin-bottom:var(--space-3);color:var(--color-heading)}
.auto-card__text{font-size:var(--fs-sm);color:var(--color-gray);line-height:var(--lh-loose);margin-bottom:var(--space-5)}

.auto-card__list{margin-bottom:var(--space-5);flex-grow:1}
.auto-card__list li{font-size:var(--fs-sm);color:var(--color-text);padding:var(--space-1) 0;padding-left:var(--space-5);position:relative}
.auto-card__list li::before{content:"\2713";position:absolute;left:0;color:var(--color-primary);font-weight:var(--fw-bold);font-size:var(--fs-xs)}

.auto-card__tools{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:auto}
.auto-card__tool{padding:var(--space-1) var(--space-3);background:var(--color-gray-light);border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--color-gray)}
.auto-card--highlight .auto-card__tool{background:rgba(255,255,255,.08);color:rgba(255,255,255,.6)}


/* ============================================================
   12. PROCESS TIMELINE — "How We Work"
============================================================ */
.process{background:var(--color-gray-light)}
.process__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-6);position:relative}

.process-step{text-align:center;position:relative;padding:var(--space-8) var(--space-4)}
.process-step__num{font-family:var(--font-heading);font-size:var(--fs-4xl);font-weight:var(--fw-extrabold);color:var(--color-primary-light);line-height:1;margin-bottom:var(--space-4)}

.process-step__connector{position:absolute;top:60px;right:-15%;width:30%;height:2px;background:linear-gradient(90deg,var(--color-primary-light),var(--color-border));z-index:1}
.process-step:last-child .process-step__connector{display:none}

.process-step__icon{width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-5);color:var(--color-primary);position:relative;z-index:2;transition:all var(--duration) var(--ease)}
.process-step:hover .process-step__icon{background:var(--color-primary);color:#fff;border-color:var(--color-primary);box-shadow:0 4px 20px rgba(26,127,60,.25)}

.process-step__title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--space-3)}
.process-step__text{font-size:var(--fs-sm);color:var(--color-gray);line-height:var(--lh-normal)}
.process-step__duration{display:inline-block;margin-top:var(--space-4);padding:var(--space-1) var(--space-3);background:var(--color-primary-light);color:var(--color-primary);font-size:var(--fs-xs);font-weight:var(--fw-semibold);border-radius:var(--radius-full)}


/* ============================================================
   13. ZOHO ECOSYSTEM GRID
============================================================ */
.zoho-ecosystem{background:#fff}
.zoho-ecosystem__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}

.zoho-product{background:var(--color-gray-light);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);text-align:center;transition:all var(--duration) var(--ease)}
.zoho-product:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-md);transform:translateY(-3px)}

.zoho-product__icon{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-4)}
.zoho-product__name{font-family:var(--font-heading);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--space-1)}
.zoho-product__desc{font-size:var(--fs-xs);color:var(--color-gray);line-height:1.4}

.zoho-product--cta{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));border-color:var(--color-primary);display:flex;align-items:center;justify-content:center}
.zoho-product--cta:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(26,127,60,.25)}
.zoho-product__cta-link{display:flex;flex-direction:column;gap:var(--space-2);color:#fff;font-weight:var(--fw-semibold);font-size:var(--fs-base);text-align:center}
.zoho-product__cta-sub{font-size:var(--fs-xs);font-weight:var(--fw-regular);opacity:.75}


/* ============================================================
   14. WHY CHOOSE US
============================================================ */
.why-us{background:var(--color-dark);color:#fff;padding:var(--space-24) 0}
.why-us__inner{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
.why-us__eyebrow{display:inline-block;padding:var(--space-2) var(--space-5);background:rgba(34,197,94,.1);color:var(--color-accent);font-size:var(--fs-sm);font-weight:var(--fw-semibold);border-radius:var(--radius-full);margin-bottom:var(--space-6)}
.why-us__title{font-size:var(--fs-4xl);color:#fff;margin-bottom:var(--space-6);line-height:1.15}
.why-us__text{font-size:var(--fs-md);color:rgba(255,255,255,.65);line-height:var(--lh-loose);margin-bottom:var(--space-8)}

.why-us__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.why-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:var(--space-6);transition:all var(--duration) var(--ease)}
.why-card:hover{background:rgba(255,255,255,.07);border-color:rgba(34,197,94,.2);transform:translateY(-2px)}
.why-card__icon{width:40px;height:40px;border-radius:var(--radius-sm);background:rgba(34,197,94,.1);color:var(--color-accent);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-4)}
.why-card__title{font-size:var(--fs-base);font-weight:var(--fw-bold);color:#fff;margin-bottom:var(--space-2)}
.why-card__text{font-size:var(--fs-sm);color:rgba(255,255,255,.55);line-height:var(--lh-normal)}


/* ============================================================
   15. INDUSTRY VERTICALS
============================================================ */
.verticals{background:var(--color-white)}
.verticals__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6)}

.vertical-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);transition:all var(--duration) var(--ease);display:flex;flex-direction:column}
.vertical-card:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-lg);transform:translateY(-4px)}

.vertical-card__icon{width:52px;height:52px;border-radius:var(--radius-md);background:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5)}
.vertical-card__title{font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--space-3)}
.vertical-card__text{font-size:var(--fs-sm);color:var(--color-gray);line-height:var(--lh-normal);margin-bottom:var(--space-5)}

.vertical-card__usecases{margin-bottom:var(--space-5);flex-grow:1}
.vertical-card__usecases li{font-size:var(--fs-sm);color:var(--color-text);padding:var(--space-1) 0;padding-left:var(--space-5);position:relative}
.vertical-card__usecases li::before{content:"\2022";position:absolute;left:6px;color:var(--color-primary);font-weight:var(--fw-bold)}

.vertical-card__link{font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-primary);transition:all var(--duration) var(--ease);margin-top:auto}
.vertical-card__link:hover{color:var(--color-primary-dark);letter-spacing:.02em}


/* ============================================================
   16. SOLUTION CONFIGURATOR
============================================================ */
.configurator{background:var(--color-gray-light)}
.configurator__wizard{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}

.wizard-step{display:none;padding:var(--space-10)}
.wizard-step--active{display:block;animation:fadeIn .4s var(--ease)}

.wizard__progress{height:4px;background:var(--color-border);border-radius:2px;margin-bottom:var(--space-8);overflow:hidden}
.wizard__progress-bar{height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));border-radius:2px;transition:width .6s var(--ease)}

.wizard__question{font-family:var(--font-heading);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--space-6)}
.wizard__options{display:flex;flex-direction:column;gap:var(--space-3)}
.wizard-opt{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--color-heading);text-align:left;transition:all var(--duration) var(--ease);cursor:pointer}
.wizard-opt:hover{border-color:var(--color-primary);background:var(--color-primary-light);color:var(--color-primary)}
.wizard-opt__icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-light);border-radius:var(--radius-sm);flex-shrink:0;transition:all var(--duration) var(--ease)}
.wizard-opt:hover .wizard-opt__icon{background:rgba(26,127,60,.1);color:var(--color-primary)}

/* Result */
.wizard-result{text-align:center}
.wizard__result-inner{padding:var(--space-8)}
.wizard__result-icon{width:60px;height:60px;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-6)}
.wizard__result-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--space-4)}
.wizard__result-rec{font-size:var(--fs-base);color:var(--color-gray);line-height:var(--lh-loose);margin-bottom:var(--space-8)}
.wizard__result-actions{display:flex;justify-content:center;gap:var(--space-4);flex-wrap:wrap}
.wizard-restart{cursor:pointer}


/* ============================================================
   17. IMPACT STATS
============================================================ */
.impact{background:linear-gradient(135deg,var(--color-dark),var(--color-dark-2));padding:var(--space-20) 0}
.impact__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);text-align:center}
.impact__item{position:relative;padding:var(--space-6)}
.impact__item::after{content:'';position:absolute;right:0;top:20%;height:60%;width:1px;background:rgba(255,255,255,.08)}
.impact__item:last-child::after{display:none}
.impact__num{font-family:var(--font-heading);font-size:var(--fs-4xl);font-weight:var(--fw-extrabold);color:#fff;margin-bottom:var(--space-2)}
.impact__label{font-size:var(--fs-base);font-weight:var(--fw-semibold);color:rgba(255,255,255,.85);margin-bottom:var(--space-1)}
.impact__sublabel{font-size:var(--fs-xs);color:rgba(255,255,255,.4)}


/* ============================================================
   18. TESTIMONIALS
============================================================ */
.testimonials{background:var(--color-gray-light)}
.testimonials__slider{max-width:900px;margin:0 auto;position:relative;overflow:hidden}
.testimonials__track{display:flex;transition:transform .5s var(--ease)}

.testimonial-card{min-width:100%;padding:var(--space-10);background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);text-align:center;box-sizing:border-box}
.testimonial-card__stars{color:#f59e0b;font-size:var(--fs-lg);letter-spacing:2px;margin-bottom:var(--space-6)}
.testimonial-card__quote{font-size:var(--fs-md);font-style:italic;color:var(--color-text);line-height:var(--lh-loose);max-width:640px;margin:0 auto var(--space-8)}

.testimonial-card__author{display:flex;align-items:center;gap:var(--space-4);justify-content:center}
.testimonial-card__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover}
.testimonial-card__name{font-weight:var(--fw-semibold);color:var(--color-heading);font-size:var(--fs-sm)}
.testimonial-card__role{font-size:var(--fs-xs);color:var(--color-gray)}

.testimonials__dots{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-8)}
.testimonials__dots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--color-border-strong);cursor:pointer;transition:all var(--duration) var(--ease);padding:0}
.testimonials__dots button.active{background:var(--color-primary);width:24px;border-radius:var(--radius-full)}


/* ============================================================
   19. CTA BANNER
============================================================ */
.cta-banner{padding:var(--space-24) 0;background:var(--color-white)}
.cta-banner__inner{background:linear-gradient(135deg,var(--color-primary),#15803d);border-radius:var(--radius-xl);padding:var(--space-16) var(--space-10);text-align:center;position:relative;overflow:hidden}
.cta-banner__inner::before{content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;background:rgba(255,255,255,.05);border-radius:50%;pointer-events:none}

.cta-banner__badge{display:inline-block;padding:var(--space-2) var(--space-5);background:rgba(255,255,255,.15);color:#fff;font-size:var(--fs-sm);font-weight:var(--fw-semibold);border-radius:var(--radius-full);margin-bottom:var(--space-6);backdrop-filter:blur(8px)}

.cta-banner__title{font-size:var(--fs-3xl);font-weight:var(--fw-extrabold);color:#fff;margin-bottom:var(--space-5)}
.cta-banner__sub{font-size:var(--fs-md);color:rgba(255,255,255,.8);max-width:560px;margin:0 auto var(--space-8);line-height:var(--lh-loose)}

.cta-banner__actions{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-8)}

.cta-banner__trust{display:flex;align-items:center;justify-content:center;gap:var(--space-6);flex-wrap:wrap}
.cta-banner__trust span{font-size:var(--fs-sm);color:rgba(255,255,255,.7);font-weight:var(--fw-medium)}


/* ============================================================
   20. NEWSLETTER
============================================================ */
.newsletter{background:var(--color-gray-light);padding:var(--space-16) 0;border-top:1px solid var(--color-border)}
.newsletter__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);max-width:800px;margin:0 auto;flex-wrap:wrap}
.newsletter__content{flex-shrink:0}
.newsletter__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-heading);margin-bottom:var(--space-2)}
.newsletter__sub{font-size:var(--fs-sm);color:var(--color-gray)}
.newsletter__form{display:flex;gap:var(--space-3)}
.newsletter__input{padding:var(--space-3) var(--space-5);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font-size:var(--fs-sm);width:260px;background:#fff;transition:border-color var(--duration) var(--ease)}
.newsletter__input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(26,127,60,.1)}
.newsletter__btn{white-space:nowrap}


/* ============================================================
   21. FOOTER
============================================================ */
.footer{background:var(--color-dark);color:rgba(255,255,255,.7);padding:var(--space-16) 0 var(--space-8)}
.footer__main{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:var(--space-10);margin-bottom:var(--space-12)}

/* Brand column */
.footer__brand-logo{height:32px;width:auto;margin-bottom:var(--space-4)}
.footer__brand-desc{font-size:var(--fs-sm);line-height:var(--lh-loose);margin-bottom:var(--space-5);max-width:280px;color:rgba(255,255,255,.6)}
.footer__badge{height:48px;width:auto;margin-bottom:var(--space-5);opacity:.85}

/* Socials */
.footer__socials{display:flex;gap:var(--space-3);margin-top:var(--space-5)}
.footer__social-link{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);transition:all var(--duration) var(--ease)}
.footer__social-link:hover{background:var(--color-primary);color:#fff}
.footer__social-link svg{width:14px;height:14px}

/* Column titles */
.footer__col-title{font-family:var(--font-heading);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:#fff;margin-bottom:var(--space-5);text-transform:uppercase;letter-spacing:.04em}

/* Link lists */
.footer__links{list-style:none;padding:0;margin:0}
.footer__links li{margin-bottom:var(--space-3)}
.footer__link{font-size:var(--fs-sm);color:rgba(255,255,255,.6);transition:color var(--duration) var(--ease)}
.footer__link:hover{color:var(--color-accent)}

/* Contact items */
.footer__contact-item{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-4);font-size:var(--fs-sm)}
.footer__contact-icon{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;margin-top:1px;opacity:.6}
.footer__contact-icon img{width:16px;height:16px;filter:brightness(0) invert(1);opacity:.6}
.footer__contact-text{color:rgba(255,255,255,.6);line-height:var(--lh-normal)}

/* Bottom bar */
.footer__bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:var(--space-6);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4)}
.footer__copyright{font-size:var(--fs-xs);color:rgba(255,255,255,.4)}
.footer__bottom-links{display:flex;gap:var(--space-6)}
.footer__bottom-link{font-size:var(--fs-xs);color:rgba(255,255,255,.4);transition:color var(--duration) var(--ease)}
.footer__bottom-link:hover{color:rgba(255,255,255,.7)}


/* ============================================================
   22. PAGE HERO — Inner Pages
============================================================ */
.page-hero{
  position:relative;
  background:var(--color-dark);
  padding:calc(var(--space-24) + 100px) 0 var(--space-20);
  overflow:hidden;
  text-align:center;
}
.page-hero__gradient-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(120px);
  opacity:.18;
  pointer-events:none;
}
.page-hero__gradient-orb--1{
  width:600px;height:600px;
  background:var(--color-primary);
  top:-200px;left:-150px;
}
.page-hero__gradient-orb--2{
  width:500px;height:500px;
  background:var(--color-accent);
  bottom:-200px;right:-100px;
}
.page-hero__grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
}
.page-hero__content{position:relative;z-index:2;max-width:780px;margin:0 auto}
.page-hero__breadcrumb{
  display:flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-size:var(--fs-sm);color:rgba(255,255,255,.5);margin-bottom:var(--space-6);
}
.page-hero__breadcrumb a{color:rgba(255,255,255,.5);transition:color var(--duration) var(--ease)}
.page-hero__breadcrumb a:hover{color:var(--color-accent)}
.page-hero__breadcrumb svg{opacity:.4}
.page-hero__title{
  font-family:var(--ff-heading);font-size:var(--fs-5xl);font-weight:800;
  line-height:1.1;color:#fff;margin-bottom:var(--space-6);
}
.page-hero__subtitle{
  font-size:var(--fs-lg);line-height:var(--lh-relaxed);
  color:rgba(255,255,255,.65);margin-bottom:var(--space-10);max-width:660px;margin-left:auto;margin-right:auto;
}
.page-hero__actions{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap}


/* ============================================================
   23. CAPABILITIES PAGE — Pillars, Details, Stats
============================================================ */

/* --- Pillars Overview --- */
.cap-pillars{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8);
  margin-top:var(--space-16);
}
.cap-pillar{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-xl);
  padding:var(--space-10);text-align:left;
  transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease);
}
.cap-pillar:hover{transform:translateY(-6px);box-shadow:var(--shadow-xl)}
.cap-pillar__icon{
  width:56px;height:56px;border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-6);
}
.cap-pillar__icon--green{background:#dcfce7;color:#16a34a}
.cap-pillar__icon--blue{background:#dbeafe;color:#2563eb}
.cap-pillar__icon--purple{background:#ede9fe;color:#7c3aed}
.cap-pillar__title{
  font-family:var(--ff-heading);font-size:var(--fs-xl);font-weight:700;
  color:var(--color-heading);margin-bottom:var(--space-3);
}
.cap-pillar__text{font-size:var(--fs-base);color:var(--color-body);line-height:var(--lh-relaxed);margin-bottom:var(--space-6)}
.cap-pillar__links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-2)}
.cap-pillar__links li{}
.cap-pillar__links a{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-size:var(--fs-sm);font-weight:500;color:var(--color-primary);
  transition:color var(--duration) var(--ease);
}
.cap-pillar__links a::before{
  content:"→";font-size:12px;
}
.cap-pillar__links a:hover{color:var(--color-primary-dark)}


/* --- Capability Detail Sections --- */
.cap-detail{position:relative}
.cap-detail--alt{background:var(--color-surface)}
.cap-detail__inner{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center;
}
.cap-detail__inner--reverse{direction:rtl}
.cap-detail__inner--reverse > *{direction:ltr}
.cap-detail__content{}
.cap-detail__title{
  font-family:var(--ff-heading);font-size:var(--fs-3xl);font-weight:700;
  color:var(--color-heading);margin:var(--space-4) 0 var(--space-4);line-height:1.15;
}
.cap-detail__text{
  font-size:var(--fs-base);color:var(--color-body);line-height:var(--lh-relaxed);
  margin-bottom:var(--space-8);
}

/* Features list */
.cap-detail__features{display:flex;flex-direction:column;gap:var(--space-6);margin-bottom:var(--space-8)}
.cap-feature{display:flex;gap:var(--space-4);align-items:flex-start}
.cap-feature__icon{
  flex-shrink:0;width:40px;height:40px;border-radius:var(--radius-md);
  background:var(--color-primary-light);color:var(--color-primary);
  display:flex;align-items:center;justify-content:center;
}
.cap-feature__title{font-weight:600;font-size:var(--fs-base);color:var(--color-heading);margin-bottom:2px}
.cap-feature__desc{font-size:var(--fs-sm);color:var(--color-muted);line-height:var(--lh-relaxed)}

/* Tools row */
.cap-detail__tools{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.cap-detail__tool-label{font-size:var(--fs-xs);color:var(--color-muted);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.cap-detail__tools-list{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* Stats visual */
.cap-detail__visual{}
.cap-detail__stats-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);
}
.cap-stat{
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-8);text-align:center;
  transition:transform var(--duration) var(--ease),box-shadow var(--duration) var(--ease);
}
.cap-stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.cap-stat__num{
  font-family:var(--ff-heading);font-size:var(--fs-3xl);font-weight:800;
  color:var(--color-primary);line-height:1;margin-bottom:var(--space-2);
}
.cap-stat__label{font-size:var(--fs-sm);color:var(--color-muted);font-weight:500}

/* Alt section stat cards */
.cap-detail--alt .cap-stat{background:var(--color-surface);border-color:var(--color-border)}


/* ============================================================
   24. ANIMATIONS & SCROLL REVEAL
============================================================ */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes softPulse{0%,100%{opacity:1}50%{opacity:.85}}
@keyframes connectorPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* Scroll reveal */
[data-reveal]{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal]:not([data-reveal="left"]):not([data-reveal="right"]){transform:translateY(30px)}
[data-reveal].revealed{opacity:1;transform:translate(0)}


/* ============================================================
   25. DARK THEME — Full dark version overrides
   Applied via <body class="dark-theme">
============================================================ */

/* --- Base --- */
.dark-theme{
  background:#050810;
  color:rgba(255,255,255,.7);
  position:relative;
  overflow-x:hidden;
}

/* Full-page animated gradient mesh */
.dark-theme::before{
  content:'';
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(26,127,60,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 10%, rgba(99,102,241,.08) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 60% 90%, rgba(34,197,94,.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(139,92,246,.06) 0%, transparent 50%);
  animation:darkMeshShift 20s ease-in-out infinite alternate;
}

/* Floating ambient orbs (placed via HTML) */
.dark-theme .dark-orb{
  position:fixed;
  border-radius:50%;
  pointer-events:none;
  z-index:0;
  filter:blur(100px);
  will-change:transform,opacity;
}
.dark-orb--1{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(26,127,60,.18),transparent 70%);
  top:-10%;left:-5%;
  animation:orbFloat1 25s ease-in-out infinite alternate;
}
.dark-orb--2{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(99,102,241,.12),transparent 70%);
  top:30%;right:-10%;
  animation:orbFloat2 30s ease-in-out infinite alternate;
}
.dark-orb--3{
  width:450px;height:450px;
  background:radial-gradient(circle,rgba(34,197,94,.1),transparent 70%);
  bottom:-5%;left:25%;
  animation:orbFloat3 22s ease-in-out infinite alternate;
}
.dark-orb--4{
  width:350px;height:350px;
  background:radial-gradient(circle,rgba(139,92,246,.08),transparent 70%);
  top:60%;left:-8%;
  animation:orbFloat4 28s ease-in-out infinite alternate;
}

/* Ambient animation keyframes */
@keyframes darkMeshShift{
  0%{opacity:.7;transform:scale(1) rotate(0deg)}
  33%{opacity:1;transform:scale(1.05) rotate(.5deg)}
  66%{opacity:.8;transform:scale(.98) rotate(-.3deg)}
  100%{opacity:.9;transform:scale(1.02) rotate(.2deg)}
}
@keyframes orbFloat1{
  0%{transform:translate(0,0) scale(1);opacity:.7}
  50%{transform:translate(80px,60px) scale(1.15);opacity:1}
  100%{transform:translate(-40px,30px) scale(.95);opacity:.6}
}
@keyframes orbFloat2{
  0%{transform:translate(0,0) scale(1);opacity:.5}
  50%{transform:translate(-60px,80px) scale(1.1);opacity:.8}
  100%{transform:translate(30px,-40px) scale(.9);opacity:.6}
}
@keyframes orbFloat3{
  0%{transform:translate(0,0) scale(1);opacity:.6}
  50%{transform:translate(50px,-50px) scale(1.2);opacity:.9}
  100%{transform:translate(-30px,20px) scale(.95);opacity:.5}
}
@keyframes orbFloat4{
  0%{transform:translate(0,0) scale(1);opacity:.4}
  50%{transform:translate(-40px,-60px) scale(1.1);opacity:.7}
  100%{transform:translate(60px,40px) scale(.95);opacity:.5}
}

/* Ensure all content sits above the fixed gradient layer */
.dark-theme .topbar{position:relative;z-index:9999}
.dark-theme .header{position:fixed;z-index:999}
.dark-theme main,
.dark-theme .footer{position:relative;z-index:1}

/* Subtle animated grain texture overlay */
.dark-theme main::before{
  content:'';
  position:fixed;inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Topbar --- */
.dark-theme .topbar{background:rgba(5,8,16,.85);border-bottom:1px solid rgba(255,255,255,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* --- Header --- */
.dark-theme .header{
  background:rgba(8,12,24,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.dark-theme .header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.4)}
.dark-theme .navbar__link{color:rgba(255,255,255,.7)}
.dark-theme .navbar__link:hover,
.dark-theme .navbar__link.active{color:var(--color-accent);background:rgba(34,197,94,.08)}
.dark-theme .navbar__chevron{color:rgba(255,255,255,.4)}
.dark-theme .navbar__phone{color:rgba(255,255,255,.7)}
.dark-theme .navbar__phone:hover{background:rgba(34,197,94,.1);color:var(--color-accent)}
.dark-theme .navbar__hamburger span{background:rgba(255,255,255,.8)}

/* Header dropdowns */
.dark-theme .navbar__dropdown{background:#0f1424;border-color:rgba(255,255,255,.08);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.dark-theme .navbar__dropdown-item:hover{background:rgba(34,197,94,.08)}
.dark-theme .navbar__dropdown-icon{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4)}
.dark-theme .navbar__dropdown-item:hover .navbar__dropdown-icon{color:var(--color-accent)}
.dark-theme .navbar__dropdown-link{color:rgba(255,255,255,.85)}
.dark-theme .navbar__dropdown-link small{color:rgba(255,255,255,.4)}
.dark-theme .navbar__dropdown-divider{background:rgba(255,255,255,.06)}
.dark-theme .navbar__dropdown-section-label{color:rgba(255,255,255,.35)}

/* Mega menu */
.dark-theme .navbar__mega{background:#0f1424;border-color:rgba(255,255,255,.08);box-shadow:0 16px 60px rgba(0,0,0,.5)}
.dark-theme .navbar__mega-col-label{color:rgba(255,255,255,.35);border-bottom-color:rgba(255,255,255,.06)}
.dark-theme .navbar__mega-item:hover{background:rgba(34,197,94,.08)}
.dark-theme .navbar__mega-icon{background:rgba(255,255,255,.06)}
.dark-theme .navbar__mega-title{color:rgba(255,255,255,.9)}
.dark-theme .navbar__mega-desc{color:rgba(255,255,255,.4)}
.dark-theme .navbar__mega-badge{background:rgba(34,197,94,.12);color:var(--color-accent)}
.dark-theme .navbar__mega-cta-box{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.08)}
.dark-theme .navbar__mega-cta-text{color:rgba(255,255,255,.4)}

/* --- Section utilities --- */
.dark-theme .section__tag{background:rgba(34,197,94,.1);color:var(--color-accent);border:1px solid rgba(34,197,94,.15)}
.dark-theme .section__title{color:#fff}
.dark-theme .section__subtitle{color:rgba(255,255,255,.5)}

/* --- Partner Strip --- */
.dark-theme .partner-strip{background:linear-gradient(135deg,rgba(26,127,60,.08),rgba(5,8,16,.6));border-bottom:1px solid rgba(34,197,94,.08);backdrop-filter:blur(8px)}
.dark-theme .partner-strip__title{color:var(--color-accent)}
.dark-theme .partner-strip__sub{color:rgba(255,255,255,.45)}
.dark-theme .partner-strip__divider{background:rgba(255,255,255,.1)}
.dark-theme .partner-strip__stat-num{color:var(--color-accent)}
.dark-theme .partner-strip__stat-label{color:rgba(255,255,255,.45)}
.dark-theme .partner-strip__cta{color:var(--color-accent)}
.dark-theme .partner-strip__cta:hover{color:#6ee7b7}

/* --- Clients --- */
.dark-theme .clients{border-bottom:1px solid rgba(255,255,255,.04);background:linear-gradient(180deg,rgba(5,8,16,.3),transparent)}
.dark-theme .clients__label{color:rgba(255,255,255,.35)}
.dark-theme .clients__logo{filter:grayscale(100%) brightness(0) invert(1);opacity:.2}
.dark-theme .clients__logo:hover{filter:grayscale(0) brightness(1) invert(0);opacity:.85}

/* --- Automation cards --- */
.dark-theme .automation{background:linear-gradient(180deg,transparent,rgba(26,127,60,.03) 50%,transparent)}
.dark-theme .auto-card{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
.dark-theme .auto-card:hover{
  border-color:rgba(34,197,94,.2);
  box-shadow:0 8px 40px rgba(0,0,0,.3);
  background:rgba(255,255,255,.05);
}
.dark-theme .auto-card__title{color:#fff}
.dark-theme .auto-card__text{color:rgba(255,255,255,.5)}
.dark-theme .auto-card__list li{color:rgba(255,255,255,.6)}
.dark-theme .auto-card__list li::before{color:var(--color-accent)}
.dark-theme .auto-card__tool{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5)}
.dark-theme .auto-card__icon-wrap--blue{background:rgba(59,130,246,.12);color:#60a5fa}
.dark-theme .auto-card__icon-wrap--green{background:rgba(34,197,94,.12);color:#4ade80}
.dark-theme .auto-card__icon-wrap--purple{background:rgba(139,92,246,.12);color:#a78bfa}
.dark-theme .auto-card__icon-wrap--red{background:rgba(239,68,68,.12);color:#f87171}
.dark-theme .auto-card__icon-wrap--amber{background:rgba(245,158,11,.12);color:#fbbf24}

/* highlight card stays similar */
.dark-theme .auto-card--highlight{background:rgba(255,255,255,.05);border-color:rgba(34,197,94,.12)}
.dark-theme .auto-card--highlight:hover{border-color:rgba(34,197,94,.3);box-shadow:0 8px 40px rgba(0,0,0,.4)}

/* --- Process Timeline --- */
.dark-theme .process{background:linear-gradient(135deg,rgba(99,102,241,.03),rgba(26,127,60,.04),rgba(139,92,246,.02))}
.dark-theme .process-step__num{color:rgba(34,197,94,.15)}
.dark-theme .process-step__connector{background:linear-gradient(90deg,rgba(34,197,94,.15),rgba(255,255,255,.04))}
.dark-theme .process-step__icon{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
  color:var(--color-accent);
}
.dark-theme .process-step:hover .process-step__icon{
  background:var(--color-primary);color:#fff;border-color:var(--color-primary);
  box-shadow:0 4px 20px rgba(34,197,94,.3);
}
.dark-theme .process-step__title{color:#fff}
.dark-theme .process-step__text{color:rgba(255,255,255,.45)}
.dark-theme .process-step__duration{background:rgba(34,197,94,.1);color:var(--color-accent)}

/* --- Zoho Ecosystem --- */
.dark-theme .zoho-ecosystem{background:linear-gradient(180deg,transparent,rgba(99,102,241,.02) 50%,transparent)}
.dark-theme .zoho-product{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
.dark-theme .zoho-product:hover{
  border-color:rgba(34,197,94,.2);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
  background:rgba(255,255,255,.05);
}
.dark-theme .zoho-product__name{color:#fff}
.dark-theme .zoho-product__desc{color:rgba(255,255,255,.4)}
.dark-theme .zoho-product__icon{opacity:.9}
/* Make icon backgrounds semi-transparent on dark */
.dark-theme .zoho-product__icon[style]{background-color:transparent!important}
.dark-theme .zoho-product--cta{background:linear-gradient(135deg,var(--color-primary),#15803d);border-color:var(--color-primary)}
.dark-theme .zoho-product--cta:hover{box-shadow:0 8px 30px rgba(34,197,94,.3)}

/* --- Why Choose Us (already dark, but slight tweak) --- */
.dark-theme .why-us{background:linear-gradient(135deg,#040712,rgba(26,127,60,.06),#060a14)}
.dark-theme .why-card{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}
.dark-theme .why-card:hover{background:rgba(255,255,255,.06);border-color:rgba(34,197,94,.2)}

/* --- Industry Verticals --- */
.dark-theme .verticals{background:linear-gradient(180deg,transparent,rgba(34,197,94,.02) 50%,transparent)}
.dark-theme .vertical-card{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
.dark-theme .vertical-card:hover{
  border-color:rgba(34,197,94,.2);
  box-shadow:0 8px 40px rgba(0,0,0,.3);
  background:rgba(255,255,255,.05);
}
.dark-theme .vertical-card__icon{background:rgba(34,197,94,.1);color:var(--color-accent)}
.dark-theme .vertical-card__title{color:#fff}
.dark-theme .vertical-card__text{color:rgba(255,255,255,.45)}
.dark-theme .vertical-card__usecases li{color:rgba(255,255,255,.55)}
.dark-theme .vertical-card__usecases li::before{color:var(--color-accent)}
.dark-theme .vertical-card__link{color:var(--color-accent)}
.dark-theme .vertical-card__link:hover{color:#6ee7b7}

/* --- Solution Configurator --- */
.dark-theme .configurator{background:linear-gradient(135deg,rgba(139,92,246,.02),rgba(26,127,60,.03),rgba(99,102,241,.02))}
.dark-theme .configurator__wizard{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06);box-shadow:0 8px 40px rgba(0,0,0,.3)}
.dark-theme .wizard__progress{background:rgba(255,255,255,.06)}
.dark-theme .wizard__question{color:#fff}
.dark-theme .wizard-opt{
  border-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.8);
  background:transparent;
}
.dark-theme .wizard-opt:hover{
  border-color:rgba(34,197,94,.3);
  background:rgba(34,197,94,.08);
  color:var(--color-accent);
}
.dark-theme .wizard-opt__icon{background:rgba(255,255,255,.06);color:rgba(255,255,255,.5)}
.dark-theme .wizard-opt:hover .wizard-opt__icon{background:rgba(34,197,94,.12);color:var(--color-accent)}
.dark-theme .wizard__result-icon{background:rgba(34,197,94,.12);color:var(--color-accent)}
.dark-theme .wizard__result-title{color:#fff}
.dark-theme .wizard__result-rec{color:rgba(255,255,255,.5)}
.dark-theme .wizard-restart{color:var(--color-accent)}

/* --- Impact Stats (already dark, slight tweak) --- */
.dark-theme .impact{background:linear-gradient(135deg,#040712,rgba(26,127,60,.08),#0c1020,rgba(99,102,241,.05))}

/* --- Testimonials --- */
.dark-theme .testimonials{background:linear-gradient(180deg,transparent,rgba(34,197,94,.02) 50%,transparent)}
.dark-theme .testimonial-card{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.06);
}
.dark-theme .testimonial-card__quote{color:rgba(255,255,255,.7)}
.dark-theme .testimonial-card__name{color:#fff}
.dark-theme .testimonial-card__role{color:rgba(255,255,255,.4)}
.dark-theme .testimonial-card__avatar{border:2px solid rgba(255,255,255,.1)}
.dark-theme .testimonials__dots button{background:rgba(255,255,255,.12)}
.dark-theme .testimonials__dots button.active{background:var(--color-accent)}

/* --- CTA Banner --- */
.dark-theme .cta-banner{background:transparent}

/* --- Newsletter --- */
.dark-theme .newsletter{background:linear-gradient(135deg,rgba(99,102,241,.02),rgba(26,127,60,.03));border-top:1px solid rgba(255,255,255,.04)}
.dark-theme .newsletter__title{color:#fff}
.dark-theme .newsletter__sub{color:rgba(255,255,255,.4)}
.dark-theme .newsletter__input{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.1);
  color:#fff;
}
.dark-theme .newsletter__input::placeholder{color:rgba(255,255,255,.3)}
.dark-theme .newsletter__input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(34,197,94,.12)}

/* --- Buttons in dark context --- */
.dark-theme .btn--outline{
  color:rgba(255,255,255,.8);
  border-color:rgba(255,255,255,.15);
}
.dark-theme .btn--outline:hover{
  border-color:var(--color-accent);
  background:rgba(34,197,94,.08);
  color:var(--color-accent);
}
.dark-theme .btn--ghost{color:var(--color-accent)}
.dark-theme .btn--ghost:hover{background:rgba(34,197,94,.08)}

/* --- Footer (already dark, subtle refinement) --- */
.dark-theme .footer{background:linear-gradient(180deg,#060a14,#030508)}

/* --- Global dark glow accents --- */
.dark-theme .hero__gradient-orb{opacity:.35}
.dark-theme .hero__gradient-orb--3{opacity:.2;animation:orbFloat2 18s ease-in-out infinite alternate}

/* Animated card shimmer for glass cards on hover */
.dark-theme .auto-card::before,
.dark-theme .vertical-card::before,
.dark-theme .zoho-product::before{
  content:'';
  position:absolute;inset:0;
  border-radius:inherit;
  opacity:0;
  background:linear-gradient(135deg,transparent 40%,rgba(34,197,94,.04) 50%,transparent 60%);
  background-size:200% 200%;
  transition:opacity .4s var(--ease);
  pointer-events:none;
}
.dark-theme .auto-card:hover::before,
.dark-theme .vertical-card:hover::before,
.dark-theme .zoho-product:hover::before{
  opacity:1;
  animation:cardShimmer 2s linear infinite;
}
.dark-theme .auto-card,
.dark-theme .vertical-card,
.dark-theme .zoho-product{
  position:relative;overflow:hidden;
}

@keyframes cardShimmer{
  0%{background-position:200% 200%}
  100%{background-position:-200% -200%}
}

/* --- Mobile nav in dark mode --- */
@media(max-width:991px){
  .dark-theme .navbar__menu{background:#0a0f1e}
  .dark-theme .navbar__dropdown,
  .dark-theme .navbar__mega{box-shadow:none;border:none}
}


/* ============================================================
   26. RESPONSIVE
============================================================ */

/* <= 1100px */
@media(max-width:1100px){
  .hero__inner{grid-template-columns:1fr;gap:var(--space-10)}
  .hero__content{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero__title{font-size:var(--fs-4xl)}
  .hero__description{margin:0 auto var(--space-8)}
  .hero__actions{justify-content:center}
  .hero__proof-bar{justify-content:center}

  .automation__grid{grid-template-columns:repeat(2,1fr)}
  .process__steps{grid-template-columns:repeat(3,1fr)}
  .process-step:nth-child(4) .process-step__connector,
  .process-step:nth-child(5) .process-step__connector{display:none}
  .zoho-ecosystem__grid{grid-template-columns:repeat(3,1fr)}
  .verticals__grid{grid-template-columns:repeat(2,1fr)}

  .why-us__inner{grid-template-columns:1fr}
  .why-us__content{text-align:center}

  .navbar__mega{width:600px;grid-template-columns:repeat(2,1fr)}

  .page-hero__title{font-size:var(--fs-4xl)}
  .cap-pillars{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
  .cap-detail__inner{gap:var(--space-10)}
}

/* <= 991px — Tablet */
@media(max-width:991px){
  .section{padding:var(--space-20) 0}
  .section__title{font-size:var(--fs-3xl)}

  /* Mobile nav */
  .navbar__hamburger{display:flex}
  .navbar__menu{position:fixed;top:var(--menu-top, var(--header-total));left:0;right:0;bottom:0;background:#fff;flex-direction:column;padding:var(--space-6);gap:var(--space-2);transform:translateX(100%);transition:transform var(--duration) var(--ease);overflow-y:auto;align-items:stretch;z-index:998}
  .navbar__menu.open{transform:translateX(0)}
  .navbar__item{display:block;flex-shrink:1}
  .navbar__link{padding:var(--space-3) var(--space-4);font-size:var(--fs-base);display:flex}
  .navbar__dropdown,.navbar__mega{position:static;transform:none;width:100%;opacity:0;visibility:hidden;box-shadow:none;border:none;padding:0;max-height:0;overflow:hidden;transition:all .3s ease;display:block;grid-template-columns:1fr}
  .navbar__item.open>.navbar__dropdown,.navbar__item.open>.navbar__mega{opacity:1;visibility:visible;max-height:1000px;padding:var(--space-2) 0 var(--space-2) var(--space-6)}

  .navbar__phone{display:none}
  .navbar__cta{display:none}

  .partner-strip__inner{justify-content:center;text-align:center;flex-direction:column;gap:var(--space-5)}
  .partner-strip__stats{justify-content:center}

  .impact__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-6)}
  .impact__item:nth-child(2)::after{display:none}

  .footer__main{grid-template-columns:1fr 1fr;gap:var(--space-8)}

  .page-hero{padding:calc(var(--space-20) + 100px) 0 var(--space-16)}
  .cap-pillars{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .cap-detail__inner,.cap-detail__inner--reverse{grid-template-columns:1fr;direction:ltr}
  .cap-detail__visual{order:2}
}

/* <= 768px — Mobile landscape */
@media(max-width:768px){
  :root{--fs-5xl:2.5rem;--fs-4xl:2rem;--fs-3xl:1.75rem}
  .section{padding:var(--space-16) 0}
  .section__header{margin-bottom:var(--space-10)}

  .hero{min-height:auto;padding:calc(var(--header-total) + var(--space-10)) 0 var(--space-10)}
  .hero__title{font-size:var(--fs-4xl)}

  .automation__grid{grid-template-columns:1fr}
  .process__steps{grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .process-step__connector{display:none}
  .zoho-ecosystem__grid{grid-template-columns:repeat(2,1fr)}
  .verticals__grid{grid-template-columns:1fr}
  .why-us__grid{grid-template-columns:1fr 1fr}

  .page-hero{padding:calc(var(--space-16) + 100px) 0 var(--space-12)}
  .page-hero__title{font-size:var(--fs-3xl)}
  .page-hero__subtitle{font-size:var(--fs-base)}
  .cap-detail__stats-grid{gap:var(--space-3)}
  .cap-stat{padding:var(--space-6)}
  .cap-stat__num{font-size:var(--fs-2xl)}

  .cta-banner__inner{padding:var(--space-10) var(--space-6)}
  .cta-banner__title{font-size:var(--fs-2xl)}

  .newsletter__inner{flex-direction:column;text-align:center}
  .newsletter__form{width:100%;flex-direction:column}
  .newsletter__input{width:100%}
}

/* <= 576px — Mobile portrait */
@media(max-width:576px){
  .container{padding:0 var(--space-4)}

  .topbar__left{gap:var(--space-3)}
  .topbar__right .topbar__partner{display:none}

  .hero__actions{flex-direction:column;width:100%}
  .hero__actions .btn{width:100%}
  .hero__proof-bar{flex-direction:column;text-align:center}

  .hero__panel-metrics{grid-template-columns:1fr;gap:var(--space-2)}
  .hero__automation-flow{padding:var(--space-4)}

  .process__steps{grid-template-columns:1fr}
  .zoho-ecosystem__grid{grid-template-columns:1fr 1fr}
  .why-us__grid{grid-template-columns:1fr}
  .impact__grid{grid-template-columns:1fr}
  .impact__item::after{display:none}

  .cta-banner__trust{flex-direction:column;gap:var(--space-2)}

  .page-hero__actions{flex-direction:column;width:100%}
  .page-hero__actions .btn{width:100%}
  .cap-detail__stats-grid{grid-template-columns:1fr}
  .cap-feature{flex-direction:column;gap:var(--space-2)}

  .footer__main{grid-template-columns:1fr}

  .wizard-step{padding:var(--space-6)}
  .wizard-opt{padding:var(--space-3) var(--space-4);font-size:var(--fs-sm)}
}

/* <= 480px */
@media(max-width:480px){
  .hero__badge{font-size:10px;padding:var(--space-1) var(--space-3)}
  .hero__title{font-size:1.75rem}
  .hero__description{font-size:var(--fs-base)}
  .section__title{font-size:var(--fs-2xl)}

  .zoho-ecosystem__grid{grid-template-columns:1fr}
}