:root {
    color-scheme:dark;
    --radius:.625rem;
    --background:#0a0a0a;
    --foreground:#fafafa;
    --card:#171717;
    --card-foreground:#fafafa;
    --primary:#e5e5e5;
    --primary-foreground:#171717;
    --secondary:#262626;
    --secondary-foreground:#fafafa;
    --muted:#262626;
    --muted-foreground:#a1a1a1;
    --accent:#404040;
    --accent-foreground:#fafafa;
    --border:#ffffff1a;
    --input:#ffffff26;
    --ring:#737373;
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    border-color:var(--border);
}
html {
    -webkit-text-size-adjust:100%;
    tab-size:4;
    line-height:1.5;
    -webkit-tap-highlight-color:transparent;
    scroll-behavior:smooth;
}
body {
    background-color:#000000;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    color:var(--foreground);
    min-height:100vh;
    font-size:14px;
    line-height:1.5;
    overflow-x:hidden;
    overflow-y:scroll;
    scroll-behavior:smooth;
    scroll-snap-type:y proximity;
    width:100%;
    max-width:100vw;
    position:relative;
}
.features-section,.menu-gui-section,.pricing-section,.resellers-section {
    scroll-snap-align:start;
    scroll-snap-stop:normal;
}
header {
    position:sticky;
    top:0;
    z-index:9999;
    width:100%;
    transition:all 300ms ease-in-out;
    background-color:transparent !important;
}
header.scrolled {
    background-color:rgba(10,10,10,0.8);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 1px 0 rgba(255,255,255,0.1);
}
.container-wrapper {
    max-width:80rem;
    margin:0 auto;
    padding-left:1rem;
    padding-right:1rem;
}
.header-content {
    display:flex;
    height:4rem;
    align-items:center;
    justify-content:space-between;
    position:relative;
}
.logo {
    flex-shrink:0;
    font-size:1.25rem;
    font-weight:700;
    text-decoration:none;
    color:var(--foreground);
    margin-right:0;
}
.logo-separator {
    flex-shrink:0;
    background-color:var(--border);
    width:1px;
    height:1.25rem;
    align-self:center;
    margin-left:1rem;
    margin-right:1rem;
}
.nav-container {
    display:none;
    align-items:center;
    gap:0;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}
