:root{
  --black:#050505;
  --white:#ffffff;
  --purple:#8b5cf6;
  --indigo:#4f46e5;
  --deepblue:#0f172a;

  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.15);

  --radius:14px;
  --transition: all 0.35s cubic-bezier(.4,0,.2,1);
  --max-width:1100px;

  font-family: Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}

body {
    background: radial-gradient(
            circle at 20% 30%,
            rgba(75, 0, 130, 0.5),
            transparent 40%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(0, 0, 120, 0.5),
            transparent 40%
        ),
        #050505;

    color: #f2f2f2; /* Soft white instead of pure white */
    margin: 0;
}




/* =========================
   LAYOUT STRUCTURE (FIXED)
========================= */

.container{
  width:92%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:1rem 0;
}

/* =========================
   HEADER
========================= */

.site-header{
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(20px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky;
  top:0;
  z-index:100;
  padding: 1px 0;
  line-height: 1;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
  text-decoration:none;
  color:white;
}

.brand-logo{
  width:69px;
  height:69px;
  object-fit:contain;
}

.brand-text {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin: 0;
  line-height: 1;
}

.nav{
  display:flex;
}

.nav-list{
  list-style:none;
  display:flex;
  gap:1.5rem;
  margin:0;
  padding:0;
}

.nav-list a{
  color:white;
  text-decoration:none;
  transition:var(--transition);
}

.nav-list a:hover{
  color:var(--purple);
  text-shadow:0 0 10px var(--purple);
}

/* hide hamburger on desktop */
.nav-toggle{
  display:none;
}

/* =========================
   HERO
========================= */

.hero{
  padding:4rem 0;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:center;
}

.hero h1{
  font-size:3rem;
  margin:0 0 1rem;
}

.hero .lead{
  color:#ccc;
  margin-bottom:1.5rem;
}

.hero-art{
  max-width:600px;
  width:100%;
  border-radius:var(--radius);
}

.hero-art {
  width: 100%;
  height: auto;
}

/* =========================
   GLASS EFFECT
========================= */

.glass,
.card,
.feature,
.product-card,
.newsletter-card,
.contact-form{
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  padding:1.5rem;
  transition:var(--transition);
}

.feature:hover,
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 0 30px rgba(139,92,246,0.5);
}

/* =========================
   METAL SHIMMER TEXT
========================= */

.metal-text{
  background: linear-gradient(
    120deg,
    #aaa 0%,
    #fff 25%,
    #bbb 40%,
    #fff 55%,
    #999 75%
  );
  background-size:200% auto;
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  animation:shimmer 6s linear infinite;
}

@keyframes shimmer{
  0%{background-position:0% center;}
  100%{background-position:200% center;}
}

/* =========================
   BUTTONS
========================= */

.btn{
  display:inline-block;
  padding:0.7rem 1.2rem;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.1);
  transition:var(--transition);
}

.btn-primary{
  background:linear-gradient(135deg,var(--purple),var(--indigo));
  color:white;
  box-shadow:0 0 15px rgba(139,92,246,0.5);
}

.btn-primary:hover{
  box-shadow:0 0 30px rgba(139,92,246,0.9);
  transform:translateY(-2px);
}

.btn-ghost{
  background:rgba(255,255,255,0.05);
  color:white;
}

.btn-ghost:hover{
  box-shadow:0 0 20px rgba(139,92,246,0.6);
}

/* =========================
   FORMS
========================= */

input, textarea{
  width:100%;
  padding:0.8rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.05);
  color:white;
  margin-top:0.4rem;
}

input:focus, textarea:focus{
  outline:none;
  border-color:var(--purple);
  box-shadow:0 0 15px rgba(139,92,246,0.6);
}

.input-error{
  border-color:#ff4d4d !important;
}

.error-message{
  color:#ff6b6b;
  font-size:0.85rem;
  margin-top:4px;
}

/* =========================
   PRODUCT GRID
========================= */

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem;
  margin-top:2rem;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:900px){

  .hero-grid{
    grid-template-columns:1fr;
    text-align:center;
  }

  .hero-art{
    margin:0 auto;
  }

  .nav{
    display:none;
  }

  .nav-toggle{
    display:block;
    background:none;
    border:none;
    color:white;
  }
}

@media (max-width: 768px) {

  .header-inner {
    flex-wrap: wrap;
    .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
  }

  .nav {
    display: none;
    width: 100%;
  }

  .nav.nav-open {
    display: block;
  }

  .nav-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 1rem 0;
    margin: 0;
  }

  .nav-list li {
    width: 100%;
    text-align: right;
    padding: 0.5rem 0;
  }

}



.cursor-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 0;

    background: radial-gradient(
        circle,
        rgba(120, 0, 255, 0.18) 0%,
        rgba(120, 0, 255, 0.12) 25%,
        rgba(120, 0, 255, 0.07) 45%,
        rgba(120, 0, 255, 0.03) 60%,
        rgba(120, 0, 255, 0.01) 75%,
        transparent 85%
    );

    mix-blend-mode: screen;
    transition: opacity 0.2s ease;
}

.site-footer {
    margin-top: 120px;
    padding: 60px 10% 30px 10%;
    background: #0b0b12;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-brand {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #ffffff;
}

.footer-tagline {
    color: #9a9a9a;
    font-size: 0.9rem;
}

.footer-right {
    display: flex;
    gap: 30px;
}

.footer-right a {
    text-decoration: none;
    color: #cfcfcf;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-right a:hover {
    color: #a855f7; /* subtle purple */
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: #777;
}