:root{
  --bg-dark:#05060a;
  --bg-light:#f5f7fb;
  --card-dark:#0b0d14;
  --card-light:#ffffff;
  --accent:#0aa2ff;
  --accent-soft:#7b6bff;
  --muted-dark:#9aa3b2;
  --muted-light:#5b6475;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;}
body[data-theme="dark"]{
  background:radial-gradient(circle at top,#071021 0%,#05060a 55%,#020308 100%);
  color:#e6eef8;
}
body[data-theme="light"]{
  background:#f5f7fb;
  color:#141824;
}
.container{
max-width:1120px;
margin:0 auto;
padding:24px 20px;
}
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 0;position:sticky;top:0;z-index:40;
  backdrop-filter:blur(16px);
}
body[data-theme="dark"] .header{background:rgba(3,6,15,.92);border-bottom:1px solid rgba(255,255,255,0.03);}
body[data-theme="light"] .header{background:rgba(245,247,251,.9);border-bottom:1px solid rgba(15,23,42,0.05);}
.logo{display:flex;align-items:center;gap:10px;}
.logo img{height:50px;border-radius:12px;}
.logo-text-title{font-weight:800;font-size:18px;letter-spacing:.06em;text-transform:uppercase;}
.logo-text-sub{font-size:11px;opacity:.7;margin-top:2px;}
.nav a{text-decoration:none;margin:0 6px;font-size:14px;font-weight:600;position:relative;}
body[data-theme="dark"] .nav a{color:var(--muted-dark);}
body[data-theme="light"] .nav a{color:var(--muted-light);}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));transition:width .25s ease;
}
.nav a:hover::after{width:100%;}
.theme-toggle{
  border-radius:999px;
  padding:6px 12px;
  font-size:11px;
  font-weight:600;
  cursor:pointer;
  border:1px solid rgba(148,163,184,.6);
  background:rgba(15,23,42,0.6);
  color:#e2e8f0;
}
body[data-theme="light"] .theme-toggle{
  background:#ffffff;
  color:#0f172a;
}
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:32px;
  align-items:center;
  padding:40px 0 28px;
}
.hero-kicker{
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.18em;
  font-weight:600;
  margin-bottom:8px;
}
.hero-title{
  font-size:40px;
  line-height:1.02;
  letter-spacing:-.03em;
}
.hero-sub{
  margin-top:10px;
  font-size:15px;
}
body[data-theme="dark"] .hero-sub{color:var(--muted-dark);}
body[data-theme="light"] .hero-sub{color:var(--muted-light);}
.hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  margin-top:20px;
}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 18px;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  border:none;
  cursor:pointer;
  background:linear-gradient(120deg,var(--accent),var(--accent-soft));
  color:#020617;
  box-shadow:0 12px 40px rgba(15,23,42,0.55);
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  border:1px dashed rgba(148,163,184,.7);
}
body[data-theme="dark"] .btn-ghost{background:rgba(15,23,42,0.7);color:var(--muted-dark);}
body[data-theme="light"] .btn-ghost{background:#ffffff;color:var(--muted-light);}
.hero-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:22px;
  font-size:12px;
}
.metric-pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
}
.metric-pill strong{font-size:13px;margin-right:4px;}
.hero-visual.card{overflow:hidden;padding:0;}
.card{
  border-radius:20px;
  overflow:hidden;
  position:relative;
}
body[data-theme="dark"] .card{
  background:radial-gradient(circle at top left,#111827 0%,#020617 55%,#000 100%);
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 18px 60px rgba(15,23,42,0.9);
}
body[data-theme="light"] .card{
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
  box-shadow:0 20px 40px rgba(15,23,42,0.08);
}
.hero-visual img{width:100%;display:block;object-fit:cover;}
.section{margin-top:40px;}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:18px;}
.section-kicker{
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.2em;
  font-weight:600;
}
.section-title{font-size:20px;letter-spacing:-.02em;}
.section-sub{font-size:13px;}
body[data-theme="dark"] .section-sub{color:var(--muted-dark);}
body[data-theme="light"] .section-sub{color:var(--muted-light);}
.service-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.service-card{
  border-radius:16px;
  padding:14px 14px 16px;
  position:relative;
  overflow:hidden;
}
body[data-theme="dark"] .service-card{
  background:radial-gradient(circle at top,#020617 0%,#020617 45%,#000 100%);
  border:1px solid rgba(148,163,184,.35);
}
body[data-theme="light"] .service-card{
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
}
.service-chip{
font-size:11px;
padding:4px 10px;
border-radius:999px;
margin-bottom:8px;
display:inline-block;
background:rgba(10,162,255,.15);
color:var(--accent);
border:1px solid rgba(10,162,255,.35);
}
.service-title{font-size:15px;font-weight:600;margin-bottom:6px;}
.service-body{font-size:13px;}
body[data-theme="dark"] .service-body{color:var(--muted-dark);}
body[data-theme="light"] .service-body{color:var(--muted-light);}
.portfolio-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.portfolio-card{
  border-radius:16px;
  padding:14px;
}
body[data-theme="dark"] .portfolio-card{
  background:radial-gradient(circle at top,#020617 0%,#020617 55%,#000 100%);
  border:1px solid rgba(148,163,184,.35);
}
body[data-theme="light"] .portfolio-card{
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
}
.portfolio-name{font-weight:600;font-size:14px;margin-bottom:4px;}
.portfolio-tag{font-size:11px;text-transform:uppercase;letter-spacing:.16em;opacity:.7;margin-bottom:6px;}
.portfolio-note{font-size:12px;opacity:.8;}
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.testimonial-card{
  border-radius:18px;
  padding:16px 16px 14px;
}
body[data-theme="dark"] .testimonial-card{
  background:rgba(15,23,42,0.9);
  border:1px solid rgba(148,163,184,.4);
}
body[data-theme="light"] .testimonial-card{
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.08);
}
.testimonial-quote{font-size:13px;margin-bottom:8px;}
.testimonial-name{font-size:13px;font-weight:600;}
.testimonial-role{font-size:11px;opacity:.8;}
.contact-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
}
.contact-pill{font-size:13px;margin-bottom:8px;}
.contact-pill span{font-weight:600;}
.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius:12px;
  padding:9px 10px;
  border:1px solid rgba(148,163,184,.5);
  font-size:13px;
  margin-top:4px;
  outline:none;
}
body[data-theme="dark"] .contact-form input,
body[data-theme="dark"] .contact-form textarea{
  background:rgba(15,23,42,0.9);
  color:#e5e7eb;
}
body[data-theme="light"] .contact-form input,
body[data-theme="light"] .contact-form textarea{
  background:#ffffff;
  color:#020617;
}
.contact-form label{font-size:12px;display:block;margin-bottom:10px;}
.footer{
  margin-top:32px;
  padding:20px 0 26px;
  font-size:12px;
  opacity:.72;
  text-align:center;
}
.sticky-cta{
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  z-index:50;
  display:flex;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
}
body[data-theme="dark"] .sticky-cta{
  background:rgba(15,23,42,0.96);
  border:1px solid rgba(148,163,184,.5);
  box-shadow:0 14px 45px rgba(15,23,42,0.9);
}
body[data-theme="light"] .sticky-cta{
  background:#ffffff;
  border:1px solid rgba(15,23,42,0.1);
  box-shadow:0 18px 40px rgba(15,23,42,0.16);
}
.sticky-cta a{
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.6);
}
body[data-theme="dark"] .sticky-cta a{color:#e5e7eb;}
body[data-theme="light"] .sticky-cta a{color:#020617;}
.sticky-cta a.primary{
  border:none;
  background:linear-gradient(120deg,var(--accent),var(--accent-soft));
  color:#020617;
}
.loader-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#020617;
  z-index:70;
  transition:opacity .5s ease,visibility .5s ease;
}
.loader-hidden{opacity:0;visibility:hidden;}
.loader-logo{
  width:72px;
  height:72px;
  border-radius:24px;
  border:1px solid rgba(148,163,184,.4);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  letter-spacing:.2em;
  font-size:11px;
  color:#e5e7eb;
}
.loader-orbit{
  position:absolute;
  width:110px;
  height:110px;
  border-radius:999px;
  border-top:2px solid rgba(56,189,248,1);
  border-right:2px solid transparent;
  border-bottom:2px solid rgba(129,140,248,0.9);
  border-left:2px solid transparent;
  animation:spin 1.1s linear infinite;
}
.reveal{opacity:0;transform:translateY(18px);}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===================== */
/* RESPONSIVE LAYOUT FIX */
/* ===================== */

/* Tablet */
@media (max-width:960px){
  .hero{
    grid-template-columns:minmax(0,1fr);
  }
  .section-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .portfolio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .testimonials-grid{
    grid-template-columns:1fr;
  }
  .contact-layout{
    grid-template-columns:1fr;
  }
}

/* Mobile */
/* Mobile */
@media (max-width:640px){

  /* Force hero single-column layout */
  .hero {
    grid-template-columns: 1fr !important;
    padding: 20px 0 12px;
  }

  /* Hero text padding */
  .hero-title,
  .hero-sub,
  .hero-cta-row,
  .hero-metrics {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Fix hero image spacing */
  .hero-visual {
    margin-top: 20px;
  }

  html, body {
    overflow-x:hidden;
  }

  .container {
    max-width:100%;
    padding:16px;
  }

  /* HEADER + NAV */
  .header {
    flex-wrap:wrap;
    align-items:flex-start;
    gap:8px;
  }

  .logo {
    width:100%;
  }

  .nav {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    font-size:13px;
  }

  .nav a {
    margin:0;
  }

  /* HERO TEXT */
  .hero-title {
    font-size:28px;
    line-height:1.15;
  }

  .hero-sub {
    font-size:14px;
    margin-top:12px;
  }

  .hero-cta-row {
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }

  .btn-primary,
  .btn-ghost {
    width:100%;
    justify-content:center;
  }

  .hero-metrics {
    gap:10px;
    font-size:11px;
  }

  .metric-pill {
    font-size:11px;
  }

  /* GRIDS → 1 COLUMN */
  .service-grid,
  .portfolio-grid {
    grid-template-columns:1fr;
  }

  /* Sticky CTA full width */
  .sticky-cta {
    left:50%;
    transform:translateX(-50%);
    width:94%;
    justify-content:space-between;
  }
}
/* MOBILE MENU BUTTON */
.mobile-menu-btn {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

/* MOBILE NAV BEHAVIOR */
@media (max-width: 640px) {
  .mobile-menu-btn {
    display: block;
  }

  /* Hide nav by default on mobile */
  .nav {
    display: none;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 12px;
  }

  /* When nav is opened */
  .nav.open {
    display: flex;
  }
}
/* Mobile menu button */
.mobile-menu-btn {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  color: var(--muted-dark);
  cursor: pointer;
  padding: 4px 8px;
}

/* Hide nav on mobile initially */
@media (max-width: 640px) {

  .mobile-menu-btn {
    display: block;
  }

  .nav {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 12px;
    padding-top: 10px;
  }

  .nav.nav-open {
    display: flex !important;
  }
}
.btn-primary{
display:inline-block;
padding:14px 28px;
background:#4f7cff;
color:#fff;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:all .3s ease;
}

.btn-primary:hover{
background:#2f5fe0;
transform:translateY(-2px);
}
/* Service list styling for SEO pages */

.section ul{
margin-top:15px;
padding-left:20px;
}

.section ul li{
margin-bottom:8px;
line-height:1.6;
}
/* Scroll reveal animation */

.reveal{
opacity:0;
transform:translateY(20px);
transition:all .6s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

.service-card{
display:block;
text-decoration:none;
color:inherit;
cursor:pointer;
transition:all .35s ease;
}

.service-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,.4);
border-color:#4da3ff;
}

.service-card:hover .service-title{
color:#4da3ff;
}
/* Fix link color inside service cards */

.service-card a{
color:#ffffff;
text-decoration:none;
}

.service-card a:visited{
color:#ffffff;
}

.service-card a:hover{
color:var(--accent);
}

/* Ensure titles stay white */

.service-title{
color:#ffffff !important;
}

/* Hover logo color */

.service-card:hover .service-title{
color:var(--accent) !important;
}
/* ========================= */
/* SEO CONTENT PAGE FIX */
/* ========================= */

.section-header{
display:block;
max-width:780px;
margin-bottom:20px;
}

.section h2{
margin-top:32px;
margin-bottom:10px;
font-size:20px;
}

.section p{
margin-bottom:14px;
line-height:1.7;
max-width:780px;
}

.section ul{
max-width:780px;
}

.section .btn-primary{
margin-top:20px;
}
/* Modern Cursor */