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

:root {
  --primary: #0ea5e9;
  --primary-dark: #0284c7;
  --primary-light: #38bdf8;
  --accent: #06b6d4;
  --dark: #0a0f1e;
  --dark2: #0d1526;
  --dark3: #111827;
  --text: #94a3b8;
  --text-light: #cbd5e1;
  --white: #f0f9ff;
}

* { box-sizing: border-box; }

body {
  font-family: "Inter", sans-serif;
  color: #334155;
  background: #fff;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-light); text-decoration: none; }

h1,h2,h3,h4,h5,h6 { font-family: "Inter", sans-serif; }

/* Preloader */
#preloader {
  position: fixed; top:0; left:0; right:0; bottom:0;
  z-index:9999; overflow:hidden; background: var(--dark);
}
#preloader:before {
  content:""; position:fixed;
  top:calc(50% - 30px); left:calc(50% - 30px);
  border:4px solid var(--primary);
  border-top-color:transparent;
  border-radius:50%; width:60px; height:60px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Back to top */
.back-to-top {
  position:fixed; visibility:hidden; opacity:0;
  right:20px; bottom:20px; z-index:996;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  width:44px; height:44px; border-radius:50%;
  transition:all 0.3s; box-shadow:0 4px 20px rgba(14,165,233,0.4);
}
.back-to-top i { font-size:22px; color:#fff; line-height:0; }
.back-to-top:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(14,165,233,0.5); }
.back-to-top.active { visibility:visible; opacity:1; }

/* Header */
#header {
  background: rgba(10,15,30,0.97);
  backdrop-filter: blur(16px);
  transition:all 0.4s;
  z-index:997; padding:18px 0;
  border-bottom:1px solid rgba(14,165,233,0.1);
}
#header.header-scrolled {
  padding:12px 0;
  box-shadow:0 4px 30px rgba(0,0,0,0.3);
}
#header .logo { font-size:24px; margin:0; padding:0; line-height:1; font-weight:800; letter-spacing:-0.5px; }
#header .logo a { color:var(--white); }
#header .logo a span { color:var(--primary); }
#header .logo img { max-height:42px; }

/* Navbar */
.navbar { padding:0; }
.navbar ul { margin:0; padding:0; display:flex; list-style:none; align-items:center; }
.navbar li { position:relative; }
.navbar a, .navbar a:focus {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0 10px 40px;
  font-size:13px; color:rgba(240,249,255,0.8);
  text-transform:uppercase; white-space:nowrap;
  transition:0.3s; font-weight:600; letter-spacing:0.8px;
}
.navbar a:hover, .navbar .active, .navbar li:hover>a { color:var(--primary); }

.navbar .getstarted, .navbar .getstarted:focus {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  padding:9px 22px; margin-left:28px; border-radius:6px; color:#fff;
  font-weight:700; box-shadow:0 4px 15px rgba(14,165,233,0.35);
}
.navbar .getstarted:hover { color:#fff; box-shadow:0 6px 20px rgba(14,165,233,0.5); transform:translateY(-1px); }

/* Mobile Nav */
.mobile-nav-toggle { color:var(--white); font-size:28px; cursor:pointer; display:none; line-height:0; transition:0.5s; }
.mobile-nav-toggle.bi-x { color:#fff; }

@media (max-width:991px) {
  .mobile-nav-toggle { display:block; }
  .navbar ul { display:none; }
}

.navbar-mobile {
  position:fixed; overflow:hidden; top:0; right:0; left:0; bottom:0;
  background:rgba(10,15,30,0.97); transition:0.3s; z-index:999;
}
.navbar-mobile .mobile-nav-toggle { position:absolute; top:15px; right:15px; }
.navbar-mobile ul {
  display:block; position:absolute; top:55px; right:15px; bottom:15px; left:15px;
  padding:10px 0; background:var(--dark2); overflow-y:auto;
  border:1px solid rgba(14,165,233,0.2); border-radius:12px;
}
.navbar-mobile a, .navbar-mobile a:focus { padding:12px 20px; font-size:15px; color:var(--white); }
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover>a { color:var(--primary); }
.navbar-mobile .getstarted, .navbar-mobile .getstarted:focus { margin:15px; }

/* Hero */
#hero {
  width:100%; min-height:100vh;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 50%, #0c1a3a 100%);
  position:relative; overflow:hidden;
  display:flex; align-items:center;
}
#hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 70% 50%, rgba(14,165,233,0.12) 0%, transparent 70%);
}
#hero::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 20% 80%, rgba(6,182,212,0.08) 0%, transparent 60%);
}
#hero h1 {
  color:#fff; font-size:52px; font-weight:900;
  line-height:1.1; letter-spacing:-1.5px;
  background: linear-gradient(135deg, #fff 0%, var(--primary-light) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
#hero h2 { color:var(--text-light); font-size:18px; font-weight:400; line-height:1.7; margin-top:16px; }
#hero .hero-img img {
  border-radius:16px;
  box-shadow:0 30px 80px rgba(14,165,233,0.25), 0 0 0 1px rgba(14,165,233,0.1);
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-12px); }
}
#hero .btn-get-started {
  font-family:"Inter",sans-serif; font-weight:700; font-size:14px;
  letter-spacing:0.5px; display:inline-block; padding:15px 36px;
  border-radius:8px; transition:all 0.3s; color:#fff; margin-top:28px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow:0 8px 30px rgba(14,165,233,0.4);
  position:relative; z-index:1;
}
#hero .btn-get-started:hover {
  transform:translateY(-2px);
  box-shadow:0 12px 40px rgba(14,165,233,0.55);
}

