:root{
  --bg:#0f1216; --text:#e6eaf0; --muted:#a8b0bd; --border:#232a34;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Tahoma,Arial;background:#111;color:#fff;position:relative;min-height:100vh;}

header{background:#000;color:#fff;padding:10px 40px;position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border)}
header .bar{display:flex;justify-content:space-between;align-items:center}
.logo a{color:#fff;text-decoration:none;font-size:24px;font-weight:800;letter-spacing:.2px}

nav .hamburger{display:none}
nav ul.nav-links{display:flex;gap:16px;list-style:none;margin:0;padding:0}
nav ul.nav-links li a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:10px;transition:transform .25s ease,text-shadow .25s ease,color .25s}
nav ul.nav-links li a:hover{transform:scale(1.08);text-shadow:0 2px 12px rgba(138,180,255,.6);color:#00c3ff}

.hero{position:relative;height:100vh;background:url('hero.jpg') top center/cover no-repeat}
.about-hero{position:relative;min-height:100vh;background:url('about.jpg') center/cover no-repeat}
.page-background{min-height:100vh;background:url('background.jpg') center center/cover no-repeat;padding:60px 20px;position:relative;}
.page-background h2{text-align:center;margin:0 0 10px 0}

.quote-box{
  position:absolute;
  left:6%;
  bottom:38%;
  max-width:800px;
  background:rgba(0,0,0,.45);
  color:#fff;
  padding:16px 20px;
  border-radius:10px;
  font-size:18px;
  line-height:1.6;
  opacity:0;
  animation:fadeInUp 1.1s ease-out .15s forwards;
}
.quote-box .by{display:block;margin-top:6px;font-size:16px;color:#d0d5df}

.quote-text{font-size:20px;line-height:1.6;text-align:center;margin-top:20px}

.shiny-text {
  font-size: 2.5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #00c3ff;
  background: linear-gradient(90deg, transparent, #00c3ff, transparent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: shine 6s linear infinite;
  display: inline-block;
  margin-top: 10px;
  text-shadow: 0 0 8px rgba(0, 195, 255, 0.6),
               0 0 15px rgba(0, 195, 255, 0.4);
}

@keyframes shine {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}

.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:1100px;margin:20px auto;padding:0 20px}
.video-grid video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;box-shadow:0 6px 14px rgba(0,0,0,.35);transition:transform .25s ease}
.video-grid video:hover{transform:scale(1.03)}

.contact-icons{display:flex;gap:30px;justify-content:center;margin:20px 0 40px}
.contact-icons a{font-size:3.5rem;color:#fff;transition:transform .3s,color .3s}
.contact-icons a:hover{transform:scale(1.2);color:#00c3ff}

footer{border-top:1px solid var(--border);text-align:center;padding:16px 0;margin-top:20px}

@keyframes fadeInUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.mobile-only { display:none; }

/* ====================== Mobile ====================== */
@media (max-width:768px){
  nav .hamburger{display:block;font-size:28px;cursor:pointer;color:#fff;padding:6px 10px;border-radius:8px;}
  nav ul.nav-links{
    position:fixed;top:0;left:-100%;width:65%;height:100vh;
    background:rgba(0,0,0,0.9);
    flex-direction:column;padding:70px 20px;gap:18px;
    transition:left .6s ease;box-shadow:2px 0 18px rgba(0,0,0,.55);
  }
  nav ul.nav-links.show{left:0}
  nav ul.nav-links li a{font-size:18px}
  .mobile-only{display:block;}
  .menu-logo{font-size:22px;font-weight:700;color:#00c3ff;margin-bottom:20px;display:inline-block;}

  .about-hero .quote-box{ bottom:15% !important; }

  .hero .quote-box{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  .quote-box{
    position: relative !important;
    inset: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
    max-width: 90% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }

  .hero{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    height:100vh;
    padding-bottom:25vh;
  }
}