/* =============================== */
/*            VARIABLES            */
/* =============================== */
:root {
  --heading-font: 'Orbitron', sans-serif;
  --body-font: system-ui, -apple-system, Segoe UI, Roboto, 'Inter', sans-serif;

  /* Hero sizes */
  --hero-h1-size: clamp(2.8rem, 4vw, 5rem);
  --hero-sub-size: clamp(1rem, 2vw, 1.5rem);

  /* Testimonials tuning */
  --testi-title-size: 20px;
  --testi-line-gap: 10px;
  --testi-card-gap: 24px;

  /* About text tuning */
  --about-max-width: 900px;
  --about-text-size: clamp(1rem, 2.2vw, 1.15rem);
  --about-line-gap: 14px;

  /* Stars 
  --star-count: 200;
  --star-color: #ffffff;
  --star-glow-color: rgba(255,255,255,0.8);
  --star-size: 2px;
  --star-glow-size: 6px;
  --star-shape: 50%;
  --star-twinkle-duration: 5s; */

  /* Global viewport darkening */
  --page-fade-at: 120vh;       /* starts later */
  --page-fade-strength: 0.5;   /* gentler */
}

/* =============================== */
/*           GLOBAL BASE           */
/* =============================== */
html, body {
  background: #000;
  font-family: var(--body-font);
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  scroll-behavior: smooth;
}

/* Global darkening overlay (disabled by default; enabled via .page-fade) */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,var(--page-fade-strength)) var(--page-fade-at),
    rgba(0,0,0,var(--page-fade-strength)) 100%
  );
  opacity: 0;
  transition: opacity .25s ease;
}
body.page-fade::after { opacity: 1; }

/* =============================== */
/*          BACKGROUND LAYERS      */
/* =============================== */
#starCanvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.star {
  position: absolute; width: var(--star-size); height: var(--star-size);
  background: var(--star-color); border-radius: var(--star-shape);
  box-shadow: 0 0 var(--star-glow-size) var(--star-glow-color);
  opacity: .8; animation: twinkle var(--star-twinkle-duration) ease-in-out infinite alternate;
}
@keyframes twinkle { 0% { opacity:.35; transform:scale(.9);} 100% {opacity:1; transform:scale(1);} }

