/* =========================
   SailBot refined theme
   ========================= */

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

:root {
  --bg-1:#0b0b12;
  --bg-2:#151326;
  --accent1:#7c6ff2;
  --accent2:#66e0e0;
  --muted:#9aa0b2;
  --card:#0f1020;
  --glass: rgba(255,255,255,0.03);
  --radius-lg:18px;
  --shadow-lg: 0 18px 40px rgba(4,6,18,0.6);
}

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

body {
  font-family: "Inter", sans-serif;
  background: linear-gradient(160deg,var(--bg-1), var(--bg-2));
  color:#e6e9ef;
  line-height:1.6;
  font-size:16px;
}

/* Navbar */
.navbar {
  display:flex; align-items:center;
  padding: 18px 28px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.navbar .logo { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--accent1); text-decoration:none; }
.navbar .logo img { height:34px; width:34px; }
.nav-links { list-style:none; margin-left:auto; display:flex; gap:20px; }
.nav-links a { color:#e9edf7; text-decoration:none; font-weight:600; }
.nav-links a:hover { color:var(--accent1); }

/* Dropdown */
.dropdown { position:relative; }
.dropdown-content {
  position:absolute; top:120%; left:0;
  background:#0f1020; border-radius:12px;
  padding:10px; min-width:200px;
  box-shadow:0 12px 24px rgba(0,0,0,0.4);
  opacity:0; visibility:hidden;
  transition:all 0.2s ease;
}
.dropdown.open .dropdown-content { opacity:1; visibility:visible; }
.dropdown-content a {
  display:flex; align-items:center; gap:8px;
  padding:8px; color:#fff; border-radius:8px;
}
.dropdown-content a:hover { background:rgba(255,255,255,0.05); }

/* Hero */
.hero {
  display:flex; align-items:center; justify-content:space-between;
  padding:60px 28px;
}
.hero-content { max-width:50%; }
.hero-title { font-size:48px; font-weight:800; }
.gradient-text {
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-description { color:var(--muted); margin:20px 0; }
.hero-buttons { display:flex; gap:16px; }

/* Buttons */
.btn {
  padding:12px 20px; border-radius:12px;
  text-decoration:none; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
}
.btn-primary { background: linear-gradient(90deg,var(--accent1),var(--accent2)); color:#fff; }
.btn-secondary { background:rgba(255,255,255,0.1); color:#fff; }

/* Floating button */
.floating-demo-btn {
  position:fixed; bottom:20px; left:20px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#fff; padding:12px 20px; border-radius:10px;
  font-weight:700; text-decoration:none;
  z-index:999;
}

/* Footer */
footer { text-align:center; padding:30px; color:var(--muted); font-size:14px; }
/* ===== Services page styles (append only) ===== */

/* Hero */
.services-hero { padding: 80px 0 60px; background: linear-gradient(180deg,#0f0d12 0%, rgba(16,13,25,0.95) 100%); }
.hero-grid { display: grid; grid-template-columns: 1fr 520px; gap: 40px; align-items: center; }
.hero-left .badge { display:inline-block; background: rgba(107,99,255,0.08); color:#a6a0ff; padding:8px 14px; border-radius:20px; font-weight:600; margin-bottom:18px; }
.hero-title { font-size:44px; line-height:1.02; margin:8px 0 18px; color:var(--gradient-text, #9a7cff); }
.hero-lead { color:#bdb8d1; max-width:680px; margin-bottom:24px; }
.hero-cta .btn { margin-right:12px; }

/* hero image card */
.hero-right .hero-card { display:flex; justify-content:center; align-items:center; }
.hero-image { width:100%; border-radius:16px; box-shadow: 0 18px 40px rgba(7,6,12,0.6); max-width:520px; object-fit:cover; }
.hero-fallback { width:100%; height:auto; display:none; }

/* Services grid */
.services-grid { padding:40px 0 10px; }
.services-grid .grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:22px; }
.service-card { background: rgba(255,255,255,0.02); border-radius:12px; padding:22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); transition:transform .28s ease, box-shadow .28s ease; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 22px 40px rgba(8,6,14,0.6); }
.service-card .icon { width:56px; height:56px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; font-size:20px; color:white; background: linear-gradient(135deg,#6b63ff,#5ce1e6); }
.service-card h3{ margin:6px 0 6px; color:#e6e1ff; }
.service-card p{ color:#bcb6d0; margin:0; }

/* Delivery area */
.delivery { padding:36px 0 18px; }
.delivery-grid { display:grid; grid-template-columns: 1fr 1fr; gap:30px; align-items:start; }
.delivery-left h3, .delivery-right h3{ color:#c3bff2; margin-bottom:10px; }
.delivery-left ol, .delivery-right ul { color:#cfcbd8; line-height:1.8; }

/* Testimonials */
.testimonials { display:flex; gap:18px; margin-top:28px; }
.testimonials blockquote { background: rgba(255,255,255,0.02); padding:18px; border-radius:10px; color:#e6e1ff; flex:1; }

/* CTA bar */
.cta-bar { background: linear-gradient(180deg, rgba(13,10,19,0.85), rgba(9,7,15,0.95)); padding:26px 0; margin-top:28px; border-radius:10px 10px 0 0; }
.cta-inner { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.cta-inner h3 { color:#fff; margin:0; }
.cta-inner p { color:#cfcbd8; margin:0; }

/* small screens */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; text-align:center; }
  .hero-right { order: -1; }
  .services-grid .grid { grid-template-columns: 1fr; }
  .delivery-grid { grid-template-columns:1fr; }
  .cta-inner { flex-direction:column; align-items:flex-start; }
}

/* Reveal animation */
.reveal { opacity:0; transform: translateY(20px); transition: all .6s ease; will-change: opacity, transform; }
.reveal.visible { opacity:1; transform: translateY(0); }

/* small utility to make nav icons visible and neat */
.nav-icon { margin-right:8px; color: #b9b2ff; }

/* lighten active nav link */
.nav-links a.active, .nav-links a:hover { background: rgba(107,99,255,0.12); border-radius: 12px; padding:8px 12px; color:#fff; }
/* -----------------------
   Services page styles
   Add at the end of style.css
   ----------------------- */

.services-page .section { padding: 80px 0; }
.services-hero { padding-top: 40px; padding-bottom: 80px; }
.hero-grid { display: grid; grid-template-columns: 1fr 520px; gap: 40px; align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-right { order: 2; } }

.hero-left h1 { font-size: 3.2rem; line-height: 1.02; margin: 0 0 18px; letter-spacing: -0.02em; }
.hero-left .accent { background: linear-gradient(90deg,#7b5cff,#47d6ff); -webkit-background-clip:text; color:transparent; }

.lead { color: rgba(255,255,255,0.75); max-width: 60ch; margin-bottom: 26px; font-size:1.05rem; }

.hero-actions .btn { margin-right: 14px; }
.illustration-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 18px; padding: 28px; display:flex; justify-content:center; align-items:center; box-shadow: 0 8px 30px rgba(3,6,20,0.55); }
.illustration-card img { max-width: 100%; height: auto; border-radius: 12px; }

.section-title { font-size: 2.2rem; margin-bottom: 24px; color: #bdbdfa; }

.card-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
@media (max-width:880px) { .card-grid { grid-template-columns: 1fr; } }

.feature-card { background: rgba(255,255,255,0.02); padding: 26px; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.01); display:flex; gap:18px; align-items:flex-start; min-height:120px; }
.feature-icon { width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#7b5cff,#47d6ff); color:white; font-size:20px; flex-shrink:0; }
.feature-card h3 { margin:0 0 8px; font-size:1.1rem; }
.feature-card p { margin:0; color: rgba(255,255,255,0.74); }

.two-col-grid { display:grid; grid-template-columns: 1fr 1fr; gap:30px; align-items:start; }
@media (max-width:880px) { .two-col-grid { grid-template-columns: 1fr; } }

.delivery-list, .commitments-list { margin:0; padding-left: 18px; color: rgba(255,255,255,0.9); }
.commitments-list li { margin-bottom: 8px; }

.testimonials-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:18px; }
@media (max-width:1100px) { .testimonials-grid { grid-template-columns: 1fr; } }
.quote { background: rgba(255,255,255,0.02); padding:18px; border-radius:10px; color: rgba(255,255,255,0.9); font-style:italic; }
.quote cite { display:block; margin-top:10px; font-style:normal; opacity:0.9; color:#d6d6ff; font-weight:600; }

.cta-bar { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.06)); padding:34px 0; margin-top:36px; border-radius:6px 6px 0 0; }
.cta-flex { display:flex; justify-content:space-between; align-items:center; gap:20px; }
@media (max-width:880px) { .cta-flex { flex-direction:column; align-items:flex-start; }}

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; }
.btn-primary { background: linear-gradient(90deg,#7b5cff,#47d6ff); color:white; box-shadow: 0 8px 28px rgba(75,35,200,0.15); }
.btn-ghost { background: rgba(255,255,255,0.02); color: #d7c6ff; }

/* subtle reveal animations */
.fade-up { opacity: 0; transform: translateY(18px); animation: fadeUp 700ms ease forwards; }
.fade-left { opacity: 0; transform: translateX(28px); animation: fadeLeft 700ms ease forwards; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0);} }
@keyframes fadeLeft { to { opacity:1; transform:translateX(0);} }

/* stagger effect for children */
.feature-card:nth-child(1){ animation-delay:0ms; }
.feature-card:nth-child(2){ animation-delay:120ms; }
.feature-card:nth-child(3){ animation-delay:240ms; }
.feature-card:nth-child(4){ animation-delay:360ms; }

/* small utility */
.container { max-width:1200px; margin:0 auto; padding:0 28px; }

/* tweak nav when active (if you use class 'active') */
.nav-links li.active a { background: rgba(255,255,255,0.03); padding:8px 12px; border-radius:8px; color: #fff; }

/* make sure hero text stands out on dark backgrounds */
.services-page .lead, .feature-card p { color: rgba(255,255,255,0.78); }

/* scalability */
@media (max-width:560px) {
  .hero-left h1 { font-size:2rem; }
  .illustration-card { padding: 16px; }
}
/* =========================
   Products & Services Pages
   (append to bottom of style.css)
   ========================= */

.page-hero {
  padding: 80px 0 40px;
  background: linear-gradient(180deg, rgba(18,10,28,0.85), rgba(18,10,28,0.92));
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: center;
}

.hero-title { font-size: 48px; margin: 0 0 12px; }
.lead { color: rgba(255,255,255,0.78); max-width: 680px; line-height:1.6; }

.hero-visual { width: 100%; border-radius: 14px; box-shadow: 0 20px 40px rgba(3,3,8,0.55); }

/* Cards grid */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 30px;
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(3,3,8,0.5);
}

.card-icon { font-size: 36px; color: #9d86ff; margin-bottom: 12px; }
.card h3 { margin: 0 0 8px; }
.checklist { margin: 10px 0 16px; padding-left: 20px; color: rgba(255,255,255,0.85); }

/* benefits */
.benefits-grid { display:flex; gap:20px; margin-top:18px; }
.benefit { flex:1; text-align:center; padding:18px; border-radius:10px; }
.benefit i { font-size:28px; color:#9d86ff; margin-bottom:10px; }

/* services grid */
.services-grid {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.service { background: rgba(255,255,255,0.02); padding:20px; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,0.4); }
.service i { font-size:28px; color:#9d86ff; }

/* CTA section */
.cta-section { padding: 48px 0; text-align:center; }
.btn-outline { border:1px solid rgba(255,255,255,0.06); padding:10px 16px; border-radius:10px; display:inline-block; }

/* Responsive */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align:left; }
  .cards-grid, .services-grid { grid-template-columns: 1fr; }
  .hero-right { display:none; }
}