<?php
session_start();
function h($v){ return htmlspecialchars($v, ENT_QUOTES, 'UTF-8'); }

$sidebar = [
  ['id'=>'overview','label'=>'All Features','icon'=>'fa-layer-group'],
  ['id'=>'employee-management','label'=>'Employee management','icon'=>'fa-user-group'],
  ['id'=>'administration','label'=>'Administration','icon'=>'fa-clipboard-list'],
  ['id'=>'processing','label'=>'Processing','icon'=>'fa-sliders'],
  ['id'=>'statutory-compliance','label'=>'Statutory compliance','icon'=>'fa-shield-halved'],
  ['id'=>'salary-configurations','label'=>'Salary configurations','icon'=>'fa-money-bill-wave'],
  ['id'=>'benefits-administration','label'=>'Benefits administration','icon'=>'fa-heart'],
  ['id'=>'leave-and-attendance','label'=>'Leave and attendance','icon'=>'fa-calendar-check'],
  ['id'=>'employee-self-service-portal','label'=>'Employee self service portal','icon'=>'fa-user-pen'],
  ['id'=>'payroll-reports','label'=>'Payroll reports','icon'=>'fa-chart-column'],
  ['id'=>'integration','label'=>'Integration','icon'=>'fa-plug'],
  ['id'=>'privacy-and-security','label'=>'Privacy and security','icon'=>'fa-lock'],
  ['id'=>'customizations','label'=>'Customizations','icon'=>'fa-gear'],
  ['id'=>'custom-integrations','label'=>'Custom integrations','icon'=>'fa-diagram-project'],
  ['id'=>'platform-capabilities','label'=>'Platform capabilities','icon'=>'fa-sitemap'],
];

