/* ============================================
   InntooPay - Modern Minimal Design System
   ============================================ */

/* --- Reset & Base --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;overflow-x:hidden;color:#1a1a2e;line-height:1.7;font-weight:400;margin:0}

/* --- Variables --- */
:root{
  --primary:#2D25C8;
  --primary-light:#5B54E0;
  --primary-dark:#1E18A0;
  --accent:#0CBEFC;
  --dark:#0f0f1a;
  --gray-50:#f8f9fc;
  --gray-100:#f1f3f8;
  --gray-200:#e4e7ef;
  --gray-400:#9ea5bd;
  --gray-600:#5a6178;
  --gray-800:#2d3248;
  --white:#ffffff;
  --radius:12px;
  --radius-lg:20px;
  --shadow-sm:0 2px 8px rgba(0,0,0,0.04);
  --shadow-md:0 8px 30px rgba(0,0,0,0.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.12);
  --transition:all 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* --- Typography --- */
h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;margin:0}
a,a:hover,a:focus{text-decoration:none;outline:none}
img{max-width:100%}

/* --- Layout --- */
.section-screen{min-height:100vh;position:relative;display:flex;align-items:center}
.min-vh-100{min-height:100vh}

/* --- Navigation --- */
.custom_nav{
  padding:20px 0;
  transition:var(--transition);
  z-index:1000;
}
.custom_nav .nav-logo{height:32px;transition:var(--transition)}
.custom_nav .navbar-nav .nav-link{
  color:rgba(255,255,255,0.75);
  font-size:14px;
  font-weight:500;
  padding:8px 16px;
  transition:var(--transition);
  letter-spacing:0.3px;
}
.custom_nav .navbar-nav .nav-link:hover,
.custom_nav .navbar-nav .nav-item.active .nav-link{
  color:var(--white);
}
.custom_nav .btn-login{
  display:inline-block;
  padding:8px 28px;
  border:1.5px solid rgba(255,255,255,0.4);
  border-radius:100px;
  color:var(--white);
  font-size:13px;
  font-weight:500;
  transition:var(--transition);
  letter-spacing:0.3px;
}
.custom_nav .btn-login:hover{
  background:var(--white);
  color:var(--primary);
  border-color:var(--white);
}

/* Sticky Nav */
.custom_nav.scrolled{
  padding:12px 0;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  box-shadow:0 1px 20px rgba(0,0,0,0.06);
}
.custom_nav.scrolled .nav-logo{filter:none}
.custom_nav.scrolled .navbar-nav .nav-link{color:var(--gray-600)}
.custom_nav.scrolled .navbar-nav .nav-link:hover,
.custom_nav.scrolled .navbar-nav .nav-item.active .nav-link{color:var(--primary)}
.custom_nav.scrolled .btn-login{
  border-color:var(--primary);
  color:var(--primary);
}
.custom_nav.scrolled .btn-login:hover{
  background:var(--primary);
  color:var(--white);
}
.custom_nav.scrolled .toggler-bar{background:var(--dark)}

/* Hamburger */
.navbar-toggler{border:none;padding:8px 4px;outline:none!important;box-shadow:none!important}
.toggler-bar{
  display:block;width:24px;height:2px;background:var(--white);margin:5px 0;
  transition:var(--transition);border-radius:2px;
}
.custom_nav.scrolled .toggler-bar{background:var(--dark)}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(2){opacity:0}
.navbar-toggler[aria-expanded="true"] .toggler-bar:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ============================================
   Section 1: Hero
   ============================================ */
.hero-section{
  background:linear-gradient(135deg,#0f0f1a 0%,#1a1a3e 40%,#2D25C8 100%);
  overflow:hidden;
}
#particles-js{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  z-index:2;
  pointer-events:auto;
}
.hero-overlay{
  position:absolute;
  top:0;left:0;width:100%;height:100%;
  background:radial-gradient(ellipse at 30% 50%,rgba(45,37,200,0.3) 0%,transparent 70%);
  z-index:1;
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:3;
  width:100%;
  pointer-events:none;
}
.hero-content a,
.hero-content button,
.hero-content input,
.hero-content select,
.hero-content textarea{
  pointer-events:auto;
}
.hero-title{
  font-size:clamp(40px,6vw,72px);
  font-weight:700;
  color:var(--white);
  letter-spacing:-1px;
  margin-bottom:16px;
}
.hero-typed-wrap{
  font-size:clamp(18px,2.5vw,28px);
  color:var(--accent);
  font-weight:300;
  margin-bottom:24px;
  min-height:40px;
}
.typed-cursor{
  animation:blink 1s infinite;
  color:var(--accent);
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hero-desc{
  font-size:16px;
  color:rgba(255,255,255,0.65);
  max-width:520px;
  line-height:1.8;
  margin-bottom:40px;
}
.hero-domain{
  color:var(--accent);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:13px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap}
.btn-hero-primary{
  display:inline-flex;align-items:center;
  padding:14px 36px;
  background:var(--white);
  color:var(--primary);
  border-radius:100px;
  font-weight:600;font-size:14px;
  letter-spacing:0.5px;
  transition:var(--transition);
}
.btn-hero-primary:hover{
  background:var(--accent);
  color:var(--dark);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(12,190,252,0.3);
  color:var(--white);
}
.btn-hero-ghost{
  display:inline-flex;align-items:center;
  padding:14px 36px;
  border:1.5px solid rgba(255,255,255,0.3);
  color:var(--white);
  border-radius:100px;
  font-weight:500;font-size:14px;
  letter-spacing:0.5px;
  transition:var(--transition);
}
.btn-hero-ghost:hover{
  border-color:var(--white);
  background:rgba(255,255,255,0.1);
  transform:translateY(-2px);
}

/* Scroll hint */
.scroll-hint{
  position:absolute;
  bottom:40px;left:50%;
  transform:translateX(-50%);
  z-index:3;
  animation:float 3s ease-in-out infinite;
}
.scroll-mouse{
  width:26px;height:40px;
  border:2px solid rgba(255,255,255,0.4);
  border-radius:13px;
  display:flex;justify-content:center;
  padding-top:8px;
}
.scroll-wheel{
  width:3px;height:8px;
  background:rgba(255,255,255,0.6);
  border-radius:2px;
  animation:scrollWheel 2s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}
@keyframes scrollWheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(10px)}}

