/* ── Reset & Base ── */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Inter', sans-serif;
   background: #0a0a0f;
   color: #e0e0e6;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
 }

 a {
   text-decoration: none;
   color: inherit;
 }

 img {
   max-width: 100%;
   display: block;
 }

 ul {
   list-style: none;
 }

 /* ── Utility ── */
 .container {
   width: 100%;
   max-width: 1140px;
   margin: 0 auto;
   padding: 0 24px;
 }

 /* ── Navbar ── */
 .navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 100;
   background: rgba(10, 10, 15, .85);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid rgba(255, 255, 255, .06);
 }

 .navbar .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 64px;
 }

 .logo {
   font-size: 1.2rem;
   font-weight: 700;
   color: #fff;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .logo svg {
   width: 28px;
   height: 28px;
 }

 .nav-links {
   display: flex;
   gap: 32px;
 }

 .nav-links a {
   font-size: .9rem;
   color: #aaa;
   transition: color .2s;
 }

 .nav-links a:hover {
   color: #fff;
 }

 .hamburger {
   display: none;
   background: none;
   border: none;
   color: #fff;
   cursor: pointer;
 }

 .hamburger svg {
   width: 28px;
   height: 28px;
 }

 /* Mobile nav */
 .mobile-nav {
   display: none;
   position: fixed;
   top: 64px;
   left: 0;
   width: 100%;
   background: rgba(10, 10, 15, .97);
   backdrop-filter: blur(12px);
   flex-direction: column;
   padding: 24px;
   gap: 20px;
   border-bottom: 1px solid rgba(255, 255, 255, .06);
   z-index: 99;
 }

 .mobile-nav.open {
   display: flex;
 }

 .mobile-nav a {
   font-size: 1rem;
   color: #ccc;
 }

 /* ── Hero ── */
 .hero {
   padding: 140px 0 80px;
   text-align: center;
   background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(139, 92, 246, .18) 0%, transparent 70%);
 }

 .hero-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: rgba(139, 92, 246, .15);
   border: 1px solid rgba(139, 92, 246, .3);
   border-radius: 999px;
   padding: 6px 18px;
   font-size: .8rem;
   color: #c4b5fd;
   margin-bottom: 28px;
 }

 .hero-badge span {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #8b5cf6;
   display: inline-block;
   box-shadow: 0 0 8px #8b5cf6;
 }

 .hero h1 {
   font-size: 3.4rem;
   font-weight: 800;
   line-height: 1.12;
   color: #fff;
   max-width: 680px;
   margin: 0 auto 20px;
 }

 .hero p.subtitle {
   font-size: 1.05rem;
   color: #9a9ab0;
   max-width: 520px;
   margin: 0 auto 36px;
 }

 .hero-buttons {
   display: flex;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
 }

 .btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: linear-gradient(135deg, #8b5cf6, #6d28d9);
   color: #fff;
   font-weight: 600;
   font-size: .95rem;
   padding: 14px 32px;
   border-radius: 999px;
   border: none;
   cursor: pointer;
   transition: transform .2s, box-shadow .2s;
 }

 .btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 30px rgba(139, 92, 246, .35);
 }

 .btn-outline {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: transparent;
   color: #e0e0e6;
   font-weight: 600;
   font-size: .95rem;
   padding: 14px 32px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .18);
   cursor: pointer;
   transition: border-color .2s, background .2s;
 }

 .btn-outline:hover {
   border-color: rgba(255, 255, 255, .4);
   background: rgba(255, 255, 255, .04);
 }

 /* Code card */
 .code-card {
   max-width: 520px;
   margin: 48px auto 0;
   background: rgba(20, 20, 30, .75);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 14px;
   overflow: hidden;
   text-align: left;
 }

 .code-card-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 16px;
   background: rgba(255, 255, 255, .03);
   border-bottom: 1px solid rgba(255, 255, 255, .06);
 }

 .code-card-header .dots {
   display: flex;
   gap: 6px;
 }

 .code-card-header .dots i {
   width: 10px;
   height: 10px;
   border-radius: 50%;
 }

 .code-card-header .dots i:nth-child(1) {
   background: #ef4444;
 }

 .code-card-header .dots i:nth-child(2) {
   background: #eab308;
 }

 .code-card-header .dots i:nth-child(3) {
   background: #22c55e;
 }

 .code-card-header .file {
   font-size: .75rem;
   color: #666;
 }

 .code-card pre {
   padding: 20px;
   font-size: .82rem;
   line-height: 1.7;
   font-family: 'Courier New', monospace;
   color: #c4b5fd;
   overflow-x: auto;
 }

 .code-card pre .kw {
   color: #c084fc;
 }

 .code-card pre .str {
   color: #86efac;
 }

 .code-card pre .cmt {
   color: #555;
 }

 .code-card pre .fn {
   color: #7dd3fc;
 }

 .hero-dots {
   display: flex;
   justify-content: center;
   gap: 8px;
   margin-top: 28px;
 }

 .hero-dots i {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .12);
 }

 .hero-dots i.active {
   background: #8b5cf6;
   box-shadow: 0 0 8px rgba(139, 92, 246, .5);
 }

 /* ── Section Shared ── */
 section {
   padding: 80px 0;
 }

 .section-label {
   font-size: .8rem;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: #8b5cf6;
   text-align: center;
   margin-bottom: 12px;
 }

 .section-title {
   font-size: 2.2rem;
   font-weight: 800;
   color: #fff;
   text-align: center;
   margin-bottom: 14px;
 }

 .section-sub {
   font-size: 1rem;
   color: #8888a0;
   text-align: center;
   max-width: 520px;
   margin: 0 auto 48px;
 }

 /* ── Who We Are ── */
 .who-we-are {
   background: rgba(16, 16, 24, .6);
   border-top: 1px solid rgba(255, 255, 255, .04);
   border-bottom: 1px solid rgba(255, 255, 255, .04);
 }

 .who-card {
   max-width: 700px;
   margin: 0 auto;
   background: rgba(20, 20, 32, .7);
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 18px;
   padding: 48px;
   text-align: center;
 }

 .who-icon {
   width: 64px;
   height: 64px;
   margin: 0 auto 24px;
   background: linear-gradient(135deg, rgba(139, 92, 246, .2), rgba(139, 92, 246, .05));
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(139, 92, 246, .2);
 }

 .who-icon svg {
   width: 32px;
   height: 32px;
   color: #a78bfa;
 }

 .who-card h3 {
   font-size: 1.6rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 14px;
 }

 .who-card p {
   color: #9a9ab0;
   max-width: 480px;
   margin: 0 auto 28px;
   font-size: .95rem;
 }

 .tags {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
 }

 .tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 18px;
   border-radius: 999px;
   font-size: .82rem;
   font-weight: 500;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
   color: #c4c4d4;
 }

 .tag svg {
   width: 14px;
   height: 14px;
 }

 /* ── What We Build ── */
 .what-we-build-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
 }

 .build-card {
   background: rgba(18, 18, 28, .7);
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 16px;
   padding: 36px 28px;
   transition: transform .25s, border-color .25s;
 }

 .build-card:hover {
   transform: translateY(-4px);
   border-color: rgba(139, 92, 246, .25);
 }

 .build-card-icon {
   width: 52px;
   height: 52px;
   border-radius: 14px;
   margin-bottom: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, rgba(139, 92, 246, .15), rgba(139, 92, 246, .04));
   border: 1px solid rgba(139, 92, 246, .15);
 }

 .build-card-icon svg {
   width: 26px;
   height: 26px;
   color: #a78bfa;
 }

 .build-card h4 {
   font-size: 1.15rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 10px;
 }

 .build-card p {
   font-size: .9rem;
   color: #8888a0;
 }

 /* ── Tech Stack ── */
 .tech-section {
   background: rgba(16, 16, 24, .6);
   border-top: 1px solid rgba(255, 255, 255, .04);
   border-bottom: 1px solid rgba(255, 255, 255, .04);
 }

 .tech-icons {
   display: flex;
   justify-content: center;
   gap: 40px;
   margin-bottom: 40px;
   flex-wrap: wrap;
 }

 .tech-icon {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   font-size: .8rem;
   color: #8888a0;
 }

 .tech-icon-circle {
   width: 60px;
   height: 60px;
   border-radius: 16px;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .tech-icon-circle svg {
   width: 30px;
   height: 30px;
 }

 .terminal-card {
   max-width: 500px;
   margin: 0 auto;
   background: rgba(10, 10, 18, .9);
   border: 1px solid rgba(139, 92, 246, .15);
   border-radius: 14px;
   overflow: hidden;
 }

 .terminal-header {
   padding: 10px 16px;
   background: rgba(139, 92, 246, .08);
   border-bottom: 1px solid rgba(139, 92, 246, .12);
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: .75rem;
   color: #8b5cf6;
 }

 .terminal-header svg {
   width: 14px;
   height: 14px;
 }

 .terminal-body {
   padding: 18px 20px;
   font-family: 'Courier New', monospace;
   font-size: .82rem;
   line-height: 1.8;
   color: #86efac;
 }

 .terminal-body .prompt {
   color: #8b5cf6;
 }

 .terminal-body .loading {
   color: #eab308;
 }

 /* ── Contact ── */
 .contact {
   text-align: center;
 }

 .contact-icon {
   width: 64px;
   height: 64px;
   border-radius: 18px;
   margin: 0 auto 24px;
   background: linear-gradient(135deg, rgba(139, 92, 246, .2), rgba(139, 92, 246, .05));
   border: 1px solid rgba(139, 92, 246, .2);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .contact-icon svg {
   width: 30px;
   height: 30px;
   color: #a78bfa;
 }

 .contact h2 {
   font-size: 2rem;
   font-weight: 800;
   color: #fff;
   margin-bottom: 12px;
 }

 .contact p {
   color: #8888a0;
   margin-bottom: 28px;
   max-width: 440px;
   margin-left: auto;
   margin-right: auto;
 }

 .contact-label {
   font-size: .78rem;
   color: #666;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 8px;
 }

 .contact-email {
   display: inline-block;
   padding: 12px 28px;
   border-radius: 999px;
   background: rgba(139, 92, 246, .1);
   border: 1px solid rgba(139, 92, 246, .25);
   color: #c4b5fd;
   font-weight: 600;
   font-size: .95rem;
   transition: background .2s;
 }

 .contact-email:hover {
   background: rgba(139, 92, 246, .18);
 }

 /* ── Footer ── */
 .footer {
   border-top: 1px solid rgba(255, 255, 255, .06);
   padding: 32px 0;
   text-align: center;
 }

 .footer-logo {
   font-size: 1rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
 }

 .footer-logo svg {
   width: 20px;
   height: 20px;
 }

 .footer p {
   font-size: .78rem;
   color: #555;
 }

 .footer-links {
   display: flex;
   justify-content: center;
   gap: 24px;
   margin-top: 12px;
 }

 .footer-links a {
   font-size: .78rem;
   color: #666;
   transition: color .2s;
 }

 .footer-links a:hover {
   color: #c4b5fd;
 }

 /* ── Responsive ── */
 @media (max-width: 900px) {
   .what-we-build-grid {
     grid-template-columns: 1fr 1fr;
   }
 }

 @media (max-width: 768px) {
   .nav-links {
     display: none;
   }

   .hamburger {
     display: block;
   }

   .hero h1 {
     font-size: 2.4rem;
   }

   .hero {
     padding: 120px 0 60px;
   }

   .who-card {
     padding: 32px 20px;
   }

   .what-we-build-grid {
     grid-template-columns: 1fr;
   }

   .section-title {
     font-size: 1.8rem;
   }

   .tech-icons {
     gap: 24px;
   }
 }

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

   .hero p.subtitle {
     font-size: .92rem;
   }

   .hero-buttons {
     flex-direction: column;
     align-items: center;
   }

   .btn-primary,
   .btn-outline {
     width: 100%;
     max-width: 280px;
     justify-content: center;
   }

   .who-card h3 {
     font-size: 1.3rem;
   }

   .tags {
     gap: 8px;
   }

   .tag {
     padding: 6px 14px;
     font-size: .78rem;
   }
 }