$sections = [
  ['id'=>'employee-management','eyebrow'=>'Employee management','title'=>'Ensure a smooth payroll journey for your team','summary'=>'Simplify every stage of the employee lifecycle so your people feel supported and your business runs smoothly.','link'=>'Manage your employees with ease','visual'=>'employee','cards'=>[
    ['Quick and structured onboarding','Help new hires settle in quickly with structured operations so they feel engaged and productive from day one.'],
    ['Centralize employee information','Maintain all employee information in one unified place, reducing errors and saving countless hours of work.'],
    ['Filter employee data with custom views','Build customized employee views to quickly filter, group, and review required details without switching screens.'],
    ['Employee rehire made easy','Rehire previously exited employees quickly as the system retrieves details from the previous financial year.'],
    ['Monitor leave and attendance','Track leave balances, attendance patterns, and leave trends to manage your workforce more efficiently.'],
    ['Manage contractors beyond employees','Onboard contractors with the same ease as employees and keep reporting details organized.'],
  ]],
  ['id'=>'administration','eyebrow'=>'Administration','title'=>'Make every payroll task effortless','summary'=>'Automate key tasks so you can focus less on admin work and more on growing your business.','link'=>'Payroll administration made easy','visual'=>'admin','cards'=>[
    ['Full and final settlements for employees','Automate resignations and settlements to ensure compliance and provide departing employees with a smooth exit process.'],
    ['Work locations and roles','Keep location-specific information, access levels, and responsibilities organized across payroll operations.'],
    ['Process reimbursements smoothly','Track and approve reimbursement claims with built-in checks that keep everything compliant.'],
    ['Stay on top of tax submissions','Collect, verify, and approve declarations in one organized flow to ensure error-free tax calculations.'],
    ['Collaborate securely with users and roles','Create and manage tailored roles and permissions so teams can collaborate securely and efficiently.'],
    ['Administer loan repayments','Handle employee loans by automating deductions and recording repayments.'],
  ]],
  ['id'=>'processing','eyebrow'=>'Processing','title'=>'Process your payroll in minutes, not days','summary'=>'Turn payroll into a routine that is fast, accurate, and effortless with automated and compliant processes.','link'=>'Keep payroll processing simple','visual'=>'processing','cards'=>[
    ['Define flexible payment schedules','Create payroll schedules that fit your workflow, adjusting for weekends, holidays, and workdays.'],
    ['Customise salary components','Add salary components, allowances, and deductions to a pay run to ensure accurate payroll processing.'],
    ['Skip salary for employees','Temporarily skip payroll for employees on extended leave or those ineligible, keeping future payments uninterrupted.'],
    ['Revise salary for rewarding employees','Keep payroll up to date after appraisals or mid-year reviews while maintaining accurate tax calculations.'],
    ['Pay outside regular cycles','Manage salary revisions, onboarding, and pending payments with off-cycle payroll for timely pay.'],
    ['Offer flexible payment modes','Manage salary payments through cash, cheque, or bank transfers without juggling separate processes.'],
  ]],
  ['id'=>'statutory-compliance','eyebrow'=>'Statutory compliance','title'=>'Built-in compliance you can rely on','summary'=>'Stay tax-ready automatically with built-in statutory calculations for EPF, PT, ESI, LWF, and statutory bonuses.','link'=>'Stay ahead with built-in compliance','visual'=>'compliance','cards'=>[
    ['Customizable statutory components','Stay tax-ready with built-in calculations for EPF, PT, ESI, LWF and statutory bonuses.'],
    ['Simplify compliance for contractor payments','Handle contractor payouts smoothly with built-in TDS for 194C and 194J and optional statutory benefits.'],
    ['Secure your employees\' future with EPF','Configure employee-wise PF contributions to match company policies while staying compliant.'],
    ['Support employees in emergencies with ESI','Provide employees with financial security during emergencies through automated deductions.'],
    ['Promote employee welfare through LWF','Enhance employee welfare and social security with LWF benefits and support.'],
    ['Generate compliance-ready reports','Get ready-to-file reports for audits, inspections, or internal reviews without scrambling at the last minute.'],
  ]],
  ['id'=>'salary-configurations','eyebrow'=>'Salary configurations','title'=>'Create flexible pay structures built around your business','summary'=>'Create salary structures using ready-made templates or your own custom setup, and ensure compliant payouts every month.','link'=>'Tailor salary structures to fit your needs','visual'=>'salary','cards'=>[
    ['Use pre-built salary components','Use built-in components such as basic pay, HRA, allowances, bonuses, reimbursements, and deductions.'],
    ['Create tailored salary components','Create components like performance bonuses, travel claims, or team-specific allowances.'],
    ['Ready-to-use salary templates','Design reusable salary templates that simplify setup while keeping payroll structured and consistent.'],
    ['Apply formulas for accurate payouts','Set up formula-based components once, and let the system handle complex salary calculations.'],
    ['Handle off-cycle payments','Process urgent payouts such as corrections, incentives, or reimbursement adjustments outside the regular payroll run.'],
    ['Offer flexible CTC planning','Let employees distribute their CTC across eligible components such as HRA, LTA, conveyance, and fuel.'],
  ]],
  ['id'=>'benefits-administration','eyebrow'=>'Benefits administration','title'=>'Make managing employee benefits feel effortless','summary'=>'Deliver meaningful benefits to your employees while keeping the whole process simple, efficient, and free of administrative hassle.','link'=>'Manage employee benefits with ease','visual'=>'benefits','cards'=>[
    ['Flexible benefits built around your workforce','Set up reimbursement policies in minutes, covering fuel, driver, travel, and internet.'],
    ['Manage diverse pre-tax deductions','Configure recurring NPS, VPF, and mediclaim deductions easily.'],
    ['Automate vehicle perquisite handling','Account for ownership, maintenance costs, and driver provision to compute precise taxable values.'],
    ['Help employees save more on taxes','Empower employees to choose benefits while payroll excludes eligible amounts from tax.'],
    ['Support employees with salary advances','Provide quick financial relief to employees when needed, while keeping business expenses under control.'],
  ]],
  ['id'=>'leave-and-attendance','eyebrow'=>'Leave and attendance','title'=>'Manage all your leave and attendance needs in one place','summary'=>'Seamlessly manage leave and attendance to streamline HR workflows, reduce administrative effort, and ensure accurate payroll processing every time.','link'=>'Explore how leave, attendance and payroll work together','visual'=>'leave','cards'=>[
    ['Design work hours that fit your team','Set shift timings and working hours for full and half days to ensure reliable attendance tracking.'],
    ['Track attendance from anywhere, anytime','Enable employees worldwide to record check-ins and check-outs easily through the employee portal.'],
    ['Add flexibility to attendance with regularisation','Let employees request corrections for missed check-ins or check-outs whenever needed.'],
    ['Customise leave types your way','Define custom leave types as per your organizational policies and decide whether they are paid or unpaid.'],
    ['Offer flexible leave benefits','Allow employees to either cash out or roll over unused leave into the next year.'],
    ['Simplify leave and attendance tracking','Provide employees the ability to track leave, view attendance, and regularize missed requests from the portal.'],
  ]],
  ['id'=>'employee-self-service-portal','eyebrow'=>'Employee self service portal','title'=>'Give your employees a dedicated payroll space','summary'=>'Empower your employees with an ESS portal where they can mark attendance, apply for leave, and review payroll records in real time.','link'=>'Empower your employees with an ESS portal','visual'=>'portal','bullets'=>[
    'Mark and track attendance, apply for leave, and review your attendance summary and leave balance.',
    'Approve leave requests from your reportees without delays.',
    'Receive timely alerts for proof submission and important updates.',
    'Download your payslips, TDS details, and Form-16 effortlessly.',
    'Submit IT declarations and proof of investments digitally.',
    'Monitor your loan details and EMI repayment status.',
    'File reimbursement claims and attach receipts for verification.',
    'View personal or company documents uploaded by the admin.',
    'Get payroll questions addressed instantly through real-time chats.',
  ]],
  ['id'=>'payroll-reports','eyebrow'=>'Payroll reports','title'=>'Make informed decisions with detailed payroll insights','summary'=>'Access comprehensive payroll reports instantly, turning detailed insights into smarter, data-driven business decisions.','link'=>'See how payroll insights support better decisions','visual'=>'reports','cards'=>[
    ['Track payroll spend to plan budgets','Review overall payroll spending to forecast budgets and fine-tune salary structures, allowances, and periodic adjustments.'],
    ['Filter payroll data with reporting tags','Apply custom filters for time periods, departments, locations, roles, and pay run status to view the exact data you need.'],
    ['Securely share payroll reports','Distribute payroll reports digitally in PDF, XLS, or XLSX formats with password protection.'],
    ['Visualize payroll data your way','Compare historical reports or import data from other sources to generate insights with advanced analytics integration.'],
    ['Accurate accounting with payroll journals','Track salary components, expenses, and compensation entries seamlessly.'],
    ['Track leave and attendance insights','Get complete visibility into employee time off with reports that track absences and leave balances.'],
  ]],
  ['id'=>'integration','eyebrow'=>'Integration','title'=>'Connect payroll with core business systems','summary'=>'Unify payroll with your key business functions by integrating Zoho Payroll with other Zoho apps, WhatsApp Business, and banking systems for seamless data flow across operations.','link'=>'Explore integration options','visual'=>'integration','cards'=>[
    ['Zoho Books','Sync payroll with accounting to auto-record expenses and journal entries.'],
    ['Zoho People','Connect payroll and Zoho People to bring real-time employee, attendance, and leave data together.'],
    ['Zoho Expense','Bring approved reimbursements into payroll for seamless processing.'],
    ['Zoho SalesIQ','Enable instant chat support to resolve payroll questions faster.'],
    ['Zoho Analytics','Visualize payroll data through dashboards and reports for deeper workforce insights.'],
    ['WhatsApp and bank integrations','Share payslips instantly and transfer salaries on time through supported banking systems.'],
  ]],
  ['id'=>'privacy-and-security','eyebrow'=>'Privacy and security','title'=>'Your payroll data, always safe and private','summary'=>'Experience robust privacy and security for all your payroll operations with first-grade features.','link'=>'Explore how your payroll data stays only yours','visual'=>'security','cards'=>[
    ['High-security data centre at your service','Store sensitive information safely and privately with independent infrastructure.'],
    ['Step up security with two-factor authentication','Use two-factor authentication to strengthen access control and maintain robust data security.'],
    ['Secure collaboration with role-based access','Assign precise roles and permissions to let team members access only what they need.'],
    ['Backup all your payroll data','Securely back up your payroll information to maintain continuity and easy recovery.'],
    ['Store important payroll documents','Centralize vital payroll documents in one place with password protection.'],
    ['Track payroll moves with activity logs','Monitor every payroll update with timestamps and user information to stay informed.'],
  ]],
  ['id'=>'customizations','eyebrow'=>'Customizations','title'=>'Tailor payroll to match your unique workflows','summary'=>'Customize every part of your payroll from payslip formats to notifications and manage payroll exactly the way your business works.','link'=>'Tailor payroll to fit your needs','visual'=>'custom','cards'=>[
    ['Create salaries that suit your team','Build salaries your way by configuring earnings and deductions for your compliance needs.'],
    ['Personalize payslips to your choice','Adjust formats, add your logo, edit headers and footers, and decide what details appear on each payslip.'],
    ['Build more detailed employee profiles','Add employee records that hold every essential detail custom-built to meet your organization requirements.'],
    ['Customize employee views to your needs','Create personalized employee lists using filters like department, job role, or payroll eligibility.'],
    ['Include personalized loan information','Track loan details such as approval status, reference numbers, and disbursement dates.'],
    ['Stay connected with custom notifications','Send real-time alerts about payroll updates, salary changes, and approvals.'],
  ]],
  ['id'=>'custom-integrations','eyebrow'=>'Custom integrations','title'=>'Seamlessly connect with systems you already use','summary'=>'Integrate Zoho Payroll with existing platforms like Workday, SAP, Oracle, UKG, and Microsoft to unify your workflows without disrupting current processes.','link'=>'Connect existing systems','visual'=>'flow','cards'=>[
    ['Streamline data flow across operations','Bring employee, attendance, leave, payroll, and other HR data into a single system automatically.'],
    ['Tailor integrations to your business needs','Customize connections to fit your workflows, allowing payroll to work effortlessly alongside existing ERP systems.'],
    ['Automate with custom functions','Compute allowances, deductions, and payroll components automatically using custom functions, APIs, and business logic.'],
    ['Trigger actions with webhooks','Send or receive real-time data between Zoho Payroll and external systems using webhooks.'],
  ]],
  ['id'=>'platform-capabilities','eyebrow'=>'Platform capabilities','title'=>'Build tailored payroll solutions with platform capabilities','summary'=>'Extend payroll beyond routine tasks with platform capabilities that automate complex workflows, trigger event-driven actions, and schedule recurring processes.','link'=>'Explore platform capabilities','visual'=>'platform','cards'=>[
    ['Automate with custom Functions','Compute allowances, deductions, and payroll components automatically using Custom Functions.'],
    ['Trigger actions with Webhooks','Send or receive real-time data between Zoho Payroll and external systems using Webhooks.'],
    ['Schedule tasks with Custom Schedulers','Run recurring jobs like calculations, reports, or data synchronizations automatically without manual effort.'],
    ['Update records with employee field updates','Modify key employee fields automatically through employee field updates to keep payroll data accurate.'],
    ['Notify instantly with email and in-app alerts','Send alerts to employees or admins for loans, approvals, or payroll adjustments.'],
  ]],
];

