/* 
css rules:
-all colors at root using vars
-at bottom = media queries 
- css flows like html each section of css is related to something with comment to see where category starts and ends
- below root is global related css and resuable general css
- use rem generally and ch for chars avoid static sizes unless needed (to get working code for mobile 1080 2k and 4k screens)
- always snake_case
- reuse genric exiting css if possible first
*/




/*COLOR SCHEME*/
:root{
  --bg: #EAEAEA;
  --text: rgba(22, 26, 26, 0.9);
  --bg2: rgba(22, 26, 26, 0.8);
  --text2: #FAF6F9;
  --CTA_text:white;
  --CTA_text2: #DC143C;
  --Section1: rgba(234, 234, 234, 0.8);
  --Section2:rgba(22, 26, 26, 0.97);
  --section_text: rgba(22, 26, 26, 0.8);
  --border_color: rgba(22, 26, 26, 0.8);
  --nav_text: rgba(200, 200, 200, 0.9);
  --nav_active:rgba(255, 255, 255, 1);
  --nav_background: rgb(22, 26, 26);
  --subtle_text:#888 ;
  --gradiant: linear-gradient(135deg, #F5010E, #9B51E0);
  --optimized_text: #3a6eff;
  --unoptimized_text: #faf6f98e;
  --wifi_title: #FAF6F9;
  --ethernet_title: #FAF6F9;
  --performance_title: #DC143C;
  --page_title: rgba(22, 26, 26,0.9);
  --green:#3ad55c;
  --purple: #9B51E0;
  --stat_good_start: #3a6eff;      /* blue - matches --optimized_text */
  --stat_good_end: #9B51E0;        /* purple - matches --purple */
  --stat_bad_start: #e07b3a;       /* orange */
  --stat_bad_end: #F5010E;         /* red */
  --stat_good_grad: linear-gradient(90deg, #3a6eff, #9B51E0);
  --stat_bad_grad: linear-gradient(90deg, #e07b3a, #F5010E);

  --chosen: rgb(42, 46, 46);

  --purple_chroma: #a370ca;

  /* download table*/
  --table_bg: rgb(245, 245, 250);
  --table_border:#ccd2d4;
  --row1:#F5F5F5;
  --row2:#D3D3D3;
  --row_hover:rgb(22, 26, 26,0.9);
  --standard_v:#f5cb27;
  --premium_v: linear-gradient(135deg, #F5010E, #9B51E0);
  --premium_text: #9b40ef;
  --features_colmn:#D3D3D3;


  /* Navbar code by WebDevSimplified, licensed under MIT */
  --bar-width: 45px;
  --bar-height: 6px;
  --hamburger-gap: 6px;
  --hamburger-margin: 1.4rem;
  --animation-timing: 200ms ease-in-out;
  --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
  --foreground: #333;
  --background: white; /*-end-*/
}
/*FONTS IMPORTS*/
@font-face {
  font-family: 'lexend'; /* Name your font family */
  src: url('fonts/Lexend-VariableFont_wght.ttf'); /* title/engraved-text */ /* Locate the .ttf file within your directory*/
}
@font-face {
  font-family: 'outfit'; 
  src: url('fonts/Outfit-VariableFont_wght.ttf'); /*link file*/
}
@font-face {
  font-family: 'kanit'; /* Name your font family */
  src: url('fonts/Kanit-Regular.ttf'); /*link file*/
}
@font-face {
  font-family: 'bebas';
  src: url('fonts/BebasNeue-Regular.ttf');
}
@font-face {
  font-family: 'chakra';
  src: url('fonts/ChakraPetch-Regular.ttf'); 
}
@font-face {
  font-family: 'gabarito';
  src: url('fonts/Gabarito-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'josefin';
  src: url('fonts/JosefinSans-VariableFont_wght.ttf'); 
}
@font-face {
  font-family: 'league';
  src: url('fonts/LeagueSpartan-VariableFont_wght.ttf'); /* username potential */
}
@font-face {
  font-family: 'redhat';
  src: url('fonts/RedHatDisplay-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'righteous';
  src: url('fonts/Righteous-Regular.ttf'); /* logo potential */
}
@font-face {
  font-family: 'sen';
  src: url('fonts/Sen-VariableFont_wght.ttf'); /* text/nav potential */
}
@font-face {
  font-family: 'teko';
  src: url('fonts/Teko-VariableFont_wght.ttf');
}
@font-face {
  font-family: 'titi';
  src: url('fonts/TitilliumWeb-Regular.ttf');
}
/*Serif fonts-------------------------------------------------------------------*/
@font-face {
  font-family: 'alegreya';
  src: url('fonts/Alegreya-VariableFont_wght.ttf');
} 
@font-face {
  font-family: 'arvo';
  src: url('fonts/Arvo-Regular.ttf');
} 
@font-face {
  font-family: 'cormorant';
  src: url('fonts/Cormorant-VariableFont_wght.ttf');
} 
@font-face {
  font-family: 'libre';
  src: url('fonts/LibreBaskerville-Regular.ttf');
} 
@font-face {
  font-family: 'slabo';
  src: url('fonts/Slabo27px-Regular.ttf');
} 
@font-face {
  font-family: 'spectral';
  src: url('fonts/Spectral-Regular.ttf');
} 
/*
@font-face {
  font-family: '';
  src: url('fonts/');
}
*/ 


.debug{
  /* border: 1px dotted red; */
}



h1,h2,h3,h4,h5,h6,a[class^="cta"],a[class*="cta"],.username,details {font-family: lexend;}
p,label,li,textarea{font-family: outfit;} 
a{font-family: outfit;}

html,body{
  overflow-x: hidden; /*comment for debugging*/
  scroll-behavior: smooth; /* smooth scroll effect */
}

body {
  background-color: var(--bg);
  --page-margin: 1.5rem;      /* local variable */
  padding: 0;
  margin: var(--page-margin);
  min-height: calc(100vh - (2 * var(--page-margin))); /* top + bottom margins */
  display: flex;
  flex-direction: column;
  position: relative;
}

h1,h2,h3,h4,h5,h6 {text-wrap: balance;}
p,li,figcaption{max-width: 65ch; text-wrap: pretty;}

p,h1,h2,h3,h4,h5,h6{
  color: var(--text);
}

* {
  font-size: 100%;
}

::selection{
  color: #F5010E;
  background-color:rgba(245, 1, 14,0.075) ;
}

textarea{
  color: var(--text);
}

.general-text{
  color:var(--text);
  margin: 3rem 1.5rem;
  line-height: 1.6;
}

.hamburger-menu, /* Navbar code by WebDevSimplified, licensed under MIT */
.hamburger-menu::after,
.hamburger-menu::before {
  box-sizing: border-box; /*-end*/
}

.grid-horizontal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  place-items: center; /* Equivalent to align-items: center; justify-items: center */
  gap: 10px;
  width: 100%;
  max-width: 62.4rem;
  margin: 10px;
}

.horizontal-stack{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
    max-width: calc(100% - 40px); /* 100% of page minus 20px left + 20px right */
    margin: 0 auto; /* Centers the grid, creating 20px margins on left/right */
    gap: 10px;
}

.horizontal-stack-footer{
  display: grid;
  grid-template-columns: 2.5fr repeat(3, 1fr);
    max-width: calc(100% - 40px); /* 100% of page minus 20px left + 20px right */
    margin: 0 auto; /* Centers the grid, creating 20px margins on left/right */
    gap: 10px;
}

.flex-centerer {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; 
}

.grid-wrapper {
    margin: 0 20px; /* 20px margins on left and right, 0 on top/bottom */
    width: inherit;
}

.width100 {
  width: 100%;
}

.flex-stacker {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.centered-stuff {
  margin: 0px 5px 0px 5px;
}

.search {
  display: grid;
  justify-content: center;
  place-items: center;
  text-decoration: none;
  text-align: left;
  margin: 0px 5px 0px 5px;
  border-radius: 10px;
  color: var(--text);
  background-color: var(--bg);
  border: 1px solid var(--border_color);
  font-weight: 300;
  height: 30px;
  width: 20vh;
}

#p01 {
  text-align: left;
}

.main_section {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  top: -23vh;
  border: 0.33rem solid rgba(26,22,26, 0.25);
  border-radius: 9px;
}

/* decorative background layer — only this sits behind other content */
.main_section::before {
  
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--Section2);
  z-index: -1;
  border-radius: 4px;
}

.nav-main {
  display: flex;
  justify-content: center;
  padding: 10px 0px 10px 0px;
  height: 76px;
  background-color: var(--nav_background);
  overflow: hidden;
  border-radius: 9px;
  border: 0.33rem solid rgba(26,22,26, 0.25);
  box-sizing: border-box;
  background-clip: padding-box;
}

.nav-ess {
  display: flex;
  justify-content: left;
  position: absolute;
  left: 0%;
  margin-top: 5px;
  margin-left: 10px;
}


.left_nav {
  display: flex;
  justify-content: left;
  position: absolute;
  left: 32vh;
  margin-top: 5px;
  margin-left: 10px;
}

.right_nav {
  display: flex;
  justify-content: right;
  position: absolute;
  right: 0%;
  margin-top: 5px;
  margin-right: 2rem;
}


.nav-link,
.nav-img,.nav-download,.nav-login,.nav-profile {
  display: grid;
  justify-content: center;
  place-items: center;
  text-decoration: none;
  text-align: center;
  margin:0px 5px;
  border-radius: 10px;
  color: var(--nav_text);
  height: 35px;
  width: 100px;
  font-weight: bold;
}

.nav-img {
  color: var(--nav_text);
  height: 5rem;
  width: 5rem;
  height: 100%;
}

.nav-download {
  color: var(--CTA_text2);
}
.nav-login {
  color: #01d0f5;
}

.nav-profile {
  color: var(--optimized_text);
}

.nav-link:hover,.nav-download:hover,.nav-login:hover {
  color: var(--nav_active);
}

.nav-link:active {
  color: var(--nav_active);
}

#active {
  color: var(--nav_active);
}


#logo {
    height: 100%;
    width: 100%;
    min-width: 5rem;
    min-height: 5rem;
    display: inline;
    margin-top: -1.5rem;
}

.nav-line {
  width: 0px;
  height: 2.5rem;
  border: 1px solid var(--nav_text);
  display: inline;
  position: relative;
  top: -0.665rem;
}

.nav-desc {
  display: grid;
  justify-content: center;
  place-items: center;
  text-decoration: none;
  text-align: left;
  display: inline;
  color: var(--nav_text);
  font-weight: 300;
  font-size: 14px;
  height: 35px;
  width: 150px;
  position: relative;
  top: -0.84rem;
  margin-left: 1.5vh;
}

.mobile-nav{
  display: none;
}

.hamburger-menu { /* Navbar code by WebDevSimplified, licensed under MIT */
  --x-width: calc(var(--hamburger-height) * 1.41421356237);

  display: flex;
  flex-direction: column;
  gap: var(--hamburger-gap);
  width: max-content;
  position: absolute;
  top: var(--hamburger-margin);
  right:var(--hamburger-margin);
  z-index: 2;
  cursor: pointer;
}

.hamburger-menu:has(input:checked) {
  --foreground: white;
  --background: #333;
}


.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
  border: 3px solid var(--background);
  box-shadow: 0 0 0 3px var(--foreground);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--nav_text);
  border-radius: 9999px;
  transform-origin: right center;
  transition: opacity var(--animation-timing), width var(--animation-timing),
    rotate var(--animation-timing), translate var(--animation-timing),
    background-color var(--animation-timing);
}

