:root{
  --bg:#0b0f14;
  --slate-50:#f8fafc;
  --slate-100:#e2e8f0;
  --slate-200:#cbd5e1;
  --slate-300:#94a3b8;
  --slate-400:#64748b;
  --slate-700:#334155;
  --slate-800:#1f2937;
  --slate-900:#0f172a;
  --card-bg:rgba(2,6,23,0.6);
  --border:rgba(30,41,59,0.8);
  --ring:rgba(255,255,255,0.05);
  --cyan: #22d3ee;
  --cyan-weak: rgba(34,211,238,0.35);
  --cyan-10: rgba(34,211,238,0.10);
  --cyan-12: rgba(34,211,238,0.12);
  --pink: #f472b6;
  --pink-10: rgba(244,114,182,0.10);
  --pink-18: rgba(244,114,182,0.18);
  --shadow-sm: 0 0 0 1px rgba(34,211,238,0.05);
  --shadow-glow-cyan: 0 0 30px rgba(34,211,238,0.15);
  --shadow-glow-cyan-strong: 0 0 30px rgba(34,211,238,0.35);
  --shadow-glow-pink: 0 0 28px rgba(244,114,182,0.18);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body.holiprojects-wrapper{
  margin:0;
  background:var(--bg);
  color:#e5e7eb;
  -webkit-font-smoothing:antialiased;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
.page{position:relative;min-height:100vh}

/* Containers & layout helpers */
.container{width:100%;max-width:64rem;margin-inline:auto;padding-inline:1rem}
.section{margin-top:5rem; margin-bottom: 5rem;}
.pt-hero{padding-top:6rem}
@media (min-width:768px){.pt-hero{padding-top:7rem}}
.ta-center{text-align:center; }
.mw-xl{max-width:40rem;margin-inline:auto}
.pad-lg{padding:2rem}
.row{display:flex;gap:0.75rem;align-items:flex-start; width: 400px;}
.lead{color:var(--slate-400);margin-top:0.5rem}

/* Neon Background */
.neon-bg{position:fixed;inset:0;pointer-events:none;z-index:-10;overflow:hidden}
.neon-bg__radials{
  position:absolute;inset:0;
  background:
    radial-gradient(60rem 60rem at 80% -10%, var(--cyan-12), transparent 60%),
    radial-gradient(50rem 50rem at 10% 120%, var(--pink-10), transparent 60%),
    var(--bg);
}
.neon-bg__grid{
  position:absolute;inset:0;opacity:.25;
  background-image:
    repeating-linear-gradient(to right, rgba(34,211,238,0.10) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom, rgba(34,211,238,0.08) 0 1px, transparent 1px 120px);
  -webkit-mask-image: radial-gradient(1200px 600px at 50% 40%, black, transparent 80%);
  mask-image: radial-gradient(1200px 600px at 50% 40%, black, transparent 80%);
}

/* Typography */
.h2{font-size:1.5rem;font-weight:600;color:#e2e8f0;margin:0}
@media (min-width:768px){.h2{font-size:1.875rem}}
.h3{font-size:1.125rem;font-weight:600;color:#e5e7eb;margin:0}
.small{font-size:.875rem}
.muted{color:var(--slate-400)}
.c-cyan{color:var(--cyan); text-decoration: none;}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.pill{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.75rem;color:#67e8f9;background:var(--cyan-10);
  border:1px solid rgba(34,211,238,0.3);
  padding:.25rem .6rem;border-radius:999px
}
.hero__title{
  margin:1.5rem 0 0 0;
  font-size:1.875rem;font-weight:700;letter-spacing:-0.01em;color:#f1f5f9
}
@media (min-width:768px){.hero__title{font-size:3rem}}
.hero__subtitle{margin-top:.75rem;font-size:1rem;color:#cbd5e1}
@media (min-width:768px){.hero__subtitle{font-size:1.125rem}}
.hero__tagline{margin-top:.5rem;font-size:.9rem;color:var(--slate-400)}
.hero__cta{display:flex;gap:.75rem;justify-content:center;margin-top:2rem}

/* Buttons */
.btn{
  display:inline-flex;justify-content:center;align-items:center;gap:.5rem;
  border-radius:.5rem;padding:.7rem 1rem;font-weight:600;text-decoration:none;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease
}
.btn--block{width:100%}
.btn--primary{
  background:var(--cyan);color:#0b1220;border:1px solid transparent;box-shadow:var(--shadow-sm)
}
.btn--primary:hover{background:#67e8f9;box-shadow:var(--shadow-glow-cyan-strong)}
.btn--outline{
  background:transparent;color:#e5e7eb;border:1px solid rgba(51,65,85,.8)
}
.btn--outline:hover{color:#a5f3fc;border-color:rgba(34,211,238,0.6);background:var(--cyan-10)}

/* Cards */
.card{
  position:relative;border-radius:.75rem;
  background:var(--card-bg);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  padding: 1rem;
}
.card--glow{outline:1px solid rgba(255,255,255,0.04)}
.card--hover{transition:transform .2s ease, box-shadow .2s ease}
.card--hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-glow-cyan)}
.card--pink.card--hover:hover{box-shadow:var(--shadow-glow-pink)}

/* Chips (icon boxes) */
.chip{
  display:flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;border-radius:.5rem;
  background:var(--card-bg);border:1px solid var(--border);color:#67e8f9
}
.chip--pink{color:#f9a8d4}

/* Icons */
.icon{width:1.5rem;height:1.5rem}
.icon--xs{width:0.9rem;height:0.9rem}
.icon--accent{color:#67e8f9}
.icon--pink{color:#f9a8d4}

/* About layout */
.about{display:grid;gap:1.25rem;align-items:start}
@media (min-width:768px){
  .about{grid-template-columns:1.2fr .8fr;gap:2.5rem}
  .about__icons{justify-self:end}
}
.about__icons{display:flex;gap:1rem}

/* Features grid */
.features{
  margin-top:2rem;
  display:grid;grid-template-columns:1fr;gap:1.25rem
}
@media (min-width:768px){.features{grid-template-columns:repeat(2,1fr)}}
.feature__row{display:flex;gap:1rem;align-items:flex-start;padding:1.25rem}

/* Contact layout */
/* Section Styling */
.contact {
  padding: 6rem 2rem;
  background: radial-gradient(circle at top, #0d0d0f, #09090c);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 224, 255, 0.2), transparent 70%);
  top: -200px;
  left: -200px;
  filter: blur(100px);
  animation: float 8s infinite alternate ease-in-out;
}

.contact::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 0, 119, 0.2), transparent 70%);
  bottom: -200px;
  right: -200px;
  filter: blur(100px);
  animation: float 10s infinite alternate-reverse ease-in-out;
}

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(40px); }
}

/* Header */
.contact-header h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  background:linear-gradient(90deg, #00e0ff, #ff0077);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-header p {
  color: #aaa;
  font-size: 1.1rem;
  margin-bottom: 3.5rem;
}

/* Grid */
  .contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    max-width: 1100px;
    margin: auto;
  }

/* Card */
.contact-card {
  position: relative;
  padding: 3rem 2rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  box-shadow: 0 0 20px rgba(0, 224, 255, 0.05);
  transition: all 0.4s ease;
  overflow: hidden;
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 2px;
  background: linear-gradient(90deg, #676dac, #7a5a9f);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, 
                 linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none; 
}

.contact-card:hover::before {
  opacity: 1;
}

.contact-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 0 30px rgba(33, 156, 54, 0.15);
  border: none;
}


/* Text */
.contact-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
}
.contact-card a {
  text-decoration: none;
}

.contact-card a {
  font-size: 1rem;
  color: #00e0ff;
  display: inline-block;
  margin-top: 0.3rem;
  transition: 0.3s;
  word-break: break-word;
}

.contact-card a:hover {
  color: #ff0077;
}

/* Footer */
.footer{margin-top:5rem;border-top:1px solid rgba(30,41,59,0.7);padding:2rem 0}
.footer__inner{display:flex;flex-direction:column;gap:1rem;align-items:center}
@media (min-width:768px){
  .footer__inner{flex-direction:row;justify-content:space-between}
}
.footer__nav{display:flex;gap:1.25rem}
.footer__link{text-decoration:none}
.footer__link:hover{color:#a5f3fc}

/* Reveal animations (Framer Motion replacement) */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.reveal--visible{
  opacity:1; transform:translateY(0)
}
/* Stagger per-item */
[data-reveal-delay]{transition-delay: calc(var(--delay, 0ms) * 1ms)}
.feature.reveal{transform:translateY(16px)}

/* Button disabled style */
button:disabled{opacity:.7;cursor:not-allowed}
/* Holographic text effect */ .hero h1 { background: linear-gradient(90deg, #22d3ee, #f472b6, #22d3ee); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: holoGlow 5s linear infinite; } @keyframes holoGlow { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
/* Hero Particles Canvas */
#heroParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: -1; /* behind hero content */
  pointer-events: none;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridMove 15s linear infinite;
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 40px 40px; }
}