:root {
   --bg: #0b1020;
   --bg-soft: #0f1730;
   --card: #131c39;
   --text: #e6e9f2;
   --muted: #aeb6d1;
   --brand: #6ee7ff;
   --brand-2: #a78bfa;
   --line: rgba(255, 255, 255, .08);
   --radius: 18px;
   --shadow: 0 10px 30px rgba(0, 0, 0, .35);
   --maxw: 1120px;
 }

 * {
   box-sizing: border-box
 }

 html {
   scroll-behavior: smooth
 }

 body {
   margin: 0;
   font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
   color: var(--text);
   background:
     radial-gradient(1000px 600px at 10% -10%, #1b2a6b 0%, transparent 60%),
     radial-gradient(900px 500px at 90% -20%, #3b1370 0%, transparent 55%),
     var(--bg);
   overflow-x: hidden;
 }

 /* Layout helpers */
 .container {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 20px;
 }

 section {
   padding: 25px 0;
 }

 .grid {
   display: grid;
   gap: 18px;
 }

 /* Buttons */
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 12px 16px;
   border-radius: 12px;
   border: 1px solid var(--line);
   background: linear-gradient(180deg, rgba(110, 231, 255, .12), rgba(167, 139, 250, .10));
   color: var(--text);
   text-decoration: none;
   font-weight: 600;
   box-shadow: var(--shadow);
   transition: transform .18s ease, border-color .18s ease, background .18s ease;
   backdrop-filter: blur(6px);
   will-change: transform;
 }

 .btn:hover {
   transform: translateY(-2px);
   border-color: rgba(110, 231, 255, .6);
   background: linear-gradient(180deg, rgba(110, 231, 255, .18), rgba(167, 139, 250, .14));
 }

 .btn:active {
   transform: translateY(0)
 }

 .chip {
   display: inline-block;
   padding: 6px 10px;
   border-radius: 999px;
   background: rgba(110, 231, 255, .10);
   border: 1px solid var(--line);
   color: var(--muted);
   font-size: 13px;
   font-weight: 600;
 }

 /* Header / Nav */
 header {
   position: sticky;
   top: 0;
   z-index: 100;
   background: rgba(11, 16, 32, .7);
   border-bottom: 1px solid var(--line);
   backdrop-filter: blur(10px);
   animation: headerDrop .6s ease both;
 }

 @keyframes headerDrop {
   from {
     transform: translateY(-8px);
     opacity: 0
   }

   to {
     transform: translateY(0);
     opacity: 1
   }
 }

 .nav {
   height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: nowrap;
   /* keep items on one line */
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 800;
   letter-spacing: .4px;
   min-width: 0;
   /* allow shrinking on mobile */
   flex: 1 1 auto;
 }

 .logo-mark {
   width: 34px;
   height: 34px;
   border-radius: 10px;
   background: conic-gradient(from 120deg, var(--brand), var(--brand-2), #22c55e, var(--brand));
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .03);
   transform: translateZ(0);
   animation: logoFloat 6s ease-in-out infinite;
 }

 @keyframes logoFloat {

   0%,
   100% {
     transform: translateY(0) rotate(0.001deg)
   }

   50% {
     transform: translateY(-4px) rotate(0.001deg)
   }
 }

 nav ul {
   display: flex;
   list-style: none;
   gap: 14px;
   padding: 0;
   margin: 0;
 }

 nav a {
   color: var(--muted);
   text-decoration: none;
   font-weight: 600;
   font-size: 14px;
   padding: 8px 10px;
   border-radius: 8px;
   transition: .2s;
   white-space: nowrap;
 }

 nav a:hover {
   color: var(--text);
   background: rgba(255, 255, 255, .05)
 }

 .burger {
   display: none;
   width: 40px;
   height: 40px;
   border-radius: 10px;
   border: 1px solid var(--line);
   background: var(--bg-soft);
   color: var(--text);
   place-items: center;
   cursor: pointer;
   margin-left: auto;
   /* pin to right edge */
   flex: 0 0 auto;
 }

 .burger span {
   width: 18px;
   height: 2px;
   background: var(--text);
   display: block;
   position: relative;
 }

 .burger span::before,
 .burger span::after {
   content: "";
   position: absolute;
   left: 0;
   width: 18px;
   height: 2px;
   background: var(--text);
 }

 .burger span::before {
   top: -6px
 }

 .burger span::after {
   top: 6px
 }

 /* Hero */
 .hero {
   padding: 84px 0 40px;
   position: relative;
 }

 .hero::after {
   content: "";
   position: absolute;
   inset: -120px -40px auto -40px;
   height: 320px;
   pointer-events: none;
   background:
     radial-gradient(500px 140px at 15% 40%, rgba(110, 231, 255, .14), transparent 60%),
     radial-gradient(620px 180px at 85% 20%, rgba(167, 139, 250, .16), transparent 60%);
   filter: blur(14px);
   animation: heroGlow 8s ease-in-out infinite alternate;
   opacity: .9;
 }

 @keyframes heroGlow {
   from {
     transform: translateY(0)
   }

   to {
     transform: translateY(14px)
   }
 }

 .hero-wrap {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 18px;
   align-items: center;
   position: relative;
   z-index: 1;
 }

 .hero h1 {
   font-size: clamp(28px, 4vw, 44px);
   line-height: 1.15;
   margin: 10px 0 12px;
   animation: fadeUp .8s ease .05s both;
 }

 .hero p {
   color: var(--muted);
   font-size: clamp(15px, 1.6vw, 18px);
   animation: fadeUp .8s ease .12s both;
 }

 .hero-card {
   background: linear-gradient(180deg, rgba(19, 28, 57, .9), rgba(15, 23, 48, .9));
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 18px;
   box-shadow: var(--shadow);
   animation: fadeUp .8s ease .2s both;
 }

 .stats {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
   margin-top: 14px;
   animation: fadeUp .8s ease .18s both;
 }

 .stat {
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 12px;
   text-align: center;
   transition: transform .18s ease, border-color .18s ease;
   will-change: transform;
   min-width: 0;
 }

 .stat:hover {
   transform: translateY(-3px);
   border-color: rgba(167, 139, 250, .5);
 }

 .stat .n {
   font-size: 20px;
   font-weight: 800
 }

 .stat .t {
   font-size: 12px;
   color: var(--muted);
   font-weight: 600
 }

 .card {
   background: var(--card);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 18px;
   box-shadow: var(--shadow);
   transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
   will-change: transform;
   min-width: 0;
 }

 .card:hover {
   transform: translateY(-4px);
   border-color: rgba(110, 231, 255, .45);
   box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
 }

 .card h3 {
   margin: 0 0 8px;
   font-size: 18px
 }

 .card p {
   margin: 0;
   color: var(--muted)
 }

 .section-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 14px;
 }

 .section-title h2 {
   margin: 0;
   font-size: clamp(22px, 3vw, 28px);
 }

 .section-title p {
   margin: 0;
   color: var(--muted)
 }

 .two-col {
   grid-template-columns: repeat(2, minmax(0, 1fr))
 }

 .three-col {
   grid-template-columns: repeat(3, minmax(0, 1fr))
 }

 .four-col {
   grid-template-columns: repeat(4, minmax(0, 1fr))
 }

 .list {
   display: grid;
   gap: 10px;
   margin: 0;
   padding: 0;
   list-style: none;
 }

 .list li {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   background: rgba(255, 255, 255, .03);
   border: 1px solid var(--line);
   padding: 12px;
   border-radius: 12px;
   transition: transform .18s ease, border-color .18s ease;
   will-change: transform;
   min-width: 0;
 }

 .list li:hover {
   transform: translateX(2px);
   border-color: rgba(110, 231, 255, .35);
 }

 .dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, var(--brand), transparent 60%), var(--brand-2);
   margin-top: 7px;
   flex: 0 0 10px;
   animation: dotPulse 2.6s ease-in-out infinite;
 }

 @keyframes dotPulse {

   0%,
   100% {
     transform: scale(1);
     opacity: .9
   }

   50% {
     transform: scale(1.25);
     opacity: 1
   }
 }

 .timeline {
   position: relative;
   padding-left: 10px;
 }

 .timeline-item {
   display: grid;
   grid-template-columns: 28px 1fr;
   gap: 12px;
   padding: 10px 0;
 }

 .timeline-icon {
   width: 28px;
   height: 28px;
   border-radius: 8px;
   background: rgba(110, 231, 255, .12);
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   font-weight: 800;
   color: var(--text);
   transition: transform .18s ease, border-color .18s ease;
   min-width: 0;
 }

 .timeline-item:hover .timeline-icon {
   transform: translateY(-2px);
   border-color: rgba(167, 139, 250, .6);
 }

 .timeline-item h4 {
   margin: 0 0 4px
 }

 .timeline-item p {
   margin: 0;
   color: var(--muted)
 }

 .cta {
   background:
     radial-gradient(700px 300px at 10% 0%, rgba(110, 231, 255, .12), transparent 60%),
     radial-gradient(700px 300px at 90% 0%, rgba(167, 139, 250, .14), transparent 60%),
     var(--bg-soft);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
 }

 .cta-wrap {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 18px;
   align-items: center;
   min-width: 0;
 }

 footer {
   padding: 26px 0;
   color: var(--muted);
   font-size: 14px;
 }

 /* 
 .footer-grid {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   flex-wrap: wrap;
   min-width: 0;
 }

 .footer a {
   color: var(--text);
   text-decoration: none
 }

 .reveal {
   opacity: 0;
   transform: translateY(14px);
   transition: opacity .6s ease, transform .6s ease;
 }

 .reveal.in {
   opacity: 1;
   transform: translateY(0);
 }

 @keyframes fadeUp {
   from {
     opacity: 0;
     transform: translateY(10px)
   }

   to {
     opacity: 1;
     transform: translateY(0)
   }
 } */

 /* --- Hard mobile overflow fixes --- */
 html,
 body {
   max-width: 100%;
   overflow-x: clip;
   /* strongest safe overflow lock */
 }

 .grid,
 .stats,
 .nav,
 .footer-grid,
 .cta-wrap,
 .hero-wrap,
 .card,
 .hero-card,
 .stat,
 .list li {
   min-width: 0;
 }

 p,
 h1,
 h2,
 h3,
 h4,
 a,
 li {
   overflow-wrap: anywhere;
 }

 #nav-toggle {
   display: none
 }

 @media (max-width: 900px) {

   .hero-wrap,
   .cta-wrap {
     grid-template-columns: 1fr
   }

   .three-col {
     grid-template-columns: 1fr 1fr
   }

   .four-col {
     grid-template-columns: 1fr 1fr
   }

   .two-col {
     grid-template-columns: 1fr
   }
 }

 @media (max-width: 720px) {
   .container {
     padding: 0 16px;
   }

   .logo-mark {
     width: 30px;
     height: 30px;
   }

   .logo>div>div:first-child {
     font-size: 12px;
   }

   .logo>div>div:last-child {
     font-size: 13px;
   }

   nav ul {
     position: fixed;
     inset: 64px 12px auto 12px;
     padding: 12px;
     background: rgba(15, 23, 48, .98);
     border: 1px solid var(--line);
     border-radius: 14px;
     flex-direction: column;
     gap: 6px;
     display: none;
     box-shadow: var(--shadow);
     animation: fadeUp .25s ease both;
     max-height: calc(100vh - 90px);
     overflow: auto;
   }

   .burger {
     display: grid
   }

   #nav-toggle:checked~nav ul {
     display: flex
   }

   nav a {
     font-size: 16px;
     padding: 12px
   }

   .stats {
     grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .three-col,
   .four-col {
     grid-template-columns: 1fr
   }
 }

 /* Force CTA buttons to stack on very small screens */
 @media (max-width: 480px) {
   #contact .card>div {
     flex-direction: column;
     align-items: stretch;
   }

   #contact .btn {
     width: 100%;
     justify-content: center;
   }
 }