/* ================================
   ILOGICSOFT PREMIUM STYLE.CSS (REPLACE)
================================ */

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  background:#f4f6f8;
  color:#0f172a;
}

/* Variables */
:root{
  --brand:#22c55e;
  --brand2:#38bdf8;
  --dark:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.12);
  --shadow:0 12px 28px rgba(2,6,23,.12);
}

/* Helpers */
.container{width:90%;max-width:1200px;margin:0 auto}
a{color:inherit}

/* ================================
   HEADER / NAVBAR
================================ */
header.navbar{
  background:linear-gradient(180deg,rgba(2,6,23,.95),rgba(15,23,42,.92));
  padding:14px 0;
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

header.navbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.logo-link{display:inline-flex;align-items:center;text-decoration:none}
.logo-frame{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.10);
  padding:10px 14px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.logo-img{
  height:54px;
  width:auto;
  max-width:260px;
  display:block;
  object-fit:contain;
}

/* Nav */
header.navbar nav ul{
  list-style:none;
  display:flex;
  gap:24px;
  margin:0;
  padding:0;
  align-items:center;
}
header.navbar nav ul li a{
  color:#fff;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.2px;
  opacity:.92;
}
header.navbar nav ul li a:hover{opacity:1}
header.navbar nav ul li a.active{
  color:var(--brand);
  opacity:1;
}

/* ================================
   HERO
================================ */
.hero-rich{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(900px 420px at 80% 20%, rgba(56,189,248,.20), transparent 60%),
    linear-gradient(rgba(2,6,23,.78),rgba(2,6,23,.86)),
    url("images/database.jpg");
  background-size:cover;
  background-position:center;
  padding:88px 0 62px;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.hero-center{text-align:center}
.hero-rich h1{
  font-size:46px;
  margin:0 0 14px;
  line-height:1.12;
  text-shadow:0 3px 18px rgba(0,0,0,.45);
}
.hero-rich p{
  margin:0 auto;
  max-width:980px;
  font-size:18px;
  line-height:1.7;
  color:#e5e7eb;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

/* Hero actions */
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  margin-top:22px;
}

/* Buttons */
.btn-primary,.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 22px;
  border-radius:14px;
  font-weight:1000;
  text-decoration:none;
  line-height:1;
  min-height:48px;
  white-space:nowrap;
}
.btn-primary{
  background:var(--brand);
  color:#06270f;
  box-shadow:0 14px 26px rgba(34,197,94,.22);
}
.btn-primary:hover{filter:brightness(.98)}
.btn-secondary{
  background:rgba(255,255,255,.12);
  color:#ffffff;               /* FIX: readable */
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.btn-secondary:hover{background:rgba(255,255,255,.16)}

/* KPI Tiles */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:28px;
}
.kpi-tile{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.20);
  border-radius:18px;
  padding:16px 16px;
  text-align:left;
}
.kpi-tile strong{
  display:block;
  font-size:24px;
  color:#fff;
}
.kpi-tile span{
  display:block;
  margin-top:6px;
  color:#e5e7eb;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}

/* ================================
   TRUST BAR
================================ */
.trustbar{
  background:#0b1220;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.trustbar .container{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.trustbar .label{
  color:#cbd5e1;
  font-weight:1000;
  letter-spacing:.2px;
}
.trustbar .logos{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.logo-pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e2e8f0;
  font-size:12px;
  font-weight:1000;
}

/* ================================
   SECTIONS
================================ */
.section{padding:72px 0}
.section.alt{background:#f8fafc}
.section-title{text-align:center;max-width:900px;margin:0 auto 30px}
.section-title h2{margin:0 0 10px;font-size:32px}
.section-title p{margin:0;color:var(--muted);line-height:1.7}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}
.card-pad{padding:22px}
.card h3{margin:0 0 10px;font-size:18px}
.card p{margin:0;color:var(--muted);line-height:1.75}

.badges{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.badge{
  background:#eef2ff;
  border:1px solid rgba(15,23,42,.08);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#0f172a;
}

/* CTA band */
.cta-band{
  margin-top:22px;
  background:linear-gradient(90deg, rgba(34,197,94,.18), rgba(56,189,248,.16));
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:22px;
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.cta-band h3{margin:0;font-size:20px}
.cta-band p{margin:6px 0 0;color:#334155}

/* Timeline */
.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:16px;
}
.step .n{
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(56,189,248,.16);
  border:1px solid rgba(56,189,248,.28);
  display:flex;align-items:center;justify-content:center;
  font-weight:1000;color:#0f172a;
  margin-bottom:10px;
}
.step h4{margin:0 0 6px;font-size:16px}
.step p{margin:0;color:#475569;line-height:1.65}

/* FAQ */
.faq{max-width:900px;margin:0 auto}
.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
  overflow:hidden;
}
.faq-q{
  width:100%;
  background:transparent;
  border:0;
  padding:16px 18px;
  font-weight:1000;
  text-align:left;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
}
.faq-a{display:none;padding:0 18px 16px;color:#475569;line-height:1.75}
.faq-item.open .faq-a{display:block}
.faq-icon{font-weight:1000}

/* Footer */
footer{
  background:#020617;
  color:#cbd5f5;
  text-align:center;
  padding:22px 0;
  margin-top:0;
}

/* ================================
   RESPONSIVE
================================ */
@media(max-width:1000px){
  .timeline{grid-template-columns:1fr}
}

@media(max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr}
}

@media(max-width:768px){
  header.navbar .container{
    flex-wrap:wrap;
    justify-content:center;
  }
  header.navbar nav{width:100%}
  header.navbar nav ul{justify-content:center;gap:14px;flex-wrap:wrap}
  .logo-img{height:48px;max-width:240px}
  .hero-rich{padding:64px 0 54px}
  .hero-rich h1{font-size:34px}
}

/* FAQ (no-JS, reliable) */
.faq-d{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(2,6,23,.10);
  padding:14px 16px;
  margin-bottom:12px;
}
.faq-d summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.faq-d summary::-webkit-details-marker{display:none;}
.faq-a2{
  padding-top:10px;
  color:#475569;
  line-height:1.7;
}

/* ===== FAQ (details) with + / – icon ===== */
.faq-d{
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(2,6,23,.10);
  padding:0;
  margin-bottom:12px;
  overflow:hidden;
}

.faq-d summary{
  cursor:pointer;
  padding:16px 18px;
  font-weight:900;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* remove default triangle marker */
.faq-d summary::-webkit-details-marker{display:none;}
.faq-d summary::marker{content:"";}

/* + icon (closed) */
.faq-d summary::after{
  content:"+";
  font-weight:1000;
  color:#0f172a;
  font-size:18px;
  line-height:1;
}

/* – icon (open) */
.faq-d[open] summary::after{
  content:"–";
}

.faq-a2{
  padding:0 18px 16px;
  color:#475569;
  line-height:1.75;
}

/* ================================
   CONTACT PAGE
================================ */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:30px;
  max-width:1000px;
  margin:auto;
}

.contact-info-card,
.contact-form-card{
  background:#fff;
  padding:28px;
  border-radius:18px;
  box-shadow:0 12px 28px rgba(2,6,23,.12);
}

.contact-info-card h3{
  margin-top:0;
  margin-bottom:18px;
}

.contact-item{
  display:flex;
  gap:14px;
  margin-bottom:18px;
  font-size:16px;
}

.contact-icon{
  font-size:22px;
}

.contact-item a{
  color:#2563eb;
  text-decoration:none;
}

.contact-item a:hover{
  text-decoration:underline;
}

.contact-note{
  margin-top:20px;
  background:#f1f5f9;
  padding:14px;
  border-radius:12px;
  font-size:14px;
}

/* FORM */

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.contact-form-card label{
  display:block;
  font-weight:700;
  margin:14px 0 6px;
}

.contact-form-card input,
.contact-form-card textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-size:15px;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus{
  outline:none;
  border-color:#22c55e;
}

/* Mobile */

@media(max-width:768px){
  .contact-grid{
    grid-template-columns:1fr;
  }
  .form-row{
    grid-template-columns:1fr;
  }
}

/* ================================
   CONTACT PAGE (RICH)
================================ */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:22px;
  max-width:1100px;
  margin:0 auto;
}

.contact-info-card,
.contact-form-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  box-shadow:0 12px 28px rgba(2,6,23,.10);
  padding:22px;
}

.contact-info-card h3,
.contact-form-card h3{
  margin:0 0 14px;
}

.contact-item{
  display:flex;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.contact-item:last-of-type{
  border-bottom:0;
}

.contact-ico{
  width:38px;height:38px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(56,189,248,.12);
  color:#0f172a;
  flex:0 0 auto;
}

.contact-label{
  font-weight:900;
  color:#0f172a;
  margin-bottom:2px;
}

.contact-text a{
  color:#2563eb;
  font-weight:800;
  text-decoration:none;
}
.contact-text a:hover{ text-decoration:underline; }

.contact-value{
  color:#334155;
  font-weight:700;
}

.contact-note{
  margin-top:16px;
  background:#f1f5f9;
  padding:12px 14px;
  border-radius:12px;
  color:#334155;
}

/* Form */
.contact-form-pro label{
  display:block;
  font-weight:900;
  margin:12px 0 6px;
  color:#0f172a;
}

.contact-form-pro input,
.contact-form-pro textarea{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:12px;
  padding:12px 14px;
  font-size:15px;
}

.contact-form-pro input:focus,
.contact-form-pro textarea:focus{
  outline:none;
  border-color:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.contact-mini{
  margin-top:12px;
  color:#475569;
  font-weight:700;
}

.contact-mini a{ color:#2563eb; text-decoration:none; }
.contact-mini a:hover{ text-decoration:underline; }

/* Responsive */
@media(max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
}

/* ================================
   FAQ (DETAILS) – FINAL
================================ */
.faq{
  max-width:900px;
  margin:0 auto;
}

.faq-d{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(2,6,23,.10);
  margin-bottom:14px;
  overflow:hidden;
}

.faq-d summary{
  cursor:pointer;
  padding:16px 18px;
  font-weight:900;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* remove default arrows */
.faq-d summary::-webkit-details-marker{display:none;}
.faq-d summary::marker{content:"";}

/* + / – icons */
.faq-d summary::after{
  content:"+";
  font-size:20px;
  font-weight:1000;
  color:#0f172a;
}
.faq-d[open] summary::after{
  content:"–";
}

.faq-a2{
  padding:0 18px 16px;
  color:#475569;
  line-height:1.75;
}