:root{
  --bg:#081226;
  --card:#0f1b2b;
  --accent:#6ee7b7;
  --muted:rgba(255,255,255,0.7);
  --glass: rgba(255,255,255,0.04);
  --radius:12px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:hidden;overscroll-behavior-x:none}
body{margin:0;background:linear-gradient(180deg,#061021 0%, #071428 60%);color:#fff;line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:2rem}
.site-header{position:relative;z-index:30;backdrop-filter: blur(6px);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;position:relative}
.brand{display:flex;gap:.6rem;align-items:center;color:var(--muted);text-decoration:none;font-weight:700}
.logo{width:36px;height:36px}
.logo-anim{animation:logoSpin 6s linear infinite}
.nav{display:flex;gap:1rem}
.nav a{color:var(--muted);text-decoration:none;padding:.4rem .6rem;border-radius:8px;transition:all .18s}
.nav a:hover{background:var(--glass);color:#fff;transform:translateY(-2px)}
.nav-toggle{display:none;background:none;border:0;color:var(--muted);font-size:1.6rem;cursor:pointer;z-index:20}

.hero{position:relative;padding:4rem 0 2rem;background:linear-gradient(135deg,#0a2a3b 0%, transparent 60%);overflow:hidden}
.hero-inner{max-width:700px}
.hero-title{font-size:2.2rem;margin:0 0 .6rem;animation:fadeUp .9s ease both}
.intro{margin-top:1rem}
.intro-line{margin:0;color:var(--muted)}
.intro-anim{font-weight:600;color:#e6fff7;margin:0;font-size:1.05rem;display:flex;align-items:center;gap:.5rem}
.intro-anim .cursor{display:inline-block;animation:blink 1s steps(2,end) infinite;color:var(--accent)}

/* Typewriter / rotator */
.intro-anim span{opacity:0;display:inline-block}
.intro-anim .visible{opacity:1;transform:none}
@keyframes blink{50%{opacity:0}} 
.hero-sub{color:var(--muted);margin:0 0 1rem}
.btn{display:inline-block;background:var(--accent);color:#042028;padding:.7rem 1.2rem;border-radius:10px;text-decoration:none;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,0.45)}
.hero-deco{position:absolute;right:-10vw;bottom:0;width:120%;height:160px;opacity:.4;transform:translateY(10px);animation:float 6s ease-in-out infinite}

.features h2,.portfolio-preview h2{margin-top:0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:0 6px 20px rgba(2,6,23,.6);transition:transform .25s, box-shadow .25s}
.card.reveal{transform:translateY(-6px) scale(1.01)}
.card:hover{transform:translateY(-12px) rotate(-1deg);box-shadow:0 26px 60px rgba(2,6,23,.85)}
.card img{width:56px;height:56px}

.thumb.reveal img{transform:scale(1.03)}

.portfolio-card{transition:transform .35s, box-shadow .35s}
.portfolio-card.reveal{transform:translateY(-8px)}

/* Logo spin */
@keyframes logoSpin{0%{transform:rotate(0)}50%{transform:rotate(12deg) scale(1.02)}100%{transform:rotate(0)}}

/* subtle gradient text on hero */
.hero-title{background:linear-gradient(90deg,#9fffdc,#6ee7b7 40%,#42a3ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* reveal animation */
.reveal{opacity:1;transform:none}
.card,.thumb,.portfolio-card,.sys{opacity:1;transform:none;transition:none}

.portfolio-preview .thumb{display:block;position:relative;overflow:hidden;border-radius:10px}
.portfolio-preview img{width:100%;height:160px;object-fit:cover;display:block;filter:grayscale(.06) contrast(.95)}
.thumb-info{position:absolute;left:0;bottom:0;padding:.6rem 1rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));width:100%;}

.site-footer{padding:1.6rem 0;text-align:center;color:var(--muted)}

.contact-form{display:grid;gap:.6rem;max-width:640px}
.contact-form input,.contact-form textarea{padding:.8rem;border-radius:8px;border:0;background:var(--glass);color:#fff}
.form-msg{margin-top:.6rem;color:var(--accent)}
.form-msg{position:relative;transition:all .3s ease;padding:.6rem 1rem;border-radius:8px;max-width:640px}
.form-msg.info{background:linear-gradient(90deg,rgba(255,255,255,0.02),transparent);color:var(--muted)}
.form-msg.success{background:linear-gradient(90deg,rgba(110,231,183,0.12),rgba(66,163,255,0.04));color:var(--accent);box-shadow:0 8px 30px rgba(6,16,24,.6)}
.form-msg.error{background:linear-gradient(90deg,rgba(255,90,90,0.06),transparent);color:#ffaaaa}
.form-msg{opacity:0;transform:translateY(6px)}
.form-msg.visible{opacity:1;transform:translateY(0)}

.portfolio-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);padding:1rem;border-radius:10px}
.portfolio-card img{width:100%;height:160px;object-fit:cover;border-radius:8px}

/* More animations */
.hero{animation:heroPulse 12s ease-in-out infinite}
@keyframes heroPulse{0%{filter:brightness(1)}50%{filter:brightness(1.03)}100%{filter:brightness(1)}}

.thumb img{transition:transform .6s cubic-bezier(.2,.9,.2,1), filter .6s}
.thumb:hover img{transform:scale(1.04) translateY(-6px);filter:brightness(1.05)}

.portfolio-card{transition:transform .5s ease, box-shadow .5s ease;transform:translateY(0)}
.portfolio-grid .portfolio-card:nth-child(1){animation:staggerFade .5s ease .05s both}
.portfolio-grid .portfolio-card:nth-child(2){animation:staggerFade .5s ease .1s both}
.portfolio-grid .portfolio-card:nth-child(3){animation:staggerFade .5s ease .15s both}
.portfolio-grid .portfolio-card:nth-child(4){animation:staggerFade .5s ease .2s both}
.portfolio-grid .portfolio-card:nth-child(5){animation:staggerFade .5s ease .25s both}
.portfolio-grid .portfolio-card:nth-child(6){animation:staggerFade .5s ease .3s both}
.portfolio-grid .portfolio-card:nth-child(7){animation:staggerFade .5s ease .35s both}
.portfolio-grid .portfolio-card:nth-child(8){animation:staggerFade .5s ease .4s both}
@keyframes staggerFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* subtle floating bg */
.hero-deco{animation:float 8s ease-in-out infinite}

@keyframes float{0%{transform:translateY(6px)}50%{transform:translateY(-6px)}100%{transform:translateY(6px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Responsive */
@media (max-width:800px){
  .nav{
    display:none;
    position:fixed;
    top:64px;
    left:10px;
    right:10px;
    width:auto;
    max-height:calc(100vh - 80px);
    overflow:auto;
    background:rgba(3,8,15,.96);
    padding:.8rem;
    border-radius:12px;
    box-shadow:0 20px 42px rgba(2,6,23,.8);
    flex-direction:column;
    z-index:40;
    border:1px solid rgba(110,231,183,0.14)
  }
  .nav.open{display:flex}
  .nav a{display:block;width:100%;padding:.7rem .8rem;border-radius:8px;font-size:.95rem}
  .nav-toggle{display:block;padding:.25rem .55rem;border-radius:8px;background:rgba(255,255,255,0.03);font-size:1.4rem;line-height:1}
}

/* Pricing styles */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-top:1rem}
.pricing-grid .card{padding:1.4rem;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);box-shadow:0 8px 30px rgba(2,6,23,.6);display:flex;flex-direction:column;gap:.8rem}
.pricing-grid .card{align-items:center;text-align:center}
.price{font-size:1.6rem;font-weight:800;color:var(--accent);margin:0}
.pricing-grid .muted{color:var(--muted);margin:0 0 .6rem}
.pricing-grid ul{margin:.4rem 0 0;padding-left:0;list-style-position:inside}
.pricing-grid li{margin-bottom:.3rem}
.pricing-grid .btn{align-self:start;margin-top:auto}

/* Ensure buttons are visible on dark background */
.btn{box-shadow:0 8px 24px rgba(0,0,0,0.45);display:inline-block}

@media (max-width:600px){
  .pricing-grid{grid-template-columns:1fr}
  .portfolio-preview .grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-preview img{height:180px}
}

/* Center the pricing note under the cards */
.pricing-note{text-align:center;margin-top:1rem;color:var(--muted)}

/* Center the pricing intro paragraph */
.pricing-intro{text-align:center;margin-top:.6rem;color:var(--muted);font-size:1.05rem}

/* Features spacing adjustments */
.features .grid{gap:2.4rem}
.features .card{padding:1.8rem}
.features h2{margin-bottom:1rem}
.features .card h3{margin-bottom:0.6rem}
.features .card p{margin-bottom:0.6rem}

/* Center the pricing page title */
.pricing-title{text-align:center;margin-top:0;margin-bottom:0.6rem}