:root {
         --primary: #2D5A27;
         --primary-dark: #1E3D1A;
         --secondary: #8B4513;
         --accent: #F4A460;
         --light: #FDFBF7;
         --dark: #1A1A1A;
         --gradient: linear-gradient(135deg, #2D5A27 0%, #4A7C3F 100%);
     }
     
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
     
     body {
         font-family: 'Outfit', sans-serif;
         background: var(--light);
         color: var(--dark);
         line-height: 1.6;
         overflow-x: hidden;
     }
     /* Animated Background */
     
     .bg-pattern {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: -1;
         background: radial-gradient(circle at 20% 80%, rgba(45, 90, 39, 0.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(139, 69, 19, 0.06) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(244, 164, 96, 0.04) 0%, transparent 70%);
     }
     /* Navigation */
     
     nav {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 1.5rem 5%;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         z-index: 1000;
         background: rgba(253, 251, 247, 0.9);
         backdrop-filter: blur(20px);
         border-bottom: 1px solid rgba(45, 90, 39, 0.1);
     }
     
     .logo {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         font-family: 'Space Grotesk', sans-serif;
         font-weight: 700;
         font-size: 1.5rem;
         color: var(--primary);
         text-decoration: none;
     }
     
     .logo-icon {
         width: 55px;
         height: 55px;
         background: url('assets/images/Applogo.png') no-repeat center center;
         background-size: cover;
         border-radius: 12px;
         display: flex;
         align-items: center;
         justify-content: center;
     }
     
     .nav-links {
         display: flex;
         gap: 2rem;
         list-style: none;
     }
     
     .nav-toggle {
         display: none;
         width: 42px;
         height: 42px;
         border: 1px solid rgba(45, 90, 39, 0.2);
         border-radius: 12px;
         background: #fff;
         color: var(--primary-dark);
         align-items: center;
         justify-content: center;
         font-size: 1.1rem;
         cursor: pointer;
         transition: all 0.2s ease;
     }
     
     .nav-toggle:hover {
         border-color: var(--primary);
         background: rgba(45, 90, 39, 0.06);
     }
     
     .nav-links a {
         color: var(--dark);
         text-decoration: none;
         font-weight: 500;
         transition: color 0.3s;
         position: relative;
     }
     
     .nav-links a::after {
         content: '';
         position: absolute;
         bottom: -4px;
         left: 0;
         width: 0;
         height: 2px;
         background: var(--primary);
         transition: width 0.3s;
     }
     
     .nav-links a:hover::after {
         width: 100%;
     }
     
     .auth-btn {
         border: 1px solid rgba(45, 90, 39, 0.25);
         background: #fff;
         color: var(--primary-dark);
         border-radius: 12px;
         padding: 0.6rem 1rem;
         font-weight: 600;
         font-family: 'Outfit', sans-serif;
         cursor: pointer;
         transition: all 0.25s ease;
     }
     
     .auth-btn:hover {
         background: rgba(45, 90, 39, 0.09);
         border-color: var(--primary);
         transform: translateY(-1px);
     }
     
     .nav-auth-item {
         display: none;
     }
     
     .auth-btn--mobile {
         width: 100%;
         margin: 0;
     }
     /* Hero Section */
     
     .hero {
         min-height: 100vh;
         display: flex;
         align-items: center;
         padding: 8rem 5% 4rem;
         position: relative;
     }
     
     .hero-content {
         max-width: 600px;
         z-index: 1;
     }
     
     .hero-badge {
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
         background: rgba(45, 90, 39, 0.1);
         padding: 0.5rem 1rem;
         border-radius: 50px;
         font-size: 0.875rem;
         color: var(--primary);
         font-weight: 600;
         margin-bottom: 1.5rem;
         animation: fadeInUp 0.8s ease;
     }
     
     .hero h1 {
         font-family: 'Space Grotesk', sans-serif;
         font-size: clamp(2.5rem, 5vw, 4rem);
         font-weight: 800;
         line-height: 1.1;
         margin-bottom: 1.5rem;
         animation: fadeInUp 0.8s ease 0.1s both;
     }
     
     .hero h1 span {
         background: var(--gradient);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         background-clip: text;
     }
     
     .hero p {
         font-size: 1.25rem;
         color: #666;
         margin-bottom: 2rem;
         animation: fadeInUp 0.8s ease 0.2s both;
     }
     
     .hero-buttons {
         display: flex;
         gap: 1rem;
         flex-wrap: wrap;
         animation: fadeInUp 0.8s ease 0.3s both;
     }
     
     .btn {
         display: inline-flex;
         align-items: center;
         gap: 0.75rem;
         padding: 1rem 2rem;
         border-radius: 16px;
         font-weight: 600;
         font-size: 1rem;
         text-decoration: none;
         transition: all 0.3s ease;
         cursor: pointer;
         border: none;
     }
     
     .btn-primary {
         background: var(--gradient);
         color: white;
         box-shadow: 0 10px 30px rgba(45, 90, 39, 0.3);
     }
     
     .btn-primary:hover {
         transform: translateY(-3px);
         box-shadow: 0 15px 40px rgba(45, 90, 39, 0.4);
     }
     
     .btn-secondary {
         background: white;
         color: var(--dark);
         border: 2px solid rgba(45, 90, 39, 0.2);
     }
     
     .btn-secondary:hover {
         border-color: var(--primary);
         background: rgba(45, 90, 39, 0.05);
     }
     
     .btn-icon {
         font-size: 1.5rem;
     }
     /* Hero Visual */
     
     .hero-visual {
         position: absolute;
         right: 5%;
         top: 60%;
         transform: translateY(-50%);
         width: 45%;
         max-width: 500px;
     }
     
     .hero-screenshot {
         width: min(250px, 100%);
         margin-left: 22px;
         display: block;
         border-radius: 30px;
         border: 1px solid rgba(45, 90, 39, 0.18);
         box-shadow: 0 22px 40px rgba(19, 42, 17, 0.2);
         animation: heroPhoneFloat 6s ease-in-out infinite;
     }
     /* Hero Phone Preview */
     
     .hero-phone {
         margin-left: auto;
         animation: heroPhoneFloat 6s ease-in-out infinite;
     }
     
     .popup-phone {
         width: min(290px, 100%);
     }
     
     .popup-phone-frame {
         border-radius: 30px;
         background: #111;
         padding: 0.65rem;
         box-shadow: 0 18px 35px rgba(26, 26, 26, 0.35);
     }
     
     .popup-phone-status {
         color: #b7c0b7;
         font-size: 0.76rem;
         display: flex;
         justify-content: space-between;
         padding: 0.35rem 0.75rem 0.5rem;
     }
     
     .popup-phone-screen {
         border-radius: 24px;
         aspect-ratio: 9 / 18;
         background: linear-gradient(150deg, #284a24, #326a2d 55%, #6f9235);
         color: #fff;
         overflow: hidden;
         position: relative;
     }
     
     .phone-flow {
         height: 100%;
         display: flex;
         flex-direction: column;
         gap: 0.68rem;
         padding: 0.85rem 0.75rem;
         position: relative;
     }
     
     .flow-topbar {
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 0.7rem;
         font-weight: 600;
         color: rgba(255, 255, 255, 0.92);
     }
     
     .flow-topbar span:last-child {
         color: rgba(255, 255, 255, 0.8);
     }
     
     .flow-screens {
         position: relative;
         flex: 1;
         border-radius: 16px;
         background: rgba(255, 255, 255, 0.11);
         border: 1px solid rgba(255, 255, 255, 0.22);
         overflow: hidden;
     }
     
     .flow-screen {
         position: absolute;
         inset: 0;
         padding: 0.72rem;
         opacity: 0;
         transform: translateY(8px);
         transition: opacity 0.35s ease, transform 0.35s ease;
         display: flex;
         flex-direction: column;
         gap: 0.58rem;
     }
     
     .flow-screen.active {
         opacity: 1;
         transform: translateY(0);
     }
     
     .flow-screen-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         font-size: 0.7rem;
         color: rgba(255, 255, 255, 0.85);
     }
     
     .flow-pill {
         border-radius: 999px;
         background: rgba(255, 255, 255, 0.18);
         border: 1px solid rgba(255, 255, 255, 0.32);
         font-size: 0.64rem;
         padding: 0.16rem 0.42rem;
     }
     
     .flow-app-open {
         margin-top: auto;
         margin-bottom: auto;
         text-align: center;
     }
     
     .flow-logo {
         width: 56px;
         height: 56px;
         border-radius: 16px;
         margin: 0 auto 0.5rem;
         background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(246, 205, 112, 0.38));
         border: 1px solid rgba(255, 255, 255, 0.45);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.45rem;
     }
     
     .flow-app-open h4 {
         font-size: 0.9rem;
         margin-bottom: 0.2rem;
     }
     
     .flow-app-open p {
         font-size: 0.69rem;
         opacity: 0.92;
     }
     
     .flow-loading {
         margin-top: 0.52rem;
         height: 6px;
         border-radius: 999px;
         background: rgba(255, 255, 255, 0.2);
         overflow: hidden;
     }
     
     .flow-loading>span {
         display: block;
         height: 100%;
         width: 46%;
         border-radius: 999px;
         background: linear-gradient(90deg, #ffd59d, #fff4b9);
         animation: flowLoading 1.2s ease-in-out infinite;
     }
     
     .flow-course-card,
     .flow-video-card {
         border-radius: 11px;
         border: 1px solid rgba(255, 255, 255, 0.26);
         background: rgba(255, 255, 255, 0.13);
         padding: 0.52rem 0.58rem;
         display: flex;
         justify-content: space-between;
         align-items: center;
         gap: 0.55rem;
     }
     
     .flow-course-card h5,
     .flow-video-card h5 {
         font-size: 0.72rem;
         margin-bottom: 0.06rem;
         line-height: 1.28;
     }
     
     .flow-course-card p,
     .flow-video-card p {
         font-size: 0.64rem;
         opacity: 0.9;
         line-height: 1.32;
     }
     
     .flow-chip {
         font-size: 0.62rem;
         border-radius: 999px;
         padding: 0.14rem 0.38rem;
         background: rgba(255, 255, 255, 0.24);
         border: 1px solid rgba(255, 255, 255, 0.32);
         white-space: nowrap;
     }
     
     .flow-player {
         margin-top: auto;
         border-radius: 12px;
         background: rgba(5, 11, 5, 0.38);
         border: 1px solid rgba(255, 255, 255, 0.25);
         padding: 0.55rem;
     }
     
     .flow-player-thumb {
         height: 78px;
         border-radius: 10px;
         background: linear-gradient(145deg, #0f2a12, #27552a);
         border: 1px solid rgba(255, 255, 255, 0.2);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1.6rem;
     }
     
     .flow-player p {
         margin-top: 0.38rem;
         font-size: 0.63rem;
         opacity: 0.95;
     }
     
     .flow-complete-list {
         list-style: none;
         display: grid;
         gap: 0.38rem;
         margin-top: 0.2rem;
     }
     
     .flow-complete-list li {
         border-radius: 9px;
         padding: 0.32rem 0.45rem;
         background: rgba(255, 255, 255, 0.15);
         border: 1px solid rgba(255, 255, 255, 0.22);
         font-size: 0.64rem;
         display: flex;
         align-items: center;
         gap: 0.35rem;
     }
     
     .flow-complete-list i {
         color: #daffd1;
         font-size: 0.64rem;
     }
     
     .flow-progress-wrap {
         border-radius: 10px;
         background: rgba(255, 255, 255, 0.16);
         border: 1px solid rgba(255, 255, 255, 0.28);
         padding: 0.45rem 0.48rem;
     }
     
     .flow-progress-meta {
         display: flex;
         justify-content: space-between;
         font-size: 0.62rem;
         margin-bottom: 0.28rem;
         color: rgba(255, 255, 255, 0.92);
     }
     
     .flow-progress {
         height: 7px;
         border-radius: 999px;
         overflow: hidden;
         background: rgba(255, 255, 255, 0.2);
     }
     
     .flow-progress-fill {
         width: 0;
         height: 100%;
         border-radius: 999px;
         background: linear-gradient(90deg, #ffe39d, #fef5ce);
         transition: width 0.65s ease;
     }
     
     .hero-success-pop {
         position: absolute;
         left: 50%;
         bottom: 3.75rem;
         transform: translateX(-50%) scale(0.8);
         width: calc(100% - 1.55rem);
         border-radius: 12px;
         padding: 0.56rem 0.62rem;
         background: linear-gradient(145deg, rgba(255, 247, 201, 0.95), rgba(255, 227, 157, 0.96));
         color: #3b2b07;
         border: 1px solid rgba(102, 78, 8, 0.16);
         box-shadow: 0 10px 20px rgba(26, 15, 3, 0.24);
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.25s ease, transform 0.25s ease;
         text-align: center;
     }
     
     .hero-success-pop h4 {
         font-size: 0.75rem;
         margin-bottom: 0.06rem;
         font-family: 'Space Grotesk', sans-serif;
     }
     
     .hero-success-pop p {
         font-size: 0.64rem;
         line-height: 1.25;
         color: rgba(52, 37, 3, 0.9);
     }
     
     .hero-success-pop.show {
         opacity: 1;
         transform: translateX(-50%) scale(1);
     }
     
     @keyframes flowLoading {
         0% {
             width: 18%;
         }
         50% {
             width: 82%;
         }
         100% {
             width: 18%;
         }
     }
     
     @keyframes heroPhoneFloat {
         0%,
         100% {
             transform: translateY(0);
         }
         50% {
             transform: translateY(-12px);
         }
     }
     
     @keyframes fadeInUp {
         from {
             opacity: 0;
             transform: translateY(30px);
         }
         to {
             opacity: 1;
             transform: translateY(0);
         }
     }
     
     @keyframes buttonSpinner {
         to {
             transform: rotate(360deg);
         }
     }
     
     @keyframes skeletonShimmer {
         0% {
             background-position: 100% 0;
         }
         100% {
             background-position: -100% 0;
         }
     }
     /* Features Section */
     
     .features {
         padding: 6rem 5%;
         background: white;
     }
     
     .section-header {
         text-align: center;
         margin-bottom: 4rem;
     }
     
     .section-header h2 {
         font-family: 'Space Grotesk', sans-serif;
         font-size: clamp(2rem, 4vw, 3rem);
         font-weight: 700;
         margin-bottom: 1rem;
     }
     
     .section-header p {
         color: #666;
         max-width: 600px;
         margin: 0 auto;
     }
     
     .features-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }
     
     .feature-card {
         background: var(--light);
         border-radius: 24px;
         padding: 2rem;
         transition: all 0.3s ease;
         border: 1px solid rgba(45, 90, 39, 0.1);
     }
     
     .feature-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 20px 40px rgba(45, 90, 39, 0.15);
         border-color: var(--primary);
     }
     
     .feature-icon {
         width: 60px;
         height: 60px;
         background: var(--gradient);
         border-radius: 16px;
         display: flex;
         color: #fff;
         align-items: center;
         justify-content: center;
         font-size: 1.75rem;
         margin-bottom: 1.5rem;
     }
     
     .feature-card h3 {
         font-family: 'Space Grotesk', sans-serif;
         font-size: 1.25rem;
         font-weight: 600;
         margin-bottom: 0.75rem;
     }
     
     .feature-card p {
         color: #666;
         font-size: 0.95rem;
     }
     /* Courses Section */
     
     .courses {
         padding: 6rem 5%;
         background: var(--light);
     }
     
     .courses-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 2rem;
         max-width: 1200px;
         margin: 0 auto;
     }
     
     .course-card {
         background: linear-gradient(175deg, #ffffff 0%, #f9fbf7 100%);
         border-radius: 26px;
         border: 1px solid rgba(45, 90, 39, 0.18);
         box-shadow: 0 14px 30px rgba(20, 40, 17, 0.08);
         display: flex;
         flex-direction: column;
         overflow: hidden;
         transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
     }
     
     .course-card:hover {
         transform: translateY(-8px);
         box-shadow: 0 22px 40px rgba(19, 42, 17, 0.16);
         border-color: rgba(45, 90, 39, 0.34);
     }
     
     .course-media {
         position: relative;
         padding: 1rem 1rem 0.8rem;
     }
     
     .course-media::after {
         content: '';
         position: absolute;
         inset: 1rem 1rem 0.8rem;
         border-radius: 18px;
         background: linear-gradient(180deg, rgba(4, 8, 4, 0) 42%, rgba(9, 18, 8, 0.72) 100%);
         pointer-events: none;
     }
     
     .course-body {
         padding: 0 1rem 1rem;
         display: grid;
         gap: 0.8rem;
         height: 100%;
     }
     
     .status-tag {
         position: absolute;
         top: 1.7rem;
         right: 1.7rem;
         z-index: 1;
         display: inline-flex;
         align-items: center;
         font-size: 0.78rem;
         font-weight: 700;
         border-radius: 999px;
         padding: 0.35rem 0.7rem;
         backdrop-filter: blur(8px);
         border: 1px solid rgba(255, 255, 255, 0.35);
     }
     
     .status-live {
         background: rgba(20, 57, 17, 0.72);
         color: #f6fff1;
     }
     
     .status-soon {
         background: rgba(111, 54, 14, 0.75);
         color: #fff4e6;
     }
     
     .course-card h3 {
         font-family: 'Space Grotesk', sans-serif;
         font-size: 1.2rem;
         line-height: 1.32;
         color: #203120;
     }
     
     .course-card p {
         color: #5f665f;
     }
     
     .course-thumb {
         width: 100%;
         height: 310px;
         object-fit: cover;
         border-radius: 18px;
         border: 1px solid rgba(45, 90, 39, 0.14);
     }
     
     .course-description {
         font-size: 0.92rem;
         color: #4f5a4f;
         min-height: 50px;
         margin-top: -0.1rem;
     }
     
     .course-meta {
         list-style: none;
         margin: 0;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         gap: 0.45rem;
     }
     
     .course-meta li {
         color: #2c4728;
         font-size: 0.8rem;
         font-weight: 600;
         background: rgba(45, 90, 39, 0.09);
         border: 1px solid rgba(45, 90, 39, 0.17);
         border-radius: 999px;
         padding: 0.35rem 0.65rem;
         line-height: 1.2;
     }
     
     .course-meta li::before {
         display: none;
     }
     
     .course-footer {
         display: flex;
         align-items: flex-end;
         justify-content: space-between;
         gap: 0.7rem;
         margin-top: 0.25rem;
     }
     
     .course-price {
         color: var(--primary-dark);
         font-family: 'Space Grotesk', sans-serif;
         font-size: 1.5rem;
         font-weight: 700;
         line-height: 1;
     }
     
     .course-price-wrap {
         display: flex;
         align-items: baseline;
         gap: 0.55rem;
         flex-wrap: wrap;
     }
     
     .course-price--current {
         color: var(--primary-dark);
     }
     
     .course-price--original {
         color: #8a8f8a;
         font-family: 'Outfit', sans-serif;
         font-size: 1rem;
         font-weight: 600;
         text-decoration: line-through;
         text-decoration-thickness: 2px;
         opacity: 0.9;
     }
     
     .course-discount-text {
         margin-top: 0.32rem;
         display: inline-flex;
         align-items: center;
         border-radius: 999px;
         padding: 0.2rem 0.55rem;
         font-size: 0.76rem;
         font-weight: 700;
         color: #6a2f0c;
         background: rgba(177, 96, 41, 0.14);
         border: 1px solid rgba(141, 74, 31, 0.25);
         width: fit-content;
     }
     
     .course-detail {
         font-size: 0.78rem;
         color: #6a736a;
         margin-top: 0.28rem;
     }
     
     .course-action {
         width: 100%;
         border: none;
         border-radius: 14px;
         padding: 0.82rem 1rem;
         font-weight: 700;
         font-family: 'Outfit', sans-serif;
         cursor: pointer;
         transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
         margin-top: auto;
     }
     
     .course-action--buy {
         background: var(--gradient);
         color: #fff;
         box-shadow: 0 12px 22px rgba(45, 90, 39, 0.3);
     }
     
     .course-action--buy:hover {
         transform: translateY(-2px);
         box-shadow: 0 16px 28px rgba(45, 90, 39, 0.38);
     }
     
     .course-action--enrolled {
         background: rgba(45, 90, 39, 0.14);
         border: 1px solid rgba(45, 90, 39, 0.22);
         color: var(--primary-dark);
         cursor: not-allowed;
     }
     
     .course-action--soon {
         background: rgba(111, 54, 14, 0.14);
         border: 1px solid rgba(111, 54, 14, 0.28);
         color: #6f360e;
         cursor: not-allowed;
     }
     
     .course-card--loading {
         pointer-events: none;
     }
     
     .course-card--loading .course-media::after {
         display: none;
     }
     
     .course-thumb--skeleton {
         height: 310px;
         border-radius: 18px;
         border: 1px solid rgba(45, 90, 39, 0.14);
         background: linear-gradient(90deg, rgba(206, 220, 205, 0.35) 25%, rgba(227, 236, 226, 0.9) 38%, rgba(206, 220, 205, 0.35) 63%);
         background-size: 300% 100%;
         animation: skeletonShimmer 1.1s linear infinite;
     }
     
     .skeleton-line,
     .skeleton-chip,
     .skeleton-button {
         background: linear-gradient(90deg, rgba(206, 220, 205, 0.35) 25%, rgba(227, 236, 226, 0.9) 38%, rgba(206, 220, 205, 0.35) 63%);
         background-size: 300% 100%;
         animation: skeletonShimmer 1.1s linear infinite;
     }
     
     .skeleton-line {
         border-radius: 10px;
         height: 12px;
     }
     
     .skeleton-line--title {
         height: 20px;
         width: 72%;
     }
     
     .skeleton-line--short {
         width: 52%;
     }
     
     .skeleton-line--price {
         width: 34%;
         height: 24px;
         margin-top: 0.2rem;
     }
     
     .skeleton-chips {
         display: flex;
         gap: 0.45rem;
         flex-wrap: wrap;
     }
     
     .skeleton-chip {
         width: 88px;
         height: 28px;
         border-radius: 999px;
     }
     
     .skeleton-button {
         width: 100%;
         height: 45px;
         border-radius: 14px;
         margin-top: auto;
     }
     /* Login Modal */
     
     .login-modal {
         display: none;
         position: fixed;
         inset: 0;
         padding: 1.2rem;
         background: rgba(10, 14, 10, 0.58);
         backdrop-filter: blur(6px);
         justify-content: center;
         align-items: center;
         z-index: 2000;
     }
     
     .login-card {
         position: relative;
         width: min(420px, 100%);
         background: #fff;
         border-radius: 20px;
         border: 1px solid rgba(45, 90, 39, 0.12);
         box-shadow: 0 24px 50px rgba(16, 31, 14, 0.28);
         padding: 1.3rem;
         display: grid;
         gap: 0.7rem;
     }
     
     .login-card h3 {
         font-family: 'Space Grotesk', sans-serif;
         font-size: 1.4rem;
         line-height: 1.2;
         color: var(--primary-dark);
     }
     
     .login-card p {
         color: #5d665d;
         font-size: 0.93rem;
     }
     
     .login-status {
         min-height: 22px;
         margin-top: -0.15rem;
         margin-bottom: -0.05rem;
         font-size: 0.84rem;
         font-weight: 600;
         color: #5d665d;
     }
     
     .login-status.is-success {
         color: #1f8a3c;
     }
     
     .login-status.is-error {
         color: #b43737;
     }
     
     .login-card label {
         font-size: 0.83rem;
         font-weight: 600;
         color: #374037;
     }
     
     .login-input {
         border: 1px solid rgba(45, 90, 39, 0.2);
         border-radius: 12px;
         padding: 0.78rem 0.85rem;
         font-size: 0.96rem;
         color: #1f241f;
         outline: none;
         transition: border-color 0.2s ease, box-shadow 0.2s ease;
         width: 100%;
     }
     
     .login-input:focus {
         border-color: rgba(45, 90, 39, 0.55);
         box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.12);
     }
     
     .recaptcha-wrap {
         min-height: 78px;
         border: 1px dashed rgba(45, 90, 39, 0.25);
         border-radius: 12px;
         padding: 0.35rem;
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: auto;
     }
     
     .login-action {
         border: none;
         border-radius: 12px;
         padding: 0.72rem 0.92rem;
         font-weight: 700;
         font-family: 'Outfit', sans-serif;
         cursor: pointer;
         transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
     }
     
     .login-action:disabled {
         opacity: 0.75;
         cursor: not-allowed;
         transform: none;
     }
     
     .login-action:hover {
         transform: translateY(-1px);
     }
     
     .login-action--primary {
         background: var(--gradient);
         color: #fff;
         box-shadow: 0 10px 20px rgba(45, 90, 39, 0.26);
     }
     
     .login-action--secondary {
         background: rgba(45, 90, 39, 0.12);
         color: var(--primary-dark);
     }
     
     .login-action--ready {
         background: #1f8a3c;
         color: #ffffff;
         box-shadow: 0 10px 20px rgba(31, 138, 60, 0.3);
     }
     
     .login-action--loading {
         display: inline-flex;
         justify-content: center;
         align-items: center;
         gap: 0.5rem;
     }
     
     .login-action--loading::after {
         content: "";
         width: 14px;
         height: 14px;
         border-radius: 50%;
         border: 2px solid rgba(255, 255, 255, 0.45);
         border-top-color: #ffffff;
         animation: buttonSpinner 0.7s linear infinite;
     }
     
     .login-action--secondary.login-action--loading::after {
         border: 2px solid rgba(45, 90, 39, 0.25);
         border-top-color: var(--primary-dark);
     }
     
     .login-action--success {
         background: #1f8a3c;
         color: #ffffff;
         box-shadow: 0 10px 20px rgba(31, 138, 60, 0.3);
     }
     
     .login-step {
         display: grid;
         gap: 0.55rem;
     }
     
     .otp-step {
         display: none;
     }
     
     .otp-step.show {
         display: grid;
     }
     
     .login-close {
         position: absolute;
         top: 0.75rem;
         right: 0.75rem;
         width: 32px;
         height: 32px;
         border: 1px solid rgba(45, 90, 39, 0.22);
         border-radius: 10px;
         background: #fff;
         color: #344434;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.2s ease;
     }
     
     .login-close:hover {
         background: rgba(45, 90, 39, 0.1);
         border-color: rgba(45, 90, 39, 0.4);
     }
     /* Buy Process Section */
     
     .buy-process {
         padding: 6rem 5%;
         background: white;
     }
     
     .process-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: 1.25rem;
         max-width: 1200px;
         margin: 0 auto;
     }
     
     .process-step {
         background: var(--light);
         border-radius: 18px;
         padding: 1.25rem;
         border: 1px solid rgba(45, 90, 39, 0.12);
     }
     
     .step-number {
         width: 34px;
         height: 34px;
         border-radius: 50%;
         background: var(--gradient);
         color: white;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-weight: 700;
         margin-bottom: 0.7rem;
     }
     
     .process-step h3 {
         font-family: 'Space Grotesk', sans-serif;
         font-size: 1rem;
         margin-bottom: 0.45rem;
     }
     
     .process-step p {
         color: #5f665f;
         font-size: 0.92rem;
     }
     
     .process-note {
         max-width: 1200px;
         margin: 1.5rem auto 0;
         background: rgba(45, 90, 39, 0.08);
         border-left: 4px solid var(--primary);
         padding: 1rem 1.1rem;
         border-radius: 0 12px 12px 0;
         color: #314131;
         font-size: 0.92rem;
     }
     /* Download Section */
     
     .download-section {
         padding: 6rem 5%;
         background: var(--gradient);
         position: relative;
         overflow: hidden;
     }
     
     .download-section::before {
         content: '';
         position: absolute;
         top: -50%;
         right: -20%;
         width: 60%;
         height: 200%;
         background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     }
     
     .download-content {
         max-width: 800px;
         margin: 0 auto;
         text-align: center;
         color: white;
         position: relative;
         z-index: 1;
     }
     
     .download-content h2 {
         font-family: 'Space Grotesk', sans-serif;
         font-size: clamp(2rem, 4vw, 2.5rem);
         margin-bottom: 1rem;
     }
     
     .download-content p {
         opacity: 0.9;
         margin-bottom: 2rem;
         font-size: 1.1rem;
     }
     
     .store-buttons {
         display: flex;
         justify-content: center;
         gap: 1.5rem;
         flex-wrap: wrap;
     }
     
     .store-btn {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         background: white;
         color: var(--dark);
         padding: 1rem 2rem;
         border-radius: 16px;
         text-decoration: none;
         font-weight: 600;
         transition: all 0.3s ease;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     }
     
     .store-btn:hover {
         transform: scale(1.05);
         box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
     }
     
     .store-btn-icon {
         font-size: 2rem;
     }
     
     .store-btn-text {
         text-align: left;
     }
     
     .store-btn-text span {
         display: block;
         font-size: 0.75rem;
         font-weight: 400;
     }
     /* Stats Section */
     
     .stats {
         padding: 4rem 5%;
         background: var(--primary-dark);
     }
     
     .stats-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 2rem;
         max-width: 1000px;
         margin: 0 auto;
         text-align: center;
     }
     
     .stat-item {
         color: white;
     }
     
     .stat-number {
         font-family: 'Space Grotesk', sans-serif;
         font-size: 3rem;
         font-weight: 700;
         display: block;
         margin-bottom: 0.5rem;
     }
     
     .stat-label {
         opacity: 0.8;
         font-size: 1rem;
     }
     /* Footer */
     
     footer {
         background: var(--dark);
         color: white;
         padding: 4rem 5% 2rem;
     }
     
     .footer-content {
         max-width: 1200px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         gap: 3rem;
         margin-bottom: 3rem;
     }
     
     .footer-brand {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         font-family: 'Space Grotesk', sans-serif;
         font-weight: 700;
         font-size: 1.5rem;
         margin-bottom: 1rem;
     }
     
     .footer-brand .logo-icon {
         width: 40px;
         height: 40px;
     }
     
     .footer-brand p {
         opacity: 0.7;
         font-size: 0.95rem;
     }
     
     .footer-links h4 {
         font-family: 'Space Grotesk', sans-serif;
         font-size: 1.1rem;
         margin-bottom: 1.5rem;
     }
     
     .footer-links ul {
         list-style: none;
     }
     
     .footer-links li {
         margin-bottom: 0.75rem;
     }
     
     .footer-links a {
         color: white;
         opacity: 0.7;
         text-decoration: none;
         transition: opacity 0.3s;
     }
     
     .footer-links a:hover {
         opacity: 1;
     }
     
     .footer-bottom {
         text-align: center;
         padding-top: 2rem;
         border-top: 1px solid rgba(255, 255, 255, 0.1);
         opacity: 0.6;
         font-size: 0.9rem;
     }
     /* Responsive */
     
     @media (max-width: 968px) {
         .hero {
             flex-direction: column;
             text-align: center;
             padding-top: 7rem;
         }
         .hero-content {
             max-width: 100%;
         }
         .hero-visual {
             position: relative;
             width: 100%;
             max-width: 300px;
             margin: 3rem auto 0;
             transform: none;
             top: auto;
             right: auto;
         }
         .hero-buttons {
             justify-content: center;
         }
         nav {
             padding: 1rem 5%;
         }
         .nav-links {
             position: absolute;
             top: calc(100% + 0.5rem);
             left: 5%;
             right: 5%;
             flex-direction: column;
             gap: 0;
             background: rgba(253, 251, 247, 0.98);
             backdrop-filter: blur(16px);
             border: 1px solid rgba(45, 90, 39, 0.12);
             border-radius: 16px;
             box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
             max-height: 0;
             opacity: 0;
             overflow: hidden;
             pointer-events: none;
             transition: max-height 0.25s ease, opacity 0.25s ease;
         }
         .nav-links.open {
             max-height: 520px;
             opacity: 1;
             pointer-events: auto;
         }
         .nav-links li {
             border-bottom: 1px solid rgba(45, 90, 39, 0.08);
         }
         .nav-links li:last-child {
             border-bottom: none;
         }
         .nav-auth-item {
             display: block;
             padding: 0.85rem 1rem;
         }
         .auth-btn--mobile {
             display: inline-flex;
             align-items: center;
             justify-content: center;
         }
         .nav-links a {
             display: block;
             padding: 0.85rem 1rem;
         }
         .nav-links a::after {
             display: none;
         }
         .nav-toggle {
             display: inline-flex;
         }
         .auth-btn--desktop {
             display: none;
         }
         .auth-btn {
             margin-left: auto;
             margin-right: 0.5rem;
             padding: 0.55rem 0.9rem;
         }
         .nav-links .auth-btn--mobile {
             width: 100%;
             margin: 0;
             padding: 0.72rem 0.92rem;
         }
         .popup-phone {
             margin: 0 auto;
         }
     }
     
     @media (max-width: 480px) {
         .btn {
             padding: 0.875rem 1.5rem;
             font-size: 0.9rem;
         }
         .store-btn {
             padding: 0.875rem 1.5rem;
         }
         .course-thumb {
             height: 200px;
             object-fit: fill;
         }
         .course-media {
             padding: 0.8rem 0.8rem 0.65rem;
         }
         .course-media::after {
             inset: 0.8rem 0.8rem 0.65rem;
         }
         .status-tag {
             top: 1.35rem;
             right: 1.35rem;
         }
         .course-body {
             padding: 0 0.8rem 0.85rem;
         }
         .login-card {
             padding: 1rem;
         }
         .popup-phone {
             width: min(255px, 100%);
         }
         .logo {
             font-size: 1.2rem;
         }
     }