/* Minimal, modern dark theme */
:root{
  --bg:#0b0b0b;
  --panel:#121316;
  --muted:#9aa3ad;
  --text:#e9eef3;
  --brand:#22c55e;   /* green */
  --brand-2:#ef4444; /* red */
  --accent:#60a5fa;  /* blue */
  --card:#14161a;
  --border:#1e2227;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{position:sticky;top:0;background:rgba(11,11,11,.9);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--border);z-index:100}
.site-header .container{display:flex;align-items:center;gap:24px;justify-content:space-between;padding:14px 20px;position:relative}
.logo-name{display:flex;align-items:center;gap:12px}
.logo-name .logo{height:56px;width:auto}
.brand .tagline{color:#ff6b6b;font-weight:700;letter-spacing:.2px}

/* Company name gradient + shimmer */
.company-name {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  white-space: nowrap;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0.25)),
    linear-gradient(to right, #21c950 0%, #21c950 77%, #60a5fa 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 4px rgba(33,201,80,0.25);
  transition: background-position 1s ease;
}
.company-name:hover {
  background-position: right center;
  animation: shimmer 2.5s ease-in-out infinite alternate;
}
@keyframes shimmer {
  0% { background-position: left center; }
  100% { background-position: right center; }
}

/* Tagline gradient + shimmer */
.tagline {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 4px;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(0,0,0,0.35)),
    linear-gradient(to right, #42ec80 0%, #60a5fa 100%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0.9;
  letter-spacing: 0.4px;
  transition: background-position 1.5s ease;
}
.tagline:hover {
  background-position: right center;
  animation: shimmer-tag 4s ease-in-out infinite alternate;
}
@keyframes shimmer-tag {
  0% { background-position: left center; }
  100% { background-position: right center; }
}

.nav{display:flex;gap:18px;align-items:center}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);color:#0a0a0a;border-color:#0a0a0a;font-weight:700}
.btn-secondary{border-color:var(--border)}

/* Hero and sections */
.hero{padding:64px 0;background:radial-gradient(1200px 500px at 10% 10%,rgba(34,197,94,.15),transparent)}
.hero h1{font-size: clamp(28px, 4vw, 44px);margin:0 0 12px}
.hero p{max-width:780px;color:var(--muted);margin:0 0 24px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.section{padding:56px 0}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);border:1px solid var(--border);padding:20px;border-radius:16px}
.card h3{margin:0 0 8px}

/* Contact */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
.contact-details ul{list-style:none;padding:0;margin:0 0 12px}
.contact-details li{margin:6px 0}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{background:#0f172a;border:1px solid var(--border);padding:6px 10px;border-radius:999px;font-size:12px;color:#93c5fd}
.contact-form{background:var(--panel);border:1px solid var(--border);padding:16px;border-radius:16px}
.contact-form label{display:block;font-size:14px;margin:10px 0}
.contact-form input,.contact-form textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--border);background:#0d0f12;color:var(--text)}
.contact-form .form-note{font-size:12px;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:22px 0;color:var(--muted);text-align:center}

/* --- Mobile-first enhancements --- */
.hero h1 { font-size: clamp(24px, 6vw, 44px); }
.hero p { font-size: clamp(14px, 3.6vw, 18px); }
.hero { padding: 48px 0; }
.section { padding: 44px 0; }
.btn { padding: 12px 18px; }

.nav-toggle{
  display:none;
  width:42px;height:36px;
  border:1px solid var(--border);
  background:var(--card); border-radius:10px;
  align-items:center; justify-content:center; gap:4px;
  cursor:pointer;
}
.nav-toggle span{
  display:block; width:22px; height:2px; background:var(--text);
}

@media (max-width: 860px){
  .company-name{
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 55vw;
  }
}

/* default (desktop) remains as-is */

@media (max-width: 640px){
  .grid-3{ 
    grid-template-columns: 1fr; 
    gap: 14px;
  }
  .grid-3 .card{
    width: 100%;
  }
}

@media (max-width: 640px){
  .contact{
    grid-template-columns: 1fr;   /* stacked rows */
    row-gap: 16px;
  }
}

/* Phone/tablet layout */
@media (max-width: 640px){
  /* show tagline on mobile (small) */
  .brand .tagline{
    display: block;
    font-size: 0.82rem;
    opacity: 0.9;
    margin-top: 2px;
  }

  /* allow the name to wrap and not push things off-screen */
  .logo-name { flex-wrap: wrap; }
  .company-name{
    white-space: normal;         /* allow wrapping */
    overflow-wrap: anywhere;     /* break long words if needed */
    line-height: 1.15;
    max-width: 70vw;             /* keep it from colliding with the button */
  }

  /* put the hamburger in the top-right, always visible */
  .nav-toggle{
    display:flex;
    position:absolute;
    top: 10px;
    right: 12px;
    z-index: 120;
  }

  /* slide-down menu anchored to the top-right; no off-canvas shift */
  .nav{
    position:absolute;
    top: 56px;
    right: 12px;
    left: auto;                  /* remove the old left:12px so it’s not too wide */
    width: min(78vw, 300px);
    display:block;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:8px;
    transform-origin: top right;
    transform: scaleY(0);
    opacity:0; pointer-events:none;
    transition: transform .18s ease, opacity .18s ease;
    z-index:110;
  }
  .nav.open{
    transform: scaleY(1);
    opacity:1; pointer-events:auto;
  }
  .nav a, .nav .btn{
    display:block;
    padding:12px 10px;
    border-radius:10px;
    margin:4px 0;
    text-align:center;
  }

  /* tighten hero spacing a bit on phones */
  .hero{ padding: 32px 0; }
}

@media (max-width: 480px){
  .contact-form input, .contact-form textarea { padding:12px; font-size:16px; }
  .btn-primary, .btn { padding:12px 16px; }
}

/* Floating Call Button (mobile-only) */
.call-fab{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0));
  display: none; /* hidden by default; shown on mobile below */
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  color: #0a0a0a;
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.15), rgba(0,0,0,0.2)),
    linear-gradient(90deg, #21c950 0%, #21c950 77%, #60a5fa 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 0 1px rgba(30,34,39,0.6) inset;
  z-index: 50; /* above mobile nav */
  border: none;
}
.call-fab:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.call-fab:active{
  transform: translateY(0);
}

@media (max-width: 640px){
  .call-fab{ display: inline-flex; }
}