/* ============================================
   Section 2: About
   ============================================ */
.about-section{background:var(--white)}

.section-label{
  font-size:12px;
  font-weight:600;
  color:var(--primary);
  text-transform:uppercase;
  letter-spacing:2px;
  margin-bottom:12px;
}
.section-label-light{color:var(--accent)}
.section-heading{
  font-size:clamp(28px,4vw,44px);
  color:var(--dark);
  font-weight:700;
  letter-spacing:-0.5px;
  margin-bottom:16px;
}
.section-heading-light{color:var(--white)}
.section-divider{
  width:48px;height:4px;
  background:var(--primary);
  border-radius:2px;
  margin-bottom:24px;
}
.section-divider-light{background:var(--accent)}
.section-text{
  color:var(--gray-600);
  font-size:16px;
  max-width:480px;
  line-height:1.8;
  margin-bottom:0;
}

/* About feature items */
.about-features{margin:32px 0 40px}
.about-feature-item{
  display:flex;
  gap:16px;
  margin-bottom:20px;
  align-items:flex-start;
}
.feature-dot{
  width:8px;height:8px;
  background:var(--primary);
  border-radius:50%;
  margin-top:10px;
  flex-shrink:0;
}
.about-feature-item p{
  color:var(--gray-600);
  font-size:15px;
  line-height:1.7;
  margin:0;
}

