:root{
  /* Single theme background color (use this everywhere) */
  --bg: #0b1530;
  --bg-1: var(--bg);
  --bg-2: var(--bg);
  --warm-1: #FF9F1C;
  --warm-2: #FFB86B;
  --accent: #6ee7b7;
  --accent-2: #7dd3fc;
  --muted: #9aa7bb;
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --max-width: 1100px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:#e6eef8;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.app-wrap{max-width:var(--max-width);margin:0 auto;padding:18px}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 4px}
.topbar{position:relative}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:flex;align-items:center;justify-content:center;font-weight:700;color:#041024}
.name{font-weight:600}
.nav a{color:var(--muted);margin-left:18px;text-decoration:none}
.nav a.active{color:var(--accent);font-weight:700}
.nav a.cta{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:8px;color:var(--accent);}

.hero{padding:32px 0 28px}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:center}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 12px}
.lead{color:var(--muted);max-width:56ch}
.hero-actions{margin-top:18px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none;border:0;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#041024}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

.hero-visual{height:260px;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:14px;padding:12px;display:flex;align-items:center;justify-content:center}
#home-canvas{width:100%;height:100%;display:block;border-radius:10px}

.contact{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 8px;margin-top:0}
.contact-form{
  width:100%;max-width:920px;
  background: linear-gradient(180deg, var(--warm-2) 0%, var(--warm-1) 100%);
  color: #041024;
  border-radius:18px;padding:18px;
  border:2px solid rgba(4,8,20,0.08);
  box-shadow:0 20px 50px rgba(255,159,28,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}
.contact-form .section-title{color:#041024;font-size:22px;font-weight:700;margin:0 0 4px}
.contact-form .section-sub{color:rgba(4,8,20,0.6);margin-bottom:8px}
.contact-form .form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:6px;align-items:center}
.contact-form input,.contact-form textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(4,8,20,0.08);background:#ffffff;color:#041024;font-size:15px}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form .form-row:last-of-type{margin-bottom:0}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(4,8,20,0.45)}
.contact-form input:focus,.contact-form textarea:focus{border-color:rgba(4,8,20,0.14);box-shadow:0 8px 28px rgba(4,8,20,0.08)}
.contact-form textarea{grid-column:1 / -1}
.contact-form .form-row .btn.primary{grid-column:1 / -1;padding:16px;border-radius:12px;font-size:16px;background:linear-gradient(90deg,#041024,#063048);color:var(--accent-2);box-shadow:0 10px 30px rgba(4,8,20,0.28)}
.contact-form .form-row .btn.ghost{justify-self:start}

/* validation styles */
/* stronger invalid field visuals */
.invalid{border:2px solid #ff6b6b !important;box-shadow:0 12px 30px rgba(255,107,107,0.14) !important;background:linear-gradient(180deg, rgba(255,107,107,0.04), transparent) !important}
.invalid:focus{outline:3px solid rgba(255,107,107,0.12);outline-offset:3px}
#form-status.error{color:#ff6b6b;background:rgba(255,107,107,0.04);padding:8px;border-radius:8px}

/* field error messages and counter */
.field-error{color:#FFF0F0;font-size:13px;min-height:20px;margin-top:8px}
.field-meta{display:flex;justify-content:space-between;align-items:center}
#msg-counter{font-size:13px;color:rgba(4,8,20,0.6)}
.field-error[id^="err-"]{opacity:0;transition:opacity 160ms ease, transform 160ms ease}
.field-error.visible{opacity:1;transform:translateY(0)}
.field-error{padding:6px 8px;border-radius:8px;background:rgba(255,85,85,0.06);border:1px solid rgba(255,85,85,0.14);color:#ffdddd;font-weight:600}
.field-error.success{background:rgba(110,231,183,0.06);border:1px solid rgba(110,231,183,0.14);color:#e8fff6}
.valid{border:2px solid #6ee7b7 !important;box-shadow:0 8px 24px rgba(110,231,183,0.10) !important;background:linear-gradient(180deg, rgba(110,231,183,0.03), transparent) !important}

@media (max-width:900px){
  .contact-form{padding:22px}
  .contact-form .form-row{grid-template-columns:1fr}
  .contact-form textarea{min-height:120px}
}

.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

.services{padding:8px 0 28px}
.services h2{margin:0 0 6px}
.section-sub{color:var(--muted);margin-bottom:14px}
.service-filters{display:flex;gap:8px;margin-bottom:18px}
.service-filters button{background:transparent;border:1px solid rgba(255,255,255,0.03);color:var(--muted);padding:8px 10px;border-radius:8px;cursor:pointer}
.service-filters button.active{background:linear-gradient(90deg,rgba(125,211,252,0.08),rgba(110,231,183,0.06));color:var(--accent)}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card);padding:18px;border-radius:12px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.02)}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}

.work{padding:6px 0 20px}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cap{
  padding:16px;border-radius:12px;border:1px solid rgba(125,211,252,0.06);
  background:linear-gradient(180deg, rgba(125,211,252,0.06), rgba(110,211,197,0.02));
  color:var(--accent-2);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(3,8,22,0.45);
}
.cap strong{display:block;color:var(--accent);font-size:15px;margin-bottom:6px}
.cap span{color:rgba(230,238,248,0.9);font-size:13px}

.about{padding:8px 0 18px}
.contact{padding:0 0 8px}

/* tighten heading spacing for contact */
.contact h2{margin:0 0 8px}

/* Pull contact up slightly when visible so heading sits closer to header */
.contact.active{margin-top:-22px}

@media (max-width:900px){
  .contact.active{margin-top:-12px}
}

/* Sections that should sit on the base page gradient so headings and tiles
   align visually with the rest of the page. */
.services, .work, #technologies, .about, .contact{
  background:var(--bg);
}

/* Section transition and layout: place page sections in a relative
   stacking context and animate visibility via opacity/transform. */
main{position:relative}
/* Keep sections in normal document flow but hide by collapsing height.
   This ensures content (like the contact form) fits the page and remains scrollable. */
.hero, .services, .work, .about, .contact{
  position:relative;opacity:0;transform:translateY(8px);
  max-height:0;overflow:hidden;pointer-events:none;visibility:hidden;
  transition:opacity 360ms ease, transform 360ms ease, max-height 420ms ease;
}
.hero.active, .services.active, .work.active, .about.active, .contact.active{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;max-height:2000px;
}

.site-footer{display:flex;justify-content:space-between;padding:24px 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .services-grid{grid-template-columns:1fr}
  .cap-grid{grid-template-columns:1fr}
  .app-wrap{padding:18px}
  .nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
}

/* Mobile navigation: hidden by default, shown when `.open` is present */
.menu-toggle{display:none;background:transparent;border:0;color:var(--muted);font-size:22px;padding:8px;border-radius:8px}
@media (max-width:600px){
  .menu-toggle{display:block;margin-left:auto;position:relative;z-index:60}
  .nav{display:none;position:absolute;right:14px;top:100%;margin-top:8px;flex-direction:column;padding:10px;background:var(--bg-1);border-radius:10px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 14px 40px rgba(2,8,20,0.6);min-width:200px;z-index:40}
  .nav.open{display:flex}
  .nav a{margin:8px 0}
  .nav a.cta{justify-self:stretch;text-align:center}
}

/* Ensure hamburger is completely hidden on wider screens and restore nav layout */
@media (min-width:601px){
  .menu-toggle{display:none !important}
  .nav{display:flex !important;position:static !important;right:auto !important;top:auto !important;flex-direction:row !important;padding:0 !important;background:transparent !important;border-radius:0 !important;border:0 !important;box-shadow:none !important;min-width:0}
  .nav a{margin-left:18px;margin:8px 0 8px 18px}
}

/* subtle entrance */
.card, .cap{transform:translateY(8px);opacity:0;animation:enter 540ms ease forwards}
@keyframes enter{to{transform:none;opacity:1}}

/* accessibility */
a:focus{outline:2px solid rgba(125,211,252,0.18);outline-offset:3px}

/* small helpers */
.muted{color:var(--muted)}