:root{ color-scheme: light; --bg: #53c8ff; --surface: rgba(255,255,255,0.86); --surface-elevated: rgba(255,255,255,0.95); --surface-soft: rgba(238,248,255,0.88); --border: rgba(10,78,130,0.18); --border-strong: rgba(10,78,130,0.30); --text: #0d3758; --muted: #2d628a; --link: #0a3d64; --accent: #ff7a00; --accent-soft: rgba(255,122,0,0.18); --success: #0f9b53; --warning: #db8a00; --danger: #cf412a; --radius: 22px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 24px; --space-6: 32px; --shadow-1: 0 10px 26px rgba(5,63,106,0.16); --shadow-2: 0 20px 52px rgba(5,63,106,0.24); --max: 1160px; } /* Dark theme — toggle is intentionally disabled in production (theme.js is a no-op). These rules are kept for future use: set to activate. */ html[data-theme="dark"]{ color-scheme: dark; --bg: #0c1f33; --surface: rgba(14,36,58,0.88); --surface-elevated: rgba(17,42,68,0.94); --surface-soft: rgba(21,47,74,0.9); --border: rgba(161,204,255,0.22); --border-strong: rgba(161,204,255,0.34); --text: #e9f5ff; --muted: #b8d4ea; --link: #f3f9ff; --accent: #ff9b3d; --accent-soft: rgba(255,155,61,0.2); --shadow-1: 0 10px 24px rgba(1,8,18,0.28); --shadow-2: 0 20px 52px rgba(1,8,18,0.36); } *{ box-sizing: border-box; } body{ color: var(--text); font-size: 16px; line-height: 1.6; font-family: "Trebuchet MS", "Segoe UI", "Verdana", sans-serif; background: linear-gradient(rgba(255,255,255,0.14), rgba(255,255,255,0.14)), url("/assets/img/site-background.png") center center / cover fixed no-repeat; background-color: #53c8ff; } .page{ position: relative; z-index: 10; min-height: 100vh; } .container{ width: min(var(--max), calc(100% - 32px)); margin-inline: auto; } a{ color: var(--link); } .sr-only{ position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .h1,.h2,.h3{ font-family: "Arial Black", "Trebuchet MS", "Segoe UI", sans-serif; overflow-wrap: break-word; } .header{ position: sticky; top: 0; z-index: 60; border-bottom: 1px solid var(--border); background: color-mix(in srgb, #62d2ff 78%, white 10%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .header__in{ display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "brand spacer actions" "nav nav nav"; align-items: center; gap: 12px; padding: 10px 0; } .brand{ grid-area: brand; display:flex; align-items:center; gap: 10px; text-decoration:none; color: var(--link); min-width: 220px; } .brand__logo{ width: 52px; height: 52px; border-radius: 14px; border:1px solid rgba(255,255,255,0.45); background: #e8f6ff url("/assets/img/artem-brand.png") center / cover no-repeat; color: transparent; font-size: 0; overflow: hidden; display: block; box-shadow: var(--shadow-1); } .brand__name{ font-family: "Arial Black", "Trebuchet MS", "Segoe UI", sans-serif; font-size: 36px; line-height: 1; display: flex; align-items: baseline; gap: 0.18em; background: none; -webkit-text-fill-color: unset; -webkit-text-stroke: 0; text-shadow: none; filter: none; color: inherit; } .brand__w1{ font-weight: 500; font-size: 0.58em; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); -webkit-text-fill-color: rgba(255,255,255,0.75); align-self: center; } .brand__w2{ font-weight: 900; font-size: 1em; letter-spacing: 0.02em; background: linear-gradient(135deg, #ff6a00 0%, #ffbe00 60%, #ff9500 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 1px 8px rgba(255,140,0,0.5)); } .nav{ grid-area: nav; display:flex; justify-content: center; gap: 6px; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px 2px; scrollbar-width: none; } .nav::-webkit-scrollbar{ display: none; } .nav a{ color: var(--muted); text-decoration:none; font-size: 13px; white-space: nowrap; padding: 7px 9px; border-radius: 999px; border:1px solid transparent; transition: .2s ease; } .nav a:hover, .nav a:focus-visible{ color: var(--text); background: color-mix(in srgb, var(--accent-soft) 62%, white 18%); border-color: color-mix(in srgb, var(--accent) 44%, var(--border)); } .header__right{ margin-left:auto; display:flex; align-items:center; gap: 8px; flex-shrink: 0; grid-area: actions; } .header__right [data-menu-open]{ display: none; } .search{ position: relative; } .search input{ width: min(390px, 28vw); min-width: 240px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(248,252,255,0.9); color: var(--text); } .search input::placeholder{ color: var(--muted); } .suggest{ position:absolute; top: calc(100% + 8px); left:0; right:0; display:none; overflow:hidden; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-elevated); box-shadow: var(--shadow-2); } .suggest.is-open{ display:block; } .suggest__item{ display:flex; gap:12px; align-items:flex-start; padding: 11px 12px; text-decoration:none; color: var(--text); border-top:1px solid var(--border); } .suggest__item:first-child{ border-top:0; } .suggest__item:hover{ background: var(--accent-soft); } .suggest__type{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 84px; } .suggest__title{ font-weight: 700; } .suggest__sub{ font-size: 12px; color: var(--muted); } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 10px 14px; border-radius: 999px; border:1px solid var(--border); background: var(--surface-soft); color: var(--text); text-decoration:none; cursor:pointer; font-weight: 680; transition: .2s ease; } .btn:hover{ transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--surface-soft) 62%, var(--accent-soft)); } @keyframes pulse-cta{ 0%,100%{ box-shadow: 0 10px 18px rgba(255,116,17,0.34); } 50%{ box-shadow: 0 10px 18px rgba(255,116,17,0.34), 0 0 0 7px rgba(255,122,0,0.15); } } .btn--primary{ border-color: color-mix(in srgb, #ff7a00 68%, #ffd5a8); color: #fff; background: linear-gradient(140deg, #ff8c1f 0%, #ff6a00 100%); box-shadow: 0 10px 18px rgba(255,116,17,0.34); animation: pulse-cta 2.6s ease-in-out infinite; } .btn--primary:hover{ border-color: #ff8f2b; background: linear-gradient(140deg, #ff9a38 0%, #ff6f08 100%); animation: none; transform: translateY(-2px); box-shadow: 0 14px 28px rgba(255,116,17,0.46); } .iconbtn{ width: 40px; height: 40px; border-radius: 999px; border:1px solid var(--border); background: var(--surface-soft); display:grid; place-items:center; cursor:pointer; color: var(--text); } .iconbtn:hover{ background: var(--accent-soft); } .hero{ padding: 56px 0 26px; position: relative; overflow: hidden; background: transparent; } .hero::before,.hero::after{ display:none; } .hero .container{ position:relative; z-index:1; } .kicker{ font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--muted) 80%, #093c66); } .hero .h1{ font-size: clamp(34px,5vw,66px); line-height: 1.05; margin: 10px 0; text-transform: uppercase; color: #ff7a00; text-shadow: 0 2px 0 #fff6e8, 0 14px 24px rgba(3,73,122,0.24); } .lead{ font-size: clamp(16px,2vw,18px); color: #1d618d; margin: 0 0 18px; max-width: 58ch; } .hero__grid{ display:grid; gap: var(--space-4); grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); } .hero__aside{ display: flex; flex-direction: column; gap: 14px; } .hero__photo-wrap{ border-radius: calc(var(--radius-lg) - 2px); padding: 10px; border: 1px solid rgba(255,255,255,0.42); background: linear-gradient(180deg, rgba(115,211,255,0.76) 0%, rgba(66,174,231,0.88) 100%); } .hero__photo{ display: block; width: 100%; object-fit: contain; object-position: center; border-radius: 16px; border: 2px solid rgba(255,255,255,0.62); box-shadow: 0 8px 20px rgba(13,86,132,0.22); } .hero__aside-note{ margin: 0; color: #205f88; } .hero__aside-actions{ margin-top: -2px; } .card{ border:1px solid var(--border); border-top: 3px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(244,251,255,0.84) 100%); box-shadow: var(--shadow-1); transition: transform .22s ease, box-shadow .22s ease, border-top-color .22s ease; } .card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-2); border-top-color: var(--accent); } html[data-theme="dark"] .card{ background: linear-gradient(180deg, rgba(17,44,70,0.94) 0%, rgba(14,36,58,0.88) 100%); } html[data-theme="dark"] .card:hover{ border-top-color: var(--accent); } .card__pad{ padding: var(--space-4); } .grid{ display:grid; gap: var(--space-3); } .grid--3, .grid.cols-3{ grid-template-columns: repeat(3,minmax(0,1fr)); } .grid--4{ grid-template-columns: repeat(4,minmax(0,1fr)); } .badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid color-mix(in srgb, var(--accent) 42%, var(--border)); background: color-mix(in srgb, var(--accent-soft) 62%, white 20%); color: color-mix(in srgb, var(--text) 80%, #9b4a00); font-size: 12px; } /* badges visible */ .h2{ font-size: clamp(24px,2.8vw,34px); margin: 0 0 8px; background: linear-gradient(120deg, #0a4f82 0%, #0b90d4 52%, #0a4f82 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html[data-theme="dark"] .h2{ background: linear-gradient(120deg, #7dcfff 0%, #b8eaff 52%, #7dcfff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .h3{ font-size: 20px; margin: 0 0 8px; } .muted{ color: var(--muted); } .ul{ margin: 10px 0 0; padding-left: 18px; color: var(--muted); } .ul li{ margin: 6px 0; } .specialist__photo{ width: 88px; height: 88px; display: block; border-radius: 16px; border: 1px solid rgba(255,255,255,.45); object-fit: cover; object-position: top center; box-shadow: var(--shadow-1); margin-bottom: 10px; background: color-mix(in srgb, var(--surface-soft) 70%, white 30%); } .section{ padding: 28px 0; } .section__title{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-3); margin-bottom: 12px; } .section__title h1,.section__title h2{ margin:0; } .section__title a{ color: var(--muted); } .faq{ border-top:1px solid var(--border); margin-top: 10px; } .faq details{ border-bottom:1px solid var(--border); padding: 11px 0; } .faq summary{ cursor:pointer; font-weight:700; } .faq p{ margin:8px 0 0; color: var(--muted); } .footer{ position: static; padding: 30px 0 34px; color: var(--muted); } .footer__grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-3); } .footer a{ color: var(--muted); text-decoration:none; } .footer a:hover{ color: var(--text); } .cta{ position: fixed; left: 0; right: 0; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 70; display:none; place-items:center; pointer-events:none; opacity:0; transform: translateY(16px); transition: opacity .18s ease, transform .18s ease; } .cta.is-on{ opacity:1; transform: translateY(0); } .cta__in{ width: min(560px, calc(100% - 20px)); display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; pointer-events:auto; } .mmenu{ position: fixed; inset:0; z-index:80; display:none; } .mmenu.is-open{ display:block; } .mmenu__bg{ position:absolute; inset:0; background: rgba(0,0,0,.58); } html[data-theme="light"] .mmenu__bg{ background: rgba(15,25,48,.36); } .mmenu__panel{ position:absolute; top: 10px; left: 10px; right: 10px; border-radius: var(--radius-lg); border:1px solid var(--border); background: var(--surface-elevated); box-shadow: var(--shadow-2); padding: 14px; } .mmenu__links{ display:grid; gap:8px; margin-top:10px; } .mmenu__links a{ padding: 12px; border-radius: var(--radius-sm); border:1px solid var(--border); background: var(--surface-soft); color: var(--text); text-decoration:none; font-weight:700; } .modal{ position: fixed; inset: 0; z-index: 90; display:none; } .modal.is-open{ display:block; } .modal__bg{ position:absolute; inset:0; background: rgba(0,0,0,.64); } html[data-theme="light"] .modal__bg{ background: rgba(20,31,54,.35); } .modal__panel{ position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:min(720px, calc(100% - 24px)); border-radius: var(--radius-lg); border:1px solid var(--border-strong); background: var(--surface-elevated); box-shadow: var(--shadow-2); } .modal__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 14px 16px; border-bottom:1px solid var(--border); } .modal__body{ padding: 16px; } body.cookie-consent-open{ overflow: hidden; overscroll-behavior: contain; } body.cookie-consent-open #ctaBar{ visibility: hidden; pointer-events: none !important; } .cookie-consent{ position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); pointer-events: none; touch-action: none; } .cookie-consent__panel{ pointer-events: auto; } .cookie-consent__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } html[data-theme="light"] .cookie-consent__backdrop{ background: rgba(20,31,54,.34); } .cookie-consent__panel{ position: relative; width: min(760px, 100%); max-height: min(82dvh, 700px); overflow: auto; border: 1px solid var(--border-strong); background: var(--surface-elevated); box-shadow: var(--shadow-2); pointer-events: auto; touch-action: auto; -webkit-overflow-scrolling: touch; } .cookie-consent__layout{ display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .cookie-consent__text{ flex: 1 1 360px; max-width: 540px; } .cookie-consent__actions{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; flex: 1 1 220px; } .cookie-consent .btn{ min-height: 44px; } .form{ display:grid; gap: 12px; } .row{ display:grid; gap: 10px; grid-template-columns: 1fr 1fr; } .field label{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } .field input,.field select,.field textarea{ width:100%; padding: 12px; border-radius: var(--radius-sm); border:1px solid var(--border); background: var(--surface-soft); color: var(--text); } .field textarea{ min-height: 96px; resize: vertical; } .form__err{ color: var(--danger); font-weight: 700; min-height: 20px; } .check{ display:flex; gap:10px; align-items:flex-start; color: var(--muted); font-size: 13px; } .check input{ margin-top: 3px; } .split{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; } .hr{ height:1px; background: var(--border); margin: 14px 0; } :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline: 3px solid color-mix(in srgb, var(--accent) 70%, white); outline-offset: 2px; } /* Scroll reveal */ .scroll-reveal{ opacity: 0; transform: translateY(22px); transition: opacity .65s cubic-bezier(.2,.8,.2,1), transform .65s cubic-bezier(.2,.8,.2,1); } .scroll-reveal.is-visible{ opacity: 1; transform: translateY(0); } /* === ANIMATIONS === */ /* Hero entrance */ @keyframes hero-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: translateY(0); } } .hero .kicker { animation: hero-in .55s cubic-bezier(.2,.8,.2,1) .05s both; } .hero h1 { animation: hero-in .6s cubic-bezier(.2,.8,.2,1) .15s both; } .hero .lead { animation: hero-in .6s cubic-bezier(.2,.8,.2,1) .25s both; } .hero .split { animation: hero-in .6s cubic-bezier(.2,.8,.2,1) .35s both; } .hero .hr { animation: hero-in .5s cubic-bezier(.2,.8,.2,1) .42s both; } .hero .grid { animation: hero-in .6s cubic-bezier(.2,.8,.2,1) .5s both; } /* Stagger cards */ .stagger-cards .card:nth-child(1) { transition-delay: .04s; } .stagger-cards .card:nth-child(2) { transition-delay: .10s; } .stagger-cards .card:nth-child(3) { transition-delay: .16s; } .stagger-cards .card:nth-child(4) { transition-delay: .22s; } .stagger-cards .card:nth-child(5) { transition-delay: .28s; } .stagger-cards .card:nth-child(6) { transition-delay: .34s; } .stagger-cards .card:nth-child(7) { transition-delay: .40s; } .stagger-cards .card:nth-child(8) { transition-delay: .46s; } .stagger-cards .card:nth-child(9) { transition-delay: .52s; } .stagger-cards .card.anim-hidden { opacity: 0; transform: translateY(24px); transition: opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1); } .stagger-cards .card.anim-visible { opacity: 1; transform: translateY(0); } /* Nav underline slide */ .nav a{ position: relative; } .nav a::after{ content: ""; position: absolute; bottom: 2px; left: 50%; width: 0; height: 2px; background: var(--accent); border-radius: 999px; transition: width .25s cubic-bezier(.2,.8,.2,1), left .25s cubic-bezier(.2,.8,.2,1); } .nav a:hover::after, .nav a.active::after{ width: calc(100% - 16px); left: 8px; } /* Ripple on buttons */ .btn{ position: relative; overflow: hidden; } .btn .ripple{ position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35); transform: scale(0); animation: ripple-anim .55s linear; pointer-events: none; } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } /* 3D card tilt */ .card{ will-change: transform; } .card.tilt-active{ transition: transform .08s linear; } /* Floating badge */ @keyframes float-badge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .hero .badge{ animation: float-badge 3.2s ease-in-out infinite; } /* Number counter */ [data-counter]{ display: inline-block; } /* Scroll progress bar */ #scrollProgress{ position: fixed; top: 0; left: 0; z-index: 65; height: 3px; width: 0%; background: linear-gradient(90deg, var(--accent), #ffcc00); transition: width .1s linear; pointer-events: none; } /* Section title accent */ .section__title h2{ position: relative; } .section__title h2::after{ content: ""; display: block; margin-top: 6px; width: 36px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--accent), #ffb347); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .scroll-reveal{ opacity: 1 !important; transform: none !important; } } @media (max-width: 1300px){ .brand{ min-width: 195px; } .brand__name{ font-size: 36px; } .search input{ width: min(350px, 24vw); min-width: 220px; } } @media (max-width: 1180px){ .brand{ min-width: 180px; } .brand__name{ font-size: 30px; } .search input{ width: min(300px, 24vw); min-width: 180px; } .nav a{ font-size: 12px; padding: 6px 8px; } } @media (max-width: 1024px){ .hero__grid{ grid-template-columns: 1fr; } } @media (max-width: 920px){ .header__in{ display:flex; } .nav{ display:none; } .header__right{ margin-left: auto; gap: 6px; } .header__right .search, .header__right .btn--primary{ display: none; } .header__right [data-menu-open]{ display:grid; } .brand__logo{ width: 42px; height: 42px; border-radius: 12px; } .brand__name{ font-size: clamp(22px, 7.2vw, 30px); } .footer__grid{ grid-template-columns: 1fr; } } @media (max-width: 768px){ .row{ grid-template-columns: 1fr; } .section{ padding: 24px 0; } } @media (max-width: 720px){ .cta{ display:grid; } .cookie-consent{ padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); } .cookie-consent__layout{ display: grid; gap: 12px; } .cookie-consent__text{ max-width: none; } .cookie-consent__actions{ width: 100%; display: grid; grid-template-columns: 1fr; gap: 8px; } .cookie-consent__actions .btn{ width: 100%; } .grid--3,.grid--4,.grid.cols-3{ grid-template-columns: 1fr; } } /* === FAQ Accordion === */ .faq{ display:flex; flex-direction:column; gap:6px; } .faq__item{ border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; } .faq__q{ width:100%; text-align:left; background:none; border:none; padding:14px 16px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:15px; color:var(--text); transition: background .2s; } .faq__q:hover{ background: rgba(0,0,0,0.03); } .faq__icon{ font-size:18px; transition: transform .3s cubic-bezier(.2,.8,.2,1); flex-shrink:0; margin-left:12px; color:var(--accent); } .faq__item.open .faq__icon{ transform: rotate(45deg); } .faq__a{ max-height:0; overflow:hidden; transition: max-height .35s cubic-bezier(.2,.8,.2,1), padding .35s; padding: 0 16px; font-size:14px; color:var(--muted); line-height:1.6; } .faq__item.open .faq__a{ max-height:400px; padding: 0 16px 14px; } /* === Comparison Table === */ .compare-table{ width:100%; border-collapse:collapse; font-size:14px; } .compare-table th{ background: var(--accent); color:#fff; padding:10px 14px; text-align:center; } .compare-table th:first-child{ text-align:left; background: var(--surface); color:var(--text); } .compare-table td{ padding:9px 14px; border-bottom:1px solid var(--border); } .compare-table td:not(:first-child){ text-align:center; } .compare-table tr:last-child td{ border-bottom:none; } .compare-table tr:nth-child(even) td{ background: rgba(0,0,0,0.02); } .compare-yes{ color:#22a05a; font-size:16px; } .compare-no{ color:#ccc; font-size:16px; } .compare-table .col-accent th{ background: linear-gradient(135deg,#ff6a00,#ffbe00); } /* === Wave Asset Dividers & Footer Corners === */ .wave-divider{ display:block; width:100%; height:100px; background: url('/assets/img/bg2/03_bottom-wave_transparent_1280x360.png') no-repeat center top / cover; margin-top:-2px; pointer-events:none; } .wave-divider--top{ background-image: url('/assets/img/bg2/02_top-wave_transparent_1280x220.png'); height:75px; margin-bottom:-2px; background-position: center bottom; } .footer{ position:relative; } .footer .container{ position:relative; z-index:1; } /* === SVG Wave Background (site-bg) === */ .site-bg{ position:fixed; inset:0; z-index:-2; pointer-events:none; } .bg-svg{ position:absolute; inset:0; width:100%; height:100%; } .bg-noise{ position:absolute; inset:0; opacity:.04; background-image: radial-gradient(circle at 20% 20%,rgba(255,255,255,.6) 0 1px,transparent 1px), radial-gradient(circle at 80% 30%,rgba(255,255,255,.4) 0 1px,transparent 1px), radial-gradient(circle at 30% 80%,rgba(255,255,255,.5) 0 1px,transparent 1px); background-size:18px 18px,24px 24px,22px 22px; mix-blend-mode:soft-light; } .bg-float-slow{ animation:bgDriftSlow 18s ease-in-out infinite alternate; transform-origin:center; } .bg-float-fast{ animation:bgDriftFast 11s ease-in-out infinite alternate; transform-origin:center; } @keyframes bgDriftSlow{ from{ transform:translateY(-8px) translateX(-10px); } to{ transform:translateY(10px) translateX(8px); } } @keyframes bgDriftFast{ from{ transform:translateY(12px) translateX(8px); } to{ transform:translateY(-12px) translateX(-6px); } } /* Dark mode: hide SVG, let dark --bg show */ html[data-theme="dark"] .site-bg{ opacity:.12; } /* === Custom full-site background image === */ body::before{ content:""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)), url("/assets/img/site-background.png") center center / cover no-repeat; } .site-bg, .bg-svg, .bg-noise{ display: none !important; } #world{ background: transparent !important; filter: none; opacity: 0.22; } #world::before{ background: radial-gradient(760px 420px at 22% 18%, rgba(255,255,255,0.30), rgba(255,255,255,0) 70%), radial-gradient(820px 460px at 84% 24%, rgba(255,255,255,0.18), rgba(255,255,255,0) 72%), radial-gradient(920px 520px at 50% 100%, rgba(22,110,190,0.14), rgba(22,110,190,0) 72%) !important; mix-blend-mode: screen; } #world::after{ opacity: 0.04 !important; } #bloom{ opacity: 0.10 !important; } #portal, #aurora{ opacity: 0.06 !important; } #fx{ opacity: 0.25; } html[data-theme="dark"] body{ background: linear-gradient(rgba(8,18,30,0.50), rgba(8,18,30,0.50)), url("/assets/img/site-background.png") center center / cover fixed no-repeat; background-color: #0c1f33; } html[data-theme="dark"] body::before{ background: linear-gradient(rgba(8,18,30,0.36), rgba(8,18,30,0.36)), url("/assets/img/site-background.png") center center / cover no-repeat; } /* === Custom header logo === */ .brand{ gap: 0; min-width: 0; width: max-content; align-items: center; } .brand__mark{ display: block; width: auto; height: clamp(60px, 5.5vw, 82px); object-fit: contain; filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.16)); } .brand__logo, .brand__name{ display: none !important; } @media (max-width: 1300px){ .brand__mark{ height: clamp(56px, 5vw, 74px); } } @media (max-width: 1180px){ .brand__mark{ height: clamp(52px, 4.8vw, 68px); } } @media (max-width: 920px){ .brand{ margin-right: auto; } .brand__mark{ height: clamp(46px, 11vw, 58px); } } @media (max-width: 480px){ .brand__mark{ height: 44px; } /* Scale hero headings on narrow screens to prevent long words from clipping */ .hero .h1{ font-size: clamp(20px, 7.2vw, 34px); } } /* === Skeleton loader === */ @keyframes skeleton-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } .skeleton { background: rgba(10,78,130,0.10); border-radius: 6px; animation: skeleton-pulse 1.4s ease-in-out infinite; } .skeleton--line { display: block; } .skeleton-card { pointer-events: none; } /* === How we work steps === */ .how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: none; } .how-step { display: flex; flex-direction: column; gap: 12px; position: relative; } .how-step__num { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1; color: var(--accent, #e87500); opacity: 0.9; font-variant-numeric: tabular-nums; } .how-step__title { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 6px; } .how-step__text { margin: 0; font-size: 0.875rem; color: var(--muted, #94a3b8); line-height: 1.55; } @media (max-width: 900px) { .how-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .how-steps { grid-template-columns: 1fr; } } /* === Compact header on scroll (mobile) === */ .header { transition: box-shadow 0.25s ease; } .header__in { transition: padding 0.25s ease; } @media (max-width: 768px) { .header.is-scrolled { box-shadow: 0 2px 12px rgba(0,0,0,0.12); } .header.is-scrolled .header__in { padding-top: 5px; padding-bottom: 5px; } .header.is-scrolled .brand__mark { height: 38px; } } /* === Online status indicator === */ .online-status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; margin-bottom: 10px; opacity: 0; transition: opacity 0.3s; } .online-status:not(:empty) { opacity: 1; } .online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .online-dot--on { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: pulse-dot 2s ease-in-out infinite; } .online-dot--off { background: #64748b; } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); } 70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }