*,
 ::after,
 ::before {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 :root {
     --orange: #F97316;
     --orange-dark: #EA6500;
     --orange-light: #FFF7ED;
     --orange-mid: #FFEDD5;
     --black: #0F0F0F;
     --gray-900: #1A1A1A;
     --gray-700: #374151;
     --gray-500: #6B7280;
     --gray-200: #E5E7EB;
     --gray-100: #F9FAFB;
     --white: #FFFFFF;
     --font-display: 'Fraunces', Georgia, serif;
     --font-body: 'Plus Jakarta Sans', sans-serif;
     --radius-sm: 6px;
     --radius-md: 12px;
     --radius-lg: 20px;
     --radius-xl: 32px;
     --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
     --shadow-md: 0 4px 16px rgba(0, 0, 0, .10);
     --shadow-lg: 0 8px 32px rgba(0, 0, 0, .14);
     --shadow-orange: 0 4px 24px rgba(249, 115, 22, .30);
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: var(--font-body);
     font-size: 16px;
     line-height: 1.65;
     color: var(--gray-900);
     background: var(--white);
     -webkit-font-smoothing: antialiased
 }

 .container {
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 24px
 }

 a {
     color: inherit;
     text-decoration: none
 }

 img {
     display: block;
     max-width: 100%
 }

 /* ═══════════════════════════════════════
       NAV
    ═══════════════════════════════════════ */
 .nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     background: rgba(255, 255, 255, .92);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--gray-200)
 }

 .nav-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 64px
 }

 .logo-image {
     height: 32px;
     width: auto;
     display: block
 }

 .nav-logo {
     display: flex;
     align-items: center;
     gap: 10px
 }

 .logo-text {
     font-family: var(--font-display);
     font-weight: 700;
     font-size: 18px;
     color: var(--black)
 }

 .nav-links {
     display: flex;
     align-items: center;
     gap: 28px
 }

 .nav-links a {
     font-size: 14px;
     font-weight: 500;
     color: var(--gray-700);
     transition: color .2s
 }

 .nav-links a:hover {
     color: var(--orange)
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-family: var(--font-body);
     font-weight: 600;
     font-size: 15px;
     padding: 12px 26px;
     border-radius: var(--radius-sm);
     border: 2px solid transparent;
     cursor: pointer;
     transition: all .22s ease;
     text-decoration: none
 }

 .btn-primary {
     background: var(--orange);
     color: var(--white);
     border-color: var(--orange)
 }

 .btn-primary:hover {
     background: var(--orange-dark);
     border-color: var(--orange-dark);
     box-shadow: var(--shadow-orange);
     transform: translateY(-1px)
 }

 .btn-ghost {
     background: rgba(255, 255, 255, .12);
     color: var(--white);
     border-color: rgba(255, 255, 255, .3);
     backdrop-filter: blur(4px)
 }

 .btn-ghost:hover {
     background: rgba(255, 255, 255, .22);
     border-color: rgba(255, 255, 255, .5)
 }

 .btn-outline {
     background: transparent;
     color: var(--orange);
     border-color: var(--orange)
 }

 .btn-outline:hover {
     background: var(--orange);
     color: var(--white);
     box-shadow: var(--shadow-orange)
 }

 .nav-cta {
     background: var(--orange) !important;
     color: var(--white) !important;
     padding: 8px 18px;
     border-radius: var(--radius-sm);
     font-weight: 600 !important
 }

 .nav-cta:hover {
     background: var(--orange-dark) !important;
     box-shadow: var(--shadow-orange)
 }

 @media(max-width:860px) {
     .nav-links {
         display: none
     }
 }

 /* ═══════════════════════════════════════
       HERO
    ═══════════════════════════════════════ */
 .hero {
     position: relative;
     padding-top: 64px;
     min-height: 620px;
     display: flex;
     align-items: center;
     overflow: hidden
 }

 .hero-banner {
     position: absolute;
     inset: 0
 }

 .banner-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center
 }

 .banner-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(105deg, rgba(15, 15, 15, .84) 0, rgba(15, 15, 15, .62) 55%, rgba(249, 115, 22, .16) 100%)
 }

 .hero-content {
     position: relative;
     z-index: 2;
     padding-top: 80px;
     padding-bottom: 80px;
     max-width: 640px
 }

 .hero-badge {
     display: inline-block;
     background: rgba(249, 115, 22, .18);
     border: 1px solid rgba(249, 115, 22, .45);
     color: #fed7aa;
     font-size: 12px;
     font-weight: 600;
     letter-spacing: .8px;
     text-transform: uppercase;
     padding: 5px 14px;
     border-radius: 100px;
     margin-bottom: 22px
 }

 .hero-title {
     font-family: var(--font-display);
     font-size: clamp(40px, 7vw, 72px);
     font-weight: 700;
     line-height: 1.08;
     color: var(--white);
     margin-bottom: 16px;
     letter-spacing: -.5px
 }

 .hero-title em {
     font-style: italic;
     color: var(--orange)
 }

 .hero-tagline {
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 500;
     font-style: italic;
     color: #fed7aa;
     margin-bottom: 18px
 }

 .hero-sub {
     color: #d1d5db;
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 32px;
     max-width: 480px
 }

 .hero-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 20px
 }

 .hero-note {
     font-size: 13px;
     color: #9ca3af
 }

 /* ═══════════════════════════════════════
       STAT STRIP
    ═══════════════════════════════════════ */
 .stat-strip {
     background: var(--orange);
     padding: 20px 0
 }

 .stat-inner {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0;
     flex-wrap: wrap
 }

 .stat-item {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 32px;
     border-right: 1px solid rgba(255, 255, 255, .25)
 }

 .stat-item:last-child {
     border-right: none
 }

 .stat-icon {
     font-size: 20px
 }

 .stat-val {
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 700;
     color: var(--white);
     line-height: 1
 }

 .stat-desc {
     font-size: 12px;
     color: rgba(255, 255, 255, .8);
     line-height: 1.3
 }

 @media(max-width:600px) {
     .stat-item {
         padding: 8px 20px;
         border-right: none;
         border-bottom: 1px solid rgba(255, 255, 255, .15)
     }

     .stat-item:last-child {
         border-bottom: none
     }
 }

 /* ═══════════════════════════════════════
       SECTION BASE
    ═══════════════════════════════════════ */
 .section {
     padding: 88px 0
 }

 .section-label {
     display: inline-block;
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     color: var(--orange);
     margin-bottom: 14px
 }

 .section-title {
     font-family: var(--font-display);
     font-size: clamp(28px, 4.5vw, 46px);
     font-weight: 700;
     line-height: 1.12;
     color: var(--black);
     margin-bottom: 52px;
     letter-spacing: -.3px
 }

 /* ═══════════════════════════════════════
       PROBLEMS
    ═══════════════════════════════════════ */
 .problems {
     background: var(--black)
 }

 .problems .section-label {
     color: #f97316
 }

 .problems .section-title {
     color: var(--white)
 }

 .problems-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 16px
 }

 .problem-item {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     background: rgba(255, 255, 255, .05);
     border: 1px solid rgba(255, 255, 255, .08);
     border-radius: var(--radius-md);
     padding: 20px;
     transition: border-color .2s
 }

 .problem-item:hover {
     border-color: rgba(249, 115, 22, .35)
 }

 .problem-icon {
     font-size: 22px;
     flex-shrink: 0;
     margin-top: 2px
 }

 .problem-item p {
     color: #c9d1dc;
     font-size: 14.5px;
     line-height: 1.6
 }

 .problem-answer {
     background: rgba(249, 115, 22, .12);
     border-color: rgba(249, 115, 22, .35) !important
 }

 .problem-answer p {
     color: var(--white);
     font-size: 15px
 }

 /* ═══════════════════════════════════════
       VALUES
    ═══════════════════════════════════════ */
 .values {
     background: var(--gray-100)
 }

 .values-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
     gap: 24px
 }

 .value-card {
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-lg);
     padding: 32px 26px;
     transition: box-shadow .22s, transform .22s
 }

 .value-card:hover {
     box-shadow: var(--shadow-md);
     transform: translateY(-3px)
 }

 .value-num {
     font-family: var(--font-display);
     font-size: 42px;
     font-weight: 700;
     color: var(--orange-mid);
     line-height: 1;
     margin-bottom: 14px
 }

 .value-card h3 {
     font-family: var(--font-display);
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 10px;
     color: var(--black);
     line-height: 1.25
 }

 .value-card p {
     font-size: 14.5px;
     color: var(--gray-500);
     line-height: 1.65
 }

 /* ═══════════════════════════════════════
       FEATURES
    ═══════════════════════════════════════ */
 .features {
     background: var(--white)
 }

 .features-cols {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 28px
 }

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

 .feature-col-title {
     font-size: 12px;
     font-weight: 700;
     letter-spacing: .8px;
     text-transform: uppercase;
     color: var(--orange);
     margin-bottom: 14px;
     padding-bottom: 10px;
     border-bottom: 2px solid var(--orange-mid)
 }

 .feature-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .feature-list li {
     font-size: 14.5px;
     color: var(--gray-700);
     padding-left: 20px;
     position: relative;
     line-height: 1.5
 }

 .feature-list li::before {
     content: '→';
     position: absolute;
     left: 0;
     color: var(--orange);
     font-size: 13px
 }

 .feature-unique {
     background: var(--orange-light);
     border-radius: var(--radius-lg);
     padding: 28px
 }

 /* ═══════════════════════════════════════
       HOW IT WORKS
    ═══════════════════════════════════════ */
 .how {
     background: var(--gray-100)
 }

 .how-steps {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 0;
     counter-reset: steps;
     position: relative
 }

 .how-steps::before {
     content: '';
     position: absolute;
     top: 28px;
     left: 10%;
     right: 10%;
     height: 2px;
     background: var(--orange-mid);
     z-index: 0
 }

 @media(max-width:600px) {
     .how-steps::before {
         display: none
     }
 }

 .how-step {
     position: relative;
     z-index: 1;
     text-align: center;
     padding: 0 16px
 }

 .how-step-num {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: var(--orange);
     color: var(--white);
     font-family: var(--font-display);
     font-size: 22px;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
     box-shadow: var(--shadow-orange)
 }

 .how-step h4 {
     font-family: var(--font-display);
     font-size: 16px;
     font-weight: 700;
     color: var(--black);
     margin-bottom: 8px
 }

 .how-step p {
     font-size: 13.5px;
     color: var(--gray-500);
     line-height: 1.6
 }

 /* ═══════════════════════════════════════
       MENU HIGHLIGHTS (from user guide)
    ═══════════════════════════════════════ */
 .menus {
     background: var(--white)
 }

 .menu-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 20px
 }

 .menu-card {
     border: 1.5px solid var(--gray-200);
     border-radius: var(--radius-lg);
     padding: 26px 22px;
     transition: border-color .2s, box-shadow .2s, transform .2s;
     position: relative;
     overflow: hidden
 }

 .menu-card:hover {
     border-color: var(--orange);
     box-shadow: var(--shadow-md);
     transform: translateY(-3px)
 }

 .menu-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: var(--orange);
     transform: scaleX(0);
     transition: transform .25s ease;
     transform-origin: left
 }

 .menu-card:hover::before {
     transform: scaleX(1)
 }

 .menu-card-icon {
     font-size: 32px;
     margin-bottom: 14px
 }

 .menu-card h3 {
     font-family: var(--font-display);
     font-size: 18px;
     font-weight: 700;
     color: var(--black);
     margin-bottom: 10px
 }

 .menu-card ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 6px
 }

 .menu-card ul li {
     font-size: 13.5px;
     color: var(--gray-500);
     padding-left: 16px;
     position: relative;
     line-height: 1.5
 }

 .menu-card ul li::before {
     content: '·';
     position: absolute;
     left: 0;
     color: var(--orange);
     font-weight: 700
 }

 /* ═══════════════════════════════════════
       PRICING
    ═══════════════════════════════════════ */
 .pricing {
     background: var(--gray-100)
 }

 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 24px;
     align-items: start
 }

 .pricing-card {
     background: var(--white);
     border: 1.5px solid var(--gray-200);
     border-radius: var(--radius-xl);
     padding: 36px 30px;
     display: flex;
     flex-direction: column;
     gap: 20px
 }

 .pricing-featured {
     border-color: var(--orange);
     box-shadow: var(--shadow-orange);
     position: relative;
     transform: scale(1.03)
 }

 .pricing-badge {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: var(--orange)
 }

 .pricing-name {
     font-family: var(--font-display);
     font-size: 32px;
     font-weight: 700;
     color: var(--black);
     line-height: 1
 }

 .pricing-price-wrap {
     display: flex;
     flex-direction: column;
     gap: 2px
 }

 .pricing-price-original {
     font-size: 13px;
     color: var(--gray-500);
     text-decoration: line-through
 }

 .pricing-price {
     font-family: var(--font-display);
     font-size: 26px;
     font-weight: 700;
     color: var(--orange)
 }

 .pricing-period {
     font-size: 13px;
     color: var(--gray-500)
 }

 .pricing-save {
     display: inline-block;
     background: var(--orange);
     color: var(--white);
     font-size: 9.5px;
     font-weight: 700;
     letter-spacing: .8px;
     text-transform: uppercase;
     padding: 2px 8px;
     border-radius: 100px;
     margin-top: 4px
 }

 .pricing-features {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
     flex: 1
 }

 .pricing-features li {
     font-size: 14px;
     color: var(--gray-700);
     padding-left: 22px;
     position: relative;
     line-height: 1.5
 }

 .pricing-features li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--orange);
     font-weight: 700
 }

 .pricing-note {
     color: var(--gray-500) !important;
     font-style: italic;
     font-size: 13px !important
 }

 .pricing-note::before {
     display: none !important
 }

 .pricing-na {
     color: var(--gray-400) !important
 }

 .pricing-na::before {
     content: '–' !important;
     color: var(--gray-300) !important
 }

 @media(max-width:860px) {
     .pricing-featured {
         transform: none
     }
 }

 /* ═══════════════════════════════════════
       DOWNLOAD
    ═══════════════════════════════════════ */
 .download {
     background: var(--white)
 }

 .download-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 24px;
     margin-top: 0
 }

 .download-card {
     background: var(--gray-100);
     border: 1.5px solid var(--gray-200);
     border-radius: var(--radius-xl);
     padding: 32px 26px;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 16px;
     transition: transform .2s, box-shadow .2s
 }

 .download-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-md)
 }

 .download-icon {
     font-size: 44px
 }

 .download-badge {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: var(--orange)
 }

 .download-name {
     font-family: var(--font-display);
     font-size: 28px;
     font-weight: 700;
     color: var(--black);
     line-height: 1
 }

 .download-specs {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 8px;
     flex: 1;
     width: 100%
 }

 .download-specs li {
     font-size: 13.5px;
     color: var(--gray-700);
     padding-left: 20px;
     position: relative;
     line-height: 1.5;
     text-align: left
 }

 .download-specs li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--orange);
     font-weight: 700
 }

 /* ═══════════════════════════════════════
       PROMISE
    ═══════════════════════════════════════ */
 .promise {
     background: var(--orange);
     padding: 88px 0
 }

 .promise-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center
 }

 @media(max-width:768px) {
     .promise-inner {
         grid-template-columns: 1fr;
         gap: 40px
     }
 }

 .quote-mark {
     font-family: var(--font-display);
     font-size: 140px;
     line-height: .7;
     color: rgba(255, 255, 255, .15);
     display: block;
     margin-bottom: -40px
 }

 blockquote {
     font-family: var(--font-display);
     font-size: clamp(20px, 3vw, 28px);
     font-weight: 700;
     color: var(--white);
     line-height: 1.35
 }

 .promise-text h3 {
     font-family: var(--font-display);
     font-size: 22px;
     font-weight: 700;
     color: var(--white);
     margin-bottom: 20px
 }

 .philosophy-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 10px;
     margin-bottom: 20px
 }

 .philosophy-list li {
     font-size: 15px;
     color: rgba(255, 255, 255, .88);
     padding-left: 20px;
     position: relative
 }

 .philosophy-list li::before {
     content: '—';
     position: absolute;
     left: 0;
     opacity: .5
 }

 .philosophy-close {
     font-size: 14px;
     color: rgba(255, 255, 255, .7);
     font-style: italic
 }

 /* ═══════════════════════════════════════
       FOOTER
    ═══════════════════════════════════════ */
 .footer {
     background: var(--black);
     padding-top: 72px;
     padding-bottom: 0
 }

 .footer-inner {
     display: grid;
     grid-template-columns: 1.6fr 1fr;
     gap: 60px;
     padding-bottom: 60px;
     border-bottom: 1px solid rgba(255, 255, 255, .08)
 }

 @media(max-width:680px) {
     .footer-inner {
         grid-template-columns: 1fr;
         gap: 40px
     }
 }

 .footer .logo-text {
     color: var(--white)
 }

 .footer-tagline {
     font-family: var(--font-display);
     font-size: 16px;
     font-style: italic;
     color: #9ca3af;
     margin-top: 10px;
     margin-bottom: 14px
 }

 .footer-flagodna {
     font-size: 13px;
     color: #6b7280;
     line-height: 1.65;
     max-width: 380px
 }

 .footer-flagodna a {
     color: var(--orange);
     text-decoration: underline;
     text-underline-offset: 3px
 }

 .footer-links {
     display: flex;
     gap: 40px
 }

 .footer-col {
     display: flex;
     flex-direction: column;
     gap: 10px
 }

 .footer-col h5 {
     font-size: 12px;
     font-weight: 700;
     letter-spacing: 1px;
     text-transform: uppercase;
     color: #6b7280;
     margin-bottom: 4px
 }

 .footer-col a {
     font-size: 14px;
     color: #9ca3af;
     transition: color .2s
 }

 .footer-col a:hover {
     color: var(--orange)
 }

 .footer-bottom {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 20px 24px;
     font-size: 12.5px;
     color: #4b5563;
     flex-wrap: wrap;
     gap: 8px
 }

 /* ═══════════════════════════════════════
       ANIMATIONS
    ═══════════════════════════════════════ */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(20px)
     }

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

 .hero-badge {
     animation: fadeUp .5s ease .1s both
 }

 .hero-title {
     animation: fadeUp .5s ease .2s both
 }

 .hero-tagline {
     animation: fadeUp .5s ease .3s both
 }

 .hero-sub {
     animation: fadeUp .5s ease .4s both
 }

 .hero-actions {
     animation: fadeUp .5s ease .5s both
 }

 .hero-note {
     animation: fadeUp .5s ease .6s both
 }

 @media(max-width:600px) {
     .hero-content {
         padding-top: 40px;
         padding-bottom: 60px
     }

     .section {
         padding: 64px 0
     }

     .hero-title {
         font-size: 38px
     }

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

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