.hamburger-menu input {
  appearance: none;
  padding: 0;
  margin: 0 ;
  outline: none;
  pointer-events: none;
  transform: scaleX(-1) translateX(calc(-1 * var(--x-width) - 2px));
  transform-origin: left;
  
}


.hamburger-menu:has(input:checked)::before {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2);
}

.hamburger-menu:has(input:checked)::after {
  rotate: +45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / 2);
}

.hamburger-menu input:checked {
   opacity: 0;
  width: 0;
}

.sidebar {
  transition: translate var(--animation-timing);
  translate: 100%;
  padding: 0.5rem 1rem;
  padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
  background-color: var(--nav_background);
  color: var(--nav_text);
  max-width: 10rem;
  min-height: 50vh;
  position: absolute;
  right: 0;
  z-index: 4;
}


.hamburger-menu:has(input:checked) + .sidebar {
  translate: 0;
} /*-end-*/

.footer {
  box-sizing: border-box;
  background-clip: padding-box;
  display: grid;
  place-items: center;
  width: 100%;
  background-color: var(--nav_background); 
  text-align: center;
  margin-top: auto; 
  border-radius: 9px;
  border: 0.33rem solid rgba(26,22,26, 0.25);
}

.footer-text{
  color: var(--nav_text);
}

footer > div > div > div {
  margin: 1rem 0rem;
}

.footer-nav, .company-footer{
  list-style: none;     /* removes numbers/dots */
  padding-left: 0;      /* removes default indent */
  margin-left: 0;       /* optional: removes extra margin */
  text-align: left;
  text-decoration: none;
}


.footer-nav > li:first-child,.company-footer > li:first-child {
  font-weight: bold; /* example: make it look like a header */
  margin-bottom: 1rem; /* example: extra spacing below */
  margin-top: 0.5rem;
}

.footer-nav > li{
  margin: 0.25rem 0;
}
.footer-nav .nav-link, .footer-nav .nav-login{
  display: initial;
  justify-content: left;
  place-items: left;
  text-decoration: none;
  text-align: left;
  margin:0px 0px;
  /* border-radius: 10px; */
  /* color: var(--nav_text); */
  height: 35px;
  width: 100px;
  font-weight: bold;
}

.footer-nav .nav-link:hover,.nav-download:hover,.nav-login:hover {
  color: var(--nav_active);
}

.company-footer > li{
  margin: 1rem 0rem 2rem 0rem;
}
.company-footer > li> p{
  max-width: 42ch;
  text-wrap: pretty;
  color: var(--background);
}



