/* Tailwind CSS (minified extracted from build) */
*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}

/* Global Styles */
:root {
    --color-teal-50: #f0fdfa;
    --color-teal-100: #ccfbf1;
    --color-teal-200: #99f6e4;
    --color-teal-300: #5eead4;
    --color-teal-400: #2dd4bf;
    --color-teal-500: #14b8a6;
    --color-teal-600: #0d9488;
    --color-purple-50: #faf5ff;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
    --color-purple-900: #581c87;
    --color-indigo-50: #eef2ff;
    --color-indigo-800: #3730a3;
    --color-indigo-900: #312e81;
    --color-green-50: #f0fdf4;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-orange-50: #fff7ed;
    --color-orange-100: #ffedd5;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    --color-cyan-50: #ecfeff;
    --color-cyan-400: #22d3ee;
    --color-cyan-500: #06b6d4;
    --color-cyan-600: #0891b2;
    --color-yellow-200: #fef08a;
    --color-yellow-300: #fde047;
    --color-yellow-400: #facc15;
    --color-slate-50: #f8fafc;
    --color-slate-200: #e2e8f0;
    --color-slate-300: #cbd5e1;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-600: #475569;
    --color-slate-700: #334155;
    --color-slate-800: #1e293b;
    --color-white: #ffffff;
}

body {
    background-color: var(--color-slate-50);
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    color: var(--color-slate-700);
}

.container {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    background: linear-gradient(to bottom right, var(--color-indigo-900), var(--color-indigo-800), var(--color-indigo-900));
    color: var(--color-white);
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    background-image: url('https://mydatemy.info/malay-woman-hero-banner.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

.glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(64px);
}

.glow-teal {
    top: 5rem;
    left: 2.5rem;
    width: 18rem;
    height: 18rem;
    background-color: var(--color-teal-400);
}

.glow-purple {
    bottom: 5rem;
    right: 2.5rem;
    width: 24rem;
    height: 24rem;
    background-color: var(--color-purple-500);
}

.hero-container {
    position: relative;
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 640px) {
    .hero-container {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgba(20, 184, 166, 0.2);
    border: 1px solid rgba(45, 212, 191, 0.3);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

.badge.badge-dark {
    background-color: rgba(253, 224, 71, 0.2);
    border-color: rgba(253, 224, 71, 0.3);
}

.badge-icon {
    width: 1rem;
    height: 1rem;
    color: var(--color-yellow-300);
}

.hero-title {
    font-size: 2.25rem;
    line-height: 2.5rem;
    font-weight: 700;
    line-height: 1.25;
}

@media (min-width: 640px) {
    .hero-title {
        font-size: 3rem;
        line-height: 1;
    }
}

@media (min-width: 768px) {
    .hero-title {
        font-size: 3.75rem;
        line-height: 1;
    }
}

.gradient-text {
    background: linear-gradient(to right, var(--color-teal-400), var(--color-cyan-400));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: rgba(204, 251, 241, 1);
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}

.hero-earnings {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.earnings-main {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .earnings-main {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

.earnings-highlight {
    color: var(--color-yellow-300);
    font-weight: 700;
}

.earnings-sub {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--color-slate-200);
}

@media (min-width: 640px) {
    .earnings-sub {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
}

.malay-text {
    color: rgba(204, 251, 241, 1);
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    .cta-buttons {
        flex-direction: row;
    }
}

.btn {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--color-white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.btn:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.btn-primary {
    background: linear-gradient(to right, var(--color-teal-500), var(--color-teal-600));
}

.btn-primary:hover {
    background: linear-gradient(to right, var(--color-teal-600), var(--color-teal-700));
}

.btn-success {
    background: linear-gradient(to right, var(--color-green-500), var(--color-green-600));
}

.btn-success:hover {
    background: linear-gradient(to right, var(--color-green-600), var(--color-green-700));
}

.btn-footer {
    background-color: var(--color-teal-600);
    padding: 0.75rem 2rem;
    font-size: 1rem;
    gap: 0;
}

.btn-footer:hover {
    background-color: var(--color-teal-700);
}

.btn-large {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 1.25rem;
}

.btn-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.arrow {
    font-size: 1.5rem;
}

.hero-highlight {
    background-color: rgba(249, 115, 22, 0.2);
    border: 1px solid rgba(251, 146, 60, 0.4);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.highlight-title {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--color-yellow-300);
    margin-bottom: 0.5rem;
}

.highlight-amount {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
}

.highlight-bold {
    color: var(--color-yellow-300);
    font-weight: 700;
}

.highlight-sub {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: rgba(204, 251, 241, 1);
    margin-top: 0.75rem;
}

.highlight-malay {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-slate-300);
    margin-top: 0.25rem;
}

/* Brands Section */
.brands-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-slate-200);
}

@media (min-width: 640px) {
    .brands-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-header h2 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    color: var(--color-slate-800);
    margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
    .section-header h2 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

@media (min-width: 768px) {
    .section-header h2 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

.section-header p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--color-slate-600);
}

.marquee {
    position: relative;
    overflow: hidden;
}

.marquee-content {
    display: flex;
    gap: 1rem;
    animation: marquee 30s linear infinite;
    width: max-content;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--color-slate-50);
    border-radius: 0.75rem;
    min-width: 200px;
}

.brand-item img {
    max-height: 3rem;
    width: auto;
    object-fit: contain;
}

/* How It Works Section */
.how-works-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--color-white);
}

@media (min-width: 640px) {
    .how-works-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .steps-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.step-card {
    background: linear-gradient(to bottom right, var(--color-teal-50), var(--color-cyan-50));
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--color-teal-200);
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.step-card:nth-child(2) {
    background: linear-gradient(to bottom right, var(--color-purple-50), var(--color-indigo-50));
    border-color: var(--color-purple-200);
}

.step-card:nth-child(3) {
    background: linear-gradient(to bottom right, var(--color-orange-50), var(--color-yellow-200));
    border-color: var(--color-orange-200);
}

.step-card:nth-child(4) {
    background: linear-gradient(to bottom right, var(--color-green-50), rgba(236, 253, 245, 1));
    border-color: var(--color-green-50);
}

.step-number {
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--color-teal-500);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.step-card:nth-child(2) .step-number {
    background-color: var(--color-purple-500);
}

.step-card:nth-child(3) .step-number {
    background-color: var(--color-orange-500);
}

.step-card:nth-child(4) .step-number {
    background-color: var(--color-green-500);
}

.step-card h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--color-slate-800);
    margin-bottom: 0.5rem;
}

