:root {
     --bg: #0b1220;
     /* page background */
     --card: #0f172a;
     /* cards/nav background */
     --muted: #94a3b8;
     /* subtle text */
     --text: #e2e8f0;
     /* main text */
     --brand: #0ea5e9;
     /* primary */
     --brand-2: #22d3ee;
     /* accent */
     --ok: #22c55e;
     /* success */
     --warn: #f59e0b;
     /* warning */
     --danger: #ef4444;
     /* danger */
     --shadow: 0 10px 30px rgba(2, 6, 23, .45);
     --radius: 14px;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

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

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(40px);
     }

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

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-40px);
     }

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

 @keyframes scaleIn {
     from {
         opacity: 0;
         transform: scale(0.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 @keyframes float {

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

     50% {
         transform: translateY(-10px);
     }
 }

 @keyframes glow {

     0%,
     100% {
         box-shadow: 0 0 20px rgba(14, 165, 233, 0.3), var(--shadow);
     }

     50% {
         box-shadow: 0 0 40px rgba(34, 211, 238, 0.5), var(--shadow);
     }
 }

 @keyframes shimmer {
     0% {
         background-position: -1000px 0;
     }

     100% {
         background-position: 1000px 0;
     }
 }

 @keyframes pulse {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.5;
     }
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     margin: 0;
     padding: 0;
     background: linear-gradient(180deg, #0b1220, #0b1220 40%, #0a0f1c);
     color: var(--text);
     font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
     scroll-behavior: smooth;
 }

 a {
     color: var(--brand);
     text-decoration: none;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 a:hover {
     opacity: .9;
     transform: translateY(-2px);
 }

 .container {
     max-width: 1120px;
     margin: 0 auto;
     padding: 0 20px
 }

 header {
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(11, 18, 32, .6);
     backdrop-filter: saturate(180%) blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, .06);
     animation: fadeInDown 0.6s ease-out;
 }

 .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px 0;
 }

 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 700;
     animation: fadeInLeft 0.8s ease-out;
 }

 .brand svg {
     width: 28px;
     height: 28px;
     transition: transform 0.3s ease-out;
 }

 .brand:hover svg {
     transform: rotate(12deg) scale(1.1);
 }

 .menu {
     display: flex;
     gap: 18px;
     align-items: center;
 }

 .menu a {
     color: var(--text);
     opacity: .9;
     position: relative;
     animation: fadeInDown 0.8s ease-out backwards;
     font-size: 18px;
 }

 .menu a:nth-child(1) {
     animation-delay: 0.1s;
 }

 .menu a:nth-child(2) {
     animation-delay: 0.2s;
 }

 .menu a:nth-child(3) {
     animation-delay: 0.3s;
 }

 .menu a:nth-child(4) {
     animation-delay: 0.4s;
 }

 .menu a::after {
     content: '';
     position: absolute;
     bottom: -4px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--brand), var(--brand-2));
     transition: width 0.3s ease-out;
 }

 .menu a:hover::after {
     width: 100%;
 }

 .cta {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     color: #001018;
     padding: 10px 16px;
     border-radius: 999px;
     font-weight: 600;
     box-shadow: var(--shadow);
     border: none;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
     overflow: visible;
 }

 .cta:hover {
     transform: translateY(-4px);
     box-shadow: 0 15px 40px rgba(14, 165, 233, 0.5), 0 0 20px rgba(34, 211, 238, 0.3);
 }

 .cta:active {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
 }

 .cta svg {
     width: 18px;
     height: 18px;
     transition: transform 0.3s ease-out;
 }

 .cta:hover svg {
     transform: translateX(4px);
 }

 .burger {
     display: none;
     background: transparent;
     border: 0;
     color: var(--text);
     font-size: 24px;
     cursor: pointer;
     transition: transform 0.3s ease-out;
 }

 .burger:hover {
     transform: scale(1.2);
 }

 /* Hero */
 .hero {
     padding: 80px 0 40px;
     background: radial-gradient(1200px 600px at 50% -200px, rgba(34, 211, 238, .20), transparent 60%), radial-gradient(900px 500px at 10% -150px, rgba(14, 165, 233, .20), transparent 60%);
     position: relative;
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: radial-gradient(circle at 20% 50%, rgba(34, 211, 238, .05), transparent 50%);
     pointer-events: none;
     animation: pulse 4s ease-in-out infinite;
 }

 .hero-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 32px;
     align-items: center;
     position: relative;
     z-index: 1;
 }

 .hero-grid>div:first-child>* {
     animation: fadeInUp 0.8s ease-out backwards;
 }

 .hero-grid>div:first-child> :nth-child(1) {
     animation-delay: 0.1s;
 }

 .hero-grid>div:first-child> :nth-child(2) {
     animation-delay: 0.2s;
 }

 .hero-grid>div:first-child> :nth-child(3) {
     animation-delay: 0.3s;
 }

 .hero-grid>div:first-child> :nth-child(4) {
     animation-delay: 0.4s;
 }

 .hero-grid>div:first-child> :nth-child(5) {
     animation-delay: 0.5s;
 }

 .sur {
     display: inline-flex;
     gap: 10px;
     align-items: center;
     border: 1px solid rgba(255, 255, 255, .08);
     padding: 6px 10px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .03);
     color: var(--muted);
     backdrop-filter: blur(10px);
     transition: all 0.3s ease-out;
 }

 .sur:hover {
     border-color: rgba(34, 211, 238, .3);
     background: rgba(34, 211, 238, .08);
 }

 h1 {
     font-size: 46px;
     line-height: 1.07;
     margin: 14px 0 10px;
     background: linear-gradient(135deg, #e2e8f0, #22d3ee);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .lead {
     font-size: 18px;
     color: var(--muted);
     max-width: 640px;
     line-height: 1.6;
 }

 .kpis {
     display: flex;
     gap: 18px;
     margin: 26px 0 0;
     flex-wrap: wrap;
 }

 .kpi {
     background: var(--card);
     padding: 14px 16px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, .06);
     backdrop-filter: blur(10px);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .kpi:hover {
     border-color: rgba(34, 211, 238, .3);
     background: rgba(34, 211, 238, .05);
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(34, 211, 238, .2);
 }

 .screen {
     background: linear-gradient(180deg, #101a32, #0d162b);
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: 16px;
     box-shadow: var(--shadow);
     padding: 16px;
     animation: slideInRight 0.8s ease-out;
     animation: float 3s ease-in-out infinite;
 }



 /* Features */
 .features {
     padding: 56px 0;
     background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
     position: relative;
 }

 .features h2 {
     animation: fadeInUp 0.8s ease-out;
 }

 .g {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px
 }

 .card {
     background: var(--card);
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: var(--radius);
     padding: 18px;
     box-shadow: var(--shadow);
     min-height: 160px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     animation: fadeInUp 0.6s ease-out backwards;
     display: flex;
     flex-direction: column;
 }

 .card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .card:nth-child(3) {
     animation-delay: 0.3s;
 }

 .card:nth-child(4) {
     animation-delay: 0.4s;
 }

 .card:nth-child(5) {
     animation-delay: 0.5s;
 }

 .card:nth-child(6) {
     animation-delay: 0.6s;
 }

 .card:hover {
     border-color: rgba(34, 211, 238, .5);
     background: linear-gradient(135deg, rgba(34, 211, 238, .05), rgba(14, 165, 233, .02));
     transform: translateY(-8px);
     box-shadow: 0 20px 50px rgba(34, 211, 238, .3);
 }

 .card h3 {
     margin: 0 0 8px;
     font-size: 18px;
     transition: color 0.3s ease-out;
 }

 .card:hover h3 {
     color: var(--brand-2);
 }

 .pill {
     display: inline-flex;
     gap: 8px;
     align-items: center;
     background: rgba(14, 165, 233, .12);
     color: #a5f3fc;
     border: 1px solid rgba(34, 211, 238, .25);
     padding: 4px 10px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 600;
     animation: fadeInDown 0.8s ease-out;
     transition: all 0.3s ease-out;
 }

 .pill:hover {
     background: rgba(34, 211, 238, .2);
     border-color: rgba(34, 211, 238, .5);
 }

 .list {
     margin: 10px 0 0;
     padding-left: 18px;
     color: var(--muted);
 }

 .list li {
     transition: color 0.3s ease-out;
 }

 .card:hover .list li {
     color: var(--text);
 }

 /* Pricing */
 .pricing {
     padding: 56px 0;
 }

 .pricing h2 {
     animation: fadeInUp 0.8s ease-out;
 }

 .card.plan del {
     display: inline;
     color: red !important;
     font-size: 14px;
     margin-right: 13px;
     background-clip: text !important;
     background: red;
 }

 .plan {
     position: relative;
 }

 .plan.popular {
     transform: scale(1.05);
     z-index: 2;
 }

 .plan.popular .card {
     background: linear-gradient(135deg, rgba(34, 211, 238, .1), rgba(14, 165, 233, .08));
     border-color: rgba(34, 211, 238, .5);
     box-shadow: 0 0 40px rgba(34, 211, 238, .3);
 }

 .plan .price {
     font-size: 34px;
     font-weight: 800;
     margin: 6px 0;
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     display: inline;
 }

 .plan .unit {
     color: var(--muted);
     font-size: 14px;
     margin-left: 6px
 }

 .plan {
     display: flex;
     flex-direction: column;
 }

 .plan .list {
     flex-grow: 1;
 }

 .plan>p {
     margin-top: auto;
     margin-bottom: 0;
 }

 .plan .cta {
     margin-top: 12px;
     width: 100%;
     display: flex;
     justify-content: center;
 }

 /* Pricing Toggle */
 .pricing-toggle {
     display: flex;
     gap: 12px;
     align-items: center;
     justify-content: center;
     margin: 0 0 28px 0;
     animation: fadeInDown 0.8s ease-out;
 }

 .toggle-label {
     font-size: 14px;
     color: var(--muted);
     font-weight: 500;
 }

 .toggle-switch {
     position: relative;
     width: 60px;
     height: 32px;
     background: rgba(255, 255, 255, .1);
     border: 1px solid rgba(255, 255, 255, .2);
     border-radius: 16px;
     cursor: pointer;
     transition: all 0.3s ease-out;
     display: flex;
     align-items: center;
     padding: 2px;
 }

 .toggle-switch:hover {
     border-color: rgba(34, 211, 238, .5);
     background: rgba(34, 211, 238, .08);
 }

 .toggle-switch.active {
     background: linear-gradient(135deg, rgba(34, 211, 238, .2), rgba(14, 165, 233, .15));
     border-color: rgba(34, 211, 238, .5);
 }

 .toggle-knob {
     width: 26px;
     height: 26px;
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     border-radius: 12px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: absolute;
     left: 2px;
     box-shadow: 0 2px 8px rgba(14, 165, 233, .4);
 }

 .toggle-switch.active .toggle-knob {
     left: 30px;
 }

 .toggle-label-active {
     color: var(--brand-2);
     font-weight: 600;
 }

 .save-badge {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     background: rgba(34, 211, 238, .15);
     color: var(--brand-2);
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 12px;
     font-weight: 600;
     animation: pulse 2s ease-in-out infinite;
 }

 .plan .popular {
     position: absolute;
     top: 12px;
     right: 12px;
     animation: pulse 2s ease-in-out infinite;
 }

 /* How it works */
 .how {
     padding: 56px 0;
 }

 .how h2 {
     animation: fadeInUp 0.8s ease-out;
 }

 .steps {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px
 }

 .step {
     background: var(--card);
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: 16px;
     padding: 18px;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     animation: fadeInUp 0.6s ease-out backwards;
 }

 .step:nth-child(1) {
     animation-delay: 0.1s;
 }

 .step:nth-child(2) {
     animation-delay: 0.2s;
 }

 .step:nth-child(3) {
     animation-delay: 0.3s;
 }

 .step:hover {
     border-color: rgba(34, 211, 238, .5);
     background: linear-gradient(135deg, rgba(34, 211, 238, .05), rgba(14, 165, 233, .02));
     transform: translateY(-8px);
     box-shadow: 0 20px 50px rgba(34, 211, 238, .3);
 }

 .step .n {
     width: 36px;
     height: 36px;
     border-radius: 9px;
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     display: flex;
     align-items: center;
     justify-content: center;
     color: #001018;
     font-weight: 800;
     margin-bottom: 10px;
     transition: all 0.3s ease-out;
 }

 .step:hover .n {
     transform: scale(1.2) rotateY(360deg);
     box-shadow: 0 0 30px rgba(34, 211, 238, .5);
 }

 /* CTA band */
 .band {
     padding: 46px 0;
 }

 .band-inner {
     display: flex;
     gap: 16px;
     align-items: center;
     justify-content: space-between;
     background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(34, 211, 238, .14));
     border: 1px solid rgba(255, 255, 255, .14);
     box-shadow: var(--shadow);
     border-radius: 20px;
     padding: 22px;
     animation: scaleIn 0.8s ease-out;
     transition: all 0.3s ease-out;
     position: relative;
     overflow: hidden;
 }

 .band-inner::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
     transition: left 0.6s ease;
 }

 .band-inner:hover::before {
     left: 100%;
 }

 .band-inner:hover {
     border-color: rgba(34, 211, 238, .5);
     box-shadow: 0 0 40px rgba(34, 211, 238, .3);
 }

 .band p {
     margin: 0;
     color: #c8e9ff;
     position: relative;
     z-index: 1;
 }

 .band .cta {
     position: relative;
     z-index: 1;
 }

 /* Contact Section */
 .contact {
     padding: 56px 0;
     background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 48px;
     align-items: start;
 }

 .contact-info {
     animation: slideInLeft 0.8s ease-out;
 }

 .contact-info h2 {
     margin-bottom: 24px;
 }

 .info-item {
     margin-bottom: 14px;
     padding-bottom: 14px;
     border-bottom: 1px solid rgba(255, 255, 255, .06);
 }

 .info-item:last-child {
     border-bottom: none;
 }

 .info-label {
     color: var(--brand-2);
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 4px;
 }

 .info-value {
     font-size: 18px;
     color: var(--text);
     margin-bottom: 2px;
 }

 .info-desc {
     color: var(--muted);
     font-size: 14px;
 }

 .contact-form {
     background: linear-gradient(135deg, rgba(34, 211, 238, .05), rgba(14, 165, 233, .02));
     border: 1px solid rgba(255, 255, 255, .06);
     border-radius: 20px;
     padding: 32px;
     animation: slideInRight 0.8s ease-out;
 }

 .contact-form h3 {
     margin: 0 0 20px;
     color: var(--text);
 }

 .form-group {
     margin-bottom: 18px;
 }

 .form-group label {
     display: block;
     font-size: 14px;
     font-weight: 500;
     margin-bottom: 6px;
     color: var(--text);
 }

 .form-group input,
 .form-group textarea {
     width: 100%;
     padding: 10px 12px;
     background: rgba(255, 255, 255, .05);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 8px;
     color: var(--text);
     font-size: 14px;
     font-family: inherit;
     transition: all 0.3s ease-out;
 }

 .form-group input::placeholder,
 .form-group textarea::placeholder {
     color: rgba(255, 255, 255, .3);
 }

 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
     border-color: rgba(34, 211, 238, .5);
     background: rgba(34, 211, 238, .05);
     box-shadow: 0 0 0 3px rgba(34, 211, 238, .1);
 }

 .form-group textarea {
     resize: vertical;
     min-height: 120px;
 }

 .form-submit {
     width: 100%;
     padding: 12px;
     background: linear-gradient(135deg, var(--brand), var(--brand-2));
     color: #001018;
     border: none;
     border-radius: 8px;
     font-weight: 600;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .form-submit:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 30px rgba(14, 165, 233, .4);
 }

 /* Footer */
 footer {
     padding: 60px 0 40px;
     color: var(--muted);
     border-top: 1px solid rgba(255, 255, 255, .06);
     background: linear-gradient(180deg, rgba(255, 255, 255, .01), transparent);
     animation: fadeInUp 0.8s ease-out;
 }

 .footer-top {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 32px;
     margin-bottom: 40px;
 }

 .footer-col h4 {
     color: var(--text);
     margin: 0 0 12px;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

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

 .footer-col li {
     margin-bottom: 8px;
 }

 .footer-col a {
     color: var(--muted);
     font-size: 14px;
 }

 .footer-col a:hover {
     color: var(--brand-2);
 }

 .footer-bottom {
     display: flex;
     gap: 18px;
     align-items: center;
     justify-content: space-between;
     padding-top: 24px;
     border-top: 1px solid rgba(255, 255, 255, .06);
 }

 footer .row {
     display: flex;
     gap: 18px;
     align-items: center;
     justify-content: space-between
 }

 .links {
     display: flex;
     gap: 16px;
     flex-wrap: wrap
 }

 .social-links {
     display: flex;
     gap: 16px;
 }

 .social-links a {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, .05);
     border: 1px solid rgba(255, 255, 255, .1);
     border-radius: 8px;
     transition: all 0.3s ease-out;
 }

 .social-links a:hover {
     background: linear-gradient(135deg, rgba(34, 211, 238, .2), rgba(14, 165, 233, .15));
     border-color: rgba(34, 211, 238, .5);
 }

 /* Scroll animations */
 .observe {
     opacity: 0;
     animation: fadeInUp 0.8s ease-out forwards;
 }

 /* Responsive */
 @media (max-width: 960px) {
     h1 {
         font-size: 36px;
     }

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

     .g,
     .steps {
         grid-template-columns: 1fr
     }

     .menu {
         display: none
     }

     .burger {
         display: inline-flex
     }

     .plan.popular {
         transform: scale(1);
     }

     .band-inner {
         flex-direction: column;
         text-align: center;
     }

     .contact-grid {
         grid-template-columns: 1fr;
         gap: 32px;
     }

     .footer-top {
         grid-template-columns: repeat(2, 1fr);
     }

     .footer-bottom {
         flex-direction: column;
         text-align: center;
         gap: 16px;
     }
 }

 @media (max-width: 640px) {
     h1 {
         font-size: 28px;
     }

     .lead {
         font-size: 16px;
     }

     .kpis {
         flex-direction: column;
     }

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

     .contact-form {
         padding: 24px;
     }

     .footer-top {
         grid-template-columns: 1fr;
         gap: 24px;
     }

     .footer-bottom {
         flex-direction: column;
     }

     .social-links {
         justify-content: center;
     }
 }