.back-to-top {
z-index: 99;
  --b: 1px;        /* border thickness */
  --ext: 7px;      /* extension beyond corners */
  --c: var(--premium_text);       /* border color */
  --o: 0.3;

  display: none;

  position: fixed;  /* stays in viewport regardless of scroll */
  bottom: 2.25rem;     /* distance from bottom of viewport */
  left: 2.25rem;
  
   background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.3), 
    rgba(255, 255, 255, 0.1) 35%, 
    rgba(0, 0, 0, 0.1) 85%,
    rgba(0, 0, 0, 0.15)
  ); 
  background-color: rgba(255, 255, 255, 0.08);
   box-shadow: 
    0.25rem 0.25rem 10px 0.2rem rgba(12, 16, 16, 0.29), 
   -0.25rem -0.25rem 10px 0.2rem rgba(244, 244, 244, 0.09),
  inset 1rem 1rem 60px 0.2rem rgba(22, 26, 26, 0.195),
  inset -1rem -1rem 20px 0.2rem rgba(234, 234, 234, 0.115),
    inset -0.125rem -0.125rem 0.1rem -7px rgba(253, 243, 255, 0.9),
  inset 0.125rem 0.125rem 0.9rem -7px rgba(253, 243, 255, 0.9),  
    inset -0.030rem -0.030rem 0.051rem 0.1px rgba(253, 243, 255, 1), 
   
   inset 0 1px 2px rgba(0, 0, 0, 0.5);   
  backdrop-filter: blur( 3px );
  -webkit-backdrop-filter: blur( 3px );



  border: 0.095rem solid transparent;               /* keep width via border */
  border-image: linear-gradient(-140deg,
                 rgba(199,199,199,0.95),
                 rgba(67, 67, 67, 0.45),
                 rgba(67, 67, 67, 0.5),
                 rgba(224, 224, 224, 0.65),
                 rgba(67, 67, 67, 0.4),
                 rgba(224, 224, 224, 0.9),
                 rgba(67, 67, 67, 0.5)) 1;            /* <- gradient + slice */                           /* usually works */
  


  color: #ffffff;
  border-radius: 3px;
  height: 3.5rem;
  line-height: 3.5rem;
  width: 9rem;
  text-decoration: none;
  font-size: 1.25rem;
  opacity: 0.92;
  transition: opacity 0.3s, transform 0.3s;
  text-align: center;
  /* border: solid 0.11rem rgba(255, 255, 255, 0.2); */
  /* filter: drop-shadow(0px 0px 0.1pt rgba(36, 36, 36, 0.382)); */
}

.back-to-top span {
  filter: drop-shadow(0px 0px 1pt rgba(36, 36, 36, 0.982))
   /* drop-shadow(10px 0px 12px rgba(234, 234, 234, 0.908)) */
/* drop-shadow(1px 1px 1ch rgba(234, 234, 234, 0.208)) */
 /* drop-shadow(1px 1px 0.7em rgba(234, 234, 234, 0.908))  */
/*drop-shadow(1px 1px 1vw rgba(234, 234, 234, 0.908)) */
drop-shadow(0px 0px 1pt rgb(from var(--text) r g b / 0.5))
drop-shadow(20px 20px 0.39em rgb(from var(--text2) r g b / 0.5))
drop-shadow(-20px -20px 0.37em rgb(from var(--text2) r g b / 0.5))
 /* drop-shadow(1px 1px 0.8in rgba(234, 234, 234, 0.093))
drop-shadow(0px 0px 0.1mm rgba(36, 36, 36, 0.382))  */
/*drop-shadow(1px 1px 0.3Q rgba(234, 234, 234, 0.908))  */;
}

.back-to-top:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.back-to-top::before,
.back-to-top::after {
  display: none;
  content: "";
  position: absolute;
  left: calc(-1 * var(--ext));                 /* move left so it extends */
  width: calc(100% + calc(var(--ext) * 2));    /* full + extension both sides */
  height: var(--b);
  background: var(--c);
  pointer-events: none;
  opacity: var(--o);
}

.back-to-top::before { top: 0; }    /* top bar */
.back-to-top::after  { bottom: 0; } /* bottom bar */

/* helper element to render vertical bars (we need 2 more pseudo-elements) */
.back-to-top .v {
  position: absolute;
  inset: 0;                 /* fill parent */
  pointer-events: none;
}

/* vertical bars: left & right */
.back-to-top .v::before,
.back-to-top .v::after {
  display: none;
  content: "";
  position: absolute;
  top: calc(-1 * var(--ext));                  /* extend above */
  height: calc(100% + calc(var(--ext) * 2));   /* full + extension above & below */
  width: var(--b);
  background: var(--c);
  pointer-events: none;
  opacity: var(--o);
}

.back-to-top .v::before { left: 0; }   /* left bar */
.back-to-top .v::after  { right: 0; }  /* right bar */


.hoverable-line{
margin: 3px 0;
}

/* Style the .hoverable-line and its children if it starts with .hoverable-word */
.starts-with-hoverable-word {
  padding: 0;
  margin: -3px 0;
}

.starts-with-hoverable-word .hoverable-word {
 font-family: alegreya;
 font-variant-numeric: lining-nums tabular-nums slashed-zero;
 font-weight: 500;
 font-size: 1rem;
}


.starts-with-hoverable-word .hoverable-space {
  padding: 0;
  margin: -3px 0;
  line-height: 1.6;
}


.hoverable-paragraph {
  font-size: 1rem;
  cursor: text;
  user-select: text;
  color: var(--subtle_text);
}

/* Styling words and spaces */
.hoverable-word, .hoverable-space {
  display: inline-block;
  position: relative;
  transition: color 0.05s ease-out, background-color 0.1s ease-out;
  vertical-align: middle; /* Align elements to the middle of the line */
  line-height:1.6; /* Controls spacing between lines */
  font-family:arial;
  max-width: fit-content;
  word-break: break-word;  /* Ensures the word breaks if needed */
  overflow-wrap: break-word; /* Ensures words wrap to next line */
  white-space: normal; /* Ensures text wraps properly */
}

/* For space spans */
.hoverable-space {
  width: 0.25em; /* Keeps space proportional */
  height: 1.6em; /* Matches the height of text */
  background-color: transparent;
  line-height: inherit; /* Inherits the same line height as the text */
  vertical-align: middle; /* Ensures alignment with text */
  margin: 0; /* Removes any margin that could cause misalignment */
  padding: 0; /* Ensures no extra space inside the span */
}

/* Background animation */
.hoverable-word::before, .hoverable-space::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 26, 26, 0.7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.1s ease-out;
  z-index: -1;
}

/* Hover effect for background */
.highlighted::before {
  transform: scaleX(1);
}

/* Highlighted color effect */
.highlighted {
  background-color: rgba(22, 26, 26, 0.7);
  color: #FAF9F6;
  filter: drop-shadow(2px 2px 0.5px rgb(164, 164, 164));
  text-shadow:
  1px 1px 2px rgb(0, 0, 0),
  0 0 1px rgb(255, 255, 255);
}


.main-vp{
  display: grid;
  place-items: center;
  position: relative;
  min-height: 75vh;
  min-width: 100vh;
}

.vp-right{
  position: absolute;
  top: 7.5rem;
  right: 5.6rem;
  height: 20rem;
  width: 20rem;
  border-radius: 2rem;
  z-index: -2;
}

.vp-img{
  height: 20rem;
  width: 20rem;
  border-radius: 2rem;
  opacity: 0.9;
  display: none;
}

.value-proposition{
  text-align: left;
  position: absolute;
  left: 4vh;
}
.vp-title{
  font-size: 3.33rem;
  font-weight: 500;
  line-height: 1; 
  padding: 0;
  margin: 0;
}

.intersect-2lines {
  text-align: center;
  position: relative;
  left: 25vh;
  opacity: 0.5;
  line-height: 0; 
  font-size: 2rem;
  font-weight: 300;
  display: inline-block;
  z-index: +1;
}

.vp-body{
  max-width: 39ch;
  text-wrap: pretty;
  font-size: 1.075rem;
}

.red-highlight{
color: var(--CTA_text2);
}

