/* Auto-extracted from index.html for consistent design across pages */
/* ===== Brand tokens ===== */
:root {
--brand: 27 92 255; /* Brand RGB */
--brand-500: 27 92 255; /* Brand 500 */
--brand-600: 11 26 65; /* Brand 600 */
--brand-700: 11 26 65; /* Brand 700 */
--brand-50: 207 233 255; /* Brand 50 */
--grad-start: #0b1a41;
--grad-end: #1b5cff;
--grad: linear-gradient(135deg, var(--grad-start), var(--grad-end));
--grad-solid: #1b5cff;
--grad-dark: #0b1a41;
--on-grad: #ffffff;
}
html, body { font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell; }
/* Headings use display font */
h1, h2, h3, .font-display { font-family: "Unbounded","Nunito",ui-sans-serif,system-ui; }
/* Smooth theming */
.theme-anim * { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; }
/* Global ornaments background */
body.bg-ornaments {
background:
/* top glows */
radial-gradient(1200px 600px at 10% -10%, rgba(var(--brand-500)/0.24), transparent 62%),
radial-gradient(900px 500px at 110% 10%, rgba(var(--brand-700)/0.22), transparent 62%),
/* mid-page soft glows */
radial-gradient(700px 380px at 20% 45%, rgba(var(--brand-500)/0.12), transparent 60%),
radial-gradient(700px 380px at 80% 55%, rgba(var(--brand-600)/0.10), transparent 60%),
/* mid extra near payment */
radial-gradient(640px 360px at 38% 72%, rgba(var(--brand-500)/0.10), transparent 62%),
/* bottom perimeter glows */
radial-gradient(900px 520px at 0% 100%, rgba(var(--brand-700)/0.12), transparent 62%),
radial-gradient(900px 520px at 100% 100%, rgba(var(--brand-500)/0.14), transparent 62%),
radial-gradient(700px 420px at 50% 100%, rgba(var(--brand-600)/0.12), transparent 62%),
/* minimal depth (avoid grey) */
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.06) 100%);
}
.dark.bg-ornaments {
background:
/* top glows */
radial-gradient(1200px 600px at 0% -10%, rgba(var(--brand-500)/0.18), transparent 62%),
radial-gradient(900px 500px at 100% 0%, rgba(var(--brand-700)/0.16), transparent 62%),
/* mid-page soft glows */
radial-gradient(720px 420px at 22% 48%, rgba(var(--brand-500)/0.16), transparent 62%),
radial-gradient(720px 420px at 78% 58%, rgba(var(--brand-700)/0.14), transparent 62%),
/* bottom perimeter glows */
radial-gradient(900px 520px at 0% 100%, rgba(var(--brand-700)/0.16), transparent 62%),
radial-gradient(900px 520px at 100% 100%, rgba(var(--brand-500)/0.18), transparent 62%),
radial-gradient(700px 420px at 50% 100%, rgba(var(--brand-600)/0.16), transparent 62%),
/* softer dark tail (no black hole) */
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(9,9,11,0.28) 100%);
}
/* subtle grid overlay */
.bg-grid::before {
content:""; position: fixed; inset:0; pointer-events:none;
background:
linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
background-size: 36px 36px;
mix-blend-mode: multiply; z-index: 0;
}
.dark .bg-grid::before {
background:
linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
}
/*
Progressive enhancement:
If JS is blocked (or fails to run on some older browsers),
elements with .reveal must remain readable.
Visible by default; animate only when has .js.
*/
/*
Reveal animation must never make content unreadable.
On some devices/browsers JS может быть заблокирован/упасть с ошибкой,
поэтому мы НЕ прячем элементы через opacity:0.
Анимация — только через transform.
*/
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 1; transform: translateY(18px) scale(.98); transition: transform .6s ease; }
html.js .revealed { opacity: 1; transform: none; }
.nav-link { position: relative; transition: color .2s ease, opacity .2s ease; }
.nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
height: 2px;
width: 100%;
background: var(--grad);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
will-change: transform;
border-radius: 999px;
}
.nav-link:hover::after {
transform: scaleX(1);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:hover { filter: brightness(.9); }
.hover-float { transition: transform .25s ease, box-shadow .25s ease; }
.hover-float:hover { transform: translateY(-4px); }
/* ==== Buttons (variants + animations) ==== */
/*
Buttons: remove heavy outer shadow + inner glow.
Keep subtle elevation on hover only.
Tailwind utility shadows (shadow-lg, etc.) are overridden here intentionally.
*/
.btn { position: relative; overflow: hidden; transition: transform .15s ease, filter .2s ease, box-shadow .25s ease; border-radius: .75rem; will-change: transform; box-shadow: none !important; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22) !important; }
.btn:active { transform: translateY(0) scale(.99); filter: brightness(.98); }
.btn-primary { background-image: var(--grad); background-color: transparent; color: var(--on-grad); border: 0; }
.btn-outline { background: transparent; color: rgb(var(--brand)); border: 1px solid rgba(var(--brand)/.6); }
.dark .btn-outline { color: rgb(244 244 245); border: 1px solid rgba(244,244,245,.26); }
.btn-outline:hover { background: var(--grad); color: var(--on-grad); border-color: transparent; }
.btn-ghost { background: transparent; color: inherit; border: 0; }
/* Legacy glow class (kept for compatibility, but without colored glow / inset) */
.btn-glow:hover { box-shadow: 0 10px 26px rgba(0,0,0,.22) !important; }
/* Shine */
.btn-shine::after {
content:""; position:absolute; top:0; left:-120%; width:120%; height:100%;
background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.35) 30%, transparent 60%);
transform: skewX(-20deg);
transition: left .5s ease;
}
.btn-shine:hover::after { left: 120%; }
/* Swipe-fill (Webflow-like) */
.btn-swipe::before{
content:""; position:absolute; inset:0; transform:translateX(-110%);
background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.0) 35%);
transition: transform .45s ease;
display: none !important; }
.btn-swipe:hover::before{ transform:translateX(0); }
/* Underline slide for links styled as buttons */
.btn-underline::after{
content:""; position:absolute; left:10%; right:10%; bottom:8px; height:2px; border-radius:999px;
background: rgba(255,255,255,.55);
transform: scaleX(0); transform-origin:left; transition: transform .25s ease;
}
.btn-underline:hover::after{ transform: scaleX(1); }
/* Magnetic hover (opt-in with data-mag=\"1\") */
[data-mag=\"1\"]{ transition: transform .15s ease; will-change: transform; }
/* Ripple (simple) */
.btn-ripple { --ripple-x: 50%; --ripple-y: 50%; --ripple-color: rgba(255,255,255,.35); }
.btn-ripple:focus-visible::before, .btn-ripple:active::before {
content:""; position:absolute; left:var(--ripple-x); top:var(--ripple-y); width:8px; height:8px;
transform: translate(-50%,-50%); background: var(--ripple-color); border-radius:999px;
animation: ripple .6s ease-out;
}
@keyframes ripple { from{opacity:.6; transform:translate(-50%,-50%) scale(1);} to{opacity:0; transform:translate(-50%,-50%) scale(18);} }
to{opacity:0; transform:translate(-50%,-50%) scale(18);} }
@keyframes softPulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }
.pulse { animation: softPulse 2.2s ease-in-out infinite; }
/* continuous floating image */
@keyframes floatY { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }
.floaty { animation: floatY 4.5s ease-in-out infinite alternate; }
/* ===== Main page thematic illustrations (lightweight, non-fixed) ===== */
.hero-scene{ position:absolute; inset:-1.25rem -1rem -1rem -1rem; pointer-events:none; z-index:0; }
.hero-scene-grid{ position:absolute; inset:8% 2% 3% 6%; border-radius:2rem; opacity:.26;
background-image:
linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px);
background-size: 34px 34px;
mask-image: radial-gradient(circle at center, #000 48%, transparent 90%); }
.hero-scene-ring,.hero-scene-ring::after{ position:absolute; border-radius:999px; border:1px solid rgba(63,116,255,.22); }
.hero-scene-ring{ width:20rem; height:20rem; right:8%; top:8%; box-shadow: inset 0 0 80px rgba(27,92,255,.05); }
.hero-scene-ring::after{ content:""; inset:2rem; border-color: rgba(63,116,255,.16); }
.hero-scene-node{ position:absolute; width:.7rem; height:.7rem; border-radius:999px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(27,92,255,.9)); box-shadow: 0 0 0 5px rgba(27,92,255,.10); }
.hero-scene-node.n1{ right:22%; top:18%; }
.hero-scene-node.n2{ right:12%; top:43%; }
.hero-scene-node.n3{ right:28%; top:66%; }
.hero-scene-line{ position:absolute; inset:0; }
.hero-scene-line path{ stroke: rgba(63,116,255,.28); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-dasharray:6 10; }
.hero-note{ position:absolute; min-width:10.5rem; max-width:13rem; padding:.85rem 1rem; border-radius:1rem; border:1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(18,18,22,.92), rgba(10,10,14,.82)); box-shadow: 0 14px 32px rgba(0,0,0,.22); backdrop-filter:none; }
.hero-note strong{ display:block; font-size:.72rem; line-height:1.1; letter-spacing:.16em; text-transform:uppercase; color: rgba(161,161,170,.92); margin-bottom:.45rem; }
.hero-note span{ display:block; font-size:.95rem; line-height:1.35; color:#f5f7ff; }
.hero-note em{ display:block; margin-top:.38rem; font-style:normal; font-size:.72rem; color: rgba(96,165,250,.96); }
.hero-note::before{ content:""; position:absolute; inset:auto auto 100% 1rem; width:2.25rem; height:2px; background: linear-gradient(90deg, rgba(27,92,255,.9), transparent); opacity:.7; }
.hero-note.note-1{ left:-1rem; top:1rem; animation: driftTag 8s ease-in-out infinite; }
.hero-note.note-2{ right:-.5rem; top:2.5rem; animation: driftTag 9.2s ease-in-out infinite reverse; }
.hero-note.note-3{ left:.5rem; bottom:1.25rem; animation: driftTag 7.6s ease-in-out infinite .4s; }
.hero-note.note-4{ right:1rem; bottom:0; min-width:9.5rem; animation: driftTag 8.8s ease-in-out infinite reverse .6s; }
.hero-microbadge{ position:absolute; display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border-radius:999px; border:1px solid rgba(255,255,255,.10);
background: rgba(14,14,18,.88); color:#d4d4d8; font-size:.74rem; line-height:1; box-shadow: 0 10px 20px rgba(0,0,0,.16); }
.hero-microbadge::before{ content:""; width:.48rem; height:.48rem; border-radius:999px; background: rgba(59,130,246,.95); box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.hero-microbadge.mb-1{ left:10%; top:55%; }
.hero-microbadge.mb-2{ right:11%; top:57%; }
@keyframes driftTag{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-8px,0); } }
.section-spark{ position:relative; overflow:hidden; isolation:isolate; }
.section-spark::before{ content:""; position:absolute; right:0; top:0; width:12rem; height:12rem; border-radius:999px;
background: radial-gradient(circle, rgba(27,92,255,.12), transparent 68%); filter: blur(6px); transform: translate(28%,-32%); pointer-events:none; z-index:0; }
.section-spark::after{ content:""; position:absolute; right:1.2rem; top:1.2rem; width:7rem; height:7rem; opacity:.18; pointer-events:none; z-index:0;
background-image: radial-gradient(circle at center, rgba(255,255,255,.7) 1px, transparent 1.5px); background-size: 15px 15px; }
.section-kicker{ display:inline-flex; align-items:center; gap:.45rem; margin-bottom:.85rem; padding:.42rem .72rem; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); color:#a1a1aa; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; }
.section-kicker::before{ content:""; width:.45rem; height:.45rem; border-radius:999px; background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(27,92,255,.95)); box-shadow:0 0 0 4px rgba(59,130,246,.12); }
@media (max-width: 1023px){
.hero-scene{ inset:-.5rem 0 0 0; opacity:.95; }
.hero-note{ transform: scale(.96); }
.hero-note.note-1{ left:0; }
.hero-note.note-2{ right:0; }
.hero-note.note-3{ left:0; bottom:.5rem; }
.hero-note.note-4{ right:0; bottom:-.2rem; }
}
@media (max-width: 767px){
.hero-scene{ display:none; }
.section-spark::before,.section-spark::after{ opacity:.7; }
.section-kicker{ font-size:.68rem; padding:.38rem .64rem; }
}
/* Custom dropdown */
.dd { position: relative; }
.dd-btn { display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%; border-radius:.5rem; padding:.5rem .75rem; border:1px solid rgb(228 228 231); background: transparent; }
.dark .dd-btn { border-color: rgb(63 63 70); }
.dd-menu { position:absolute; top:calc(100% + .5rem); right:0; min-width: 12rem; background: white; color: #09090b; border: 1px solid rgb(228 228 231); border-radius:.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.08); transform-origin: top right; transform: scale(.97) translateY(-6px); opacity: 0; pointer-events: none; transition: transform .18s ease, opacity .18s ease; overflow:hidden; }
.dark .dd-menu { background: rgb(24 24 27); color: rgb(244 244 245); border-color: rgb(63 63 70); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.dd.open .dd-menu { transform: none; opacity: 1; pointer-events: auto; }
.dd-item { padding:.6rem .85rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.dd-item:hover { background: rgb(244 244 245); }
.dark .dd-item:hover { background: rgb(39 39 42); }
/* FAQ improvements */
.faq-item > .content { overflow: hidden; height: 0; transition: height .3s ease; }
.faq-item.open > .content { height: var(--target-h); }
.faq-item .chev { transition: transform .25s ease; }
.faq-item.open .chev { transform: rotate(180deg); }
/* Blog cards */
.post-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); }
/* Logos marquee */
.marquee { overflow: hidden; position: relative; }
.marquee-track { display:flex; gap:2.5rem; width: max-content; animation: marquee 18s linear infinite; }
@keyframes marquee { from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
/* Language chips – red tint */
.lang-chip { position: relative; display:inline-flex; align-items:center; justify-content:center; height:2rem; min-width:2.4rem; padding:0 .75rem; border-radius:999px; border:1px solid rgb(228 228 231); background: linear-gradient(180deg, rgba(27,92,255,.85), rgba(27,92,255,.85)); font-weight:700; letter-spacing:.02em; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.dark .lang-chip { border-color: rgb(63 63 70); background: linear-gradient(180deg, rgba(27,92,255,.85), rgba(27,92,255,.85)); }
.lang-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(27,92,255,.85); }
.lang-chip:active { transform: translateY(0); }
.lang-chip::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background: radial-gradient(60% 60% at 50% 0%, rgba(27,92,255,.85), transparent 60%); opacity:.0; transition: opacity .2s ease; }
.lang-chip:hover::after { opacity:1; }
/* Theme switch thumb uses RED */
#themeBtn { --thumb-size: 1.2rem; }
#thumb { width: var(--thumb-size); height: var(--thumb-size); box-shadow: 0 4px 14px rgba(0,0,0,.18); background: linear-gradient(135deg, rgba(27,92,255,.85), rgba(27,92,255,.85)); }
.dark #thumb { background: linear-gradient(135deg, rgba(27,92,255,.85), rgba(27,92,255,.85)); }
/* CTA-as-link styles (underline color) */
.link-underline { text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: var(--grad-solid); }
/* ===== CTA link ("Подробнее →" and similar) ===== */
.cta-link{
position: relative;
display: inline-flex;
align-items: center;
gap: .4rem;
color: rgb(var(--brand-500));
font-weight: 700;
letter-spacing: .01em;
transition: opacity .2s ease;
}
.cta-link::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-6px;
height:2px;
border-radius:999px;
background: rgba(var(--brand-500)/.9);
transform: scaleX(.15);
transform-origin: left;
transition: transform .25s ease;
}
.cta-link .cta-arrow{
display:inline-block;
transition: transform .25s ease;
will-change: transform;
}
a:hover .cta-link, .cta-link:hover{ opacity: .9; }
a:hover .cta-link::after, .cta-link:hover::after{ transform: scaleX(1); }
a:hover .cta-link .cta-arrow, .cta-link:hover .cta-arrow{ transform: translateX(5px); }
.cta-link:focus-visible{ outline:2px solid rgba(var(--brand-500)/.5); outline-offset: 3px; border-radius:.35rem; }
@media (prefers-reduced-motion: reduce){
.cta-link, .cta-link::after, .cta-link .cta-arrow{ transition: none !important; }
.cta-link::after{ transform: scaleX(1) !important; }
.cta-link .cta-arrow{ transform: none !important; }
}
/* ====== Floating Feedback Menu (FAB + Panel) ====== */
#fbFab { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; }
#fbPanel { position: fixed; right: 1rem; bottom: 5rem; width: 340px; max-width: calc(100vw - 2rem);
background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
color: #09090b; border: 1px solid rgb(228 228 231); border-radius: 1rem;
transform-origin: bottom right; transform: translateY(8px) scale(.98); opacity: 0; pointer-events: none;
transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
box-shadow: 0 14px 40px rgba(0,0,0,.15);
}
.dark #fbPanel { background: rgba(24,24,27,.9); color: rgb(244,244,245); border-color: rgb(63,63,70); box-shadow: 0 14px 50px rgba(0,0,0,.5); }
#fbPanel.open { transform: none; opacity: 1; pointer-events: auto; }
.chip { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(0,0,0,.08); padding:.5rem .75rem; border-radius:.75rem; font-size:.9rem; transition: transform .15s ease, box-shadow .25s ease; }
.chip:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(27,92,255,.12);}
.dark .chip { border-color: rgba(255,255,255,.15); }
/* Replace green gradients (legacy) */
.badge-grad, .logo-grad { background-image: linear-gradient(to bottom right, rgb(var(--brand-500)), rgb(var(--brand-700))); }
/* Language segmented control */
.lang-seg{ display:inline-flex; align-items:center; gap:.25rem; padding:.25rem; border-radius:999px; border:1px solid rgb(228 228 231); background: rgba(255,255,255,.6); backdrop-filter:saturate(140%) blur(6px); }
.dark .lang-seg{ border-color: rgb(63 63 70); background: rgba(24,24,27,.6); }
.lang-seg a{ position:relative; min-width:2.5rem; padding:.35rem .8rem; border-radius:999px; font-weight:700; letter-spacing:.02em; transition: color .2s ease, transform .15s ease; }
.lang-seg a:hover{ transform: translateY(-1px); }
.lang-seg a.active{ color:white; }
.lang-seg .pill{ position:absolute; z-index:0; top:4px; bottom:4px; left:4px; width:calc(50% - 6px); border-radius:999px; background: var(--grad); box-shadow: 0 8px 22px rgba(21, 135, 187,.25); transition: transform .25s ease; }
.lang-seg[data-act="UA"] .pill{ transform: translateX(0); }
.lang-seg[data-act="EN"] .pill{ transform: translateX(100%); }
.lang-seg a span{ position:relative; z-index:1; }
/* Language dropdown badge */
.lang-dd{ display:inline-flex; align-items:center; gap:.5rem; }
.lang-badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border-radius:.75rem;
border:1px solid rgb(228 228 231); background: rgba(255,255,255,.65); backdrop-filter: saturate(140%) blur(6px);
font-weight:700; letter-spacing:.02em; }
.dark .lang-badge{ border-color: rgb(63 63 70); background: rgba(24,24,27,.65); }
.lang-ico{ width:1rem; height:1rem; border-radius:999px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,.05) 40%), linear-gradient(135deg, rgba(var(--brand-500)/1), rgba(var(--brand-700)/1)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.lang-code{ font-variant-numeric: tabular-nums; }
/* Language inline switch */
.lang-inline{ display:inline-flex; align-items:center; gap:.25rem; font-weight:800; letter-spacing:.02em; font-size:.85rem; }
.lang-inline a{ position:relative; padding:.15rem .12rem; border-radius:.3rem; transition: color .2s ease; }
.lang-inline a::after{
content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:999px;
background: var(--grad);
transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.lang-inline a:hover::after{ transform: scaleX(1); }
.lang-inline .sep{ opacity:.6; padding:0 .12rem; }
.lang-inline a.active{ color: rgb(var(--brand)); }
.dark .lang-inline a.active{ color: rgb(248 250 252); }
.lang-inline a:focus-visible{ outline: 2px solid rgba(var(--brand)/.5); outline-offset: 2px; border-radius:.35rem; }
/* ==============================
Mobile responsiveness helpers
============================== */
.mnav-btn{ display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:.9rem; border:1px solid rgba(255,255,255,.14); background: rgba(24,24,27,.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mnav-btn:active{ transform: scale(.98); }
.mnav-overlay{ position: fixed; inset: 0; z-index: 60; display:none; }
.mnav-overlay.open{ display:block; }
.mnav-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.mnav-sheet{ position:absolute; top:0; right:0; height:100%; width:min(92vw, 420px);
background: rgba(10,10,12,.92); color: rgb(244 244 245);
border-left: 1px solid rgba(255,255,255,.10);
box-shadow: -20px 0 50px rgba(0,0,0,.55);
padding: 1rem; overflow:auto;
transform: translateX(105%);
transition: transform .22s ease;
}
.mnav-overlay.open .mnav-sheet{ transform: translateX(0); }
.mnav-title{ font-family: "Unbounded","Nunito",ui-sans-serif,system-ui; font-weight:700; letter-spacing:.01em; }
.mnav-links a{ display:flex; align-items:center; justify-content:space-between; padding:.9rem .85rem; border-radius:1rem; border:1px solid rgba(255,255,255,.10); background: rgba(24,24,27,.38); }
.mnav-links a:active{ transform: scale(.99); }
/* Make hero preview less intrusive on phones */
@media (max-width: 768px){
.heroPreviewBox{ display:none !important; }
}
/* Avoid horizontal scrolling on small screens */
body{ overflow-x:hidden; }
:root{
--btn-glow: 0 0 0 1px rgba(var(--brand)/.22), 0 14px 36px rgba(0,0,0,.30), 0 0 44px rgba(var(--brand)/.18);
--pat-opacity: .12;
--stripe-alpha1: .16;
--stripe-alpha2: .08;
--stripe-w1: 2px;
--stripe-gap1: 22px;
--stripe-w2: 1px;
--stripe-gap2: 8px;
}
/* NOTE: Removed invalid selectors (.::after / .dark.::after) that could break CSS parsing in some browsers.
Pattern overlay is handled ниже через body.bg-pattern::after */
/* === Smooth anchor scrolling + offset for sticky header === */
html { scroll-behavior: auto; }
/* Account for sticky header (~64-80px) so anchors aren't hidden */
section[id], [id^="section-"] { scroll-margin-top: 88px; }
/* === Fix for plus/minus hover === */
.qty-btn { background: rgb(244 244 245); } /* zinc-100 */
.dark .qty-btn { background: rgb(39 39 42); } /* zinc-800 */
.qty-btn.hovered { background: rgb(228 228 231); } /* zinc-200 */
.dark .qty-btn.hovered { background: rgb(63 63 70); } /* zinc-700 */
h2::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
height: 3px;
width: 100%;
background: var(--grad);
border-radius: 999px;
transform-origin: left;
transform: scaleX(.2);
transition: transform .35s ease;
}
h2:hover::after { transform: scaleX(1); }
/* === Animated underline for section titles === */
h2 {
position: relative;
display: inline-block;
}
h2::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
height: 3px;
width: 100%;
background: var(--grad);
border-radius: 999px;
transform-origin: left;
transform: scaleX(.2);
transition: transform .35s ease;
}
h2:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.nav-link::after, h2::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
height: 3px;
width: 100%;
background: var(--grad);
border-radius: 999px;
transform-origin: left;
transform: scaleX(.2);
transition: transform .35s ease;
}
h2:hover::after { transform: scaleX(1); }
}
/* === Patch v2025-11-12: Buttons polish === */
.btn { border-radius: .75rem; }
.btn:focus-visible { outline: 2px solid rgba(27,92,255,.85); outline-offset: 2px; }
.btn-outline { backdrop-filter: saturate(140%); }
.btn-outline:hover { background: var(--grad); color: var(--on-grad); border-color: transparent; }
/* Consistent glow variant on hover */
.btn-glow:hover { box-shadow: 0 10px 30px rgba(27,92,255,.85), 0 0 0 1px rgba(27,92,255,.85) inset; }
/* === Patch v2025-11-12C: Scoped bottom-up fill just for /* === .btn-fillY (hover fill animation) === */
.btn-fillY{
position: relative;
overflow: hidden;
isolation: isolate;
transition: color .35s ease, border-color .35s ease;
}
.btn-fillY .btn-label{ position: relative; z-index: 1; }
/* the filling layer */
.btn-fillY::after{
content:"";
position:absolute;
inset:0;
background-image: var(--grad);
transform: translateY(100%);
transition: transform .45s cubic-bezier(.22,.61,.36,1);
z-index:0;
pointer-events:none;
}
/* animate fill */
.btn-fillY:hover::after{ transform: translateY(0); }
/* text color when filled */
.btn-fillY:hover{ color: var(--on-grad); }
/* outline + fill combo: keep background transparent so animation is visible */
.btn-outline{ background: transparent; }
.btn-outline:hover{ background: transparent; }
.btn-fillY.btn-outline:hover{border-color: rgba(var(--brand)/.55); box-shadow: var(--btn-glow); color: var(--on-grad);}
/* === Patch v2025-11-12E: Smooth hover lift for .btn === */
.btn {
transition: transform .28s ease, box-shadow .28s ease, color .3s ease, border-color .3s ease;
}
/* === Patch v2025-11-12M: Clean focus style for calculator (dropdown only) === */
#calculator .dd-btn,
#calculator select {
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.02);
border-radius: .75rem;
transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
#calculator .dd-btn:hover,
#calculator select:hover {
border-color: rgba(255,255,255,0.22);
background: rgba(255,255,255,0.05);
}
#calculator .dd-btn:focus,
#calculator select:focus {
outline: none;
border-color: var(--grad-solid);
box-shadow: 0 0 8px rgba(27,92,255,.85), inset 0 0 4px rgba(27,92,255,.85);
background: rgba(255,255,255,0.06);
}
/* ---- */
/* Убираем стандартные стрелки у input[type=number]/text для qty */
#qty::-webkit-outer-spin-button,
#qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
#qty[type=text] {
-moz-appearance: textfield;
}
/* ---- */
/* === Plus/Minus hover FIX (v3 clean) === */
.qty-btn {
background: rgb(244 244 245); /* zinc-100 */
transition: background 0.15s ease;
}
.dark .qty-btn { background: rgb(39 39 42); /* zinc-800 */ }
.qty-btn.hovered {
background: rgb(228 228 231); /* zinc-200 */
}
.dark .qty-btn.hovered {
background: rgb(63 63 70); /* zinc-700 */
}
.qty-btn:focus-visible {
outline: none;
}
/* ---- */
/* Fix dropdown base state inside contact form */
#contact .dd-menu {
transform: translateY(-6px);
opacity: 0;
pointer-events: none;
}
#contact .dd.open .dd-menu {
transform: none;
opacity: 1;
pointer-events: auto;
}
#contact #dd-contact-form { position: relative; z-index: 30; }
/* ---- */
/* --- Contact dropdown: fade-only animation and close behavior --- */
#contact #dd-contact-form { position: relative; z-index: 40; }
#contact .dd-menu {
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease;
}
#contact .dd.open .dd-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* --- Force red theme accents in contact form (override emerald) --- */
#contact input:focus,
#contact textarea:focus,
#contact .dd-btn:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(var(--brand-500) / 0.35); /* Brand 500 */
border-color: rgba(27,92,255,.85);
}
/* Optional: hover bg for items */
#contact .dd-item { transition: background .15s ease; }
#contact .dd-item:hover { background: rgba(27,92,255,.85); } /* subtle red tint */
/* ---- */
/* Prevent text selection inside dropdown items */
#contact .dd-item {
user-select: none;
-webkit-user-select: none;
}
/* Fade animation and red theme are already included from previous step */
/* ---- */
/* Ensure ONLY the .open class controls visibility; ignore :focus-within */
#contact .dd:focus-within .dd-menu {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(-6px) !important;
}
#contact .dd.open:focus-within .dd-menu {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
/* ---- */
/* Calculator dropdown fixes */
#calculator .dd-menu {
opacity: 0;
pointer-events: none;
transform: translateY(-6px);
transition: opacity .18s ease, transform .18s ease;
}
#calculator .dd.open .dd-menu {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
/* neutralize focus-within keeping menu open */
#calculator .dd:focus-within .dd-menu {
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(-6px) !important;
}
#calculator .dd.open:focus-within .dd-menu {
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
/* Prevent text selection in items */
#calculator .dd-item { user-select: none; -webkit-user-select: none; }
/* ---- */
/* Calculator dropdown: align style with contact (red theme + hover) */
#calculator .dd-btn:focus { outline: none; }
#calculator .dd-item { transition: background .15s ease; }
#calculator .dd-item:hover { background: rgba(27,92,255,.85); }
/* ---- */
/* Quick contacts hover: red outline like dropdown + subtle bounce */
#contact .grid a {
transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease;
}
#contact .grid a:hover{border-color: rgba(var(--brand)/.55); box-shadow: 0 0 0 1px rgba(var(--brand)/.28), 0 12px 30px rgba(0,0,0,.28), 0 0 34px rgba(var(--brand)/.18); transform: translateY(-2px);}
#contact .grid a span.w-9 { transition: background-color .22s ease; }
#contact .grid a:hover span.w-9 { background-color: transparent; }
#contact .grid a svg { transition: opacity .22s ease; }
#contact .grid a:hover svg { opacity: 1; }
/* ---- */
/* === Footer sections: red outline like quick contacts, bounce; no default grey border visible === */
#footer .grid > div {
transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease, background-color .22s ease;
border: 1px solid transparent; /* убрали светло-серую обводку */
border-radius: .75rem;
padding: 1rem;
background: transparent;
}
#footer .grid > div:hover, #footer .grid > div:focus-within {
border-color: rgba(27,92,255,.85); /* красный акцент только при наведении/фокусе */
box-shadow: 0 0 0 2px rgba(27,92,255,.85);
transform: translateY(-2px);
}
/* список оплат (если добавишь .pay-accept) */
#footer .pay-accept { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; align-items:center; }
#footer .pay-accept .badge {
display:inline-flex; align-items:center; gap:.4rem;
padding:.3rem .55rem; border:1px solid rgba(27,92,255,.85);
border-radius:.5rem; font-size:.8rem;
background: rgba(27,92,255,.85);
}
.dark #footer .pay-accept .badge { border-color: rgba(27,92,255,.85); background: rgba(27,92,255,.85); }
/* ---- */
/* === Patch: clean focus style ONLY for contact form === */
#contact input,
#contact textarea,
#contact select,
#contact .dd-btn {
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.02);
border-radius: .75rem;
transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
#contact input:hover,
#contact textarea:hover,
#contact select:hover,
#contact .dd-btn:hover {
border-color: rgba(255,255,255,0.22);
background: rgba(255,255,255,0.05);
}
#contact input:focus,
#contact textarea:focus,
#contact select:focus,
#contact .dd-btn:focus {
outline: none;
border-color: var(--grad-solid);
box-shadow: 0 0 8px rgba(27,92,255,.85), inset 0 0 4px rgba(27,92,255,.85);
background: rgba(255,255,255,0.06);
}
/* ---- */
/* === Fixes: consistent brand color + working glow backgrounds + pattern overlay === */
:root{
--btn-glow: 0 0 0 1px rgba(var(--brand)/.22), 0 14px 36px rgba(0,0,0,.30), 0 0 44px rgba(var(--brand)/.18);
/* Use SPACE-separated RGB to support modern `rgb(var(--x) / a)` syntax */
--brand: 27 92 255;
--brand-500: 27 92 255;
--brand-600: 11 26 65;
--brand-700: 11 26 65;
}
body.bg-ornaments{
background:
radial-gradient(1200px 600px at 10% -10%, rgb(var(--brand-500) / 0.24), transparent 62%),
radial-gradient(900px 500px at 110% 10%, rgb(var(--brand-700) / 0.22), transparent 62%),
radial-gradient(700px 380px at 20% 45%, rgb(var(--brand-500) / 0.12), transparent 60%),
radial-gradient(700px 380px at 80% 55%, rgb(var(--brand-600) / 0.10), transparent 60%),
radial-gradient(800px 450px at 50% 85%, rgb(var(--brand-700) / 0.10), transparent 62%),
linear-gradient(#ffffff, #ffffff);
}
.dark body.bg-ornaments{
background:
radial-gradient(1200px 600px at 10% -10%, rgb(var(--brand-500) / 0.20), transparent 62%),
radial-gradient(900px 500px at 110% 10%, rgb(var(--brand-700) / 0.18), transparent 62%),
radial-gradient(700px 380px at 20% 45%, rgb(var(--brand-500) / 0.10), transparent 60%),
radial-gradient(700px 380px at 80% 55%, rgb(var(--brand-600) / 0.09), transparent 60%),
radial-gradient(800px 450px at 50% 85%, rgb(var(--brand-700) / 0.08), transparent 62%),
linear-gradient(#0b0b0c, #0b0b0c);
}
body.bg-pattern::after{
content:'';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
opacity: .035;
background-image: radial-gradient(rgb(var(--brand-500) / .20) 1px, transparent 1px);
background-size: 32px 32px;
mix-blend-mode: normal;
}
.dark body.bg-pattern::after{
opacity: .045;
mix-blend-mode: normal;
}
/* Keep overlays behind content */
body{ position: relative; isolation: isolate; }
body > *{ position: relative; z-index: 1; }
/* === Text clarity & contrast (fix for some displays/browsers) ===
On some Windows setups / browsers the combination of dark backgrounds + muted zinc shades
can look "слившимся". These tweaks improve readability without changing layout. */
html, body{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Slightly increase contrast of muted text in dark mode */
.dark .text-zinc-400{ color: rgb(212 212 216) !important; } /* zinc-300 */
.dark .text-zinc-500{ color: rgb(161 161 170) !important; } /* zinc-400 */
/* Fix: if any components keep light-theme text utilities in dark mode,
ensure they remain readable. (Common culprit: text-zinc-900 on a dark bg.) */
.dark .text-zinc-900{ color: rgb(244 244 245 / var(--tw-text-opacity, 1)) !important; } /* zinc-100 */
.dark .text-zinc-800{ color: rgb(228 228 231 / var(--tw-text-opacity, 1)) !important; } /* zinc-200 */
.dark .text-zinc-700{ color: rgb(212 212 216 / var(--tw-text-opacity, 1)) !important; } /* zinc-300 */
/* Replace leftover red focus rings with brand glow */
.form-card input:focus,
.form-card textarea:focus,
.form-card .dd-btn:focus{
outline: none;
border-color: rgb(var(--brand-500) / .70) !important;
box-shadow: 0 0 0 2px rgb(var(--brand-500) / .35) !important;
}
/* ---- */
[data-cl-footer] .grid > *{border-radius:16px;padding:10px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(120% 120% at 10% 0%, rgba(27,92,255,.08) 0%, rgba(11,26,65,0) 55%), rgba(255,255,255,.02);box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.18);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;} }
.lang-inline a.is-active{ opacity:1; text-decoration:none; }
.lang-inline a{ opacity:.75; }
.lang-inline a:hover{ opacity:1; }
/* ===== Custom color overrides (2026-01-29) ===== */
/* CTA: "Получить консультацию" */
/* CTA: "Получить консультацию" — unified with brand gradient */
.btn-consult{
background: var(--grad) !important;
border-color: rgba(var(--brand-500), 0.95) !important;
color: #fff !important;
box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(27,92,255,.25) inset;
}
.btn-consult:hover{
filter: brightness(1.05) saturate(1.05);
transform: translateY(-1px);
}
.btn-consult:active{ filter: brightness(0.98); }
/* Floating Action Button (FAB) gradient */
#fbFab{
background: var(--grad) !important;
border-color: transparent !important;
}
#fbFab:hover{
filter: brightness(1.05);
}
.btn-fillY{ z-index: 0; }
.btn-fillY > *, .btn-fillY .btn-label{ position: relative; z-index: 2; }
.btn-fillY::after{ z-index: 1; }
/* Ensure fill layer never covers label (works even when label is a text node) */
.btn-fillY{ position: relative; }
.btn-fillY::after{ z-index: 0; }
.btn-fillY .btn-label{ position: relative; z-index: 1; }
.card-col{ display:flex; flex-direction:column; height:100%; }
.card-cta{ margin-top:auto; }
/* Card CTA alignment: keep CTAs on the same baseline without stretching width */
.card-col{ display:flex; flex-direction:column; height:100%; align-items:flex-start; }
.card-col.text-center{ align-items:center; } /* keep centered cards centered */
.card-cta{ margin-top:auto; align-self:flex-start; }
.card-col.text-center .card-cta{ align-self:center; }
/* Ensure buttons don't stretch even if they become flex items */
.card-col .btn, .card-col .cta-link{ width:auto; }
/* === Ensure fill layer never covers text (hard override) === */
.btn-fillY{ position:relative; isolation:isolate; }
.btn-fillY::after{ z-index:0 !important; }
.btn-fillY .btn-label{ position:relative; z-index:1 !important; }
/* Blog header nav order to match main */
.blog-header nav ul{
display:flex;
gap:1.25rem;
}
.blog-header nav ul li{ order:0; }
.blog-header nav ul li.about{ order:4; } /* place 'О нас' like on main */
/* Wider glow on primary buttons */
.btn-primary:hover{ box-shadow: var(--btn-glow); }
/* === Normalize social/contact accent colors to gradient brand === */
.contact-links a,
.social-links a,
.footer a:hover,
.footer a:focus{
color: rgb(var(--brand)) !important;
}
.contact-links a::after,
.footer a::after{
background: linear-gradient(135deg,#0b1a41,#1b5cff) !important;
}
/* === Force replace legacy blue in contact cards === */
.contact-card,
.contact-card:hover,
.contact-card:focus,
.contact-card.active{
border-color: rgba(var(--brand)/.55) !important;
box-shadow: 0 0 0 1px rgba(var(--brand)/.35), 0 0 24px rgba(var(--brand)/.25) !important;
}
/* Icons inside contact cards */
.contact-card svg,
.contact-card i{
color: rgb(var(--brand)) !important;
fill: rgb(var(--brand)) !important;
}
/* === Footer navigation active/hover === */
.footer-nav a:hover,
.footer-nav a:focus,
.footer-nav a.active{
color: rgb(var(--brand)) !important;
}
.footer-nav a.active::before,
.footer-nav a:hover::before{
background: linear-gradient(135deg,#0b1a41,#1b5cff) !important;
}
#contact .grid a:focus-visible{outline:none; border-color: rgba(var(--brand)/.55); box-shadow: 0 0 0 1px rgba(var(--brand)/.28), 0 12px 30px rgba(0,0,0,.28), 0 0 34px rgba(var(--brand)/.18);}
/* === Footer cards: less monotone, more premium === */
[data-cl-footer] .grid > *{border-radius:16px;padding:10px;border:1px solid rgba(255,255,255,.08);background:radial-gradient(120% 120% at 10% 0%, rgba(27,92,255,.08) 0%, rgba(11,26,65,0) 55%), rgba(255,255,255,.02);box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 8px 22px rgba(0,0,0,.18);transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
[data-cl-footer] .grid > *:hover{transform:translateY(-2px);border-color: rgba(var(--brand)/.28);box-shadow: inset 0 0 0 1px rgba(var(--brand)/.12), 0 12px 32px rgba(0,0,0,.24), 0 0 42px rgba(var(--brand)/.14);}
/* Navigation links: gradient underline on hover */
[data-cl-footer] a{
position: relative;
text-decoration: none !important;
}
[data-cl-footer] a::after{
content:"";
position:absolute;
left:0; right:0; bottom:-3px;
height:2px;
background: var(--grad);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
opacity:.85;
}
[data-cl-footer] a:hover::after{ transform: scaleX(1); }
/* === Footer cards: gradient border instead of solid blue ring === */
[data-cl-footer] .grid > *{
position: relative;
border: 1px solid transparent;
border-radius: 16px;
padding: 10px;
background:
radial-gradient(120% 120% at 10% 0%, rgba(27,92,255,.10) 0%, rgba(11,26,65,0) 55%),
rgba(255,255,255,.02);
background-clip: padding-box;
}
[data-cl-footer] .grid > *::before{
content:"";
position:absolute;
inset:0;
border-radius: 16px;
padding: 1px; /* border thickness */
background: var(--grad); /* gradient border */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .35;
pointer-events:none;
}
[data-cl-footer] .grid > *:hover::before{
opacity: .55;
}
[data-cl-footer] .grid > *:hover{
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,0,0,.26), 0 0 46px rgba(27,92,255,.10);
transition: transform .25s ease, box-shadow .25s ease;
}
/* === Footer cards (stable): no mask/gradient border, just brand border + glow === */
[data-cl-footer] .grid > *{
border: 1px solid rgba(var(--brand)/.22) !important;
border-radius: 16px;
padding: 10px;
background:
radial-gradient(120% 120% at 10% 0%, rgba(27,92,255,.08) 0%, rgba(11,26,65,0) 55%),
rgba(255,255,255,.02) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.18) !important;
}
[data-cl-footer] .grid > *::before{ content:none !important; }
[data-cl-footer] .grid > *:hover{
border-color: rgba(var(--brand)/.38) !important;
box-shadow: inset 0 0 0 1px rgba(var(--brand)/.10), 0 14px 36px rgba(0,0,0,.26), 0 0 44px rgba(var(--brand)/.10) !important;
}
/* === Quick contacts modal: soften glow === */
.quick-contacts a,
.quick-contacts button{
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.25) !important;
}
.quick-contacts a:hover,
.quick-contacts button:hover{
box-shadow: inset 0 0 0 1px rgba(var(--brand)/.18), 0 8px 22px rgba(0,0,0,.28) !important;
}
.quick-contacts a.active{
box-shadow: inset 0 0 0 1px rgba(var(--brand)/.22), 0 8px 24px rgba(0,0,0,.28) !important;
}
/* === FAB: unify shadow with blog version === */
/* default (home, other pages) */
.fab{
box-shadow: 0 8px 22px rgba(0,0,0,.28), 0 0 28px rgba(var(--brand)/.12) !important;
}
/* hover */
.fab:hover{
box-shadow: 0 12px 32px rgba(0,0,0,.32), 0 0 36px rgba(var(--brand)/.16) !important;
}
/* blog FAB already looks correct, keep it softer */
.blog .fab,
body[data-page="blog"] .fab{
box-shadow: 0 6px 18px rgba(0,0,0,.26), 0 0 22px rgba(var(--brand)/.10) !important;
}
.blog .fab:hover,
body[data-page="blog"] .fab:hover{
box-shadow: 0 10px 26px rgba(0,0,0,.30), 0 0 28px rgba(var(--brand)/.14) !important;
}
/* ===== Motion & micro-interactions (added) ===== */
html { scroll-behavior: auto; }
/* Gentle drifting background to make the page feel "alive" */
.bg-ornaments{
background-size: 100% 100%;
animation: none;
}
/* Subtle floating utility */
.floaty{ animation: floatUp 6.5s ease-in-out infinite; will-change: transform; }
.floaty-slow{ animation-duration: 9.5s; }
@keyframes floatUp{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-8px); }
}
/* Card / block hover lift (works site-wide) */
.card, .feature, .service, .blog-card, .price-card, .pricing-card, .panel, .box{
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover, .feature:hover, .service:hover, .blog-card:hover, .price-card:hover, .pricing-card:hover, .panel:hover, .box:hover{
transform: translateY(-4px);
box-shadow: 0 18px 44px rgba(0,0,0,.26), 0 0 40px rgba(var(--brand)/.10);
}
/* Button hover feel */
button, .btn, a.btn, .btn-consult{
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
button:hover, .btn:hover, a.btn:hover, .btn-consult:hover{
transform: translateY(-1px);
}
button:active, .btn:active, a.btn:active, .btn-consult:active{
transform: translateY(0px) scale(.99);
}
/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce){
html { scroll-behavior: auto; }
.bg-ornaments, .floaty, .floaty-slow{ animation: none !important; }
.card, .feature, .service, .blog-card, .price-card, .pricing-card, .panel, .box,
button, .btn, a.btn, .btn-consult{ transition: none !important; }
}
/* Text + number WOW animations (progressive enhancement) */
.txt-reveal { opacity: 1; transform: none; filter: none; }
html.js .txt-reveal {
opacity: 0;
transform: translateY(14px);
filter: blur(10px);
transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}
html.js .txt-revealed {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* Word stagger (opt-in with data-words="1") */
.words .word { display: inline-block; opacity: 1; transform: none; filter: none; }
html.js .words.txt-reveal .word {
opacity: 0;
transform: translateY(10px);
filter: blur(8px);
transition: opacity .55s ease, transform .55s ease, filter .55s ease;
transition-delay: calc(var(--w-i, 0) * 55ms);
}
html.js .words.txt-reveal.txt-revealed .word {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* ===== Grid card alignment + reliable hover lift ===== */
#servicesGrid > div{
display:flex;
flex-direction:column;
min-height:100%;
}
#servicesGrid > div .cta-link{
margin-top:auto;
align-self:flex-start;
}
#servicesGrid > div p{
margin-bottom:1rem;
}
#works .grid > *,
#briefs .grid > *,
#payment .grid > *{
transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
will-change: transform;
}
#works .grid > *:hover,
#briefs .grid > *:hover,
#payment .grid > *:hover{
transform: translateY(-4px);
box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
@media (prefers-reduced-motion: reduce){
#works .grid > *,
#briefs .grid > *,
#payment .grid > *,
#servicesGrid > div .cta-link,
#servicesGrid > div{
transition: none !important;
}
#works .grid > *:hover,
#briefs .grid > *:hover,
#payment .grid > *:hover{
transform:none;
box-shadow:none;
}
}
/* Equal-height card actions + stronger stable hover */
.hover-float{
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
.hover-float:hover{
transform: translate3d(0,-6px,0) !important;
}
#servicesGrid > .hover-float,
#briefs .hover-float,
#pricing .hover-float{
min-height: 100%;
}
#servicesGrid > .hover-float .cta-link{
align-self: flex-start;
}
#briefs .hover-float,
#pricing .hover-float{
justify-content: flex-start;
}
#briefs .hover-float .btn,
#pricing .hover-float .btn{
margin-top: auto !important;
}
#briefs .hover-float .btn{
align-self: center;
}
#pricing .hover-float .btn{
align-self: flex-start;
margin-top: 1.15rem !important;
}
#pricing .hover-float ul{
margin-bottom: .85rem;
}
/* === Main page: live hero glow (lightweight, no scroll lag) === */
@keyframes heroGlowFloatA {
0% { transform: translate3d(0,0,0) scale(1); opacity: .42; }
20% { transform: translate3d(26px,-14px,0) scale(1.08); opacity: .56; }
45% { transform: translate3d(12px,18px,0) scale(.94); opacity: .34; }
72% { transform: translate3d(-20px,8px,0) scale(1.06); opacity: .50; }
100% { transform: translate3d(0,0,0) scale(1); opacity: .42; }
}
@keyframes heroGlowFloatB {
0% { transform: translate3d(0,0,0) scale(1); opacity: .24; }
35% { transform: translate3d(-18px,16px,0) scale(1.12); opacity: .38; }
68% { transform: translate3d(18px,-10px,0) scale(.92); opacity: .20; }
100% { transform: translate3d(0,0,0) scale(1); opacity: .24; }
}
.live-glow,
.live-glow-2{
pointer-events:none;
will-change: transform, opacity;
mix-blend-mode: screen;
}
.live-glow{ animation: heroGlowFloatA 9s ease-in-out infinite; opacity:.82; mix-blend-mode:screen; }
.live-glow-2{ animation: heroGlowFloatB 11s ease-in-out infinite; opacity:.72; mix-blend-mode:screen; }
@media (prefers-reduced-motion: reduce){
.live-glow, .live-glow-2{ animation:none; opacity:.36; }
}
.hero-scene{ position:absolute; inset:-1.2rem -1rem -1rem -1rem; pointer-events:none; z-index:0; }
.hero-scene-grid{ position:absolute; inset:7% 1% 2% 4%; border-radius:2.2rem; opacity:.42;
background:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
radial-gradient(circle at 22% 16%, rgba(27,92,255,.22), transparent 32%),
radial-gradient(circle at 79% 69%, rgba(81,135,255,.18), transparent 30%);
background-size: 26px 26px, 26px 26px, auto, auto;
border:1px solid rgba(96,165,250,.18);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 30px 90px rgba(10,19,49,.28);
}
.hero-scene-ring,.hero-scene-ring::after{ position:absolute; border-radius:999px; border:1px solid rgba(96,165,250,.34); }
.hero-scene-ring{ width:23rem; height:23rem; right:6%; top:5%; box-shadow: inset 0 0 110px rgba(27,92,255,.11), 0 0 0 16px rgba(27,92,255,.03); }
.hero-scene-ring::after{ content:""; inset:2.25rem; border-color: rgba(147,197,253,.22); }
.hero-scene-node{ position:absolute; width:.85rem; height:.85rem; border-radius:999px; background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(27,92,255,.96)); box-shadow: 0 0 0 6px rgba(27,92,255,.11), 0 0 22px rgba(96,165,250,.3); }
.hero-scene-node.n1{ right:22%; top:16%; }
.hero-scene-node.n2{ right:11%; top:43%; }
.hero-scene-node.n3{ right:28%; top:69%; }
.hero-scene-line{ position:absolute; inset:0; }
.hero-scene-line path{ stroke: rgba(125,171,255,.42); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-dasharray:7 11; }
.hero-note{ position:absolute; min-width:12rem; max-width:14.5rem; padding:1rem 1.05rem; border-radius:1.15rem; border:1px solid rgba(255,255,255,.12);
background: linear-gradient(180deg, rgba(12,20,46,.86), rgba(12,17,37,.72)); box-shadow: 0 18px 48px rgba(7,12,27,.28), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter: blur(10px); }
.hero-note strong{ display:block; font-size:.73rem; line-height:1.1; letter-spacing:.18em; text-transform:uppercase; color: rgba(191,219,254,.9); margin-bottom:.5rem; }
.hero-note span{ display:block; font-size:.97rem; line-height:1.38; color:#f5f7ff; }
.hero-note em{ display:block; margin-top:.42rem; font-style:normal; font-size:.72rem; color: rgba(96,165,250,.96); }
.hero-note::before{ content:""; position:absolute; inset:auto auto 100% 1rem; width:2.8rem; height:2px; background: linear-gradient(90deg, rgba(27,92,255,.95), transparent); opacity:.88; }
.hero-note::after{ content:""; position:absolute; right:.9rem; top:.9rem; width:.45rem; height:.45rem; border-radius:999px; background: rgba(96,165,250,.95); box-shadow:0 0 0 5px rgba(96,165,250,.10); }
.hero-note.note-1{ left:-1.35rem; top:.4rem; animation: driftTag 8s ease-in-out infinite; }
.hero-note.note-2{ right:-1rem; top:2rem; animation: driftTag 9.2s ease-in-out infinite reverse; }
.hero-note.note-3{ left:.15rem; bottom:.9rem; animation: driftTag 7.6s ease-in-out infinite .4s; }
.hero-note.note-4{ right:.75rem; bottom:-.2rem; min-width:10.4rem; animation: driftTag 8.8s ease-in-out infinite reverse .6s; }
.hero-microbadge{ position:absolute; display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .82rem; border-radius:999px; border:1px solid rgba(255,255,255,.12);
background: rgba(11,18,38,.78); color:#eff6ff; font-size:.78rem; letter-spacing:.01em; box-shadow: 0 14px 30px rgba(5,10,24,.22); }
.hero-microbadge::before{ content:""; width:.48rem; height:.48rem; border-radius:999px; background: rgba(59,130,246,.95); box-shadow:0 0 0 4px rgba(59,130,246,.12); }
.hero-microbadge.mb-1{ left:9%; top:55%; }
.hero-microbadge.mb-2{ right:10%; top:58%; }
.hero-microbadge.mb-3{ left:24%; top:18%; }
.hero-microbadge.mb-4{ right:23%; top:78%; }
.hero-ambient-mark{ position:absolute; border-radius:999px; border:1px dashed rgba(96,165,250,.28); opacity:.55; }
.hero-ambient-mark.m1{ width:8rem; height:8rem; left:18%; top:10%; }
.hero-ambient-mark.m2{ width:5rem; height:5rem; right:31%; bottom:20%; }
@media (max-width: 1100px){
.hero-scene{ inset:-.6rem 0 0 0; opacity:.98; }
.hero-note{ transform: scale(.93); max-width:12rem; }
.hero-note.note-1{ left:0; }
.hero-note.note-2{ right:0; }
.hero-note.note-3{ left:0; bottom:.35rem; }
.hero-note.note-4{ right:0; bottom:-.2rem; }
}
@media (max-width: 860px){
.hero-note,.hero-microbadge,.hero-ambient-mark{ display:none; }
.hero-scene-grid{ inset:6% 2% 3% 2%; opacity:.34; }
.hero-scene-ring{ width:18rem; height:18rem; right:7%; top:10%; }
}
@media (max-width: 640px){
.hero-scene{ display:none; }
}