@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{
  --bg-deep: #0a0e17;
  --bg-panel: rgba(255,255,255,0.045);
  --bg-panel-strong: rgba(255,255,255,0.07);
  --border-glass: rgba(255,255,255,0.10);
  --cyan: #4fd8ea;
  --violet: #8b5cf6;
  --amber: #ffb454;
  --text: #f3f6fb;
  --text-soft: #94a1b4;
  --text-faint: #5c667a;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  overflow-x:hidden;
  position:relative;
}

h1,h2,h3,.brand{ font-family:'Sora', sans-serif; letter-spacing:-0.01em; }
.mono{ font-family:'JetBrains Mono', monospace; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- AMBIENT BACKGROUND ---------- */
.bg-scene{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.blob{
  position:absolute; border-radius:50%; filter: blur(90px); opacity:0.55;
}
.blob.b1{
  width:520px; height:520px; top:-160px; left:-120px;
  background: radial-gradient(circle at 30% 30%, var(--violet), transparent 70%);
  animation: float1 22s ease-in-out infinite;
}
.blob.b2{
  width:460px; height:460px; top:20%; right:-140px;
  background: radial-gradient(circle at 60% 40%, var(--cyan), transparent 70%);
  animation: float2 26s ease-in-out infinite;
}
.blob.b3{
  width:400px; height:400px; bottom:-140px; left:30%;
  background: radial-gradient(circle at 50% 50%, var(--amber), transparent 70%);
  opacity:0.32;
  animation: float3 30s ease-in-out infinite;
}
@keyframes float1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,80px); } }
@keyframes float2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-70px,60px); } }
@keyframes float3{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(40px,-50px); } }

.grain{
  position:fixed; inset:0; z-index:1; opacity:0.05; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce){
  .blob{ animation:none !important; }
}

.content{ position:relative; z-index:2; }

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(16px);
  background: rgba(10,14,23,0.55);
  border-bottom:1px solid var(--border-glass);
}
.nav-inner{
  max-width:1080px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo-mark{
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px;
}
.logo-dot{
  width:30px; height:30px; border-radius:9px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#0a0e17;
}
.nav-links{ display:flex; gap:28px; font-size:14px; color:var(--text-soft); }
.nav-links a:hover{ color:var(--text); }
.nav-cta{
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color:#0a0e17; font-weight:700; font-size:13px;
  padding:9px 18px; border-radius:999px;
}
@media (max-width:680px){ .nav-links{ display:none; } }

/* ---------- HERO ---------- */
.hero{
  max-width:1080px; margin:0 auto; padding:110px 24px 90px; text-align:center;
}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.5px;
  color: var(--cyan); background: var(--bg-panel); border:1px solid var(--border-glass);
  padding:7px 14px; border-radius:999px; margin-bottom:26px;
}
.kicker .dot{ width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow:0 0 8px var(--cyan); }

.hero h1{
  font-size: clamp(34px, 6vw, 58px); line-height:1.08; font-weight:800;
  max-width:820px; margin:0 auto 22px;
}
.hero h1 .gradient-text{
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ color:var(--text-soft); max-width:540px; margin:0 auto 36px; font-size:16px; line-height:1.6; }

.btn-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:56px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px;
  padding:14px 26px; border-radius:999px; transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary{
  background: linear-gradient(135deg, var(--cyan), var(--violet)); color:#0a0e17;
  box-shadow: 0 8px 30px rgba(139,92,246,0.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(139,92,246,0.5); }
.btn-ghost{
  background: var(--bg-panel); border:1px solid var(--border-glass); color:var(--text);
}
.btn-ghost:hover{ background: var(--bg-panel-strong); }

.stat-row{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.stat-chip{
  background: var(--bg-panel); border:1px solid var(--border-glass);
  border-radius:16px; padding:14px 22px; min-width:130px;
  backdrop-filter: blur(10px);
}
.stat-chip .num{ font-family:'Sora',sans-serif; font-weight:800; font-size:20px; color:var(--text); }
.stat-chip .lbl{ font-size:11.5px; color:var(--text-faint); margin-top:2px; letter-spacing:0.3px; }

/* ---------- SECTION SHARED ---------- */
section{ padding:90px 24px; }
.wrap{ max-width:1080px; margin:0 auto; }
.section-head{ max-width:600px; margin:0 auto 48px; text-align:center; }
.section-head .kicker{ margin-bottom:18px; }
.section-head h2{ font-size: clamp(26px,4vw,36px); font-weight:800; margin-bottom:12px; }
.section-head p{ color:var(--text-soft); font-size:15px; }

/* ---------- BENTO SERVICES ---------- */
.bento{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
.bento-card{
  background: var(--bg-panel); border:1px solid var(--border-glass);
  border-radius:22px; padding:30px; backdrop-filter: blur(10px);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  display:flex; flex-direction:column;
}
.bento-card:hover{
  transform: translateY(-4px);
  background: var(--bg-panel-strong);
  border-color: rgba(255,255,255,0.18);
}
.bento-card.big{ grid-column: span 2; }
.icon-badge{
  width:46px; height:46px; border-radius:13px; margin-bottom:20px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(79,216,234,0.18), rgba(139,92,246,0.18));
  border:1px solid var(--border-glass);
}
.icon-badge svg{ width:22px; height:22px; stroke: var(--cyan); }
.bento-card h3{ font-size:19px; font-weight:700; margin-bottom:10px; }
.bento-card p{ color:var(--text-soft); font-size:14px; line-height:1.6; margin-bottom:18px; flex:1; }
.tag-list{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px; }
.tag{
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-soft);
  border:1px solid var(--border-glass); padding:4px 10px; border-radius:999px;
}
.card-link{
  display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700;
  color: var(--cyan);
}
.card-link:hover{ color:#7be7f2; }

@media (max-width:760px){
  .bento{ grid-template-columns:1fr; }
  .bento-card.big{ grid-column:span 1; }
}

/* ---------- PORTFOLIO ---------- */
.scroll-gallery{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:12px;
  scroll-snap-type:x mandatory;
}
.scroll-gallery::-webkit-scrollbar{ height:6px; }
.scroll-gallery::-webkit-scrollbar-thumb{ background: var(--border-glass); border-radius:6px; }
.gallery-item{
  flex: 0 0 240px; scroll-snap-align:start;
  border-radius:18px; overflow:hidden; border:1px solid var(--border-glass);
  aspect-ratio: 4/5; background: var(--bg-panel);
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; }
.portfolio-cta{ text-align:center; margin-top:36px; }

/* ---------- CONTACT ---------- */
.contact-panel{
  background: var(--bg-panel); border:1px solid var(--border-glass);
  border-radius:28px; padding:56px 40px; text-align:center;
  backdrop-filter: blur(12px);
}
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:24px; margin:40px 0 8px;
}
.contact-card .label{
  font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase;
  letter-spacing:1.2px; color:var(--text-faint); margin-bottom:8px;
}
.contact-card a{ font-weight:600; color:var(--text); font-size:15px; }
.contact-card a:hover{ color: var(--cyan); }

.social-row{
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap;
  margin-top:38px; padding-top:32px; border-top:1px solid var(--border-glass);
}
.social-row a{ font-size:13.5px; color:var(--text-soft); font-weight:600; }
.social-row a:hover{ color:var(--cyan); }

footer{ text-align:center; padding:34px 24px; color:var(--text-faint); font-size:12px; }