/* =============================== */
/*             NAVBAR              */
/* =============================== */
.navbar {
  position: fixed; top:10px; left:50%; transform: translateX(-50%);
  display:flex; align-items:center; gap:10px;
  background: rgba(0,0,0,0.35); border-radius:30px; padding:5px 25px;
  box-shadow: 0 0 15px rgba(215,255,248,0.3); z-index: 10;
}
.logo img { width:40px; height:40px; border-radius:50%; box-shadow:0 0 15px rgba(255,255,255,0.15); margin:0 20px; }
.nav-links { display:flex; gap:20px; }
.nav-links a { color:#fff; font-size:1.1rem; text-decoration:none; transition: color .3s, text-shadow .3s; }
.nav-links a:hover { color:#0ff; text-shadow:0 0 10px #0ff; }

/* Hamburger (mobile) */
.nav-toggle { position:absolute; opacity:0; pointer-events:none; }
.hamburger { display:none; width:42px; height:42px; border-radius:10px; background:rgba(0,0,0,0.35);
  box-shadow: inset 0 0 12px rgba(215,255,248,0.25), 0 0 10px rgba(0,200,255,0.25);
  align-items:center; justify-content:center; cursor:pointer; z-index:12;
}
.hamburger span { display:block; width:20px; height:2px; background:#fff; border-radius:2px; margin:3px 0; transition:transform .25s, opacity .25s; }

@media (max-width: 900px) {
  .hamburger { display:inline-flex; }
  .logo img { margin: 0 12px; }
  .nav-links {
    position: fixed; top:0; left:0; right:0; transform: translateY(-110%); transition: transform .3s ease;
    background: rgba(0,0,0,.85); backdrop-filter: blur(14px); border-bottom:1px solid rgba(255,255,255,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.4); padding: 80px 24px 24px;
    display:flex; flex-direction:column; gap:18px; z-index:11;
  }
  .nav-links a { font-size:1.05rem; padding:10px 4px; }
  .nav-toggle:checked ~ .nav-links { transform: translateY(0); }
  .nav-toggle:checked + .hamburger span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  .nav-toggle:checked + .hamburger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked + .hamburger span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }
}

/* =============================== */
/*              HERO               */
/* =============================== */
.hero { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:100vh; }
.content { text-align:center; color:#fff; z-index:3; }
.main-heading {
  font-family: var(--heading-font);
  font-size: var(--hero-h1-size);
  font-weight: 800;
  letter-spacing: .05em;
  margin: 0 0 10px 0;
  text-shadow: 0 0 20px rgba(0,200,255,0.3);
}
.hero p { font-size: var(--hero-sub-size); color:#ddd; margin-bottom:40px; }
.cta-button {
  background: linear-gradient(45deg, #0ff, #f0f);
  color:#000; text-decoration:none; border-radius:50px; padding:12px 30px; font-size:1rem;
  box-shadow:0 0 15px #0ff; transition: transform .3s, box-shadow .3s;
}
.cta-button:hover { transform: scale(1.05); box-shadow:0 0 30px #0ff, 0 0 50px #f0f; }

/* =============================== */
/*    SERVICES / HIGHLIGHTS GRID   */
/* =============================== */
.testimonials-section { position:relative; min-height:60vh; display:flex; justify-content:center; align-items:center; }
.testimonials { display:flex; flex-wrap:wrap; gap:var(--testi-card-gap); justify-content:center; opacity:0; transform: translateY(50px); transition: opacity 1s, transform 1s; }
.testimonial-card {
  width:250px; height:350px; padding:20px; border-radius:20px; color:#fff;
  background: rgba(255,255,255,0.024); backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(82,255,255,0.187);
  text-align:center; transition: transform .3s, box-shadow .3s;
}
.testimonial-card h3 { font-family: var(--heading-font); font-size: var(--testi-title-size); margin:6px 0 10px; }
.testimonial-card p { margin: var(--testi-line-gap) 0; color:#e1e1e1; font-size:15px; padding-top: 5px; }
.testimonial-card:hover { transform: translateY(-10px) scale(1.05); box-shadow:0 0 40px rgba(174,225,255,0.5); }

/* =============================== */
/*               ABOUT             */
/* =============================== */
#about { background: transparent; margin: auto; max-width: 1000px; padding: 80px 20px 40px; text-align: center; }
.services-nav { display:flex; justify-content:center; align-items:center; margin-bottom: 30px; }
.services-nav .dot { width:12px; height:12px; background:#fff; border-radius:50%; margin-right:8px; }
.services-nav .nav-label { color:#ccc; font-size:18px; }

.scroll-wrapper { position: relative; width: 100%; }
.planets-wrapper {
  -webkit-overflow-scrolling: touch;
  display:flex; gap:80px; justify-content:center; align-items:center;
  overflow-x:auto; padding: 20px 60px; scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
.planets-wrapper::-webkit-scrollbar { display:none; }
.planet-thumb { flex:0 0 auto; text-align:center; opacity:.4; transition: opacity .3s; scroll-snap-align:center; cursor:pointer; }
.planet-thumb:hover, .planet-thumb.active { opacity:1; }
.planet-thumb img { width:80px; height:80px; border-radius:50%; object-fit:cover; margin-bottom:8px; transition: transform .3s, box-shadow .3s; }
.planet-thumb:hover img, .planet-thumb.active img { transform: scale(1.2); box-shadow: 0 0 12px rgba(0,200,255,.6); }
.planet-thumb p { color:#888; font-size:14px; }

.planet-main {
  flex:0 0 auto; width: 260px; margin: 0 auto; scroll-snap-align: center;
  color:#00c8ff; text-align:center; transition: transform .5s ease, opacity .5s ease;
}
.planet-visual { animation: float 4s ease-in-out infinite; will-change: transform; }
.planet-main img { width:260px; height:260px; object-fit:contain; animation: slow-spin 120s linear infinite; backface-visibility:hidden; margin-bottom: 20px; }
.planet-main h2 { font-family: var(--heading-font); margin: 0 0 12px; }
.planet-main p  { color:#e1e1e1; font-size: var(--about-text-size); line-height: 1.6; margin: 0; }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes slow-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.scroll-btn {
  position:absolute; top:50%; transform: translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background: rgba(0,200,255,0.2); color:#00c8ff; box-shadow: 0 0 8px #00c8ff;
  animation: glow 1.5s ease-in-out infinite alternate; font-size:20px; z-index:10;
}
.scroll-btn.left{ left:10px; } .scroll-btn.right{ right:10px; }
.scroll-btn:hover{ background: rgba(0,200,255,0.3); }
@keyframes glow { from { box-shadow:0 0 8px #00c8ff; } to { box-shadow:0 0 16px #00c8ff; } }

/* =============================== */
/*            PORTFOLIO            */
/* =============================== */
.wrapper { max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }
.portfolio-section { position:relative; text-align:center; padding-bottom:60px; }
.portfolio-section::before {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: rgba(0,0,0,0.85);
  mask-image: linear-gradient(to top, transparent 0%, black 30%, black 70%, transparent 100%);
}
.portfolio-section > .highlight-box, .portfolio-section > .wrapper { position:relative; z-index:2; }
.highlight-box { display:inline-block; margin:40px auto 20px; padding:15px 30px; color:#fff; font-size:2rem; font-weight:bold; border-radius:10px; backdrop-filter:blur(10px); background: rgba(255,255,255,0.1); box-shadow:0 0 20px rgba(255,255,255,0.2); }

.portfolio { display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); padding:50px 0; }
.item {
  width:100%; padding-top:56.25%; position:relative; overflow:hidden; border-radius:16px; background:#111; box-shadow:0 0 15px rgba(255,255,255,0.1);
  cursor:pointer; opacity:0; transform: translateY(20px); transition: opacity .6s, transform .6s, box-shadow .3s;
  /* Perf: only paint when visible */
  content-visibility: auto; contain-intrinsic-size: 180px 320px;
}
.item.visible { opacity:1; transform: translateY(0); }
.item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:16px; }
.item .play-icon { position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:56px; height:56px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:32px; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.item:hover { transform: perspective(800px) rotateY(8deg) rotateX(4deg) scale(1.05); box-shadow: 0 0 20px rgba(255,255,255,0.2), 0 0 40px rgba(0,150,255,0.3); }
@media (hover: none) and (pointer: coarse) { .item:hover { transform: none; box-shadow: 0 0 15px rgba(255,255,255,0.1); } }

/* =============================== */
/*              POPUP              */
/* =============================== */
.popup-overlay {
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.popup-overlay.active { opacity:1; pointer-events:auto; }
.popup-content { position:relative; margin:0 auto; max-width:92vw; max-height:90vh; background: rgba(0,0,0,0.9); border-radius:16px; padding:16px; animation: pop .3s ease forwards; overflow:auto; }
@keyframes pop { from{ opacity:0; transform: scale(.8);} to{ opacity:1; transform: scale(1);} }
.popup-content img, .popup-content video { display:block; margin:auto; max-width:90vw; max-height:80vh; object-fit:contain; border-radius:12px; opacity:0; transition: opacity .35s; }
.close-btn { position:absolute; right:12px; top:8px; color:#fff; font-size:28px; cursor:pointer; }
body.modal-open { overflow:hidden; }

/* =============================== */
/*              CONTACT            */
/* =============================== */
.contact-section { position:relative; z-index:1; padding:80px 0; }
.contact-section::before, .contact-section::after { content:""; position:absolute; left:0; right:0; z-index:2; pointer-events:none; }
.contact-section::before { top:0; height: 220px; background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); }
.contact-section::after { bottom:0; height: 260px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%); }
.contact-wrap { max-width:1100px; margin:0 auto; padding:0 20px; position:relative; z-index:3; }
.contact-header { display:flex; justify-content:center; align-items:center; margin-bottom:30px; }
.contact-header .dot { width:12px; height:12px; border-radius:50%; background:#fff; margin-right:8px; }
.contact-header .nav-label { color:#ccc; font-size:18px; }
.contact-grid { display:grid; gap:24px; grid-template-columns: 1fr 1fr; }
.contact-card { padding:24px; border-radius:20px; background: rgba(255,255,255,0.024); backdrop-filter: blur(20px); border:1px solid transparent; outline: 1px solid rgba(255,255,255,0.06); box-shadow: 0 0 30px rgba(218,255,255,0.20); }
.info-card .contact-title{ color:#fff; font-size:24px; margin:0 0 8px; }
.info-card .contact-subtitle{ color:#e1e1e1; font-size:15px; margin:0 0 18px; }
.contact-list{ list-style:none; margin:0 0 18px; padding:0; display:grid; gap:10px; }
.contact-list-item{ display:grid; grid-template-columns:120px 1fr; gap:8px; align-items:baseline; }
.contact-list-item .label{ color:#9fcfdc; font-size:14px; }
.contact-list-item .value{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,0.2); }
.contact-list-item .value:hover{ color:#00c8ff; border-bottom-color: rgba(0,200,255,0.5); }
.socials{ display:flex; flex-wrap:wrap; gap:14px; margin-top:6px; }
.social-link{ background: rgba(0,200,255,0.1); color:#00c8ff; border-radius:999px; padding:8px 14px; text-decoration:none; box-shadow:0 0 10px rgba(0,200,255,0.2); transition: transform .2s, box-shadow .2s; }
.social-link:hover{ transform: translateY(-2px); box-shadow:0 0 20px rgba(0,200,255,0.35); }

.form-card .field{ display:flex; flex-direction:column; margin-bottom:14px; margin-right: 30px; }
.form-card label{ color:#e1e1e1; font-size:14px; margin-bottom:6px; }
.form-card input, .form-card textarea{
  width:100%; padding:12px 14px; color:#fff; background: rgba(0,0,0,0.35); border:1px solid rgba(0, 200, 255, 0.25); border-radius:12px;
  outline:none; transition: box-shadow .2s, border-color .2s, background .2s;
}
.form-card input::placeholder, .form-card textarea::placeholder{ color:#7f8c8d; }
.form-card input:focus, .form-card textarea:focus{ background: rgba(0,0,0,0.45); border-color: rgba(0,200,255,0.75); box-shadow: 0 0 0 4px rgba(0,200,255,0.15), 0 0 25px rgba(0,200,255,0.25); }
.field-inline { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.checkbox { display:inline-flex; gap:10px; color:#cdeff7; user-select:none; }
.checkbox input[type="checkbox"] { width:18px; height:18px; accent-color:#00c8ff; }
.error{ color:#ff7b7b; font-size:12px; margin-top:6px; min-height:1em; visibility:hidden; }
.invalid .error{ visibility:visible; }
.contact-submit { width:100%; margin-top:6px; text-transform:none; }
.contact-toast{ position:fixed; left:50%; bottom:24px; transform: translateX(-50%) translateY(20px); opacity:0; pointer-events:none; z-index:20; padding:12px 18px; color:#eaffff; border:1px solid rgba(0,200,255,0.35); border-radius:999px; background: rgba(0,0,0,0.7); box-shadow: 0 0 25px rgba(0,200,255,0.35); transition: opacity .25s, transform .25s; }
.contact-toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* =============================== */
/*           RESPONSIVE            */
/* =============================== */
@media (max-width: 768px){
  #about { padding: 60px 10px 30px; }
  .planets-wrapper { flex-direction: column; gap: 40px; padding: 20px; }
  .planet-main { width: 80%; }
  .planet-main img { max-width: 240px; width: 100%; height: auto; }
}
@media (max-width: 960px){ .contact-grid{ grid-template-columns: 1fr; } }
@media (max-width: 600px){
  .wrapper { padding: 0 10px; }
  .portfolio { gap:12px; padding:30px 0;}
  .item .play-icon { width:48px; height:48px; font-size:28px; }
  .close-btn{ right:10px; top:6px; font-size:24px; }
}