.vp-points{
  opacity: 0;
  visibility: hidden;
  position: relative;
  position: absolute;
  right: 8.5vh;
  bottom: 1vh;
  font-size: 0.85rem;
  line-height:1.2;
  font-weight: 400;
  border: solid 2px;
  border-radius: 10px;
  padding: 0.33rem;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.green-check{
  color: var(--green);
}

.cta{
  display: grid;
  align-items: center;
  height: 3rem;
  width: 10rem;
  background: var(--gradiant);
  box-shadow: 0px 0px 0px 0.025rem rgb(255, 255, 255),
  inset 0 0 0 0.2rem rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur( 8px );
  -webkit-backdrop-filter: blur( 8px );
  border: 2px solid white;
  color: var(--CTA_text);
  padding:0 1vh 0 1vh;
  border-radius: 10px;
  text-decoration: none;
  font-size: 1.25rem;
  text-align: center;
  overflow: hidden;
  line-height: 2.2;
}



.cta:hover{
transform: scale(1.05);
box-shadow: inset 0 0 0 0.25rem rgba(255, 255, 255, 0.4),
4px 4px 10px rgba(155, 81, 224, 0.3),
-4px -4px 10px rgba(245, 1, 14, 0.3);
transition: 
transform 0.3s ease-in-out;
}

.cta:hover + .vp-points{
  opacity: 1;
  visibility: visible;
}

.gleam {
  position: absolute;
  top: 50%;
  left: -100%; /* Start position outside the left edge */
  width: 100%; /* Width larger than button for full coverage */
  height: 15px; /* Height of the gleam */
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.8), transparent); /* Gradient effect */
  transform: rotate(-55deg) translateY(-50%); /* Center vertically */
  animation: gleam 3s infinite; /* Animation for the gleam effect */
}

@keyframes gleam {
  0% {
    left: -75%; /* Start from far left */
    animation-timing-function: ease-in; /* Fast at start */
  }

  25% {
    left: -26.5%; /* Start from far left */
    animation-timing-function: linear; /* Slow in the middle */
  }
  75% {
  left: 35%; /* Start from far left */
  animation-timing-function: linear; /* Continue slow */
  }

  100% {
    left: 125%; /* Move to far right */
    animation-timing-function: ease-out; /* Fast at end */
  }
}

.cta-desc{
  font-size:0.75rem;
  opacity: 0.5;
  line-height: 1;
}

/*--benefits sections--*/

.cards {
    display: grid;
    gap: 40px;
    padding: 16px;

    grid-template-columns: repeat(auto-fit, 16rem); /* fixed columns */
    justify-content: center; /* center whole grid */
    z-index: 5;
  }

  .card {
     border: 0.23rem solid rgba(26,22,26, 0.25);
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 16rem;
    height: 22rem;
    padding: 0.5rem;

  border-radius: 6px;
  /*
  background: var(--Section1);
  box-shadow: 0.25rem 0.25rem 10px 0.2rem rgba(12, 16, 16, 0.27),
  -0.25rem -0.25rem 10px 0.2rem rgba(244, 244, 244, 0.69),
  inset 1rem 1rem 60px 0.2rem rgba(22, 26, 26, 0.045),
  inset -1rem -1rem 20px 0.2rem rgba(234, 234, 234, 0.195);
  backdrop-filter: blur( 8px );
  -webkit-backdrop-filter: blur( 8px );
  border: 1px solid rgba( 255, 255, 255, 0.18 ); */

   background-color: rgba(234, 234, 234, 0.944);
  /* box-shadow: 
    0.25rem 0.25rem 10px 0.2rem rgba(46, 61, 61, 0.29), 
   -0.25rem -0.25rem 10px 0.2rem rgba(244, 244, 244, 0.097),
    inset 1rem 1rem 60px 0.2rem rgba(178, 180, 180, 0.403),
    inset -1rem -1rem 20px 0.2rem rgba(29, 29, 29, 0.095),
    inset -0.125rem -0.125rem 0.1rem rgba(3, 0, 3, 0.36),
    inset 0.125rem 0.125rem 1.3rem rgba(253, 243, 255, 0.9),  
    inset -0.030rem -0.030rem 0.051rem rgb(253, 243, 255), 
  
   inset 0 1px 2px rgba(0, 0, 0, 0.5),  
   inset 2rem 5rem 4.3rem 0.9rem rgba(253, 243, 255, 0.403);
  
  backdrop-filter: 
  grayscale(70%),
  brightness(1.5),
  contrast(200%),
  saturate(3),
  blur(3px);
  -webkit-backdrop-filter: blur( 3px );



  border: 0.095rem solid transparent;             
   border-image: linear-gradient(120deg,
                 rgba(227, 14, 14, 0.05),
                 rgba(199,199,199,0.95),
                 rgba(67, 67, 67, 0.5),
                 rgba(67, 67, 67, 0.45),
                 rgba(67, 67, 67, 0.05),
                 rgba(67, 67, 67, 0.05),
                 rgba(224, 224, 224, 0.65),
                 rgba(67, 67, 67, 0.4),
                 rgba(224, 224, 224, 0.9),
                 rgba(67, 67, 67, 0.5),
                 rgba(224, 224, 224, 0.9),
                 rgba(67, 67, 67, 0.05)) 1;            */

    --line-color: rgba(26,22,26, 0.25);
    --line-thickness: 0.16rem;
    --line-length: 1.75rem;
    position: relative;
}

/* .card::before{
  position: absolute;
  content: "";
  z-index: -3;
  width: inherit;
  height: inherit;
  padding: inherit;
  top: -0.18rem;
  left: -0.18rem;
  background-color: rgba(234, 234, 234, 0.944);
  
  border-radius: 6px;
  border: 0.23rem solid rgba(26, 22, 26, 0.25);      
} */

.line {
    position: absolute;
    width: var(--line-length);
    height: var(--line-thickness);
    background: var(--line-color);
    transform-origin: left center;
    border-radius: 45%;
    opacity: 0;
  }

.tl-1 { top: -2px; left: 0px; transform: rotate(45deg); }
/* TOP RIGHT */
.tr-1 { top: -2px; right: 0px; transform-origin: right center; transform: rotate(-45deg); }
/* BOTTOM LEFT */
.bl-1 { bottom: -2px; left: 0px; transform: rotate(-45deg); }
/* BOTTOM RIGHT */
.br-1 { bottom: -2px; right: 0px; transform-origin: right center; transform: rotate(45deg); }

.section-text,.section-text-title{
  font-size: 2.2ch;
color: var(--section_text);
/* filter: 
drop-shadow(10px 0px 12px rgba(234, 234, 234, 0.908))
drop-shadow(1px 1px 1ch rgba(234, 234, 234, 0.908))
drop-shadow(1px 1px 0.7em rgba(234, 234, 234, 0.908))
drop-shadow(1px 1px 1vw rgba(234, 234, 234, 0.908))
drop-shadow(1px 1.5px 1pt rgba(255, 255, 255, 0.908))
drop-shadow(1px 1px 0.8in rgba(234, 234, 234, 0.093))
drop-shadow(0px 0px 0.1mm rgba(36, 36, 36, 0.382)) 
drop-shadow(1px 1px 0.3Q rgba(234, 234, 234, 0.908)) 
; */

}

.section-text-title{
  text-align: center;
}

