/* ==========================
   GENERAL
========================== */
body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
  background: #0f172a;
  color: #e5e7eb;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover { color: #22c55e; }

/* Headings */
h1,h2,h3,h4,h5,h6 { font-weight: 700; }

/* ==========================
   NAVBAR (Footer-Matching Theme)
========================== */
.navbar {
  transition: all 0.3s;
  background: linear-gradient(135deg, #0f172a, #064e3b); /* same as footer */
  padding: 18px 0;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  background: linear-gradient(to right, #0f172a, #064e3b);
}

.navbar.scrolled {
  background: linear-gradient(135deg, #0f172a, #064e3b); /* keep same */
}

.navbar .nav-link {
  color: #cbd5f5; /* light text matching footer */
  font-weight: 500;
  transition: all 0.3s;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: #22c55e; /* same accent as footer highlights */
  font-weight: 600;
}

.navbar-brand {
  color: #cbd5f5;
  font-weight: 700;
  font-size: 22px;
  transition: all 0.3s;
}

.navbar-brand:hover {
  color: #22c55e;
}




/* ==========================
   HERO 
========================== */
.hero {
  position: relative;
  background: linear-gradient(135deg, #0f172a, #064e3b); /* dark/nav match */
  color: #e5e7eb;
  text-align: center;
  padding: 120px 20px;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, rgba(15,23,42,0), #0f172a);
  z-index: 0;
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 20px;
  animation: fadeUp 1s ease forwards;
  opacity: 0;
}

.hero-title .gradient-text {
  background: linear-gradient(90deg,#22c55e,#38bdf8); /* green-blue accent */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.35rem;
  line-height: 1.8;
  margin-bottom: 40px;
  color: #cbd5f5;
  opacity: 0;
  animation: fadeUp 1s 0.2s ease forwards;
}

.hero-buttons .btn {
  font-weight: 600;
  padding: 14px 32px;
  border-radius: 50px;
  margin: 0 8px;
  transition: all 0.3s ease;
}



.btn-glow {
  background: linear-gradient(135deg,#22c55e,#16a34a); /* navbar-accent green */
  color: #fff;
  border: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.btn-glow:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg,#38bdf8,#0ea5e9); /* subtle hover blue */
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.btn-glow-outline {
  border: 2px solid #22c55e; /* matches green accent */
  color: #22c55e;
  background: transparent;
}

.btn-glow-outline:hover {
  background: rgba(34,197,94,0.1);
  color: #fff;
  transform: scale(1.05);
}

/* ==========================
   Floating Shapes (Darker)
========================== */
.hero-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.05); /* subtle on dark bg */
  z-index: 0;
  animation: floatShape 6s ease-in-out infinite;
}

.shape-1 { width: 400px; height: 400px; top: -60px; left: -60px; }
.shape-2 { width: 300px; height: 300px; bottom: -50px; right: -50px; animation-duration: 8s; }
.shape-3 { width: 150px; height: 150px; top: 30%; left: 80%; animation-duration: 7s; }

/* ==========================
   Animations
========================== */
@keyframes fadeUp {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}

@keyframes floatShape {
  0%, 100% { transform: translateY(0) rotate(0deg);}
  50% { transform: translateY(20px) rotate(45deg);}
}

/* ==========================
   Responsive
========================== */
@media(max-width: 992px){
  .hero-title { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1.2rem; }
  .btn { padding: 12px 28px; }
}

@media(max-width: 576px){
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-buttons { display: flex; flex-direction: column; gap: 12px; }
}


/* ==========================
   Floating Shapes
========================== */
.hero-shape {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  z-index: 0;
  animation: floatShape 6s ease-in-out infinite;
}

.shape-1 { width: 400px; height: 400px; top: -60px; left: -60px; }
.shape-2 { width: 300px; height: 300px; bottom: -50px; right: -50px; animation-duration: 8s; }
.shape-3 { width: 150px; height: 150px; top: 30%; left: 80%; animation-duration: 7s; }

/* ==========================
   Animations
========================== */
@keyframes fadeUp {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}

@keyframes floatShape {
  0%, 100% { transform: translateY(0) rotate(0deg);}
  50% { transform: translateY(20px) rotate(45deg);}
}

/* ==========================
   Responsive
========================== */
@media(max-width: 992px){
  .hero-title { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1.2rem; }
  .btn { padding: 12px 28px; }
}

@media(max-width: 576px){
  .hero-title { font-size: 2rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-buttons { display: flex; flex-direction: column; gap: 12px; }
}


/* SIDEBAR */
.sidebar {
  background: #0f172a;
  border-radius: 12px;
  padding: 20px;
  color: #e5e7eb;
}
.sidebar .nav-link {
  color: #cbd5f5;
  font-weight: 500;
  transition: 0.3s;
}
.sidebar .nav-link.active {
  color: #22c55e;
  font-weight: 600;
}
.sidebar .nav-link:hover { color: #38bdf8; }



/* DOCS CARDS */
.code-card {
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  font-family: monospace;
  overflow-x: auto;
}
.code-card pre {
  margin: 0;
  font-size: 14px;
  color: #f0f0f0;
  background: transparent;
}

/* FORM */
#tryForm input.form-control {
  background: #1e293b;
  border: 1px solid #3b82f6;
  color: #e5e7eb;
}
#tryForm input.form-control:focus {
  border-color: #22c55e;
  box-shadow: 0 0 5px #22c55e;
}

/* TAB STYLING */
.nav-tabs .nav-link {
  color: #cbd5f5;
  font-weight: 500;
}
.nav-tabs .nav-link.active {
  color: #22c55e;
  font-weight: 600;
}

/* PRETTY SCROLLBAR */
#tryResult {
  height: 200px;
  overflow-y: auto;
  background: #1e293b;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
}

/* RESPONSIVE */
@media(max-width:992px){
  .sidebar { position: relative; margin-bottom: 30px; }
}


/* ==========================
   DOC CARDS
========================== */
.card {
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.05);
  margin-bottom:20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
pre { border-radius:8px; padding:15px; overflow-x:auto; }

/* Tabs for code */
.nav-tabs .nav-link { color:#cbd5f5; }
.nav-tabs .nav-link.active { color:#22c55e; font-weight:600; }

/* Try-It Now console */
#tryResult {
  height:200px;
  overflow-y:auto;
  background:#1e293b;
  color:#fff;
  border-radius:8px;
  padding:10px;
  font-family: monospace;
}

/* ==========================
   SMART DIAL MODERN UI
========================== */
.sd-section, .sd-how-it-works { font-family:'Inter'; padding: 80px 20px; overflow:hidden; }
.sd-dark { background:#0f172a; color:#e5e7eb; }
.sd-header { max-width:750px; margin:0 auto 70px; text-align:center; }
.sd-badge { display:inline-block; padding:6px 16px; border-radius:999px; font-size:13px; font-weight:600; margin-bottom:16px; }
.sd-badge.light { background:#fff;color:#0f172a; }
.sd-header h2 { font-size:44px; font-weight:800; margin-bottom:16px; }
.sd-header h2 span { background: linear-gradient(90deg,#22c55e,#38bdf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.sd-header p { font-size:18px; line-height:1.7; color:#cbd5f5; opacity:0.9; }

/* GRID CARDS */
.sd-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:28px; }

/* GLASS CARDS */
.sd-card, .sd-feature, .sd-usecase {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  border-radius: 20px;
  padding:32px;
  border:1px solid rgba(255,255,255,0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.sd-card:hover, .sd-feature:hover, .sd-usecase:hover {
  transform: translateY(-12px);
  box-shadow:0 25px 60px rgba(0,0,0,0.5);
}
.sd-card h5, .sd-feature h4, .sd-usecase h4 { margin-top:18px; font-weight:700; }
.sd-card p, .sd-feature p, .sd-usecase p { font-size:15px; line-height:1.6; color:#c7d2fe; }

/* ICONS */
.sd-icon { width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:26px; color:#fff; }
.gradient-green { background: linear-gradient(135deg,#22c55e,#16a34a); }
.gradient-blue { background: linear-gradient(135deg,#38bdf8,#2563eb); }
.gradient-purple { background: linear-gradient(135deg,#a855f7,#6366f1); }
.gradient-orange { background: linear-gradient(135deg,#fb923c,#f97316); }

/* FLOW */
.sd-flow { margin-top:90px; text-align:center; }
.sd-flow h4 { font-weight:700; margin-bottom:30px; }
.sd-flow-steps { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; }
.flow-item {
  background: rgba(255,255,255,0.08);
  padding:16px 24px;
  border-radius:14px;
  font-weight:600;
  transition: transform 0.3s ease;
}
.flow-item:hover { transform: scale(1.05); }

/* COMPARISON */
.sd-compare { margin-top:90px; display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:28px; }
.compare-box { padding:32px; border-radius:22px; transition:transform 0.3s ease; }
.compare-box:hover { transform:translateY(-10px); }
.compare-box.old { background:#020617; border:1px solid #1e293b; }
.compare-box.new { background: linear-gradient(135deg,#22c55e,#16a34a); color:#052e16; }
.compare-box h6 { font-weight:800; margin-bottom:14px; }
.compare-box ul { padding-left:18px; }
.compare-box li { margin-bottom:10px; }

/* USE CASES */
.sd-usecases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
}

.sd-usecase {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sd-usecase:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.sd-usecase-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 24px;
  color: #fff;
  margin-bottom: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sd-usecase:hover .sd-usecase-icon {
  transform: scale(1.2);
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

/* Gradient colors for icons */
.gradient-blue { background: linear-gradient(135deg,#38bdf8,#2563eb); }
.gradient-green { background: linear-gradient(135deg,#22c55e,#16a34a); }
.gradient-purple { background: linear-gradient(135deg,#a855f7,#6366f1); }
.gradient-orange { background: linear-gradient(135deg,#fb923c,#f97316); }
.gradient-red { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.gradient-teal { background: linear-gradient(135deg,#14b8a6,#0f766e); }
.gradient-yellow { background: linear-gradient(135deg,#facc15,#ca8a04); }
.gradient-pink { background: linear-gradient(135deg,#f472b6,#db2777); }
.gradient-indigo { background: linear-gradient(135deg,#6366f1,#4f46e5); }
.gradient-cyan { background: linear-gradient(135deg,#06b6d4,#0e7490); }
.gradient-lime { background: linear-gradient(135deg,#84cc16,#65a30d); }

/* Responsive adjustments */
@media(max-width:1024px){ .sd-usecases { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); } }
@media(max-width:768px){ .sd-usecases { grid-template-columns: 1fr; } }


/* ==========================
   SECURITY LIST (Professional Icons)
========================== */
.sd-security {
  margin-top:40px;
  list-style:none;
  padding-left:0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  gap: 20px;
}

.sd-security-item {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px 24px;
  font-size: 16px;
  color: #cbd5f5;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
}

.sd-security-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  color: #fff;
}

.sd-security-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-right: 16px;
  color: #fff;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sd-security-item:hover .sd-security-icon {
  transform: scale(1.2);
  box-shadow: 0 6px 15px rgba(0,0,0,0.4);
}

@media(max-width:768px){
  .sd-security { grid-template-columns: 1fr; gap:16px; }
  .sd-security-item { padding: 16px 20px; }
}

.sd-security li { font-size:18px; margin:12px 0; }

/* RESPONSIVE */
@media(max-width:768px){
  .sd-header h2 { font-size:36px; }
  .sd-card, .sd-feature, .sd-usecase { padding:24px; }
  .flow-item { padding:12px 18px; }
}

/* ==========================
   FOOTER
========================== */
.sd-footer {
  background: linear-gradient(to bottom, #0f172a 0%, #064e3b 100%);
  color: #e5e7eb;
  padding: 60px 20px 20px;
  font-family: 'Inter';
}

.sd-footer h4 { font-size:22px; margin-bottom:12px; }
.sd-footer h5 { font-size:16px; margin-bottom:12px; color:#22c55e; }
.sd-footer p, .sd-footer a { font-size:14px; color:#cbd5f5; text-decoration:none; line-height:1.6; }
.sd-footer-links ul { list-style:none; padding-left:0; }
.sd-footer-links li { margin-bottom:10px; }
.sd-footer-links a:hover { color:#22c55e; text-decoration:underline; }
.sd-footer-social a { display:inline-block; margin-right:12px; font-size:18px; color:#cbd5f5; transition:0.3s ease; }
.sd-footer-social a:hover { color:#22c55e; transform:scale(1.2); }
.sd-footer-bottom { margin-top:40px; text-align:center; font-size:13px; color:#94a3b8; border-top:1px solid rgba(255,255,255,0.1); padding-top:15px; }
@media(max-width:768px){
  .sd-footer-social a { margin-right:10px; }
}

/* ==========================
   ANIMATION
========================== */

.animate-fade-up {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 0.6s ease-out;
}
.sd-card, .sd-feature, .sd-usecase, .flow-item, .compare-box {
  opacity: 0;
  transform: translateY(20px);
}