:root{
  --bg:#0b0f19;
  --bg-alt:#100c0c;
  --text:#e6e9f2;
  --muted:#b7bfd3;
  --primary:#FF5F6D; /* coral red */
  --secondary:#FFC371; /* warm amber */
  --accent: linear-gradient(100deg,var(--primary),var(--secondary));
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --container: clamp(16px, 6vw, 64px);
  --radius: 18px;
  --shadow: 0 10px 40px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background: radial-gradient(1200px 800px at 70% -10%, #2a1620 0%, transparent 60%) , var(--bg);
  color:var(--text); font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

.container{ width:min(1200px, 100% - 2*var(--container)); margin-inline:auto }

.site-header{ position:sticky; top:0; z-index:40; backdrop-filter:saturate(140%) blur(10px); background:linear-gradient(180deg, rgba(11,15,25,.98), rgba(11,15,25,.82)); border-bottom:1px solid var(--border)}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px }
.brand .brand-name{ font-size:1.05rem }
.brand .accent{ background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.menu{ display:flex; align-items:center; gap:18px }
.menu a{ color:var(--muted); font-weight:600; font-size:.95rem; opacity:.9 }
.menu a:hover{ color:var(--text) }

.btn{ display:inline-grid; place-items:center; gap:.5rem; padding:.9rem 1.1rem; border-radius:12px; border:1px solid var(--border); font-weight:700; transition: transform .2s ease, background .3s ease, box-shadow .3s ease }
.btn:hover{ transform: translateY(-2px) }
.btn:active{ transform: translateY(0) scale(.99) }
.btn-primary{ color:#0a0d16; background:var(--accent); box-shadow: 0 8px 30px rgba(138,92,246,0.25), 0 8px 30px rgba(40,224,185,0.15) }
.btn-ghost{ color:var(--text); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--border) }
.btn.big{ padding:1.1rem 1.4rem; font-size:1.05rem; border-radius:14px }

.hero{ position:relative; min-height:92dvh; display:grid; place-items:center; overflow:hidden; isolation:isolate }
#bg-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1 }
.hero::after{ content:""; position:absolute; inset:-20% -10%; z-index:-2; background: conic-gradient(from 0deg at 70% 20%, rgba(255,95,109,.18), rgba(255,195,113,.14), rgba(255,95,109,.18)); filter: blur(50px); animation: spin 24s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }
.hero-inner{ text-align:center; padding:calc(64px + 6vh) 0 10vh }
.hero-title{ font-size: clamp(2.4rem, 7vw, 6.2rem); line-height:1.0; font-weight:800; letter-spacing:-.02em; margin:0 0 .6rem }
.hero-title .spark{ display:inline-block; background: var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 8px 26px rgba(138,92,246,.35)) }
.hero-title .shine{ display:inline-block; position:relative; background: linear-gradient(90deg, #fff, #c8d2ff, #fff); -webkit-background-clip:text; background-clip:text; color:transparent; background-size:200% 100%; animation: shine 3.4s linear infinite }
@keyframes shine{ 0%{ background-position: 200% 0 } 100%{ background-position: -200% 0 }}
.hero-subtitle{ color:var(--muted); font-size: clamp(1rem, 2.2vw, 1.25rem); margin: 0 auto 1.2rem; max-width: 780px }
.hero-ctas{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin: 10px 0 22px }
.trust{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; color:#c2c9dc; opacity:.85; font-size:.92rem }

.section{ padding: 82px 0 }
.section.alt{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) }
.section-title{ font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin:0 0 28px; letter-spacing:-.015em }

.grid{ display:grid; gap:18px }
.services{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.showcase{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) }
.testimonials-grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) }

.card{ padding:18px; border-radius: var(--radius); border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: var(--shadow) }
.card h3{ margin:10px 0 8px; letter-spacing:-.01em }
.card p{ color:var(--muted) }
.card .icon{ width:42px; height:42px; display:grid; place-items:center; color:#ffe0cc }
.card .icon svg{ width:100%; height:100% }

.showcase-item{ display:block; padding:14px; border-radius:16px; border:1px solid var(--border); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: var(--shadow); transform-style: preserve-3d; transition: transform .2s ease, box-shadow .3s ease }
.showcase-item:hover{ box-shadow: 0 18px 60px rgba(14,20,36,.5) }
.showcase-item h3{ margin:10px 4px 4px }
.showcase-item p{ margin:0 4px 6px; color:var(--muted) }
.shot{ height:180px; border-radius:12px; margin-bottom:8px; background: radial-gradient(120px 120px at 20% 20%, rgba(255,95,109,.45), transparent 60%), radial-gradient(160px 160px at 80% 30%, rgba(255,195,113,.35), transparent 60%), linear-gradient(180deg, #2a1a1a, #14100e) }
.shot-1{ filter: hue-rotate(10deg) }
.shot-2{ filter: hue-rotate(40deg) }
.shot-3{ filter: hue-rotate(-20deg) }

.stack{ list-style:none; display:flex; gap:10px; padding:0; flex-wrap:wrap }
.stack li{ padding:8px 12px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.04) }

.cta{ text-align:center }
.cta-text{ color:var(--muted); margin: 0 auto 16px; max-width:680px }
form#contact-form{ display:flex; flex-direction:column; gap:14px; padding:24px; margin-top:12px }
form#contact-form label span{ display:block; font-size:.75rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; opacity:.75; margin-bottom:4px }
form#contact-form input, form#contact-form textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background: rgba(255,255,255,.05); color:var(--text); font:inherit; resize:vertical }
form#contact-form input:focus, form#contact-form textarea:focus{ outline:2px solid var(--primary); outline-offset:2px }
form#contact-form .form-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
form#contact-form .form-actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px }
form#contact-form #form-status{ margin-top:4px; font-size:.85rem }
form#contact-form #form-status.ok{ color: var(--secondary) }
form#contact-form #form-status.err{ color: #ff8686 }
form#contact-form .hp{ position:absolute; left:-9999px; }

.site-footer{ border-top:1px solid var(--border); padding:20px 0; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.02)) }
.footer-inner{ display:flex; align-items:center; justify-content:space-between }
.to-top{ opacity:.8; border:1px solid var(--border); border-radius:10px; width:36px; height:36px; display:grid; place-items:center }

.glass{ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); backdrop-filter: blur(8px) }