function visual($kind) {
  switch ($kind) {
    case 'employee': return '<div class="mock-panel"><div class="mock-sheet"><div class="sheet-head"><span></span><strong>Employee</strong><i></i></div><div class="sheet-list"><span></span><span></span><span></span><span></span></div></div><div class="mock-profile"><div class="profile-head"></div><div class="profile-step"></div><div class="profile-form"></div></div></div>';
    case 'admin': return '<div class="mock-panel"><div class="mock-card tall"><div class="card-head">Work Locations</div><div class="mini-table"></div></div><div class="mock-card"><div class="card-head">Roles</div><div class="mini-table dark"></div></div></div>';
    case 'processing': return '<div class="mock-panel"><div class="mock-card wide"><div class="card-head red">Regular Payroll</div><div class="bar-grid"></div></div><div class="mock-card side"><div class="card-head yellow">Sandeep</div><div class="side-lines"></div></div></div>';
    case 'compliance': return '<div class="mock-panel"><div class="mock-card tall"><div class="card-head orange">Settings</div><div class="stack-list"></div></div><div class="mock-card"><div class="card-head">Statutory Components</div><div class="mini-table amber"></div></div></div>';
    case 'salary': return '<div class="mock-panel"><div class="mock-card narrow"><div class="card-head yellow">New Earning</div><div class="form-stubs"></div></div><div class="mock-card"><div class="card-head coral">Other Configurations</div><div class="stack-list"></div></div></div>';
    case 'benefits': return '<div class="mock-panel"><div class="benefit-board"><div class="benefit-head">SALARY COMPONENTS</div><div class="benefit-tabs"></div><div class="benefit-table"></div></div></div>';
    case 'leave': return '<div class="mock-panel"><div class="mock-card dark"><div class="card-head dark">Leave &amp; Attendance</div><div class="stack-list"></div></div><div class="mock-card"><div class="card-head red">Leave Types</div><div class="mini-table"></div></div><div class="mock-card"><div class="card-head yellow">Attendance Preference</div><div class="phone-stub"></div></div></div>';
    case 'portal': return '<div class="mock-panel portal"><div class="portal-card"><div class="portal-head"></div><div class="portal-stub"></div></div><div class="phone-card"><div class="phone-stub large"></div></div></div>';
    case 'reports': return '<div class="mock-panel"><div class="mock-card tall"><div class="card-head orange">Reports</div><div class="stack-list"></div></div><div class="mock-card wide"><div class="report-head"></div><div class="report-lines"></div></div></div>';
    case 'integration': return '<div class="mock-panel integration"><div class="ecosystem"></div></div>';
    case 'security': return '<div class="mock-panel"><div class="mock-card small"><div class="card-head orange">Backup History</div><div class="mini-table"></div></div><div class="mock-card wide"><div class="card-head coral">Activity Logs</div><div class="log-lines"></div></div><div class="mock-card small"><div class="card-head red">Payslip Details</div><div class="security-gauge"></div></div></div>';
    case 'custom': return '<div class="mock-panel"><div class="mock-card small"><div class="card-head yellow">Header Section</div><div class="mini-table"></div></div><div class="mock-card wide"><div class="card-head coral">Email Templates</div><div class="email-sheet"></div></div><div class="mock-card small"><div class="card-head soft">Footer Section</div><div class="mini-table"></div></div></div>';
    case 'flow': return '<div class="mock-panel flow"><div class="flow-node source">Your ERP System</div><div class="flow-stack"><span>Employee Records</span><span>Custom Workflows</span><span>Appraisal Data</span><span>Timely Payroll Data</span><span>Custom Reports</span><span>Journal Entries</span></div><div class="flow-node target"></div></div>';
    case 'platform': return '<div class="mock-panel"><div class="mock-card wide"><div class="card-head coral">New Custom Function</div><div class="code-sheet"></div></div><div class="mock-card tall"><div class="card-head">New Webhook</div><div class="webhook-sheet"></div></div></div>';
    default: return '<div class="mock-panel simple"><div class="simple-shape"></div></div>';
  }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="<?php echo billing_escape(billing_base_href()); ?>">
  <title>Zoho Payroll Features</title>
  <link rel="stylesheet" href="assets/font-inter.css">
  <link rel="stylesheet" href="assets/font-manrope.css">
  <link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
  <link rel="stylesheet" href="features.css">
</head>
<body>
<header class="topbar">
  <div class="topbar-inner">
    <a class="zoho-mark" href="#" aria-label="Zoho"><span class="zoho-box red"></span><span class="zoho-box green"></span><span class="zoho-box blue"></span><span class="zoho-box yellow"></span><span class="zoho-word">ZOHO</span></a>
    <nav class="top-nav"><a href="#">People</a><a href="#">Recruit</a><a href="#">Practice</a><a href="#">Books</a><a href="#">Mail</a><a href="#">Expense</a><a href="#">All Products <span class="inline-caret">⌄</span></a></nav>
    <div class="top-actions"><a class="icon-link" href="#" aria-label="Search"><span class="inline-icon">⌕</span></a><a class="signin-link" href="signin.php">Sign In</a><a class="signup-link" href="signup.php">Sign up now</a></div>
  </div>
</header>
<section class="product-bar"><div class="product-bar-inner"><img src="images/zoho-payroll-logo.svg" alt="Zoho Payroll" class="product-logo"><nav class="product-nav"><a class="active" href="#overview">Features</a><a href="price.php">Pricing</a><a href="#integration">Integrations</a><a href="#customers">Customers</a><a href="#resources">Resources <span class="inline-caret">⌄</span></a><a href="#support">Support</a></nav></div></section>
<main class="layout">
  <aside class="sidebar">
    <div class="sidebar-title">All Features</div>
    <nav class="sidebar-nav">
      <?php foreach ($sidebar as $item): ?>
        <a href="#<?php echo h($item['id']); ?>" data-spy="<?php echo h($item['id']); ?>" class="<?php echo $item['id'] === 'overview' ? 'active' : ''; ?>"><i class="fa-solid <?php echo h($item['icon']); ?>"></i><span><?php echo h($item['label']); ?></span></a>
      <?php endforeach; ?>
    </nav>
  </aside>
  <div class="content">
    <section class="hero-panel" id="overview">
      <div class="hero-copy"><p class="eyebrow">PAYROLL SOFTWARE</p><h1>Payroll software with everything you need</h1><a class="cta-button" href="signup.php">Start My Free Trial</a></div>
      <div class="hero-art" aria-hidden="true"><span class="hero-shape cal"></span><span class="hero-shape doc"></span><span class="hero-shape search"></span><span class="hero-shape chip"></span><span class="hero-shape hand"></span><span class="hero-shape badge"></span></div>
    </section>
    <?php foreach ($sections as $index => $section): ?>
      <section class="feature-section<?php echo $index % 2 === 1 ? ' feature-section--reverse' : ''; ?>" id="<?php echo h($section['id']); ?>" data-section="<?php echo h($section['id']); ?>">
        <div class="section-head"><p class="eyebrow"><?php echo h($section['eyebrow']); ?></p><div class="section-grid"><div class="section-title"><h2><?php echo h($section['title']); ?></h2></div><div class="section-copy"><p><?php echo h($section['summary']); ?></p><a href="#"><?php echo h($section['link']); ?> <span class="arrow">→</span></a></div></div></div>
        <?php echo visual($section['visual']); ?>
        <?php if (!empty($section['bullets'])): ?>
          <div class="bullet-layout">
            <div class="bullet-list">
              <?php foreach ($section['bullets'] as $bullet): ?>
                <div class="bullet-item"><span class="bullet-dot">✓</span><p><?php echo h($bullet); ?></p></div>
              <?php endforeach; ?>
            </div>
          </div>
        <?php else: ?>
          <div class="card-grid">
            <?php foreach ($section['cards'] as $card): ?>
              <article class="feature-card"><h3><?php echo h($card[0]); ?></h3><p><?php echo h($card[1]); ?></p></article>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      </section>
    <?php endforeach; ?>
    <footer class="site-footer" id="resources">
      <section class="footer-hero" id="support"><p class="eyebrow light">EVERY PAYROLL FEATURE YOU NEED</p><h2>One software for payroll, compliance, reports, and collaboration</h2><a class="cta-button" href="signup.php">Start My Free Trial</a></section>
      <div class="footer-grid">
        <div><h3>Help &amp; Resources</h3><a href="price.php">Pricing</a><a href="feature.php">Features</a><a href="#integration">Integrations</a><a href="#customers">Customers</a><a href="#overview">Employee Onboarding</a><a href="#processing">Payroll Management</a><a href="#processing">Payroll Processing</a><a href="#employee-self-service-portal">Employee Self-service Portal</a><a href="#statutory-compliance">Statutory compliance and Reporting</a></div>
        <div><h3>Resources</h3><a href="#">Help</a><a href="#">Frequently Asked Questions</a><a href="#">Webinars</a><a href="#">Academy</a><a href="#">What's New</a></div>
        <div><h3>Quick Links</h3><a href="#">What is Payroll?</a><a href="#">Payroll Software</a><a href="#">Payroll Software vs Spreadsheets</a><a href="#">Free Payroll Software</a><a href="#">Payroll Training Program</a><a href="#">Payroll Service Provider</a><a href="#">Employee Mobile Apps</a></div>
        <div><h3>Contact Us</h3><a href="#">Monday to Friday (9:00 AM to 7:00 PM)</a><a href="#">Toll-Free 1800 572 6672</a><a href="#">support@zohopayroll.com</a><a href="#">partner-support@zohopayroll.com</a></div>
      </div>
      <div class="footer-tools"><div><h3>Free Tools</h3><a href="#">Income Tax Calculator</a><a href="#">NPS Calculator</a><a href="#">EPS Pension Calculator</a><a href="#">Statutory Bonus Calculator</a><a href="#">HRA Exemption Calculator</a><a href="#">Gratuity Calculator</a><a href="#">Payslip Generator</a></div><div><h3>Find us on our socials</h3><div class="social-row"><span>X</span><span>IG</span><span>YT</span><span>in</span></div></div></div>
    </footer>
  </div>
</main>
<a class="floating-demo" href="signin.php">Request a demo</a><div class="floating-chat"><i class="fa-solid fa-comment-dots"></i></div>
<script>
(() => {
  const links = [...document.querySelectorAll('[data-spy]')];
  const sections = [...document.querySelectorAll('[data-section]')];
  const setActive = (id) => {
    if (!id) return;
    links.forEach((link) => link.classList.toggle('active', link.dataset.spy === id));
  };
  const updateActiveFromScroll = () => {
    const probeY = window.scrollY + 180;
    let current = sections[0]?.dataset.section || 'overview';

    for (const section of sections) {
      const top = section.offsetTop;
      const bottom = top + section.offsetHeight;
      if (probeY >= top && probeY < bottom) {
        current = section.dataset.section;
        break;
      }
      if (probeY >= bottom) {
        current = section.dataset.section;
      }
    }

    setActive(current);
  };
  const initialHash = window.location.hash.replace('#', '');
  setActive(initialHash && links.some((link) => link.dataset.spy === initialHash) ? initialHash : 'overview');
  let ticking = false;
  const onScroll = () => {
    if (ticking) return;
    ticking = true;
    window.requestAnimationFrame(() => {
      updateActiveFromScroll();
      ticking = false;
    });
  };
  window.addEventListener('scroll', onScroll, { passive: true });
  window.addEventListener('resize', onScroll);
  updateActiveFromScroll();
})();
</script>
</body>
</html>

