/* Rantarm Tech — minimal, fast, AI vibe */
:root{
  --bg:#0b0b12;
  --bg2:#0e0e1a;
  --fg:#e6e6f7;
  --muted:#a7a7c7;
  --primary:#9400D3;
  --accent:#ff7d3c;
  --card:rgba(255,255,255,0.05);
  --glass:rgba(148,0,211,0.12);
  --border:rgba(255,255,255,0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--fg);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(148,0,211,.25), transparent),
              radial-gradient(800px 400px at 90% 0%, rgba(255,125,60,.25), transparent),
              linear-gradient(180deg,var(--bg),var(--bg2));
  overflow-x:hidden;
}

/* Custom cursor (adjust hotspot 16 16 if your image size differs) */
html, body { cursor: url('./cursor.png') 16 16, auto; }
a, button, .btn, .to-top, nav a { cursor: url('./cursor.png') 16 16, pointer; }
/* Keep I-beam where text editing is needed */
input, textarea { cursor: text; }

#bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}

.container{width:min(1120px,90vw); margin:0 auto; position:relative; z-index:1}

.header{display:flex; align-items:center; justify-content:space-between; padding:18px 0}
.brand{display:flex; gap:14px; align-items:center}
.logo{width:40px; height:40px}
.brand-top{font-weight:800; letter-spacing:.2px}
.brand-sub{font-size:12px; color:var(--muted)}
nav a{color:var(--fg); text-decoration:none; margin-left:18px; font-weight:600; opacity:.9}
nav .cta{padding:10px 14px; border:1px solid var(--border); border-radius:12px}
nav a:hover{opacity:1}

.hero{padding:64px 0 32px 0; text-align:center}
.hero h1{font-size: clamp(32px, 4vw, 56px); line-height:1.05; margin:0 0 12px 0; font-weight:900}
.grad{background: linear-gradient(90deg, var(--primary), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{font-size: clamp(16px,2.2vw,22px); color:#d7d7ef}
.hero-actions{margin:24px 0 8px 0; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border-radius:14px; border:1px solid var(--border); text-decoration:none; color:var(--fg); font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--accent)); border:none}
.btn.ghost{background:transparent}
.badges{display:flex; gap:10px; justify-content:center; list-style:none; padding:0; margin:18px 0 0 0; color:var(--muted); flex-wrap:wrap}
.badges li{border:1px solid var(--border); padding:8px 12px; border-radius:999px; background:var(--card)}

.cards{padding:48px 0 16px 0}
.cards h2{font-size:28px; margin:0 0 18px 0}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
@media (max-width: 720px){ .grid{grid-template-columns:1fr} }
.card{background:linear-gradient(180deg, var(--glass), transparent); border:1px solid var(--border); padding:18px; border-radius:16px; backdrop-filter: blur(8px)}
.card h3{margin:0 0 8px 0}
.card p{margin:0; color:var(--muted)}

.expertise{padding:36px 0}
.expertise h2{font-size:28px; margin:0 0 12px 0}
.expertise-intro{text-align:center; margin-bottom:20px}
.expertise-intro p{color:var(--muted); font-size:16px; max-width:600px; margin:0 auto}
.chips{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px}
.chips span{padding:10px 12px; border-radius:999px; background:var(--card); border:1px solid var(--border); color:#dcdcf6; font-size:14px}
.services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:24px}
@media (max-width:720px){ .services-grid{grid-template-columns:1fr} }
.service-card{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px}
.service-card h3{margin:0 0 8px 0; font-size:16px; color:var(--fg)}
.service-card p{margin:0; color:var(--muted); font-size:14px; line-height:1.4}
.cta-block{margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border:1px dashed var(--border); border-radius:14px; background:rgba(255,255,255,0.03)}
.cta-block p{margin:0; color:#eaeafc}
@media (max-width:720px){ .cta-block{flex-direction:column; align-items:flex-start} }

.stats{padding:18px 0 8px 0}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
@media (max-width:720px){ .grid-3{grid-template-columns:1fr 1fr} }
.stat{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px; text-align:center}
.num{font-size:40px; font-weight:900; letter-spacing:.3px}
.num span{font-size:24px}
.cap{color:var(--muted)}
.note{color:var(--muted); font-size:12px; margin-top:8px; text-align:center}

.work-extras{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0}
@media (max-width:720px){ .work-extras{grid-template-columns:1fr} }
.work-sub{background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px}
.work-sub h3{margin:0 0 8px 0; font-size:18px}
.checklist, .steps{margin:0; padding-left:18px; color:var(--muted)}
.checklist li{margin:6px 0}
.steps li{margin:6px 0}

.clients{padding:32px 0}
.clients h2{font-size:28px; margin:0 0 8px 0; text-align:center}
.clients-desc{text-align:center; color:var(--muted); margin:0 0 24px 0}
.clients-slider{overflow:hidden; position:relative; margin:0 -50px}
.clients-track{
  display:flex; 
  animation:scroll 30s linear infinite;
  gap:40px;
  align-items:center;
}
.client-logo{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:120px;
  height:80px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  transition:transform 0.3s ease;
}
.client-logo:hover{transform:scale(1.05)}
.client-logo img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:grayscale(1) brightness(1.2);
  transition:filter 0.3s ease;
}
.client-logo:hover img{filter:grayscale(0) brightness(1)}

@keyframes scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

@media (max-width:720px){
  .clients-slider{margin:0 -20px}
  .clients-track{gap:20px}
  .client-logo{width:100px; height:60px}
}

.contact{padding:32px 0 48px 0}
.contact-form{display:flex; flex-direction:column; gap:10px; background:var(--card); border:1px solid var(--border); padding:16px; border-radius:16px}
.contact-form .row{display:flex; gap:10px}
.contact-form input, .contact-form textarea{
  width:100%; border:1px solid var(--border); background:rgba(255,255,255,0.02);
  color:var(--fg); padding:12px 12px; border-radius:12px; outline:none
}
.contact-form input:focus, .contact-form textarea:focus{border-color:rgba(148,0,211,.6)}
.alt{margin-top:12px; color:var(--muted)}
.alt a{color:#eaeafc}
.address{margin-top:16px; padding:12px; background:var(--card); border:1px solid var(--border); border-radius:12px}
.address p{margin:0; color:var(--muted); font-size:14px}
.footer{display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--border); padding:16px 0 40px 0; color:var(--muted)}
.to-top{color:var(--muted); text-decoration:none; border:1px solid var(--border); padding:6px 10px; border-radius:10px}