.title-1{color:#F5010E;}
.title-2{color:#01d0f5;}
.title-3{color:#dcc203;}
.title-4{color:#3ad55c;}

.performance-proof-main{
  position: relative; /* Reintroduce absolute positioning */
  top: -23vh; /* Move it upwards to intersect the previous section */
  display: flex;
  flex-direction: column; /* Stack sections vertically */
  align-items: center;
  min-height: 124vh;
  width: 100%; 
  background-color: var(--Section2);
  padding: 2rem 0; 
  z-index: -1;
}

.performance-section{
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: left;
  width: 100%;
  margin-top: 23vh;
}

.centered-title{
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 0.5; 
  color:var(--performance_title);
  text-align: center;
  margin-bottom: 1rem; /* Space below title */
}

.centered-title-spaced{
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1.1; 
  color:var(--page_title);
  text-align: center;
  margin: 2rem;
  margin-top: 5rem;
}

.inverted_text{
  color: #EAEAEA;
  color: var(--text2);
}

.comparison-container{
  display: grid;
  place-items: center;
  position: relative;
  gap: 10px;
  margin-top: 3rem;
}

.comparison-section{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 504.2px;
  place-items: center; /* Equivalent to align-items: center; justify-items: center */
  gap: 10px;
  width: 100%;
  margin: 10px;
  margin-top: 1rem; /* Ensure it starts below the previous element */
}

.net-type1,.net-type2{
  color: var(--text2);
  position: absolute;
  top: 50%;
  left: 0;
  text-align: left;
  margin: 0 0vh 0 12vh;
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 0.5; 
  filter: drop-shadow(0 0px 0.25rem rgba(58, 110, 255, 0.2));
}

.optimized,.unoptimized,.optimized-stats,.unoptimized-stats{
  min-width: 120px;
  text-align: left;
}

.compare-line {
  border: none;
  width: 1px;                             /* Keeps it thin */
  height: 80%;
  background-color: rgba(58, 110, 255, 0.4); /* Slightly lower opacity */
  opacity: 0.7;
  border-radius: 5px;
  /* Box shadow for an engraved effect */
  box-shadow: 
      3px 0px 4px rgba(58, 110, 255, 0.3),
     -3px 0px 6px rgba(58, 110, 255, 0.8); /* Slightly lighter shadow on the left */
}

.net-type1 {
  color: var(--wifi_title); /* Wi-Fi */
}


.net-type2 {
  color: var(--ethernet_title); /* Ethernet */
}

.optimized,.optimized-stats{
  color: var(--optimized_text);
}

.unoptimized,.unoptimized-stats{
  color: var(--unoptimized_text);
}


/*–– stat_overview: stacked progress comparison ––––––––––––––––––––––––––––*/
.stat_main_section {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  top: -23vh;
  border: 0.33rem solid rgba(26,22,26, 0.25);
  border-radius: 9px;
}

/* decorative background layer — only this sits behind other content */
.stat_main_section::before {
  
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--Section2);
  z-index: -1;
  border-radius: 4px;
}

.stat_main_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 23vh;
  padding: 3rem 1.5rem;
  box-sizing: border-box;
}

.stat_toggle_wrap {
  position: relative;
  display: flex;
  gap: 3px;
  margin-bottom: 1rem;
  background: var(--nav_background);
  padding: 3px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
}

.stat_toggle_btn {
  position: relative;
  border: none;
  padding: 0.5rem 2rem;
  font-family: outfit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--nav_text);
  background: transparent;
  cursor: pointer;
  border-radius: 30rem 0px 0px 30rem;
}

.stat_toggle_btn.active {
  background: var(--chosen);
  color: var(--nav_active);
  border-radius: 30rem;
}

/* data-mode visibility: only show spans matching active mode */
.stat_main_section[data-mode="wifi"] .stat_val_eth { display: none; }
.stat_main_section[data-mode="eth"]  .stat_val_wifi { display: none; }

/* general utility */
.hidden { display: none; }

.stat_main_title {
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 0.5;
  color: var(--performance_title);
  text-align: center;
  margin-bottom: 2.5rem;
}

.stat_flex_container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  width: 100%;
  max-width: 1000px;
  margin: 3rem 0 3rem 0;
}

/*–– left column ––*/
.stat_left {
  flex: 1;
  text-align: left;
  min-width: 200px;
}

.stat_title {
  font-size: 1.4em;
  font-weight: 600;
  color: var(--text2);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.stat_subtitle {
  font-size: 0.85rem;
  color: var(--subtle_text);
  margin: 0;
  line-height: 1.4;
  max-width: 28ch;
}

/*–– center column (progress bars) ––*/
.stat_center {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 200px;
}

.stat_bar_wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* labels above each bar */
.stat_bar_labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  font-family: outfit;
}

.stat_label_before {
  color: var(--subtle_text);
  font-weight: 400;
}

.stat_label_end {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
}

/* label colours match their bar gradient */
.stat_label_end.worst {
  color: var(--stat_bad_end);
}
.stat_label_end.best {
  color: var(--stat_good_end);
}

/* <progress> reset + shared styles */
.stat_bar {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  width: 100%;
  height: 12px;
  border-radius: 6px;
  overflow: hidden;
}

.stat_bar::-webkit-progress-bar,
.stat_bar::-moz-progress-bar {
  border-radius: 6px;
  background-color: rgba(22, 26, 26, 0.08);
}