.step-card p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-slate-600);
    margin-bottom: 0.5rem;
}

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

.cta-sub {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-slate-500);
    margin-top: 0.75rem;
    font-style: italic;
}

/* Why Brands Pay Section */
.why-pay-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--color-slate-50);
}

@media (min-width: 640px) {
    .why-pay-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .benefits-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.benefit-card {
    background-color: var(--color-white);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-slate-100);
    transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.benefit-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.benefit-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.benefit-icon.trending {
    background-color: rgba(204, 251, 241, 1);
    color: var(--color-teal-600);
}

.benefit-icon.users {
    background-color: rgba(243, 232, 255, 1);
    color: var(--color-purple-600);
}

.benefit-icon.dollar {
    background-color: rgba(255, 237, 213, 1);
    color: var(--color-orange-600);
}

.benefit-card h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    color: var(--color-slate-800);
    margin-bottom: 0.75rem;
}

.benefit-card p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-slate-600);
    margin-bottom: 0.5rem;
}

/* Testimonials Section */
.testimonials-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--color-white);
}

@media (min-width: 640px) {
    .testimonials-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .testimonials-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.testimonial-card {
    background: linear-gradient(to bottom right, rgba(240, 253, 250, 1), rgba(236, 254, 255, 1));
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--color-teal-200);
}

.testimonial-card:nth-child(2) {
    background: linear-gradient(to bottom right, var(--color-purple-50), var(--color-indigo-50));
    border-color: var(--color-purple-200);
}

