/* Global variables */
:root{
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --primary: #0b63a7;
  --card: #f8fafc;
  --accent: #06b6d4;
  --alabaster-grey: #f4f6f8;
  --prussian-blue: #12345a;
}

/* Dark mode overrides */
.dark-mode{
  --bg: #0b1220;
  --text: #e6eef8;
  --muted: #94a3b8;
  --primary: #1e90ff;
  --card: #071022;
  --accent: #22d3ee;
}

/* Base */
html,body{
  background:var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height:1.45;
  margin:0;
  padding:0;
}
.container{
  max-width:1100px;
  margin:0 auto;
  padding:18px 20px;
}

/* Header */
header{position:relative;transition:box-shadow 240ms ease,backdrop-filter 240ms ease;background:transparent}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:12px 0}
.header-brand{font-size:1.5rem;font-weight:700;color:var(--primary)}
.main-nav{display:flex;align-items:center;gap:12px}
.main-nav a{margin-left:10px;color:var(--text);text-decoration:none}

/* Buttons */
.btn{display:inline-block;padding:8px 12px;border-radius:6px;background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--text);text-decoration:none}
.btn-primary{background:var(--primary);color:#fff;padding:10px 14px;border-radius:6px;text-decoration:none;border:none}
.btn-lg{padding:12px 18px;border-radius:8px}
.btn-toggle{background:transparent;border:1px solid rgba(0,0,0,0.08);padding:8px 10px;border-radius:6px;cursor:pointer;color:var(--text)}
.btn-toggle:focus{outline:2px solid var(--accent);outline-offset:2px}

/* Product card */
.product-card{background:var(--card);box-shadow:0 6px 18px rgba(16,24,40,0.08);padding:28px;border-radius:8px}
.screenshot-wrap{background-color:var(--alabaster-grey);margin:16px 0 24px;border-radius:4px;overflow:hidden}
.product-card img{width:100%;height:auto;object-fit:cover;border-radius:4px;transition:transform 560ms cubic-bezier(.2,.8,.2,1)}
.product-card:hover img{transform:translateY(-6px) scale(1.01)}

/* Features */
.features-list{display:flex;gap:20px;flex-wrap:wrap;margin:20px 0}
.feature{flex:1 1 220px;background:transparent;padding:12px;border-radius:6px;transition:transform 220ms ease,box-shadow 220ms ease}
.feature:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(2,6,23,0.06)}

.testimonial{font-style:italic;color:var(--muted);margin-top:16px}

/* Scroll reveal */
.scroll-reveal{opacity:0;transform:translateY(18px);transition:opacity 640ms cubic-bezier(.2,.8,.2,1),transform 640ms cubic-bezier(.2,.8,.2,1);will-change:opacity,transform}
.scroll-reveal.visible{opacity:1;transform:none}
.reveal-stagger-1{transition-delay:120ms}
.reveal-stagger-2{transition-delay:240ms}
.reveal-stagger-3{transition-delay:360ms}
.reveal-stagger-4{transition-delay:480ms}
.reveal-left{transform:translateX(-20px)}
.reveal-right{transform:translateX(20px)}
.reveal-left.visible,.reveal-right.visible{transform:none}

/* Hero */
#hero{padding:56px 0}
#hero h1{font-size:2.2rem;letter-spacing:0.2px}
#hero .hero-inner{display:flex;flex-direction:column;gap:18px;align-items:flex-start}

/* Hero entrance and CTA */
@keyframes pulse-soft{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}
.btn-lg.pulse{animation:pulse-soft 3.2s ease-in-out infinite}

/* Header nav scrolled */
header.nav-scrolled{box-shadow:0 8px 30px rgba(2,6,23,0.12);backdrop-filter:blur(6px)}

/* Section indicator */
#section-indicator{position:fixed;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:60}
#section-indicator button{width:12px;height:12px;border-radius:999px;border:1px solid rgba(0,0,0,0.08);background:transparent;cursor:pointer;padding:0}
#section-indicator button.active{background:var(--primary);box-shadow:0 6px 16px rgba(11,99,167,0.18);transform:scale(1.05)}
#section-indicator button:focus{outline:2px solid var(--accent);outline-offset:4px}

/* Smooth scrolling */
html{scroll-behavior:smooth}

/* Utility */
.section{padding:40px 0}
.section-gray{background:var(--alabaster-grey)}
.text-center{text-align:center}

/* Small responsive tweaks */
@media (max-width:800px){
  .features-list{flex-direction:column}
  #section-indicator{display:none}
}

/* Decorative floating shapes */
.decor{position:absolute;border-radius:999px;pointer-events:none;filter:blur(20px);opacity:.14;mix-blend-mode:screen}
.decor-1{width:220px;height:220px;background:linear-gradient(135deg,var(--accent),var(--primary));left:8%;top:6%;transform:translateZ(0);animation:float 8s ease-in-out infinite}
.decor-2{width:180px;height:180px;background:linear-gradient(135deg,var(--primary),#44d7e8);right:6%;bottom:8%;animation:float 10s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-12px)}100%{transform:translateY(0)}}

/* Stats counters */
.stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px}
.stat{flex:1 1 160px;padding:14px;border-radius:8px;background:transparent}
.stat .number{font-size:1.6rem;font-weight:700;color:var(--primary)}
.stat .label{color:var(--muted);font-size:0.95rem}

/* Parallax helper */
[data-parallax]{will-change:transform}

/* Dark-mode: increase contrast for services / expertise section */
.dark-mode #expertise,
.dark-mode .section-gray{
  background: rgba(255,255,255,0.02);
}
.dark-mode .expertise-item{
  background: rgba(255,255,255,0.03);
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
  padding:18px;
  border-radius:10px;
}
.dark-mode .expertise-item h3{ color: var(--text); }
.dark-mode .expertise-item p,
.dark-mode .expertise-item i{ color: var(--muted); opacity:0.98 }