:root {
    --primary: #0d9488;
    --primary-hover: #0f766e;
    --secondary: #0f172a;
}

*, *::before, *::after { box-sizing: border-box; border-width: 0; border-style: solid; }
body { margin: 0; line-height: 1.5; font-family: Inter, Tajawal, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
summary::-webkit-details-marker { display: none; }

.absolute { position: absolute; }
.fixed { position: fixed; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.top-auto { top: auto; }
.bottom-0 { bottom: 0; }
.left-1\/2 { left: 50%; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

.block { display: block; }
.hidden { display: none; }
.inline-block { display: inline-block; }
.inline-flex { display: inline-flex; }
.flex { display: flex; }
.grid { display: grid; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gap-1\.5 { gap: .375rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.space-x-8 { gap: 2rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }

.w-11 { width: 2.75rem; }
.w-12 { width: 3rem; }
.w-full { width: 100%; }
[class~="w-[42px]"] { width: 42px; }
.h-11 { height: 2.75rem; }
.h-12 { height: 3rem; }
.h-20 { height: 5rem; }
.h-32 { height: 8rem; }
.h-auto { height: auto; }
[class~="h-[38px]"] { height: 38px; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

.m-0 { margin: 0; }
.mx-auto { margin-inline: auto; }
.my-6 { margin-block: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }
.ml-2 { margin-left: .5rem; }
.mr-2 { margin-right: .5rem; }

.p-2 { padding: .5rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.px-2 { padding-inline: .5rem; }
.px-3 { padding-inline: .75rem; }
.px-4 { padding-inline: 1rem; }
.px-7 { padding-inline: 1.75rem; }
.px-8 { padding-inline: 2rem; }
.py-1 { padding-block: .25rem; }
.py-1\.5 { padding-block: .375rem; }
.py-2 { padding-block: .5rem; }
.py-3 { padding-block: .75rem; }
.py-3\.5 { padding-block: .875rem; }
.py-4 { padding-block: 1rem; }
.py-6 { padding-block: 1.5rem; }
.py-20 { padding-block: 5rem; }
.pt-8 { padding-top: 2rem; }
.pt-16 { padding-top: 4rem; }
.pt-32 { padding-top: 8rem; }
.pb-8 { padding-bottom: 2rem; }
.pb-20 { padding-bottom: 5rem; }

.overflow-hidden { overflow: hidden; }
.whitespace-nowrap { white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.list-none { list-style: none; }

.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-t-2xl { border-radius: 1rem 1rem 0 0; }
.rounded-t-3xl { border-radius: 1.5rem 1.5rem 0 0; }
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-y { border-block-width: 1px; }
.border-transparent { border-color: transparent; }
.border-slate-100 { border-color: #f1f5f9; }
.border-slate-200 { border-color: #e2e8f0; }
.border-slate-300 { border-color: #cbd5e1; }
.border-slate-800 { border-color: #1e293b; }
.border-teal-200 { border-color: #99f6e4; }
.border-white\/10 { border-color: rgba(255,255,255,.1); }

.bg-white { background-color: #fff; }
.bg-white\/90 { background-color: rgba(255,255,255,.9); }
.bg-white\/5 { background-color: rgba(255,255,255,.05); }
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-50\/50 { background-color: rgba(248,250,252,.5); }
.bg-slate-900 { background-color: #0f172a; }
.bg-teal-50 { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-400 { background-color: #2dd4bf; }
.bg-teal-950 { background-color: #042f2e; }
.bg-blue-100 { background-color: #dbeafe; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-rose-100 { background-color: #ffe4e6; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
[class~="bg-[#129d89]"] { background-color: #129d89; }

.bg-gradient-to-r { background-image: linear-gradient(to right, var(--gradient-from), var(--gradient-to)); }
.bg-gradient-to-l { background-image: linear-gradient(to left, var(--gradient-from), var(--gradient-to)); }
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--gradient-from), var(--gradient-to)); }
.from-primary { --gradient-from: var(--primary); }
.from-teal-600 { --gradient-from: #0d9488; }
.from-slate-50 { --gradient-from: #f8fafc; }
.to-blue-500 { --gradient-to: #3b82f6; }
.to-teal-500 { --gradient-to: #14b8a6; }
.to-transparent { --gradient-to: transparent; }

.text-center { text-align: center; }
.font-sans { font-family: Inter, Tajawal, ui-sans-serif, system-ui, sans-serif; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.text-xs { font-size: .75rem; }
.text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
[class~="text-[26px]"] { font-size: 26px; }
.text-white { color: #fff; }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-slate-700 { color: #334155; }
.text-slate-800 { color: #1e293b; }
.text-teal-50 { color: #f0fdfa; }
.text-teal-100 { color: #ccfbf1; }
.text-teal-300 { color: #5eead4; }
.text-teal-600 { color: #0d9488; }
.text-teal-700 { color: #0f766e; }
.text-teal-800 { color: #115e59; }
.text-teal-950 { color: #042f2e; }
.text-blue-600 { color: #2563eb; }
.text-purple-600 { color: #9333ea; }
.text-amber-600 { color: #d97706; }
.text-rose-600 { color: #e11d48; }
.text-emerald-600 { color: #059669; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.tracking-tight { letter-spacing: -.025em; }
.tracking-wide { letter-spacing: .025em; }
.tracking-wider { letter-spacing: .05em; }
.tracking-widest { letter-spacing: .1em; }
.uppercase { text-transform: uppercase; }

.shadow-sm { box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.shadow-md { box-shadow: 0 4px 10px rgba(15,23,42,.10); }
.shadow-lg { box-shadow: 0 10px 18px rgba(15,23,42,.12); }
.shadow-xl { box-shadow: 0 20px 28px rgba(15,23,42,.14); }
.shadow-2xl { box-shadow: 0 25px 50px rgba(15,23,42,.22); }
.shadow-primary\/20 { box-shadow: 0 12px 24px rgba(13,148,136,.20); }
.shadow-primary\/30 { box-shadow: 0 12px 26px rgba(13,148,136,.30); }
.shadow-teal-600\/20 { box-shadow: 0 20px 32px rgba(13,148,136,.20); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.transition { transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.transform { transform: translate(var(--translate-x,0), var(--translate-y,0)); }
.-translate-x-1\/2 { --translate-x: -50%; }
.-translate-y-1\/2 { --translate-y: -50%; }

.hover\:text-primary:hover { color: var(--primary); }
.hover\:text-white:hover { color: #fff; }
.hover\:bg-primaryHover:hover { background-color: var(--primary-hover); }
.hover\:bg-slate-50:hover { background-color: #f8fafc; }
.hover\:bg-teal-50:hover { background-color: #f0fdfa; }
.hover\:bg-teal-100:hover { background-color: #ccfbf1; }
.hover\:border-slate-300:hover { border-color: #cbd5e1; }
.group[open] .group-open\:rotate-45 { transform: rotate(45deg); }

.fa-solid { display: inline-grid; place-items: center; font-style: normal; line-height: 1; }
.fa-solid::before {
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.fa-globe { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17M12 3c2.3 2.5 3.5 5.5 3.5 9S14.3 18.5 12 21c-2.3-2.5-3.5-5.5-3.5-9S9.7 5.5 12 3Z'/%3E%3C/g%3E%3C/svg%3E"); }
.fa-arrow-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-arrow-left { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-qrcode { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h7v7H3V3Zm11 0h7v7h-7V3ZM3 14h7v7H3v-7Zm12 0h2v2h-2v-2Zm4 0h2v4h-2v-4Zm-4 4h4v3h-4v-3Z' fill='black'/%3E%3C/svg%3E"); }
.fa-language { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h10M9 3v2m-3 4c1.4 2.8 3.7 5.1 6.5 6.5M12 9c-1.3 3-3.7 5.6-7 7m9 4 3.5-9L21 20m-5.6-4h4.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-calculator { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='2.5' width='16' height='19' rx='2.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7.5 6h9v3h-9V6Zm0 7h2v2h-2v-2Zm3.5 0h2v2h-2v-2Zm3.5 0h2v2h-2v-2Zm-7 4h2v2h-2v-2Zm3.5 0h2v2h-2v-2Zm3.5 0h2v2h-2v-2Z' fill='black'/%3E%3C/svg%3E"); }
.fa-cloud-arrow-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18H6a4 4 0 0 1-.5-8A6.5 6.5 0 0 1 18 8.5a4.7 4.7 0 0 1 0 9.5h-1M12 20V11m0 0-3 3m3-3 3 3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-print { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 8V3h10v5M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M7 14h10v7H7v-7Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-file-pdf { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2.5h8l4 4V21H6V2.5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 2.5v5h4M8.5 16.5h7M8.5 12.5h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fa-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 20v-1.5a4.5 4.5 0 0 0-4.5-4.5h-4A4.5 4.5 0 0 0 3 18.5V20m6.5-10a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm7.5 3a3.8 3.8 0 0 1 4 3.8V20m-4-17a3.5 3.5 0 0 1 0 6.8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fa-file-excel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2.5h10v19H7zM4 6h9v12H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m7 10 3 4m0-4-3 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fa-shield-halved, .fa-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 20 6v5.5c0 5-3.4 8.6-8 10-4.6-1.4-8-5-8-10V6l8-3.5Z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='m8 12 2.5 2.5L16 9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-plus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fa-envelope { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m4 7 8 6 8-6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fa-headset { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2M7 19H6a2 2 0 0 1-2-2v-3h3v5Zm10 0h1a2 2 0 0 0 2-2v-3h-3v5Zm0 0c0 1.5-1 2.5-3 2.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.site-logo {
    display: block;
    width: auto;
    max-width: none;
    object-fit: contain;
}
.site-logo--nav { width: 174px; height: 55px; }
.site-logo--footer {
    width: 210px;
    height: 67px;
    filter: brightness(0) invert(1);
}
.hero-title { text-wrap: balance; }
html[dir="rtl"] body {
    font-family: Tajawal, "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
}
html[dir="rtl"] .hero-title {
    max-width: 880px;
    margin-inline: auto;
    font-size: clamp(2.25rem, 5vw, 4.35rem);
    line-height: 1.23;
    letter-spacing: 0;
    text-wrap: balance;
}
html[dir="rtl"] .hero-copy {
    max-width: 760px;
    line-height: 2;
    letter-spacing: 0;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] p {
    letter-spacing: 0;
}

.dashboard-frame {
    padding: .55rem;
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,253,250,.9));
    box-shadow: 0 30px 80px rgba(15, 118, 110, .17), 0 12px 32px rgba(15, 23, 42, .10);
}
.dashboard-image {
    display: block;
    aspect-ratio: 67 / 36;
    object-fit: cover;
    object-position: top center;
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 1.1rem;
    background: #edf7f5;
}

.steps-section {
    position: relative;
    padding-block: 4.5rem;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 5%, rgba(45, 212, 191, .18), transparent 32%),
        radial-gradient(circle at 90% 85%, rgba(20, 184, 166, .14), transparent 31%),
        linear-gradient(145deg, #032f2b 0%, #064e47 52%, #043b37 100%);
}
.steps-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .34;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
}
.steps-kicker {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .85rem;
    border: 1px solid rgba(153, 246, 228, .2);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: #99f6e4;
    letter-spacing: .08em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.steps-grid {
    position: relative;
    align-items: stretch;
}
.step-card {
    position: relative;
    min-height: 232px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(204, 251, 241, .16);
    border-radius: 1.45rem;
    background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
    box-shadow: 0 18px 44px rgba(1, 25, 23, .22), inset 0 1px 0 rgba(255,255,255,.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.step-card:hover {
    transform: translateY(-6px);
    border-color: rgba(94, 234, 212, .38);
    background: linear-gradient(145deg, rgba(255,255,255,.135), rgba(255,255,255,.06));
}
.step-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}
.step-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(153, 246, 228, .28);
    border-radius: 16px;
    color: #99f6e4;
    background: linear-gradient(145deg, rgba(45, 212, 191, .2), rgba(13, 148, 136, .09));
    box-shadow: 0 12px 24px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.12);
}
.step-icon svg { width: 25px; height: 25px; }
.step-number {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #042f2e;
    background: linear-gradient(135deg, #99f6e4, #2dd4bf);
    font-weight: 900;
    box-shadow: 0 9px 20px rgba(45, 212, 191, .2);
}
.step-card h3 {
    color: #f8fafc;
    line-height: 1.3;
}
.step-card p {
    max-width: 35ch;
    color: #ccfbf1;
    line-height: 1.7;
}

@media (min-width: 768px) {
    .steps-grid::before {
        content: "";
        position: absolute;
        top: 49px;
        left: 16.5%;
        right: 16.5%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(94,234,212,.5) 20%, rgba(94,234,212,.5) 80%, transparent);
        z-index: -1;
    }
}

@media (min-width: 640px) {
    .sm\:hidden { display: none; }
    .sm\:inline { display: inline; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:gap-4 { gap: 1rem; }
    .sm\:px-5 { padding-inline: 1.25rem; }
    .sm\:px-6 { padding-inline: 1.5rem; }
}

@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:inline-flex { display: inline-flex; }
    .md\:flex-row { flex-direction: row; }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:-translate-y-4 { transform: translateY(-1rem); }
    .md\:mt-0 { margin-top: 0; }
    .md\:p-10 { padding: 2.5rem; }
    .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:px-8 { padding-inline: 2rem; }
    .lg\:pt-40 { padding-top: 10rem; }
    .lg\:pb-28 { padding-bottom: 7rem; }
}

@media (max-width: 639px) {
    .float-wa { width: 52px; height: 52px; right: 18px; bottom: 18px; }
    .site-logo--nav { width: 142px; height: 47px; }
    .site-logo--footer { width: 188px; height: 60px; }
    html[dir="rtl"] .hero-title {
        font-size: clamp(2.1rem, 10.5vw, 3rem);
        line-height: 1.3;
    }
    .dashboard-frame { padding: .35rem; border-radius: 1.05rem; }
    .dashboard-image { border-radius: .8rem; }
    .steps-section { padding-block: 3.75rem; }
    .step-card { min-height: 0; padding: 1.3rem; }
}