.stat_bar::-webkit-progress-value {
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* bad / top bar — orange → red */
.stat_bar_bad::-webkit-progress-value {
  background: linear-gradient(90deg, #e07b3a, #F5010E);
}
.stat_bar_bad::-moz-progress-bar {
  background: linear-gradient(90deg, #e07b3a, #F5010E);
}

/* good / bottom bar — blue → purple */
.stat_bar_good::-webkit-progress-value {
  background: linear-gradient(90deg, #3a6eff, #9B51E0);
}
.stat_bar_good::-moz-progress-bar {
  background: linear-gradient(90deg, #3a6eff, #9B51E0);
}
/*–– right column ––*/
.stat_right {
  flex: 0.8;
  text-align: center;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stat_percent {
  font-size: 2.5rem;
  font-weight: 700;
  font-family: lexend;
  background: var(--stat_good_grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin: 0;
}

.stat_change_label {
  font-size: 0.85rem;
  color: var(--subtle_text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-top: 0.25rem;
}

/*–– mobile: collapse to vertical stack ––*/
@media only screen and (max-width: 768px) {
  .stat_flex_container {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  .stat_left { text-align: center; }
  .stat_subtitle { max-width: none; text-align: center; }
  .stat_center { width: 100%; }
  .stat_right { text-align: center; }
}



.testimonials-main{
  position: relative;
  top: -23vh;
  display: flex;
  flex-direction: column; /* Stack sections vertically */
  align-items: center;
  min-height: 100vh;
  width: 100%;
  background-color: var(--bg);
  padding: 4rem 0;
}

.testimonials-container{
  display: flex;           /* Switch from grid to flex */
  flex-direction: column;  /* Stack items vertically */
  align-items: center;     /* Center-align items in the column layout */
  gap: 0px;               /* Adjust spacing as needed */
  width: 100%;
  margin: 10px;
  margin-top: 3rem;
  max-width: 75rem; 
}

.testimonials{
  display: flex;
  list-style-type: none;
  margin:  0 1.2vh;
  border-radius: 5px;
  padding: 0;
}
.mini-test{
  position: relative;
  flex-grow: 1;
  min-height: 16vh;
  width: 100%;
  background: var(--Section2);
  box-shadow: 0.25rem 0.25rem 10px 0.2rem rgba(12, 16, 16, 0.27),
  -0.25rem -0.25rem 10px 0.2rem rgba(244, 244, 244, 0.95),
  inset 1rem 1rem 20px 0.2rem rgba(234, 234, 234, 0.045),
  inset -1rem -1rem 20px 0.2rem rgba(22, 26, 26, 0.195);
  backdrop-filter: blur( 8px );
  -webkit-backdrop-filter: blur( 8px );
  border: 1px solid rgba(234, 234, 234, 0.18);
  padding: 1rem;
  margin: 1vh 1vh;
  border-radius: 15px;
}

.review-text{
  color:var(--text2);
  padding: 0 0 3rem 0;
  margin: 0.5rem;
  line-height:1.65rem ;
}

.devider-line {
  grid-column: 2;
  width: 97%;
  height: 4px;
  background-color: var(--Section1);
  opacity: 0;
  margin: 0 auto;
  border-radius: 5px;
}
.user-star-review{
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.2rem;
  padding: 0;
  /* margin: 0;
  margin-top: -2VH; */
  margin: 0rem 0rem 0.7rem 0.7rem;
  color: rgb(255, 191, 0);
  text-shadow: 0 0 1.75rem rgba(255, 255, 255, 0.6),
  0 0 10PX rgb(255, 216, 58, 0.6);
  border-radius: 15px;
  width: fit-content;
}

.user-review{
position: absolute;
font-size: 17px;
font-weight: 600;
font-style: italic;
text-align: left;
bottom: 0px;
margin: 1rem 0vh 1rem -0.5rem;
width: fit-content;
padding: 0 1rem 0.5rem 1rem;
color: var(--text2);
}

.features_main{
  position: relative;
  top: -23vh;
  /* display: flex;
  align-items: center; */
  min-height: 50vh;
  width: 100%;
  background-color: var(--bg);
  padding: 4rem 0;
}

.feature_cards {
    display: grid;
    gap: 6rem;
    padding: 16px;

    grid-template-columns: repeat(auto-fit, 24rem); /* fixed columns */
    justify-content: center; /* center whole grid */
    z-index: 5;
  }

.feature_card {
     border: 0.23rem solid rgb(183, 180, 181);
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 24rem;
    height: 30rem;
    padding: 0.5rem;

  border-radius: 6px;
  /*
  background: var(--Section1);
  box-shadow: 0.25rem 0.25rem 10px 0.2rem rgba(12, 16, 16, 0.27),
  -0.25rem -0.25rem 10px 0.2rem rgba(244, 244, 244, 0.69),
  inset 1rem 1rem 60px 0.2rem rgba(22, 26, 26, 0.045),
  inset -1rem -1rem 20px 0.2rem rgba(234, 234, 234, 0.195);
  backdrop-filter: blur( 8px );
  -webkit-backdrop-filter: blur( 8px );
  border: 1px solid rgba( 255, 255, 255, 0.18 ); */

   background-color: rgba(22, 26, 26, 0.944);

  /* box-shadow: 
    0.25rem 0.25rem 10px 0.2rem rgba(46, 61, 61, 0.29), 
   -0.25rem -0.25rem 10px 0.2rem rgba(244, 244, 244, 0.097),
    inset 1rem 1rem 60px 0.2rem rgba(178, 180, 180, 0.403),
    inset -1rem -1rem 20px 0.2rem rgba(29, 29, 29, 0.095),
    inset -0.125rem -0.125rem 0.1rem rgba(3, 0, 3, 0.36),
    inset 0.125rem 0.125rem 1.3rem rgba(253, 243, 255, 0.9),  
    inset -0.030rem -0.030rem 0.051rem rgb(253, 243, 255), 
  
   inset 0 1px 2px rgba(0, 0, 0, 0.5),  
   inset 2rem 5rem 4.3rem 0.9rem rgba(253, 243, 255, 0.403);
  
  backdrop-filter: 
  grayscale(70%),
  brightness(1.5),
  contrast(200%),
  saturate(3),
  blur(3px);
  -webkit-backdrop-filter: blur( 3px );



  border: 0.095rem solid transparent;             
   border-image: linear-gradient(120deg,
                 rgba(227, 14, 14, 0.05),
                 rgba(199,199,199,0.95),
                 rgba(67, 67, 67, 0.5),
                 rgba(67, 67, 67, 0.45),
                 rgba(67, 67, 67, 0.05),
                 rgba(67, 67, 67, 0.05),
                 rgba(224, 224, 224, 0.65),
                 rgba(67, 67, 67, 0.4),
                 rgba(224, 224, 224, 0.9),
                 rgba(67, 67, 67, 0.5),
                 rgba(224, 224, 224, 0.9),
                 rgba(67, 67, 67, 0.05)) 1;            */

    --line-color: rgba(26,22,26, 0.25);
    --line-thickness: 0.16rem;
    --line-length: 1.75rem;
    position: relative;
    h,p{
      color: var(--text2);
    }
    h2{
      color: var(--purple_chroma);

      scale: 1.15;
      filter: 
/* drop-shadow(10px 0px 12px rgba(234, 234, 234, 0.908))*/
drop-shadow(1px 1px 1ch rgba(234, 234, 234, 0.208))
/* drop-shadow(1px 1px 0.7em rgba(234, 234, 234, 0.908)) 
drop-shadow(1px 1px 1vw rgba(234, 234, 234, 0.908)) */
drop-shadow(0px 0px 1pt rgb(from var(--purple) r g b / 0.5))
 drop-shadow(1px 1px 0.8in rgba(234, 234, 234, 0.093))
drop-shadow(0px 0px 0.1mm rgba(36, 36, 36, 0.382)) 
/*drop-shadow(1px 1px 0.3Q rgba(234, 234, 234, 0.908))  */
;
    }
    
}

.feature_images{
  display: block;
  width: calc(100% + 1rem);
  margin: auto -0.5rem -0.5rem -0.5rem;
  height: auto;
  max-height: 14rem;
  object-fit: contain;
  object-position: bottom;
  margin-top: auto;
  z-index: 3;

  /* mix-blend-mode: normal; */
/* mix-blend-mode: multiply; */


/* mix-blend-mode: darken; */









/* mix-blend-mode: soft-light; */

/* mix-blend-mode: plus-darker; */

/* mix-blend-mode: color-burn; */

/* mix-blend-mode: overlay; */

/* mix-blend-mode: luminosity; */
}

/*–– faq section –––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/
.faq_wrapper {
  width: 100%;
  max-width: 74rem;
  margin: 4.5rem auto 3rem auto;
  text-align: left;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.faq_wrapper details {
  margin-bottom: 1rem;
  color: var(--text2);
  p{
    margin-bottom: 2.5rem;
    font-size: 1.075rem;
    color: var(--text2);
    line-height: 1.75rem;
    letter-spacing: 0.070rem;
    max-width: 70ch;

    text-wrap: pretty;
  }
}

.faq_wrapper summary {
  font-size: 1.75rem;
  font-weight: 550;
  color: var(--text2);
  cursor: pointer;
  padding: 0.5rem 0;
}

#download-table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  border-spacing: 0vh 0vh;
  width: 95%;
  max-width: 73rem;
  color: var(--text);
  border: solid 1px var(--table_border);
  background-color: var(--table_bg);
  padding: 10px;
  margin: 4rem 0;
}

#download-table td, #download-table th {
  text-align: center;
  height: 3rem;
  padding: 8px;
  border: solid 1px;
  border-bottom:0 ;
  border-top:0 ;
}

#download-table td {
 border: solid 1px;
 border-bottom:0 ;
 border-top:0 ;
 
} 


#download-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: var(--bg);
  color: var(--text);
  border-bottom: 0;
  height: 7rem;
}

/* #download-table tr:nth-child(even){background-color: var(--row2);} */

#download-table tr:hover{
  background-color: var(--row_hover);
  color: var(--text2);
}

#download-table th:nth-child(1),#download-table td:nth-child(1) {
  border-left: 0;
}

#download-table th:nth-child(3) {
  color: var(--text);
}
#download-table th:nth-child(4) {
  color: var(--text);
  border: solid 2px var(--premium_text);
  border-bottom: 0;
  box-shadow: inset 0 0 0 6rem rgba(155, 81, 224, 0.17); 
}

#download-table td:nth-child(4) {
  border-right: solid 2px var(--premium_text);
  border-left: solid 2px var(--premium_text);
  box-shadow: inset 0 0 0 2rem rgba(155, 81, 224, 0.17); 
}

#download-table tr:last-child td:nth-child(4) {
  border-bottom: solid 2px var(--premium_text);
}


#download-table td:nth-child(1) {
 text-align:left;
} 

.product-price{
  font-size: 2.25rem;
  line-height: 1;
  margin-top: 0vh;
  padding: 0;
}

.cta-premium{
  display: grid;
  align-items: center;
  height: 3rem;
  width: 80%;
  max-width: 10rem;
  background: var(--gradiant);
  box-shadow: 0px 0px 0px 0.025rem rgb(255, 255, 255),
  inset 0 0 0 0.2rem rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur( 8px );
  -webkit-backdrop-filter: blur( 8px );
  border: 2px solid white;
  color: var(--CTA_text);
  padding:0 1vh 0 1vh;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  line-height: 2.2;
  margin-top: 0vh;
}

.cta-standard{
  display: grid;
  align-items: center;
  height: 3rem;
  width: 80%;
  max-width: 10rem;
  background: var(--CTA_text2);
  color: var(--CTA_text);
  padding:0 1vh 0 1vh;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1rem;
  text-align: center;
  overflow: hidden;
  line-height: 2.2;
  margin-top: 0vh;
  font-weight: 500;
}

.cta-free{
  display: grid;
  align-items: center;
  height: 3rem;
  width: 80%;
  max-width: 10rem;
  background: var(--green);
  color: var(--CTA_text);
  padding:0 1vh 0 1vh;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1rem;
  text-align: center;
  overflow: hidden;
  line-height: 2.2;
  margin-top: 0vh;
  font-weight: 400;
}

.cta-premium:hover{
transform: scale(1.05);
box-shadow: inset 0 0 0 0.25rem rgba(255, 255, 255, 0.4),
4px 4px 10px rgba(155, 81, 224, 0.3),
-4px -4px 10px rgba(245, 1, 14, 0.3);
transition: 
transform 0.3s ease-in-out;
}

.white-check,.purple-check{
  font-size: 0.9rem;
  padding: 0.24rem 0.40rem;
  border-radius: 50%; 
}

.white-check{
  color: var(--text2);
  background-color: #b8b8b8;
}
.purple-check{
  color: var(--text2);
  background-color: rgba(155, 81, 224, 1);
}

.login-main{
  display: grid;
  place-items: center;
  align-items: center;
  min-height: 66.5vh;
  width: 100%;
  background-color: var(--bg);
  background-image: url(images/colorful.png);
  background-repeat: no-repeat;
  background-size:cover;
  background-position: center center; 
  padding: 4rem 0;
}

.login-form-box{
  padding: 2rem;
  border-radius: 15px;
  background: var(--Section1);
  box-shadow: 0 8px 32px 0.05rem rgba(255, 255, 255, 0.37);
  backdrop-filter: blur( 8px );
  -webkit-backdrop-filter: blur( 8px );
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}


.login-title{
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1; 
  color:var(--optimized_text);
  text-align: center;
  margin: 1rem 0;
}

.login-message,.signup-message{
  color: var(--subtle_text);
}

.login-link{
  color: var(--optimized_text);
}

.login-input-group{
display: flex;
flex-direction: column;
margin: 1rem 0rem;
}

.login-inputs,.login-inputs::placeholder{
  background-color: unset;
  outline: none;
  outline-width: 0;
  margin: 0.75rem 0rem;
  color: var(--text);
  border: 3px solid var(--border_color);
  border-radius: 0.25rem;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

.login-inputs::placeholder{
  border: none;
  color: var(--subtle_text);
}


.login-submit{
  background-color: var(--optimized_text);
  color: var(--text2);
  border-radius: 15px;
  height: 3rem;
  width: 10rem;
}

.login-submit:hover{
  box-shadow: inset 0 0  1rem rgba(0, 13, 255, 0.47);
  transform: scale(1.05);
  transition: transform 0.3s ease-in;
}

#tos-checkbox {
  opacity: 0;
  position: absolute;
  z-index: -1;
  height: 1.15rem;
  width: 1.15rem;
  left: 1.9455rem;
} 

.login-checkbox{
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  border: 3px solid var(--border_color);
  border-radius: 5px;
  background-color: rgb(22, 26, 26,0.15);
  margin-right: 0.5rem;
  vertical-align: middle;
}

input[type="checkbox"]:checked + .login-checkbox::before {
  content: '✔';
  display: block;
  font-size: 1rem;
  color: var(--text2);
  background-color: var(--optimized_text);
  text-align: center;
  line-height: 1.15rem;
  border-radius: 1px;
}

#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  text-align: center;
  background-color: white;
  border: 2px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 5;
}

#popup h2 {
  margin: 0 0 10px;
}

