:root{
  --bg:#0b0b0b;--fg:#e8fbe8;--muted:#b7c7b7;--accent:#63ff6e;--card:#111611;--line:#163416;
}
[data-theme="light"]{
  --bg:#f3f4f6;--fg:#202225;--muted:#5b5f66;--accent:#5b5bd6;--card:#ffffff;--line:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--fg)}
.container{width:min(1200px,92%);margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);backdrop-filter:saturate(140%) blur(6px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand-logo{width:36px;height:36px;border-radius:50%;background:#151515 url('../img/ps2.png') center/contain no-repeat;box-shadow:inset 0 0 0 2px #2cff71}
.brand-name{font-weight:800;letter-spacing:.5px;font-family:'Arial Black',Arial,sans-serif;text-transform:uppercase;font-size:1.05rem}
.main-nav{display:flex;align-items:center;gap:16px}
.nav-link{color:var(--fg);text-decoration:none;padding:8px 10px;border:1px solid var(--line);border-radius:999px}
.nav-link:hover{border-color:var(--accent);color:var(--accent)}
.btn{display:inline-block;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.btn-ghost{background:transparent}
.btn-primary{background:linear-gradient(180deg, var(--accent), #27cc4d);border-color:#1e8b38;color:#071b08}
.btn-3d{box-shadow:0 10px 0 rgba(0,0,0,.3);transform:translateY(0);background:linear-gradient(120deg, var(--accent), #2ad6ff 60%, #7b5bff)}
.btn-3d:hover{transform:translateY(-3px);box-shadow:0 14px 0 rgba(0,0,0,.35),0 30px 40px rgba(0,0,0,.28);border-color:var(--accent)}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;text-decoration:none;color:var(--fg)}
.icon-link:hover{border-color:var(--accent);color:var(--accent)}

.hero{padding:120px 0 80px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;text-align:center}
.hero-title{font-size:clamp(36px,6vw,60px);line-height:1.05;margin:0 0 10px}
.hero-title span{color:var(--accent)}
.hero-sub{color:var(--muted);max-width:780px;margin:0 auto}
.tech-cloud{list-style:none;display:grid;grid-template-columns:repeat(12,auto);gap:8px;padding:0;margin:40px 0 0;opacity:.8;justify-content:center}
.tech-cloud li{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:var(--card);animation:float 6s ease-in-out infinite;will-change:transform}
.tech-cloud img{width:20px;height:20px;object-fit:contain;filter:grayscale(.1)}
.tech-cloud li:nth-child(odd){animation-duration:7.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}



/* Add spacing above hero call-to-action */
.hero .btn-primary{margin-top:28px}
@media (max-width:720px){
  .hero .btn-primary{margin-top:18px}
}

.section-head h2{margin:0 0 6px;font-size:clamp(22px,3.2vw,28px)}
.section-head p{color:var(--muted)}
.accent{color:var(--accent)}

.services{padding:60px 0;border-bottom:1px solid var(--line)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:22px}
.cards #social-card{grid-column:2/3}
.cards .card:nth-child(4){grid-column:1/2}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px 22px 78px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease}
.card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 16px 32px rgba(0,0,0,.35);border-color:rgba(99,255,110,.35);background:radial-gradient(1200px 400px at 10% -10%, rgba(99,255,110,.08), transparent 40%), radial-gradient(1200px 400px at 110% 120%, rgba(91,91,214,.08), transparent 40%), var(--card)}
.card-icon{position:absolute;left:-24px;top:28px;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:#0d0d0d center/70% no-repeat;box-shadow:0 0 0 4px rgba(99,255,110,.15)}
.card h3{margin:6px 0 6px;font-size:1.1em}
.card p{color:var(--muted);margin:0 0 10px;font-size:1.05em}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(99,255,110,.14);color:#90ff9b}
[data-theme="light"] .tags span{background:rgba(91,91,214,.14);color:#4d56d6}
.card-img{display:none}

.choose-us{padding:60px 0;border-bottom:1px solid var(--line)}
.choose-us h2{font-size:1.2em}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 18px 26px;display:flex;align-items:center;gap:16px}
.feature-icon{width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:#0d0d0d center/70% no-repeat;box-shadow:0 0 0 4px rgba(99,255,110,.15);flex-shrink:0}
.feature-content{flex:1}
.feature h3{margin:0 0 6px;font-size:1.1em}
.feature p{margin:0;font-size:1.05em}

.expertise{padding:60px 0;border-bottom:1px solid var(--line)}
.expertise h2{font-size:1.2em}
.logo-cloud{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:16px;align-items:center;justify-items:center}
.logo-cloud img{width:72px;height:72px;object-fit:contain;filter:grayscale(1) opacity(.9);background:#0f0f0f20;border-radius:12px;transition:filter .2s,background .2s,transform .2s,box-shadow .2s;transform:scale(.95)}
[data-theme="light"] .logo-cloud img{background:#000000;filter:grayscale(0) contrast(1.15) saturate(1.08);box-shadow:0 0 0 1px #cfd8e3,0 6px 14px rgba(2,6,23,.06)}
.logo-cloud img:hover{filter:grayscale(0);background:rgba(99,255,110,.12);transform:scale(1.08)}
/* (removed centered trio) */

.get-quote{padding:60px 0}
.get-quote h2{font-size:1.2em}
.cta-row{display:flex;gap:12px;justify-content:center;margin:20px 0}
.muted{color:var(--muted)}
.link{color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent)}

.workflow{padding:40px 0 80px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.step{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}
.step-badge{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%, #89ff9b, #1b3a1f);color:#061306;font-weight:700;border:1px solid var(--line)}
.arrow-3d{width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-top:22px solid var(--accent);margin:22px auto;transform-style:preserve-3d;animation:pulse 2.3s infinite ease-in-out}
@keyframes pulse{0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}50%{transform:translateY(12px) rotateX(18deg) rotateY(8deg)}}

.site-footer{border-top:1px solid var(--line);padding:24px 0;color:var(--muted)}
.footer-top{display:flex;align-items:center;justify-content:space-between}
.social{display:inline-flex;gap:8px}

/* Responsive tweaks */
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards #social-card{grid-column:1/-1}
}
@media (max-width:720px){
  .header-inner{padding:10px 0}
  .main-nav{gap:10px;overflow:auto}
  .nav-link{padding:6px 8px}
  .cards{grid-template-columns:1fr}
  .cards #social-card{grid-column:auto}
  .card{padding:18px 18px 18px 70px}
}