:root{
  --bg:#0A0B0F;
  --bg-2:#12131A;
  --bg-3:#1C1E27;
  --text:#E6E6E6;
  --muted:#B5B7C2;
  --pink:#FF4FD8;
  --violet:#6E5CFF;
  --cyan:#00E5FF;
  --orange:#FF8B3D;
  --glass:rgba(255,255,255,0.08);
  --glass-border:rgba(255,255,255,0.18);
  --shadow:0 30px 80px rgba(0,0,0,0.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;scroll-behavior:smooth}
body{
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(255,79,216,0.25), transparent 60%),
              radial-gradient(900px 700px at 20% -20%, rgba(0,229,255,0.18), transparent 60%),
              linear-gradient(180deg, var(--bg), var(--bg-2) 45%, var(--bg-3));
  color: var(--text);
  overflow-x:hidden;
}

/* Subtle grid */
.bg-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:screen;
  background-image:
    linear-gradient(rgba(110,92,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,92,255,.08) 1px, transparent 1px);
  background-size: 80px 80px;
  transform: translateZ(0);
}

/* Global layout */
.container{width:min(1100px, 92vw); margin:0 auto}
section{padding:120px 0; position:relative}

/* Hero */
.hero{min-height:100vh; display:flex; align-items:center;}
.hero-inner{display:grid; gap:32px; align-items:center}
.hero-title{font-size:clamp(2.8rem, 6vw, 5rem); letter-spacing:0.02em}
.hero-tag{font-size:clamp(1rem, 2vw, 1.4rem); color:var(--muted)}

.hero-orb-wrap{
  width:min(520px, 80vw); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center;
  animation: float 12s ease-in-out infinite;
}
.hero-orb{
  width:100%; height:100%; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.02) 45%, rgba(0,0,0,0) 65%),
              conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,0.6) 12deg, rgba(255,255,255,0) 24deg, rgba(255,255,255,0) 360deg),
              conic-gradient(from 180deg, rgba(255,79,216,0.85), rgba(0,229,255,0.75), rgba(110,92,255,0.95), rgba(255,139,61,0.75), rgba(255,79,216,0.85));
  filter: blur(0.2px);
  box-shadow: inset 0 0 80px rgba(255,255,255,.25), 0 40px 120px rgba(0,0,0,.6);
  position:relative;
  transform: translateZ(0);
  animation: spin 22s linear infinite;
}
.hero-orb::before{
  content:""; position:absolute; inset:-6%; border-radius:50%;
  border:2px solid rgba(255,255,255,0.35);
  border-top-color: rgba(255,255,255,0.95);
  box-shadow:0 0 18px rgba(0,229,255,0.5), 0 0 28px rgba(255,79,216,0.35);
}
.hero-orb::after{
  content:""; position:absolute; inset:18%; border-radius:50%;
  background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.45), rgba(255,255,255,0.02) 60%);
  border:1px solid rgba(255,255,255,0.18);
}

/* Glass card */
.glass{
  background: var(--glass);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius:20px;
  box-shadow: var(--shadow);
}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.card{padding:20px; position:relative; overflow:hidden}
.card h3{font-size:1.1rem; margin-bottom:10px}
.card p{color:var(--muted); font-size:.95rem}
.card::after{content:""; position:absolute; inset:-40%; background: radial-gradient(circle, rgba(255,79,216,.15), transparent 60%); opacity:.6}

/* Section headings */
.section-title{font-size:clamp(1.6rem, 3vw, 2.4rem); margin-bottom:16px}
.section-sub{color:var(--muted); max-width:720px}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.polaroid{padding:18px; transform-style:preserve-3d; transition:transform .6s ease, box-shadow .6s ease}
.polaroid:hover{transform:translateY(-6px) rotateX(4deg) rotateY(-6deg); box-shadow:0 40px 120px rgba(0,0,0,.55)}
.polaroid .thumb{height:180px; border-radius:12px; background:linear-gradient(135deg, rgba(255,79,216,.35), rgba(0,229,255,.25)), radial-gradient(circle at 70% 30%, rgba(255,255,255,.35), transparent 60%); border:1px solid rgba(255,255,255,.2)}
.polaroid .label{margin-top:12px; color:var(--muted); font-size:.9rem}

/* Contact */
.contact-wrap{padding:36px; display:grid; gap:20px}
.form-row{display:grid; gap:14px}
input, textarea{
  background:rgba(10,11,15,.8); color:var(--text); border:1px solid rgba(255,255,255,.15);
  padding:12px 14px; border-radius:12px; font-size:1rem;
}
button{
  background:linear-gradient(135deg, var(--pink), var(--violet)); color:#0A0B0F; border:none;
  padding:12px 18px; border-radius:999px; font-weight:600; cursor:not-allowed; opacity:.7;
}
.small{font-size:.85rem; color:var(--muted)}

/* Reveal */
[data-reveal]{opacity:0; transform:translateY(24px) scale(.98); transition:opacity .7s ease, transform .7s ease}
[data-reveal].in-view{opacity:1; transform:translateY(0) scale(1)}

/* Floating */
.float{animation:float 12s ease-in-out infinite}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Footer */
footer{padding:40px 0 60px; color:var(--muted); text-align:center}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .hero-orb{animation: spin 22s linear infinite !important;}
}