:root{
  --bg:#000000;              /* true black backdrop for snow */
  --text:#eaeaf7;            /* near-white text */
  --muted:#b7b7c7;           /* soft gray */
  --brand-1:#7c3aed;         /* purple */
  --brand-2:#a78bfa;         /* light purple */
  --accent:#8122ee;          /* cyan pop */
  --ring:0 0 0 8px rgba(124,58,237,.18);
  --radius:16px;
  --shadow: 0 12px 32px rgba(0,0,0,.45);
}




/* Smooth scroll */
html { scroll-behavior: smooth; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
  min-height:100vh;
}
img{max-width:100%;display:block;border-radius:12px}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto}




/* Subtle purple gradient glow layer */
.gradient-bg{position:fixed;inset:0;z-index:0;pointer-events:none;}
.gradient-bg::before{
  content:""; position:absolute; inset:-20%; filter:blur(80px);
  background:
    radial-gradient(60vw 50vh at 20% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(50vw 40vh at 80% 0%, rgba(167,139,250,.16), transparent 60%),
    radial-gradient(70vw 60vh at 50% 120%, rgba(34,211,238,.10), transparent 60%);
}




/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.5);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.2px}
.logo .dot{color:var(--brand-2)}
.nav{display:flex;gap:20px;align-items:center}



/* Hero */
.hero{position:relative;isolation:isolate;padding:110px 0 80px;}
.hero-grid{display:grid;gap:28px;grid-template-columns:1.2fr 1fr;align-items:center}
.hero h1{font-size:clamp(2rem,6vw,3.8rem);line-height:1.05;margin:0 0 10px}
.lead{color:var(--muted);max-width:60ch}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}



/* Sections / cards */
section.section{position:relative;z-index:1;padding:70px 0}
.section-title{font-size:clamp(1.3rem,3.6vw,2rem);margin:0 0 26px;text-align:center}

.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);padding:18px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card h3{margin:0 0 6px}
.kvs{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.kv{border:1px solid rgba(167,139,250,.4);background:rgba(124,58,237,.18);padding:6px 10px;border-radius:10px;font-size:.85rem}




/* Pricing */
.pricing{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:stretch}
.price{position:relative}
.ribbon{position:absolute;top:12px;right:-8px;background:linear-gradient(90deg,var(--brand-1),var(--brand-2));color:#0b1020;padding:6px 12px;border-radius:12px;font-weight:900}
.tag{font-size:2.3rem;font-weight:900}
.note{color:var(--muted);font-size:.95rem}




/* Buttons + hover */
.btn{
  display:inline-block;
  padding:.85rem 1.1rem;
  border-radius:12px;
  background:linear-gradient(90deg,var(--brand-1),var(--brand-2));
  color:#0b1020;
  font-weight:900;
  border:0;
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
  transition: all 0.25s ease;
}
.btn:hover{
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(124,58,237,.6),
              0 0 40px rgba(167,139,250,.5);
}
.btn.ghost{background:transparent;border:1px solid #ffffff29;color:var(--text);box-shadow:none}
.btn.ghost:hover{box-shadow:0 0 12px rgba(167,139,250,.4) inset, 0 0 16px rgba(124,58,237,.35)}

/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.08);padding:24px 0;margin-top:30px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* Snowflakes */
.snowflake{position:fixed;top:-12px;color:#731ac5;opacity:.95;font-size:1em;user-select:none;pointer-events:none;animation-name:fall;animation-timing-function:linear}
@keyframes fall{to{transform:translateY(110vh)}}

/* Badges */
.pill{display:inline-flex;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.18);padding:6px 10px;border-radius:999px;font-size:.85rem}

/* Responsive */
@media (max-width: 920px){
  .hero-grid{grid-template-columns:1fr}
}

.socials {
  display: flex;
  gap: 14px;
}

.socials a {
  color: var(--text);
  font-size: 1.2rem;
  transition: color .25s ease, transform .25s ease;
}

.socials a:hover {
  color: var(--brand-2);
  transform: scale(1.2);
}

/* Particle canvas background */
#particles-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -9999;
  pointer-events: none;
  display: block;
}

/* Portfolio (2 items) */
.portfolio-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 720px){
  .portfolio-grid{ grid-template-columns: 1fr; }
}
.project{display:flex; flex-direction:column; overflow:hidden}
.project-thumb{position:relative; display:block; border-radius:12px; overflow:hidden}
.project-thumb img{width:100%; height:260px; object-fit:cover}
.thumb-overlay{
  position:absolute; inset:auto 10px 10px auto;
  background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.18);
  padding:6px 10px; border-radius:999px; font-size:.9rem; opacity:0; transition:.2s ease
}
.project-thumb:hover .thumb-overlay{opacity:1}
.project-meta{margin-top:12px}
.project-meta h3{margin:0 0 6px}
.muted{color:var(--muted)}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.8);
  display:grid; place-items:center; z-index:1000;
}
.lightbox[hidden]{display:none}
.lightbox-inner{
  width:min(1000px, 92%); max-height:80vh; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:12px;
  box-shadow:var(--shadow)
}
.lightbox img{max-width:100%; max-height:72vh; border-radius:12px; display:block}
.lightbox-close{
  position:absolute; top:18px; right:18px; border:0; background:rgba(0,0,0,.6);
  color:var(--text); padding:10px 12px; border-radius:12px; cursor:pointer; font-size:1rem;
  border:1px solid rgba(255,255,255,.18)
}