#popup p {
  font-size: 18px;
  margin: 10px 0;
}

#closeBtn {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.main-post,.main-comment,.main-reply-form,.main-reply-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(223, 223, 223);
  margin: 0.75rem;
  border: 4px solid var(--border_color);
  border-radius: 5px;
  position: relative;
}

.main-comment{
  margin: 0.25rem;
  margin-left: 3%;
  margin-right: 0.75rem;
}

.main-reply-list {
  margin: 0.25rem;
  margin-left: 6%;
  margin-right: 0.75rem;
}

/* Hide the reply form by default */
.main-reply-form {
  display: none;
  margin: 0.25rem;
  margin-left: 6%;
  margin-right: 0.75rem;
}

/* Style the Reply link (label) as a clickable button */
.reply-link {
  font-size: 18px;
  font-weight: bold;
  margin-right: 3.6vh;
  text-decoration: none;
  color: rgb(56, 56, 134);
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}

/* Hide the checkbox itself */
.reply-checkbox {
  display: none; /* Hide the checkbox */
}

/* Optional: Add hover effect for the reply link */
.reply-link:hover {
  color: #0056b3; /* Darker blue on hover */
  cursor: pointer;
}

.cta-post{
  display: grid;
  align-items: center;
  height: 3rem;
  width: 80%;
  max-width: 10rem;
  background: rgb(223, 223, 223);
  color: var(--text);
  padding:0 1vh 0 1vh;
  border: solid 4px var(--border_color);
  border-radius: 5px;
  text-decoration: none;
  font-size: 1.1rem;
  text-align: center;
  overflow: hidden;
  line-height: 2.2;
  margin-top: 0vh;
  font-weight: 500;
  margin-left: 1.6vh;
}

.post{
  margin: 1rem 0.5rem;
  width: fit-content;
  height: fit-content;
}