.nav-container button {
    display:inline-flex;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    font-family:inherit;
    font-size:0.875rem;
    font-weight:500;
    white-space:nowrap;
    transition:all 150ms cubic-bezier(0.4,0,0.2,1);
    outline:none;
    color:var(--foreground);
    background:none;
    border:none;
    cursor:pointer;
    height:2rem;
    border-radius:0.375rem;
    padding-left:0.625rem;
    padding-right:0.625rem;
    gap:0.375rem;
    position:relative;
}
.nav-container button:hover {
    background-color:var(--accent);
    color:var(--accent-foreground);
}
.nav-container button:focus-visible {
    border-color:var(--ring);
    ring:3px solid rgba(115,115,115,0.5);
}
@supports (color:color-mix(in lab,red,red)) {
    .nav-container button:hover {
    background-color:color-mix(in oklab,var(--accent) 50%,transparent);
}
}.nav-right {
    display:flex;
    align-items:center;
    gap:0;
}
.auth-links {
    display:flex;
    align-items:center;
    gap:0;
}
.separator {
    flex-shrink:0;
    background-color:var(--border);
    width:1px;
    height:1.25rem;
    align-self:center;
    margin:0 0.75rem;
}
.auth-links a {
    display:inline-flex;
    flex-shrink:0;
    align-items:center;
    justify-content:center;
    font-size:0.875rem;
    font-weight:500;
    white-space:nowrap;
    transition:all 150ms cubic-bezier(0.4,0,0.2,1);
    outline:none;
    text-decoration:none;
    color:var(--foreground);
    background:none;
    border:none;
    cursor:pointer;
    height:2rem;
    border-radius:var(--radius);
    padding-left:0.625rem;
    padding-right:0.625rem;
    position:relative;
}
.auth-links a:hover {
    background-color:var(--accent);
    color:var(--accent-foreground);
}
.auth-links a.btn-filled {
    background-color:var(--primary);
    color:var(--primary-foreground);
}
.auth-links a.btn-filled:hover {
    background-color:var(--primary);
    opacity:0.9;
}
@media (min-width:1024px) {
    .nav-container {
    display:flex;
}
}/* Hero Section */
        .hero-section {
    width:100%;
    padding:4rem 1.5rem 3rem;
    position:relative;
    margin-top:-4rem;
    padding-top:8rem;
}
@media (min-width:640px) {
    .hero-section {
    padding:10rem 1.5rem 5rem;
    margin-top:-4rem;
    padding-top:14rem;
}
}.hero-background {
    pointer-events:none;
    position:absolute;
    left:0;
    top:0;
    z-index:-10;
    height:100%;
    width:100%;
    overflow-x:clip;
}
.hero-background-inner {
    position:absolute;
    top:0;
    height:800px;
    width:100%;
    transform:translateZ(0);
}
.hero-background-inner::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    height:100%;
    width:100%;
    background:linear-gradient(to top,#000000,rgba(0,0,0,0));
}
.hero-background img {
    position:absolute;
    height:100%;
    width:100%;
    inset:0;
    object-fit:cover;
    color:transparent;
    image-rendering:high-quality;
    image-rendering:-webkit-optimize-contrast;
    image-rendering:crisp-edges;
    filter:none;
    transform:translateZ(0);
    backface-visibility:hidden;
}
.hero-content {
    max-width:80rem;
    margin:0 auto;
    display:flex;
    width:100%;
    flex-direction:column;
    gap:1.5rem;
    position:relative;
    z-index:1;
}
@media (min-width:640px) {
    .hero-content {
    gap:2.5rem;
}
}.hero-title {
    font-size:2rem;
    font-weight:800;
    line-height:1.1;
    letter-spacing:-0.05rem;
    color:#ffffff;
    text-wrap:balance;
    animation:fadeIn 0.6s ease-out,revealHero 0.8s ease-out forwards;
    opacity:0;
    position:relative;
    z-index:1;
}
@media (min-width:640px) {
    .hero-title {
    font-size:3.5rem;
    letter-spacing:-0.1rem;
}
}
@media (min-width:1024px) {
    .hero-title {
    font-size:5rem;
    letter-spacing:-0.15625rem;
}
}.gradient-text {
    background:linear-gradient(110deg,#dc2626 0%,#dc2626 40%,#f87171 50%,#dc2626 60%,#dc2626 100%);
    background-size:200% 100%;
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shine 2.5s linear infinite;
    -webkit-text-stroke:0.5px rgba(220,38,38,0.3);
}
.accent-text {
    color:#dc2626;
    text-shadow:0 0 1px rgba(220,38,38,0.5);
}
.hero-subtitle {
    font-size:0.95rem;
    font-weight:400;
    color:#d4d4d4;
    text-wrap:balance;
    margin-top:0;
    animation:fadeIn 0.6s ease-out 0.1s,revealHero 0.8s ease-out 0.1s forwards;
    opacity:0;
    position:relative;
    z-index:1;
    padding:0 0.5rem;
}
@media (min-width:640px) {
    .hero-subtitle {
    font-size:1.125rem;
    margin-top:-0.5rem;
    padding:0;
}
}
@media (min-width:1024px) {
    .hero-subtitle {
    font-size:1.25rem;
    margin-top:-1rem;
}
}.hero-buttons {
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    animation:fadeIn 0.6s ease-out 0.2s,revealHero 0.8s ease-out 0.2s forwards;
    opacity:0;
    position:relative;
    z-index:1;
}
@media (min-width:340px) {
    .hero-buttons {
    flex-direction:row;
}
}@media (min-width:640px) {
    .hero-buttons {
    align-items:center;
}
}.btn-primary {
    display:flex;
    width:max-content;
    align-items:center;
    gap:0.25rem;
    padding:0.5rem 0.875rem;
    font-size:0.875rem;
    font-weight:600;
    border-radius:var(--radius);
    background-color:#e5e5e5;
    color:#171717;
    text-decoration:none;
    transition:all 150ms;
    border:1px solid #ffffff;
}
.btn-primary:hover {
    background-color:#ffffff;
    color:#000000;
}
.btn-secondary {
    display:flex;
    width:max-content;
    align-items:center;
    gap:0.25rem;
    padding:0.5rem 0.875rem;
    font-size:0.875rem;
    font-weight:500;
    color:#ffffff;
    text-decoration:none;
    transition:color 150ms;
}
.btn-secondary:hover {
    color:#d4d4d4;
}
/* Animations */
        @keyframes fadeIn {
    from {
    opacity:0;
}
to {
    opacity:1;
}
}@keyframes revealHero {
    from {
    opacity:0;
    transform:translateY(30px);
}
to {
    opacity:1;
    transform:translateY(0);
}
}@keyframes shine {
    to {
    background-position:200% center;
}
}.hero-title {
    animation:fadeIn 0.8s ease-out forwards;
    opacity:0;
}
.gradient-text {
    animation:shine 3s linear infinite;
}
.hero-subtitle {
    animation:fadeIn 0.8s ease-out 0.2s forwards;
    opacity:0;
}
.hero-buttons {
    animation:fadeIn 0.8s ease-out 0.4s forwards;
    opacity:0;
}
/* Features Section */
        .features-section {
    margin-top:12rem;
    max-width:80rem;
    margin-left:auto;
    margin-right:auto;
    padding:0 1.5rem;
    margin-bottom:6rem;
    position:relative;
}
.features-section::before {
    content:'';
    position:absolute;
    width:234px;
    height:234px;
    top:150px;
    right:200px;
    background:rgba(255,0,4,0.6);
    filter:blur(225px);
    pointer-events:none;
    z-index:-1;
}
@media (max-width:768px) {
    .features-section::before {
    right:50px;
    width:150px;
    height:150px;
}
}
.features-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
}
@media (min-width:768px) {
    .features-grid {
    grid-template-columns:repeat(3,1fr);
}
}.feature-card {
    position:relative;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.03);
    background:var(--background);
    overflow:hidden;
}
.feature-card.animate {
    animation:fadeInUp 0.6s ease-out forwards;
}
.feature-card.animate:nth-child(1) {
    animation-delay:0.1s;
}
.feature-card.animate:nth-child(2) {
    animation-delay:0.2s;
}
.feature-card.animate:nth-child(3) {
    animation-delay:0.3s;
}
.feature-header {
    display:flex;
    border-bottom:1px solid rgba(255,255,255,0.03);
    background:var(--background);
}
.feature-icon {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
    border-right:1px solid rgba(255,255,255,0.03);
}
.feature-icon svg {
    width:1.5rem;
    height:1.5rem;
    color:var(--foreground);
    filter:drop-shadow(0 0 8px rgba(220,38,38,0.3));
}
.feature-title-wrapper {
    display:flex;
    align-items:center;
    padding:1.5rem;
}
.feature-title {
    font-size:1.25rem;
    font-weight:600;
    color:var(--foreground);
    letter-spacing:-0.025em;
}
.feature-description {
    padding:1.25rem;
    font-size:0.9375rem;
    line-height:1.6;
    color:var(--muted-foreground);
    letter-spacing:-0.0125em;
}
/* Resellers Section */
        .resellers-section {
    margin-top:12rem;
    max-width:80rem;
    margin-left:auto;
    margin-right:auto;
    padding:0 1.5rem;
    margin-bottom:8rem;
    position:relative;
}
.resellers-section::before {
    content:'';
    position:absolute;
    top:10%;
    left:-12%;
    height:20rem;
    width:20rem;
    background:linear-gradient(135deg,rgba(255,255,255,0.3) 0%,rgba(255,180,180,0.28) 40%,rgba(220,38,38,0.25) 100%);
    transform:rotate(-15deg);
    border-radius:9999px;
    filter:blur(130px);
    pointer-events:none;
    z-index:-1;
}
@media (max-width:768px) {
    .resellers-section::before {
    left:-30%;
    width:15rem;
    height:15rem;
}
}
.resellers-header {
    text-align:center;
    margin-bottom:4rem;
}
.resellers-title {
    font-size:1.75rem;
    font-weight:800;
    line-height:1.1;
    letter-spacing:-0.05rem;
    color:#ffffff;
    margin-bottom:1rem;
}
@media (min-width:640px) {
    .resellers-title {
    font-size:2.5rem;
    letter-spacing:-0.1rem;
}
}
@media (min-width:1024px) {
    .resellers-title {
    font-size:3rem;
    letter-spacing:-0.15625rem;
}
}.resellers-subtitle {
    font-size:1rem;
    font-weight:400;
    color:var(--muted-foreground);
    max-width:42rem;
    margin:0 auto;
    line-height:1.5;
    text-wrap:balance;
}
.resellers-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
}
@media (min-width:768px) {
    .resellers-grid {
    grid-template-columns:repeat(3,1fr);
}
}.reseller-card {
    position:relative;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.03);
    background:var(--background);
    transition:all 200ms ease;
}
.reseller-card:hover {
    transform:translateY(-4px);
}
.reseller-card.animate {
    animation:fadeInUp 0.6s ease-out forwards;
}
.reseller-card.animate:nth-child(1) {
    animation-delay:0.1s;
}
.reseller-card.animate:nth-child(2) {
    animation-delay:0.2s;
}
.reseller-card.animate:nth-child(3) {
    animation-delay:0.3s;
}
.reseller-banner-wrapper {
    position:relative;
    height:7rem;
    width:100%;
    overflow:hidden;
}
.reseller-banner-gradient {
    position:absolute;
    inset:0;
    background:linear-gradient(to top,var(--background) 0%,transparent 100%);
    z-index:10;
}
.reseller-banner {
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    right:0;
    bottom:0;
    object-fit:cover;
    transition:transform 500ms ease;
    opacity:0.6;
}
.reseller-card:hover .reseller-banner {
    transform:scale(1.05);
}
.reseller-content {
    position:relative;
    z-index:20;
    margin-top:-2rem;
    display:flex;
    flex:1;
    flex-direction:column;
    padding:0 1.5rem 1.5rem;
    min-height:250px;
}
.reseller-logo-wrapper {
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}
.reseller-logo {
    position:relative;
    height:4rem;
    width:4rem;
    overflow:hidden;
    border-radius:var(--radius);
    border:3px solid var(--background);
    background:var(--background);
    box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);
}
.reseller-logo img {
    position:absolute;
    height:100%;
    width:100%;
    left:0;
    top:0;
    right:0;
    bottom:0;
    object-fit:cover;
}
.reseller-name {
    margin-top:1rem;
    font-size:1.5rem;
    font-weight:600;
    color:var(--foreground);
    letter-spacing:-0.025em;
}
.reseller-description {
    margin-top:0.5rem;
    font-size:0.875rem;
    line-height:1.5;
    color:var(--muted-foreground);
    flex-grow:1;
}
.reseller-payments {
    margin-top:1rem;
    margin-bottom:1rem;
    display:flex;
    flex-wrap:wrap;
    gap:0.5rem;
}
.payment-badge {
    display:inline-flex;
    align-items:center;
    padding:0.25rem 0.5rem;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border);
    border-radius:calc(var(--radius) - 0.125rem);
    font-size:0.75rem;
    color:var(--muted-foreground);
    font-weight:500;
}
.reseller-button {
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.25rem;
    white-space:nowrap;
    border-radius:var(--radius);
    font-size:0.875rem;
    font-weight:600;
    padding:0.5rem 0.875rem;
    width:100%;
    color:var(--primary-foreground);
    background-color:var(--primary);
    border:1px solid #ffffff;
    transition:all 150ms ease;
    text-decoration:none;
    cursor:pointer;
}
.reseller-button:hover {
    background-color:#ffffff;
    color:#000000;
}
.reseller-button svg {
    width:1rem;
    height:1rem;
}
@keyframes fadeInUp {
    from {
    opacity:0;
    transform:translateY(30px);
}
to {
    opacity:1;
    transform:translateY(0);
}
}/* Pricing Section */
        .pricing-section {
    margin-top:12rem;
    max-width:80rem;
    margin-left:auto;
    margin-right:auto;
    padding:0 1.5rem;
    margin-bottom:8rem;
    position:relative;
}
.pricing-section::before {
    content:'';
    position:absolute;
    top:-5%;
    right:-10%;
    height:35rem;
    width:4rem;
    background:linear-gradient(180deg,rgba(255,255,255,0.35) 0%,rgba(255,200,200,0.3) 50%,rgba(220,38,38,0.3) 100%);
    transform:rotate(20deg);
    border-radius:9999px;
    filter:blur(100px);
    pointer-events:none;
    z-index:-1;
}
@media (max-width:768px) {
    .pricing-section::before {
    right:-20%;
    height:25rem;
    width:3rem;
}
}
.pricing-header {
    text-align:center;
    margin-bottom:6rem;
}
.pricing-title {
    font-size:1.75rem;
    font-weight:800;
    line-height:1.1;
    letter-spacing:-0.05rem;
    color:#ffffff;
    margin-bottom:1.5rem;
}
.pricing-title span {
    background:linear-gradient(110deg,#dc2626 0%,#dc2626 40%,#f87171 50%,#dc2626 60%,#dc2626 100%);
    background-size:200% 100%;
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shine 2.5s linear infinite;
    -webkit-text-stroke:0.5px rgba(220,38,38,0.3);
}
@media (min-width:640px) {
    .pricing-title {
    font-size:2.5rem;
    letter-spacing:-0.1rem;
}
}
@media (min-width:1024px) {
    .pricing-title {
    font-size:3rem;
    letter-spacing:-0.15625rem;
}
}.pricing-subtitle {
    font-size:1.125rem;
    font-weight:400;
    color:var(--muted-foreground);
    max-width:42rem;
    margin:0 auto;
    line-height:1.6;
    text-wrap:balance;
}
.pricing-grid {
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
}
@media (min-width:768px) {
    .pricing-grid {
    grid-template-columns:repeat(3,1fr);
}
}.pricing-card {
    position:relative;
    display:flex;
    flex-direction:column;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.03);
    background:rgb(15,15,15);
    padding:1.5rem;
    transition:all 300ms ease;
    gap:0.5rem;
}
.pricing-card:hover {
    transform:translateY(-2px);
}
.pricing-card:nth-child(2) {
    }.pricing-card:nth-child(2):hover {
    transform:translateY(-2px);
}
.pricing-card.animate {
    animation:fadeInUp 0.6s ease-out forwards;
}
.pricing-card.animate:nth-child(1) {
    animation-delay:0.1s;
}
.pricing-card.animate:nth-child(2) {
    animation-delay:0.2s;
}
.pricing-card.animate:nth-child(3) {
    animation-delay:0.3s;
}
.pricing-duration {
    font-size:1.5rem;
    font-weight:600;
    color:var(--foreground);
}
.pricing-price {
    font-size:3.75rem;
    font-weight:800;
    color:var(--foreground);
    letter-spacing:-0.05em;
    line-height:1;
}
.pricing-price span {
    font-size:1.5rem;
    font-weight:500;
    color:var(--muted-foreground);
}
.pricing-description {
    font-size:0.875rem;
    color:var(--muted-foreground);
    font-weight:400;
    margin-top:0.5rem;
    margin-bottom:1rem;
}
.pricing-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.25rem;
    white-space:nowrap;
    border-radius:var(--radius);
    font-size:0.875rem;
    font-weight:700;
    padding:0.625rem 1rem;
    width:100%;
    color:#000000;
    background:#ffffff;
    border:none;
    transition:all 200ms ease;
    text-decoration:none;
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:0.025em;
}
.pricing-button:hover {
    background:#d4d4d4;
    transform:scale(1.02);
}
/* Menu GUI Section */
        .menu-gui-section {
    margin-top:8rem;
    max-width:80rem;
    margin-left:auto;
    margin-right:auto;
    padding:0 1.5rem;
    margin-bottom:8rem;
    position:relative;
}
.menu-gui-wrapper-outer {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:2rem;
    position:relative;
}
.menu-label {
    font-size:2rem;
    font-weight:800;
    color:rgba(255,255,255,0.08);
    letter-spacing:-0.05em;
    text-transform:uppercase;
    white-space:nowrap;
    user-select:none;
    display:flex;
    flex-direction:column;
    line-height:0.9;
}
@media (min-width:640px) {
    .menu-label {
    font-size:3rem;
}
}
.menu-label-left {
    text-align:right;
    align-items:flex-end;
}
.menu-label-right {
    text-align:left;
    align-items:flex-start;
}
@media (max-width:1024px) {
    .menu-label {
    display:none;
}
}.menu-gui-container {
    position:relative;
    width:70%;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--background);
    flex-shrink:0;
}
@media (max-width:1024px) {
    .menu-gui-container {
    width:100%;
}
}.menu-gui-container::before {
    content:'';
    position:absolute;
    inset:-1px;
    border-radius:var(--radius);
    padding:2px;
    background:conic-gradient(from var(--angle),transparent 0deg,transparent 310deg,#ff4444 325deg,#ff4444 335deg,transparent 350deg,transparent 360deg);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
    z-index:10;
    animation:movingStroke 6s linear infinite;
}
.menu-gui-container::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:var(--radius);
    border:1px solid rgba(255,255,255,0.03);
    pointer-events:none;
    z-index:10;
}
.menu-gui-wrapper {
    position:relative;
    width:100%;
}
.menu-gui-container img {
    width:100%;
    height:auto;
    display:block;
    position:relative;
}
@keyframes movingStroke {
    0% {
    --angle:0deg;
}
100% {
    --angle:360deg;
}
}@property --angle {
    syntax:'<angle>';
    initial-value:0deg;
    inherits:false;
}

/* Dashboard Sidebar Variables */
:root {
    --sidebar:#09090b;
    --sidebar-foreground:#fafafa;
    --sidebar-accent:rgba(255,255,255,0.1);
    --sidebar-accent-foreground:#fafafa;
}