:root {
   --primary: rgb(34, 118, 221);
   --secondary: rgb(156, 205, 40);
   --accent: rgb(20, 183, 202);

   --bg: #071025;
   --bg-2: #0c1a2b;
   --muted: #9aa4b2;
   --text: #e6eef6;
   --card-elev: rgba(255, 255, 255, 0.02);
   --max-width: 1100px;
   --radius: 12px;
}

* {
   box-sizing: border-box;
}

html,
body {
   height: 100%;
}

body {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
   margin: 0;
   color: var(--text);
   background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 45%);
   display: flex;
   flex-direction: column;
   min-height: 100vh;
}

.container {
   max-width: var(--max-width);
   margin: 0 auto;
   padding: 2rem;
}

.site-header {
   backdrop-filter: saturate(120%) blur(6px);
   position: sticky;
   top: 0;
   z-index: 30;
   background: linear-gradient(180deg, rgba(19, 50, 88, 0.06), rgba(4, 8, 15, 0.25));
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.header-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.brand {
   display: flex;
   align-items: center;
   gap: 0.75rem;

   .logo-wrapper {
      width: 80px;
      height: 80px;
      background-color: rgb(255, 255, 255);
      background-size: contain;
      display: flex;
      margin: auto;

      .logo {
         height: 60px;
         width: auto;
         display: flex;
         margin: auto;
         border-radius: 8px;
      }
   }
}

.brand h1 {
   font-size: 1.1rem;
   margin: 0;
}

.brand sup {
   color: var(--secondary);
   font-weight: 700;
}

.brand-text {
   display: flex;
   flex-direction: column;
}

.tag {
   margin: 0;
   color: var(--muted);
   font-size: 0.85rem;
}

.nav a {
   color: var(--muted);
   text-decoration: none;
   margin-left: 1rem;
   transition: color 160ms ease;
}

.nav a:hover {
   color: var(--accent);
}

.nav .cta {
   background: linear-gradient(90deg, var(--secondary), var(--accent));
   color: #042031;
   padding: 0.5rem 0.75rem;
   border-radius: 8px;
   text-decoration: none;
   box-shadow: 0 6px 18px rgba(20, 183, 202, 0.08);
}

.hero {
   padding: 5rem 0;
   text-align: left;
}

.hero h2 {
   font-size: 2rem;
   margin: 0 0 0.5rem;
   color: var(--text);
}

.lead {
   color: var(--muted);
   max-width: 60ch;
}

main {
   flex: 1 1 auto;
}

h3 {
   color: var(--primary);
   margin-top: 0;
}

.card h4,
.app-card h4 {
   color: var(--primary);
   margin: 0 0 0.5rem;
}

.btn {
   display: inline-block;
   background: linear-gradient(90deg, var(--secondary), var(--accent));
   color: #042031;
   padding: 0.6rem 1rem;
   border-radius: 10px;
   text-decoration: none;
   margin-right: 0.5rem;
   box-shadow: 0 10px 30px rgba(16, 35, 64, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.03);
}

.btn.ghost {
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.06);
   color: var(--text);
}

.about p,
.services p {
   color: var(--muted);
}

.services .cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1rem;
}

.card {
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
   padding: 1.25rem;
   border-radius: var(--radius);
   border-left: 4px solid rgba(156, 205, 40, 0.08);
   box-shadow: 0 6px 18px rgba(4, 8, 15, 0.6);
}

.apps-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1rem;
}

.app-card {
   background: rgba(255, 255, 255, 0.01);
   padding: 1rem;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.03);
}

.app-card.coming {
   opacity: 0.95;
}

.muted {
   color: var(--muted);
}

.contact-form {
   display: grid;
   gap: 0.75rem;
   max-width: 48rem;
}

.contact-form label {
   display: block;
   color: var(--muted);
}

.contact-form input,
.contact-form textarea {
   width: 100%;
   padding: 0.6rem;
   border-radius: 8px;
   border: 1px solid rgba(255, 255, 255, 0.04);
   background: rgba(255, 255, 255, 0.02);
   color: var(--text);
}

.form-actions {
   display: flex;
   gap: 0.5rem;
}

.small {
   font-size: 0.85rem;
}

.site-footer {
   padding: 2rem 0;
   border-top: 1px solid rgba(255, 255, 255, 0.03);
   text-align: center;
   color: var(--muted);
}

a {
   color: var(--accent);
}

a:visited {
   color: var(--accent);
}

@media (max-width:900px) {
   .services .cards {
      grid-template-columns: 1fr;
   }

   .apps-grid {
      grid-template-columns: 1fr;
   }

   .header-inner {
      flex-direction: column;
      gap: 0.75rem;
      align-items: flex-start;
   }
}

@media (max-width:480px) {
   .hero h2 {
      font-size: 1.3rem;
   }

   .container {
      padding: 1rem;
   }

   .logo {
      height: 36px;
   }
}