.post1 {
  margin: 1rem 0.5rem;
  position: relative;
  margin-top: 2rem;
  width: 82.25dvw;
  height: fit-content;
}

.post-title{
  text-align: left;
}

.post-text{
  color:var(--text);
  margin:  0.5rem 0.5rem 5rem 0rem;
  text-align: left;
  display: -webkit-box;           /* Use flexbox to limit lines */
  -webkit-line-clamp: 5;         /* Limit to 3 lines */
  -webkit-box-orient: vertical;  /* Set vertical orientation */
  overflow: hidden;              /* Hide overflow */
  text-overflow: ellipsis;
  padding-bottom: 0rem;
  max-height: calc(1.5rem * 5); /* Ensure container height matches line clamp */
}

.post-text-full{
  color:var(--text);
  margin:  0.5rem 0.5rem 5rem 0rem;
  text-align: left;
}

.hierarchy {
  margin: 0px 0px -20px 0px;
}

.center-items3 {
  height: fit-content;
}

.center-items2 {
  display: flex;
  align-items: left;
  justify-content: left;
  width: 100%;
  height: fit-content;
}

.view {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.view_comment {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.post-options {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: left;
  margin: 5px 0px 0px 0px;
  padding: 5px 0px 5px 0px;
  min-height: 3rem;
  overflow: hidden;
}

.post-options1 {
  position: relative;
  justify-content: left;
  align-items: left;
  margin: -20px 0px 15px 0px;
  padding: 0px 0px 0px 0px;
  min-height: fit-content;
  max-width: fit-content;
  overflow: hidden;
}

.post-options p {
  margin-left: 20px;
}

.main-profile h2 {
  display: block;
  font-size: 1.75em;
  margin-block-start: 1em;
  margin-block-end: 0.83em;
  margin-inline-start: 40px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.main-profile p {
  display: block;
  font-size: 1em;
  margin-block-start: 1em;
  margin-block-end: 0.83em;
  margin-inline-start: 40px;
  margin-inline-end: 0px;
  font-weight: bold;


}

.post-link {
  font-size: 18px;
  font-weight: bold;
  margin-right: 3.6vh;
  text-decoration: none;
  color: rgb(56, 56, 134);
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
}

.username {
  font-weight: bold;
  margin-right: 3.6vh;
  text-decoration: none;
  color: rgb(56, 56, 134);
}



.post-options-right {
  margin: 0px 0px 0px 0px;
  padding: 5px 0px 5px 0px;
  height: 35px;
  overflow: hidden;
  position: absolute;
  right: 0;
  bottom: 0;
}

.input-area {
  background-color: rgb(235, 235, 235);
  width: 80dvw;
  border: 1px solid #adadad;
  padding: 5px 0px 5px 0px;
  margin: 5px 5px 5px 5px;
  resize: none;
  max-width: 80%;
}


/*profile options and tabs  --START--*/


.main-profile {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(223, 223, 223);
  margin: 1.2vh;
  border-radius: 5px;
  position: relative;
}

.profile-options {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 0px 5px 0px;
  height: 35px;
  overflow: hidden;
}

.profile-options-open {
  padding: 5px 0px 5px 0px;
  height: 35px;
  overflow: hidden;
  height: fit-content;
}

.profile-link {
  font-size: 18px;
  font-weight: bold;
  margin-right: 3.6vh;
  text-decoration: none;
  color: rgb(1, 1, 4);
}

.guest-link {
  font-size: 18px;
  font-weight: bold;
  margin-right: 3.6vh;
  text-decoration: none;
  color: rgb(255, 255, 255);
  background-color: #ee3124;
  padding: 5px 10px 5px 10px;
  border-radius: 15px;
}

/*profile options and tabs --END--*/

/*inner tabs  --START--*/
/* Style the tab */
.main_profile_tab {
  overflow: hidden;
  border: 1px solid #ccc;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgb(223, 223, 223);
  margin: 1.2vh;
  border-radius: 5px;
  position: relative;
  display: none;
  border-top: none;
  min-height: fit-content;
}


/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style the buttons that are used to open the tab content */
.profile_link_tab {
  font-size: 18px;
  font-weight: bold;
  margin-right: 3.6vh;
  text-decoration: none;
  color: rgb(1, 1, 4);
  cursor: pointer;
}

.profile_link_tab.active {
  text-decoration: underline solid 3px red;
  text-underline-offset: 12px;
}


/*inner tabs  --END--*/
@media only screen and (max-width: 1064px) {
  .grid-horizontal {
    grid-template-columns: repeat(3, 1fr);
    max-width: 751.3px;
  }
  .net-type1,.net-type2 {
    position: relative;
    text-align: left; /* Keep it aligned to the left */
    margin: 0; 
    width: 53vh;
  }
  .vp-right{
    display: none;
  }
}
@media only screen and (max-width: 920px) {
  .testimonials{
    display: initial;
  }

.faq_wrapper summary {
  font-size: 1.35rem;
}

  .mini-test{
    margin: 3vh 1vh;
    min-width: 27vh;
    width: unset;
  }
}  
@media only screen and (max-width: 900px) {
  .left_nav{
    display: none;
  }
  .right_nav{
    display: none;
  }
  .mobile-nav{
  display: initial;
  }

  .horizontal-stack-footer {
    grid-template-columns: 1fr;    /* single column — items stack */
    /* grid-auto-rows: auto;          */
     gap: 14px;                     
    /* padding: 12px 20px;           */
  }

}
@media only screen and (max-width: 850px) {

  .center-items3 {
    display: flex;
    align-items: left;
    justify-content: left;
    text-align: left;
  }

  .center-items2 {
    display: grid;
    place-items: left;
    text-align: left;
  }

  .main-post,.main-comment{
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin: 0.75rem;
    border-radius: 5px;
    position: relative;
    min-height: 60%;
  }

  .main-comment{
    min-height: 40%;
    margin-left: 3rem;
  }

  .main-reply-form,.main-reply-list{
    min-height: 40%;
    margin-left: 6rem;
  }


  .post-options {
    display: flex;
    align-items: left;
    justify-content: left;
  }
  .post1{
    min-height: 15rem;
    margin-left: 2rem;
  }
}
@media only screen and (max-width: 820px) {
  .grid-horizontal {
    grid-template-columns: repeat(2, 1fr);
    max-width: 504.2px;
  }


}
@media only screen and (max-width: 740px) {

}
@media only screen and (max-width: 590px) {
.value-proposition{
  left: 2.25vh;
}
.vp-title{
  font-size: 3rem;
} 
.vp-points{
  right: 4.5vh;
} 
.vp-body{
  max-width: 37ch;
}
}
@media only screen and (max-width: 550px) {
  .grid-horizontal {
    grid-template-columns: repeat(1, 1fr);
    max-width: 257.1px;
}
.comparison-section{
  max-width: 504.2px;
}
}
/*–– benchmark images: stacked before/after comparison ––––––––––––––––––*/
.benchmark_stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* max-width: 700px; */
  margin: 3rem auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.benchmark_figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.benchmark_label {
  font-family: lexend;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text2);
  margin: 1.5rem 0 0.5rem 0;
  text-align: center;
}

.benchmark_image {
  width: 100%;
  height: auto;
  max-width: 750px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  display: block;
}

.benchmark_note {
  color: var(--subtle_text);
  font-family: outfit;
  font-size: 0.8rem;
  margin: 0.3rem 0 0 0;
  text-align: center;
  line-height: 1.3;
}