@media (max-width:992px) {
  #hero { min-height:auto; padding:100px 0 60px; }
  #hero h1 { font-size:38px; }
  #hero .hero-img { margin-bottom:40px; }
}
@media (max-width:576px) { #hero h1 { font-size:30px; } }

/* Sections */
section { padding:80px 0; }
.section-bg { background: #f8fafc; }
.section-title { padding-bottom:50px; text-align:center; }
.section-title h2 {
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:3px; color:var(--primary); margin-bottom:12px;
  display:flex; align-items:center; justify-content:center; gap:12px;
}
.section-title h2::before, .section-title h2::after {
  content:''; width:40px; height:2px;
  background: linear-gradient(90deg, transparent, var(--primary));
}
.section-title h2::after { background: linear-gradient(90deg, var(--primary), transparent); }
.section-title p {
  font-size:32px; font-weight:800; color:#0f172a;
  letter-spacing:-0.5px; line-height:1.2; margin:0;
}
.section-title span { font-size:16px; font-weight:400; color:#64748b; margin-top:12px; display:block; }

/* About */
.about .content h3 { font-weight:800; font-size:28px; color:#0f172a; }
.about .content ul { list-style:none; padding:0; }
.about .content ul li { padding:8px 0 8px 30px; position:relative; color:#475569; font-size:15px; }
.about .content ul i { position:absolute; left:0; top:10px; font-size:18px; color:var(--primary); }
.about .content .btn-learn-more {
  font-family:"Inter",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.5px; display:inline-block; padding:12px 28px;
  border-radius:8px; transition:all 0.3s; color:var(--primary); margin-top:16px;
  border:2px solid var(--primary);
}
.about .content .btn-learn-more:hover {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff; border-color:transparent;
  box-shadow:0 8px 25px rgba(14,165,233,0.35);
}

/* CTA */
.cta {
  background: linear-gradient(135deg, var(--dark) 0%, #0c1840 100%);
  padding:60px 0; position:relative; overflow:hidden;
}
.cta::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse at 80% 50%, rgba(14,165,233,0.15) 0%, transparent 70%);
}
.cta h3 { font-size:28px; font-weight:800; color:#fff; }
.cta p { color:var(--text-light); font-size:15px; line-height:1.8; }
.cta-btn {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff; padding:14px 36px; border-radius:8px;
  font-weight:700; font-size:14px; letter-spacing:0.5px;
  transition:all 0.3s; box-shadow:0 8px 25px rgba(14,165,233,0.4);
  display:inline-block;
}
.cta-btn:hover {
  color:#fff; transform:translateY(-2px);
  box-shadow:0 12px 35px rgba(14,165,233,0.55);
}
.cta-btn-container { display:flex; align-items:center; justify-content:center; }

/* Why Us */
.why-us { padding:0; background:#f8fafc; }
.why-us .content { padding:60px 60px 0 60px; }
.why-us .content h3 { font-weight:400; font-size:30px; color:#0f172a; line-height:1.4; }
.why-us .content h3 strong { font-weight:900; color:var(--primary); }
.why-us .content p { color:#64748b; font-size:15px; line-height:1.7; }
.why-us .img { background-size:cover; background-position:center; min-height:480px; }
.why-us .accordion-list { padding:30px 60px 60px 60px; }
.why-us .accordion-list ul { padding:0; list-style:none; }
.why-us .accordion-list li+li { margin-top:12px; }
.why-us .accordion-list li {
  padding:20px 24px; background:#fff; border-radius:10px;
  border:1px solid #e2e8f0; transition:all 0.2s;
}
.why-us .accordion-list li:hover { border-color:rgba(14,165,233,0.3); }
.why-us .accordion-list a {
  display:block; position:relative; font-family:"Inter",sans-serif;
  font-size:15px; line-height:24px; font-weight:600;
  padding-right:30px; color:#0f172a; cursor:pointer;
}
.why-us .accordion-list span { color:var(--primary); font-weight:800; font-size:16px; padding-right:12px; }
.why-us .accordion-list i { font-size:22px; position:absolute; right:0; top:0; color:var(--primary); }
.why-us .accordion-list p { margin-bottom:0; padding:12px 0 0; color:#64748b; font-size:14px; line-height:1.7; }
.why-us .accordion-list .icon-show { display:none; }
.why-us .accordion-list .collapsed .icon-show { display:inline-block; }
.why-us .accordion-list .collapsed .icon-close { display:none; }

@media (max-width:991px) {
  .why-us .content, .why-us .accordion-list { padding-left:30px; padding-right:30px; }
}

/* Services / Get Started Cards */
#get-started.services .icon-box, .services .icon-box {
  text-align:center; padding:40px 28px; border-radius:14px;
  background:#fff; border:1px solid #e2e8f0;
  transition:all 0.3s; height:100%;
  box-shadow:0 4px 20px rgba(0,0,0,0.04);
}
.services .icon-box:hover {
  border-color:rgba(14,165,233,0.4);
  box-shadow:0 12px 40px rgba(14,165,233,0.12);
  transform:translateY(-4px);
}
.services .icon-box .icon {
  width:72px; height:72px; margin:0 auto 20px;
  background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(6,182,212,0.05));
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(14,165,233,0.2);
}
.services .icon-box .icon i { font-size:32px; color:var(--primary); }
.services .icon-box h4 { font-weight:800; font-size:18px; color:#0f172a; margin-bottom:10px; }
.services .icon-box p { color:#64748b; font-size:14px; line-height:1.7; margin:0; }

/* Upload / FAQ */
.faq { background:#fff; }
.faq .panel-fix {
  background:#f8fafc; border-radius:14px; padding:36px;
  border:1px solid #e2e8f0;
}
.faq .alert-warning {
  background: rgba(14,165,233,0.08); border:1px solid rgba(14,165,233,0.25);
  color:#0369a1; border-radius:8px; padding:14px 20px;
  font-size:14px; font-weight:500; margin-bottom:24px;
}
.faq label { font-weight:600; font-size:13px; color:#374151; text-transform:uppercase; letter-spacing:0.5px; }
.faq .input-group-text { background:var(--primary); color:#fff; border:none; }
.faq .form-control { border-color:#e2e8f0; font-size:14px; padding:10px 14px; }
.faq .form-control:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(14,165,233,0.1); }
.faq .btn-success {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border:none; border-radius:8px; padding:10px 24px; font-weight:700;
}

/* License Plans */
#license .plan-badge {
  display:inline-block; background:rgba(14,165,233,0.1);
  color:var(--primary); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; padding:4px 12px;
  border-radius:20px; margin-bottom:10px; border:1px solid rgba(14,165,233,0.2);
}
#license .plan-card {
  background:#fff; border-radius:16px; padding:32px 24px;
  border:1px solid #e2e8f0; transition:all 0.3s; height:100%;
  text-align:center; position:relative; overflow:hidden;
}
#license .plan-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
#license .plan-card:hover {
  border-color:rgba(14,165,233,0.4);
  box-shadow:0 16px 50px rgba(14,165,233,0.12);
  transform:translateY(-5px);
}
#license .plan-card .plan-icon { font-size:36px; color:var(--primary); margin-bottom:16px; }
#license .plan-card h4 { font-weight:800; font-size:17px; color:#0f172a; margin-bottom:6px; }
#license .plan-card .price {
  font-size:34px; font-weight:900; color:var(--primary);
  line-height:1; margin:10px 0;
}
#license .plan-card .price sup { font-size:18px; font-weight:700; vertical-align:top; margin-top:8px; }
#license .plan-card small { color:#94a3b8; font-size:13px; }
#license .plan-card p { color:#64748b; font-size:13px; margin-top:12px; line-height:1.6; }

/* Check list */
.check-list { list-style:none; padding:0; }
.check-list li { padding:7px 0 7px 28px; position:relative; font-size:14px; color:#475569; }
.check-list li::before {
  content:''; position:absolute; left:0; top:12px;
  width:18px; height:18px; border-radius:50%;
  background:rgba(14,165,233,0.1); display:flex; align-items:center; justify-content:center;
}
.check-list li i { position:absolute; left:2px; top:9px; font-size:14px; color:var(--primary); }

/* Info box */
.info-box {
  background:rgba(14,165,233,0.05); border:1px solid rgba(14,165,233,0.15);
  border-radius:12px; padding:24px;
}
.info-box li { color:#475569; font-size:14px; margin-bottom:8px; padding-left:16px; position:relative; }
.info-box li::before { content:'–'; position:absolute; left:0; color:var(--primary); }

/* btn-learn-more global */
.btn-learn-more {
  font-family:"Inter",sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.5px; display:inline-block; padding:12px 28px;
  border-radius:8px; transition:all 0.3s; color:var(--primary);
  border:2px solid var(--primary);
}
.btn-learn-more:hover {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff; border-color:transparent;
  box-shadow:0 8px 25px rgba(14,165,233,0.35);
}

/* Breadcrumbs */
.breadcrumbs {
  padding:24px 0; background:var(--dark);
  border-bottom:1px solid rgba(14,165,233,0.1); margin-top:72px;
}
.breadcrumbs h2 { font-size:22px; font-weight:800; color:#fff; margin:0; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:6px 0 0; gap:6px; }
.breadcrumbs ol li { font-size:13px; color:var(--text); }
.breadcrumbs ol li a { color:var(--primary); }
.breadcrumbs ol li+li::before { content:'›'; margin-right:6px; color:var(--text); }

/* Footer */
#footer { background: var(--dark); color:var(--text-light); padding-top:60px; }
#footer .footer-top { padding-bottom:40px; border-bottom:1px solid rgba(14,165,233,0.1); }
#footer .footer-contact h3 { font-size:22px; font-weight:800; color:#fff; margin-bottom:16px; }
#footer .footer-contact h3 span { color:var(--primary); }
#footer .footer-contact p { font-size:14px; line-height:2; color:var(--text); }
#footer .footer-contact p strong { color:var(--primary-light); }
#footer .footer-links h4 { font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:#fff; margin-bottom:20px; }
#footer .footer-links ul { list-style:none; padding:0; }
#footer .footer-links ul li { padding:6px 0; display:flex; align-items:center; gap:8px; }
#footer .footer-links ul li i { color:var(--primary); font-size:14px; }
#footer .footer-links ul a { color:var(--text); font-size:14px; transition:0.2s; }
#footer .footer-links ul a:hover { color:var(--primary); padding-left:4px; }
#footer .footer-disclaimer h4 { font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:#fff; margin-bottom:16px; }
#footer .footer-disclaimer p { font-size:13px; color:var(--text); line-height:1.8; margin-bottom:8px; }
#footer .footer-bottom { padding:24px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
#footer .copyright { font-size:13px; color:var(--text); }
#footer .credits { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Form pages */
.php-email-form .error-message, .php-email-form .sent-message { padding:12px; display:none; border-radius:6px; }
.php-email-form .error-message { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3); color:#ef4444; }
.php-email-form .sent-message { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.3); color:#10b981; }
.php-email-form .validate { display:none; color: #ef4444; font-size:13px; }

/* Contact */
.contact .info-box-contact {
  background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px;
  padding:28px; height:100%; transition:all 0.3s;
}
.contact .info-box-contact:hover { border-color:rgba(14,165,233,0.3); }
.contact .info-box-contact i { font-size:32px; color:var(--primary); margin-bottom:12px; }
.contact .info-box-contact h4 { font-size:16px; font-weight:700; color:#0f172a; margin-bottom:6px; }
.contact .info-box-contact p { font-size:14px; color:#64748b; margin:0; line-height:1.7; }
.contact .php-email-form input, .contact .php-email-form textarea {
  border:1px solid #e2e8f0; border-radius:8px; padding:12px 16px;
  font-size:14px; width:100%; transition:0.2s;
}
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
  border-color:var(--primary); outline:none;
  box-shadow:0 0 0 3px rgba(14,165,233,0.1);
}
.contact .php-email-form button[type=submit] {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border:none; color:#fff; padding:13px 40px; border-radius:8px;
  font-weight:700; font-size:14px; letter-spacing:0.5px; cursor:pointer;
  transition:all 0.3s; box-shadow:0 6px 20px rgba(14,165,233,0.35);
}
.contact .php-email-form button[type=submit]:hover {
  transform:translateY(-1px); box-shadow:0 10px 30px rgba(14,165,233,0.45);
}

/* Tags */
.tag {
  display:inline-block; background:rgba(14,165,233,0.1);
  color:var(--primary); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px; padding:4px 12px;
  border-radius:20px; margin-bottom:12px;
}

/* Responsive */
@media (max-width:768px) {
  section { padding:60px 0; }
  .why-us .content { padding:40px 24px 0; }
  .why-us .accordion-list { padding:20px 24px 40px; }
  .section-title p { font-size:24px; }
  #hero h1 { font-size:32px; }
}