/* ============================================================ Amatis — landing stylesheet (vandar.io-inspired design) Theme: light + dark via [data-theme] on Palette: teal (#00796b family) + dark slate (#1e1f28 family) ============================================================ */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: "Inter", "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text); background-color: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [dir="rtl"] body, [dir="rtl"] body input, [dir="rtl"] body textarea, [dir="rtl"] body button { font-family: "Vazirmatn", "Inter", system-ui, sans-serif; } img { max-width: 100%; display: block; } a { color: var(--primary); text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; } p { margin: 0; } input, textarea, select { font-family: inherit; } ::selection { background: rgba(var(--primary-rgb), 0.22); } /* ---------- Theme tokens ---------- */ :root { color-scheme: light; --bg: #ffffff; --bg-tint: #f7faf9; --bg-grad: #f0f6f5; --bg-grad-2: #f7faf9; --surface: #ffffff; --surface-2: #f6f9f8; --surface-3: #eaf2f1; --soft: #e0f2f1; --soft-2: #e6f4f2; --soft-line: #cfebe7; --neutral-soft: #f2f5f5; --neutral-line: #e4e9e8; --text: #1e1f28; --text-2: #555770; --text-3: #3a3c4c; --text-4: #3a3c4c; --text-5: #555770; --text-6: #3a3c4c; --text-7: #555770; --text-8: #3a3c4c; --text-9: #1e1f28; --muted: #7a7e99; --muted-2: #7a7e99; --muted-3: #7a7e99; --muted-4: #b8b9c9; --muted-5: #555770; --muted-6: #7a7e99; --line: #e8ebea; --line-2: #e3e6e5; --line-3: #e3e6e5; --line-4: #d6dbda; --line-5: #e3e6e5; --line-6: #d6dbda; --line-7: #e3e6e5; --line-8: #d6dbda; --line-9: #ccd2d1; --line-10: #d6dbda; --line-11: #ccd2d1; --line-strong: #00796b; --line-stronger: #00897b; --primary: #00796b; --primary-2: #00897b; --sky: #009688; --teal: #14b8a8; --teal-2: #0d9488; --navy: #1e1f28; --primary-rgb: 0, 121, 107; --sky-rgb: 0, 150, 136; --teal-rgb: 20, 184, 168; --danger: #e04f4f; --success: #008a7d; --success-2: #00796b; --success-3: #00695f; --success-soft: #e0f2f1; --success-soft-2: #e6f4f2; --success-soft-3: #bfe6e0; --success-soft-4: #d6f0ec; --white: #ffffff; --black: #000000; --header-bg: #00796b; --header-bg-2: #00897b; --header-text: #ffffff; --hero-bg: linear-gradient(180deg, #0b8a7b 0%, #00796b 100%); --hero-bg-dark: linear-gradient(180deg, #0e6b60 0%, #0a574f 100%); --glass-90: rgba(255, 255, 255, 0.9); --glass-92: rgba(255, 255, 255, 0.92); --glass-94: rgba(255, 255, 255, 0.94); --glass-98: rgba(255, 255, 255, 0.98); --line-glass: rgba(227, 230, 229, 0.9); --glass-tint: rgba(224, 242, 241, 0.78); --inverse: #1e1f28; } [data-theme="dark"] { color-scheme: dark; --bg: #1e1f28; --bg-tint: #232530; --bg-grad: #262833; --bg-grad-2: #1e1f28; --surface: #262833; --surface-2: #2d2f3a; --surface-3: #333541; --soft: #243b38; --soft-2: #223430; --soft-line: #31524d; --neutral-soft: #2d2f3a; --neutral-line: #3a3d49; --text: #f2f3f7; --text-2: #b8bac7; --text-3: #a4a7b5; --text-4: #b8bac7; --text-5: #a4a7b5; --text-6: #c3c5d1; --text-7: #9a9dad; --text-8: #b8bac7; --text-9: #e8e9f0; --muted: #8b8ea0; --muted-2: #8b8ea0; --muted-3: #7f8295; --muted-4: #6f7285; --muted-5: #9a9dad; --muted-6: #8b8ea0; --line: #333541; --line-2: #333541; --line-3: #3a3d49; --line-4: #3a3d49; --line-5: #333541; --line-6: #3a3d49; --line-7: #333541; --line-8: #3a3d49; --line-9: #454855; --line-10: #3a3d49; --line-11: #454855; --line-strong: #2aa79b; --line-stronger: #35b3a6; --primary: #2aa79b; --primary-2: #35b3a6; --sky: #14b8a8; --teal: #3fc7ba; --teal-2: #2aa79b; --navy: #1e1f28; --primary-rgb: 42, 167, 155; --sky-rgb: 20, 184, 168; --teal-rgb: 63, 199, 186; --danger: #f06b6b; --success: #14b8a8; --success-2: #3fc7ba; --success-3: #14b8a8; --success-soft: #16312f; --success-soft-2: #16312f; --success-soft-3: #1d403c; --success-soft-4: #1a3835; --white: #ffffff; --black: #000000; --header-bg: #0f6b61; --header-bg-2: #0c7a6e; --header-text: #ffffff; --hero-bg: linear-gradient(180deg, #0e6b60 0%, #0a574f 100%); --hero-bg-dark: linear-gradient(180deg, #0e6b60 0%, #0a574f 100%); --glass-90: rgba(30, 31, 40, 0.9); --glass-92: rgba(30, 31, 40, 0.92); --glass-94: rgba(35, 37, 48, 0.94); --glass-98: rgba(38, 40, 51, 0.98); --line-glass: rgba(51, 53, 65, 0.9); --glass-tint: rgba(36, 59, 56, 0.82); --inverse: #e8e9f0; } /* ---------- Scrollbar ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-grad-2); } ::-webkit-scrollbar-thumb { background: var(--line-11); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--line-strong); } /* ---------- Keyframes ---------- */ @keyframes fadeUp { 0% { opacity: 0; transform: translateY(22px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes floatIn { 0% { opacity: 0; transform: translateY(30px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes popSoft { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes revealUp { 0% { opacity: 0; transform: translateY(26px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), 0.35); } 70% { box-shadow: 0 0 0 9px rgba(var(--teal-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--teal-rgb), 0); } } @keyframes visualFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marqueeScrollRtl { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ---------- Animation helpers ---------- */ .anim-fade-up { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .anim-float-in { animation: floatIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .anim-pop-soft { animation: popSoft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .anim-pulse-dot { animation: pulse-dot 1.7s infinite; } .anim-visual-float { animation: visualFloat 7s ease-in-out 1.2s infinite; } .reveal { opacity: 0; } .reveal.is-visible { animation: revealUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } /* ---------- Layout ---------- */ .container-page { width: min(1188px, calc(100% - 40px)); margin-inline: auto; } section { position: relative; } .py-section { padding-block: 78px; } @media (max-width: 640px) { .py-section { padding-block: 56px; } } /* ---------- Buttons ---------- */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; font-weight: 800; white-space: nowrap; transition: all 0.3s ease; border: none; } .btn-primary { color: #fff; background-color: var(--primary); box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.28); } .btn-primary:hover { background-color: var(--primary-2); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--primary-rgb), 0.36); color: #fff; } .btn-secondary { background: var(--surface); color: var(--text-3); border: 1px solid var(--line-3); } .btn-secondary:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(30, 31, 40, 0.08); } .btn-primary.sm, .btn-secondary.sm { padding: 10px 16px; font-size: 13px; } .btn-primary.md, .btn-secondary.md { padding: 13px 22px; font-size: 15px; } .btn-primary.lg, .btn-secondary.lg { padding: 15px 26px; font-size: 16px; } /* ---------- Kicker pill ---------- */ .kicker-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--soft); color: var(--primary); border: 1px solid var(--soft-line); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 800; } .kicker-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); animation: pulse-dot 1.7s infinite; } /* ---------- Cards ---------- */ .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(30, 31, 40, 0.1); border-color: rgba(var(--primary-rgb), 0.4); } /* ---------- Header ---------- */ .site-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; height: 76px; display: flex; align-items: center; background: var(--header-bg); border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background 0.3s ease, box-shadow 0.25s ease, border-color 0.3s ease, height 0.25s ease; } .site-header.scrolled { background: var(--glass-92); border-bottom-color: var(--line-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 34px rgba(20, 24, 30, 0.09); } @media (max-width: 640px) { .site-header { height: 68px; } } .header-inner { height: 100%; width: min(1188px, calc(100% - 40px)); margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; } @media (max-width: 1199px) { .header-inner { gap: 8px; } } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand-mark { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--primary); font-weight: 900; font-size: 18px; box-shadow: 0 6px 18px rgba(14, 30, 27, 0.18); transition: transform 0.3s ease; } .brand:hover .brand-mark { transform: scale(1.06); } .brand-word { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: var(--header-text); transition: color 0.3s ease; } .site-header.scrolled .brand-word { color: var(--text); } @media (max-width: 640px) { .brand-word { font-size: 21px; } } /* Desktop nav */ .site-nav { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; } @media (max-width: 1199px) { .site-nav { display: none; } } .nav-pill { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 10px 15px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 800; color: rgba(255, 255, 255, 0.9); transition: all 0.22s ease; border: none; background: transparent; cursor: pointer; } .nav-pill::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 0; height: 2px; border-radius: 2px; background: currentColor; transition: width 0.25s ease, left 0.25s ease; } .nav-pill:hover { color: #fff; background: rgba(255, 255, 255, 0.12); } .nav-pill:hover::after, .nav-pill.active::after, .nav-dropdown:hover > .nav-pill::after, .nav-dropdown:focus-within > .nav-pill::after { width: 100%; left: 0; } .nav-pill.active { color: #fff; } .nav-pill svg { transition: transform 0.3s ease; } .nav-dropdown:hover > .nav-pill svg, .nav-dropdown.open > .nav-pill svg { transform: rotate(180deg); } .site-header.scrolled .nav-pill { color: var(--text-4); } .site-header.scrolled .nav-pill:hover { color: var(--primary); background: var(--soft); } .site-header.scrolled .nav-pill.active { color: var(--primary); } /* Mega menu (vandar-style flip open) */ .nav-dropdown { position: relative; } .nav-dropdown-panel { position: absolute; top: calc(100% + 4px); left: 50%; z-index: 70; width: 900px; max-width: calc(100vw - 32px); padding-top: 14px; opacity: 0; visibility: hidden; transform: translateX(-50%) perspective(800px) rotateX(-16deg); transform-origin: top center; transition: opacity 0.24s ease, transform 0.32s ease, visibility 0.24s; } .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel, .nav-dropdown.open .nav-dropdown-panel { opacity: 1; visibility: visible; transform: translateX(-50%) perspective(800px) rotateX(0deg); } .nav-dropdown-panel-inner { position: relative; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; padding: 20px 22px 16px; box-shadow: 0 8px 34px rgba(30, 31, 40, 0.18); } .nav-dropdown-panel-inner::before { content: ""; position: absolute; top: -7px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: var(--surface); border-inline-start: 1px solid var(--line-2); border-block-start: 1px solid var(--line-2); } .nav-dd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; } .nav-dd-col { min-width: 0; } .nav-dd-title { font-size: 12px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-5); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2); } [dir="rtl"] .nav-dd-title { letter-spacing: 0.02em; } .nav-dd-col a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-weight: 700; font-size: 13.5px; line-height: 1.45; color: var(--text-6); transition: all 0.2s ease; } .nav-dd-col a::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-4); transition: background 0.2s ease, transform 0.2s ease; } .nav-dd-col a + a { margin-top: 1px; } .nav-dd-col a:hover { background: var(--soft); color: var(--primary); } .nav-dd-col a:hover::before { background: var(--primary); transform: scale(1.25); } .nav-dd-more { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding: 12px 2px 0; border-top: 1px solid var(--line-2); } .nav-dd-more-label { font-size: 11.5px; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-5); margin-inline-end: 4px; } [dir="rtl"] .nav-dd-more-label { letter-spacing: 0.02em; } .nav-dd-more a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--text-6); background: var(--surface-2); transition: all 0.2s ease; } .nav-dd-more a::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--primary); } .nav-dd-more a:hover { background: var(--soft); color: var(--primary); } .nav-dd-cta { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--soft); color: var(--primary); font-weight: 800; font-size: 13.5px; border: 1px solid var(--soft-line); transition: all 0.2s ease; } .nav-dd-cta:hover { background: var(--primary); color: #fff; border-color: var(--primary); } @media (max-width: 1100px) { .nav-dropdown-panel { width: 680px; } .nav-dd-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .nav-dropdown-panel { width: calc(100vw - 32px); } .nav-dd-grid { grid-template-columns: 1fr; } } /* Header actions */ .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } @media (max-width: 1199px) { .header-actions { gap: 8px; } } .icon-btn { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.14); color: #fff; transition: all 0.22s ease; } .icon-btn:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); } .site-header.scrolled .icon-btn { border-color: var(--line-3); background: var(--surface); color: var(--text); box-shadow: 0 8px 22px rgba(30, 31, 40, 0.06); } .site-header.scrolled .icon-btn:hover { border-color: var(--line-strong); } @media (max-width: 640px) { .icon-btn { width: 42px; height: 42px; } } /* Language switcher */ .lang-switcher { position: relative; } .lang-trigger { display: flex; align-items: center; gap: 8px; min-height: 46px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.14); border-radius: 12px; padding: 0 12px; color: #fff; transition: all 0.22s ease; } .lang-trigger:hover { background: rgba(255, 255, 255, 0.24); transform: translateY(-1px); } .site-header.scrolled .lang-trigger { border-color: var(--line-3); background: var(--glass-94); color: var(--text-9); box-shadow: 0 8px 22px rgba(30, 31, 40, 0.06); } .site-header.scrolled .lang-trigger:hover { border-color: var(--line-strong); } @media (max-width: 640px) { .lang-trigger { min-height: 42px; } } .lang-globe { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; display: flex; align-items: center; justify-content: center; } .site-header.scrolled .lang-globe { background: linear-gradient(to bottom right, var(--bg-tint), var(--surface)); color: var(--primary); } .lang-trigger .lang-label { font-size: 13.5px; font-weight: 800; min-width: 44px; text-align: start; } .lang-trigger .lang-caret { width: 24px; height: 24px; background: rgba(255, 255, 255, 0.16); color: #fff; border-radius: 50%; padding: 4px; transition: transform 0.3s ease; } .site-header.scrolled .lang-caret { background: var(--bg-tint); color: var(--text); } .lang-switcher.open .lang-caret { transform: rotate(180deg); } .lang-panel { position: absolute; top: calc(100% + 12px); inset-inline-start: 0; min-width: 226px; background: var(--glass-98); border: 1px solid var(--line-2); border-radius: 14px; padding: 10px; box-shadow: 0 18px 54px rgba(30, 31, 40, 0.16); backdrop-filter: blur(16px); z-index: 80; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all 0.2s ease; } .lang-switcher.open .lang-panel { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: none; background: transparent; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--text-6); transition: all 0.2s ease; text-align: start; } .lang-option:hover { background: var(--bg-tint); } .lang-option.active { background: var(--soft-2); color: var(--primary); } .lang-option .lang-meta { display: flex; align-items: center; gap: 8px; } .lang-option .lang-code { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--muted-6); } .lang-option.active .lang-code { color: var(--primary); } .lang-option .lang-active-pill { font-size: 11px; font-weight: 800; color: var(--success-2); background: var(--success-soft-4); border-radius: 999px; padding: 2px 10px; } /* Hamburger */ .hamburger { display: none; width: 45px; height: 45px; border: none; border-radius: 12px; background: rgba(255, 255, 255, 0.14); color: #fff; align-items: center; justify-content: center; } .site-header.scrolled .hamburger { background: var(--soft); color: var(--text); } @media (max-width: 1199px) { .hamburger { display: flex; } } @media (max-width: 640px) { .hamburger { width: 42px; height: 42px; } } /* Mobile nav panel */ .mobile-menu { display: none; position: fixed; top: 76px; inset-inline: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: 0 18px 54px rgba(30, 31, 40, 0.16); max-height: calc(100vh - 100px); overflow-y: auto; z-index: 50; } @media (max-width: 640px) { .mobile-menu { top: 68px; } } .mobile-menu.open { display: block; } .mobile-menu a { display: block; padding: 12px 16px; border-radius: 10px; font-weight: 800; font-size: 15px; color: var(--text-4); transition: all 0.2s ease; } .mobile-menu a:hover, .mobile-menu a.active { background: var(--soft); color: var(--primary); } .mobile-menu .mm-acc { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: none; background: transparent; border-radius: 10px; font-weight: 800; font-size: 15px; color: var(--text-4); } .mobile-menu .mm-acc.open { color: var(--primary); } .mobile-menu .mm-sub { display: none; padding-inline-start: 18px; } .mobile-menu .mm-sub.open { display: block; } .mobile-menu .mm-sub a { padding: 10px 16px; font-size: 14px; color: var(--text-3); } /* ---------- Hero (vandar teal) ---------- */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 64px; min-height: calc(100vh - 76px); margin-top: 76px; display: flex; align-items: center; scroll-margin-top: 76px; color: #fff; background: var(--hero-bg); } [data-theme="dark"] .hero { background: var(--hero-bg-dark); } @media (max-width: 640px) { .hero { padding-block: 44px; margin-top: 68px; } } .hero-grid-pattern { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 70%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.55) 70%, transparent 100%); } .hero-blob { position: absolute; pointer-events: none; width: 570px; height: 570px; left: -150px; bottom: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 62%); animation: visualFloat 8s ease-in-out infinite; } .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr); gap: 42px; align-items: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } .hero-copy { max-width: 620px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.14); color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 13.5px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hero-title { margin-top: 20px; font-size: clamp(38px, 5.6vw, 64px); line-height: 1.18; letter-spacing: -1.4px; font-weight: 900; color: #fff; } @media (max-width: 640px) { .hero-title { font-size: clamp(30px, 10.5vw, 44px); } } .hero-title .grad { background: linear-gradient(135deg, #ffffff, #bdeee8); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-stat { margin-top: 24px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; background: rgba(255, 255, 255, 0.12); box-shadow: 0 14px 38px rgba(10, 50, 44, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero-stat-badge { color: var(--primary); font-weight: 900; font-size: 15px; border-radius: 10px; padding: 8px 12px; white-space: nowrap; background: #fff; box-shadow: 0 8px 20px rgba(10, 50, 44, 0.18); } .hero-stat-text { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.92); line-height: 1.7; } .hero-lead { margin-top: 20px; font-size: 15.5px; line-height: 2.02; color: rgba(255, 255, 255, 0.88); font-weight: 600; } .hero-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .hero-cta .btn-primary { background: #fff; color: var(--primary); box-shadow: 0 12px 30px rgba(8, 40, 35, 0.28); } .hero-cta .btn-primary:hover { background: #eaf7f6; color: var(--primary); } .hero-cta .btn-secondary { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); color: #fff; } .hero-cta .btn-secondary:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff; color: #fff; } .hero-chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; } .hero-chip { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 12.5px; color: rgba(255, 255, 255, 0.92); } .hero-note { margin-top: 20px; color: rgba(255, 255, 255, 0.75); font-weight: 700; font-size: 14px; } .hero-visual { position: relative; display: none; } @media (min-width: 901px) { .hero-visual { display: block; } } .hero-visual-card { position: relative; background: var(--surface); border: 1px solid var(--line-5); border-radius: 20px; padding: 16px; max-width: 520px; margin-inline: auto; box-shadow: 0 24px 64px rgba(8, 40, 35, 0.3); animation: floatIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-visual-header { color: #fff; border-radius: 14px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, var(--primary-2), var(--primary)); } .hero-visual-header h4 { font-weight: 800; font-size: 14.5px; } .hero-visual-header p { color: rgba(255, 255, 255, 0.85); font-weight: 700; font-size: 12px; margin-top: 2px; } .hero-visual-header .emoji-badge { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 19px; } .hero-img { margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-5); box-shadow: 0 12px 34px rgba(30, 31, 40, 0.1); background: linear-gradient(145deg, var(--bg-tint), var(--surface-3)); } .hero-img img { width: 100%; aspect-ratio: 1; object-fit: cover; } .hero-visual-footer { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hero-visual-mini { background: var(--surface); border: 1px solid var(--line-5); border-radius: 14px; padding: 12px; text-align: center; } .hero-visual-mini p { font-size: 10.5px; font-weight: 700; color: var(--muted-5); } .hero-visual-mini b { display: block; font-size: 13px; font-weight: 900; color: var(--text); margin-top: 4px; } /* ---------- Marquee ---------- */ .marquee-section { position: relative; overflow: hidden; padding-block: 64px; background: var(--bg); } .marquee { width: 100%; overflow: hidden; white-space: nowrap; direction: ltr; } .marquee-track { display: inline-flex; align-items: center; direction: ltr; animation: marqueeScroll 26s linear infinite; will-change: transform; } [dir="rtl"] .marquee-track { animation-name: marqueeScrollRtl; } .marquee-track span { display: inline-flex; align-items: center; gap: 30px; padding-inline-end: 30px; } .marquee-item { font-size: clamp(34px, 6vw, 76px); font-weight: 900; letter-spacing: -0.02em; color: var(--text); opacity: 0.14; white-space: nowrap; unicode-bidi: plaintext; transition: opacity 0.3s ease; } .marquee-item .sep { color: var(--primary); opacity: 1; } .marquee-1 { transform: rotate(2deg) scale(1.05); } .marquee-2 { margin-top: 8px; transform: rotate(-1.4deg) scale(1.08); } .marquee-2 .marquee-item { color: var(--primary); opacity: 0.16; } /* ---------- Section titles ---------- */ .section-head { margin-bottom: 38px; } .section-head.center { text-align: center; max-width: 640px; margin-inline: auto; } .section-head h2 { margin-top: 12px; font-size: clamp(26px, 3vw, 42px); line-height: 1.35; letter-spacing: -0.6px; font-weight: 900; color: var(--text); } .section-head p { margin-top: 12px; font-size: 15.5px; line-height: 1.92; color: var(--text-2); font-weight: 600; } .section-head.split { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 28px; align-items: end; } @media (max-width: 900px) { .section-head.split { grid-template-columns: 1fr; } } /* ---------- Offer cards ---------- */ .offer-section { background: radial-gradient(circle at 12% 18%, rgba(var(--teal-rgb), 0.08), transparent 30%), radial-gradient(circle at 90% 30%, rgba(var(--primary-rgb), 0.07), transparent 26%), linear-gradient(180deg, var(--bg), var(--bg-grad)); } .offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } @media (max-width: 1000px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .offer-grid { grid-template-columns: 1fr; } } .offer-card { height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(30, 31, 40, 0.06); } .offer-card .offer-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--soft-2); border: 1px solid var(--soft-line); display: flex; align-items: center; justify-content: center; font-size: 22px; } .offer-card h3 { margin-top: 16px; font-size: 18.5px; line-height: 1.55; font-weight: 900; color: var(--text); } .offer-card p { margin-top: 8px; font-size: 14px; line-height: 1.92; color: var(--text-7); font-weight: 600; } .offer-card a.offer-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 800; color: var(--primary); transition: gap 0.2s ease; } .offer-card a.offer-link:hover { gap: 10px; } [dir="rtl"] .offer-card a.offer-link svg { transform: rotate(180deg); } .offer-cta { text-align: center; margin-top: 34px; } /* ---------- Pricing plans ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; } @media (max-width: 1000px) { .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } .plan-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: 0 10px 30px rgba(30, 31, 40, 0.06); } .plan-card.plan-featured { border-color: var(--primary); box-shadow: 0 14px 40px rgba(var(--primary-rgb), 0.16); } .plan-tag { align-self: flex-start; background: var(--soft-2); color: var(--primary); border: 1px solid var(--soft-line); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 800; } .plan-name { margin-top: 16px; font-size: 20px; line-height: 1.4; font-weight: 900; color: var(--text); } .plan-features { margin-top: 16px; list-style: none; display: grid; gap: 10px; flex: 1; } .plan-features li { position: relative; padding-inline-start: 24px; font-size: 14px; line-height: 1.7; color: var(--text-7); font-weight: 600; } .plan-features li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(var(--teal-rgb), 0.18); } .plan-price { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-3); } .plan-from { font-size: 12.5px; font-weight: 700; color: var(--text-7); text-transform: uppercase; letter-spacing: 0.5px; } .plan-amount { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; } .plan-value { font-size: 34px; line-height: 1.1; font-weight: 900; color: var(--primary); letter-spacing: -1px; } .plan-unit { font-size: 14px; font-weight: 800; color: var(--text-3); } .plan-old { display: inline-block; margin-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-7); text-decoration: line-through; opacity: 0.75; } .plan-cta { margin-top: 18px; width: 100%; } .plan-card .plan-cta { padding: 12px 22px; font-size: 14.5px; } /* ---------- Blog cards ---------- */ .blog-section { background: radial-gradient(circle at 86% 8%, rgba(var(--primary-rgb), 0.05), transparent 30%), linear-gradient(180deg, var(--white), var(--bg-tint)); } [data-theme="dark"] .blog-section { background: radial-gradient(circle at 86% 8%, rgba(var(--primary-rgb), 0.05), transparent 30%), linear-gradient(180deg, var(--bg), var(--bg-tint)); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } } .blog-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(30, 31, 40, 0.06); } .blog-card:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(30, 31, 40, 0.1); border-color: rgba(var(--primary-rgb), 0.4); } .blog-card .blog-thumb { overflow: hidden; } .blog-card .blog-thumb img { width: 100%; height: 210px; object-fit: cover; transition: transform 0.5s ease; } .blog-card:hover .blog-thumb img { transform: scale(1.05); } .blog-body { padding: 20px; } .blog-date { font-size: 12px; font-weight: 800; color: var(--primary); background: var(--soft); border: 1px solid var(--soft-line); border-radius: 999px; padding: 4px 12px; display: inline-block; } .blog-body h3 { margin-top: 12px; font-size: 17px; line-height: 1.5; font-weight: 900; } .blog-body h3 a { color: var(--text); transition: color 0.2s ease; } .blog-body h3 a:hover { color: var(--primary); } .blog-body .blog-meta { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--muted-5); } .blog-cta { text-align: center; margin-top: 34px; } /* ---------- Schedule CTA ---------- */ .schedule-section { background: radial-gradient(circle at 68% 38%, rgba(var(--primary-rgb), 0.08), transparent 38%), radial-gradient(circle at 28% 68%, rgba(var(--teal-rgb), 0.1), transparent 34%), linear-gradient(135deg, var(--bg-tint) 0%, var(--bg-tint) 42%, var(--bg-tint) 100%); } .schedule-panel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; border-radius: 20px; padding: 40px; color: #fff; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.18), transparent 40%), linear-gradient(135deg, var(--primary), var(--teal)); box-shadow: 0 20px 60px rgba(var(--primary-rgb), 0.28); } @media (max-width: 820px) { .schedule-panel { grid-template-columns: 1fr; padding: 28px; } } .schedule-panel .eyebrow { color: rgba(255, 255, 255, 0.85); font-weight: 800; font-size: 13.5px; } .schedule-panel h2 { margin-top: 8px; font-size: clamp(24px, 2.9vw, 40px); line-height: 1.3; font-weight: 900; } .schedule-panel p { margin-top: 12px; color: rgba(255, 255, 255, 0.85); font-weight: 600; font-size: 15px; line-height: 1.9; max-width: 460px; } .schedule-panel .chips { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; } .schedule-panel .chip { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 800; } .schedule-actions { display: flex; justify-content: flex-end; } @media (max-width: 820px) { .schedule-actions { justify-content: flex-start; } } .btn-white { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); color: var(--text); padding: 14px 28px; border-radius: 10px; font-weight: 800; box-shadow: 0 12px 30px rgba(8, 40, 35, 0.22); transition: all 0.3s ease; border: none; } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(8, 40, 35, 0.3); color: var(--primary); } /* ---------- Page hero (subpages) ---------- */ .page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 96px 72px; margin-top: 76px; background: radial-gradient(circle at 80% 20%, rgba(var(--teal-rgb), 0.12), transparent 30%), radial-gradient(circle at 15% 60%, rgba(var(--primary-rgb), 0.1), transparent 32%), linear-gradient(135deg, var(--bg-tint) 0%, var(--bg-tint) 55%, var(--bg-tint) 100%); } @media (max-width: 640px) { .page-hero { padding-block: 72px 52px; margin-top: 68px; } } .page-hero .container-page { position: relative; z-index: 1; } .page-hero h1 { margin-top: 16px; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.2; letter-spacing: -1px; font-weight: 900; color: var(--text); } .page-hero p { margin-top: 14px; font-size: 16px; line-height: 1.9; color: var(--text-2); font-weight: 600; max-width: 620px; } /* ---------- Showcase ---------- */ .showcase-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; } .filter-btn { border: 1px solid var(--line-2); background: var(--surface); color: var(--text-4); border-radius: 10px; padding: 9px 18px; font-size: 13.5px; font-weight: 800; transition: all 0.22s ease; } .filter-btn:hover { border-color: var(--primary); transform: translateY(-1px); } .filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.28); } .showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .showcase-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .showcase-grid { grid-template-columns: 1fr; } } .showcase-item { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(30, 31, 40, 0.06); transition: all 0.3s ease; } .showcase-item:hover { transform: translateY(-6px); box-shadow: 0 18px 48px rgba(30, 31, 40, 0.12); } .showcase-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease; } .showcase-item:hover img { transform: scale(1.05); } .showcase-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; background: linear-gradient(to top, rgba(13, 24, 22, 0.85), transparent 60%); opacity: 0; transition: opacity 0.3s ease; } .showcase-item:hover .showcase-overlay { opacity: 1; } .showcase-overlay h3 { color: #fff; font-size: 16px; font-weight: 900; } .showcase-overlay p { color: rgba(255, 255, 255, 0.85); font-size: 12.5px; font-weight: 700; margin-top: 4px; } /* ---------- Detail pages (offer / who-are-we) ---------- */ .split-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; align-items: center; } @media (max-width: 900px) { .split-layout { grid-template-columns: 1fr; } } .split-media img { width: 100%; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(30, 31, 40, 0.1); } .detail-body h2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.35; letter-spacing: -0.6px; font-weight: 900; color: var(--text); } .detail-body > p { margin-top: 16px; font-size: 15.5px; line-height: 1.92; color: var(--text-2); font-weight: 600; } .feature-list { margin-top: 22px; display: grid; gap: 12px; } .feature-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; font-weight: 700; color: var(--text-4); } .feature-list li .tick { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--success-soft); color: var(--success-2); display: flex; align-items: center; justify-content: center; } .detail-cta { margin-top: 26px; } /* Value cards */ .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } @media (max-width: 900px) { .value-grid { grid-template-columns: 1fr; } } .value-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px; box-shadow: 0 10px 30px rgba(30, 31, 40, 0.06); } .value-card .v-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--soft-2); border: 1px solid var(--soft-line); display: flex; align-items: center; justify-content: center; font-size: 22px; } .value-card h3 { margin-top: 14px; font-size: 18px; font-weight: 900; color: var(--text); } .value-card p { margin-top: 6px; font-size: 14px; color: var(--text-7); font-weight: 600; } /* Counters */ .counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } @media (max-width: 640px) { .counters { grid-template-columns: 1fr; } } .counter-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; text-align: center; box-shadow: 0 10px 30px rgba(30, 31, 40, 0.06); } .counter-card b { font-size: 34px; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; } .counter-card p { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--muted-5); } /* ---------- Blog list page ---------- */ .blog-list .blog-card { display: grid; grid-template-columns: 280px minmax(0, 1fr); } @media (max-width: 760px) { .blog-list .blog-card { grid-template-columns: 1fr; } } .blog-list .blog-thumb img { height: 100%; min-height: 200px; } .blog-list .blog-body { display: flex; flex-direction: column; justify-content: center; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-cards { display: grid; gap: 14px; } .contact-card { display: flex; align-items: flex-start; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: 0 10px 30px rgba(30, 31, 40, 0.06); } .contact-card .c-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--soft-2); border: 1px solid var(--soft-line); color: var(--primary); display: flex; align-items: center; justify-content: center; } .contact-card h3 { font-size: 15px; font-weight: 900; color: var(--text); } .contact-card p, .contact-card a { font-size: 14px; font-weight: 700; color: var(--text-7); margin-top: 3px; } .contact-card a:hover { color: var(--primary); } .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 30px; box-shadow: 0 16px 46px rgba(30, 31, 40, 0.08); } .form-card h3 { font-size: 22px; font-weight: 900; color: var(--text); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } .field { margin-top: 16px; } .field label { display: block; font-size: 13px; font-weight: 800; color: var(--text-4); margin-bottom: 6px; } .field input, .field textarea { width: 100%; border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 10px; padding: 12px 16px; font-size: 14px; color: var(--text); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .field input:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.12); } .field textarea { min-height: 130px; resize: vertical; } .form-message { margin-top: 14px; display: none; border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 800; background: var(--success-soft); color: var(--success-2); } .form-message.show { display: block; } .form-error { margin-top: 14px; border-radius: 10px; padding: 12px 16px; font-size: 14px; font-weight: 800; color: var(--danger); background: rgba(224, 79, 79, 0.12); } /* ---------- Footer (dark slate, vandar-style) ---------- */ .site-footer { position: relative; overflow: hidden; padding-block: 56px 30px; border-top: 1px solid rgba(255, 255, 255, 0.07); background: radial-gradient(circle at 12% 0%, rgba(var(--teal-rgb), 0.16), transparent 34%), radial-gradient(circle at 86% 16%, rgba(var(--primary-rgb), 0.12), transparent 36%), linear-gradient(160deg, #1b1c24 0%, #14151b 100%); color: rgba(255, 255, 255, 0.75); } .site-footer .brand-word { color: #fff; } .site-footer .brand-mark { background: #fff; color: var(--primary); } .footer-grid { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); gap: 24px; padding-block: 32px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand p { margin-top: 16px; font-size: 13.5px; line-height: 1.92; font-weight: 600; color: rgba(255, 255, 255, 0.72); max-width: 300px; } .footer-social { margin-top: 20px; display: flex; align-items: center; gap: 12px; } .footer-social a { width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .footer-social a:hover { transform: translateY(-2px); background: var(--primary); border-color: var(--primary); box-shadow: 0 10px 24px rgba(var(--primary-rgb), 0.35); } .footer-col h4 { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 12px; } .footer-col ul { display: grid; gap: 10px; } .footer-col a { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.7); transition: color 0.2s ease; } .footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.55); } .footer-langs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .footer-langs a { font-weight: 800; color: rgba(255, 255, 255, 0.65); transition: color 0.2s ease; } .footer-langs a:hover { color: #fff; } .footer-langs a.active { color: #fff; } .footer-langs .sep { color: rgba(255, 255, 255, 0.3); user-select: none; } /* ---------- Back to top ---------- */ .back-to-top { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 40; width: 44px; height: 44px; border-radius: 10px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px rgba(var(--primary-rgb), 0.35); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; } .back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top:hover { transform: translateY(-2px); background: var(--primary-2); } /* ---------- Utility ---------- */ .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 16px; } .mt-4 { margin-top: 24px; } .mt-5 { margin-top: 32px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .text-center { text-align: center; } @media (prefers-reduced-motion: reduce) { .marquee-track, .hero-blob, .anim-visual-float, .nav-dropdown-panel { animation: none !important; transition: none !important; } }