@font-face{
font-family: "Geist";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/geist-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family: "Geist";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/fonts/geist-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family: "Geist Fallback";
src: local("Arial"), local("ArialMT");
size-adjust: 100.5%;
ascent-override: 100.5%;
descent-override: 29.9%;
line-gap-override: 0%;
}
:root{
--wash-rgb: 232, 255, 246;
--wash2-rgb: 238, 246, 242;
--mint-rgb: 0, 245, 173;
--ink-rgb: 14, 21, 19;
--shadow-rgb: 0, 0, 0;
--bg: #0e1513;
--bg-2: #111a17;
--panel: #151c1a;
--panel-2: #1a2320;
--shell: rgba(var(--wash-rgb), 0.035);
--line: rgba(var(--wash-rgb), 0.075);
--line-strong: rgba(var(--wash-rgb), 0.15);
--text: #ffffff;
--text-soft: rgba(255, 255, 255, 0.85);
--muted: #a2b5af;
--faint: #7d918a;
--err: #ff8f8f;
--err-rgb: 255, 143, 143;
color-scheme: dark;
--mint: #00f5ad;
--mint-fill: #00f5ad;
--grad-ink: var(--grad);
--mint-bright: #3dffc4;
--cyan: #24d5db;
--mint-ink: #05201a;
--mint-soft: rgba(var(--mint-rgb), 0.1);
--mint-line: rgba(var(--mint-rgb), 0.35);
--grad: linear-gradient(90deg, #24d5db 0%, #04f0ae 100%);
--grad-soft: linear-gradient(90deg, rgba(36, 213, 219, 0.14), rgba(4, 240, 174, 0.14));
--glow: rgba(10, 168, 140, 0.5);
--glow-deep: rgba(20, 96, 88, 0.55);
--chip: #2c3331;
--chip-text: #d3ded9;
--toggle-line: rgba(232, 255, 246, 0.35);
--glass-tint: rgba(14, 21, 19, 0.55);
--glass-panel: rgba(14, 21, 19, 0.97);
--glass-blur: 12px;
--glass-tame: 0.82;
--glass-sheen: rgba(232, 255, 246, 0.1);
--glass-edge: rgba(255, 255, 255, 0.14);
--glass-under: rgba(0, 0, 0, 0.42);
--glass-rim: rgba(255, 255, 255, 0.24);
--glass-rim2: rgba(120, 255, 220, 0.22);
--toggle-ring: rgba(255, 255, 255, 0.2);
--blue: #4fd8e4;
--blue-soft: rgba(79, 216, 228, 0.12);
--amber: #f2c46d;
--amber-soft: rgba(242, 196, 109, 0.12);
--font-display: "Geist", "Geist Fallback", "Segoe UI", -apple-system, sans-serif;
--font-body: "Geist", "Geist Fallback", "Segoe UI", -apple-system, sans-serif;
--font-mono: "Geist", "Geist Fallback", "Segoe UI", -apple-system, sans-serif;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--r-shell: 1.75rem;
--r-inner: calc(1.75rem - 0.5rem);
--container: 1200px;
}
@media (prefers-color-scheme: light){
html:not(.theme-dark){
color-scheme: light;
--bg: #e8ece9;
--bg-2: #e1e6e3;
--panel: #f6f8f7;
--panel-2: #edf1ef;
--wash-rgb: 16, 32, 27;
--wash2-rgb: 16, 32, 27;
--ink-rgb: 236, 240, 237;
--mint-rgb: 0, 150, 110;
--shadow-rgb: 22, 42, 36;
--shell: rgba(var(--wash-rgb), 0.028);
--line: rgba(var(--wash-rgb), 0.15);
--line-strong: rgba(var(--wash-rgb), 0.34);
--text: #101a17;
--text-soft: rgba(16, 32, 27, 0.85);
--muted: #45544e;
--faint: #55645d;
--err: #b3261e;
--err-rgb: 179, 38, 30;
--mint: #00654b;
--mint-fill: #00e3a0;
--mint-bright: #009e73;
--cyan: #0c828c;
--mint-ink: #04231b;
--mint-soft: rgba(var(--mint-rgb), 0.12);
--mint-line: rgba(var(--mint-rgb), 0.38);
--grad-ink: linear-gradient(90deg, #0b7f86 0%, #00794f 100%);
--grad-soft: linear-gradient(90deg, rgba(12, 130, 140, 0.1), rgba(0, 150, 110, 0.1));
--glow: rgba(0, 190, 145, 0.2);
--glow-deep: rgba(18, 110, 92, 0.16);
--chip: #d5ded9;
--chip-text: rgba(16, 32, 27, 0.84);
--toggle-line: rgba(16, 32, 27, 0.5);
--glass-tint: rgba(246, 249, 247, 0.5);
--glass-panel: rgba(246, 249, 247, 0.97);
--glass-blur: 12px;
--glass-tame: 1.14;
--glass-sheen: rgba(255, 255, 255, 0.5);
--glass-edge: rgba(255, 255, 255, 0.5);
--glass-under: rgba(16, 32, 27, 0.13);
--glass-rim: rgba(255, 255, 255, 0.5);
--glass-rim2: rgba(0, 140, 105, 0.16);
--toggle-ring: rgba(16, 32, 27, 0.22);
--blue: #09656e;
--blue-soft: rgba(9, 101, 110, 0.12);
--amber: #6f4c0c;
--amber-soft: rgba(111, 76, 12, 0.14);
}
}
html.theme-light{
color-scheme: light;
--bg: #e8ece9;
--bg-2: #e1e6e3;
--panel: #f6f8f7;
--panel-2: #edf1ef;
--wash-rgb: 16, 32, 27;
--wash2-rgb: 16, 32, 27;
--ink-rgb: 236, 240, 237;
--mint-rgb: 0, 150, 110;
--shadow-rgb: 22, 42, 36;
--shell: rgba(var(--wash-rgb), 0.028);
--line: rgba(var(--wash-rgb), 0.15);
--line-strong: rgba(var(--wash-rgb), 0.34);
--text: #101a17;
--text-soft: rgba(16, 32, 27, 0.85);
--muted: #45544e;
--faint: #55645d;
--err: #b3261e;
--err-rgb: 179, 38, 30;
--mint: #00654b;
--mint-fill: #00e3a0;
--mint-bright: #009e73;
--cyan: #0c828c;
--mint-ink: #04231b;
--mint-soft: rgba(var(--mint-rgb), 0.12);
--mint-line: rgba(var(--mint-rgb), 0.38);
--grad-ink: linear-gradient(90deg, #0b7f86 0%, #00794f 100%);
--grad-soft: linear-gradient(90deg, rgba(12, 130, 140, 0.1), rgba(0, 150, 110, 0.1));
--glow: rgba(0, 190, 145, 0.2);
--glow-deep: rgba(18, 110, 92, 0.16);
--chip: #d5ded9;
--chip-text: rgba(16, 32, 27, 0.84);
--toggle-line: rgba(16, 32, 27, 0.5);
--glass-tint: rgba(246, 249, 247, 0.5);
--glass-panel: rgba(246, 249, 247, 0.97);
--glass-blur: 12px;
--glass-tame: 1.14;
--glass-sheen: rgba(255, 255, 255, 0.5);
--glass-edge: rgba(255, 255, 255, 0.5);
--glass-under: rgba(16, 32, 27, 0.13);
--glass-rim: rgba(255, 255, 255, 0.5);
--glass-rim2: rgba(0, 140, 105, 0.16);
--toggle-ring: rgba(16, 32, 27, 0.22);
--blue: #09656e;
--blue-soft: rgba(9, 101, 110, 0.12);
--amber: #6f4c0c;
--amber-soft: rgba(111, 76, 12, 0.14);
}
*,*::before,*::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
html.lenis,html.lenis body{ height: auto; }
html.lenis{ scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped{ overflow: clip; }
.lenis.lenis-smooth iframe{ pointer-events: none; }
.lenis [data-lenis-prevent]{ overscroll-behavior: contain; }
body{
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img,svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
.sr-only{
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.svg-sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
h1,h2,h3,h4{
font-family: var(--font-display);
font-weight: 600;
line-height: 1.12;
margin: 0;
letter-spacing: -0.02em;
text-wrap: balance;
}
p{ margin: 0; }
::selection{ background: var(--mint-fill); color: var(--mint-ink); }
.container{
width: min(var(--container), calc(100% - 2.5rem));
margin-inline: auto;
}
.accent{ color: var(--mint); }
.reveal{
transition:
opacity 0.95s var(--ease-out),
transform 0.95s var(--ease-out),
filter 0.95s var(--ease-out);
transition-delay: var(--d, 0ms);
}
:where(html.js) .reveal{
opacity: 0;
transform: translateY(46px) scale(0.97);
filter: blur(10px);
}
:where(html.js) :is(.subhero-inner, .sv-head, .bp-head) .reveal{
animation: sp-reveal 0.95s var(--ease-out) both;
animation-delay: var(--d, 0ms);
}
@keyframes sp-reveal{
from { opacity: 0; transform: translateY(46px) scale(0.97); filter: blur(10px); }
to { opacity: 1; transform: none; filter: none; }
}
@keyframes sp-reveal-fade{
from { opacity: 0; }
to { opacity: 1; }
}
@media print{
.reveal{ opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}
.reveal.in{
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: sp-vt-out 0.2s var(--ease-out) both; }
::view-transition-new(root){ animation: sp-vt-in 0.38s var(--ease-out) both; }
@keyframes sp-vt-out{ to { opacity: 0; } }
@keyframes sp-vt-in{ from { opacity: 0; } }
html.vt-theme::view-transition-old(root){ animation: none; }
html.vt-theme::view-transition-new(root){ animation: sp-vt-krug 0.65s var(--ease-in-out) both; }
@keyframes sp-vt-krug{
from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); }
to { clip-path: circle(var(--vt-r, 150%) at var(--vt-x, 50%) var(--vt-y, 50%)); }
}
.sp-w-mask{ padding-bottom: 0.14em; margin-bottom: -0.14em; }
.btn.is-magnetic{ transition-property: background-color, background-position, border-color, box-shadow; }
.eyebrow{
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.42rem 0.95rem;
border: 1px solid var(--line-strong);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
background: var(--shell);
}
.eyebrow .dot{
position: relative;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mint-fill);
box-shadow: 0 0 10px var(--mint-fill);
flex: none;
}
.eyebrow .dot::before,.eyebrow .dot::after,.kt-status.open .kt-dot::before,.kt-status.open .kt-dot::after,.ft-new-dot::before,.ft-new-dot::after{
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--mint-fill);
pointer-events: none;
}
.eyebrow .dot::before,.eyebrow .dot::after{
animation: dot-ring-sm 1.8s cubic-bezier(0.16, 0.72, 0.36, 1) infinite;
}
.kt-status.open .kt-dot::before,.kt-status.open .kt-dot::after,.ft-new-dot::before,.ft-new-dot::after{
animation: dot-ring-lg 1.8s cubic-bezier(0.16, 0.72, 0.36, 1) infinite;
}
.eyebrow .dot::after,.kt-status.open .kt-dot::after,.ft-new-dot::after{ animation-delay: -0.9s; }
@keyframes dot-ring-sm{
0%   { transform: scale(1); opacity: 0.75; }
100% { transform: scale(3.2); opacity: 0; }
}
@keyframes dot-ring-lg{
0%   { transform: scale(1); opacity: 0.75; }
100% { transform: scale(4); opacity: 0; }
}
.tag{
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.3rem 0.65rem;
border-radius: 6px;
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid transparent;
color: var(--chip-text);
background: var(--chip);
}
.tag--mint{ color: var(--mint);  border-color: var(--mint-line); background: var(--mint-soft); }
.tag--blue{ color: var(--blue);  border-color: rgba(79,216,228,.3); background: var(--blue-soft); }
.tag--amber{ color: var(--amber); border-color: rgba(242,196,109,.3); background: var(--amber-soft); }
.btn{
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.55rem 0.55rem 1.5rem;
border-radius: 999px;
border: 1px solid transparent;
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
white-space: nowrap;
transition:
transform 0.45s var(--ease-out),
background-color 0.45s var(--ease-out),
border-color 0.45s var(--ease-out),
box-shadow 0.45s var(--ease-out);
}
.btn:active{ transform: scale(0.98); }
.btn .btn-orb{
width: 2.1rem;
height: 2.1rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
transition: transform 0.45s var(--ease-out);
}
.btn .btn-orb svg{ width: 0.85rem; height: 0.85rem; }
.btn--primary{
background-image: var(--grad);
background-size: 140% 100%;
background-position: 0% 0;
color: var(--mint-ink);
box-shadow: 0 0 0 0 rgba(4, 240, 174, 0);
transition:
transform 0.45s var(--ease-out),
background-position 0.7s var(--ease-out),
box-shadow 0.45s var(--ease-out);
}
.btn--primary .btn-orb{ background: rgba(5, 32, 26, 0.16); }
.btn--ghost{
border-color: var(--line-strong);
color: var(--text);
background: transparent;
}
.btn--ghost .btn-orb{ background: rgba(var(--wash2-rgb), 0.08); }
@media (hover: hover) and (pointer: fine){
.btn--primary:hover{
background-position: 100% 0;
box-shadow: 0 10px 44px -10px rgba(4, 240, 174, 0.5);
}
.btn--ghost:hover{
border-color: var(--mint-line);
background: var(--mint-soft);
}
.btn:hover .btn-orb{ transform: translate(3px, -2px); }
}
.nav-wrap{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 40;
padding: 0.9rem 1.25rem 0;
pointer-events: none;
}
.nav{
position: relative;
pointer-events: auto;
width: min(var(--container), 100%);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0.6rem 0.55rem 1.35rem;
border-radius: 999px;
border: 1px solid transparent;
transition:
background-color 0.6s var(--ease-out),
border-color 0.6s var(--ease-out),
box-shadow 0.6s var(--ease-out);
}
.nav.scrolled{
background-color: var(--glass-tint);
background-image:
linear-gradient(135deg, var(--glass-sheen) 0%, transparent 34%),
linear-gradient(180deg, var(--glass-sheen) 0%, transparent 60%);
border-color: transparent;
backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(var(--glass-tame));
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(var(--glass-tame));
box-shadow:
inset 0 1px 0 var(--glass-edge),
inset 0 -1px 0 var(--glass-under),
0 18px 52px -22px rgba(var(--shadow-rgb), 0.9),
0 2px 8px -5px rgba(var(--shadow-rgb), 0.55);
}
.nav.scrolled::before{
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(148deg,
var(--glass-rim) 0%,
transparent 30%,
transparent 68%,
var(--glass-rim2) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.nav.scrolled::after{
content: "";
position: absolute;
inset: 1px 1px 55% 1px;
z-index: 0;
border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
background: linear-gradient(180deg, var(--glass-sheen) 0%, transparent 100%);
opacity: 0.55;
pointer-events: none;
}
.nav > *{ position: relative; z-index: 1; }
.brand{
position: relative;
z-index: 60;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.brand-word{ white-space: nowrap; }
.brand-mark{
height: 1.75em;
width: auto;
flex: none;
transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}
.brand-grad{
background-image: var(--grad-ink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
display: inline-block;
vertical-align: baseline;
transform: translateZ(0);
}
@media (hover: hover) and (pointer: fine){
.brand:hover .brand-mark{
transform: translateY(-2px) rotate(-4deg) scale(1.06);
filter: drop-shadow(0 0 12px rgba(var(--mint-rgb), 0.55));
}
}
.nav-links{
display: flex;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.has-sub{ position: relative; }
.nav-link{
display: inline-flex;
align-items: center;
padding: 0.5rem 0.95rem;
border-radius: 999px;
font-size: 0.92rem;
font-weight: 500;
white-space: nowrap;
color: var(--muted);
border: 1px solid transparent;
transition:
color 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
background-color 0.4s var(--ease-out);
}
.nav-link.active{
color: var(--text);
border-color: var(--line);
background: var(--shell);
}
@media (hover: hover) and (pointer: fine){
.nav-link:hover{
color: var(--text);
border-color: var(--line);
background: var(--shell);
}
}
.plus{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.9rem;
height: 0.9rem;
margin-left: 0.4rem;
transition: transform 0.35s var(--ease-out);
}
.plus i{
position: absolute;
border-radius: 999px;
background: currentColor;
transition: background-color 0.35s var(--ease-out);
}
.plus i:first-child{ width: 0.9rem; height: 2px; }
.plus i:last-child{ width: 2px; height: 0.9rem; }
.has-sub.open .plus{ transform: rotate(135deg); }
.has-sub.open .nav-link{
color: var(--text);
border-color: var(--line);
background: var(--shell);
}
.has-sub.open .plus i{ background: var(--mint-fill); }
.dropdown{
position: absolute;
left: 50%;
top: 100%;
z-index: 50;
padding-top: 1rem;
transform: translateX(-50%) translateY(-4px);
opacity: 0;
pointer-events: none;
transition:
opacity 0.25s var(--ease-out),
transform 0.25s var(--ease-out);
}
.has-sub.open .dropdown{
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.dd-panel{
position: relative;
width: 18.5rem;
padding: 0.5rem;
border: 1px solid transparent;
border-radius: 1.1rem;
background-color: var(--glass-panel);
background-image:
linear-gradient(135deg, var(--glass-sheen) 0%, transparent 30%),
linear-gradient(180deg, var(--glass-sheen) 0%, transparent 45%);
backdrop-filter: blur(18px) saturate(180%) brightness(var(--glass-tame));
-webkit-backdrop-filter: blur(18px) saturate(180%) brightness(var(--glass-tame));
box-shadow:
inset 0 1px 0 var(--glass-edge),
inset 0 -1px 0 var(--glass-under),
0 26px 60px -24px rgba(var(--shadow-rgb), 0.85),
0 3px 10px -6px rgba(var(--shadow-rgb), 0.5);
}
.dd-panel::before{
content: "";
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(148deg,
var(--glass-rim) 0%,
transparent 32%,
transparent 68%,
var(--glass-rim2) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.dd-panel > *{ position: relative; z-index: 1; }
.dd-panel > a{
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.65rem 0.75rem;
border-radius: 0.7rem;
font-size: 0.92rem;
color: var(--muted);
transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.dd-panel > a > span{
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-width: 0;
}
.ico .f{ fill: currentColor; opacity: 0.2; stroke: none; }
.ico .s{
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.ico .d{ fill: currentColor; stroke: none; }
.dd-ico{
width: 1.2rem;
height: 1.2rem;
flex: none;
color: var(--mint);
transition: transform 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.dd-panel > a:hover .dd-ico{ transform: scale(1.12); }
.dd-panel > a:hover .ico .f{ opacity: 0.34; }
}
.dd-arrow{ width: 0.9rem; height: 0.9rem; flex: none; opacity: 0.45; }
@media (hover: hover) and (pointer: fine){
.dd-panel > a:hover{ background: var(--panel-2); color: var(--text); }
}
.dd-sep{
display: block;
height: 1px;
margin: 0.3rem 0.25rem;
background: var(--line);
}
.dd-all{
color: var(--mint) !important;
font-weight: 600;
}
.dd-all .dd-arrow{ opacity: 1; }
.dd-panel--cols{
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row dense;
column-gap: 0.25rem;
width: 32rem;
}
.dd-panel--cols > .dd-c1{ grid-column: 1; }
.dd-panel--cols > .dd-c2{ grid-column: 2; }
.dd-panel--cols > .dd-c3{ grid-column: 3; }
.dd-panel--cols > .dd-sep,.dd-panel--cols > .dd-all{ grid-column: 1 / -1; }
.dd-panel--cols3{
grid-template-columns: repeat(3, max-content);
width: max-content;
}
.dropdown--start{ left: -0.75rem; transform: translateY(-4px); }
.has-sub.open .dropdown--start{ transform: translateY(0); }
@media (max-width: 1020px){
.dd-panel--cols3{ grid-template-columns: repeat(2, max-content); }
.dd-panel--cols3 > .dd-c3{ grid-column: 2; }
}
.dd-h{
padding: 0.55rem 0.75rem 0.3rem;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.nav-cta{ display: flex; align-items: center; gap: 0.5rem; }
.nav-theme,.nav-lang,.nav-call{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
flex: none;
padding: 0;
border: 1px solid var(--toggle-ring);
border-radius: 50%;
color: var(--text);
cursor: pointer;
background-color: var(--glass-tint);
background-image: linear-gradient(160deg, var(--glass-sheen) 0%, transparent 52%);
backdrop-filter: blur(6px) saturate(160%);
-webkit-backdrop-filter: blur(6px) saturate(160%);
box-shadow:
inset 0 1px 0 var(--glass-edge),
inset 0 -1px 0 var(--glass-under),
0 2px 6px -3px rgba(var(--shadow-rgb), 0.5);
transition:
color 0.4s var(--ease-out),
background-color 0.4s var(--ease-out),
box-shadow 0.4s var(--ease-out);
}
.nav-theme::before,.nav-lang::before,.nav-call::before{
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
padding: 1px;
background: linear-gradient(148deg,
var(--glass-rim) 0%,
transparent 34%,
transparent 66%,
var(--glass-rim2) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
pointer-events: none;
}
.nav-theme svg{ position: relative; }
.nav-theme svg{ width: 1.15rem; height: 1.15rem; }
.nav-theme[aria-pressed="true"]{ color: var(--mint); }
.nav-theme[aria-pressed="true"]::before{
background: linear-gradient(148deg, var(--glass-rim) 0%, transparent 34%, transparent 60%, var(--mint-line) 100%);
}
@media (hover: hover) and (pointer: fine){
.nav-theme:hover{ color: var(--text); border-color: var(--line-strong); background: var(--shell); }
}
.nav-quote{
padding: 0.45rem 0.45rem 0.45rem 1.2rem;
font-size: 0.88rem;
}
.nav-quote .btn-orb{ width: 1.85rem; height: 1.85rem; }
.nav-call{ display: none; color: var(--mint); }
.nav-call svg{ position: relative; width: 1.1rem; height: 1.1rem; }
.nq-short{ display: none; }
.burger{
display: none;
position: relative;
z-index: 60;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--shell);
cursor: pointer;
transition: border-color 0.4s var(--ease-out);
}
.burger span{
position: absolute;
left: 50%;
top: 50%;
width: 1.1rem;
height: 1.5px;
border-radius: 999px;
background: var(--text);
transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out);
}
.burger span:nth-child(1){ transform: translate(-50%, calc(-50% - 4px)); }
.burger span:nth-child(2){ transform: translate(-50%, calc(-50% + 4px)); }
.burger.open span:nth-child(1){ transform: translate(-50%, -50%) rotate(45deg); }
.burger.open span:nth-child(2){ transform: translate(-50%, -50%) rotate(-45deg); }
@media (hover: hover) and (pointer: fine){
.burger:hover{ border-color: var(--mint-line); }
.burger:hover span{ background: var(--mint-fill); }
}
.mobile-menu{
position: fixed;
inset: 0;
z-index: 39;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 6rem 1.5rem 2.5rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}
.mobile-menu.open{ opacity: 1; visibility: visible; }
.mm-bg{
position: fixed;
inset: 0;
background: rgba(var(--ink-rgb), 0.96);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
pointer-events: none;
}
.mm-glow{
position: absolute;
left: 50%;
top: 4%;
width: 34rem;
height: 24rem;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(closest-side circle, rgba(var(--mint-rgb), 0.22), transparent 100%);
filter: blur(60px);
animation: aurora 15s var(--ease-in-out) infinite;
}
.mm-nav{ position: relative; display: flex; flex-direction: column; }
.mm-item{
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
padding: 1.15rem 0;
border: 0;
border-bottom: 1px solid var(--line);
background: none;
text-align: left;
color: var(--text);
font-family: var(--font-display);
font-size: clamp(1.75rem, 8vw, 2.35rem);
font-weight: 400;
letter-spacing: -0.02em;
cursor: pointer;
transition: color 0.35s var(--ease-out);
}
.mm-group{ border-bottom: 1px solid var(--line); }
.mm-group .mm-item{ border-bottom: 0; }
.mm-item,.mm-group{
transform: translateX(2rem);
opacity: 0;
transition:
transform 0.55s var(--ease-out),
opacity 0.55s var(--ease-out),
color 0.35s var(--ease-out);
}
.mobile-menu.open .mm-item,.mobile-menu.open .mm-group{
transform: translateX(0);
opacity: 1;
transition-delay: var(--d, 0ms);
}
.mm-ico{ width: 1.6rem; height: 1.6rem; flex: none; color: var(--mint); }
.mm-item > span{ flex: 1; min-width: 0; }
.mm-item .dd-arrow{ width: 1.3rem; height: 1.3rem; opacity: 0.5; }
.mm-chev{
width: 1.5rem;
height: 1.5rem;
flex: none;
color: var(--faint);
transition: transform 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.mm-toggle[aria-expanded="true"] .mm-chev{ transform: rotate(180deg); color: var(--mint); }
.mm-sub{
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.4s var(--ease-out);
}
.mm-toggle[aria-expanded="true"] + .mm-sub{ grid-template-rows: 1fr; }
.mm-sub-inner{ overflow: hidden; }
.mm-sub-inner > a{
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0 0.55rem 2.6rem;
font-size: 1.02rem;
color: var(--muted);
transition: color 0.3s var(--ease-out);
}
.mm-sub-inner > a:last-child{ padding-bottom: 1.1rem; }
.mm-sub-ico{ width: 1.1rem; height: 1.1rem; flex: none; color: var(--mint); }
.mm-all{ color: var(--mint) !important; font-weight: 600; }
.mm-nav > *{ flex-shrink: 0; }
.mm-sub-h{
display: block;
padding: 0.9rem 0 0.25rem 2.6rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.mm-foot{
position: relative;
margin-top: auto;
padding-top: 2rem;
display: flex;
flex-direction: column;
gap: 1.4rem;
}
.mm-cta{ width: 100%; justify-content: space-between; padding-block: 0.75rem; }
.mm-contact{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.mm-contact > a{
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--muted);
transition: color 0.3s var(--ease-out);
}
.mm-phone{ width: 1rem; height: 1rem; color: var(--mint); }
@media (hover: hover) and (pointer: fine){
.mm-item:hover,.mm-sub-inner > a:hover,.mm-contact > a:hover{ color: var(--mint); }
}
@media (max-width: 768px){
.nav-links,.nav-quote{ display: none; }
.burger{ display: block; }
}
@media (max-width: 1040px){
.nav-links,.nav-quote{ display: none; }
.burger{ display: block; }
}
@media (max-width: 1040px){
.nav-cta .nav-call{ display: inline-flex; }
.nav-cta .btn.nav-quote{ display: inline-flex; padding: 0.5rem 0.95rem; font-size: 0.85rem; min-height: 2.5rem; }
.nav-quote .nq-long,.nav-quote .btn-orb{ display: none; }
.nav-quote .nq-short{ display: inline; }
}
.hero{
position: relative;
padding: clamp(9rem, 16vh, 12rem) 0 0;
overflow: clip;
}
.hero-bg{
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-bg::before{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 78px 78px;
mask-image: radial-gradient(ellipse 95% 75% at 50% 15%, #000 0%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 15%, #000 0%, transparent 72%);
opacity: 0.45;
display: none;
}
.hero-bg--staro::before{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 78px 78px;
mask-image: radial-gradient(ellipse 95% 75% at 50% 15%, #000 0%, transparent 72%);
-webkit-mask-image: radial-gradient(ellipse 95% 75% at 50% 15%, #000 0%, transparent 72%);
opacity: 0.55;
}
.hero-bg::after{
display: none;
}
.hero-bg--staro::after{
content: "";
position: absolute;
right: -25%;
top: -20%;
width: 95vw;
height: 130%;
background:
radial-gradient(closest-side circle at 62% 34%, var(--glow) 0%, transparent 100%),
radial-gradient(closest-side circle at 84% 60%, var(--glow-deep) 0%, transparent 100%),
radial-gradient(closest-side circle at 46% 72%, rgba(10, 168, 140, 0.28) 0%, transparent 100%);
background-size: 62% 62%, 54% 54%, 46% 46%;
background-repeat: no-repeat;
background-position: 0% 0%, 60% 40%, 20% 80%;
filter: blur(46px);
will-change: transform, opacity;
animation: aurora 15s var(--ease-in-out) infinite;
}
.hero-bg .aurora-2{
display: none;
}
.hero-bg--staro .aurora-2{
position: absolute;
right: -10%;
top: -10%;
width: 70vw;
height: 110%;
background:
radial-gradient(closest-side circle at 50% 50%, rgba(36, 213, 219, 0.3) 0%, transparent 100%),
radial-gradient(closest-side circle at 50% 50%, rgba(var(--mint-rgb), 0.26) 0%, transparent 100%);
background-size: 48% 48%, 40% 40%;
background-repeat: no-repeat;
background-position: 20% 25%, 78% 70%;
filter: blur(54px);
will-change: transform, opacity;
animation: aurora-2 19s var(--ease-in-out) infinite;
}
@keyframes aurora{
0%   { transform: translate3d(0, 0, 0) scale(1);          opacity: 0.55; }
25%  { transform: translate3d(-9%, 6%, 0) scale(1.28);    opacity: 1; }
50%  { transform: translate3d(-3%, 13%, 0) scale(1.06);   opacity: 0.7; }
75%  { transform: translate3d(-12%, 2%, 0) scale(1.34);   opacity: 1; }
100% { transform: translate3d(0, 0, 0) scale(1);          opacity: 0.55; }
}
@keyframes aurora-2{
0%   { transform: translate3d(0, 0, 0) scale(1.1);        opacity: 0.75; }
33%  { transform: translate3d(8%, -7%, 0) scale(0.88);    opacity: 0.4; }
66%  { transform: translate3d(-5%, -12%, 0) scale(1.25);  opacity: 0.95; }
100% { transform: translate3d(0, 0, 0) scale(1.1);        opacity: 0.75; }
}
.hero-inner{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.75rem;
}
.hero h1{
font-size: clamp(2.6rem, 5.6vw, 4.4rem);
font-weight: 600;
max-width: 22ch;
}
.hero h1 .w{
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.hero h1 .w > span{
display: inline-block;
}
:where(html.js) :is(.hero, .subhero) h1 .w > span{
animation: sp-rec 0.62s var(--ease-out) both;
animation-delay: var(--d, 0ms);
}
@keyframes sp-rec{
from { transform: translate(var(--x, 0), 110%); }
to { transform: translate(0, 0); }
}
.caret{
display: inline-block;
width: 0.55em;
height: 0.08em;
margin-left: 0.06em;
background: var(--mint-fill);
vertical-align: baseline;
animation: blink 1.1s steps(1) infinite;
}
@keyframes blink{ 50% { opacity: 0; } }
.hero-claim{
max-width: 40ch;
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.9vw, 1.5rem);
font-weight: 550;
letter-spacing: -0.015em;
line-height: 1.35;
color: var(--text);
}
.hero-sub{
max-width: 62ch;
color: var(--muted);
font-size: clamp(1rem, 1.4vw, 1.15rem);
}
.hero-actions{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.9rem;
}
.quick-row{
position: relative;
margin-top: clamp(3.5rem, 7vw, 5.5rem);
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.7rem;
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.quick-card{
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
padding: 1.25rem 0.75rem 1.1rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: linear-gradient(180deg, rgba(var(--wash2-rgb), 0.03), rgba(var(--wash2-rgb), 0.008));
transition:
border-color 0.5s var(--ease-out),
transform 0.5s var(--ease-out),
background-color 0.5s var(--ease-out);
}
.q-ico{
display: grid;
place-items: center;
width: 2.9rem;
height: 2.9rem;
border-radius: 0.95rem;
color: var(--mint);
border: 1px solid var(--mint-line);
background:
radial-gradient(120% 120% at 30% 0%, rgba(var(--mint-rgb), 0.2), transparent 62%),
linear-gradient(160deg, rgba(36, 213, 219, 0.12), rgba(var(--mint-rgb), 0.04));
box-shadow: inset 0 1px 0 rgba(var(--wash-rgb), 0.09);
transition:
background 0.45s var(--ease-out),
color 0.45s var(--ease-out),
border-color 0.45s var(--ease-out),
transform 0.45s var(--ease-out),
box-shadow 0.45s var(--ease-out);
}
.quick-card .ico{
width: 1.5rem;
height: 1.5rem;
}
.quick-card .ico .f{ opacity: 0.24; }
.quick-card .ico .s{ stroke-width: 1.6; }
.quick-card > span:not(.q-ico){
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
transition: color 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.quick-card:hover{
border-color: var(--mint-line);
transform: translateY(-4px);
}
.quick-card:hover > span:not(.q-ico){ color: var(--text); }
.quick-card:hover .q-ico{
background-image: var(--grad);
border-color: transparent;
color: var(--mint-ink);
transform: scale(1.06);
box-shadow: 0 10px 22px -10px rgba(0, 160, 115, 0.8);
}
.quick-card:hover .ico .f{ opacity: 0.32; }
}
.statement-section{ text-align: center; }
.statement{
font-family: var(--font-display);
font-size: clamp(1.6rem, 3.6vw, 2.6rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.02em;
max-width: 30ch;
margin: 0 auto clamp(3rem, 6vw, 4.5rem);
text-wrap: balance;
}
.statement .word{
color: rgba(var(--wash2-rgb), 0.18);
transition: color 0.6s var(--ease-out);
transition-delay: var(--d, 0ms);
}
.statement.lit .word{ color: var(--text); }
.statement.lit .word.hl{ color: var(--mint); }
.light-cards{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.light-card{
overflow: hidden;
background:
linear-gradient(90deg, #24d5db, #04f0ae) top left / 100% 3px no-repeat,
linear-gradient(165deg, #eef4ef 0%, #e2ebe5 100%);
color: #0c1512;
border-radius: 1.3rem;
padding: 1.95rem 1.4rem 1.6rem;
text-align: left;
display: flex;
flex-direction: column;
gap: 0.75rem;
transition:
transform 0.55s var(--ease-out),
box-shadow 0.55s var(--ease-out);
}
.light-card::after{
content: attr(data-n);
position: absolute;
top: 1.95rem;
right: 1.25rem;
height: 48px;
line-height: 48px;
font-family: var(--font-display);
font-weight: 700;
font-size: 2.5rem;
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
background-image: var(--grad-ink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0.55;
pointer-events: none;
transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.light-cards{ align-items: start; }
.light-cards > .light-card:nth-child(even){ margin-top: 1.7rem; }
@media (hover: hover) and (pointer: fine){
.light-card:hover{
transform: translateY(-6px);
box-shadow: 0 26px 55px -26px rgba(var(--mint-rgb), 0.5);
}
.light-card:hover::after{
opacity: 1;
transform: translateY(-2px);
}
.light-card:hover .icon-tile{ transform: scale(1.06) rotate(-3deg); }
}
.light-card .icon-tile{
border-color: transparent;
background-image: var(--grad);
color: var(--mint-ink);
box-shadow: 0 8px 18px -8px rgba(0, 150, 108, 0.8);
transition: transform 0.55s var(--ease-out);
}
.light-card .icon-tile .ico{ width: 1.45rem; height: 1.45rem; }
.light-card .icon-tile .ico .f{ opacity: 0.3; }
.light-card .icon-tile .ico .s{ stroke-width: 1.7; }
.light-card h3{
position: relative;
font-size: 1.08rem;
color: #0c1512;
letter-spacing: -0.015em;
}
.light-card p{
position: relative;
color: #44544d;
font-size: 0.89rem;
line-height: 1.6;
}
.light-panel{
background: #e8efe9;
color: #0c1512;
border-radius: var(--r-shell);
overflow: hidden;
}
.light-panel .lp-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: rgba(12, 21, 18, 0.1);
}
.lp-cell{
background: #e8efe9;
padding: 1.8rem 1.6rem;
}
.lp-cell .num{
font-family: var(--font-display);
font-size: clamp(1.9rem, 3vw, 2.5rem);
font-weight: 600;
letter-spacing: -0.03em;
color: #0c1512;
}
.lp-cell .num em{ font-style: normal; color: #0d7a4f; }
.lp-cell .lbl{
margin-top: 0.3rem;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #5b6a63;
}
.lp-cta{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 1.1rem 1.6rem;
border-top: 1px solid rgba(12, 21, 18, 0.1);
background: #e8efe9;
}
.lp-cta-txt{
font-size: 0.88rem;
color: #45544d;
}
.lp-cta .btn{ flex: none; }
@media (max-width: 520px){
.lp-cta{ justify-content: center; text-align: center; }
.lp-cta .btn{ width: 100%; justify-content: space-between; }
}
.section{ padding: clamp(5.5rem, 10vw, 8.5rem) 0; position: relative; }
.section-head{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
margin-bottom: clamp(2.75rem, 5vw, 4rem);
max-width: 46rem;
}
.section-head.center{
align-items: center;
text-align: center;
margin-inline: auto;
}
.section-head h2{
font-size: clamp(1.9rem, 3.8vw, 2.9rem);
}
.section-head p{ color: var(--muted); max-width: 56ch; }
.section-head .head-row{
width: 100%;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
}
.services-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.shell-card{
background: var(--shell);
border: 1px solid var(--line);
border-radius: var(--r-shell);
padding: 0.45rem;
transition:
border-color 0.6s var(--ease-out),
transform 0.6s var(--ease-out),
box-shadow 0.6s var(--ease-out);
}
.shell-card > .inner{
background: linear-gradient(180deg, var(--panel-2), var(--panel));
border: 1px solid rgba(var(--wash2-rgb), 0.05);
border-radius: var(--r-inner);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
height: 100%;
padding: 1.75rem 1.5rem;
display: flex;
flex-direction: column;
gap: 1.1rem;
}
@media (hover: hover) and (pointer: fine){
.shell-card:hover{
border-color: var(--mint-line);
--lift: -6px;
box-shadow: 0 24px 60px -30px rgba(var(--mint-rgb), 0.25);
}
}
.icon-tile{
width: 3rem;
height: 3rem;
border-radius: 0.9rem;
border: 1px solid var(--mint-line);
background: var(--mint-soft);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.icon-tile svg{
width: 1.4rem;
height: 1.4rem;
stroke: var(--mint);
fill: none;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.service-card h3{ font-size: 1.2rem; }
.service-card p{ color: var(--muted); font-size: 0.95rem; flex: 1; }
.card-link{
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.88rem;
color: var(--mint);
}
.card-link svg{
width: 0.8rem;
height: 0.8rem;
transition: transform 0.45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.card-link:hover svg{ transform: translate(3px, -3px); }
}
.process{ overflow: clip; }
.process-bg{
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse 45% 42% at 85% 42%, rgba(10, 168, 140, 0.16) 0%, transparent 65%);
}
.process-panel{
position: relative;
max-width: 44rem;
margin: 0 auto 3.25rem;
}
.process-panel .inner{
display: flex;
gap: 1.25rem;
align-items: flex-start;
min-height: 9.5rem;
}
.process-copy h3{
font-size: 1.15rem;
margin-bottom: 0.4rem;
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.process-copy p{
color: var(--muted);
font-size: 0.95rem;
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.process-panel.switching h3,.process-panel.switching p{
opacity: 0;
transform: translateY(8px);
}
.process-nav{
position: absolute;
top: -3.4rem;
right: 0;
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--faint);
letter-spacing: 0.15em;
}
.process-nav button{
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--shell);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.process-nav button svg{ width: 0.85rem; height: 0.85rem; }
@media (hover: hover) and (pointer: fine){
.process-nav button:hover{ border-color: var(--mint-line); background: var(--mint-soft); }
}
.steps{
display: flex;
justify-content: center;
gap: 0.55rem;
padding: 0.5rem 0 1rem;
}
.step{
position: relative;
flex: 1;
max-width: 12rem;
transform: skewX(-18deg);
border: 1px dashed var(--line-strong);
border-radius: 0.45rem;
background: rgba(var(--wash2-rgb), 0.02);
cursor: pointer;
padding: 0;
transition:
background-color 0.5s var(--ease-out),
border-color 0.5s var(--ease-out),
transform 0.5s var(--ease-out);
}
.step .step-inner{
transform: skewX(18deg);
display: flex;
flex-direction: column;
gap: 0.2rem;
align-items: flex-start;
padding: 0.85rem 1.1rem;
}
.step .step-num{
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
color: var(--faint);
transition: color 0.5s var(--ease-out);
}
.step .step-name{
font-family: var(--font-display);
font-weight: 600;
font-size: 0.88rem;
color: var(--muted);
transition: color 0.5s var(--ease-out);
white-space: nowrap;
}
.step.active{
background: var(--mint-fill);
border-color: var(--mint);
border-style: solid;
box-shadow: 0 10px 40px -10px rgba(var(--mint-rgb), 0.5);
}
.step.active .step-num{ color: rgba(5, 32, 26, 0.6); }
html.theme-light .step.active .step-num{ color: var(--mint-ink); }
.step.active .step-name{ color: var(--mint-ink); }
@media (hover: hover) and (pointer: fine){
.step:not(.active):hover{ border-color: var(--mint-line); background: var(--mint-soft); }
}
.process-track{
height: 2px;
max-width: 44rem;
margin: 0.75rem auto 0;
background: var(--line);
border-radius: 2px;
overflow: hidden;
}
.process-track .fill{
height: 100%;
width: 0%;
background: var(--mint-fill);
transition: width 0.6s var(--ease-in-out);
}
.why-grid{
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.why-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.why-copy h2{ font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.why-copy p{ color: var(--muted); }
.why-tiles{
margin-top: clamp(2.5rem, 5vw, 4rem);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
border-radius: var(--r-shell);
overflow: hidden;
}
.why-tiles--3{ grid-template-columns: repeat(3, 1fr); }
.why-tile{
background: var(--bg-2);
padding: 1.9rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
transition: background-color 0.6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.why-tile:hover{ background: var(--panel-2); }
}
.why-tile h3{ font-size: 1.05rem; }
.why-tile p{ color: var(--muted); font-size: 0.9rem; }
.pricing-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
align-items: stretch;
}
.price-card > .inner{ padding: 0; overflow: hidden; gap: 0; }
.price-head{
padding: 1.6rem 1.6rem 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.price-head h3{ font-size: 1.25rem; }
.price-head .dur{
font-family: var(--font-mono);
font-size: 0.64rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--faint);
}
.price-head .price-for{
margin: 0.45rem 0 0;
color: var(--muted);
font-size: 0.92rem;
line-height: 1.45;
}
@media (min-width: 1021px){
.price-head .price-for{ min-height: 2.9em; }
}
.price-value{
padding: 1.1rem 1.6rem 1.4rem;
display: flex;
align-items: baseline;
gap: 0.5rem;
border-bottom: 1px solid var(--line);
}
.price-value .od{ color: var(--faint); font-size: 0.9rem; }
.price-value .val{
font-family: var(--font-display);
font-size: 2.9rem;
font-weight: 600;
letter-spacing: -0.03em;
}
.price-value .cur{ color: var(--mint); font-size: 1.4rem; font-family: var(--font-display); }
.price-value .cur--pre{ margin-right: -0.35rem; }
.price-value .ask{
font-size: 0.6em;
color: var(--mint);
letter-spacing: -0.01em;
}
.price-card ul{
list-style: none;
margin: 0;
padding: 1.4rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.7rem;
flex: 1;
}
.price-card li{
display: flex;
gap: 0.65rem;
align-items: flex-start;
font-size: 0.92rem;
color: var(--muted);
}
.price-card li svg path{
stroke-dasharray: 20;
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.5s var(--ease-out);
}
.price-card.in li svg path{ stroke-dashoffset: 0; }
.price-card.in li:nth-child(1) svg path{ transition-delay: 260ms; }
.price-card.in li:nth-child(2) svg path{ transition-delay: 325ms; }
.price-card.in li:nth-child(3) svg path{ transition-delay: 390ms; }
.price-card.in li:nth-child(4) svg path{ transition-delay: 455ms; }
.price-card.in li:nth-child(5) svg path{ transition-delay: 520ms; }
.price-card.in li:nth-child(6) svg path{ transition-delay: 585ms; }
.price-card.in li:nth-child(7) svg path{ transition-delay: 650ms; }
.price-card.in li:nth-child(8) svg path{ transition-delay: 715ms; }
.price-card.in li:nth-child(9) svg path{ transition-delay: 780ms; }
.price-card.in li:nth-child(10) svg path{ transition-delay: 845ms; }
.price-card.in li:nth-child(11) svg path{ transition-delay: 910ms; }
.price-card.in li:nth-child(12) svg path{ transition-delay: 975ms; }
.price-card.in li:nth-child(13) svg path{ transition-delay: 1040ms; }
.price-card.in li:nth-child(14) svg path{ transition-delay: 1105ms; }
.price-card li svg{
width: 1rem;
height: 1rem;
flex: none;
margin-top: 0.2rem;
stroke: var(--mint);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.price-cta{ padding: 0 1.6rem 1.6rem; }
.price-cta .btn{ width: 100%; justify-content: space-between; }
.price-card.featured{ border-color: var(--mint-line); }
@property --sp-sweep{
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.price-card.featured::after,.sv-pkg.featured::after{
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1px;
background: conic-gradient(from var(--sp-sweep),
transparent 0deg 250deg, rgba(36, 213, 219, 0.5) 300deg, rgba(var(--mint-rgb), 0.95) 335deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: sp-sweep 7s linear infinite;
animation-play-state: paused;
pointer-events: none;
z-index: 2;
}
.price-card.featured.u-kadru::after,.sv-pkg.featured.u-kadru::after{ animation-play-state: running; }
@keyframes sp-sweep{ to { --sp-sweep: 360deg; } }
.pop-band{
background: var(--grad);
color: var(--mint-ink);
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
text-align: center;
padding: 0.5rem;
}
.pricing-note{
margin-top: 2.25rem;
display: flex;
gap: 0.9rem;
align-items: flex-start;
max-width: 52rem;
margin-inline: auto;
color: var(--faint);
font-size: 0.88rem;
}
.pricing-note svg{
width: 1.1rem;
height: 1.1rem;
flex: none;
margin-top: 0.2rem;
stroke: var(--mint);
fill: none;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.works-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.work-card > .inner{ padding: 0.6rem; gap: 0; }
.work-thumb{
position: relative;
border-radius: calc(var(--r-inner) - 0.35rem);
overflow: hidden;
border: 1px solid rgba(var(--wash2-rgb), 0.05);
}
.work-thumb{
aspect-ratio: 1 / 1;
background: var(--panel);
clip-path: inset(0 0 100% 0 round calc(var(--r-inner) - 0.35rem));
transition: clip-path 0.95s var(--ease-out);
transition-delay: var(--d, 0ms);
}
.work-card.in .work-thumb{ clip-path: inset(0 0 0 0 round calc(var(--r-inner) - 0.35rem)); }
.work-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease-out), filter 0.6s var(--ease-out);
filter: saturate(0.92) brightness(0.94);
}
.work-thumb::after{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, transparent 55%, rgba(var(--ink-rgb), 0.55) 100%);
opacity: 0.9;
transition: opacity 0.6s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.work-card:hover .work-thumb img{
transform: scale(1.06);
filter: saturate(1.05) brightness(1);
}
.work-card:hover .work-thumb::after{ opacity: 0.4; }
}
.work-meta{
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1.1rem 0.9rem 0.7rem;
}
.work-meta h3{ font-size: 1.02rem; }
.work-meta .cat{ color: var(--faint); font-size: 0.82rem; margin-top: 0.15rem; }
.work-meta .go{
width: 2.3rem;
height: 2.3rem;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: flex;
align-items: center;
justify-content: center;
flex: none;
transition:
background-color 0.5s var(--ease-out),
border-color 0.5s var(--ease-out),
transform 0.5s var(--ease-out);
}
.work-meta .go svg{ width: 0.8rem; height: 0.8rem; }
@media (hover: hover) and (pointer: fine){
.work-card:hover .go{
background: var(--mint-fill);
border-color: var(--mint);
color: var(--mint-ink);
transform: translate(2px, -2px);
}
}
.reviews{ overflow: clip; }
.reviews-head{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.score-card{
display: flex;
gap: 2rem;
align-items: center;
flex: none;
}
.score{
text-align: center;
}
.score .big{
font-family: var(--font-display);
font-size: 2.6rem;
font-weight: 600;
letter-spacing: -0.03em;
}
.score .big .accent{ text-shadow: 0 0 24px rgba(var(--mint-rgb), 0.5); }
.score .stars{ color: var(--mint); font-size: 0.8rem; letter-spacing: 0.2em; }
.score .cap{
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--faint);
margin-top: 0.3rem;
}
.rv-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
align-items: start;
}
.rv-card{
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 1.6rem 1.5rem 1.3rem;
border-radius: 1.5rem;
border: 1px solid var(--line);
background: linear-gradient(160deg, rgba(var(--wash-rgb), 0.055), rgba(var(--wash-rgb), 0.012));
rotate: var(--rot, 0deg);
transition:
transform 0.5s var(--ease-out),
border-color 0.5s var(--ease-out),
box-shadow 0.5s var(--ease-out);
}
.rv-card.hidden{ display: none; }
@media (hover: hover) and (pointer: fine){
.rv-card:hover{
transform: translateY(-6px);
border-color: var(--mint-line);
box-shadow: 0 24px 60px -28px rgba(var(--mint-rgb), 0.35);
}
}
.rv-quote{
position: absolute;
top: -2.6rem;
right: -0.3rem;
font-family: var(--font-display);
font-size: 8rem;
line-height: 1;
color: rgba(var(--wash-rgb), 0.045);
pointer-events: none;
}
.rv-head{
position: relative;
display: flex;
align-items: center;
gap: 0.8rem;
}
.rv-avatar{
width: 2.9rem;
height: 2.9rem;
border-radius: 50%;
flex: none;
display: flex;
align-items: center;
justify-content: center;
background-image: var(--grad);
color: var(--mint-ink);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.02em;
}
.rv-who{ min-width: 0; }
.rv-name{
display: flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rv-verified{
width: 0.95rem;
height: 0.95rem;
margin-left: 0.35rem;
vertical-align: -0.12em;
flex: none;
color: var(--mint);
}
.rv-service{
font-size: 0.82rem;
color: var(--mint);
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rv-meta{
position: relative;
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.rv-stars{ color: var(--mint); font-size: 0.85rem; letter-spacing: 0.18em; }
.rv-date{ font-size: 0.75rem; color: var(--faint); }
.rv-text{
position: relative;
margin: 1rem 0 1.2rem;
font-size: 0.94rem;
line-height: 1.6;
color: var(--text-soft);
}
.rv-text.rv-empty{ font-style: italic; color: var(--faint); }
.rv-foot{
position: relative;
margin-top: auto;
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.9rem;
border-top: 1px solid var(--line);
font-size: 0.75rem;
color: var(--faint);
}
.rv-foot svg{ width: 0.95rem; height: 0.95rem; flex: none; }
.rv-more{
margin-top: 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
}
.rv-count{
font-family: var(--font-mono);
font-size: 0.64rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--faint);
}
.rv-progress{
width: min(14rem, 60%);
height: 2px;
border-radius: 2px;
background: var(--line);
overflow: hidden;
}
.rv-progress span{
display: block;
height: 100%;
width: 100%;
transform-origin: 0 50%;
background-image: var(--grad);
transition: transform 0.6s var(--ease-out);
}
.rv-less{
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: -0.2rem;
padding: 0.4rem 0.7rem;
border: 0;
border-radius: 999px;
background: none;
color: var(--faint);
font-family: var(--font-body);
font-size: 0.85rem;
cursor: pointer;
transition: color 0.35s var(--ease-out);
}
.rv-less svg{ width: 0.85rem; height: 0.85rem; }
@media (hover: hover) and (pointer: fine){
.rv-less:hover{ color: var(--mint); }
}
.review-foot{
display: flex;
align-items: center;
gap: 0.8rem;
margin-top: auto;
}
.avatar{
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
flex: none;
display: flex;
align-items: center;
justify-content: center;
background: var(--mint-soft);
border: 1px solid var(--mint-line);
color: var(--mint);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.8rem;
}
.review-foot .who{ line-height: 1.3; }
.review-foot .name{ font-weight: 600; font-size: 0.88rem; font-family: var(--font-display); }
.review-foot .role{ color: var(--faint); font-size: 0.75rem; }
.review-foot .g{
margin-left: auto;
color: var(--mint);
font-size: 0.7rem;
letter-spacing: 0.1em;
}
.cta-band .inner{
align-items: center;
text-align: center;
gap: 1.6rem;
padding: clamp(3rem, 7vw, 5rem) 2rem;
position: relative;
overflow: hidden;
}
.cta-band .inner::before{
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 90% at 50% 120%, rgba(10, 168, 140, 0.35) 0%, transparent 65%);
pointer-events: none;
}
.cta-band h2{
position: relative;
font-size: clamp(1.8rem, 4vw, 2.7rem);
max-width: 22ch;
}
.cta-band p{ position: relative; color: var(--muted); }
.cta-band .btn{ position: relative; }
.cta-band .inner::before{
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
opacity: 0.75;
}
.cta-band.hot .inner::before{
opacity: 1;
transform: scale(1.12);
}
.cta-stars{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
}
.cs-rail{
position: relative;
display: flex;
gap: 0.3rem;
padding: 0.35rem 0.55rem;
border-radius: 999px;
text-decoration: none;
transition: background-color 0.45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.cs-rail:hover{ background: rgba(var(--wash-rgb), 0.04); }
}
.cs-rail:focus-visible{
outline: 2px solid var(--mint);
outline-offset: 4px;
}
.cs-star{
position: relative;
display: block;
width: 2.5rem;
height: 2.5rem;
color: rgba(var(--wash-rgb), 0.16);
transform: translateY(0) scale(1);
transition:
color 0.4s var(--ease-out),
transform 0.4s var(--ease-out),
filter 0.4s var(--ease-out);
}
.cs-star svg{ display: block; width: 100%; height: 100%; fill: currentColor; }
.cs-star.on{
transform: translateY(-3px) scale(1.08);
filter: drop-shadow(0 6px 14px rgba(var(--mint-rgb), 0.45));
}
.cs-star:nth-child(2).on{ color: #24d5db; }
.cs-star:nth-child(3).on{ color: #17dccc; }
.cs-star:nth-child(4).on{ color: #0ce5bd; }
.cs-star:nth-child(5).on{ color: #06ecb3; }
.cs-star:nth-child(6).on{ color: #04f0ae; }
.cs-star:nth-child(3){ transition-delay: 30ms; }
.cs-star:nth-child(4){ transition-delay: 60ms; }
.cs-star:nth-child(5){ transition-delay: 90ms; }
.cs-star:nth-child(6){ transition-delay: 120ms; }
.cs-burst{
position: absolute;
left: 50%;
top: 50%;
width: 12rem;
height: 12rem;
margin: -6rem 0 0 -6rem;
border-radius: 50%;
border: 1.5px solid var(--mint);
opacity: 0;
pointer-events: none;
}
.cs-burst.go{ animation: csBurst 0.75s var(--ease-out) forwards; }
@keyframes csBurst{
0% { opacity: 0.75; transform: scale(0.35); }
100% { opacity: 0; transform: scale(1.15); }
}
.cs-cap{
position: relative;
min-height: 1.4em;
font-size: 0.92rem;
color: var(--faint);
transition: color 0.4s var(--ease-out);
}
.cs-cap b{ color: var(--muted); font-weight: 600; }
.cta-stars.full .cs-cap{ color: var(--muted); }
.cta-stars.full .cs-cap b{ color: var(--mint); }
.cl-play{
display: none;
margin: 0 auto 1.2rem;
align-items: center;
gap: 0.6rem;
padding: 0.6rem 1.1rem 0.6rem 0.85rem;
border: 1px solid var(--mint-line);
border-radius: 999px;
background: var(--mint-soft);
color: var(--mint);
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.cl-play-ico{
width: 0;
height: 0;
border-style: solid;
border-width: 0.35rem 0 0.35rem 0.55rem;
border-color: transparent transparent transparent currentColor;
}
html:not(.motion-on) .cl-play,html.motion-off .cl-play{ display: inline-flex; }
@media (prefers-reduced-motion: no-preference){
html:not(.motion-off) .cl-play{ display: none; }
}
@media (hover: hover) and (pointer: fine){
.cl-play:hover{ background: var(--mint-fill); color: var(--mint-ink); border-color: transparent; }
}
.ft-motion,.ft-theme,.ft-lang{
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem 0.35rem 0.6rem;
border: 1px solid var(--line);
border-radius: 999px;
background: none;
color: var(--faint);
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
cursor: pointer;
transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.ft-motion-dot{
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--faint);
transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.ft-motion[aria-pressed="true"],.ft-theme[aria-pressed="true"]{ color: var(--muted); border-color: var(--mint-line); }
.ft-motion[aria-pressed="true"] .ft-motion-dot{
background: var(--mint-fill);
box-shadow: 0 0 8px rgba(var(--mint-rgb), 0.6);
}
.ft-theme-ico{
display: inline-flex;
width: 0.85rem;
height: 0.85rem;
color: var(--faint);
transition: color 0.4s var(--ease-out), transform 0.5s var(--ease-out);
}
.ft-theme-ico svg{ width: 100%; height: 100%; }
.ft-theme[aria-pressed="true"] .ft-theme-ico{ color: var(--mint); transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine){
.ft-motion:hover{ color: var(--text); border-color: var(--line-strong); }
}
.clients{
position: relative;
overflow: hidden;
}
.cl-glow{
position: absolute;
left: 50%;
top: 50%;
width: min(48rem, 92vw);
height: 20rem;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(closest-side circle, rgba(var(--mint-rgb), 0.1), transparent 100%);
filter: blur(90px);
pointer-events: none;
}
.cl-rows{
position: relative;
margin-top: clamp(2.4rem, 5vw, 3.4rem);
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.cl-row{
overflow: hidden;
padding-block: 1.5rem;
-webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.cl-track{
display: flex;
width: max-content;
align-items: center;
animation: cl-left 48s linear infinite;
}
.cl-track--rev{ animation: cl-right 58s linear infinite; }
@keyframes cl-left{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes cl-right{
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
.cl-logo{
flex: none;
width: 10rem;
height: 3.5rem;
margin-right: 3rem;
position: relative;
}
.cl-logo img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
opacity: 0.42;
transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.cl-row:hover .cl-track,.cl-row:hover .cl-track--rev{ animation-play-state: paused; }
.cl-logo:hover img{
opacity: 1;
transform: scale(1.1);
filter: drop-shadow(0 0 18px rgba(var(--mint-rgb), 0.55));
}
}
@media (min-width: 641px){
.cl-logo{ width: 14rem; height: 5rem; margin-right: 6rem; }
}
.works-more{
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.contact-grid{
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.contact-info{ display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
.contact-info h2{ font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.contact-info > p{ color: var(--muted); }
.contact-rows{ display: flex; flex-direction: column; gap: 0.9rem; width: 100%; }
.contact-row{
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.2rem;
border: 1px solid var(--line);
border-radius: 1.1rem;
background: var(--shell);
transition: border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.contact-row:hover{ border-color: var(--mint-line); background: var(--mint-soft); }
}
.contact-row .val{ font-family: var(--font-display); font-weight: 600; }
.contact-row .cap{
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--faint);
}
.form-card > .inner{ gap: 1rem; padding: 1.9rem 1.7rem; }
.field{ display: flex; flex-direction: column; gap: 0.4rem; }
.field label{
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--faint);
}
.field input,.field textarea{
background: rgba(var(--shadow-rgb), 0.3);
border: 1px solid var(--line);
border-radius: 0.8rem;
padding: 0.85rem 1rem;
color: var(--text);
font-family: var(--font-body);
font-size: 0.95rem;
outline: none;
transition: border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
resize: vertical;
}
.field input:focus,.field textarea:focus{
border-color: var(--mint);
box-shadow: 0 0 0 3px rgba(var(--mint-rgb), 0.12);
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note{ color: var(--faint); font-size: 0.8rem; }
footer{
border-top: 1px solid var(--line);
padding: clamp(3.5rem, 6vw, 5rem) 0 2rem;
position: relative;
overflow: clip;
}
footer::before{
content: "";
position: absolute;
left: 50%;
bottom: -60%;
width: 100vw;
height: 90%;
transform: translateX(-50%);
background: radial-gradient(ellipse 45% 60% at 50% 100%, rgba(10, 168, 140, 0.18) 0%, transparent 65%);
pointer-events: none;
}
.ft-top{
position: relative;
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr 1.25fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-bottom: 3rem;
}
.ft-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.ft-brand .brand{ font-size: 1.45rem; }
.ft-brand > p{
color: var(--muted);
font-size: 0.92rem;
line-height: 1.65;
max-width: 32ch;
}
.ft-badge{
display: inline-flex;
align-items: center;
gap: 0.75rem;
width: fit-content;
max-width: 100%;
padding: 0.6rem 0.9rem;
border: 1px solid var(--line);
border-radius: 0.9rem;
background: var(--shell);
transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.ft-badge-g{
width: 1.7rem;
height: 1.7rem;
flex: none;
border-radius: 50%;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ft-badge-g svg{ width: 1rem; height: 1rem; }
.ft-badge-txt{ display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ft-badge-top{ display: flex; align-items: center; gap: 0.4rem; }
.ft-badge-top strong{
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
line-height: 1;
color: var(--text);
}
.ft-badge-txt em{
font-style: normal;
font-size: 0.76rem;
line-height: 1.2;
color: var(--faint);
white-space: nowrap;
}
.ft-badge-go{
width: 0.8rem;
height: 0.8rem;
flex: none;
color: var(--faint);
transition: transform 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.ft-stars{ color: var(--mint); font-size: 0.68rem; letter-spacing: 0.1em; flex: none; line-height: 1; }
@media (hover: hover) and (pointer: fine){
.ft-badge:hover{ border-color: var(--mint-line); background: var(--mint-soft); }
.ft-badge:hover .ft-badge-go{ transform: translate(2px, -2px); color: var(--mint); }
}
.ft-col :is(h2, h4){
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 1.1rem;
}
.ft-col ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.ft-col ul a{
color: var(--muted);
font-size: 0.9rem;
transition: color 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.ft-col ul a:hover{ color: var(--mint); }
}
.ft-new{
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-right: 0.3rem;
color: var(--mint);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
vertical-align: 0.15em;
}
.ft-new-dot{
position: relative;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--mint-fill);
box-shadow: 0 0 10px var(--mint-fill);
flex: none;
}
@media (min-width: 1021px){
.ft-new-li{ position: relative; }
.ft-new{
position: absolute;
right: calc(100% + 0.9rem);
top: 50%;
transform: translateY(-50%);
margin: 0;
}
}
.ft-contact ul{ gap: 0.85rem; }
.ft-contact li a,.ft-contact .ft-plain{
display: flex;
align-items: center;
gap: 0.65rem;
}
.ft-contact .ico{
width: 1.15rem;
height: 1.15rem;
flex: none;
color: var(--mint);
}
.ft-contact li span > em{
display: block;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 0.1rem;
}
.ft-contact li a > span,.ft-contact .ft-plain > span{
font-size: 0.9rem;
color: var(--muted);
transition: color 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.ft-contact li a:hover > span{ color: var(--mint); }
}
.footer-bottom{
position: relative;
border-top: 1px solid var(--line);
padding-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--faint);
}
.ft-legal{ display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; }
.ft-sep{
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--faint);
opacity: 0.6;
}
.footer-bottom .legal{ display: flex; gap: 1.5rem; }
.ft-top-btn{
width: 2.4rem;
height: 2.4rem;
flex: none;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--shell);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
border-color 0.4s var(--ease-out),
color 0.4s var(--ease-out),
transform 0.4s var(--ease-out);
}
.ft-top-btn svg{ width: 0.9rem; height: 0.9rem; }
@media (hover: hover) and (pointer: fine){
.footer-bottom a:hover{ color: var(--mint); }
.ft-top-btn:hover{
border-color: var(--mint-line);
color: var(--mint);
transform: translateY(-3px);
}
}
@media (max-width: 1020px){
.ft-top{ grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.ft-brand{ grid-column: span 2; }
}
@media (max-width: 768px){
.ft-top{ grid-template-columns: 1fr; }
.ft-brand{ grid-column: span 1; }
.footer-bottom{ flex-direction: column; align-items: flex-start; }
.ft-top-btn{ position: absolute; right: 0; top: 1.5rem; }
}
.hero-canvas{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.shell-card,.light-card,.info-card,.why-tile{
position: relative;
}
.shell-card::before,.light-card::before,.info-card::before,.why-tile::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%),
rgba(var(--mint-rgb), 0.75), rgba(36, 213, 219, 0.25) 45%, transparent 70%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: 0;
transition: opacity 0.45s var(--ease-out);
pointer-events: none;
z-index: 1;
}
@media (hover: hover) and (pointer: fine){
.shell-card:hover::before,.light-card:hover::before,.info-card:hover::before,.why-tile:hover::before{ opacity: 1; }
}
.scramble{ font-variant-ligatures: none; white-space: nowrap; }
.subhero{
position: relative;
padding: clamp(8rem, 14vh, 10.5rem) 0 clamp(3rem, 6vw, 4.5rem);
overflow: clip;
}
.subhero .hero-bg::after{
right: -20%;
top: -18%;
width: 74vw;
height: 150%;
}
.subhero-inner{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.4rem;
max-width: 46rem;
}
.crumbs{
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--faint);
}
.crumbs a{ transition: color 0.4s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
.crumbs a:hover{ color: var(--mint); }
}
.crumbs .sep{ color: var(--mint); }
.subhero h1{
font-size: clamp(2.3rem, 5.2vw, 3.9rem);
}
.subhero h1 .w{
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding-bottom: 0.08em;
margin-bottom: -0.08em;
}
.subhero h1 .w > span{
display: inline-block;
}
.subhero p{ color: var(--muted); max-width: 58ch; }
.meta-chips{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.nav-links a.active{
color: var(--text);
border-color: var(--line);
background: var(--shell);
}
.sv-wrap{ padding-bottom: clamp(4rem, 8vw, 6rem); }
.sv-layout{
position: relative;
display: grid;
grid-template-columns: 8.5rem 1fr;
gap: 2.5rem;
align-items: start;
}
.sv-rail{ position: relative; }
.sv-rail-inner{
position: sticky;
top: 6rem;
height: calc(100vh - 8rem);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
.sv-rail-line{
width: 1px;
height: 6rem;
background: linear-gradient(to bottom, transparent, var(--mint-line));
}
.sv-rail-inner .sv-rail-line:last-child{
background: linear-gradient(to top, transparent, var(--mint-line));
}
.sv-rail-word{
writing-mode: vertical-rl;
rotate: 180deg;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(3rem, 5vw, 4.5rem);
letter-spacing: 0.06em;
text-transform: uppercase;
background-image: linear-gradient(to bottom, #24d5db, #04f0ae 55%, #00f5ad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
white-space: nowrap;
}
.sv-rail-label{
writing-mode: vertical-rl;
rotate: 180deg;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.42em;
text-transform: uppercase;
color: var(--faint);
}
.sv-main{ min-width: 0; padding-top: clamp(1rem, 3vw, 2rem); }
.sv-head{ max-width: 46rem; }
.section-head h2 .sp-w{ display: inline-block; will-change: transform; }
.nf-wrap{ min-height: 78vh; display: flex; align-items: center; }
.nf-inner{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 1.1rem;
padding: 4rem 0;
}
.nf-code{
font-size: clamp(5rem, 18vw, 11rem);
font-weight: 700;
line-height: 0.9;
letter-spacing: -0.05em;
background-image: var(--grad-ink);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: 0.22;
margin: -0.4em 0 -0.2em;
}
.nf-inner h1{ font-size: clamp(1.8rem, 4.4vw, 2.8rem); }
.nf-lead{ color: var(--muted); max-width: 46ch; }
.nf-links{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.8rem;
width: 100%;
max-width: 720px;
margin-top: 1.2rem;
text-align: left;
}
.nf-link{
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 1.1rem;
border: 1px solid var(--line);
border-radius: 1.1rem;
background: var(--shell);
text-decoration: none;
color: var(--text);
transition: border-color 0.45s var(--ease-out), background-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.nf-link .icon-tile{ flex: none; }
.nf-link strong{ display: block; font-size: 0.98rem; }
.nf-link em{ display: block; font-style: normal; font-size: 0.82rem; color: var(--faint); margin-top: 0.15rem; }
@media (hover: hover) and (pointer: fine){
.nf-link:hover{
border-color: var(--mint-line);
background: var(--mint-soft);
transform: translateY(-3px);
}
}
.nf-search{ margin-top: 0.6rem; }
.nf-search p{ color: var(--faint); font-size: 0.9rem; }
.nf-search a{ color: var(--mint); }
@media (max-width: 620px){
.nf-links{ grid-template-columns: 1fr; }
}
.sv-title-row{
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.4rem;
}
.sv-title-ico{
width: 3.4rem;
height: 3.4rem;
flex: none;
border-radius: 1rem;
border: 1px solid var(--mint-line);
background: var(--mint-soft);
color: var(--mint);
display: inline-flex;
align-items: center;
justify-content: center;
}
.sv-title-ico .ico{ width: 1.7rem; height: 1.7rem; }
.sv-title-row h1{
font-size: clamp(1.9rem, 4vw, 2.9rem);
line-height: 1.1;
}
.sv-intro{
margin-top: 1.1rem;
color: var(--muted);
font-size: 1.1rem;
line-height: 1.6;
}
.sv-chips{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.sv-head-cta{ display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.sv-cols{
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: clamp(2rem, 4vw, 3rem);
align-items: start;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.sv-body{ min-width: 0; }
.sv-side{ align-self: stretch; }
.sv-w{
border: 1px solid var(--line);
border-radius: 1.2rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.045), rgba(var(--wash-rgb), 0.01));
padding: 1.15rem 1.2rem;
}
.sv-w :is(h2, h4){
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 0.9rem;
}
.sv-toc{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.sv-toc a{
display: block;
padding: 0.4rem 0.6rem 0.4rem 0.75rem;
border-left: 2px solid var(--line);
font-size: 0.84rem;
line-height: 1.4;
color: var(--muted);
transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.sv-toc a.active{ color: var(--mint); border-left-color: var(--mint); }
@media (hover: hover) and (pointer: fine){
.sv-toc a:hover{ color: var(--text); border-left-color: var(--mint-line); }
}
.sv-w-cta{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.sv-w .sv-w-title{
font-family: var(--font-display);
font-weight: 600;
font-size: 1.1rem;
letter-spacing: -0.02em;
color: var(--text);
text-transform: none;
margin: 0;
}
.sv-w-cta p{ color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.sv-w-cta .btn{ width: 100%; justify-content: space-between; }
.sv-blocks h2{ scroll-margin-top: 7rem; }
.sv-blocks{
margin-top: clamp(3rem, 6vw, 4.5rem);
display: flex;
flex-direction: column;
gap: clamp(3rem, 6vw, 4.5rem);
}
.sv-block h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sv-prose{
margin-top: 1.1rem;
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 60ch;
}
.sv-prose p{ color: var(--muted); font-size: 1.05rem; }
.sv-list{
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.sv-list li{
display: flex;
gap: 0.7rem;
align-items: flex-start;
padding: 0.85rem 1.1rem;
border: 1px solid var(--line);
border-radius: 0.9rem;
background: var(--shell);
color: var(--muted);
font-size: 0.94rem;
transition: border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
.sv-list li svg{
width: 1rem;
height: 1rem;
flex: none;
margin-top: 0.2rem;
stroke: var(--mint);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
@media (hover: hover) and (pointer: fine){
.sv-list li:hover{ border-color: var(--mint-line); background: var(--mint-soft); }
}
.sv-steps,.sv-cards{
margin-top: 1.5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.sv-step,.sv-card{
position: relative;
padding: 1.5rem 1.4rem;
border: 1px solid var(--line);
border-radius: 1.2rem;
background: var(--shell);
transition: border-color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.sv-step:hover,.sv-card:hover{ border-color: var(--mint-line); transform: translateY(-4px); }
}
.sv-num{
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.12em;
color: var(--mint);
}
.sv-step h3,.sv-card h3{ margin-top: 0.7rem; font-size: 1.05rem; }
.sv-step p,.sv-card p{ margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }
.sv-utisak{ margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.sv-utisak-stars{ color: var(--mint); font-size: 0.85rem; letter-spacing: 0.18em; }
.sv-utisak blockquote{ margin: 0; flex: 1; }
.sv-utisak blockquote p{ margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-soft); }
.sv-utisak figcaption{ display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; }
.sv-utisak figcaption strong{ color: var(--text); font-weight: 600; }
.sv-utisak figcaption span{ color: var(--faint); }
.sv-proof-h{ margin-top: 2.4rem; font-size: 1.05rem; }
.sv-radovi{ margin-top: 1rem; }
.sv-svi-radovi{ margin-top: 1.1rem; }
.sv-bar{
display: block;
width: 2rem;
height: 0.35rem;
border-radius: 999px;
background-image: var(--grad);
margin-bottom: 0.9rem;
}
.sv-callout{
display: flex;
gap: 0.9rem;
align-items: flex-start;
padding: 1.3rem 1.4rem;
border: 1px solid var(--mint-line);
border-radius: 1.2rem;
background: var(--mint-soft);
color: var(--text);
}
.sv-callout svg{
width: 1.3rem;
height: 1.3rem;
flex: none;
margin-top: 0.15rem;
stroke: var(--mint);
fill: none;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.sv-pkgs{
margin-top: 1.5rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
align-items: start;
}
.sv-pkgs--one{ grid-template-columns: minmax(0, 26rem); }
.sv-pkgs--two{ grid-template-columns: repeat(2, 1fr); }
.sv-pkg{
position: relative;
display: flex;
flex-direction: column;
padding: 1.6rem 1.5rem;
border: 1px solid var(--line);
border-radius: 1.3rem;
background: var(--shell);
}
.sv-pkg.featured{
border-color: var(--mint-line);
background: linear-gradient(180deg, rgba(var(--mint-rgb), 0.07), rgba(var(--mint-rgb), 0.015));
box-shadow: 0 24px 60px -34px rgba(var(--mint-rgb), 0.4);
}
.sv-pkg-badge{
position: absolute;
top: -0.75rem;
left: 1.5rem;
padding: 0.28rem 0.75rem;
border-radius: 999px;
background-image: var(--grad);
color: var(--mint-ink);
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sv-pkg h3{ font-size: 1.1rem; }
.sv-price{
margin-top: 0.75rem;
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--text);
}
.sv-period{ margin-top: 0.25rem; font-size: 0.85rem; color: var(--faint); }
.sv-pkg ul{
list-style: none;
margin: 1.2rem 0 0;
padding: 1.2rem 0 0;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.sv-pkg li{
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.9rem;
color: var(--muted);
}
.sv-pkg li svg{
width: 0.95rem;
height: 0.95rem;
flex: none;
margin-top: 0.22rem;
stroke: var(--mint);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.sv-cta{ margin-top: clamp(3rem, 6vw, 4.5rem); }
.sv-cta .inner{ padding: clamp(1.8rem, 4vw, 2.6rem); }
.sv-cta-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.sv-cta-row h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sv-cta-row p{ margin-top: 0.5rem; color: var(--muted); max-width: 46ch; }
.sv-cta-btns{ display: flex; flex-wrap: wrap; gap: 0.75rem; }
.sv-other{ margin-top: 3rem; }
.sv-other :is(h2, h4){
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 1rem;
}
.sv-other ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.sv-other a{
display: inline-block;
padding: 0.5rem 1rem;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 0.88rem;
color: var(--muted);
transition: color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.sv-other a.active,.sv-other a:hover{
color: var(--mint);
border-color: var(--mint-line);
background: var(--mint-soft);
}
.usluge-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.1rem;
}
.usluge-grid .span2{ grid-column: span 2; }
.check-list{
list-style: none;
margin: 0;
padding: 1.1rem 0 0;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.check-list li{
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: 0.88rem;
color: var(--muted);
}
.check-list li svg{
width: 0.95rem;
height: 0.95rem;
flex: none;
margin-top: 0.22rem;
stroke: var(--mint);
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.pkg-chips{ display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cta-card > .inner{
background: linear-gradient(180deg, rgba(var(--mint-rgb), 0.12), rgba(var(--mint-rgb), 0.03));
border-color: var(--mint-line);
justify-content: center;
align-items: flex-start;
}
.cta-card h3{ font-size: 1.25rem; }
.note-line{
margin-top: 2rem;
color: var(--faint);
font-size: 0.88rem;
}
.contact-cards{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.9rem;
}
.info-card{
display: block;
border: 1px solid var(--line);
border-radius: 1.1rem;
background: var(--shell);
padding: 1.3rem 1.3rem 1.2rem;
transition: border-color 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
a.info-card:hover{ border-color: var(--mint-line); background: var(--mint-soft); }
}
.info-card .cap{
display: block;
margin-top: 0.9rem;
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--faint);
}
.info-card .val{
display: block;
margin-top: 0.25rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.02rem;
}
.firm-card{
border: 1px solid var(--line);
border-radius: 1.1rem;
background: var(--shell);
padding: 1.2rem 1.3rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 2rem;
font-size: 0.9rem;
color: var(--muted);
}
.firm-card .t{
display: flex;
align-items: center;
gap: 0.55rem;
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
}
.firm-card svg{
width: 1.05rem;
height: 1.05rem;
stroke: var(--mint);
fill: none;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.socials{ display: flex; align-items: center; gap: 0.7rem; }
.socials .lbl{ color: var(--faint); font-size: 0.85rem; margin-right: 0.3rem; }
.socials a{
width: 2.5rem;
height: 2.5rem;
border-radius: 0.8rem;
border: 1px solid var(--line);
background: var(--shell);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--muted);
transition:
color 0.4s var(--ease-out),
border-color 0.4s var(--ease-out),
transform 0.4s var(--ease-out);
}
.socials a svg{ width: 1.05rem; height: 1.05rem; }
@media (hover: hover) and (pointer: fine){
.socials a:hover{
color: var(--mint);
border-color: var(--mint-line);
transform: translateY(-2px);
}
}
.map-card > .inner{ padding: 0.55rem; gap: 0; }
.map-frame{
position: relative;
border-radius: calc(var(--r-inner) - 0.3rem);
overflow: hidden;
height: 26rem;
border: 1px solid rgba(var(--wash2-rgb), 0.05);
}
.map-frame iframe{
width: 100%;
height: 100%;
border: 0;
display: block;
filter: grayscale(1) invert(0.92) hue-rotate(120deg) saturate(2.2) brightness(0.86);
}
.map-load{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 0.2rem;
padding: 1rem;
border: 0;
cursor: pointer;
color: var(--text);
font: inherit;
background:
radial-gradient(circle at 50% 50%, rgba(var(--mint-rgb), 0.16), transparent 60%),
repeating-linear-gradient(0deg, rgba(var(--wash2-rgb), 0.05) 0 1px, transparent 1px 28px),
repeating-linear-gradient(90deg, rgba(var(--wash2-rgb), 0.05) 0 1px, transparent 1px 28px),
var(--panel);
}
.map-load:focus-visible{ outline-offset: -3px; }
.map-load-t{ font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; transition: color 0.25s ease; }
.map-load-s{ font-size: 0.75rem; color: var(--faint); }
@media (hover: hover) and (pointer: fine){
.map-load:hover .map-load-t{ color: var(--mint); }
}
.map-pin{
position: absolute;
left: 50%;
top: 50%;
width: 1.15rem;
height: 1.15rem;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 2;
}
.map-pin::before{
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: rgba(var(--mint-rgb), 0.45);
animation: ping 1.6s var(--ease-out) infinite;
}
.map-pin::after{
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--mint-fill);
border: 2px solid rgba(255, 255, 255, 0.85);
box-shadow: 0 0 18px rgba(var(--mint-rgb), 0.7);
}
@keyframes ping{
0% { transform: scale(1); opacity: 1; }
80%, 100% { transform: scale(2.6); opacity: 0; }
}
.map-chip{
position: absolute;
left: 0.8rem;
bottom: 0.8rem;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.45rem 0.85rem;
border-radius: 999px;
border: 1px solid var(--line-strong);
background: rgba(6, 10, 9, 0.82);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text);
pointer-events: none;
}
.map-chip svg{
width: 0.85rem;
height: 0.85rem;
stroke: var(--mint);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.map-link{
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-top: 0.9rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.88rem;
color: var(--mint);
}
.map-link svg{
width: 0.8rem;
height: 0.8rem;
transition: transform 0.45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.map-link:hover svg{ transform: translate(3px, -3px); }
}
.map-fallback{
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 70% at 50% 45%, rgba(10, 168, 140, 0.35), var(--panel)),
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: auto, 34px 34px, 34px 34px;
}
.faq{ max-width: 46rem; margin-inline: auto; display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item{
border: 1px solid var(--line);
border-radius: 1.1rem;
background: var(--shell);
overflow: hidden;
transition: border-color 0.5s var(--ease-out);
}
.faq-item.open{ border-color: var(--mint-line); }
.faq-q{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.2rem 1.4rem;
background: none;
border: 0;
cursor: pointer;
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: 1.02rem;
text-align: left;
}
.faq-q .pm{
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
transition: transform 0.5s var(--ease-out), background-color 0.5s var(--ease-out), border-color 0.5s var(--ease-out);
}
.faq-q .pm svg{
width: 0.8rem;
height: 0.8rem;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
}
.faq-item.open .faq-q .pm{
transform: rotate(45deg);
background: var(--mint-fill);
border-color: var(--mint);
color: var(--mint-ink);
}
.faq-a{
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s var(--ease-out);
}
.faq-item.open .faq-a{ grid-template-rows: 1fr; }
.faq-a > div{ overflow: hidden; }
.faq-a p{
padding: 0 1.4rem 1.3rem;
color: var(--muted);
font-size: 0.95rem;
}
.bl-tagcloud{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bl-tag{
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.3rem 0.6rem;
border: 1px solid var(--line);
border-radius: 6px;
background: var(--chip);
color: var(--chip-text);
font-family: var(--font-body);
font-size: 0.76rem;
cursor: pointer;
transition:
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
background-color 0.35s var(--ease-out);
}
.bl-tag span{ font-family: var(--font-mono); font-size: 0.6rem; color: var(--faint); }
.bl-tag.active{
color: var(--mint);
border-color: var(--mint-line);
background: var(--mint-soft);
}
.bl-tag.active span{ color: var(--mint); }
@media (hover: hover) and (pointer: fine){
.bl-tag:not(.active):hover{ border-color: var(--mint-line); color: var(--text); }
}
.bl-side-cta{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.8rem; }
.bl-cta-title{
font-family: var(--font-display);
font-weight: 600;
font-size: 1.15rem;
letter-spacing: -0.02em;
color: var(--text);
text-transform: none;
margin: 0;
}
.bl-side-cta p{ color: var(--muted); font-size: 0.88rem; line-height: 1.55; }
.bl-side-cta .btn{ width: 100%; justify-content: space-between; }
.bl-card{
display: grid;
grid-template-columns: 15rem minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--line);
border-radius: 1.4rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.05), rgba(var(--wash-rgb), 0.012));
transition:
transform 0.5s var(--ease-out),
border-color 0.5s var(--ease-out),
box-shadow 0.5s var(--ease-out);
}
.bl-card--feat{ grid-template-columns: minmax(0, 1fr); }
.bl-card--feat .bl-media{ aspect-ratio: 21 / 9; }
.bl-card--feat .bl-body{ padding: 1.5rem 1.6rem 1.6rem; gap: 0.7rem; }
.bl-card--feat .bl-body h3{ font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
.bl-card--feat .bl-body > p{
font-size: 1rem;
-webkit-line-clamp: 2;
}
.bl-card.hidden{ display: none; }
@media (hover: hover) and (pointer: fine){
.bl-card:hover{
transform: translateY(-6px);
border-color: var(--mint-line);
box-shadow: 0 26px 60px -30px rgba(var(--mint-rgb), 0.35);
}
.bl-card:hover .bl-media img{ transform: scale(1.06); }
}
.bl-media{
position: relative;
display: block;
height: 100%;
min-height: 10.5rem;
overflow: hidden;
background: var(--panel);
}
.bl-media img{
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.9) brightness(0.9);
transition: transform 0.8s var(--ease-out), filter 0.6s var(--ease-out);
}
.bl-media::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(var(--ink-rgb), 0.75));
pointer-events: none;
}
.bl-cat{
position: absolute;
left: 0.85rem;
bottom: 0.85rem;
z-index: 1;
padding: 0.32rem 0.7rem;
border-radius: 6px;
background: rgba(var(--ink-rgb), 0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--mint-line);
color: var(--mint);
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.bl-body{
display: flex;
flex-direction: column;
gap: 0.55rem;
padding: 1.25rem 1.4rem 1.25rem;
min-width: 0;
}
.bl-body h3{
font-size: 1.15rem;
line-height: 1.32;
text-wrap: balance;
}
.bl-body h3 a{ transition: color 0.35s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
.bl-body h3 a:hover{ color: var(--mint); }
}
.bl-body > p{
color: var(--muted);
font-size: 0.92rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bl-meta{
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: auto;
padding-top: 0.9rem;
border-top: 1px solid var(--line);
font-size: 0.78rem;
color: var(--faint);
}
.bl-av{
width: 1.9rem;
height: 1.9rem;
border-radius: 50%;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
background-image: var(--grad);
color: var(--mint-ink);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.66rem;
}
.zoomable{ cursor: zoom-in; }
.lightbox{
position: fixed;
inset: 0;
z-index: 60;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 5vw, 3rem);
background: rgba(6, 10, 9, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
opacity: 0;
transition: opacity 0.3s var(--ease-out);
}
.lightbox.open{ opacity: 1; }
.lightbox img{
max-width: 100%;
max-height: 100%;
border-radius: 1rem;
border: 1px solid var(--line-strong);
transform: scale(0.96);
transition: transform 0.35s var(--ease-out);
}
.lightbox.open img{ transform: scale(1); }
.lightbox-x{
position: absolute;
top: 1.2rem;
right: 1.2rem;
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: var(--shell);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.lightbox-x svg{ width: 1rem; height: 1rem; }
@media (hover: hover) and (pointer: fine){
.lightbox-x:hover{ border-color: var(--mint-line); color: var(--mint); }
}
.bp-related{ margin-top: 3rem; }
.bp-related h4,.bp-related h2{
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.62rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 1.1rem;
}
.bp-rel-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.price-table{
overflow-x: auto;
border: 1px solid var(--line);
border-radius: 1.1rem;
background: var(--shell);
}
.price-table table{ width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.price-table th,.price-table td{
padding: 0.95rem 1.2rem;
text-align: left;
vertical-align: baseline;
border-bottom: 1px solid var(--line);
}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{ border-bottom: 0; }
.price-table thead th{
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.price-table tbody th{ font-weight: 600; }
.price-table tbody th a{ color: var(--text); }
.price-table tbody th a:hover{ color: var(--mint); }
.price-table .pt-cena{ color: var(--mint); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table .pt-nap{ color: var(--muted); }
.rv-cta{
margin-top: clamp(2.5rem, 5vw, 3.5rem);
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
text-align: center;
}
.rv-cta h3{ font-size: clamp(1.35rem, 2.6vw, 1.9rem); max-width: 30ch; text-wrap: balance; }
.price-card ul.pc-short li:nth-child(n+5){ display: none; }
.pc-more{
margin: 0.2rem 0 0.4rem;
padding: 0.6rem 0;
border: 0;
background: none;
color: var(--mint);
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
}
.bp-rel{
display: flex;
flex-direction: column;
gap: 0.7rem;
border: 1px solid var(--line);
border-radius: 1.1rem;
overflow: hidden;
background: var(--shell);
transition: border-color 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.bp-rel img{ width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.bp-rel span{
padding: 0 1rem 1.1rem;
font-family: var(--font-display);
font-weight: 600;
font-size: 0.92rem;
line-height: 1.35;
}
@media (hover: hover) and (pointer: fine){
.bp-rel:hover{ border-color: var(--mint-line); transform: translateY(-4px); }
}
@media (max-width: 1020px){
.side-sticky{ position: static; max-height: none; overflow: visible;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
.bl-side-cta{ grid-column: span 2; }
.bp-rel-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px){
.bl-card{ grid-template-columns: minmax(0, 1fr); }
.bl-media{ aspect-ratio: 16 / 9; height: auto; }
.bl-card--feat .bl-media{ aspect-ratio: 16 / 9; }
.side-sticky{ grid-template-columns: 1fr; }
.bl-side-cta{ grid-column: span 1; }
.bp-rel-grid{ grid-template-columns: 1fr; }
}
.bp-author-av{ width: 3.2rem; height: 3.2rem; font-size: 0.95rem; }
.bp-nav{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 3rem;
}
.bp-nav-item{
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.15rem 1.3rem;
border: 1px solid var(--line);
border-radius: 1.2rem;
background: var(--shell);
transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.bp-nav-item.empty{ border: 0; background: none; }
.bp-nav-item.next{ text-align: right; align-items: flex-end; }
.bp-nav-cap{
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--mint);
}
.bp-nav-cap svg{ width: 0.85rem; height: 0.85rem; }
.bp-nav-item strong{
font-family: var(--font-display);
font-weight: 600;
font-size: 0.98rem;
line-height: 1.35;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
a.bp-nav-item:hover{ border-color: var(--mint-line); transform: translateY(-3px); }
a.bp-nav-item:hover strong{ color: var(--mint); }
}
.bp-rel-cat{
padding: 0 1rem;
margin-top: 0.15rem;
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mint);
}
@media (max-width: 768px){
.bp-nav{ grid-template-columns: 1fr; }
.bp-nav-item.next{ text-align: left; align-items: flex-start; }
.bp-nav-item.empty{ display: none; }
}
.pay-panel{
position: relative;
overflow: hidden;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding: clamp(1.6rem, 3.5vw, 2.4rem);
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(1.5rem, 4vw, 3rem);
flex-wrap: wrap;
border: 1px solid var(--mint-line);
border-radius: var(--r-shell);
background:
linear-gradient(150deg, rgba(var(--mint-rgb), 0.09), rgba(36, 213, 219, 0.04) 45%, rgba(var(--wash-rgb), 0.012));
box-shadow: 0 30px 70px -45px rgba(var(--mint-rgb), 0.5);
}
.pay-panel::before{
content: "";
position: absolute;
right: -8%;
top: -70%;
width: 26rem;
height: 26rem;
border-radius: 50%;
background: radial-gradient(closest-side circle, rgba(var(--mint-rgb), 0.18), transparent 100%);
filter: blur(50px);
pointer-events: none;
}
.pay-main{ position: relative; min-width: 0; flex: 1; }
.pay-head{ display: flex; align-items: center; gap: 1rem; }
.pay-ico{
width: 3.1rem;
height: 3.1rem;
flex: none;
border-radius: 1rem;
border: 1px solid var(--mint-line);
background: var(--mint-soft);
color: var(--mint);
display: inline-flex;
align-items: center;
justify-content: center;
}
.pay-ico .ico{ width: 1.55rem; height: 1.55rem; }
.pay-eyebrow{
display: block;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--mint);
margin-bottom: 0.25rem;
}
.pay-head :is(h2, h3){
font-size: clamp(1.15rem, 2.2vw, 1.5rem);
line-height: 1.25;
}
.pay-logos{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
margin-top: 1.4rem;
}
.pay-logo{
display: inline-flex;
align-items: center;
justify-content: center;
height: 2.5rem;
min-width: 4rem;
padding: 0 0.8rem;
border-radius: 0.6rem;
background: #fff;
box-shadow: 0 2px 10px -4px rgba(var(--shadow-rgb), 0.6);
transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.pay-logo svg{ width: 1.9rem; height: 1.9rem; }
.pay-logo b{
font-family: var(--font-display);
font-weight: 700;
font-size: 0.86rem;
letter-spacing: 0.01em;
white-space: nowrap;
}
.pay-logo b i{ font-style: normal; }
.pl-visa{
color: #1434cb;
font-style: italic;
letter-spacing: 0.06em !important;
font-size: 0.95rem !important;
}
.pl-dina{ color: #d8232a; }
.pl-dina i{ color: #003c78; }
.pl-paypal{ color: #009cde; }
.pl-paypal i{ color: #003087; }
.pl-stripe{
color: #635bff;
font-size: 0.95rem !important;
letter-spacing: -0.015em !important;
}
@media (hover: hover) and (pointer: fine){
.pay-logo:hover{
transform: translateY(-3px);
box-shadow: 0 10px 22px -8px rgba(var(--shadow-rgb), 0.7);
}
}
.pay-note{
position: relative;
margin-top: 1.2rem;
max-width: 58ch;
color: var(--muted);
font-size: 0.9rem;
line-height: 1.6;
}
.pay-cta{ position: relative; flex: none; }
.ai-band{
position: relative;
overflow: hidden;
margin-top: clamp(1.5rem, 3vw, 2.25rem);
padding: clamp(1.4rem, 3.2vw, 2.2rem);
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: center;
gap: clamp(1.25rem, 3.5vw, 2.75rem);
border: 1px solid var(--mint-line);
border-radius: var(--r-shell);
background:
linear-gradient(150deg, rgba(var(--mint-rgb), 0.09), rgba(36, 213, 219, 0.04) 45%, rgba(var(--wash-rgb), 0.012));
box-shadow: 0 30px 70px -45px rgba(var(--mint-rgb), 0.5);
}
.ai-band-copy{ display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; min-width: 0; }
.ai-band h3{ font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; text-wrap: balance; }
.ai-band p{ color: var(--muted); max-width: 52ch; }
.ai-band-links{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.ai-band-links a{
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
border: 1px solid var(--line);
border-radius: 0.9rem;
color: var(--text);
font-weight: 500;
transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.ai-band-links .ico{ width: 1.3rem; height: 1.3rem; flex: none; color: var(--mint); }
.ai-band-links span{ flex: 1; min-width: 0; }
.ai-band-links .go{ width: 0.95rem; height: 0.95rem; flex: none; opacity: 0.55; transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out); }
@media (hover: hover) and (pointer: fine){
.ai-band-links a:hover{ border-color: var(--mint-line); background: var(--panel-2); }
.ai-band-links a:hover .go{ opacity: 1; transform: translate(2px, -2px); }
}
@media (max-width: 860px){
.pay-panel{ flex-direction: column; align-items: stretch; }
.pay-cta{ width: 100%; justify-content: space-between; }
}
.hero-trust{
list-style: none;
margin: 0.4rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 2.4rem;
}
.hero-trust li{
display: flex;
align-items: baseline;
gap: 0.45rem;
}
.hero-trust strong{
font-family: var(--font-display);
font-weight: 600;
font-size: 1.15rem;
color: var(--mint);
letter-spacing: -0.02em;
white-space: nowrap;
}
.hero-trust span{
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--faint);
}
.home-blog{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.home-blog .bl-card{ grid-template-columns: minmax(0, 1fr); }
.home-blog .bl-media{ aspect-ratio: 16 / 10; height: auto; min-height: 0; }
.home-contact{
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
padding: clamp(2rem, 4vw, 3rem);
border: 1px solid var(--line);
border-radius: var(--r-shell);
background: linear-gradient(150deg, rgba(var(--wash-rgb), 0.05), rgba(var(--wash-rgb), 0.012));
position: relative;
overflow: hidden;
}
.home-contact::before{
content: "";
position: absolute;
right: -10%;
top: -60%;
width: 28rem;
height: 28rem;
border-radius: 50%;
background: radial-gradient(closest-side circle, rgba(var(--mint-rgb), 0.16), transparent 100%);
filter: blur(50px);
pointer-events: none;
}
.home-contact-copy{
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
}
.home-contact-copy h2{ font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.home-contact-copy > p{ color: var(--muted); max-width: 46ch; }
.home-contact-copy .hero-actions{ justify-content: flex-start; }
.home-contact-list{
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.home-contact-list li{
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 1.15rem;
border: 1px solid var(--line);
border-radius: 1.1rem;
background: rgba(var(--ink-rgb), 0.5);
transition: border-color 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.home-contact-list .icon-tile{ width: 2.5rem; height: 2.5rem; border-radius: 0.8rem; }
.home-contact-list .icon-tile .ico{ width: 1.15rem; height: 1.15rem; }
.home-contact-list .cap{
display: block;
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 0.2rem;
}
.home-contact-list div > a,.home-contact-list div > span:last-child{
font-family: var(--font-display);
font-weight: 600;
font-size: 0.98rem;
color: var(--text);
}
@media (hover: hover) and (pointer: fine){
.home-contact-list li:hover{ border-color: var(--mint-line); transform: translateX(3px); }
.home-contact-list div > a:hover{ color: var(--mint); }
}
@media (max-width: 1020px){
.home-blog{ grid-template-columns: repeat(2, 1fr); }
.home-contact{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
.home-blog{ grid-template-columns: 1fr; }
.hero-trust{ gap: 0.5rem 1.4rem; }
}
.kt-wrap{ padding-bottom: clamp(4rem, 8vw, 6rem); }
.kt-quick{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.kt-q{
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1.1rem 1.2rem;
border: 1px solid var(--line);
border-radius: 1.2rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.05), rgba(var(--wash-rgb), 0.012));
transition:
border-color 0.45s var(--ease-out),
transform 0.45s var(--ease-out),
box-shadow 0.45s var(--ease-out);
}
.kt-q-ico{
width: 2.7rem;
height: 2.7rem;
flex: none;
border-radius: 0.85rem;
border: 1px solid var(--mint-line);
background: var(--mint-soft);
color: var(--mint);
display: inline-flex;
align-items: center;
justify-content: center;
}
.kt-q-ico .ico{ width: 1.3rem; height: 1.3rem; }
.kt-q-txt{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.kt-q-txt em{
font-style: normal;
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--faint);
}
.kt-q-txt strong{
font-family: var(--font-display);
font-weight: 600;
font-size: 0.98rem;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kt-q-go{
width: 0.95rem;
height: 0.95rem;
flex: none;
color: var(--faint);
transition: transform 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine){
.kt-q:hover{
border-color: var(--mint-line);
transform: translateY(-4px);
box-shadow: 0 22px 50px -30px rgba(var(--mint-rgb), 0.4);
}
.kt-q:hover .kt-q-go{ transform: translate(3px, -3px); color: var(--mint); }
}
.kt-grid{
display: grid;
grid-template-columns: minmax(0, 1fr) 20rem;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
margin-top: clamp(2rem, 4vw, 3rem);
scroll-margin-top: 7rem;
}
.kt-form-card > .inner{ padding: clamp(1.5rem, 3vw, 2.2rem); gap: 0; }
.kt-form-head{ margin-bottom: 1.6rem; }
.kt-form-head h2{ font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
.kt-form-head p{ margin-top: 0.6rem; color: var(--muted); font-size: 0.95rem; line-height: 1.6; }
#contactForm{ display: flex; flex-direction: column; gap: 1.1rem; }
.field-label{
display: block;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 0.65rem;
}
.req{ color: var(--mint); }
.kt-picks{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
.kt-pick{
padding: 0.45rem 0.85rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--shell);
color: var(--muted);
font-family: var(--font-body);
font-size: 0.85rem;
cursor: pointer;
transition:
color 0.35s var(--ease-out),
border-color 0.35s var(--ease-out),
background-color 0.35s var(--ease-out);
}
.kt-pick.active{
color: var(--mint-ink);
border-color: transparent;
background-image: var(--grad);
font-weight: 600;
}
@media (hover: hover) and (pointer: fine){
.kt-pick:not(.active):hover{ color: var(--text); border-color: var(--mint-line); background: var(--mint-soft); }
}
.field-err{
display: none;
font-size: 0.78rem;
color: var(--err);
margin-top: 0.3rem;
}
.field.invalid .field-err{ display: block; }
.field.invalid input,.field.invalid textarea{
border-color: rgba(var(--err-rgb), 0.75);
box-shadow: 0 0 0 3px rgba(var(--err-rgb), 0.12);
}
.field-foot{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.kt-count{
margin-top: 0.3rem;
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--faint);
flex: none;
}
.kt-submit{ justify-content: space-between; margin-top: 0.3rem; }
.kt-hp{
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
.kt-fail{
margin: 0;
padding: 0.85rem 1rem;
border: 1px solid rgba(var(--err-rgb), 0.5);
border-radius: 0.8rem;
background: rgba(var(--err-rgb), 0.08);
color: var(--text);
font-size: 0.9rem;
}
.kt-fail a{ color: var(--mint); text-decoration: underline; text-underline-offset: 2px; }
.kt-submit[aria-busy="true"]{ opacity: 0.7; cursor: progress; }
.kt-flash{
display: none;
margin: 0 0 1.25rem;
padding: 0.85rem 1rem;
border-radius: 0.8rem;
font-size: 0.92rem;
}
.kt-flash:target{ display: block; }
.kt-flash--ok{ border: 1px solid var(--mint-line); background: var(--mint-soft); color: var(--text); }
.kt-flash--err{ border: 1px solid rgba(var(--err-rgb), 0.5); background: rgba(var(--err-rgb), 0.08); color: var(--text); }
.kt-success{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.9rem;
padding: 2.5rem 1rem;
}
.kt-success-ico{
width: 3.4rem;
height: 3.4rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-image: var(--grad);
color: var(--mint-ink);
}
.kt-success-ico svg{ width: 1.5rem; height: 1.5rem; }
.kt-success h3{ font-size: 1.35rem; }
.kt-success p{ color: var(--muted); font-size: 0.95rem; max-width: 34ch; }
.kt-success a{ color: var(--mint); }
.kt-side{ display: flex; flex-direction: column; gap: 1rem; }
.kt-widget{
border: 1px solid var(--line);
border-radius: 1.2rem;
background: linear-gradient(170deg, rgba(var(--wash-rgb), 0.045), rgba(var(--wash-rgb), 0.01));
padding: 1.2rem 1.25rem;
}
.kt-widget :is(h2, h4){
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--faint);
margin-bottom: 1rem;
}
.kt-hours,.kt-firm{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.kt-hours li,.kt-firm li{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
font-size: 0.88rem;
color: var(--muted);
}
.kt-hours strong,.kt-firm strong{
font-family: var(--font-display);
font-weight: 600;
color: var(--text);
font-variant-numeric: tabular-nums;
}
.kt-hours strong.off{ color: var(--faint); font-weight: 500; }
.kt-status{
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 0.9rem;
border-top: 1px solid var(--line);
font-size: 0.84rem;
color: var(--muted);
}
.kt-dot{
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
flex: none;
background: var(--faint);
}
.kt-status.open .kt-dot{
background: var(--mint-fill);
box-shadow: 0 0 10px var(--mint-fill);
}
.kt-status.open{ color: var(--mint); }
.kt-addr{
margin-top: -0.4rem;
margin-bottom: 0.9rem;
font-family: var(--font-display);
font-weight: 600;
color: var(--text);
}
.kt-map{ height: 12rem; }
.kt-dokazi,.kt-faq{ margin-top: clamp(3.5rem, 7vw, 5rem); }
@media (max-width: 1020px){
.kt-grid{ grid-template-columns: 1fr; }
.kt-side{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}
@media (max-width: 768px){
.kt-quick{ grid-template-columns: 1fr; }
.kt-side{ grid-template-columns: 1fr; }
}
html:has(.pz-form:not([hidden])){ scroll-padding-bottom: 7rem; }
.pz-empty{ color: var(--faint); }
:focus-visible{
outline: 2px solid var(--mint);
outline-offset: 3px;
border-radius: 4px;
}
.btn:focus-visible,.nav-link:focus-visible,.bl-chip:focus-visible,.kt-pick:focus-visible{ outline-offset: 4px; }
.faq-q:focus-visible{ outline-offset: -3px; }
.shell-card:focus-visible,.bl-card:focus-visible,.kt-q:focus-visible,.work-card:focus-visible{ outline-offset: 6px; }
:focus:not(:focus-visible){ outline: none; }
.skip-link{
position: fixed;
top: 0.75rem;
left: 0.75rem;
z-index: 60;
padding: 0.7rem 1.1rem;
border-radius: 999px;
background: var(--mint-fill);
color: var(--mint-ink);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transform: translateY(-180%);
transition: transform 0.2s var(--ease-out);
}
.skip-link:focus{ transform: none; }
main:focus{ outline: none; }
section[id],.kt-grid[id],[id^="usluge"],[id^="cenovnik"]{ scroll-margin-top: 6.5rem; }
.services-grid,.pricing-grid,.works-grid{ perspective: 1200px; }
.shell-card{
transform: translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
transform-style: preserve-3d;
}
.work-open{
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
transform: translate(-50%, -50%) scale(0.94);
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.1rem;
border-radius: 999px;
background-image: var(--grad);
color: var(--mint-ink);
font-family: var(--font-display);
font-weight: 600;
font-size: 0.88rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.work-open svg{ width: 0.85rem; height: 0.85rem; }
@media (hover: hover) and (pointer: fine){
.work-card:hover .work-open{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.side-sticky{
position: sticky;
top: 6.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
max-height: calc(100vh - 8rem);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--line-strong) transparent;
padding-right: 0.2rem;
}
.side-sticky::-webkit-scrollbar{ width: 6px; }
.side-sticky::-webkit-scrollbar-thumb{ background: var(--line-strong); border-radius: 999px; }
@media (max-width: 1020px){
.services-grid{ grid-template-columns: repeat(2, 1fr); }
.rv-grid{ grid-template-columns: repeat(2, 1fr); }
.quick-row{ grid-template-columns: repeat(3, 1fr); }
.light-cards{ grid-template-columns: repeat(2, 1fr); }
.usluge-grid{ grid-template-columns: 1fr 1fr; }
.usluge-grid .span2{ grid-column: span 2; }
.sv-layout{ grid-template-columns: 1fr; gap: 0; }
.sv-rail{ display: none; }
.sv-cols{ grid-template-columns: 1fr; }
.side-sticky{ position: static; max-height: none; overflow: visible;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.sv-steps,.sv-cards,.sv-pkgs{ grid-template-columns: repeat(2, 1fr); }
.sv-pkgs--one{ grid-template-columns: minmax(0, 26rem); }
.works-grid{ grid-template-columns: repeat(2, 1fr); }
.pricing-grid{ grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }
.why-grid{ grid-template-columns: 1fr; }
.contact-grid{ grid-template-columns: 1fr; }
.steps{ flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-inline: 0.5rem; scrollbar-width: none; }
.steps::-webkit-scrollbar{ display: none; }
.step{ min-width: 10.5rem; }
.reviews-head{ flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px){
.nav-links,.nav .btn{ display: none; }
.burger{ display: block; }
.quick-row{ grid-template-columns: repeat(2, 1fr); }
.quick-row > .quick-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
.rv-grid{ grid-template-columns: 1fr; }
.rv-card{ rotate: 0deg; }
.sv-list,.sv-steps,.sv-cards,.sv-pkgs{ grid-template-columns: 1fr; }
.side-sticky{ grid-template-columns: 1fr; }
.sv-title-row{ gap: 0.8rem; }
.sv-title-ico{ width: 2.8rem; height: 2.8rem; }
.sv-cta-row{ flex-direction: column; align-items: flex-start; }
.light-cards{ grid-template-columns: 1fr; }
.light-cards > .light-card:nth-child(even){ margin-top: 0; }
.services-grid{ grid-template-columns: 1fr; }
.usluge-grid{ grid-template-columns: 1fr; }
.usluge-grid .span2{ grid-column: span 1; }
.contact-cards{ grid-template-columns: 1fr; }
.works-grid{ grid-template-columns: 1fr; }
.form-row{ grid-template-columns: 1fr; }
.process-nav{ position: static; margin-bottom: 1rem; justify-content: flex-end; }
.section-head .head-row{ flex-direction: column; align-items: flex-start; }
}
.fit-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: start;
}
.fit-card > .inner{ gap: 1.25rem; }
.fit-card h3{
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 650;
letter-spacing: -0.01em;
padding-bottom: 1.1rem;
border-bottom: 1px solid var(--line);
}
.fit-card ul{
list-style: none;
display: flex;
flex-direction: column;
gap: 1rem;
margin: 0;
padding: 0;
}
.fit-card li{
display: grid;
grid-template-columns: auto 1fr;
gap: 0.85rem;
align-items: start;
font-size: 0.97rem;
line-height: 1.6;
color: var(--muted);
}
.fit-mark{
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 1.55rem;
height: 1.55rem;
margin-top: 0.1rem;
border-radius: 50%;
}
.fit-mark svg{ width: 1rem; height: 1rem; }
.fit-yes .fit-mark{
color: var(--mint);
background: var(--mint-soft);
box-shadow: inset 0 0 0 1px var(--mint-line);
}
.fit-no .fit-mark{
color: var(--faint);
background: rgba(var(--wash2-rgb), 0.05);
box-shadow: inset 0 0 0 1px var(--line);
}
.fit-yes{ border-color: var(--mint-line); }
.fit-no > .inner{ opacity: 0.82; }
.fit-grid--3{ grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.fit-grid--3 .fit-card > .inner{ height: 100%; }
@media (max-width: 1020px) and (min-width: 901px){
.fit-grid--3{ grid-template-columns: 1fr 1fr; }
}
.fit-card--usluge li a{ color: var(--text); font-weight: 550; }
.fit-desc{
display: block;
margin-top: 0.2rem;
font-size: 0.875rem;
line-height: 1.5;
color: var(--muted);
}
.fit-foot{
margin-top: 1.75rem;
text-align: center;
color: var(--faint);
font-size: 0.97rem;
}
.fit-foot a{ color: var(--mint); text-decoration: none; border-bottom: 1px solid var(--mint-line); }
@media (hover: hover) and (pointer: fine){
.fit-foot a:hover{ border-bottom-color: var(--mint); }
}
@media (prefers-color-scheme: light){
html:not(.theme-dark) .step.active .step-num{ color: var(--mint-ink); }
html:not(.theme-dark) .cl-logo img{ filter: invert(1); opacity: 0.55; }
html:not(.theme-dark) .map-frame iframe{ filter: none; }
html:not(.theme-dark) .work-thumb img,html:not(.theme-dark) .bl-media img{ filter: none; }
}
html.theme-light .cl-logo img{ filter: invert(1); opacity: 0.55; }
html.theme-light .map-frame iframe{ filter: none; }
html.theme-light .work-thumb img,html.theme-light .bl-media img{ filter: none; }
.page-fx{
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.page-fx > span{
position: absolute;
display: block;
}
.page-fx-grid{
inset: 0;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 78px 78px;
opacity: 0.55;
}
.page-fx-canvas{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.page-fx-marks{
inset: 0;
background-color: var(--line-strong);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Cpath d='M39 34.5v9M34.5 39h9' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='78' height='78'%3E%3Cpath d='M39 34.5v9M34.5 39h9' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
-webkit-mask-size: 78px 78px;
mask-size: 78px 78px;
opacity: 0.22;
}
.page-fx-aurora{
right: -25%;
top: -20%;
width: 95vw;
height: 130%;
background:
radial-gradient(closest-side circle at 62% 34%, var(--glow) 0%, transparent 100%),
radial-gradient(closest-side circle at 84% 60%, var(--glow-deep) 0%, transparent 100%),
radial-gradient(closest-side circle at 46% 72%, rgba(10, 168, 140, 0.28) 0%, transparent 100%);
background-size: 62% 62%, 54% 54%, 46% 46%;
background-repeat: no-repeat;
background-position: 0% 0%, 60% 40%, 20% 80%;
filter: blur(46px);
will-change: transform, opacity;
animation: aurora 15s var(--ease-in-out) infinite;
}
.page-fx-aurora2{
right: -10%;
top: -10%;
width: 70vw;
height: 110%;
background:
radial-gradient(closest-side circle at 50% 50%, rgba(36, 213, 219, 0.3) 0%, transparent 100%),
radial-gradient(closest-side circle at 50% 50%, rgba(var(--mint-rgb), 0.26) 0%, transparent 100%);
background-size: 48% 48%, 40% 40%;
background-repeat: no-repeat;
background-position: 20% 25%, 78% 70%;
filter: blur(54px);
will-change: transform, opacity;
animation: aurora-2 19s var(--ease-in-out) infinite;
}
header,footer{ position: relative; z-index: 1; }
footer{ background: var(--bg); }
.nav-lang{
width: auto;
min-width: 2.5rem;
padding-inline: 0.55rem;
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.08em;
text-decoration: none;
color: var(--text);
}
.nav-lang span{ position: relative; }
.nav-lang:hover{ color: var(--mint); }
.ft-lang{
text-decoration: none;
color: var(--faint);
}
.ft-lang:hover{ color: var(--mint); }
.ft-lang .ft-theme-ico svg{ width: 100%; height: 100%; }
@media (max-width: 640px){
.nav-lang{ min-width: 2.25rem; padding-inline: 0.4rem; font-size: 0.65rem; }
}
.ck{
position: fixed;
left: 1.25rem;
bottom: 1.25rem;
z-index: 55;
width: min(25.5rem, calc(100vw - 2.5rem));
opacity: 0;
transform: translateY(18px) scale(0.985);
transform-origin: 0 100%;
transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out);
pointer-events: none;
}
.ck[hidden]{ display: none; }
.ck.is-open{ opacity: 1; transform: none; pointer-events: auto; }
.ck-card{
position: relative;
max-height: calc(100dvh - 2.5rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.35rem 1.35rem 1.1rem;
border-radius: var(--r-shell);
background-color: rgba(var(--ink-rgb), 0.84);
background-image:
radial-gradient(120% 80% at 0% 0%, rgba(var(--mint-rgb), 0.09), transparent 55%),
linear-gradient(160deg, var(--glass-sheen) 0%, transparent 38%);
backdrop-filter: blur(22px) saturate(180%) brightness(var(--glass-tame));
-webkit-backdrop-filter: blur(22px) saturate(180%) brightness(var(--glass-tame));
box-shadow:
inset 0 1px 0 var(--glass-edge),
inset 0 -1px 0 var(--glass-under),
0 30px 70px -28px rgba(var(--shadow-rgb), 0.95),
0 4px 14px -6px rgba(var(--shadow-rgb), 0.5);
}
.ck-card::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--glass-rim) 0%, transparent 32%, transparent 68%, var(--glass-rim2) 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.ck-eyebrow{
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0 0 0.75rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.ck-dot{
width: 0.42rem;
height: 0.42rem;
border-radius: 50%;
background: var(--mint-fill);
box-shadow: 0 0 10px rgba(var(--mint-rgb), 0.7);
}
.ck-title{
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.25;
color: var(--text);
}
.ck-text{
margin: 0;
font-size: 0.86rem;
line-height: 1.55;
color: var(--muted);
}
.ck-actions{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem;
margin-top: 1.15rem;
}
.ck-btn{
min-height: 2.75rem;
padding: 0.6rem 1rem;
border-radius: 999px;
border: 1px solid transparent;
font-family: var(--font-display);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.01em;
cursor: pointer;
transition:
transform 0.45s var(--ease-out),
background-position 0.7s var(--ease-out),
border-color 0.45s var(--ease-out),
background-color 0.45s var(--ease-out),
box-shadow 0.45s var(--ease-out);
}
.ck-btn:active{ transform: scale(0.98); }
.ck-btn{
background-color: rgba(var(--wash2-rgb), 0.07);
background-image: linear-gradient(180deg, rgba(var(--wash2-rgb), 0.05), transparent);
border-color: var(--line-strong);
color: var(--text);
box-shadow: inset 0 1px 0 var(--glass-edge);
}
@media (hover: hover) and (pointer: fine){
.ck-btn:hover{ border-color: var(--mint-line); background-color: rgba(var(--mint-rgb), 0.1); color: var(--mint); }
}
.ck-foot{
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 0.85rem;
}
.ck-link{
padding: 0.3rem 0;
border: 0;
background: none;
font: inherit;
font-size: 0.78rem;
color: var(--faint);
text-decoration: underline;
text-decoration-color: var(--line-strong);
text-underline-offset: 0.25em;
cursor: pointer;
transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out);
}
.ck-link:hover{ color: var(--mint); text-decoration-color: var(--mint-line); }
.ck-list{
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.ck-list li{ border-bottom: 1px solid var(--line); }
.ck-row{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 0.8rem 0;
cursor: pointer;
}
div.ck-row{ cursor: default; }
.ck-info{ display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.ck-name{ font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--text); }
.ck-desc{ font-size: 0.76rem; line-height: 1.5; color: var(--faint); }
.ck-always{
flex: none;
margin-top: 0.1rem;
padding: 0.2rem 0.55rem;
border-radius: 999px;
border: 1px solid var(--mint-line);
background: var(--mint-soft);
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mint);
}
.ck-switch{
appearance: none;
-webkit-appearance: none;
flex: none;
position: relative;
width: 2.6rem;
height: 1.5rem;
margin: 0;
border-radius: 999px;
border: 1px solid var(--toggle-line);
background: rgba(var(--wash2-rgb), 0.06);
cursor: pointer;
transition: background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.ck-switch::after{
content: "";
position: absolute;
top: 50%;
left: 0.2rem;
width: 1.02rem;
height: 1.02rem;
border-radius: 50%;
background: var(--muted);
transform: translate(0, -50%);
transition: transform 0.4s var(--ease-out), background-color 0.35s var(--ease-out);
}
.ck-switch:checked{
border-color: transparent;
background-image: var(--grad);
}
.ck-switch:checked::after{
background: var(--mint-ink);
transform: translate(1.1rem, -50%);
}
.ck-switch:focus-visible,.ck-btn:focus-visible,.ck-link:focus-visible,.ck-open:focus-visible{ outline: 2px solid var(--mint); outline-offset: 3px; }
.ck-open{
padding: 0;
border: 0;
background: none;
font: inherit;
letter-spacing: inherit;
text-transform: inherit;
color: inherit;
cursor: pointer;
transition: color 0.3s var(--ease-out);
}
.ck-open:hover{ color: var(--mint); }
@media (max-width: 640px){
.ck{
left: 0.75rem;
right: 0.75rem;
bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
width: auto;
}
.ck-card{ padding: 1.15rem 1.1rem 0.95rem; border-radius: 1.4rem; }
.ck-title{ font-size: 1.08rem; }
.ck-text{ font-size: 0.84rem; }
#ckPrefs .ck-list{ max-height: calc(100dvh - 14rem); overflow-y: auto; overscroll-behavior: contain; }
.ck-foot .ck-link,.ck-open{ min-height: 44px; display: inline-flex; align-items: center; }
}
@media (max-width: 768px){
.eyebrow,.tag,.dd-h,.mm-sub-h,.quick-card > span:not(.q-ico),.lp-cell .lbl,.process-nav,.step .step-num,.price-head .dur,.pop-band,.score .cap,.rv-count,.review-foot .g,.ft-motion,.ft-theme,.ft-lang,.contact-row .cap,.field label,.ft-stars,.ft-col :is(h2, h4),.ft-new,.ft-contact li span > em,.footer-bottom,.crumbs,.sv-rail-label,.sv-w :is(h2, h4),.sv-pkg-badge,.sv-other :is(h2, h4),.info-card .cap,.map-chip,.bl-tag span,.bl-cat,.bl-av,.bp-related h4,.bp-related h2,.price-table thead th,.bp-nav-cap,.bp-rel-cat,.pay-eyebrow,.hero-trust span,.home-contact-list .cap,.kt-q-txt em,.field-label,.kt-count,.kt-widget :is(h2, h4),.nav-lang,.ck-eyebrow,.ck-always{
font-size: 0.75rem;
}
}
html{
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
}
a,button,[role="button"],label,summary,input,select,textarea{
touch-action: manipulation;
}
.nav-wrap{
padding-top: env(safe-area-inset-top, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
footer{
padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
.mobile-menu{
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.lightbox{
padding: calc(1rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
overscroll-behavior: contain;
}
@media (max-width: 768px){
.eyebrow,.sv-rail-label,.sv-pkg-badge,.bl-cat,.pop-band,.price-head .dur,.footer-col h4,.kt-widget h4{
font-size: 0.75rem;
letter-spacing: 0.16em;
}
.tag,.tag--mint,.bl-tag{
font-size: 0.75rem;
padding: 0.5rem 0.85rem;
}
.small,.ft-col p.small,.cs-cap,.rv-count{
font-size: 0.85rem;
}
.hero-trust li span,.quick-card > span:not(.q-ico),.lp-cell .lbl,.process-nav span,.num em,.kt-hours li span{
font-size: 0.8rem;
letter-spacing: 0.02em;
}
.lp-cell .num{ white-space: nowrap; }
.quick-card > span:not(.q-ico){ font-size: 0.85rem; line-height: 1.3; }
.q-ico{ width: 2.6rem; height: 2.6rem; border-radius: 0.85rem; }
.quick-card .ico{ width: 1.35rem; height: 1.35rem; }
.quick-card:active .q-ico{
background-image: var(--grad);
border-color: transparent;
color: var(--mint-ink);
transition: none;
}
body,.light-card p,.info-card p{
font-size: 1rem;
line-height: 1.65;
}
h1{ line-height: 1.12; letter-spacing: -0.025em; }
h2{ line-height: 1.18; letter-spacing: -0.02em; }
h3{ line-height: 1.25; letter-spacing: -0.01em; }
.btn,.kt-pick,.rv-less,.faq-q,.mm-item,.step{
min-height: 44px;
}
.btn{ padding-block: 0.85rem; }
.kt-pick{
min-height: 44px;
padding: 0.7rem 1rem;
font-size: 0.9rem;
}
.process-nav button,#procPrev,#procNext{
width: 44px;
height: 44px;
}
.ft-top,.socials a{
position: relative;
}
.ft-top::after,.socials a::after{
content: "";
position: absolute;
inset: 50% 0 auto 50%;
width: max(100%, 44px);
height: max(100%, 44px);
transform: translate(-50%, -50%);
}
.pay-logo{
min-width: 44px;
min-height: 44px;
}
.sv-toc a,.bl-tags a,.bp-nav-item,.faq-q,.kt-q{
min-height: 44px;
display: flex;
align-items: center;
gap: 0.6rem;
}
.bl-tags .tag{
min-height: 44px;
display: inline-flex;
align-items: center;
}
.map-link,.bl-cat,.work-meta .go{
min-height: 44px;
display: inline-flex;
align-items: center;
}
.ft-legal a,.footer-bottom .legal a{
min-height: 44px;
display: inline-flex;
align-items: center;
}
.ft-top-btn{ width: 44px; height: 44px; }
.bl-card .bl-body h3 a{
display: inline-block;
min-height: 32px;
}
.crumbs{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.15rem 0.4rem;
font-size: 0.75rem;
}
.crumbs a,.crumbs span{
min-height: 44px;
display: inline-flex;
align-items: center;
}
.side-sticky,.sv-w{
min-width: 0;
max-width: 100%;
}
.ft-col ul li + li{ margin-top: 0.2rem; }
.ft-col ul a,.home-contact-list a,.kt-hours li{
display: inline-block;
min-height: 44px;
line-height: 44px;
}
.brand{ min-height: 44px; }
.bl-card{ position: relative; }
.bl-card .bl-body h3 a::after{
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.bl-card .bl-cat,.bl-card .bl-media{ position: relative; z-index: 2; }
.btn:active,.kt-pick:active,.work-card:active,.bl-card:active,.light-card:active,.price-card:active,.nf-link:active,.contact-row:active,.bp-rel:active{
transform: scale(0.978);
transition: transform 90ms ease-out;
}
.mm-item:active,.footer-col a:active{
opacity: 0.6;
transition: opacity 90ms ease-out;
}
.services-grid .shell-card,.pricing-grid .shell-card,.works-grid .shell-card{
transform: none !important;
}
input,textarea,select,.field input,.field textarea,.kt-field input,.kt-field textarea,#blSearch{
font-size: 16px;
}
.field input,.field textarea,.kt-field input,.kt-field textarea{
padding: 0.95rem 1rem;
}
.kt-field label{ font-size: 0.85rem; }
.kt-submit,form .btn--primary{
width: 100%;
justify-content: center;
}
.section{ padding-block: clamp(3rem, 11vw, 4.5rem); }
.container{
padding-inline: max(1.15rem, env(safe-area-inset-left, 0px));
padding-right: max(1.15rem, env(safe-area-inset-right, 0px));
}
.shell-card{ padding: 0.4rem; }
.shell-card > .inner{ padding: 1.25rem 1.1rem; }
.sv-layout > *,.contact-grid > *,.pricing-grid > *,.services-grid > *,.works-grid > *,.light-cards > *,.usluge-grid > *,.contact-cards > *,.kt-grid > *{
min-width: 0;
}
.hero h1{ font-size: clamp(2.1rem, 9.5vw, 3rem); }
.hero-inner{ gap: 1.15rem; }
.ai-band{ grid-template-columns: 1fr; }
.sv-rail{ display: none; }
.sv-layout{ grid-template-columns: 1fr; }
.process-steps,.steps{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
margin-inline: calc(-1 * max(1.15rem, env(safe-area-inset-left, 0px)));
padding-inline: max(1.15rem, env(safe-area-inset-left, 0px));
padding-bottom: 0.35rem;
}
.process-steps::-webkit-scrollbar,.steps::-webkit-scrollbar{ display: none; }
.process-steps > *,.steps > *,.step{
flex: 0 0 auto;
scroll-snap-align: start;
}
.mm-nav,.mm-group{
max-width: 100%;
overflow-x: hidden;
}
.mm-item{
padding-block: 0.85rem;
font-size: 1.05rem;
}
.burger{ width: 46px; height: 46px; }
.mobile-menu{
inset: auto 0 0 0;
max-height: min(88vh, 720px);
padding: 1.25rem 1.35rem calc(2rem + env(safe-area-inset-bottom, 0px));
border-radius: 1.5rem 1.5rem 0 0;
border-top: 1px solid rgba(232, 255, 246, 0.12);
box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.7);
transform: translateY(101%);
transition:
transform 0.42s cubic-bezier(0.32, 0.72, 0, 1),
opacity 0.28s var(--ease-out),
visibility 0.42s;
}
.mobile-menu.open{ transform: translateY(0); }
.mm-bg{
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(17, 26, 23, 0.94);
-webkit-backdrop-filter: blur(24px) saturate(150%);
backdrop-filter: blur(24px) saturate(150%);
}
body.menu-open::before{
content: "";
position: fixed;
inset: 0;
z-index: 38;
background: rgba(4, 8, 7, 0.55);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: mmScrim 0.32s var(--ease-out) both;
}
@keyframes mmScrim{
from { opacity: 0; }
to { opacity: 1; }
}
.mobile-menu::before{
content: "";
position: absolute;
top: 0.55rem;
left: 50%;
width: 2.4rem;
height: 0.25rem;
border-radius: 999px;
background: rgba(232, 255, 246, 0.28);
transform: translateX(-50%);
z-index: 2;
}
.mm-nav{ position: relative; z-index: 1; padding-top: 0.6rem; }
.mm-glow{ top: -6%; width: 22rem; height: 14rem; }
.works-grid{
display: flex;
gap: 0.9rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
margin-inline: calc(-1 * max(1.15rem, env(safe-area-inset-left, 0px)));
padding-inline: max(1.15rem, env(safe-area-inset-left, 0px));
padding-bottom: 0.5rem;
}
.works-grid::-webkit-scrollbar{ display: none; }
.works-grid > .work-card{
flex: 0 0 82%;
scroll-snap-align: center;
}
.works-grid > .work-card:last-child{ scroll-snap-align: end; }
.works-grid > .work-card[hidden]{ display: none; }
}
@media (max-width: 380px){
.container{ padding-inline: 1rem; }
.shell-card > .inner{ padding: 1.1rem 0.95rem; }
.hero h1{ font-size: clamp(1.95rem, 9vw, 2.4rem); }
.price-value .val{ font-size: 2.4rem; }
.brand-word{ font-size: 1.15rem; }
.btn{ font-size: 0.92rem; }
.pricing-grid > *,.services-grid > *,.works-grid > *,.light-cards > *,.usluge-grid > *,.contact-cards > *{
min-width: 0;
}
.price-value{ flex-wrap: wrap; }
.bl-card h3,.work-meta h3,.contact-row,.ft-contact li{ overflow-wrap: anywhere; }
}
@media (prefers-reduced-transparency: reduce){
.nav,.mobile-menu{
-webkit-backdrop-filter: none;
backdrop-filter: none;
background: var(--bg);
}
.nav.scrolled::before,.nav.scrolled::after,.nav-theme::before,.nav-lang::before,.nav-call::before,.dd-panel::before{ display: none; }
.dd-panel{ background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--line-strong); }
.nav-theme,.nav-lang,.nav-call{ background: var(--shell); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--toggle-line); }
.nav.scrolled{ border-color: var(--line); box-shadow: 0 12px 40px -18px rgba(var(--shadow-rgb), 0.8); }
}
@media (prefers-contrast: more){
.btn--ghost,.kt-pick{ border-color: var(--line-strong); }
html:not(.theme-light){ --muted: #c8d6d1; --faint: #a4b6b0; }
html.theme-light{ --muted: #33413b; --faint: #44524c; }
}
@media (max-width: 900px){
.fit-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
.price-table thead{ display: none; }
.price-table tbody tr{
display: grid;
grid-template-columns: 1fr auto;
column-gap: 1rem;
padding: 0.9rem 1rem;
border-bottom: 1px solid var(--line);
}
.price-table tbody tr:last-child{ border-bottom: 0; }
.price-table th,.price-table td{ padding: 0; border: 0; }
.price-table .pt-nap{ grid-column: 1 / -1; margin-top: 0.25rem; font-size: 0.9rem; }
}
@media (max-width: 900px){
.why-tiles--3{ grid-template-columns: 1fr; }
}
@media (min-width: 1021px) and (max-width: 1180px){
.nav-link{ padding-inline: 0.7rem; }
}
@media (max-width: 640px){
.rv-grid{
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: 86%;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
gap: 1rem;
padding: 0.9rem 0.35rem 1.1rem;
margin-inline: -0.35rem;
}
.rv-grid > .rv-card{ scroll-snap-align: center; }
}
@media (max-width: 640px){
.rv-grid{ scrollbar-width: none; }
.rv-grid::-webkit-scrollbar{ display: none; }
}
@media (max-width: 768px), (hover: none){
.page-fx-aurora,.page-fx-aurora2,.hero-bg::after,.hero-bg .aurora-2{ animation: none; will-change: auto; }
}
@media (max-width: 480px){
.nav-cta{ gap: 0.35rem; }
.nav-cta .nav-theme{ display: none; }
.nav-cta .btn.nav-quote{ padding-inline: 0.8rem; }
.burger{ width: 2.5rem; height: 2.5rem; }
}
@media (max-width: 400px){
.nav{ gap: 0.5rem; padding-left: 1rem; }
.nav .brand-word{ font-size: 1rem; }
.nav .brand-mark{ width: 1.75rem; height: auto; }
.nav-cta{ gap: 0.25rem; }
.nav-cta .btn.nav-quote{ padding-inline: 0.6rem; font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce){
html:not(.motion-on){
scroll-behavior: auto;
}
html:not(.motion-on) .page-fx-aurora{
animation: none;
opacity: 0.85;
}
html:not(.motion-on) .page-fx-aurora2{
animation: none;
opacity: 0.6;
}
html:not(.motion-on) .hero-bg::after{
animation: none;
opacity: 0.85;
}
html:not(.motion-on) .hero-bg .aurora-2{
animation: none;
opacity: 0.6;
}
html:not(.motion-on) .mm-glow{
animation: none;
}
html:not(.motion-on) .cl-track,html:not(.motion-on) .cl-track--rev{
animation: none;
transform: none;
}
html:not(.motion-on) .cl-row{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
html:not(.motion-on) .cl-logo img{
opacity: 0.7;
}
html:not(.motion-on) .hero h1 .w > span,html:not(.motion-on) .subhero h1 .w > span{
animation: none;
transform: none;
}
html:not(.motion-on) :is(.subhero-inner,
html:not(.motion-on) .sv-head,
html:not(.motion-on) .bp-head) .reveal{
animation-name: sp-reveal-fade;
animation-duration: 0.3s;
}
html:not(.motion-on) .reveal{
opacity: 1;
transform: none;
filter: none;
transition: opacity 0.3s ease;
}
html:not(.motion-on) .price-card.featured::after,html:not(.motion-on) .sv-pkg.featured::after{
animation: none;
opacity: 0.6;
}
html:not(.motion-on) .mobile-menu{
transition: opacity 0.2s ease, visibility 0.2s;
transform: none;
}
html:not(.motion-on) .mobile-menu.open{
transform: none;
}
html:not(.motion-on) .lightbox,html:not(.motion-on) .lightbox img{
transition: opacity 0.2s ease;
transform: none;
}
html:not(.motion-on) .cta-bar{
transition: opacity 0.3s ease, visibility 0.3s;
transform: none;
}
html:not(.motion-on) .caret{
animation: none;
}
html:not(.motion-on) .map-pin::before{
animation: none;
opacity: 0;
}
html:not(.motion-on) .services-grid .shell-card,html:not(.motion-on) .pricing-grid .shell-card,html:not(.motion-on) .works-grid .shell-card{
transform: none !important;
}
html:not(.motion-on) .quick-card:hover,html:not(.motion-on) .light-card:hover,html:not(.motion-on) .nf-link:hover,html:not(.motion-on) .work-card:hover .work-thumb img{
transform: none;
}
html:not(.motion-on) .works-grid,html:not(.motion-on) .process-steps,html:not(.motion-on) .steps{
scroll-behavior: auto;
}
html:not(.motion-on) .btn:active,html:not(.motion-on) .kt-pick:active,html:not(.motion-on) .work-card:active,html:not(.motion-on) .bl-card:active,html:not(.motion-on) .light-card:active,html:not(.motion-on) .price-card:active,html:not(.motion-on) .nf-link:active,html:not(.motion-on) .quick-card:active{
transform: scale(0.985);
transition: transform 80ms ease-out;
}
html:not(.motion-on) .work-thumb{
clip-path: inset(0 0 100% 0 round calc(var(--r-inner) - 0.35rem));
transition: clip-path 0.35s ease;
}
html:not(.motion-on) .work-card.in .work-thumb{
clip-path: inset(0 0 0 0 round calc(var(--r-inner) - 0.35rem));
}
html:not(.motion-on) .price-card li svg path{
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.3s ease;
}
html:not(.motion-on) .price-card.in li svg path{
stroke-dashoffset: 0;
}
html:not(.motion-on) .faq-a{
transition: height 0.2s ease;
}
html:not(.motion-on) .cs-star{
transition: color 0.25s ease;
transform: none;
}
html:not(.motion-on) .cs-star.on{
transform: none;
}
html:not(.motion-on) .cs-burst{
display: none;
}
html:not(.motion-on) .cta-band.hot .inner::before{
transform: none;
}
html:not(.motion-on) .btn,html:not(.motion-on) .btn .btn-orb,html:not(.motion-on) .shell-card,html:not(.motion-on) .work-thumb .mono,html:not(.motion-on) .work-meta .go,html:not(.motion-on) .q-ico,html:not(.motion-on) .contact-row,html:not(.motion-on) .nf-link{
transition-property: background-color, border-color, color, opacity, box-shadow;
transition-duration: 0.25s;
}
html:not(.motion-on) .eyebrow .dot::before,html:not(.motion-on) .eyebrow .dot::after,html:not(.motion-on) .kt-status.open .kt-dot::before,html:not(.motion-on) .kt-status.open .kt-dot::after,html:not(.motion-on) .ft-new-dot::before,html:not(.motion-on) .ft-new-dot::after{
animation: none;
opacity: 0;
}
}
html.motion-off{
scroll-behavior: auto;
}
html.motion-off .page-fx-aurora{
animation: none;
opacity: 0.85;
}
html.motion-off .page-fx-aurora2{
animation: none;
opacity: 0.6;
}
html.motion-off .hero-bg::after{
animation: none;
opacity: 0.85;
}
html.motion-off .hero-bg .aurora-2{
animation: none;
opacity: 0.6;
}
html.motion-off .mm-glow{
animation: none;
}
html.motion-off .cl-track,html.motion-off .cl-track--rev{
animation: none;
transform: none;
}
html.motion-off .cl-row{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
html.motion-off .cl-logo img{
opacity: 0.7;
}
html.motion-off .hero h1 .w > span,html.motion-off .subhero h1 .w > span{
animation: none;
transform: none;
}
html.motion-off :is(.subhero-inner,
html.motion-off .sv-head,
html.motion-off .bp-head) .reveal{
animation-name: sp-reveal-fade;
animation-duration: 0.3s;
}
html.motion-off .reveal{
opacity: 1;
transform: none;
filter: none;
transition: opacity 0.3s ease;
}
html.motion-off .price-card.featured::after,html.motion-off .sv-pkg.featured::after{
animation: none;
opacity: 0.6;
}
html.motion-off .mobile-menu{
transition: opacity 0.2s ease, visibility 0.2s;
transform: none;
}
html.motion-off .mobile-menu.open{
transform: none;
}
html.motion-off .lightbox,html.motion-off .lightbox img{
transition: opacity 0.2s ease;
transform: none;
}
html.motion-off .cta-bar{
transition: opacity 0.3s ease, visibility 0.3s;
transform: none;
}
html.motion-off .caret{
animation: none;
}
html.motion-off .map-pin::before{
animation: none;
opacity: 0;
}
html.motion-off .services-grid .shell-card,html.motion-off .pricing-grid .shell-card,html.motion-off .works-grid .shell-card{
transform: none !important;
}
html.motion-off .quick-card:hover,html.motion-off .light-card:hover,html.motion-off .nf-link:hover,html.motion-off .work-card:hover .work-thumb img{
transform: none;
}
html.motion-off .works-grid,html.motion-off .process-steps,html.motion-off .steps{
scroll-behavior: auto;
}
html.motion-off .btn:active,html.motion-off .kt-pick:active,html.motion-off .work-card:active,html.motion-off .bl-card:active,html.motion-off .light-card:active,html.motion-off .price-card:active,html.motion-off .nf-link:active,html.motion-off .quick-card:active{
transform: scale(0.985);
transition: transform 80ms ease-out;
}
html.motion-off .work-thumb{
clip-path: inset(0 0 100% 0 round calc(var(--r-inner) - 0.35rem));
transition: clip-path 0.35s ease;
}
html.motion-off .work-card.in .work-thumb{
clip-path: inset(0 0 0 0 round calc(var(--r-inner) - 0.35rem));
}
html.motion-off .price-card li svg path{
stroke-dashoffset: 20;
transition: stroke-dashoffset 0.3s ease;
}
html.motion-off .price-card.in li svg path{
stroke-dashoffset: 0;
}
html.motion-off .faq-a{
transition: height 0.2s ease;
}
html.motion-off .cs-star{
transition: color 0.25s ease;
transform: none;
}
html.motion-off .cs-star.on{
transform: none;
}
html.motion-off .cs-burst{
display: none;
}
html.motion-off .cta-band.hot .inner::before{
transform: none;
}
html.motion-off .btn,html.motion-off .btn .btn-orb,html.motion-off .shell-card,html.motion-off .work-thumb .mono,html.motion-off .work-meta .go,html.motion-off .q-ico,html.motion-off .contact-row,html.motion-off .nf-link{
transition-property: background-color, border-color, color, opacity, box-shadow;
transition-duration: 0.25s;
}
html.motion-off .eyebrow .dot::before,html.motion-off .eyebrow .dot::after,html.motion-off .kt-status.open .kt-dot::before,html.motion-off .kt-status.open .kt-dot::after,html.motion-off .ft-new-dot::before,html.motion-off .ft-new-dot::after{
animation: none;
opacity: 0;
}