.testimonial-card:nth-child(3) {
    background: linear-gradient(to bottom right, var(--color-orange-50), var(--color-yellow-200));
    border-color: var(--color-orange-200);
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.testimonial-header img {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    object-fit: cover;
    border: 2px solid var(--color-teal-300);
}

.testimonial-card:nth-child(2) .testimonial-header img {
    border-color: var(--color-purple-300);
}

.testimonial-card:nth-child(3) .testimonial-header img {
    border-color: var(--color-orange-300);
}

.stars {
    color: var(--color-yellow-400);
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: 0.25rem;
}

.testimonial-text {
    color: var(--color-slate-700);
    margin-bottom: 1rem;
    font-style: italic;
}

.testimonial-author {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    color: var(--color-slate-800);
}

/* Special Offer Section */
.special-offer-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background: linear-gradient(to bottom right, var(--color-indigo-900), var(--color-purple-900), var(--color-indigo-900));
    color: var(--color-white);
}

@media (min-width: 640px) {
    .special-offer-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.special-offer-container {
    text-align: center;
}

.special-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

@media (min-width: 640px) {
    .special-title {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
}

.special-subtitle {
    font-size: 1.25rem;
    line-height: 1.75rem;
    color: rgba(204, 251, 241, 1);
    margin-bottom: 2rem;
}

.special-box {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.special-highlight {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--color-yellow-300);
    margin-bottom: 1.5rem;
}

.special-malay {
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: var(--color-slate-200);
    margin-bottom: 2rem;
    font-style: italic;
}

.offer-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.offer-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.check-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-green-400);
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.offer-title {
    font-weight: 600;
    margin-bottom: 0;
}

.offer-malay {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-slate-300);
    margin-bottom: 0;
    font-style: italic;
}

.special-cta-sub {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-slate-300);
    margin-top: 1rem;
    font-style: italic;
}

/* Trust Section */
.trust-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
    background-color: var(--color-slate-50);
}

@media (min-width: 640px) {
    .trust-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    text-align: center;
}

@media (min-width: 768px) {
    .trust-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.trust-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.trust-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
    font-size: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    margin-right: auto;
}

.trust-icon.clock {
    color: var(--color-teal-600);
}

.trust-icon.dollar {
    color: var(--color-green-600);
}

.trust-icon.users {
    color: var(--color-purple-600);
}

.trust-icon.shield {
    color: var(--color-blue-600);
}

.trust-value {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--color-slate-800);
    margin-bottom: 0;
}

.trust-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--color-slate-600);
    margin-bottom: 0;
}

/* Footer */
.footer {
    background-color: var(--color-slate-800);
    color: var(--color-slate-300);
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.footer .container {
    text-align: center;
}

.footer h3 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: 1rem;
}

.footer p {
    color: var(--color-slate-400);
    margin-bottom: 1.5rem;
}

.copyright {
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--color-slate-500);
    margin-top: 2rem;
}

/* Floating CTA Button */
.floating-cta {
    position: fixed;
    bottom: 1.5rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    padding: 1rem 1.5rem;
    background: linear-gradient(to right, var(--color-green-500), var(--color-green-600));
    color: var(--color-white);
    font-weight: 700;
    border: none;
    border-radius: 9999px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    font-size: 1rem;
    line-height: 1.5rem;
}

.floating-cta:hover {
    animation: none;
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.floating-cta:hover {
    background: linear-gradient(to right, var(--color-green-600), var(--color-green-700));
}

@media (min-width: 640px) {
    .floating-cta {
        left: auto;
        right: auto;
        bottom: 1.5rem;
        left: 50%;
        width: auto;
        transform: translateX(-50%);
    }

    .floating-cta:hover {
        transform: translateX(-50%) scale(1.05);
    }
}

.whatsapp-icon {
    width: 2rem;
    height: 2rem;
}

@media (min-width: 640px) {
    .whatsapp-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

@keyframes pulse {
    50% {
        opacity: 0.5;
    }
}

/* Button icons */
.btn-icon {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
}

@media (min-width: 640px) {
    .btn-icon {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Responsive utilities */
@media (max-width: 639px) {
    .floating-cta span {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}