@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


 :root {
     --mid: #031017;
     --mid-2: #051b24;
     --ink: #031a1d;
     --aqua: #35e0ff;
     --cyan: #00b7d7;
     --lime: #b7ff38;
     --lime-2: #8be600;
     --paper: #f6fff9;
     --muted: #a7cbd3;
     --line: rgba(53, 224, 255, .22);
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     height: 100%
 }

 body {
     margin: 0;
     background: radial-gradient(1400px 900px at 0% -10%, #073144 0%, var(--mid) 40%, #00090e 100%), linear-gradient(180deg, #041018, #05161c);
     color: #e9feff;
     font-family: Inter, system-ui, sans-serif;
     font-size: 17px
 }

 a {
     color: var(--aqua)
 }

 .layout {
     display: grid;
     grid-template-columns: 280px 1fr;
     min-height: 100dvh
 }

 aside {
     position: sticky;
     top: 0;
     height: 100dvh;
     background: linear-gradient(180deg, var(--mid-2), #041219);
     border-right: 1px solid var(--line);
     transition: transform .3s ease
 }

 .brand a {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 20px 16px;
     border-bottom: 1px solid var(--line)
 }
 

 .glyph {
    display: flex;
    align-items: center;
    justify-content: center;
  
 }
a {
    text-decoration: none;
    color: inherit;
}
 .brand b {
     font-family: Syne;
     letter-spacing: .6px;
     font-size: 18px
 }

 .side-nav {
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding: 14px
 }

 .side-nav a {
     padding: 11px 12px;
     border-radius: 10px;
     color: #d9faff;
     text-decoration: none;
     font-weight: 700;
     opacity: .92
 }

 .side-nav a:hover {
     background: rgba(53, 224, 255, .08)
 }

 .side-cta {
     margin-top: auto;
     padding: 14px
 }
.crest img {
    width: 50px;
    height: 50px;
    border-radius: 12px
}
 .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 11px 14px;
     border-radius: 12px;
     font-weight: 900;
     text-decoration: none
 }

 .btn.lime {
     background: linear-gradient(180deg, var(--lime), var(--lime-2));
     color: #062014;
     box-shadow: 0 10px 26px rgba(183, 255, 56, .18)
 }

 main {
     min-width: 0
 }

 .wrap {
     max-width: 1200px;
     margin: 0 auto;
     padding: 30px 20px
 }

 .block {
     margin-top: 22px
 }

 .block+.block {
     margin-top: 40px
 }

 /* HERO */
 .hero {
     display: grid;
     grid-template-columns: 1.2fr .8fr;
     gap: 22px;
     align-items: center;
     background: linear-gradient(120deg, rgba(53, 224, 255, .08), transparent 40%), radial-gradient(800px 500px at 90% -10%, rgba(183, 255, 56, .18), transparent 70%);
     border-bottom: 1px solid var(--line)
 }

 .kicker {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 7px 12px;
     border: 1px solid var(--line);
     border-radius: 999px;
     color: #d1f7ff;
     font-weight: 700
 }

 h1 {
     font-family: Syne;
     font-size: clamp(30px, 5.2vw, 60px);
     line-height: 1.02;
     margin: .3em 0
 }

 .hero p {
     opacity: .96;
     font-size: 18px
 }

 .orb {
     height: 500px;
     width: 100%;
    
     
 }

 .orb img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 /* SPOTLIGHT CARDS */
 .rail {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 16px;
     padding-bottom: 8px
 }

 .card {
     border: 1px solid var(--line);
     border-radius: 16px;
     background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .02));
     padding: 16px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .26)
 }

 .crest {
     width: 50px;
     height: 50px;
     border-radius: 12px;
     display: grid;
     place-items: center;
     font-weight: 900;
     color: #061510;
     background: linear-gradient(180deg, #e9ffb0, var(--lime));
 }

 .title {
     font-weight: 900;
     font-size: 18px
 }

 .meta {
     opacity: .85;
     font-size: 14px
 }

 .stars i {
     color: var(--lime)
 }

 /* CHIPS */
 .chips {
     display: flex;
     flex-wrap: wrap;
     gap: 10px
 }

 .chip {
     padding: 9px 12px;
     border-radius: 999px;
     border: 1px dashed var(--paper);
     background: rgba(53, 224, 255, .06);
     cursor: pointer;
     user-select: none;
     color: var(--paper);
 }

 .chip.active {
     background: rgba(183, 255, 56, .12);
     border-color: rgba(183, 255, 56, .4)
 }

 /* TABLE */
 table {
     width: 100%;
     border-collapse: collapse;
     border-radius: 14px;
     overflow: hidden
 }

 th,
 td {
     padding: 12px 12px;
     border-bottom: 1px dashed var(--line);
     font-size: 16px
 }

 th {
     background: rgba(53, 224, 255, .12);
     color: #001a17;
     position: relative;
     cursor: pointer
 }

 th .sort {
     position: absolute;
     right: 10px
 }

 /* CONTROLS */
 .dock {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     align-items: center;
     padding: 14px;
     border: 1px solid var(--line);
     border-radius: 14px;
     background: rgba(53, 224, 255, .05)
 }

 .input {
     flex: 1;
     min-width: 240px;
     padding: 12px 14px;
     border-radius: 12px;
     border: 1px solid var(--line);
     background: #041620;
     color: #e9feff;
     font-size: 16px
 }

 /* FLIP CARDS */
 .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px
 }

 .flip {
     perspective: 1000px
 }

 .flip-inner {
     position: relative;
     transform-style: preserve-3d;
     transition: transform .55s
 }

 .flip:hover .flip-inner {
     transform: rotateY(180deg)
 }

 .face {
     border: 1px solid var(--line);
     border-radius: 14px;
     background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
     padding: 16px;
     min-height: 170px;
     backface-visibility: hidden
 }

 .back {
     position: absolute;
     inset: 0;
     transform: rotateY(180deg)
 }

 /* STEPS */
 .steps {
     display: grid;
     gap: 12px;
     border-left: 2px solid var(--line);
     padding-left: 14px
 }

 .step b {
     font-family: Syne
 }

 /* FAQ */
 .faq {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px
 }

 details {
     background: rgba(53, 224, 255, .05);
     border: 1px solid var(--line);
     border-radius: 14px;
     padding: 12px 14px
 }

 summary {
     cursor: pointer;
     font-weight: 800;
     font-size: 18px
 }

 /* SAFETY */
 .banner {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 16px;
     border: 1px solid var(--line);
     border-radius: 14px;
     background: linear-gradient(90deg, rgba(183, 255, 56, .12), rgba(53, 224, 255, .08))
 }

 /* NEWSLETTER */
 .bar {
     display: flex;
     gap: 10px
 }

 /* METRICS */
 .metrics {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px
 }

 .metric {
     padding: 16px;
     border: 1px solid var(--line);
     border-radius: 14px;
     background: rgba(53, 224, 255, .05);
     text-align: center
 }

 .metric b {
     font-family: Syne;
     font-size: 30px
 }

 /* FOOTER */
 footer {
     border-top: 1px solid var(--line);
     background: #020c10;
     padding: 30px 20px
 }

 .foot {
     max-width: 1200px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 20px
 }

 .foot ul {
     list-style: none;
     padding: 0;
     margin: 0
 }

 .foot li {
     margin-bottom: 8px
 }

 .foot a {
     display: block;
     text-decoration: none;
     opacity: .92
 }

 .foot a:hover {
     opacity: 1;
     color: var(--lime)
 }

 .foot .meta {
     font-size: 14px;
     margin-bottom: 12px
 }

 /* BURGER MENU */
 .burger {
     display: none;
     font-size: 24px;
     padding: 16px;
     cursor: pointer;
     color: #e9feff;
     position: fixed;
     top: 10px;
     left: 10px;
     z-index: 20;
     background: rgba(0, 0, 0, .5);
     border-radius: 8px
 }
 .table {
    overflow: auto;
 }

 @media (max-width:760px) {
     .burger {
         display: block
     }

     aside {
         transform: translateX(-100%);
         position: fixed;
         z-index: 10;
         width: 260px
     }

     aside.active {
         transform: translateX(0)
     }

     .layout {
         grid-template-columns: 1fr
     }

     .hero {
         grid-template-columns: 1fr
     }

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

     .faq {
         grid-template-columns: 1fr
     }

     .metrics {
         grid-template-columns: 1fr 1fr
     }

     .rail {
         grid-template-columns: 1fr
     }

     .wrap {
         padding: 20px 15px
     }

     .foot {
         grid-template-columns: 1fr
     }
 }

 @media (max-width:1000px) {
     .grid {
         grid-template-columns: 1fr 1fr
     }

     .metrics {
         grid-template-columns: 1fr 1fr
     }

     .foot {
         grid-template-columns: 1fr 1fr
     }
 }

 @media (max-width:1100px) {
     .layout {
         grid-template-columns: 220px 1fr
     }
 }

 @media (max-width:600px) {
     .input {
         min-width: 100%
     }

     .dock {
         flex-direction: column
     }

     .btn.lime {
         width: 100%;
         justify-content: center
     }
 }
 @media (max-width:500px) {
     .metrics {
         grid-template-columns: 1fr
     }
     .foot {
         grid-template-columns: 1fr
     }
     .layout {
        grid-template-columns: 350px 1fr;
    }
    .brand b {
       display: none;
    }
    .brand a {
       justify-content: flex-end;
    }
 }