/* MainSheet2.css — modernized, dark gradient + glassmorphism */

/* Reset & base */
:root{
  --bg-1: #070712;
  --bg-2: #111226;
  --glass-bg: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.08);
  --accent: rgba(138, 94, 255, 0.95);
  --muted: rgba(200,200,210,0.8);
  --glass-radius: 14px;
  --max-width: 1200px;
}

* { box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);
  color: #e9e9f0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Particle canvas sits behind everything */
.bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  display:block;
  pointer-events:none;
}

/* Header */
.site-header{
  position:fixed;
  top:1.2rem;
  left:0;
  right:0;
  z-index:100;
  display:flex;
  justify-content:center;
  padding:0 1rem;
  pointer-events:auto;
}
.header-inner{
  width:100%;
  max-width:var(--max-width);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

/* Brand / Logo */
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.logo{
  height:75px;
  width:auto;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}

/* Desktop nav */
.nav-desktop{ display:none; }
.nav-desktop ul{
  display:flex; gap:1.25rem; list-style:none; margin:0; padding:0;
}
.nav-desktop a{
  color:var(--muted);
  text-decoration:none;
  font-weight:500;
  padding:.45rem .6rem;
  border-radius:8px;
  transition: all .18s ease;
}
.nav-desktop a:hover,
.nav-desktop a:focus{
  color: #fff;
  transform: translateY(-2px);
  text-shadow: 0 6px 18px rgba(138,94,255,0.08);
}

/* Burger button (mobile) */
.burger{
  width:46px;
  height:36px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:transparent;
  border:1px solid transparent;
  padding:6px;
  cursor:pointer;
  border-radius:8px;
  z-index:110;
}
.burger span{
  display:block;
  height:3px;
  width:100%;
  background: linear-gradient(90deg,#d7d7e0,#b7b7d0);
  border-radius:2px;
  transition: transform .3s ease, opacity .25s ease;
}
.burger.active span:nth-child(1){ transform: translateY(12px) rotate(45deg); }
.burger.active span:nth-child(2){ opacity:0; }
.burger.active span:nth-child(3){ transform: translateY(-12px) rotate(-45deg); }

/* Mobile nav overlay */
.nav-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:105;
  background: linear-gradient(180deg, rgba(10,10,12,0.45), rgba(7,7,12,0.6));
  backdrop-filter: blur(8px);
}
.nav-overlay.open{ display:flex; }
.nav-mobile ul{ list-style:none; padding:0; margin:0; text-align:center; }
.nav-mobile a{
  display:block;
  padding:1rem 1.5rem;
  color:#fff;
  font-size:1.25rem;
  text-decoration:none;
  margin:0.2rem 0;
}

/* Main content container */
.main-content{
  position:relative;
  z-index:2;
  padding:7.5rem 1rem 4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2.5rem;
  max-width:var(--max-width);
  margin:0 auto;
}

/* Glass base helper */
.glass{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: 0 6px 30px rgba(3,6,20,0.55), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(8px) saturate(120%);
  padding:1.6rem;
}

/* Hero */
.hero{
  width:100%;
  display:flex;
  justify-content:center;
}
.hero-card{
  width:100%;
  text-align:center;
  padding:2.25rem;
  transition: transform .5s cubic-bezier(.2,.9,.2,1), opacity .6s ease;
}
.site-title{
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  margin:0;
  letter-spacing:1px;
  color: #ffffff;
  text-shadow: 0 6px 26px rgba(138,94,255,0.06);
  font-weight:700;
}
.tagline{
  margin:.6rem 0 1rem;
  color:var(--muted);
  font-weight:300;
  font-size:clamp(0.95rem, 2.2vw, 1.05rem);
}

/* CTA row */
.cta-row{ display:flex; gap:0.85rem; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:.6rem; }
.cta-btn{
  display:inline-block;
  text-decoration:none;
  padding:.7rem 1rem;
  border-radius:10px;
  background: linear-gradient(90deg, rgba(138,94,255,0.95), rgba(110,96,255,0.85));
  color:white;
  font-weight:600;
  box-shadow: 0 8px 30px rgba(138,94,255,0.18);
  transition: transform .14s ease, box-shadow .14s ease;
}
.cta-btn:hover{ transform: translateY(-3px); box-shadow: 0 14px 40px rgba(138,94,255,0.22); }

.cta-link{
  color:var(--muted);
  text-decoration:none;
  align-self:center;
  padding:.45rem .6rem;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.03);
  transition: color .15s ease;
}
.cta-link:hover{ color:#fff; }

/* Services section */
.services{
  width:100%;
  padding:0 0 1rem;
}
.services-card{ padding:1.6rem; }
.services-card h2{
  margin:0 0 .9rem 0;
  font-weight:600;
  font-size:1.25rem;
  color:#fff;
}

/* Grid */
.service-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:1.1rem;
  margin-top:1rem;
}
.service{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:.9rem;
  border-radius:12px;
  transition: transform .18s ease, box-shadow .18s ease;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  cursor:default;
}
.service img{
  width:64px;
  height:auto;
  object-fit:contain;
  flex-shrink:0;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55));
}
.service h3{
  margin:0;
  font-size:1rem;
  color:#f2f2ff;
  font-weight:500;
}
.service:hover{
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 12px 40px rgba(12,12,30,0.6);
}

/* Footer */
.site-footer{
  width:100%;
  display:flex;
  justify-content:center;
  padding:2rem 1rem 3rem;
  z-index:2;
}
.footer-inner{
  width:100%;
  max-width:var(--max-width);
  text-align:center;
  padding:.9rem 1rem;
  font-size:.95rem;
  color:var(--muted);
}

/* Responsive breakpoints */
@media(min-width:800px){
  .nav-desktop{ display:block; }
  .burger{ display:none; }

  .service-grid{ grid-template-columns: repeat(3, 1fr); gap:1.25rem; }
  .hero-card{ padding:3rem 3.5rem; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:.6rem; }
  .main-content{ align-items:stretch; padding-top:16.5rem; }
  .brand .logo{ height:144px; }

  .nav-desktop a{ font-size:1rem; }
}

@media(min-width:1200px){
  .hero-card{ padding:3.5rem; }
  .site-title{ font-size:3.6rem; }
}

/* small enhancements to ensure visibility on very small screens */
@media(max-width:420px){
  .logo{ height:48px; }
  .service img{ width:52px; }
  .site-title{ font-size:1.9rem; }
}