.js .reveal{ opacity:0; transform: translateY(14px); will-change: transform, opacity; transition: opacity .6s ease, transform .6s ease }
.js .reveal.in-view{ opacity:1; transform: translateY(0) }

/* Section scroll animations */
.js .scroll-anim{ --sa-delay:0s; --sa-translate:38px; --sa-rot:0deg; --sa-scale:1.0; opacity:0; transform: translateY(var(--sa-translate)) scale(.98) rotate(var(--sa-rot)); transition: opacity .9s cubic-bezier(.16,.8,.26,1), transform .9s cubic-bezier(.16,.8,.26,1) }
.js .scroll-anim.in-view{ opacity:1; transform: translateY(0) scale(var(--sa-scale)) rotate(0deg) }
.js .scroll-anim[data-anim="fade-up"]{ --sa-translate:46px }
.js .scroll-anim[data-anim="fade-scale"]{ --sa-scale:1.02; --sa-translate:30px }
.js .scroll-anim[data-anim="tilt"]{ --sa-translate:34px; --sa-rot:1.2deg }
.js .scroll-anim[data-anim="rise"]{ --sa-translate:60px }
.js .scroll-anim.in-view[data-anim="tilt"]{ transform: translateY(0) rotate(0deg) }

.magnet{ transition: transform .15s ease-out }

[data-elevate]{ box-shadow: 0 10px 40px rgba(0,0,0,.25) }

@media (max-width: 760px){
  .menu a{ display:none }
  .menu .btn-primary{ display:inline-grid }
  .hero-inner{ padding: 96px 0 72px }
}

@media (max-width: 560px){
  .menu .btn-primary{ padding:.7rem .9rem; font-size:.85rem; border-radius:10px }
}

@media (max-width: 400px){
  .nav{ padding:10px 0 }
  .brand .brand-name{ font-size:.9rem }
  .menu .btn-primary{ padding:.6rem .8rem; font-size:.78rem; letter-spacing:.3px }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:0ms !important; scroll-behavior:auto !important }
}

/* Soon banners */
.soon{ position:relative; overflow:hidden; padding:28px 22px; border-radius:18px; border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); text-align:center; box-shadow: var(--shadow) }
.soon .soon-badge{ display:inline-block; font-weight:800; letter-spacing:.6px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,.06); margin-bottom:8px }
.soon h3{ margin:6px 0 6px; letter-spacing:-.01em }
.soon p{ margin:0; color:var(--muted) }
.soon .soon-glow{ position:absolute; inset:-30% -10%; background: conic-gradient(from 0deg at 70% 20%, rgba(255,95,109,.18), rgba(255,195,113,.14), rgba(255,95,109,.18)); filter: blur(60px); animation: spin 24s linear infinite; z-index:-1 }
.soon[data-variant="projects"] .soon-badge{ background: rgba(255,195,113,.10) }
.space-wrap{ position:relative; margin-top:14px; border-radius:12px; overflow:hidden; border:1px solid var(--border); background: #0a0d16 }
#space-battle{ display:block; width:100%; height:auto; image-rendering: pixelated; }
.books-wrap{ position:relative; margin-top:14px; border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#120f18 }
#books-chase{ display:block; width:100%; height:auto }