*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { background: #07090c; color: #eef2f7; font-family: 'IBM Plex Sans', sans-serif; overflow-x: hidden; text-wrap: pretty; }
::selection { background: rgba(0,212,224,0.25); }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 40px rgba(0,212,224,0.15); }
  50%       { box-shadow: 0 0 60px rgba(0,212,224,0.28); }
}

/* Nav */
.nav-link { font-size: 14px; font-weight: 500; color: #7a8f9e; text-decoration: none; transition: color 0.2s; }
.nav-link:hover { color: #eef2f7; }
.nav-link.active { font-weight: 600; color: #eef2f7; }
.btn-nav { font-size: 13px; font-weight: 600; color: #07090c; background: #00d4e0; padding: 9px 20px; border-radius: 7px; text-decoration: none; transition: background 0.2s, transform 0.15s; display: inline-block; }
.btn-nav:hover { background: #00bfca; transform: translateY(-1px); }

/* Buttons */
.btn-primary { display: inline-flex; align-items: center; gap: 8px; background: #00d4e0; color: #07090c; font-size: 15px; font-weight: 700; padding: 15px 30px; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 0 36px rgba(0,212,224,0.28); }
.btn-primary:hover { background: #00bfca; transform: translateY(-2px); box-shadow: 0 6px 44px rgba(0,212,224,0.44); }
.btn-outline { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid rgba(0,212,224,0.35); color: #00d4e0; font-size: 15px; font-weight: 500; padding: 15px 30px; border-radius: 8px; text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.btn-outline:hover { border-color: #00d4e0; background: rgba(0,212,224,0.07); transform: translateY(-2px); }
.btn-cta { display: inline-flex; align-items: center; gap: 10px; background: #00d4e0; color: #07090c; font-size: 16px; font-weight: 700; padding: 17px 38px; border-radius: 9px; text-decoration: none; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 0 48px rgba(0,212,224,0.32); }
.btn-cta:hover { background: #00bfca; transform: translateY(-2px); box-shadow: 0 8px 56px rgba(0,212,224,0.5); }
.btn-cta-sm { display: inline-flex; align-items: center; gap: 10px; background: #00d4e0; color: #07090c; font-size: 15px; font-weight: 700; padding: 15px 34px; border-radius: 8px; text-decoration: none; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 0 40px rgba(0,212,224,0.28); }
.btn-cta-sm:hover { background: #00bfca; transform: translateY(-2px); box-shadow: 0 8px 48px rgba(0,212,224,0.44); }

/* Pricing cards */
.pricing-card { flex: 1; background: #0c1018; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 22px; transition: border-color 0.25s; }
.pricing-card:hover { border-color: rgba(0,212,224,0.2); }
.pricing-card-featured { flex: 1; background: #0c1620; border: 1px solid rgba(0,212,224,0.28); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 22px; transform: translateY(-14px); box-shadow: 0 12px 60px rgba(0,212,224,0.07), 0 40px 90px rgba(0,0,0,0.45); position: relative; transition: box-shadow 0.25s; }
.pricing-card-featured:hover { box-shadow: 0 12px 60px rgba(0,212,224,0.14), 0 40px 90px rgba(0,0,0,0.5); }
.pricing-btn-fill { display: block; text-align: center; padding: 13px; background: #00d4e0; border-radius: 8px; color: #07090c; font-size: 14px; font-weight: 700; text-decoration: none; margin-top: auto; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 24px rgba(0,212,224,0.3); }
.pricing-btn-fill:hover { background: #00bfca; transform: translateY(-1px); box-shadow: 0 6px 32px rgba(0,212,224,0.45); }
.pricing-btn-outline { display: block; text-align: center; padding: 13px; border: 1.5px solid rgba(255,255,255,0.1); border-radius: 8px; color: #c0cdd6; font-size: 14px; font-weight: 500; text-decoration: none; margin-top: auto; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.pricing-btn-outline:hover { border-color: rgba(0,212,224,0.35); background: rgba(0,212,224,0.05); color: #eef2f7; }

/* Service cards (homepage) */
.service-card { background: #0c1018; border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; padding: 28px 26px; display: flex; flex-direction: column; gap: 16px; transition: border-color 0.25s, background 0.25s; }
.service-card:hover { border-color: rgba(0,212,224,0.3); background: #0d1320; }

/* Service rows (services page) */
.svc-row { background: #0c1018; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 40px 44px; display: flex; gap: 0; align-items: flex-start; transition: border-color 0.25s; }
.svc-row:hover { border-color: rgba(0,212,224,0.22); }

/* Addon cards */
.addon-card { background: #0c1018; border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.25s; }
.addon-card:hover { border-color: rgba(0,212,224,0.3); }

/* Portfolio cards */
.portfolio-card { background: #0c1018; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.portfolio-card:hover { transform: translateY(-6px); border-color: rgba(0,212,224,0.3); box-shadow: 0 16px 48px rgba(0,212,224,0.08); }

/* Footer */
.footer-link { font-size: 14px; color: #4a6070; text-decoration: none; transition: color 0.2s; }
.footer-link:hover { color: #eef2f7; }
.footer-email { font-size: 13.5px; color: #00d4e0; text-decoration: none; font-family: 'JetBrains Mono', monospace; transition: opacity 0.2s; }
.footer-email:hover { opacity: 0.7; }

/* Inline links */
.inline-link { color: #00d4e0; text-decoration: none; font-weight: 500; transition: opacity 0.2s; }
.inline-link:hover { opacity: 0.75; }

/* Contact */
.schedule-btn { display: block; text-align: center; padding: 11px; border: 1.5px solid rgba(0,212,224,0.35); border-radius: 8px; color: #00d4e0; font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color 0.2s, background 0.2s; }
.schedule-btn:hover { border-color: #00d4e0; background: rgba(0,212,224,0.06); }

/* Form elements */
input, select, textarea {
  width: 100%; background: #0c1018; border: 1px solid rgba(255,255,255,0.1);
  color: #eef2f7; border-radius: 8px; padding: 13px 16px;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s; outline: none;
  -webkit-appearance: none; appearance: none;
}
input:focus, select:focus, textarea:focus { border-color: #00d4e0; box-shadow: 0 0 0 3px rgba(0,212,224,0.12); }
input::placeholder, textarea::placeholder { color: #3d5060; }
select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233d5060' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
select option { background: #0c1018; color: #eef2f7; }
textarea { resize: vertical; min-height: 140px; line-height: 1.6; }

/* Hamburger / mobile menu */
#hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: #eef2f7; line-height: 0; }
#mobile-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 99; background: rgba(4,6,8,0.98); flex-direction: column; align-items: center; justify-content: center; gap: 30px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
#mobile-menu.open { display: flex; }
.mobile-nav-link { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; color: #4a6070; text-decoration: none; transition: color 0.2s; letter-spacing: -0.02em; }
.mobile-nav-link:hover, .mobile-nav-link.active { color: #eef2f7; }
.mobile-nav-cta { font-size: 15px; font-weight: 700; color: #07090c; background: #00d4e0; padding: 14px 36px; border-radius: 8px; text-decoration: none; margin-top: 8px; transition: background 0.2s; }
.mobile-nav-cta:hover { background: #00bfca; }

/* Testimonial cards */
.testimonial-card { background: #0c1018; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }

/* Portfolio preview modal */
#preview-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 24px; background: rgba(2,4,6,0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
#preview-modal.open { display: flex; }
#preview-box { display: flex; flex-direction: column; width: 92vw; max-width: 1280px; height: 88vh; background: #0a0e14; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; box-shadow: 0 32px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,212,224,0.08); animation: fadeInUp 0.22s ease both; }
#preview-bar { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 48px; background: #0c1018; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.preview-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
#preview-urlbar { flex: 1; background: #07090c; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; height: 28px; display: flex; align-items: center; padding: 0 12px; gap: 8px; }
#preview-url-text { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #4a6070; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#preview-external { display: flex; align-items: center; color: #2a3c4a; text-decoration: none; transition: color 0.2s; flex-shrink: 0; }
#preview-external:hover { color: #00d4e0; }
#preview-close { background: none; border: none; cursor: pointer; color: #4a6070; padding: 6px; display: flex; align-items: center; transition: color 0.2s; flex-shrink: 0; border-radius: 6px; }
#preview-close:hover { color: #eef2f7; background: rgba(255,255,255,0.06); }
#preview-title { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: #eef2f7; white-space: nowrap; }
#preview-iframe { flex: 1; border: none; width: 100%; display: block; }
@media (max-width: 600px) { #preview-modal { padding: 16px; } #preview-box { width: 100%; height: 80vh; border-radius: 10px; } }

/* Responsive */
@media (max-width: 900px) {
  #hamburger { display: flex !important; align-items: center; justify-content: center; }
  #hero-inner    { flex-direction: column !important; padding-top: 96px !important; padding-bottom: 48px !important; gap: 28px !important; min-height: auto !important; align-items: stretch !important; }
  #hero-terminal { width: 100% !important; max-width: none !important; }
  #pricing-cards { flex-direction: column !important; align-items: stretch !important; }
  #pricing-cards > * { transform: none !important; }
  #services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  #why-grid      { grid-template-columns: 1fr !important; gap: 36px !important; }
  #footer-grid   { grid-template-columns: 1fr !important; text-align: left !important; }
  #footer-right  { align-items: flex-start !important; }
  #footer-center { align-items: flex-start !important; }
  #nav-links     { display: none !important; }
  #bio-cols      { flex-direction: column !important; }
  #avatar-col    { width: 100% !important; max-width: 400px; align-self: center; }
  #stats-row     { grid-template-columns: 1fr !important; gap: 24px !important; }
  [data-svc]     { flex-direction: column !important; }
  [data-svc-right] { border-left: none !important; border-top: 1px solid rgba(255,255,255,0.06) !important; padding-left: 0 !important; padding-top: 24px !important; flex: none !important; width: 100% !important; }
  #addons-grid   { grid-template-columns: repeat(2,1fr) !important; }
  #portfolio-grid { grid-template-columns: repeat(2,1fr) !important; }
  #contact-cols  { flex-direction: column !important; }
  #testimonials-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  #portfolio-grid { grid-template-columns: 1fr !important; }
  section, footer { padding-left: 20px !important; padding-right: 20px !important; }
  nav#main-nav { padding-left: 20px !important; padding-right: 20px !important; }
  #hero-section { padding-bottom: 48px !important; }
}
@media (max-width: 540px) {
  #services-grid  { grid-template-columns: 1fr !important; }
  #addons-grid    { grid-template-columns: 1fr !important; }
  #form-name-email { grid-template-columns: 1fr !important; }
}