/* Float cards */
.about-visual{position:relative;min-height:400px}
.about-card-stack{position:relative;width:100%;height:400px}
.about-float-card{
  position:absolute;
  background:var(--white);
  border-radius:var(--radius);
  padding:24px 28px;
  display:flex;align-items:center;gap:16px;
  box-shadow:var(--shadow-md);
  transition:var(--transition);
}
.about-float-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg);
}
.about-float-card .float-icon{
  width:52px;height:52px;
  border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.card-1{top:20px;left:10%;width:260px;animation:cardFloat1 6s ease-in-out infinite}
.card-1 .float-icon{background:rgba(45,37,200,0.08);color:var(--primary)}
.card-2{top:140px;right:5%;width:240px;animation:cardFloat2 7s ease-in-out infinite}
.card-2 .float-icon{background:rgba(12,190,252,0.08);color:var(--accent)}
.card-3{bottom:20px;left:20%;width:220px;animation:cardFloat3 8s ease-in-out infinite}
.card-3 .float-icon{background:rgba(206,85,152,0.08);color:#CE5598}
.float-text{font-weight:600;font-size:15px;color:var(--dark)}

@keyframes cardFloat1{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes cardFloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes cardFloat3{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

.btn-solid{
  display:inline-flex;align-items:center;
  padding:14px 36px;
  background:var(--primary);
  color:var(--white);
  border-radius:100px;
  font-weight:600;font-size:14px;
  letter-spacing:0.5px;
  transition:var(--transition);
  border:none;
}
.btn-solid:hover{
  background:var(--primary-light);
  color:var(--white);
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(45,37,200,0.3);
}
.btn-solid-light{
  background:var(--white);
  color:var(--primary);
}
.btn-solid-light:hover{
  background:var(--accent);
  color:var(--white);
  box-shadow:0 10px 30px rgba(12,190,252,0.3);
}

/* ============================================
   Section 3: CTA
   ============================================ */
.cta-section{
  background:linear-gradient(135deg,#2D25C8 0%,#1a1a3e 100%);
  position:relative;
  overflow:hidden;
}
.cta-section::before{
  content:'';
  position:absolute;
  top:-50%;right:-20%;
  width:600px;height:600px;
  border-radius:50%;
  background:rgba(12,190,252,0.08);
}
.cta-section::after{
  content:'';
  position:absolute;
  bottom:-30%;left:-10%;
  width:400px;height:400px;
  border-radius:50%;
  background:rgba(255,255,255,0.03);
}
.cta-heading{
  font-size:clamp(28px,4vw,48px);
  color:var(--white);
  font-weight:700;
  margin-bottom:16px;
  letter-spacing:-0.5px;
}
.cta-sub{
  font-size:18px;
  color:rgba(255,255,255,0.6);
  margin-bottom:40px;
}

/* ============================================
   Section 4: Services
   ============================================ */
.services-section{background:var(--gray-50)}
.service-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:32px 28px;
  margin-bottom:24px;
  transition:var(--transition);
  border:1px solid var(--gray-200);
  height:100%;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:transparent;
}
.service-icon{
  width:56px;height:56px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.service-icon svg{width:28px;height:28px}
.icon-blue{background:rgba(45,37,200,0.08);color:var(--primary)}
.icon-cyan{background:rgba(12,190,252,0.08);color:var(--accent)}
.icon-amber{background:rgba(230,144,33,0.08);color:#E69021}
.icon-rose{background:rgba(206,85,152,0.08);color:#CE5598}
.service-card h5{font-size:17px;font-weight:600;color:var(--dark);margin-bottom:10px}
.service-card p{font-size:14px;color:var(--gray-600);line-height:1.7;margin:0}

/* ============================================
   Section 5: Statistics
   ============================================ */
.stats-section{
  background:linear-gradient(135deg,#0f0f1a 0%,#1a1a3e 50%,#2D25C8 100%);
  overflow:hidden;
  position:relative;
}
.stats-section::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse at 70% 30%,rgba(12,190,252,0.1) 0%,transparent 60%);
}
.stat-card{
  text-align:center;
  padding:40px 20px;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.08);
  margin-bottom:24px;
  transition:var(--transition);
}
.stat-card:hover{
  background:rgba(255,255,255,0.1);
  transform:translateY(-4px);
}
.stat-number{
  font-size:clamp(24px,3.5vw,40px);
  font-weight:700;
  color:var(--white);
  margin-bottom:8px;
  letter-spacing:-0.5px;
}
.stat-label{
  font-size:13px;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:500;
}

/* ============================================
   Section 6: Outlook
   ============================================ */
.outlook-section{background:var(--white)}
.testimonial-carousel{max-width:700px;margin:0 auto}
.testimonial-card{
  text-align:center;
  padding:20px 40px;
}
.testimonial-quote{
  font-size:72px;
  color:var(--primary);
  font-family:Georgia,serif;
  line-height:1;
  opacity:0.2;
  margin-bottom:-20px;
}
.testimonial-text{
  font-size:18px;
  color:var(--gray-800);
  line-height:1.8;
  font-style:italic;
  margin-bottom:24px;
}
.testimonial-author{
  font-size:14px;
  font-weight:600;
  color:var(--primary);
}
.carousel-indicators{
  position:relative;
  margin-top:24px;
  justify-content:center;
}
.carousel-indicators li{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--gray-200);
  border:none;
  margin:0 6px;
  transition:var(--transition);
}
.carousel-indicators li.active{
  background:var(--primary);
  width:24px;
  border-radius:4px;
}

/* ============================================
   Footer
   ============================================ */
.site-footer{
  background:var(--dark);
  padding:60px 0 30px;
}
.footer-title{
  color:var(--white);
  font-size:14px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:20px;
}
.footer-text{
  color:rgba(255,255,255,0.5);
  font-size:14px;
  line-height:2;
  margin-bottom:0;
}
.footer-text a,.footer-links a{
  color:rgba(255,255,255,0.7);
  transition:var(--transition);
}
.footer-text a:hover,.footer-links a:hover{
  color:var(--accent);
}
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li{margin-bottom:8px}
.footer-links a{font-size:14px}
.footer-divider{
  height:1px;
  background:rgba(255,255,255,0.08);
  margin:32px 0 20px;
}
.footer-copy{
  font-size:13px;
  color:rgba(255,255,255,0.4);
}
.footer-copy a{color:rgba(255,255,255,0.6)}
.footer-copy a:hover{color:var(--accent)}

/* ============================================
   Responsive
   ============================================ */
@media(max-width:992px){
  .about-visual{display:none}
  .section-screen{padding:80px 0}
  .min-vh-100{min-height:auto}
  .custom_nav{
    padding:10px 0;
    background:rgba(255,255,255,0.98);
    box-shadow:0 1px 10px rgba(0,0,0,0.06);
  }
  .custom_nav .navbar-nav .nav-link{color:var(--gray-600);padding:6px 0}
  .custom_nav .navbar-nav .nav-item.active .nav-link,
  .custom_nav .navbar-nav .nav-link:hover{color:var(--primary)}
  .custom_nav .btn-login{border-color:var(--primary);color:var(--primary)}
  .custom_nav .toggler-bar{background:var(--dark)}
  .hero-title{font-size:36px}
  .hero-desc{font-size:14px}
  .stat-card{padding:24px 16px}
  .testimonial-card{padding:20px}
}

@media(max-width:576px){
  .hero-actions{flex-direction:column}
  .btn-hero-primary,.btn-hero-ghost{width:100%;justify-content:center}
  .cta-heading{font-size:24px}
}