:root {
     /* Color System: 1 primary, 1 accent, 3 neutrals (5 colors total) */
     --bg: #0b0f1a;
     /* background (neutral) */
     --surface: #111827;
     /* surface cards (neutral) */
     --text: #e5e7eb;
     /* foreground text (neutral) */
     --primary: #00e5ff;
     /* primary cyan */
     --accent: #00ffa3;
     /* accent neon green */
     --muted: rgba(229, 231, 235, 0.7);

     /* Layout + shape */
     --radius: 0.75rem;
     --maxw: 1120px;

     /* Typography */
     --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
       Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     --leading: 1.6;
   }

   /* Reset-ish */
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }

   html,
   body {
     height: 100%;
   }

   body {
     margin: 0;
     font-family: var(--font-sans);
     color: var(--text);
     background: var(--bg);
     line-height: var(--leading);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

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

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

   a:focus-visible,
   button:focus-visible {
     outline: 2px solid var(--accent);
     outline-offset: 2px;
     border-radius: 6px;
   }

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

   /* Layout helpers */
   .container {
     width: 100%;
     max-width: var(--maxw);
     margin-inline: auto;
     padding-inline: 1rem;
   }

   .stack {
     display: grid;
     gap: 1rem;
   }

   .stack-lg {
     display: grid;
     gap: 1.25rem;
   }

   .grid {
     display: grid;
     gap: 1rem;
   }

   @media (min-width: 640px) {
     .grid-cols-2 {
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
   @media (max-width: 640px){
     .nav-links a{
      display: none;
     }    
   }
  

   @media (min-width: 960px) {
     .grid-cols-3 {
       grid-template-columns: repeat(3, minmax(0, 1fr));
     }
   }

   /* Header / Nav */
   .site-header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(17, 24, 39, 0.6);
     backdrop-filter: blur(8px);
     border-bottom: 1px solid rgba(0, 229, 255, 0.15);
   }

   .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0.75rem 1rem;
   }

   .brand {
     display: inline-flex;
     align-items: center;
     gap: 0.6rem;
     font-weight: 700;
     letter-spacing: 0.3px;
   }

   .brand-badge {
     width: 22px;
     height: 22px;
     border-radius: 6px;
     background: var(--primary);
     box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.2), 0 0 24px rgba(0, 229, 255, 0.25);
   }

   .nav-links {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-size: 0.95rem;
     color: var(--muted);
   }

   .nav-links a {
     padding: 0.4rem 0.6rem;
     border-radius: 0.5rem;
     transition: color 160ms ease, background-color 160ms ease;
   }

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

   /* Hero */
   .hero {
     padding-block: 3rem;
     border-bottom: 1px solid rgba(0, 229, 255, 0.12);
     background:
       radial-gradient(800px 400px at 50% -120px, rgba(0, 229, 255, 0.12), transparent 70%),
       radial-gradient(600px 300px at 80% -100px, rgba(0, 255, 163, 0.12), transparent 60%);
   }

   /* ===== Animated Eyebrow Text ===== */
   .eyebrow {
     display: inline-flex;
     align-items: start;
     gap: 8px;
     color: #00eaff;
     font-size: 0.9rem;
     font-weight: 500;
     overflow: hidden;
     border: 1px solid rgba(0, 229, 255, 0.25);
     padding: 0.25rem 0.6rem;
     border-radius: 999px;
     background: rgba(0, 229, 255, 0.08);
   }

   .flip-wrapper {
     display: inline-block;
     position: relative;
     height: 1.2em;
     line-height: 1.2em;
     overflow: hidden;
   }

   .flip-wrapper span {
     display: block;
     animation: flipText 12s infinite;
   }

   /* make sure each line stacks vertically */
   .flip-wrapper span:nth-child(1) {
     animation-delay: 0s;
   }

   .flip-wrapper span:nth-child(2) {
     animation-delay: 0s;
   }

   .flip-wrapper span:nth-child(3) {
     animation-delay: 0s;
   }

   .flip-wrapper span:nth-child(4) {
     animation-delay: 0s;
   }
   

   @keyframes flipText {

     0%,
     20% {
       transform: translateY(0);
     }

     25%,
     45% {
       transform: translateY(-100%);
     }

     50%,
     70% {
       transform: translateY(-200%);
     }

     75%,
     95% {
       transform: translateY(-300%);
     }

     100% {
       transform: translateY(0);
     }
   }



  

   .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     padding: 0.65rem 1rem;
     border-radius: 0.6rem;
     font-weight: 600;
     font-size: 0.95rem;
     letter-spacing: 0.2px;
     border: 1px solid transparent;
     transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease;
     will-change: transform;
   }

   .btn-primary {
     background: var(--primary);
     color: #00232a;
     box-shadow: 0 6px 20px rgba(0, 229, 255, 0.3);
   }

   .btn-primary:hover {
     transform: translateY(-1px);
     box-shadow: 0 10px 28px rgba(0, 229, 255, 0.35);
   }

   .btn-ghost {
     color: var(--text);
     border-color: rgba(229, 231, 235, 0.15);
     background: rgba(255, 255, 255, 0.03);
   }

   .btn-ghost:hover {
     border-color: rgba(0, 255, 163, 0.5);
     background: rgba(0, 255, 163, 0.08);
   }

   /* Section shells */
   section {
     padding-block: 1.5rem;
     margin-left: 60px;
     margin-right: 60px;
   }

   .section-header {
     display: flex;
     align-items: end;
     justify-content: space-between;
     gap: 1rem;
     margin-bottom: 1rem;
   }
   

   .section-title {
     font-size: 1.25rem;
     font-weight: 700;
     letter-spacing: 0.2px;
   }

   .section-desc {
     color: var(--muted);
     font-size: 0.95rem;
   }

   /* Card */
   .card {
     background: linear-gradient(0deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02)) padding-box,
       radial-gradient(120% 120% at 0% 0%, rgba(0, 229, 255, 0.25), rgba(0, 255, 163, 0.2), transparent 60%) border-box;
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: var(--radius);
     padding: 1rem;
     transition: border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease;
   }

   .card:hover {
     border-color: rgba(0, 229, 255, 0.45);
     transform: translateY(-2px);
     box-shadow: 0 10px 22px rgba(0, 229, 255, 0.08), 0 8px 18px rgba(0, 255, 163, 0.06);
   }

   .card h3 {
     margin: 0.25rem 0 0.25rem;
     font-size: 1.05rem;
   }

   .meta {
     color: var(--muted);
     font-size: 0.85rem;
   }

   .chip {
     display: inline-flex;
     align-items: center;
     gap: 0.4rem;
     font-size: 0.75rem;
     color: #001f19;
     background: var(--accent);
     border-radius: 999px;
     padding: 0.15rem 0.5rem;
     font-weight: 700;
   }

   /* Blog */
   .blog-grid .card p {
     color: var(--muted);
     margin: 0.25rem 0 0.75rem;
   }

  

   @media (min-width: 640px) {
     .download-item {
       grid-template-columns: 1fr auto;
     }
   }
   .pg-button {
    display: inline;
    
   }
   .pg-button button{
    width: 130px;
    height: 40px;
    border-radius: 90px;
    border: #00ffa3;
    background-color: #00ffa3;
    color: black;
    font-weight: 600;
    margin-top: 2%; 
    left: 40%; 
    position: relative;
   }
   
   
   @media (max-width:1030px){
    .pg-button button{
       left: 33%;
      
     }
   }
   @media (max-width:640px){
    .pg-button button{
      width: 90px;
      left: -12%

      ;
     }
   }
  

   /* Footer */
   .site-footer {
     padding-block: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     color: var(--muted);
     font-size: 0.9rem;
   }

   .footer-row {
     display: flex;
     flex-wrap: wrap;
     gap: 0.75rem;
     align-items: center;
     justify-content: space-between;
   }

   .footer-links {
     display: flex;
     gap: 0.75rem;
   }

   .footer-links a {
     color: var(--muted);
   }

   .footer-links a:hover {
     color: var(--text);
   }