@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/inter-400-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:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/inter-400-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:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/inter-500-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:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/inter-500-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:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/inter-600-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:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/inter-600-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:'Inter';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/inter-700-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:'Inter';font-style:normal;font-display:swap;font-weight:700;src:url(fonts/inter-700-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:'Inter';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/inter-800-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:'Inter';font-style:normal;font-display:swap;font-weight:800;src:url(fonts/inter-800-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;}
:root{
--bg:#07111b;
--panel:#0b1c2a;
--blue:#66b8f7;
--text:#f7fbff;
--muted:#a9b8c5;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
font-family:'Inter', Arial, Helvetica, sans-serif;
background:var(--bg);
color:white;
}
section{ scroll-margin-top:84px; }
.orb{
position:absolute; border-radius:50%; filter:blur(70px);
pointer-events:none; z-index:0;
}
@keyframes drift{
0%{ transform:translate(0,0); }
50%{ transform:translate(24px,-18px); }
100%{ transform:translate(0,0); }
}
.orb{ animation: drift 14s ease-in-out infinite; }
.reveal{ opacity:0; transform:translateY(28px) scale(0.97); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22,.8,.25,1); }
.reveal.visible{ opacity:1; transform:translateY(0) scale(1); }
.reveal.d1.visible{ transition-delay:0.08s; }
.reveal.d2.visible{ transition-delay:0.16s; }
.reveal.d3.visible{ transition-delay:0.24s; }
.reveal.d4.visible{ transition-delay:0.32s; }
.navbar{
position:sticky; top:0; z-index:100;
display:flex; align-items:center; justify-content:space-between;
padding:20px min(6vw,60px);
background:rgba(7,17,27,0.72);
backdrop-filter:blur(16px) saturate(140%);
-webkit-backdrop-filter:blur(16px) saturate(140%);
border-bottom:1px solid rgba(255,255,255,0.06);
}
.logo{ font-size:20px; font-weight:800; letter-spacing:-0.5px; color:var(--text); }
.logo span{ color:var(--blue); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{
color:#cdd9e2; text-decoration:none; font-size:14.5px; font-weight:500;
transition: color 0.2s ease;
}
.nav-links a:not(.nav-cta){ position:relative; }
.nav-links a:not(.nav-cta)::after{
content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px;
background:var(--blue); transition:width 0.25s ease;
}
.nav-links a:not(.nav-cta):hover::after{ width:100%; }
.nav-links a:hover{ color:var(--text); }
.nav-cta{
position:relative; overflow:hidden;
padding:11px 20px; border-radius:9px;
background:linear-gradient(180deg,#8ed1ff 0%,#61b8f4 52%,#48a3e3 100%);
color:#06111b !important; font-weight:700 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 18px rgba(40,145,220,.22);
transition: transform 0.2s ease;
}
.nav-cta:hover{ transform:translateY(-1px); }
.nav-cta::before, .submit::before{
content:""; position:absolute; top:0; left:-60%; width:35%; height:100%;
background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
transform:skewX(-20deg); transition:left 0.55s ease; pointer-events:none;
}
.nav-cta:hover::before, .submit:hover::before{ left:130%; }
@media(max-width:860px){ .nav-links a:not(.nav-cta){ display:none; } }
.webtrix-slider{
position:relative;
min-height:760px;
overflow:hidden;
background:
radial-gradient(circle at 78% 18%,rgba(70,160,230,.18),transparent 34%),
linear-gradient(120deg,#06101a 0%,#0a1825 55%,#10283d 100%);
}
.webtrix-slider .orb{ animation:none; transition: transform 0.3s ease-out; }
.webtrix-slider .orb.h1{ width:420px; height:420px; background:rgba(102,184,247,0.16); top:-120px; left:-100px; }
.webtrix-slider .orb.h2{ width:300px; height:300px; background:rgba(102,184,247,0.1); bottom:-80px; left:30%; }
.slider-inner{
position:relative; z-index:2;
width:min(1460px,calc(100% - 70px));
min-height:760px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(330px,.85fr) minmax(560px,1.15fr);
gap:65px;
align-items:center;
padding:80px 0;
}
.hero-copy{ max-width:560px; position:relative; z-index:1; }
.hero-copy .eyebrow{
margin-bottom:18px; font-size:12px; letter-spacing:3px; color:#8bcafb;
opacity:0; animation: heroIn 0.7s ease forwards; animation-delay:0.05s;
}
.hero-copy h1{
margin:0 0 20px; font-family:'Inter', Arial, sans-serif; font-weight:800;
font-size:clamp(48px,5vw,76px); line-height:1.02; letter-spacing:-2px;
opacity:0; transform:translateY(18px); animation: heroIn 0.8s ease forwards; animation-delay:0.16s;
}
.hero-copy h1 span{ color:var(--blue); }
.hero-copy p{
margin:0; max-width:500px; color:#c1ced9; font-size:17px; line-height:1.7;
opacity:0; transform:translateY(18px); animation: heroIn 0.8s ease forwards; animation-delay:0.3s;
}
.hero-points{
display:flex; flex-wrap:wrap; gap:28px; margin-top:38px;
opacity:0; transform:translateY(18px); animation: heroIn 0.8s ease forwards; animation-delay:0.44s;
}
.hero-points strong{ display:block; margin-bottom:5px; font-size:14px; }
.hero-points span{ color:#8193a3; font-size:12px; }
.avatar-stack{
display:flex; align-items:center; gap:14px; margin-top:32px;
opacity:0; transform:translateY(18px); animation: heroIn 0.8s ease forwards; animation-delay:0.56s;
}
.avatar-stack .faces{ display:flex; }
.avatar-stack .faces img{
width:38px; height:38px; border-radius:50%; object-fit:cover;
border:2px solid #0a1825; margin-left:-10px;
box-shadow:0 4px 10px rgba(0,0,0,.35);
}
.avatar-stack .faces img:first-child{ margin-left:0; }
.avatar-stack p{ margin:0; font-size:13px; color:#c1ced9; }
.avatar-stack strong{ color:var(--text); }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }
.quote-area{ position:relative; display:flex; justify-content:flex-end; z-index:5; }
.quote-stage{
position:relative; width:min(100%,590px);
opacity:0; transform:translateY(24px) scale(0.98);
animation: heroIn 0.9s ease forwards; animation-delay:0.2s;
}
.quote-card{
position:relative; z-index:10; width:100%; padding:38px; color:#f4f9fd;
background:linear-gradient(145deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.055) 38%, rgba(255,255,255,.025) 100%);
border:1px solid rgba(255,255,255,.16); border-radius:26px;
backdrop-filter:blur(24px) saturate(135%); -webkit-backdrop-filter:blur(24px) saturate(135%);
box-shadow:0 28px 80px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.04);
overflow:hidden;
}
.quote-card::before{
content:""; position:absolute; top:-120px; left:-90px; width:420px; height:260px;
background:radial-gradient(ellipse at center, rgba(255,255,255,.24) 0%, rgba(255,255,255,.08) 42%, transparent 72%);
transform:rotate(-12deg); pointer-events:none;
}
.quote-card::after{
content:""; position:absolute; right:-120px; bottom:-150px; width:360px; height:300px;
background:radial-gradient(circle, rgba(102,184,247,.16) 0%, transparent 68%);
pointer-events:none;
}
.quote-card > *{ position:relative; z-index:1; }
.quote-label{ margin-bottom:8px; color:#8ecbfa; font-size:11px; font-weight:700; letter-spacing:2.5px; }
.quote-card h2{ margin:0 0 10px; font-size:32px; }
.quote-card>p{ margin:0 0 28px; color:#b8c6d1; line-height:1.55; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:18px; }
.field label{ display:block; margin-bottom:8px; font-size:13px; font-weight:700; color:#eef6fc; }
.field input, .field select, .field textarea{
width:100%; min-height:48px; padding:13px 14px;
border:1px solid rgba(255,255,255,.16); border-radius:10px;
background:rgba(255,255,255,.09); color:#f7fbff; outline:none; font-size:16px;
font-family:'Inter', Arial, sans-serif;
backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(230,239,246,.52); }
.field select option{ color:#0b1723; background:#ffffff; }
.field textarea{ min-height:105px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
border-color:#5aaceb; box-shadow:0 0 0 4px rgba(90,172,235,.14);
}
.form-bottom{ display:flex; justify-content:space-between; gap:22px; align-items:center; }
.form-note{ color:#a9bac7; font-size:12px; line-height:1.5; }
.submit{
position:relative; overflow:hidden;
border:1px solid rgba(255,255,255,.24); border-radius:10px; padding:15px 22px;
background:linear-gradient(180deg,#8ed1ff 0%,#61b8f4 52%,#48a3e3 100%);
color:#06111b; font-weight:800; font-size:15px; cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 8px 24px rgba(40,145,220,.24);
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.submit:hover{ transform:translateY(-2px); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 12px 30px rgba(40,145,220,.32); }
.form-confirm{
display:none; align-items:center; gap:10px; margin-top:16px;
background:rgba(102,184,247,0.12); border:1px solid rgba(102,184,247,0.3); border-radius:10px;
padding:14px 16px; color:#dff1ff; font-size:14px;
}
.form-confirm.show{ display:flex; }
.form-confirm svg{ width:18px; height:18px; flex-shrink:0; }
.services-panel{
position:absolute; top:0; right:calc(100% + 18px); width:340px; min-height:100%; z-index:20;
padding:28px 24px; border:1px solid rgba(255,255,255,.09); border-radius:24px;
background:rgba(8,26,40,.97); backdrop-filter:blur(18px); box-shadow:0 25px 70px rgba(0,0,0,.32);
opacity:0; visibility:hidden; pointer-events:none; transform:translateX(70px) scale(.985);
transition:transform .48s cubic-bezier(.22,.8,.25,1), opacity .3s ease, visibility .3s ease;
}
.quote-stage.show-services .services-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0) scale(1); }
.services-head{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.services-head h3{ margin:0; font-size:24px; }
.close-services{
width:40px; height:40px; flex:0 0 40px; border:1px solid rgba(255,255,255,.14); border-radius:50%;
background:rgba(255,255,255,.04); color:white; font-size:22px; cursor:pointer;
}
.services-intro{ margin:0 0 18px; color:#9db0bf; font-size:13px; line-height:1.55; }
.service-item{
width:100%; display:grid; grid-template-columns:1fr 20px; gap:10px; align-items:center;
padding:15px 10px; border:0; border-bottom:1px solid rgba(255,255,255,.08);
background:transparent; color:white; text-align:left; cursor:pointer; border-radius:10px;
font-family:'Inter', Arial, sans-serif;
}
.service-item:hover, .service-item.active{ background:rgba(102,184,247,.12); }
.service-code{ color:#6f8496; font-size:11px; }
.service-name{ font-size:13px; font-weight:600; }
.service-arrow{ color:#66b8f7; font-size:19px; }
@media(max-width:1180px){
.slider-inner{ width:min(calc(100% - 40px),1100px); grid-template-columns:minmax(260px,.65fr) minmax(520px,1.35fr); gap:30px; }
.hero-copy h1{ font-size:48px; }
.hero-points{ display:none; }
.quote-stage{ width:520px; }
.services-panel{ width:290px; right:calc(100% + 12px); padding:24px 18px; }
}
@media(max-width:820px){
.slider-inner{ width:calc(100% - 28px); grid-template-columns:1fr; gap:40px; padding:48px 0; }
.quote-area{ justify-content:flex-start; }
.quote-stage{ width:100%; }
.services-panel{
position:relative; top:auto; right:auto; width:100%; min-height:auto; margin-bottom:14px; display:none;
opacity:1; visibility:visible; pointer-events:auto; transform:none;
}
.quote-stage.show-services .services-panel{ display:block; }
}
@media(max-width:600px){
.hero-copy h1{ font-size:43px; }
.quote-card{ padding:24px 18px; }
.form-row{ grid-template-columns:1fr; gap:0; }
.form-bottom{ flex-direction:column; align-items:stretch; }
.submit{ width:100%; }
}
.section{ position:relative; padding:110px min(6vw,60px); overflow:hidden; }
.section-alt{ background:var(--panel); }
.section-head{ max-width:640px; margin:0 auto 60px; text-align:center; }
.eyebrow-c{ font-size:12px; letter-spacing:3px; color:#8bcafb; margin-bottom:14px; }
.section-head h2{ font-size:clamp(30px,3.6vw,44px); margin:0 0 16px; letter-spacing:-1px; }
.section-head p{ color:var(--muted); font-size:16px; line-height:1.7; max-width:520px; margin:0 auto; }
.trust-strip{ padding:50px 0 0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent); }
.trust-strip .label{ text-align:center; color:var(--muted); font-size:11.5px; letter-spacing:2px; margin-bottom:24px; }
.marquee{ display:flex; width:max-content; animation: marqueeScroll 28s linear infinite; }
.trust-strip:hover .marquee{ animation-play-state:paused; }
.marquee-track{ display:flex; align-items:center; gap:56px; padding-right:56px; }
.trust-item{ display:flex; align-items:center; gap:9px; color:#5c6b78; white-space:nowrap; transition:color 0.2s ease; }
.trust-item:hover{ color:var(--blue); }
.trust-item svg{ width:20px; height:20px; flex-shrink:0; }
.trust-item span{ font-size:14px; font-weight:700; letter-spacing:-.2px; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.stats-section{ padding:64px min(6vw,60px) 0; }
.stats-band{ max-width:1200px; margin:0 auto; position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:center; }
.stats-lead h2{ font-size:clamp(22px,2.6vw,30px); margin:0 0 10px; color:var(--text); letter-spacing:-.5px; }
.stats-lead p{ color:var(--muted); font-size:14px; line-height:1.6; max-width:320px; margin:0; }
.stats-list{ display:grid; grid-template-columns:1fr 1fr; gap:26px 0; }
.stat-row{ padding:4px 0 4px 20px; border-left:2px solid rgba(102,184,247,.35); }
.stat-row strong{ display:block; font-size:clamp(26px,3vw,36px); color:var(--blue); font-weight:800; line-height:1; }
.stat-row span{ color:var(--muted); font-size:12.5px; }
@media(max-width:860px){ .stats-band{ grid-template-columns:1fr; gap:26px; } }
.diensten-tabs{
max-width:1200px; margin:0 auto; position:relative; z-index:1;
display:grid; grid-template-columns:0.85fr 1.4fr;
border-radius:24px; overflow:hidden; border:1px solid rgba(255,255,255,.09);
}
.diensten-nav{ background:rgba(255,255,255,.03); border-right:1px solid rgba(255,255,255,.08); }
.diensten-nav button{
width:100%; text-align:left; background:transparent; border:none; cursor:pointer;
padding:17px 22px; color:var(--muted); font-family:'Inter', sans-serif; font-size:14px; font-weight:600;
border-bottom:1px solid rgba(255,255,255,.06); transition: background 0.2s ease, color 0.2s ease;
display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.diensten-nav button:last-child{ border-bottom:none; }
.diensten-nav button:hover{ color:var(--text); }
.diensten-nav button.active{ background:rgba(102,184,247,.1); color:var(--text); }
.diensten-nav button .arrow{ color:var(--blue); opacity:0; transform:translateX(-4px); transition:opacity 0.2s ease, transform 0.2s ease; }
.diensten-nav button.active .arrow{ opacity:1; transform:translateX(0); }
.diensten-panels{ position:relative; min-height:280px; }
.diensten-panel{ display:none; padding:46px 46px; flex-direction:column; justify-content:center; height:100%; }
.diensten-panel.active{ display:flex; animation: panelIn 0.35s ease; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.dienst-icon-lg{ width:54px; height:54px; border-radius:14px; background:rgba(102,184,247,.14); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.dienst-icon-lg svg{ width:25px; height:25px; }
.diensten-panel h3{ font-size:23px; margin:0 0 12px; color:var(--text); }
.diensten-panel p{ color:var(--muted); font-size:14.5px; line-height:1.7; max-width:480px; margin:0; }
@media(max-width:860px){
.diensten-tabs{ grid-template-columns:1fr; }
.diensten-nav{ border-right:none; border-bottom:1px solid rgba(255,255,255,.08); max-height:280px; overflow-y:auto; }
.diensten-panel{ padding:32px 26px; }
}
.cases-list{ max-width:960px; margin:0 auto; position:relative; z-index:1; }
.case-row{
display:grid; grid-template-columns:90px 1fr auto; gap:28px; align-items:center;
padding:34px 0; border-bottom:1px solid rgba(255,255,255,.08);
}
.case-row:first-child{ border-top:1px solid rgba(255,255,255,.08); }
.case-num{ font-family:'Inter', sans-serif; font-size:40px; font-weight:800; color:rgba(102,184,247,.25); line-height:1; }
.case-body .case-tag{ color:#8bcafb; font-size:11px; font-weight:800; letter-spacing:2px; margin-bottom:8px; }
.case-body h3{ font-size:18.5px; margin:0 0 8px; color:var(--text); }
.case-body p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0; max-width:420px; }
.case-metrics{ display:flex; gap:24px; }
.case-metric strong{ display:block; font-size:21px; color:var(--blue); font-weight:800; }
.case-metric span{ color:var(--muted); font-size:11px; }
@media(max-width:760px){
.case-row{ grid-template-columns:1fr; gap:14px; }
.case-num{ font-size:28px; }
.case-metrics{ gap:20px; }
}
.timeline{ max-width:700px; margin:0 auto; position:relative; z-index:1; padding-left:42px; }
.timeline::before{
content:""; position:absolute; left:13px; top:6px; bottom:6px; width:2px;
background:linear-gradient(180deg, rgba(102,184,247,.55), rgba(102,184,247,.05));
}
.tl-step{ position:relative; padding-bottom:42px; }
.tl-step:last-child{ padding-bottom:0; }
.tl-dot{
position:absolute; left:-42px; top:0; width:28px; height:28px; border-radius:50%;
background:rgba(102,184,247,.15); border:1px solid rgba(102,184,247,.45);
display:flex; align-items:center; justify-content:center; color:var(--blue); font-weight:700; font-size:12.5px;
}
.tl-step h3{ font-size:17px; margin:0 0 8px; color:var(--text); }
.tl-step p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0; max-width:460px; }
.waarom-split{ max-width:1100px; margin:0 auto; position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.waarom-copy blockquote{
font-family:'Inter', sans-serif; font-weight:600; font-size:clamp(19px,2.2vw,26px); line-height:1.45;
color:var(--text); margin:0 0 26px; border-left:3px solid var(--blue); padding-left:22px;
}
.waarom-copy .team-strip{ margin:0; justify-content:flex-start; }
.waarom-checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.waarom-checklist li{ display:flex; gap:14px; align-items:flex-start; }
.waarom-checklist .check{
width:26px; height:26px; border-radius:50%; background:rgba(102,184,247,.15); border:1px solid rgba(102,184,247,.4);
display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;
}
.waarom-checklist .check svg{ width:13px; height:13px; color:var(--blue); }
.waarom-checklist strong{ display:block; color:var(--text); font-size:14.5px; margin-bottom:3px; }
.waarom-checklist span{ color:var(--muted); font-size:13px; }
@media(max-width:860px){ .waarom-split{ grid-template-columns:1fr; gap:36px; } }
.team-strip{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.team-strip img{ width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid rgba(102,184,247,.35); transition: transform 0.25s ease; }
.team-strip img:hover{ transform:translateY(-4px) scale(1.06); }
.review-spotlight{ max-width:760px; margin:0 auto; position:relative; z-index:1; text-align:center; }
.review-slide{ display:none; }
.review-slide.active{ display:block; animation: panelIn 0.4s ease; }
.review-slide .stars{ color:#ffcf5c; font-size:16px; letter-spacing:3px; margin-bottom:20px; }
.review-slide p{ font-size:clamp(18px,2.2vw,23px); line-height:1.55; color:var(--text); font-weight:500; margin:0 0 26px; }
.review-who{ display:flex; align-items:center; justify-content:center; gap:12px; }
.review-who img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.review-who strong{ display:block; font-size:14px; color:var(--text); }
.review-who span{ color:var(--muted); font-size:12.5px; }
.review-dots{ display:flex; justify-content:center; gap:8px; margin-top:32px; }
.review-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.15); border:none; cursor:pointer; padding:0; transition:background 0.2s ease, transform 0.2s ease; }
.review-dots button.active{ background:var(--blue); transform:scale(1.2); }
.cta-strip{
max-width:1200px; margin:0 auto; position:relative; z-index:1; overflow:hidden;
display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
padding:56px min(6vw,56px); border-radius:26px;
background:linear-gradient(120deg,#0d2438 0%,#0a1825 60%,#123166 100%);
border:1px solid rgba(102,184,247,.25);
}
.cta-strip::before{ content:""; position:absolute; right:-60px; top:-70px; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(102,184,247,.28), transparent 70%); }
.cta-strip h2{ position:relative; z-index:1; font-size:clamp(22px,2.6vw,30px); margin:0; letter-spacing:-0.5px; }
.cta-strip p{ position:relative; z-index:1; color:var(--muted); margin:8px 0 0; font-size:14.5px; }
.cta-strip .submit{ position:relative; z-index:1; text-decoration:none; display:inline-block; }
.faq-split{ max-width:1100px; margin:0 auto; position:relative; z-index:1; display:grid; grid-template-columns:0.8fr 1.2fr; gap:50px; align-items:start; }
.faq-intro h2{ font-size:clamp(24px,2.8vw,32px); margin:10px 0 14px; color:var(--text); letter-spacing:-.5px; }
.faq-intro p{ color:var(--muted); font-size:14px; line-height:1.65; margin:0 0 22px; max-width:340px; }
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{ border:1px solid rgba(255,255,255,.09); border-radius:14px; overflow:hidden; background:rgba(255,255,255,.03); }
.faq-item summary{
list-style:none; cursor:pointer; padding:19px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px;
font-weight:600; font-size:14.5px; color:var(--text);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary svg{ width:18px; height:18px; color:var(--blue); flex-shrink:0; transition: transform 0.25s ease; }
.faq-item[open] summary svg{ transform:rotate(180deg); }
.faq-item .faq-answer{ padding:0 22px 20px; color:var(--muted); font-size:13.5px; line-height:1.65; }
@media(max-width:860px){ .faq-split{ grid-template-columns:1fr; gap:28px; } }
.contact-hero{
max-width:1200px; margin:0 auto; position:relative; z-index:1;
display:grid; grid-template-columns:0.88fr 1.16fr; gap:22px; align-items:stretch;
}
.contact-hero .info-card{
position:relative; overflow:hidden; min-height:560px;
border-radius:24px; padding:40px 38px 36px; color:#fff;
background:linear-gradient(160deg,#0d2438 0%,#081826 100%);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 24px 70px rgba(0,0,0,.35);
}
.contact-hero .info-card::before{
content:""; position:absolute; inset:auto -80px -120px auto;
width:360px; height:360px; border-radius:50%;
background:radial-gradient(circle, rgba(102,184,247,.2), transparent 68%);
}
.contact-hero .info-card::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:
linear-gradient(135deg,transparent 58%,rgba(255,255,255,.03) 58% 60%,transparent 60%),
linear-gradient(35deg,transparent 70%,rgba(255,255,255,.025) 70% 72%,transparent 72%);
}
.contact-hero .kicker{ position:relative; z-index:1; color:#8bcafb; font-size:11px; font-weight:800; letter-spacing:2.3px; margin-bottom:18px; }
.contact-hero .info-card h3{
position:relative; z-index:1; margin:0; max-width:420px; color:var(--text);
font-weight:700; font-size:clamp(30px,3.4vw,42px); line-height:1.08; letter-spacing:-1px;
}
.contact-hero .info-card h3 span{ color:var(--blue); }
.contact-hero .intro{ position:relative; z-index:1; max-width:440px; margin:20px 0 26px; color:#c8d5de; font-size:14.5px; line-height:1.7; }
.contact-hero .contact-list{ position:relative; z-index:1; display:grid; gap:16px; margin-top:14px; }
.contact-hero .contact-item{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:center; }
.contact-hero .contact-icon{
width:38px; height:38px; display:flex; align-items:center; justify-content:center;
border-radius:50%; border:1px solid rgba(255,255,255,.2); color:#8fd0fb; flex-shrink:0;
}
.contact-hero .contact-icon svg{ width:17px; height:17px; }
.contact-hero .contact-item strong{ display:block; font-size:13.5px; margin-bottom:3px; color:var(--text); }
.contact-hero .contact-item span{ color:#a9bac7; font-size:12px; }
.contact-hero .signature{
position:relative; z-index:1; margin-top:30px; font-style:italic; font-weight:600;
color:#8fd0fb; font-size:15px;
}
.contact-hero .signature::after{ content:""; display:block; width:70px; height:2px; margin-top:8px; background:var(--blue); border-radius:99px; }
.contact-hero .form-card{
overflow:hidden; border-radius:24px; display:flex; flex-direction:column;
background:linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
border:1px solid rgba(255,255,255,.09);
box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.contact-hero .form-top{ padding:36px 38px 6px; }
.contact-hero .form-kicker{ color:#8ecbfa; font-size:10px; font-weight:800; letter-spacing:2.4px; margin-bottom:10px; }
.contact-hero .form-card h3{ margin:0 0 8px; font-size:26px; letter-spacing:-.5px; color:var(--text); }
.contact-hero .form-card .sub{ margin:0 0 22px; color:var(--muted); font-size:13.5px; line-height:1.6; }
.contact-hero .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-hero .field.full{ grid-column:1/-1; }
.contact-hero .note{ color:var(--muted); font-size:11.5px; line-height:1.5; }
.contact-hero .map{ position:relative; height:220px; border-top:1px solid rgba(255,255,255,.08); }
.contact-hero .map iframe{
width:100%; height:100%; border:0; display:block;
filter:invert(92%) contrast(83%) hue-rotate(180deg) brightness(0.92) saturate(0.85);
}
.contact-hero .map-button{
position:absolute; left:16px; top:14px; z-index:2;
background:rgba(7,17,27,.85); color:var(--blue); border:1px solid rgba(255,255,255,.15);
border-radius:7px; padding:8px 12px; font-size:11.5px; font-weight:700;
text-decoration:none; backdrop-filter:blur(6px);
}
.contact-hero .map-label{
position:absolute; left:16px; bottom:14px; z-index:2; padding:9px 13px; border-radius:7px;
background:rgba(7,17,27,.85); color:#fff; font-size:11.5px; box-shadow:0 6px 18px rgba(0,0,0,.3);
}
@media(max-width:900px){
.contact-hero{ grid-template-columns:1fr; }
.contact-hero .info-card{ min-height:auto; }
}
@media(max-width:600px){
.contact-hero .form-top{ padding:26px 20px 6px; }
.contact-hero .form-grid{ grid-template-columns:1fr; }
.contact-hero .field.full{ grid-column:auto; }
}
.ai-chat-fab{
position:fixed; right:26px; bottom:26px; z-index:200;
width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
background:linear-gradient(180deg,#8ed1ff 0%,#61b8f4 52%,#48a3e3 100%);
display:flex; align-items:center; justify-content:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 28px rgba(40,145,220,.35);
opacity:0; transform:translateY(20px) scale(0.9);
animation: fabIn 0.6s ease forwards; animation-delay:1s;
}
@keyframes fabIn{ to{ opacity:1; transform:translateY(0) scale(1); } }
.ai-chat-fab svg{ width:26px; height:26px; color:#06111b; transition: transform 0.2s ease; }
.ai-chat-fab .x-icon{ display:none; }
.ai-chat-fab.open .chat-icon{ display:none; }
.ai-chat-fab.open .x-icon{ display:block; }
.ai-chat-fab::before{
content:""; position:absolute; inset:-6px; border-radius:50%;
border:2px solid rgba(102,184,247,.5);
animation: fabPulse 2.4s ease-out infinite;
}
@keyframes fabPulse{ 0%{ opacity:.7; transform:scale(0.9); } 100%{ opacity:0; transform:scale(1.35); } }
.ai-chat-fab:hover{ transform:translateY(-2px) scale(1.04); }
.ai-quote-fab{
position:fixed; right:26px; bottom:118px; z-index:200;
width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
background:linear-gradient(180deg,#8ed1ff 0%,#61b8f4 52%,#48a3e3 100%);
display:flex; align-items:center; justify-content:center;
box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 28px rgba(40,145,220,.35);
opacity:0; transform:translateY(20px) scale(0.9);
animation: fabIn 0.6s ease forwards; animation-delay:1.3s;
transition: transform 0.2s ease;
}
.ai-quote-fab:hover{ transform:translateY(-2px) scale(1.04); }
.ai-quote-fab svg{ width:26px; height:26px; color:#06111b; transition: transform 0.2s ease; }
.ai-quote-fab .x-icon{ display:none; }
.ai-quote-fab.open .doc-icon{ display:none; }
.ai-quote-fab.open .x-icon{ display:block; }
.ai-quote-fab::before{
content:""; position:absolute; inset:-6px; border-radius:50%;
border:2px solid rgba(102,184,247,.5);
animation: fabPulse 2.4s ease-out infinite;
animation-delay:1.2s;
}
.ai-quote-panel{
position:fixed; right:26px; bottom:190px; z-index:200;
width:380px; max-width:calc(100vw - 40px); max-height:calc(100vh - 210px);
overflow-y:auto; border-radius:20px; border:1px solid rgba(255,255,255,.1);
background:linear-gradient(165deg, rgba(16,36,52,.98), rgba(7,17,27,.98));
backdrop-filter:blur(18px); box-shadow:0 30px 70px rgba(0,0,0,.45);
padding:26px 26px 22px;
opacity:0; visibility:hidden; transform:translateY(16px) scale(0.97);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.ai-quote-panel.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ai-quote-panel .quote-label{ margin-bottom:6px; }
.ai-quote-panel h4{ margin:0 0 8px; font-size:22px; color:var(--text); }
.ai-quote-panel > p{ margin:0 0 20px; color:var(--muted); font-size:13px; line-height:1.55; }
.ai-quote-panel .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:480px){
.ai-quote-panel{ right:14px; left:14px; width:auto; bottom:190px; }
}
.ai-chat-tooltip{
position:fixed; right:96px; bottom:42px; z-index:199;
background:rgba(7,17,27,.92); color:var(--text); font-size:13px; font-weight:600;
padding:9px 14px; border-radius:9px; border:1px solid rgba(255,255,255,.1);
white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.3);
opacity:0; transform:translateX(8px); transition:opacity 0.3s ease, transform 0.3s ease;
pointer-events:none;
}
.ai-chat-tooltip.show{ opacity:1; transform:translateX(0); }
.ai-chat-panel{
position:fixed; right:26px; bottom:98px; z-index:200;
width:360px; max-width:calc(100vw - 40px); height:480px; max-height:calc(100vh - 140px);
display:flex; flex-direction:column; overflow:hidden;
border-radius:20px; border:1px solid rgba(255,255,255,.1);
background:linear-gradient(165deg, rgba(16,36,52,.98), rgba(7,17,27,.98));
backdrop-filter:blur(18px); box-shadow:0 30px 70px rgba(0,0,0,.45);
opacity:0; visibility:hidden; transform:translateY(16px) scale(0.97);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.ai-chat-panel.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ai-chat-header{
display:flex; align-items:center; gap:12px; padding:18px 20px;
border-bottom:1px solid rgba(255,255,255,.08);
background:linear-gradient(120deg, rgba(102,184,247,.14), transparent);
}
.ai-chat-avatar{
width:36px; height:36px; border-radius:50%; flex-shrink:0;
background:linear-gradient(135deg,#8ed1ff,#3f7fc9);
display:flex; align-items:center; justify-content:center; color:#06111b; font-weight:800; font-size:13px;
}
.ai-chat-header h4{ margin:0; font-size:14.5px; color:var(--text); }
.ai-chat-header .status{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:#8fd0fb; margin-top:2px; }
.ai-chat-header .status .dot{ width:6px; height:6px; border-radius:50%; background:#5be08a; box-shadow:0 0 6px 1px rgba(91,224,138,.7); }
.ai-chat-body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; }
.chat-msg{ max-width:82%; padding:11px 14px; border-radius:14px; font-size:13.5px; line-height:1.5; opacity:0; animation: msgIn 0.35s ease forwards; }
@keyframes msgIn{ to{ opacity:1; } }
.chat-msg.bot{ align-self:flex-start; background:rgba(255,255,255,.07); color:#dbe4ea; border-bottom-left-radius:4px; }
.chat-msg.user{ align-self:flex-end; background:linear-gradient(180deg,#8ed1ff,#61b8f4); color:#06111b; font-weight:600; border-bottom-right-radius:4px; }
.chat-typing{ align-self:flex-start; display:flex; gap:4px; padding:12px 14px; background:rgba(255,255,255,.07); border-radius:14px; border-bottom-left-radius:4px; }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background:#8fd0fb; animation: typingBounce 1.1s ease-in-out infinite; }
.chat-typing span:nth-child(2){ animation-delay:0.15s; }
.chat-typing span:nth-child(3){ animation-delay:0.3s; }
@keyframes typingBounce{ 0%,60%,100%{ transform:translateY(0); opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
.ai-chat-inputrow{ display:flex; gap:8px; padding:14px 16px; border-top:1px solid rgba(255,255,255,.08); }
.ai-chat-inputrow input{
flex:1; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(255,255,255,.06);
color:var(--text); padding:11px 13px; font-size:13.5px; outline:none; font-family:'Inter',sans-serif;
transition:border-color 0.2s ease;
}
.ai-chat-inputrow input:focus{ border-color:#5aaceb; }
.ai-chat-inputrow button{
width:42px; height:42px; border-radius:10px; border:none; cursor:pointer; flex-shrink:0;
background:linear-gradient(180deg,#8ed1ff,#61b8f4); color:#06111b;
display:flex; align-items:center; justify-content:center;
}
.ai-chat-inputrow button svg{ width:17px; height:17px; }
@media(max-width:480px){
.ai-chat-panel{ right:14px; left:14px; width:auto; bottom:92px; }
.ai-chat-fab{ right:18px; bottom:18px; }
.ai-chat-tooltip{ display:none; }
}
footer{ padding:60px min(6vw,60px) 40px; border-top:1px solid rgba(255,255,255,.06); }
.footer-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-grid h4{ font-size:14px; margin:0 0 16px; color:#eef6fc; }
.footer-grid p{ color:var(--muted); font-size:13.5px; line-height:1.7; max-width:280px; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color:var(--muted); text-decoration:none; font-size:13.5px; transition:color 0.2s ease; }
.footer-grid a:hover{ color:var(--text); }
.footer-bottom{ max-width:1200px; margin:40px auto 0; padding-top:24px; border-top:1px solid rgba(255,255,255,.06);
display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#6f8496; font-size:12.5px; }
@media(max-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.pro-shell{
width:min(1200px,calc(100% - 48px));
margin:0 auto;
}
.pro-section{
position:relative;
padding:112px 0;
overflow:hidden;
}
.pro-kicker{
color:#7bc9fa;
font-size:11px;
line-height:1;
font-weight:800;
letter-spacing:2.5px;
text-transform:uppercase;
}
.pro-heading-row{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(280px,.75fr);
gap:70px;
align-items:end;
margin-bottom:48px;
}
.pro-heading-row h2,
.pro-heading-center h2,
.pro-intro-copy h2,
.pro-why-copy h2,
.pro-faq-intro h2{
margin:12px 0 0;
color:#f7fbff;
font-size:clamp(34px,4vw,52px);
line-height:1.08;
letter-spacing:-1.8px;
}
.pro-heading-row p,
.pro-heading-center p{
margin:0;
color:#91a7b5;
font-size:15px;
line-height:1.75;
}
.pro-heading-center{
max-width:760px;
margin:0 auto 54px;
text-align:center;
}
.pro-heading-center p{ margin:15px auto 0; max-width:580px; }
.pro-tech-strip{
border-top:1px solid rgba(255,255,255,.055);
border-bottom:1px solid rgba(255,255,255,.055);
background:#06101a;
}
.pro-tech-strip .pro-shell{
min-height:88px;
display:grid;
grid-template-columns:260px 1fr;
gap:38px;
align-items:center;
}
.pro-tech-label{
color:#637989;
font-size:9px;
font-weight:800;
letter-spacing:2px;
}
.pro-tech-items{
display:flex;
justify-content:space-between;
gap:28px;
color:#78909f;
font-size:12px;
font-weight:700;
}
.pro-tech-items span{ white-space:nowrap; }
.pro-intro-section{
background:
radial-gradient(circle at 85% 20%,rgba(80,174,235,.08),transparent 27%),
#081521;
}
.pro-intro-grid{
display:grid;
grid-template-columns:.92fr 1.08fr;
gap:72px;
align-items:center;
}
.pro-intro-copy h2{ font-size:clamp(34px,4.2vw,50px); }
.pro-intro-copy p{
max-width:540px;
margin:20px 0 0;
color:#94a9b6;
font-size:15px;
line-height:1.8;
}
.pro-number-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}
.pro-number-card{
min-height:210px;
padding:24px;
display:flex;
flex-direction:column;
justify-content:flex-end;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
background:#0b1d2b;
overflow:hidden;
position:relative;
}
.pro-number-card::before{
content:"";
position:absolute;
width:140px;height:140px;
right:-65px;top:-65px;
border-radius:50%;
filter:blur(4px);
opacity:.25;
}
.pro-number-card.accent-blue::before{ background:#59b9f5; }
.pro-number-card.accent-cyan::before{ background:#54d6df; }
.pro-number-card.accent-violet::before{ background:#9384ff; }
.pro-number-card small{
color:#688292;
font-size:9px;
font-weight:800;
letter-spacing:1.6px;
}
.pro-number-card strong{
display:block;
margin:13px 0 8px;
font-size:32px;
line-height:1;
letter-spacing:-1.3px;
color:#f8fcff;
}
.pro-number-card span{
color:#8da4b2;
font-size:11px;
line-height:1.55;
}
.pro-services-section{
background:#06111b;
}
.pro-service-layout{
display:grid;
grid-template-columns:1.03fr .97fr;
gap:16px;
}
.pro-service-feature{
min-height:560px;
padding:36px;
position:relative;
overflow:hidden;
border:1px solid rgba(101,187,243,.18);
border-radius:24px;
background:
linear-gradient(145deg,rgba(73,159,218,.14),rgba(255,255,255,.018)),
#0a1c29;
}
.pro-service-feature-top{
display:flex;
align-items:center;
justify-content:space-between;
}
.pro-service-index{
color:rgba(255,255,255,.10);
font-size:58px;
font-weight:800;
letter-spacing:-3px;
}
.pro-pill{
padding:7px 10px;
border:1px solid rgba(107,198,255,.18);
border-radius:999px;
background:rgba(102,184,247,.08);
color:#8fd1fa;
font-size:9px;
font-weight:800;
letter-spacing:1.4px;
}
.pro-service-feature h3{
margin:74px 0 14px;
max-width:460px;
font-size:35px;
line-height:1.08;
letter-spacing:-1px;
}
.pro-service-feature p{
max-width:500px;
margin:0;
color:#9eb1bd;
font-size:14px;
line-height:1.75;
}
.pro-feature-list{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:28px;
}
.pro-feature-list span{
padding:8px 10px;
border-radius:999px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.07);
color:#a9bdc9;
font-size:10px;
}
.pro-text-link{
display:inline-flex;
align-items:center;
gap:8px;
margin-top:30px;
color:#8bd2ff;
font-size:12px;
font-weight:700;
text-decoration:none;
}
.pro-text-link b{ transition:transform .2s ease; }
.pro-text-link:hover b{ transform:translate(3px,-3px); }
.pro-service-glow{
position:absolute;
width:330px;height:330px;
right:-130px;bottom:-150px;
border-radius:50%;
background:radial-gradient(circle,rgba(74,176,239,.28),transparent 68%);
}
.pro-service-stack{
display:grid;
gap:12px;
}
.pro-service-row{
min-height:178px;
padding:25px;
display:grid;
grid-template-columns:52px 1fr 36px;
gap:17px;
align-items:center;
border:1px solid rgba(255,255,255,.075);
border-radius:18px;
background:#0a1a27;
transition:transform .25s ease,border-color .25s ease;
}
.pro-service-row:hover{
transform:translateX(4px);
border-color:rgba(255,255,255,.14);
}
.pro-row-icon{
width:48px;height:48px;
display:grid;place-items:center;
border-radius:14px;
font-size:11px;
font-weight:800;
}
.row-cyan .pro-row-icon{ background:rgba(82,210,220,.11); color:#71dbe2; }
.row-violet .pro-row-icon{ background:rgba(150,133,255,.12); color:#a99aff; }
.row-mint .pro-row-icon{ background:rgba(96,219,169,.11); color:#7be0b7; }
.pro-mini-label{
color:#68808f;
font-size:8px;
font-weight:800;
letter-spacing:1.5px;
}
.pro-service-row h3{
margin:6px 0 7px;
font-size:18px;
}
.pro-service-row p{
margin:0;
color:#8ca3b1;
font-size:11.5px;
line-height:1.55;
}
.pro-row-arrow{
width:34px;height:34px;
display:grid;place-items:center;
border-radius:50%;
background:rgba(255,255,255,.035);
color:#8fcfff;
}
.pro-case-section{
background:
radial-gradient(circle at 12% 45%,rgba(105,135,255,.07),transparent 25%),
#0b1b29;
}
.pro-case-grid{
display:grid;
grid-template-columns:1.18fr .82fr;
gap:16px;
}
.pro-case-main{
min-height:540px;
padding:26px;
display:flex;
flex-direction:column;
justify-content:space-between;
border:1px solid rgba(255,255,255,.075);
border-radius:22px;
background:linear-gradient(145deg,#102a3d,#0a1b28);
}
.pro-case-browser{
height:330px;
overflow:hidden;
border-radius:16px;
background:#eef6fa;
box-shadow:0 25px 55px rgba(0,0,0,.26);
}
.pro-browser-bar{
height:38px;
display:flex;
align-items:center;
gap:6px;
padding:0 13px;
background:#e3edf2;
border-bottom:1px solid #d4e1e7;
}
.pro-browser-bar i{
width:7px;height:7px;border-radius:50%;background:#b9c8d0;
}
.pro-browser-body{
display:grid;
grid-template-columns:31% 69%;
height:292px;
}
.pro-browser-side{
background:linear-gradient(145deg,#0b3045,#0c2130);
}
.pro-browser-content{ padding:27px; }
.pro-line{
height:10px;
margin-bottom:12px;
border-radius:999px;
background:#d4e2e8;
}
.pro-line.w45{ width:45%; }
.pro-line.w78{ width:78%; }
.pro-line.w62{ width:62%; }
.pro-browser-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:28px;
}
.pro-browser-cards span{
height:96px;
border-radius:10px;
background:#e1eef3;
}
.pro-case-caption{
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
padding-top:24px;
}
.pro-case-caption small{
color:#73c4f7;
font-size:9px;
font-weight:800;
letter-spacing:1.7px;
}
.pro-case-caption h3{
max-width:520px;
margin:8px 0 0;
font-size:20px;
line-height:1.35;
}
.pro-case-circle{
width:44px;height:44px;
display:grid;place-items:center;
border-radius:50%;
border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.035);
color:#8dd2ff;
}
.pro-case-results{
display:grid;
gap:12px;
}
.pro-case-results article{
min-height:172px;
padding:24px;
display:grid;
grid-template-columns:52px 1fr;
gap:16px;
align-items:start;
border:1px solid rgba(255,255,255,.075);
border-radius:18px;
background:#0a1925;
}
.pro-case-results article>span{
color:rgba(115,196,247,.28);
font-size:28px;
font-weight:800;
}
.pro-case-results small{
color:#6e8796;
font-size:8px;
font-weight:800;
letter-spacing:1.5px;
}
.pro-case-results strong{
display:block;
margin:7px 0 6px;
font-size:15px;
}
.pro-case-results p{
margin:0;
color:#8da3b0;
font-size:11px;
line-height:1.55;
}
.pro-process-section{ background:#06111b; }
.pro-process-grid{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:12px;
}
.pro-process-grid::before{
content:"";
position:absolute;
left:8%;right:8%;top:51px;
height:1px;
background:linear-gradient(90deg,rgba(100,190,247,.55),rgba(148,131,255,.45),rgba(77,211,219,.45),rgba(102,221,171,.45));
}
.pro-process-grid article{
position:relative;
min-height:260px;
padding:24px;
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
}
.pro-process-number{
color:#5f7787;
font-size:10px;
font-weight:800;
letter-spacing:1.4px;
}
.pro-process-icon{
position:relative;
z-index:2;
width:16px;height:16px;
margin:20px 0 54px;
border:4px solid #07111b;
border-radius:50%;
}
.blue-dot{ background:#63bdf6; box-shadow:0 0 0 1px rgba(99,189,246,.35); }
.violet-dot{ background:#9386ff; box-shadow:0 0 0 1px rgba(147,134,255,.35); }
.cyan-dot{ background:#5fd4dc; box-shadow:0 0 0 1px rgba(95,212,220,.35); }
.mint-dot{ background:#6edcac; box-shadow:0 0 0 1px rgba(110,220,172,.35); }
.pro-process-grid h3{
margin:0 0 9px;
font-size:16px;
}
.pro-process-grid p{
margin:0;
color:#8da4b2;
font-size:11.5px;
line-height:1.6;
}
.pro-why-section{
background:
radial-gradient(circle at 25% 50%,rgba(74,171,234,.08),transparent 28%),
#0b1c2a;
}
.pro-why-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:78px;
align-items:center;
}
.pro-why-visual{
position:relative;
min-height:540px;
}
.pro-why-orb{
position:absolute;
width:330px;height:330px;
left:50%;top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(circle at 38% 36%,rgba(120,205,255,.28),rgba(50,123,172,.08) 45%,transparent 70%);
border:1px solid rgba(103,188,244,.08);
}
.pro-floating-panel{
position:absolute;
width:260px;
padding:20px;
border:1px solid rgba(255,255,255,.09);
border-radius:16px;
background:rgba(12,32,47,.80);
backdrop-filter:blur(14px);
box-shadow:0 22px 45px rgba(0,0,0,.20);
}
.pro-floating-panel small{
color:#6abff4;
font-size:8px;
font-weight:800;
letter-spacing:1.6px;
}
.pro-floating-panel strong{
display:block;
margin:8px 0 5px;
font-size:14px;
}
.pro-floating-panel span{
color:#8da5b3;
font-size:10px;
line-height:1.5;
}
.fp-one{ left:2%;top:11%; }
.fp-two{ right:0;top:38%; }
.fp-three{ left:10%;bottom:8%; }
.pro-why-copy h2{
max-width:560px;
}
.pro-why-copy>p{
max-width:550px;
margin:20px 0 0;
color:#95aab7;
font-size:14px;
line-height:1.8;
}
.pro-checks{
list-style:none;
padding:0;
margin:30px 0 0;
display:grid;
gap:14px;
}
.pro-checks li{
display:flex;
gap:12px;
align-items:flex-start;
color:#9bb0bc;
font-size:12px;
}
.pro-checks i{
width:23px;height:23px;
flex:0 0 23px;
display:grid;place-items:center;
border-radius:50%;
background:rgba(100,190,247,.09);
border:1px solid rgba(100,190,247,.18);
color:#75c8fa;
font-style:normal;
}
.pro-checks strong{ color:#eaf5fb; }
.pro-handwritten{
display:inline-block;
position:relative;
margin-top:34px;
color:#82cffd;
font-family:"Segoe Script","Brush Script MT",cursive;
font-size:25px;
transform:rotate(-2deg);
}
.pro-handwritten::after{
content:"";
position:absolute;
left:4px;right:0;bottom:-8px;
height:2px;
border-radius:99px;
background:#62bdf5;
transform:rotate(-3deg);
}
.pro-reviews-section{ background:#06111b; }
.pro-review-layout{
display:grid;
grid-template-columns:1.25fr .75fr;
gap:14px;
}
.pro-review-featured{
min-height:360px;
padding:34px;
display:flex;
flex-direction:column;
justify-content:space-between;
border:1px solid rgba(255,255,255,.075);
border-radius:21px;
background:
radial-gradient(circle at 90% 12%,rgba(94,186,245,.10),transparent 28%),
linear-gradient(145deg,#0d2638,#091a27);
}
.pro-stars{
color:#f4c263;
letter-spacing:3px;
font-size:13px;
}
.pro-review-featured blockquote{
max-width:730px;
margin:38px 0;
color:#f5f9fc;
font-size:22px;
line-height:1.55;
font-weight:500;
}
.pro-review-person{
display:flex;
align-items:center;
gap:12px;
}
.pro-avatar{
width:42px;height:42px;
display:grid;place-items:center;
border-radius:50%;
background:rgba(104,194,250,.11);
border:1px solid rgba(104,194,250,.20);
color:#82cef9;
font-size:10px;
font-weight:800;
}
.pro-review-person strong{ display:block;font-size:12px;margin-bottom:3px; }
.pro-review-person span{ color:#7e96a4;font-size:10px; }
.pro-review-side{
display:grid;
gap:14px;
}
.pro-review-side article{
min-height:173px;
padding:24px;
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:#0a1a27;
}
.pro-review-side p{
margin:18px 0 15px;
color:#9bafba;
font-size:12px;
line-height:1.65;
}
.pro-review-side strong{ font-size:11px; }
.pro-cta-panel{
margin-top:18px;
padding:30px 32px;
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
border:1px solid rgba(95,186,244,.16);
border-radius:20px;
background:
radial-gradient(circle at 90% 50%,rgba(76,174,236,.13),transparent 28%),
linear-gradient(120deg,#0c2537,#091a27);
}
.pro-cta-panel small{
color:#70c4f7;
font-size:8px;
font-weight:800;
letter-spacing:1.7px;
}
.pro-cta-panel h3{
margin:7px 0 4px;
font-size:20px;
}
.pro-cta-panel p{
margin:0;
color:#829aa8;
font-size:11px;
}
.pro-cta-link{
flex-shrink:0;
padding:13px 17px;
border:1px solid rgba(255,255,255,.15);
border-radius:9px;
background:rgba(255,255,255,.055);
color:#ddecf5;
text-decoration:none;
font-size:11px;
font-weight:700;
}
.pro-faq-section{
background:#0a1a27;
border-top:1px solid rgba(255,255,255,.045);
}
.pro-faq-grid{
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:85px;
align-items:start;
}
.pro-faq-intro h2{ font-size:clamp(34px,4vw,46px); }
.pro-faq-intro p{
max-width:390px;
margin:18px 0 0;
color:#8fa5b2;
font-size:13px;
line-height:1.7;
}
.pro-faq-list{
display:grid;
border-top:1px solid rgba(255,255,255,.08);
}
.pro-faq-list details{
border-bottom:1px solid rgba(255,255,255,.08);
}
.pro-faq-list summary{
list-style:none;
cursor:pointer;
padding:21px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
color:#eef7fc;
font-size:13px;
font-weight:600;
}
.pro-faq-list summary::-webkit-details-marker{ display:none; }
.pro-faq-list summary span{
color:#6fc2f5;
font-size:18px;
font-weight:400;
}
.pro-faq-list details[open] summary span{ transform:rotate(45deg); }
.pro-faq-list details p{
max-width:720px;
margin:-5px 0 22px;
color:#8da3b0;
font-size:12px;
line-height:1.7;
}
@media(max-width:1000px){
.pro-tech-strip .pro-shell{ grid-template-columns:1fr;gap:14px;padding:22px 0; }
.pro-tech-items{ flex-wrap:wrap;justify-content:flex-start; }
.pro-intro-grid,.pro-service-layout,.pro-case-grid,.pro-why-grid,.pro-review-layout,.pro-faq-grid{
grid-template-columns:1fr;
}
.pro-heading-row{ grid-template-columns:1fr;gap:18px; }
.pro-intro-grid,.pro-why-grid{ gap:42px; }
.pro-process-grid{ grid-template-columns:1fr 1fr; }
.pro-process-grid::before{ display:none; }
.pro-why-visual{ min-height:470px; }
}
@media(max-width:680px){
.pro-shell{ width:calc(100% - 28px); }
.pro-section{ padding:76px 0; }
.pro-number-grid{ grid-template-columns:1fr; }
.pro-number-card{ min-height:155px; }
.pro-service-feature{ min-height:470px;padding:26px 22px; }
.pro-service-feature h3{ margin-top:50px;font-size:28px; }
.pro-service-row{ grid-template-columns:45px 1fr; }
.pro-row-arrow{ display:none; }
.pro-case-main{ padding:16px; }
.pro-case-browser{ height:260px; }
.pro-browser-body{ height:222px; }
.pro-browser-cards{ grid-template-columns:1fr 1fr; }
.pro-browser-cards span:last-child{ display:none; }
.pro-process-grid{ grid-template-columns:1fr; }
.pro-process-grid article{ min-height:220px; }
.pro-process-icon{ margin-bottom:36px; }
.pro-why-visual{ min-height:520px; }
.pro-floating-panel{ width:225px; }
.fp-one{ left:0; }
.fp-two{ right:0; }
.fp-three{ left:3%; }
.pro-review-featured{ padding:26px 22px; }
.pro-review-featured blockquote{ font-size:18px; }
.pro-cta-panel{ align-items:flex-start;flex-direction:column; }
.pro-tech-items{ gap:16px; }
}
.pro-intro-section{
background:
radial-gradient(circle at 8% 20%,rgba(91,203,255,.13),transparent 26%),
radial-gradient(circle at 92% 15%,rgba(160,118,255,.12),transparent 24%),
linear-gradient(180deg,#081521 0%,#091927 100%);
}
.pro-number-card.accent-blue{
background:
linear-gradient(155deg,rgba(55,166,238,.18),rgba(255,255,255,.02)),
#0b1d2b;
border-color:rgba(90,188,248,.18);
}
.pro-number-card.accent-cyan{
background:
linear-gradient(155deg,rgba(73,215,220,.17),rgba(255,255,255,.02)),
#0b1d2b;
border-color:rgba(89,218,221,.17);
}
.pro-number-card.accent-violet{
background:
linear-gradient(155deg,rgba(151,121,255,.18),rgba(255,255,255,.02)),
#0b1d2b;
border-color:rgba(158,132,255,.17);
}
.pro-services-section{
background:
radial-gradient(circle at 12% 50%,rgba(65,172,242,.09),transparent 24%),
radial-gradient(circle at 88% 35%,rgba(116,226,187,.07),transparent 22%),
#06111b;
}
.pro-service-feature{
background:
radial-gradient(circle at 85% 78%,rgba(73,184,247,.18),transparent 30%),
linear-gradient(150deg,rgba(55,151,218,.18),rgba(255,255,255,.02)),
#0a1c29;
border-color:rgba(88,190,250,.24);
}
.row-cyan{
background:
linear-gradient(120deg,rgba(64,210,221,.13),rgba(255,255,255,.018)),
#0a1a27;
border-color:rgba(80,213,222,.14);
}
.row-violet{
background:
linear-gradient(120deg,rgba(151,125,255,.13),rgba(255,255,255,.018)),
#0a1a27;
border-color:rgba(158,135,255,.14);
}
.row-mint{
background:
linear-gradient(120deg,rgba(91,218,168,.13),rgba(255,255,255,.018)),
#0a1a27;
border-color:rgba(99,221,172,.14);
}
.pro-case-section{
background:
radial-gradient(circle at 10% 25%,rgba(146,118,255,.12),transparent 24%),
radial-gradient(circle at 88% 70%,rgba(66,190,239,.10),transparent 23%),
linear-gradient(180deg,#0b1b29 0%,#0a1824 100%);
}
.pro-case-main{
background:
radial-gradient(circle at 90% 0%,rgba(88,191,248,.12),transparent 28%),
linear-gradient(145deg,#102a3d,#0a1b28);
border-color:rgba(91,184,239,.13);
}
.pro-case-results article:nth-child(1){
background:
linear-gradient(120deg,rgba(88,180,244,.10),rgba(255,255,255,.015)),
#0a1925;
}
.pro-case-results article:nth-child(2){
background:
linear-gradient(120deg,rgba(146,124,255,.10),rgba(255,255,255,.015)),
#0a1925;
}
.pro-case-results article:nth-child(3){
background:
linear-gradient(120deg,rgba(88,214,171,.10),rgba(255,255,255,.015)),
#0a1925;
}
.pro-process-section{
background:
radial-gradient(circle at 18% 15%,rgba(68,179,244,.08),transparent 24%),
radial-gradient(circle at 78% 85%,rgba(151,123,255,.07),transparent 24%),
#06111b;
}
.pro-process-grid article:nth-child(1){
background:linear-gradient(160deg,rgba(73,177,241,.10),rgba(255,255,255,.014));
}
.pro-process-grid article:nth-child(2){
background:linear-gradient(160deg,rgba(148,126,255,.10),rgba(255,255,255,.014));
}
.pro-process-grid article:nth-child(3){
background:linear-gradient(160deg,rgba(79,209,218,.10),rgba(255,255,255,.014));
}
.pro-process-grid article:nth-child(4){
background:linear-gradient(160deg,rgba(94,217,167,.10),rgba(255,255,255,.014));
}
.pro-why-section{
background:
radial-gradient(circle at 22% 52%,rgba(73,179,244,.14),transparent 26%),
radial-gradient(circle at 86% 20%,rgba(152,123,255,.08),transparent 23%),
linear-gradient(180deg,#0b1c2a 0%,#0a1925 100%);
}
.pro-why-orb{
background:
radial-gradient(circle at 34% 30%,rgba(115,213,255,.34),transparent 32%),
radial-gradient(circle at 65% 65%,rgba(161,129,255,.22),transparent 38%),
rgba(35,103,145,.08);
box-shadow:0 0 80px rgba(72,177,241,.08);
}
.fp-one{
border-color:rgba(91,188,247,.16);
background:linear-gradient(145deg,rgba(39,117,164,.28),rgba(12,32,47,.82));
}
.fp-two{
border-color:rgba(154,130,255,.16);
background:linear-gradient(145deg,rgba(88,70,154,.24),rgba(12,32,47,.82));
}
.fp-three{
border-color:rgba(93,220,173,.16);
background:linear-gradient(145deg,rgba(38,112,88,.24),rgba(12,32,47,.82));
}
.pro-reviews-section{
background:
radial-gradient(circle at 8% 25%,rgba(79,190,246,.08),transparent 24%),
radial-gradient(circle at 90% 70%,rgba(244,180,99,.06),transparent 22%),
#06111b;
}
.pro-review-featured{
background:
radial-gradient(circle at 90% 12%,rgba(94,186,245,.16),transparent 28%),
radial-gradient(circle at 12% 85%,rgba(149,127,255,.08),transparent 25%),
linear-gradient(145deg,#0d2638,#091a27);
}
.pro-review-side article:first-child{
background:
linear-gradient(145deg,rgba(86,190,247,.10),rgba(255,255,255,.015)),
#0a1a27;
}
.pro-review-side article:last-child{
background:
linear-gradient(145deg,rgba(247,179,96,.10),rgba(255,255,255,.015)),
#0a1a27;
}
.pro-cta-panel{
background:
radial-gradient(circle at 88% 45%,rgba(82,191,247,.20),transparent 30%),
radial-gradient(circle at 12% 100%,rgba(148,125,255,.10),transparent 26%),
linear-gradient(120deg,#0c2537,#091a27);
border-color:rgba(101,194,250,.22);
}
.pro-faq-section{
background:
radial-gradient(circle at 85% 10%,rgba(71,187,244,.08),transparent 24%),
linear-gradient(180deg,#0a1a27,#091722);
}
.pro-faq-list details[open]{
background:linear-gradient(90deg,rgba(73,180,242,.07),transparent);
}
.pro-kicker{
text-shadow:0 0 18px rgba(123,201,250,.18);
}
.pro-heading-row h2,
.pro-heading-center h2,
.pro-intro-copy h2,
.pro-why-copy h2,
.pro-faq-intro h2{
background:linear-gradient(90deg,#ffffff 0%,#eaf7ff 55%,#bfe8ff 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.pro-human-callout{
position:relative;
grid-column:1/-1;
height:210px;
margin-bottom:14px;
overflow:hidden;
border-radius:20px;
border:1px solid rgba(255,255,255,.09);
background:#0b1d2b;
}
.pro-human-callout img{
width:100%;
height:100%;
object-fit:cover;
object-position:center 42%;
filter:saturate(.9) contrast(1.02) brightness(.78);
}
.pro-human-callout::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(7,18,28,.82),rgba(7,18,28,.15) 58%,rgba(7,18,28,.28));
}
.pro-human-caption{
position:absolute;
left:24px;
bottom:22px;
z-index:2;
}
.pro-human-caption strong{
display:block;
margin-top:8px;
font-size:20px;
color:white;
}
.pro-people-visual{
min-height:560px;
}
.people-photo{
position:absolute;
overflow:hidden;
border-radius:22px;
border:1px solid rgba(255,255,255,.11);
box-shadow:0 26px 60px rgba(0,0,0,.26);
}
.people-photo img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.people-photo-main{
left:0;
top:20px;
width:78%;
height:390px;
}
.people-photo-main::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 55%,rgba(6,17,27,.42));
}
.people-photo-small{
right:0;
bottom:24px;
width:43%;
height:230px;
border-color:rgba(102,184,247,.20);
}
.people-proof{
position:absolute;
left:26px;
bottom:45px;
z-index:4;
display:flex;
align-items:center;
gap:13px;
padding:13px 15px;
border-radius:14px;
border:1px solid rgba(255,255,255,.11);
background:rgba(7,20,30,.78);
backdrop-filter:blur(14px);
box-shadow:0 18px 40px rgba(0,0,0,.24);
}
.people-proof-faces{
display:flex;
}
.people-proof-faces img{
width:34px;
height:34px;
object-fit:cover;
border-radius:50%;
border:2px solid #0a1c29;
margin-left:-9px;
}
.people-proof-faces img:first-child{ margin-left:0; }
.people-proof strong{
display:block;
font-size:11px;
}
.people-proof span{
display:block;
margin-top:2px;
color:#8fa5b2;
font-size:9px;
}
.pro-avatar-photo{
width:42px;
height:42px;
object-fit:cover;
border-radius:50%;
border:1px solid rgba(103,194,255,.22);
box-shadow:0 5px 16px rgba(0,0,0,.2);
}
.pro-review-with-photo{
display:grid !important;
grid-template-columns:52px 1fr;
gap:14px;
align-items:start;
}
.pro-review-with-photo>img{
width:50px;
height:50px;
object-fit:cover;
border-radius:50%;
border:1px solid rgba(255,255,255,.10);
}
.pro-review-with-photo p{
margin-top:12px !important;
}
@media(max-width:1000px){
.pro-human-callout{ height:240px; }
.pro-people-visual{ min-height:520px; }
}
@media(max-width:680px){
.pro-human-callout{ height:190px; }
.pro-human-caption strong{ font-size:17px; }
.pro-people-visual{ min-height:500px; }
.people-photo-main{ width:88%;height:330px; }
.people-photo-small{ width:48%;height:190px; }
.people-proof{ left:12px;bottom:28px; }
}
.pro-positioning{
background:
radial-gradient(circle at 8% 20%,rgba(72,177,240,.08),transparent 24%),
#081521;
}
.pro-positioning-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:72px;
align-items:center;
}
.pro-positioning-copy h2{
margin:12px 0 0;
max-width:610px;
font-size:clamp(36px,4.2vw,52px);
line-height:1.08;
letter-spacing:-1.7px;
}
.pro-positioning-copy>p{
max-width:590px;
margin:20px 0 0;
color:#94a9b6;
font-size:15px;
line-height:1.78;
}
.pro-positioning-points{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:34px;
}
.pro-positioning-points div{
padding-top:15px;
border-top:1px solid rgba(255,255,255,.09);
}
.pro-positioning-points strong{
display:block;
font-size:12px;
margin-bottom:4px;
}
.pro-positioning-points span{
color:#78909f;
font-size:10px;
}
.pro-positioning-metrics{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}
.pro-metric{
min-height:230px;
padding:22px;
display:flex;
flex-direction:column;
justify-content:flex-end;
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.08);
border-radius:18px;
}
.pro-metric::before{
content:"";
position:absolute;
width:145px;height:145px;
top:-70px;right:-65px;
border-radius:50%;
opacity:.22;
}
.metric-blue{ background:linear-gradient(155deg,rgba(69,172,238,.14),rgba(255,255,255,.018)),#0a1d2a; }
.metric-violet{ background:linear-gradient(155deg,rgba(145,124,255,.14),rgba(255,255,255,.018)),#0a1d2a; }
.metric-mint{ background:linear-gradient(155deg,rgba(90,215,168,.14),rgba(255,255,255,.018)),#0a1d2a; }
.metric-blue::before{ background:#5abcf7; }
.metric-violet::before{ background:#9888ff; }
.metric-mint::before{ background:#6fe1b2; }
.pro-metric small{
color:#6c8493;
font-size:8px;
font-weight:800;
letter-spacing:1.5px;
}
.pro-metric strong{
margin:12px 0 6px;
font-size:24px;
letter-spacing:-.8px;
}
.pro-metric span{
color:#899fab;
font-size:10px;
}
.pro-services-v2{
background:
radial-gradient(circle at 90% 15%,rgba(93,206,177,.055),transparent 22%),
#06111b;
}
.pro-services-grid-v2{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.pro-service-card-v2{
min-height:390px;
padding:26px;
display:flex;
flex-direction:column;
border:1px solid rgba(255,255,255,.075);
border-radius:20px;
position:relative;
overflow:hidden;
}
.pro-service-card-v2::before{
content:"";
position:absolute;
width:180px;height:180px;
right:-85px;bottom:-85px;
border-radius:50%;
opacity:.16;
}
.service-blue{
background:linear-gradient(160deg,rgba(69,171,237,.11),rgba(255,255,255,.015)),#091a27;
}
.service-blue::before{ background:#5cbcf7; }
.service-cyan{
background:linear-gradient(160deg,rgba(71,207,216,.10),rgba(255,255,255,.015)),#091a27;
}
.service-cyan::before{ background:#60d8df; }
.service-violet{
background:linear-gradient(160deg,rgba(145,125,255,.11),rgba(255,255,255,.015)),#091a27;
}
.service-violet::before{ background:#9a8cff; }
.service-mint{
background:linear-gradient(160deg,rgba(91,215,169,.10),rgba(255,255,255,.015)),#091a27;
}
.service-mint::before{ background:#70e0b4; }
.pro-service-card-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.pro-service-number{
color:rgba(255,255,255,.09);
font-size:31px;
font-weight:800;
}
.pro-service-tag{
color:#738a98;
font-size:8px;
font-weight:800;
letter-spacing:1.5px;
}
.pro-service-icon-v2{
width:48px;height:48px;
margin:54px 0 23px;
display:grid;place-items:center;
border-radius:14px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.07);
color:#9bd9ff;
}
.service-cyan .pro-service-icon-v2{ color:#7de1e6; }
.service-violet .pro-service-icon-v2{ color:#b0a3ff; }
.service-mint .pro-service-icon-v2{ color:#8ce7c0; }
.pro-service-icon-v2 svg{ width:23px;height:23px; }
.pro-service-card-v2 h3{
margin:0 0 10px;
font-size:18px;
}
.pro-service-card-v2 p{
margin:0;
color:#8da3b0;
font-size:11.5px;
line-height:1.65;
}
.pro-service-card-v2 a{
margin-top:auto;
padding-top:24px;
color:#99c9e6;
font-size:10px;
font-weight:700;
text-decoration:none;
}
.pro-service-card-v2 a span{ margin-left:5px; }
.pro-case-v2{
background:
radial-gradient(circle at 12% 24%,rgba(143,122,255,.065),transparent 23%),
#0b1b29;
}
.pro-case-v2-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:18px;
}
.pro-case-v2-visual{
min-height:510px;
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.075);
border-radius:22px;
background:
radial-gradient(circle at 75% 20%,rgba(88,190,246,.13),transparent 25%),
linear-gradient(145deg,#102a3d,#091a27);
}
.pro-screen{
position:absolute;
left:8%;right:8%;top:13%;bottom:13%;
overflow:hidden;
border-radius:18px;
background:#f4f9fc;
box-shadow:0 28px 65px rgba(0,0,0,.30);
transform:rotate(-1.5deg);
}
.pro-screen-bar{
height:38px;
display:flex;
gap:6px;
align-items:center;
padding:0 13px;
background:#e8eff3;
border-bottom:1px solid #d7e2e8;
}
.pro-screen-bar i{
width:7px;height:7px;border-radius:50%;background:#bccbd3;
}
.pro-screen-layout{
display:grid;
grid-template-columns:27% 73%;
height:calc(100% - 38px);
}
.pro-screen-sidebar{
padding:24px 17px;
background:linear-gradient(145deg,#0b3046,#0a2232);
}
.pro-screen-sidebar span{
display:block;
height:7px;
margin-bottom:15px;
border-radius:999px;
background:rgba(255,255,255,.16);
}
.pro-screen-content{ padding:30px; }
.pro-screen-title{ width:48%;height:14px;border-radius:99px;background:#cbdbe3; }
.pro-screen-subtitle{ width:75%;height:9px;margin-top:16px;border-radius:99px;background:#e0e9ee; }
.pro-screen-cta{ width:95px;height:31px;margin-top:22px;border-radius:7px;background:#66b8f7; }
.pro-screen-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:32px;
}
.pro-screen-cards span{
height:105px;
border-radius:11px;
background:#e6eff3;
}
.pro-case-badge{
position:absolute;
padding:9px 12px;
border:1px solid rgba(255,255,255,.11);
border-radius:999px;
background:rgba(6,18,28,.74);
backdrop-filter:blur(12px);
color:#d9e9f2;
font-size:9px;
box-shadow:0 14px 30px rgba(0,0,0,.20);
}
.badge-a{ left:5%;bottom:16%; }
.badge-b{ right:5%;top:18%; }
.badge-c{ right:9%;bottom:12%; }
.pro-case-v2-copy{
padding:38px;
border:1px solid rgba(255,255,255,.075);
border-radius:22px;
background:linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
}
.pro-project-pill{
display:inline-flex;
padding:7px 10px;
border-radius:999px;
background:rgba(98,190,247,.08);
border:1px solid rgba(98,190,247,.15);
color:#82cdfa;
font-size:8px;
font-weight:800;
letter-spacing:1.4px;
}
.pro-case-v2-copy h3{
margin:21px 0 13px;
font-size:30px;
line-height:1.12;
letter-spacing:-.8px;
}
.pro-case-v2-copy>p{
margin:0;
color:#92a8b5;
font-size:13px;
line-height:1.75;
}
.pro-case-points-v2{
display:grid;
gap:0;
margin-top:29px;
border-top:1px solid rgba(255,255,255,.075);
}
.pro-case-points-v2>div{
display:grid;
grid-template-columns:42px 1fr;
gap:12px;
padding:17px 0;
border-bottom:1px solid rgba(255,255,255,.075);
}
.pro-case-points-v2 i{
color:rgba(113,195,245,.35);
font-size:15px;
font-style:normal;
font-weight:800;
}
.pro-case-points-v2 strong{
display:block;
margin-bottom:4px;
font-size:12px;
}
.pro-case-points-v2 small{
color:#7f96a4;
font-size:10px;
}
.pro-process-v2{ background:#06111b; }
.pro-process-line-v2{
position:relative;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
}
.pro-process-line-v2::before{
content:"";
position:absolute;
left:8%;right:8%;top:57px;
height:1px;
background:linear-gradient(90deg,#5bbcf6,#9688ff,#62d8de,#70dfb1);
opacity:.45;
}
.pro-process-line-v2 article{
min-height:245px;
padding:23px;
position:relative;
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
}
.pro-step-no{
color:#637989;
font-size:9px;
font-weight:800;
letter-spacing:1.3px;
}
.pro-step-dot{
position:relative;
z-index:2;
width:17px;height:17px;
margin:20px 0 55px;
border:4px solid #07111b;
border-radius:50%;
}
.dot-blue{background:#5bbcf6}
.dot-violet{background:#9688ff}
.dot-cyan{background:#62d8de}
.dot-mint{background:#70dfb1}
.pro-process-line-v2 h3{
margin:0 0 9px;
font-size:15px;
}
.pro-process-line-v2 p{
margin:0;
color:#889fad;
font-size:11px;
line-height:1.6;
}
.pro-why-v2{
background:
radial-gradient(circle at 15% 50%,rgba(79,183,242,.07),transparent 24%),
#0b1c2a;
}
.pro-why-v2-grid{
display:grid;
grid-template-columns:1.05fr .95fr;
gap:72px;
align-items:center;
}
.pro-why-v2-photo{
min-height:540px;
position:relative;
overflow:hidden;
border-radius:24px;
border:1px solid rgba(255,255,255,.09);
background:#0b1c2a;
box-shadow:0 25px 65px rgba(0,0,0,.20);
}
.pro-why-v2-photo>img{
width:100%;
height:540px;
display:block;
object-fit:cover;
object-position:center 44%;
filter:saturate(.9) contrast(1.02) brightness(.82);
}
.pro-why-v2-photo::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,transparent 42%,rgba(6,17,27,.54));
}
.pro-photo-overlay{
position:absolute;
z-index:3;
left:24px;
bottom:24px;
display:flex;
align-items:center;
gap:14px;
padding:13px 16px;
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
background:rgba(6,18,28,.78);
backdrop-filter:blur(13px);
}
.pro-photo-faces{ display:flex; }
.pro-photo-faces img{
width:34px;height:34px;
object-fit:cover;
border-radius:50%;
border:2px solid #0b1c2a;
margin-left:-8px;
}
.pro-photo-faces img:first-child{ margin-left:0; }
.pro-photo-overlay strong{
display:block;
font-size:11px;
}
.pro-photo-overlay span{
display:block;
margin-top:2px;
color:#859ba8;
font-size:9px;
}
.pro-why-v2-copy h2{
margin:12px 0 0;
font-size:clamp(36px,4vw,50px);
line-height:1.08;
letter-spacing:-1.5px;
}
.pro-why-v2-copy>p{
max-width:540px;
margin:20px 0 0;
color:#96abb8;
font-size:14px;
line-height:1.78;
}
.pro-benefit-list{
display:grid;
margin-top:28px;
border-top:1px solid rgba(255,255,255,.07);
}
.pro-benefit-list>div{
display:grid;
grid-template-columns:30px 1fr;
gap:12px;
padding:15px 0;
border-bottom:1px solid rgba(255,255,255,.07);
}
.pro-benefit-list i{
width:23px;height:23px;
display:grid;place-items:center;
border-radius:50%;
background:rgba(93,188,246,.08);
border:1px solid rgba(93,188,246,.15);
color:#7fcaf8;
font-style:normal;
font-size:10px;
}
.pro-benefit-list strong{
display:block;
margin-bottom:4px;
font-size:12px;
}
.pro-benefit-list small{
color:#7f96a4;
font-size:10px;
}
.pro-reviews-v2{
background:
radial-gradient(circle at 90% 20%,rgba(241,181,100,.045),transparent 22%),
#06111b;
}
.pro-reviews-v2-grid{
display:grid;
grid-template-columns:1.2fr .8fr .8fr;
gap:14px;
}
.pro-review-v2{
min-height:300px;
padding:25px;
display:flex;
flex-direction:column;
border:1px solid rgba(255,255,255,.075);
border-radius:19px;
background:linear-gradient(155deg,rgba(255,255,255,.03),rgba(255,255,255,.012));
}
.pro-review-main-v2{
min-height:360px;
background:
radial-gradient(circle at 88% 14%,rgba(85,183,243,.12),transparent 26%),
linear-gradient(145deg,#0d2638,#091a27);
}
.pro-review-topline{
display:flex;
justify-content:space-between;
align-items:center;
}
.pro-review-topline>span{
color:#77909e;
font-size:10px;
}
.pro-review-v2 blockquote{
margin:45px 0 32px;
font-size:20px;
line-height:1.55;
}
.pro-review-v2>p{
margin:27px 0 28px;
color:#9aadb8;
font-size:12px;
line-height:1.7;
}
.pro-review-person-v2{
margin-top:auto;
display:flex;
align-items:center;
gap:11px;
}
.pro-review-person-v2 img{
width:42px;height:42px;
object-fit:cover;
border-radius:50%;
border:1px solid rgba(255,255,255,.12);
}
.pro-review-person-v2 strong{
display:block;
font-size:11px;
margin-bottom:2px;
}
.pro-review-person-v2 span{
color:#7c92a0;
font-size:9px;
}
.pro-cta-v2{
margin-top:18px;
padding:28px 30px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
border:1px solid rgba(93,187,245,.16);
border-radius:19px;
background:
radial-gradient(circle at 90% 50%,rgba(84,184,244,.12),transparent 28%),
linear-gradient(120deg,#0c2435,#091a27);
}
.pro-cta-v2 small{
color:#71c4f6;
font-size:8px;
font-weight:800;
letter-spacing:1.5px;
}
.pro-cta-v2 h3{
margin:7px 0 0;
font-size:19px;
}
.pro-cta-v2 a{
padding:12px 15px;
border:1px solid rgba(255,255,255,.12);
border-radius:9px;
background:rgba(255,255,255,.045);
color:#e2eef5;
text-decoration:none;
font-size:10px;
font-weight:700;
}
.pro-faq-v2{
background:
radial-gradient(circle at 88% 8%,rgba(76,180,240,.055),transparent 22%),
#0a1a27;
}
.pro-faq-v2-grid{
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:80px;
align-items:start;
}
.pro-faq-v2-intro h2{
margin:12px 0 0;
font-size:clamp(34px,4vw,46px);
line-height:1.08;
letter-spacing:-1.3px;
}
.pro-faq-v2-intro p{
max-width:390px;
margin:17px 0 0;
color:#8ea4b1;
font-size:12px;
line-height:1.7;
}
.pro-faq-v2-list{
border-top:1px solid rgba(255,255,255,.08);
}
.pro-faq-v2-list details{
border-bottom:1px solid rgba(255,255,255,.08);
}
.pro-faq-v2-list summary{
list-style:none;
cursor:pointer;
padding:21px 0;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
font-size:13px;
font-weight:600;
}
.pro-faq-v2-list summary::-webkit-details-marker{ display:none; }
.pro-faq-v2-list summary span{
color:#71c3f4;
font-size:18px;
font-weight:400;
}
.pro-faq-v2-list details[open] summary span{ transform:rotate(45deg); }
.pro-faq-v2-list details p{
max-width:720px;
margin:-4px 0 22px;
color:#899fab;
font-size:11.5px;
line-height:1.7;
}
@media(max-width:1050px){
.pro-positioning-grid,
.pro-case-v2-grid,
.pro-why-v2-grid,
.pro-faq-v2-grid{
grid-template-columns:1fr;
}
.pro-services-grid-v2{
grid-template-columns:1fr 1fr;
}
.pro-reviews-v2-grid{
grid-template-columns:1fr 1fr;
}
.pro-review-main-v2{
grid-column:1/-1;
}
.pro-process-line-v2{
grid-template-columns:1fr 1fr;
}
.pro-process-line-v2::before{ display:none; }
}
@media(max-width:700px){
.pro-positioning-points,
.pro-positioning-metrics,
.pro-services-grid-v2,
.pro-reviews-v2-grid,
.pro-process-line-v2{
grid-template-columns:1fr;
}
.pro-positioning-metrics{ gap:10px; }
.pro-metric{ min-height:150px; }
.pro-service-card-v2{ min-height:330px; }
.pro-service-icon-v2{ margin-top:35px; }
.pro-screen{
left:5%;right:5%;
}
.pro-screen-cards{ grid-template-columns:1fr 1fr; }
.pro-screen-cards span:last-child{ display:none; }
.pro-why-v2-photo,
.pro-why-v2-photo>img{
min-height:430px;
height:430px;
}
.pro-review-main-v2{ grid-column:auto; }
.pro-cta-v2{
align-items:flex-start;
flex-direction:column;
}
}
.motion-reveal{
opacity:0;
transform:translateY(28px);
transition:
opacity .72s ease,
transform .82s cubic-bezier(.22,.8,.25,1),
filter .72s ease;
will-change:opacity,transform;
}
.motion-reveal.motion-visible{
opacity:1;
transform:translateY(0);
}
.motion-left{
transform:translateX(-34px);
}
.motion-right{
transform:translateX(34px);
}
.motion-scale{
transform:translateY(18px) scale(.965);
filter:blur(5px);
}
.motion-left.motion-visible,
.motion-right.motion-visible,
.motion-scale.motion-visible{
transform:none;
filter:none;
}
.motion-delay-1{ transition-delay:.07s; }
.motion-delay-2{ transition-delay:.14s; }
.motion-delay-3{ transition-delay:.21s; }
.motion-delay-4{ transition-delay:.28s; }
.motion-delay-5{ transition-delay:.35s; }
.pro-heading-row h2,
.pro-heading-center h2,
.pro-positioning-copy h2,
.pro-why-v2-copy h2,
.pro-faq-v2-intro h2{
position:relative;
}
.pro-heading-row h2::after,
.pro-heading-center h2::after,
.pro-positioning-copy h2::after,
.pro-why-v2-copy h2::after,
.pro-faq-v2-intro h2::after{
content:"";
display:block;
width:54px;
height:2px;
margin-top:18px;
border-radius:99px;
background:linear-gradient(90deg,#66b8f7,#8c83ff,#6edcac);
transform:scaleX(0);
transform-origin:left center;
transition:transform .8s cubic-bezier(.22,.8,.25,1) .18s;
}
.motion-visible.pro-heading-row h2::after,
.motion-visible.pro-heading-center h2::after,
.motion-visible.pro-positioning-copy h2::after,
.motion-visible.pro-why-v2-copy h2::after,
.motion-visible.pro-faq-v2-intro h2::after,
.motion-visible h2::after{
transform:scaleX(1);
}
.pro-tech-items{
position:relative;
overflow:hidden;
}
@media(min-width:801px){
.pro-tech-items span{
animation:techBreath 4.8s ease-in-out infinite;
}
.pro-tech-items span:nth-child(2){animation-delay:.35s}
.pro-tech-items span:nth-child(3){animation-delay:.7s}
.pro-tech-items span:nth-child(4){animation-delay:1.05s}
.pro-tech-items span:nth-child(5){animation-delay:1.4s}
.pro-tech-items span:nth-child(6){animation-delay:1.75s}
}
@keyframes techBreath{
0%,100%{opacity:.58;transform:translateY(0)}
50%{opacity:1;transform:translateY(-2px)}
}
.pro-metric,
.pro-service-card-v2,
.pro-process-line-v2 article,
.pro-review-v2{
transition:
transform .28s cubic-bezier(.22,.8,.25,1),
border-color .28s ease,
box-shadow .28s ease;
}
.pro-metric:hover,
.pro-service-card-v2:hover,
.pro-process-line-v2 article:hover,
.pro-review-v2:hover{
transform:translateY(-6px);
border-color:rgba(102,184,247,.20);
box-shadow:0 20px 42px rgba(0,0,0,.18);
}
.pro-service-icon-v2{
transition:transform .35s cubic-bezier(.22,.8,.25,1);
}
.pro-service-card-v2:hover .pro-service-icon-v2{
transform:translateY(-4px) rotate(-2deg) scale(1.04);
}
.pro-screen{
transition:transform .65s cubic-bezier(.22,.8,.25,1);
}
.pro-case-v2-visual.motion-visible .pro-screen{
animation:screenFloat 7s ease-in-out 1.1s infinite;
}
@keyframes screenFloat{
0%,100%{transform:rotate(-1.5deg) translateY(0)}
50%{transform:rotate(-.6deg) translateY(-8px)}
}
.pro-case-badge{
animation:badgeFloat 5.5s ease-in-out infinite;
}
.badge-b{animation-delay:.7s}
.badge-c{animation-delay:1.3s}
@keyframes badgeFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-6px)}
}
.pro-process-line-v2::before{
transform:scaleX(0);
transform-origin:left center;
transition:transform 1.25s cubic-bezier(.22,.8,.25,1) .15s;
}
.pro-process-line-v2.motion-visible::before{
transform:scaleX(1);
}
.pro-step-dot{
transform:scale(.6);
opacity:.35;
transition:transform .45s ease,opacity .45s ease,box-shadow .45s ease;
}
.motion-visible .pro-step-dot{
transform:scale(1);
opacity:1;
box-shadow:0 0 0 6px rgba(102,184,247,.06);
}
.pro-why-v2-photo{
overflow:hidden;
}
.pro-why-v2-photo>img{
transform:scale(1.045);
transition:transform 1.4s cubic-bezier(.22,.8,.25,1);
}
.pro-why-v2-photo.motion-visible>img{
transform:scale(1);
}
.pro-photo-overlay{
opacity:0;
transform:translateY(14px);
transition:opacity .55s ease .35s,transform .65s cubic-bezier(.22,.8,.25,1) .35s;
}
.pro-why-v2-photo.motion-visible .pro-photo-overlay{
opacity:1;
transform:translateY(0);
}
.pro-stars{
transform-origin:left center;
}
.pro-review-v2.motion-visible .pro-stars{
animation:starPop .55s ease .28s both;
}
@keyframes starPop{
from{opacity:0;transform:scale(.88)}
to{opacity:1;transform:scale(1)}
}
.pro-cta-v2{
overflow:hidden;
position:relative;
}
.pro-cta-v2::after{
content:"";
position:absolute;
top:0;
left:-30%;
width:24%;
height:100%;
background:linear-gradient(115deg,transparent,rgba(255,255,255,.08),transparent);
transform:skewX(-20deg);
}
.pro-cta-v2.motion-visible::after{
animation:ctaSweep 1.2s ease .45s 1;
}
@keyframes ctaSweep{
to{left:120%}
}
.pro-faq-v2-list details{
transition:background .25s ease,border-color .25s ease;
}
.pro-faq-v2-list details:hover{
background:rgba(255,255,255,.018);
}
.pro-faq-v2-list details[open]{
background:linear-gradient(90deg,rgba(102,184,247,.05),transparent);
}
footer.motion-reveal{
transform:translateY(20px);
}
.navbar{
animation:navEnter .55s ease both;
}
@keyframes navEnter{
from{opacity:0;transform:translateY(-12px)}
to{opacity:1;transform:translateY(0)}
}
.parallax-soft{
transition:transform .18s ease-out;
will-change:transform;
}
@media(prefers-reduced-motion:reduce){
.motion-reveal,
.motion-left,
.motion-right,
.motion-scale,
.pro-service-card-v2,
.pro-metric,
.pro-process-line-v2 article,
.pro-review-v2,
.pro-screen,
.pro-case-badge,
.pro-tech-items span,
.navbar{
animation:none!important;
transition:none!important;
transform:none!important;
filter:none!important;
opacity:1!important;
}
.pro-process-line-v2::before{
transform:scaleX(1)!important;
}
}
.pro-faq-v3{
background:
radial-gradient(circle at 88% 12%,rgba(93,187,245,.07),transparent 24%),
radial-gradient(circle at 8% 85%,rgba(145,124,255,.05),transparent 22%),
linear-gradient(180deg,#0a1a27 0%,#081722 100%);
border-top:1px solid rgba(255,255,255,.045);
}
.pro-faq-v3-head{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:70px;
align-items:end;
margin-bottom:52px;
}
.pro-faq-v3-head h2{
margin:12px 0 0;
max-width:700px;
font-size:clamp(36px,4.4vw,54px);
line-height:1.06;
letter-spacing:-1.8px;
}
.pro-faq-v3-head>p{
max-width:480px;
margin:0;
color:#91a6b3;
font-size:14px;
line-height:1.75;
}
.pro-faq-v3-layout{
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:22px;
align-items:stretch;
}
.pro-faq-v3-card{
position:relative;
overflow:hidden;
min-height:430px;
padding:30px;
border:1px solid rgba(102,184,247,.12);
border-radius:22px;
background:
radial-gradient(circle at 88% 16%,rgba(94,190,247,.16),transparent 28%),
linear-gradient(145deg,#102a3d,#0a1b28);
}
.pro-faq-v3-card::after{
content:"";
position:absolute;
width:260px;
height:260px;
right:-110px;
bottom:-120px;
border-radius:50%;
background:radial-gradient(circle,rgba(148,127,255,.13),transparent 68%);
}
.pro-faq-v3-eyebrow{
color:#78c8f7;
font-size:9px;
font-weight:800;
letter-spacing:1.8px;
}
.pro-faq-v3-card h3{
max-width:360px;
margin:18px 0 12px;
font-size:27px;
line-height:1.15;
letter-spacing:-.8px;
}
.pro-faq-v3-card p{
max-width:420px;
margin:0;
color:#95aab6;
font-size:12.5px;
line-height:1.72;
}
.pro-faq-v3-contact{
display:flex;
align-items:center;
gap:13px;
margin-top:34px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.08);
}
.pro-faq-v3-icon{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:50%;
background:rgba(102,184,247,.09);
border:1px solid rgba(102,184,247,.16);
color:#84cef9;
}
.pro-faq-v3-contact strong{
display:block;
font-size:11px;
margin-bottom:3px;
}
.pro-faq-v3-contact span{
color:#8198a6;
font-size:9px;
}
.pro-faq-v3-button{
position:absolute;
left:30px;
bottom:30px;
z-index:2;
display:inline-flex;
align-items:center;
gap:9px;
padding:12px 15px;
border:1px solid rgba(255,255,255,.11);
border-radius:9px;
background:rgba(255,255,255,.045);
color:#ecf7fd;
font-size:10px;
font-weight:700;
text-decoration:none;
transition:transform .22s ease, background .22s ease, border-color .22s ease;
}
.pro-faq-v3-button:hover{
transform:translateY(-2px);
background:rgba(102,184,247,.09);
border-color:rgba(102,184,247,.22);
}
.pro-faq-v3-list{
overflow:hidden;
border:1px solid rgba(255,255,255,.075);
border-radius:22px;
background:rgba(255,255,255,.018);
}
.pro-faq-v3-list details{
border-bottom:1px solid rgba(255,255,255,.075);
background:transparent;
transition:background .25s ease;
}
.pro-faq-v3-list details:last-child{
border-bottom:none;
}
.pro-faq-v3-list details[open]{
background:
linear-gradient(90deg,rgba(102,184,247,.07),rgba(255,255,255,.01) 42%,transparent);
}
.pro-faq-v3-list summary{
list-style:none;
cursor:pointer;
min-height:78px;
padding:0 24px;
display:grid;
grid-template-columns:42px 1fr 36px;
gap:16px;
align-items:center;
}
.pro-faq-v3-list summary::-webkit-details-marker{ display:none; }
.pro-faq-v3-number{
color:#5f7b8c;
font-size:10px;
font-weight:800;
letter-spacing:1.1px;
}
.pro-faq-v3-question{
color:#eff8fd;
font-size:13.5px;
font-weight:600;
letter-spacing:-.15px;
}
.pro-faq-v3-plus{
width:31px;
height:31px;
display:grid;
place-items:center;
justify-self:end;
border-radius:50%;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.07);
color:#75c6f6;
font-size:17px;
font-weight:300;
transition:transform .25s ease, background .25s ease;
}
.pro-faq-v3-list details[open] .pro-faq-v3-plus{
transform:rotate(45deg);
background:rgba(102,184,247,.08);
}
.pro-faq-v3-answer{
padding:0 76px 23px 82px;
max-width:760px;
color:#8ea4b1;
font-size:11.5px;
line-height:1.72;
}
.pro-faq-v3-list details:not([open]):hover{
background:rgba(255,255,255,.018);
}
.pro-faq-v3-head.motion-reveal,
.pro-faq-v3-card.motion-reveal,
.pro-faq-v3-list.motion-reveal{
will-change:opacity,transform;
}
@media(max-width:950px){
.pro-faq-v3-head,
.pro-faq-v3-layout{
grid-template-columns:1fr;
}
.pro-faq-v3-head{
gap:18px;
}
.pro-faq-v3-card{
min-height:360px;
}
}
@media(max-width:620px){
.pro-faq-v3-head h2{
font-size:34px;
}
.pro-faq-v3-card{
padding:24px;
}
.pro-faq-v3-button{
left:24px;
bottom:24px;
}
.pro-faq-v3-list summary{
min-height:72px;
padding:0 16px;
grid-template-columns:32px 1fr 32px;
gap:10px;
}
.pro-faq-v3-question{
font-size:12.5px;
}
.pro-faq-v3-answer{
padding:0 50px 20px 58px;
}
}
.pro-case-v3{
background:
radial-gradient(circle at 12% 20%,rgba(139,121,255,.07),transparent 24%),
radial-gradient(circle at 88% 74%,rgba(74,185,242,.06),transparent 22%),
linear-gradient(180deg,#0b1b29 0%,#091722 100%);
}
.pro-case-v3-head{
display:grid;
grid-template-columns:1.08fr .92fr;
gap:70px;
align-items:end;
margin-bottom:46px;
}
.pro-case-v3-head h2{
margin:12px 0 0;
max-width:760px;
font-size:clamp(38px,4.6vw,58px);
line-height:1.03;
letter-spacing:-2px;
}
.pro-case-v3-head>p{
max-width:520px;
margin:0;
color:#91a6b3;
font-size:14px;
line-height:1.78;
}
.pro-case-v3-stage{
display:grid;
grid-template-columns:1.14fr .86fr;
gap:20px;
align-items:stretch;
}
.pro-case-v3-browser-wrap{
position:relative;
min-height:560px;
overflow:hidden;
border:1px solid rgba(255,255,255,.075);
border-radius:24px;
background:
radial-gradient(circle at 82% 18%,rgba(93,189,247,.15),transparent 26%),
radial-gradient(circle at 18% 85%,rgba(145,123,255,.08),transparent 24%),
linear-gradient(145deg,#102b3f,#0a1a27 72%);
}
.pro-case-v3-browser{
position:absolute;
left:7%;
right:7%;
top:9%;
bottom:10%;
overflow:hidden;
border-radius:18px;
background:#eef5f8;
box-shadow:0 32px 70px rgba(0,0,0,.30);
transform:rotate(-1deg);
}
.pro-case-v3-toolbar{
height:42px;
padding:0 14px;
display:grid;
grid-template-columns:auto 1fr auto;
gap:16px;
align-items:center;
background:#e3ebef;
border-bottom:1px solid #d2dee4;
}
.pro-case-v3-dots{
display:flex;
gap:6px;
}
.pro-case-v3-dots i{
width:7px;height:7px;border-radius:50%;
background:#b9c9d1;
}
.pro-case-v3-url{
justify-self:center;
min-width:190px;
padding:6px 12px;
border-radius:999px;
background:#f4f8fa;
color:#9babb4;
font-size:8px;
text-align:center;
}
.pro-case-v3-status{
color:#42a887;
font-size:8px;
font-weight:800;
letter-spacing:1.1px;
}
.pro-case-v3-canvas{
display:grid;
grid-template-columns:24% 76%;
height:calc(100% - 42px);
}
.pro-case-v3-sidebar{
padding:24px 18px;
background:linear-gradient(150deg,#0c334a,#0a2232);
}
.pro-case-v3-logo{
width:54px;
height:12px;
margin-bottom:32px;
border-radius:999px;
background:rgba(255,255,255,.84);
}
.pro-case-v3-sidebar span{
display:block;
width:76%;
height:7px;
margin-bottom:16px;
border-radius:999px;
background:rgba(255,255,255,.16);
}
.pro-case-v3-sidebar span:nth-child(2){ width:62%; }
.pro-case-v3-sidebar span:nth-child(3){ width:82%; }
.pro-case-v3-sidebar span:nth-child(4){ width:68%; }
.pro-case-v3-main{
padding:42px 38px 34px;
background:
linear-gradient(180deg,rgba(255,255,255,.9),rgba(247,251,253,.96));
}
.pro-case-v3-mini{
color:#68a6c7;
font-size:7px;
font-weight:800;
letter-spacing:1.4px;
}
.pro-case-v3-title{
width:54%;
height:17px;
margin-top:17px;
border-radius:999px;
background:#bccfd9;
}
.pro-case-v3-copyline{
height:8px;
border-radius:999px;
background:#dce7ec;
}
.line-a{ width:78%;margin-top:19px; }
.line-b{ width:62%;margin-top:10px; }
.pro-case-v3-actions{
display:flex;
gap:9px;
margin-top:23px;
}
.pro-case-v3-actions span:first-child{
width:105px;
height:32px;
border-radius:8px;
background:#61b8ef;
}
.pro-case-v3-actions span:last-child{
width:86px;
height:32px;
border-radius:8px;
background:#e4edf1;
}
.pro-case-v3-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:11px;
margin-top:36px;
}
.pro-case-v3-cards article{
min-height:125px;
border-radius:12px;
background:
linear-gradient(160deg,#e7f0f4,#dce7ec);
border:1px solid #d6e1e6;
}
.pro-case-v3-float{
position:absolute;
z-index:3;
min-width:132px;
padding:11px 13px;
border:1px solid rgba(255,255,255,.11);
border-radius:13px;
background:rgba(6,18,28,.80);
backdrop-filter:blur(12px);
box-shadow:0 18px 38px rgba(0,0,0,.22);
}
.pro-case-v3-float small{
display:block;
color:#6fbfec;
font-size:7px;
font-weight:800;
letter-spacing:1.1px;
}
.pro-case-v3-float strong{
display:block;
margin-top:4px;
color:#eef8fd;
font-size:10px;
}
.float-one{ left:3%;bottom:11%; }
.float-two{ right:3%;top:18%; }
.float-three{ right:5%;bottom:12%; }
.pro-case-v3-info{
padding:38px;
border:1px solid rgba(255,255,255,.075);
border-radius:24px;
background:
radial-gradient(circle at 92% 10%,rgba(97,187,243,.10),transparent 26%),
linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.014));
}
.pro-case-v3-info h3{
margin:21px 0 13px;
font-size:32px;
line-height:1.1;
letter-spacing:-1px;
}
.pro-case-v3-info>p{
margin:0;
color:#91a7b3;
font-size:13px;
line-height:1.76;
}
.pro-case-v3-list{
margin-top:30px;
border-top:1px solid rgba(255,255,255,.075);
}
.pro-case-v3-list>div{
display:grid;
grid-template-columns:46px 1fr;
gap:13px;
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.075);
}
.pro-case-v3-index{
color:rgba(109,193,244,.36);
font-size:14px;
font-weight:800;
}
.pro-case-v3-list strong{
display:block;
margin-bottom:4px;
font-size:12px;
}
.pro-case-v3-list small{
color:#7e95a3;
font-size:10px;
line-height:1.55;
}
.pro-case-v3-result{
margin-top:24px;
padding:15px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
border:1px solid rgba(102,184,247,.12);
border-radius:13px;
background:rgba(102,184,247,.045);
}
.pro-case-v3-result small{
display:block;
color:#6dbff0;
font-size:7px;
font-weight:800;
letter-spacing:1.2px;
}
.pro-case-v3-result strong{
display:block;
margin-top:5px;
font-size:11px;
}
.pro-case-v3-result>span{
color:#78c9f8;
font-size:17px;
}
.pro-case-v3-browser-wrap.motion-visible .pro-case-v3-browser{
animation:caseBrowserFloat 7s ease-in-out 1s infinite;
}
@keyframes caseBrowserFloat{
0%,100%{transform:rotate(-1deg) translateY(0)}
50%{transform:rotate(-.4deg) translateY(-7px)}
}
.pro-case-v3-float{
animation:caseFloatBadge 5.4s ease-in-out infinite;
}
.float-two{ animation-delay:.7s; }
.float-three{ animation-delay:1.25s; }
@keyframes caseFloatBadge{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-6px)}
}
@media(max-width:980px){
.pro-case-v3-head,
.pro-case-v3-stage{
grid-template-columns:1fr;
}
.pro-case-v3-head{
gap:18px;
}
}
@media(max-width:650px){
.pro-case-v3-browser-wrap{
min-height:430px;
}
.pro-case-v3-browser{
left:4%;
right:4%;
}
.pro-case-v3-canvas{
grid-template-columns:20% 80%;
}
.pro-case-v3-main{
padding:28px 20px;
}
.pro-case-v3-cards{
grid-template-columns:1fr 1fr;
}
.pro-case-v3-cards article:last-child{
display:none;
}
.pro-case-v3-info{
padding:26px;
}
}
.webtrix-slider{
position:relative;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(circle at 18% 32%,rgba(47,145,225,.10),transparent 28%),
radial-gradient(circle at 82% 22%,rgba(76,116,255,.08),transparent 26%),
linear-gradient(120deg,#06101a 0%,#0a1825 55%,#10283d 100%);
}
.webtrix-particles{
position:absolute !important;
inset:0;
width:100%;
height:100%;
display:block;
z-index:0;
pointer-events:none;
}
.webtrix-slider > .slider-inner{
position:relative;
z-index:2;
}
.webtrix-slider > .orb{
position:absolute !important;
z-index:0;
pointer-events:none;
}
.webtrix-slider::before{
content:"";
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:
linear-gradient(90deg,rgba(5,14,23,.10),rgba(5,14,23,.01) 50%,rgba(5,14,23,.10)),
radial-gradient(circle at 48% 55%,transparent 0 36%,rgba(5,14,23,.10) 76%,rgba(5,14,23,.24) 100%);
}
@media(max-width:700px){
.webtrix-particles{ opacity:.78; }
}
@media(prefers-reduced-motion:reduce){
.webtrix-particles{ opacity:.42; }
}
.services-panel{
position:absolute;
top:0;
right:calc(100% + 18px);
width:340px;
min-height:100%;
z-index:20;
padding:28px 24px;
overflow:hidden;
background:
linear-gradient(145deg,
rgba(255,255,255,.135) 0%,
rgba(255,255,255,.055) 38%,
rgba(255,255,255,.025) 100%);
border:1px solid rgba(255,255,255,.16);
border-radius:24px;
backdrop-filter:blur(24px) saturate(135%);
-webkit-backdrop-filter:blur(24px) saturate(135%);
box-shadow:
0 28px 80px rgba(0,0,0,.30),
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -1px 0 rgba(255,255,255,.04);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateX(70px) scale(.985);
transition:
transform .48s cubic-bezier(.22,.8,.25,1),
opacity .3s ease,
visibility .3s ease,
box-shadow .3s ease,
border-color .3s ease;
}
.services-panel::before{
content:"";
position:absolute;
top:-120px;
left:-95px;
width:390px;
height:250px;
pointer-events:none;
background:
radial-gradient(
ellipse at center,
rgba(255,255,255,.24) 0%,
rgba(255,255,255,.085) 42%,
transparent 72%);
transform:rotate(-12deg);
}
.services-panel::after{
content:"";
position:absolute;
right:-110px;
bottom:-140px;
width:320px;
height:280px;
pointer-events:none;
background:
radial-gradient(circle,rgba(102,184,247,.17) 0%,transparent 68%);
}
.services-panel > *{
position:relative;
z-index:1;
}
.quote-stage.show-services .services-panel{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateX(0) scale(1);
border-color:rgba(255,255,255,.19);
box-shadow:
0 30px 86px rgba(0,0,0,.34),
0 0 0 1px rgba(102,184,247,.025),
inset 0 1px 0 rgba(255,255,255,.20),
inset 0 -1px 0 rgba(255,255,255,.04);
}
.services-head{
position:relative;
padding-bottom:16px;
margin-bottom:16px;
}
.services-head::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:1px;
background:
linear-gradient(
90deg,
rgba(255,255,255,.16),
rgba(102,184,247,.14),
transparent);
}
.services-head h3{
text-shadow:0 1px 18px rgba(102,184,247,.10);
}
.close-services{
background:
linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.035));
border:1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 7px 18px rgba(0,0,0,.16);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
transition:
transform .18s ease,
background .2s ease,
border-color .2s ease;
}
.close-services:hover{
transform:rotate(5deg) scale(1.04);
background:rgba(102,184,247,.12);
border-color:rgba(102,184,247,.28);
}
.service-item{
position:relative;
overflow:hidden;
margin-bottom:7px;
padding:14px 12px;
border:1px solid rgba(255,255,255,.065);
border-radius:12px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.045),
rgba(255,255,255,.018));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035);
transition:
transform .2s ease,
background .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.service-item:last-child{
margin-bottom:0;
}
.service-item::before{
content:"";
position:absolute;
top:0;
left:-45%;
width:34%;
height:100%;
pointer-events:none;
background:
linear-gradient(
110deg,
transparent,
rgba(255,255,255,.065),
transparent);
transform:skewX(-18deg);
transition:left .48s ease;
}
.service-item:hover::before,
.service-item.active::before{
left:118%;
}
.service-item:hover,
.service-item.active{
transform:translateX(3px);
background:
linear-gradient(
145deg,
rgba(102,184,247,.115),
rgba(255,255,255,.028));
border-color:rgba(102,184,247,.20);
box-shadow:
0 10px 26px rgba(0,0,0,.13),
inset 0 1px 0 rgba(255,255,255,.07);
}
.service-code{
color:#7894a8;
}
.service-name{
color:#f3f9fd;
}
.service-arrow{
text-shadow:0 0 14px rgba(102,184,247,.34);
}
@media(max-width:820px){
.services-panel{
background:
linear-gradient(145deg,
rgba(255,255,255,.12) 0%,
rgba(255,255,255,.05) 42%,
rgba(255,255,255,.024) 100%);
backdrop-filter:blur(22px) saturate(130%);
-webkit-backdrop-filter:blur(22px) saturate(130%);
}
}
.quote-card{
background:
linear-gradient(145deg,
rgba(7,18,30,.94) 0%,
rgba(8,23,37,.91) 46%,
rgba(5,15,25,.95) 100%) !important;
border:1px solid rgba(111,194,248,.17) !important;
backdrop-filter:blur(28px) saturate(125%) !important;
-webkit-backdrop-filter:blur(28px) saturate(125%) !important;
box-shadow:
0 32px 90px rgba(0,0,0,.42),
0 0 0 1px rgba(80,170,235,.025),
inset 0 1px 0 rgba(255,255,255,.10),
inset 0 -1px 0 rgba(255,255,255,.025) !important;
}
.quote-card::before{
background:
radial-gradient(
ellipse at center,
rgba(255,255,255,.12) 0%,
rgba(255,255,255,.045) 42%,
transparent 72%) !important;
}
.quote-card::after{
background:
radial-gradient(circle,rgba(69,159,225,.12) 0%,transparent 68%) !important;
}
.quote-card .field input,
.quote-card .field select,
.quote-card .field textarea{
background:rgba(4,15,25,.68) !important;
border-color:rgba(120,192,238,.14) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.025),
0 8px 18px rgba(0,0,0,.10);
}
.quote-card .field input:focus,
.quote-card .field select:focus,
.quote-card .field textarea:focus{
background:rgba(5,18,29,.82) !important;
border-color:rgba(93,181,239,.44) !important;
box-shadow:
0 0 0 4px rgba(72,163,225,.10),
inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.services-panel{
background:
linear-gradient(145deg,
rgba(6,17,28,.965) 0%,
rgba(7,22,35,.94) 46%,
rgba(4,14,23,.97) 100%) !important;
border:1px solid rgba(111,194,248,.16) !important;
backdrop-filter:blur(28px) saturate(125%) !important;
-webkit-backdrop-filter:blur(28px) saturate(125%) !important;
box-shadow:
0 32px 90px rgba(0,0,0,.43),
0 0 0 1px rgba(80,170,235,.022),
inset 0 1px 0 rgba(255,255,255,.09),
inset 0 -1px 0 rgba(255,255,255,.022) !important;
}
.services-panel::before{
background:
radial-gradient(
ellipse at center,
rgba(255,255,255,.10) 0%,
rgba(255,255,255,.038) 42%,
transparent 72%) !important;
}
.services-panel::after{
background:
radial-gradient(circle,rgba(70,163,228,.115) 0%,transparent 68%) !important;
}
.service-item{
background:
linear-gradient(
145deg,
rgba(255,255,255,.025),
rgba(255,255,255,.010)) !important;
border-color:rgba(120,192,238,.085) !important;
}
.service-item:hover,
.service-item.active{
background:
linear-gradient(
145deg,
rgba(69,160,224,.105),
rgba(255,255,255,.018)) !important;
border-color:rgba(102,184,247,.22) !important;
}
.close-services{
background:
linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)) !important;
border-color:rgba(255,255,255,.10) !important;
}
.quote-card .submit-btn,
.quote-card button[type="submit"]{
font-family: "Inter", "Segoe UI", Arial, sans-serif !important;
font-weight: 700 !important;
letter-spacing: -.15px !important;
font-size: 15px !important;
line-height: 1 !important;
text-transform: none !important;
}
header,
.navbar{
backdrop-filter:blur(18px) saturate(125%);
-webkit-backdrop-filter:blur(18px) saturate(125%);
}
.navbar{
border-bottom:1px solid rgba(255,255,255,.045);
background:
linear-gradient(180deg,rgba(6,17,27,.88),rgba(6,17,27,.72));
box-shadow:
0 14px 38px rgba(0,0,0,.12),
inset 0 -1px 0 rgba(255,255,255,.018);
}
.navbar .nav-links{
display:flex;
align-items:center;
gap:10px;
padding:7px;
border:1px solid rgba(255,255,255,.055);
border-radius:16px;
background:
linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.035),
0 12px 28px rgba(0,0,0,.10);
}
.navbar .nav-links a{
position:relative;
padding:10px 13px;
border-radius:11px;
color:rgba(232,241,247,.82);
font-weight:600;
font-size:14px;
letter-spacing:-.1px;
text-decoration:none;
transition:
color .2s ease,
background .2s ease,
transform .2s ease;
}
.navbar .nav-links a::after{
content:"";
position:absolute;
left:14px;
right:14px;
bottom:7px;
height:1px;
border-radius:99px;
background:linear-gradient(90deg,#66b8f7,#8c83ff);
transform:scaleX(0);
transform-origin:center;
opacity:.9;
transition:transform .22s ease;
}
.navbar .nav-links a:hover{
color:#fff;
background:rgba(255,255,255,.035);
transform:translateY(-1px);
}
.navbar .nav-links a:hover::after{
transform:scaleX(1);
}
.navbar .nav-cta{
position:relative;
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
box-shadow:
0 12px 30px rgba(53,163,231,.20),
inset 0 1px 0 rgba(255,255,255,.24);
transition:
transform .22s ease,
box-shadow .22s ease,
filter .22s ease;
}
.navbar .nav-cta::before{
content:"";
position:absolute;
top:0;
left:-45%;
width:35%;
height:100%;
background:linear-gradient(
110deg,
transparent,
rgba(255,255,255,.22),
transparent
);
transform:skewX(-18deg);
transition:left .55s ease;
}
.navbar .nav-cta:hover{
transform:translateY(-2px);
box-shadow:
0 16px 36px rgba(53,163,231,.26),
inset 0 1px 0 rgba(255,255,255,.26);
}
.navbar .nav-cta:hover::before{
left:120%;
}
.navbar .nav-links a:focus-visible,
.navbar .nav-cta:focus-visible{
outline:2px solid rgba(102,184,247,.55);
outline-offset:3px;
}
.navbar .logo{
position:relative;
letter-spacing:-.9px;
}
@media(max-width:900px){
.navbar .nav-links{
gap:4px;
padding:5px;
border-radius:13px;
}
.navbar .nav-links a{
padding:9px 10px;
font-size:13px;
}
}
@media(max-width:760px){
.navbar{
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
}
.navbar{
min-height:94px;
}
.navbar .nav-inner,
.navbar .container{
min-height:94px;
display:flex;
align-items:center;
}
.navbar .logo{
font-size:30px !important;
}
.navbar .nav-links{
gap:14px;
padding:9px;
border-radius:18px;
}
.navbar .nav-links a{
padding:13px 17px;
font-size:15.5px;
border-radius:12px;
}
.navbar .nav-links a::after{
left:17px;
right:17px;
bottom:9px;
}
.navbar .nav-cta{
padding:15px 22px !important;
font-size:15px !important;
border-radius:13px !important;
}
@media(max-width:1100px){
.navbar .nav-links{
gap:8px;
}
.navbar .nav-links a{
padding:12px 13px;
font-size:14px;
}
}
@media(max-width:900px){
.navbar{
min-height:80px;
}
.navbar .nav-inner,
.navbar .container{
min-height:80px;
}
.navbar .logo{
font-size:27px !important;
}
}
.pro-case-photo-visual{
position:relative;
min-height:560px;
overflow:hidden;
border-radius:24px;
border:1px solid rgba(102,184,247,.16);
background:#0a1a27;
box-shadow:0 28px 65px rgba(0,0,0,.22);
}
.pro-case-photo{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center 48%;
display:block;
filter:saturate(1.08) contrast(1.03) brightness(.88);
transform:scale(1.025);
transition:transform 1.1s cubic-bezier(.22,.8,.25,1), filter .5s ease;
}
.pro-case-photo-visual:hover .pro-case-photo{
transform:scale(1.055);
filter:saturate(1.15) contrast(1.04) brightness(.91);
}
.pro-case-photo-shade{
position:absolute;
inset:0;
background:
linear-gradient(180deg,rgba(4,12,20,.04) 0%,rgba(4,12,20,.14) 50%,rgba(4,12,20,.76) 100%),
linear-gradient(90deg,rgba(4,12,20,.24),transparent 52%,rgba(4,12,20,.10));
}
.pro-case-photo-label{
position:absolute;
left:28px;
bottom:28px;
z-index:3;
max-width:430px;
}
.pro-case-photo-label span{
display:inline-flex;
padding:7px 10px;
margin-bottom:10px;
border-radius:999px;
border:1px solid rgba(255,255,255,.15);
background:rgba(7,18,28,.48);
backdrop-filter:blur(10px);
color:#8dd1fb;
font-size:8px;
font-weight:800;
letter-spacing:1.6px;
}
.pro-case-photo-label strong{
display:block;
color:#fff;
font-size:23px;
line-height:1.18;
letter-spacing:-.5px;
text-shadow:0 4px 24px rgba(0,0,0,.35);
}
.pro-growth-scan{
margin-top:20px;
padding:32px 34px;
display:grid;
grid-template-columns:1.25fr .75fr;
gap:34px;
align-items:center;
position:relative;
overflow:hidden;
border:1px solid rgba(102,184,247,.15);
border-radius:20px;
background:
radial-gradient(circle at 88% 20%,rgba(84,184,244,.15),transparent 28%),
radial-gradient(circle at 5% 100%,rgba(139,121,255,.07),transparent 24%),
linear-gradient(120deg,#0d2638 0%,#091a27 68%,#0a2031 100%);
box-shadow:0 24px 60px rgba(0,0,0,.16);
}
.pro-growth-scan::before{
content:"";
position:absolute;
top:-65%;
right:21%;
width:220px;
height:300px;
transform:rotate(18deg);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent);
pointer-events:none;
}
.pro-growth-scan-copy{
position:relative;
z-index:1;
}
.pro-growth-scan-kicker{
display:inline-flex;
align-items:center;
gap:7px;
color:#75c8f8;
font-size:8px;
font-weight:800;
letter-spacing:1.6px;
}
.pro-growth-scan-kicker::before{
content:"";
width:6px;
height:6px;
border-radius:50%;
background:#67c5fa;
box-shadow:0 0 12px rgba(103,197,250,.55);
}
.pro-growth-scan h3{
margin:10px 0 10px;
max-width:650px;
color:#f8fbff;
font-size:clamp(22px,2.7vw,31px);
line-height:1.12;
letter-spacing:-.8px;
}
.pro-growth-scan-copy>p{
max-width:650px;
margin:0;
color:#91a7b4;
font-size:12.5px;
line-height:1.7;
}
.pro-growth-scan-points{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:19px;
}
.pro-growth-scan-points span{
display:inline-flex;
align-items:center;
gap:7px;
padding:8px 10px;
border:1px solid rgba(255,255,255,.07);
border-radius:999px;
background:rgba(255,255,255,.028);
color:#a8bac5;
font-size:9px;
}
.pro-growth-scan-points i{
color:#75c8f8;
font-style:normal;
}
.pro-growth-scan-action{
position:relative;
z-index:1;
min-height:180px;
padding:22px;
display:flex;
flex-direction:column;
justify-content:space-between;
border:1px solid rgba(255,255,255,.075);
border-radius:16px;
background:
linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
}
.pro-growth-scan-score small{
display:block;
color:#698493;
font-size:7px;
font-weight:800;
letter-spacing:1.4px;
}
.pro-growth-scan-score strong{
display:block;
margin:8px 0 5px;
color:#f5fbff;
font-size:18px;
}
.pro-growth-scan-score span{
color:#849aa8;
font-size:9px;
}
.pro-growth-scan-action a{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-top:20px;
padding:12px 14px;
border:1px solid rgba(103,191,247,.18);
border-radius:10px;
background:rgba(102,184,247,.075);
color:#dff3ff;
font-size:10px;
font-weight:700;
text-decoration:none;
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.pro-growth-scan-action a:hover{
transform:translateY(-2px);
background:rgba(102,184,247,.12);
border-color:rgba(103,191,247,.28);
}
.pro-growth-scan-action a b{
color:#78caf9;
font-size:14px;
}
@media(max-width:820px){
.pro-growth-scan{
grid-template-columns:1fr;
padding:28px;
}
.pro-growth-scan-action{
min-height:150px;
}
}
@media(max-width:520px){
.pro-growth-scan{
padding:22px;
}
.pro-growth-scan-points{
flex-direction:column;
align-items:flex-start;
}
}
.pro-workflow-v3{
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 82% 12%,rgba(87,184,244,.065),transparent 25%),
linear-gradient(180deg,#07131e 0%,#091823 100%);
}
.pro-workflow-v3-head{
display:grid;
grid-template-columns:1.05fr .75fr;
gap:80px;
align-items:end;
margin-bottom:46px;
}
.pro-workflow-v3-head h2{
max-width:720px;
margin:13px 0 0;
color:#f7fbff;
font-size:clamp(38px,4.3vw,56px);
line-height:1.04;
letter-spacing:-1.9px;
}
.pro-workflow-v3-head>p{
max-width:500px;
margin:0;
color:#8fa5b2;
font-size:13px;
line-height:1.75;
}
.pro-workflow-v3-board{
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:16px;
}
.pro-workflow-v3-main{
position:relative;
overflow:hidden;
min-height:500px;
padding:34px;
display:flex;
flex-direction:column;
border:1px solid rgba(103,190,246,.14);
border-radius:22px;
background:
radial-gradient(circle at 80% 18%,rgba(94,190,247,.15),transparent 27%),
radial-gradient(circle at 5% 100%,rgba(139,121,255,.07),transparent 25%),
linear-gradient(145deg,#102b3f,#091b29 72%);
box-shadow:0 20px 55px rgba(0,0,0,.14);
}
.pro-workflow-v3-main::after{
content:"04";
position:absolute;
right:-12px;
bottom:-58px;
color:rgba(255,255,255,.025);
font-size:210px;
font-weight:900;
line-height:1;
pointer-events:none;
}
.pro-workflow-v3-label{
color:#74c8f8;
font-size:8px;
font-weight:800;
letter-spacing:1.6px;
}
.pro-workflow-v3-main h3{
max-width:430px;
margin:18px 0 14px;
color:#f7fbff;
font-size:32px;
line-height:1.1;
letter-spacing:-1px;
}
.pro-workflow-v3-main>p{
max-width:450px;
margin:0;
color:#91a7b4;
font-size:12px;
line-height:1.72;
}
.pro-workflow-v3-progress{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:7px;
margin-top:32px;
}
.pro-workflow-v3-progress span{
height:3px;
border-radius:999px;
background:rgba(255,255,255,.09);
}
.pro-workflow-v3-progress span.active{
background:linear-gradient(90deg,#64bdf2,#8a82ff);
box-shadow:0 0 14px rgba(100,189,242,.25);
}
.pro-workflow-v3-promise{
position:relative;
z-index:1;
display:flex;
gap:13px;
align-items:center;
margin-top:auto;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.075);
}
.pro-workflow-v3-check{
flex:0 0 auto;
width:38px;
height:38px;
display:grid;
place-items:center;
border:1px solid rgba(105,194,247,.18);
border-radius:50%;
background:rgba(102,184,247,.07);
color:#7acaf8;
font-size:13px;
}
.pro-workflow-v3-promise strong{
display:block;
margin-bottom:4px;
color:#edf8fd;
font-size:11px;
}
.pro-workflow-v3-promise small{
color:#78909f;
font-size:9px;
}
.pro-workflow-v3-steps{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.pro-workflow-v3-steps article{
position:relative;
min-height:244px;
padding:25px;
display:flex;
flex-direction:column;
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
background:linear-gradient(150deg,rgba(255,255,255,.031),rgba(255,255,255,.009));
transition:border-color .2s ease,background .2s ease;
}
.pro-workflow-v3-steps article:hover{
border-color:rgba(102,184,247,.17);
background:linear-gradient(150deg,rgba(102,184,247,.055),rgba(255,255,255,.012));
}
.pro-workflow-v3-stephead{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.pro-workflow-v3-num{
color:#73c5f5;
font-size:10px;
font-weight:800;
}
.pro-workflow-v3-time{
padding:5px 7px;
border:1px solid rgba(255,255,255,.065);
border-radius:999px;
color:#637d8c;
font-size:6.5px;
font-weight:800;
letter-spacing:1px;
}
.pro-workflow-v3-steps h3{
max-width:290px;
margin:24px 0 9px;
color:#f0f8fc;
font-size:16px;
line-height:1.28;
letter-spacing:-.3px;
}
.pro-workflow-v3-steps p{
margin:0;
color:#8298a5;
font-size:10.5px;
line-height:1.65;
}
.pro-workflow-v3-meta{
margin-top:auto;
padding-top:17px;
color:#5f7887;
font-size:8px;
font-weight:700;
letter-spacing:.25px;
}
@media(max-width:980px){
.pro-workflow-v3-head,
.pro-workflow-v3-board{
grid-template-columns:1fr;
gap:26px;
}
.pro-workflow-v3-main{min-height:390px}
}
@media(max-width:650px){
.pro-workflow-v3-head{gap:18px}
.pro-workflow-v3-steps{grid-template-columns:1fr}
.pro-workflow-v3-main{
min-height:390px;
padding:26px;
}
.pro-workflow-v3-main h3{font-size:27px}
}
.pro-positioning-fx{
position:relative;
isolation:isolate;
min-height:720px;
display:flex;
align-items:center;
background:
radial-gradient(circle at 14% 26%,rgba(69,166,229,.11),transparent 29%),
radial-gradient(circle at 82% 34%,rgba(83,103,255,.08),transparent 28%),
linear-gradient(120deg,#06111b 0%,#081827 54%,#0b2131 100%) !important;
}
.pro-positioning-particles{
position:absolute;
inset:0;
width:100%;
height:100%;
z-index:0;
pointer-events:none;
opacity:.66;
}
.pro-positioning-orb{
position:absolute;
border-radius:50%;
filter:blur(72px);
pointer-events:none;
z-index:0;
}
.pro-positioning-orb.orb-a{
width:360px;
height:360px;
left:-140px;
top:10%;
background:rgba(72,175,239,.10);
animation:wtOrbA 11s ease-in-out infinite;
}
.pro-positioning-orb.orb-b{
width:290px;
height:290px;
right:5%;
bottom:-100px;
background:rgba(123,104,255,.08);
animation:wtOrbB 13s ease-in-out infinite;
}
@keyframes wtOrbA{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(48px,22px,0)}
}
@keyframes wtOrbB{
0%,100%{transform:translate3d(0,0,0)}
50%{transform:translate3d(-34px,-22px,0)}
}
.pro-positioning-fx-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:.88fr 1.12fr;
gap:82px;
align-items:center;
}
.pro-positioning-fx-copy{
max-width:575px;
}
.pro-positioning-eyebrow{
display:flex;
align-items:center;
gap:10px;
color:#79c9f7;
font-size:9px;
font-weight:800;
letter-spacing:2.1px;
}
.pro-positioning-eyebrow span{
width:23px;
height:1px;
background:linear-gradient(90deg,#62bdf3,#8d80ff);
box-shadow:0 0 10px rgba(98,189,243,.38);
}
.pro-positioning-fx-copy h2{
margin:20px 0 19px;
max-width:590px;
color:#f7fbff;
font-size:clamp(40px,4.3vw,58px);
line-height:1.04;
letter-spacing:-2px;
}
.pro-word-rotator{
position:relative;
display:inline-block;
width:min(100%,390px);
height:1.05em;
vertical-align:bottom;
overflow:hidden;
color:#74c7f7;
}
.pro-word{
position:absolute;
left:0;
top:0;
opacity:0;
transform:translateY(82%);
transition:opacity .52s ease,transform .7s cubic-bezier(.22,.8,.25,1);
white-space:nowrap;
background:linear-gradient(90deg,#82d0fb,#82b6ff 55%,#a59bff);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.pro-word.active{
opacity:1;
transform:translateY(0);
}
.pro-word.exit{
opacity:0;
transform:translateY(-82%);
}
.pro-positioning-fx-copy>p{
max-width:560px;
margin:0;
color:#9cb0bd;
font-size:14px;
line-height:1.8;
}
.pro-positioning-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:30px;
}
.pro-positioning-tags span{
padding:8px 11px;
border:1px solid rgba(255,255,255,.075);
border-radius:999px;
background:rgba(255,255,255,.025);
color:#8fa7b5;
font-size:9px;
backdrop-filter:blur(10px);
}
.pro-positioning-visual{
position:relative;
min-height:500px;
display:flex;
align-items:center;
}
.pro-positioning-screen{
width:100%;
overflow:hidden;
border:1px solid rgba(111,194,248,.20);
border-radius:25px;
background:
linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
rgba(7,20,31,.82);
box-shadow:
0 35px 90px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.08),
0 0 50px rgba(75,163,223,.06);
backdrop-filter:blur(22px) saturate(128%);
transform:perspective(1100px) rotateY(-3deg) rotateX(1deg);
transform-origin:center;
animation:wtScreenFloat 7s ease-in-out infinite;
}
@keyframes wtScreenFloat{
0%,100%{transform:perspective(1100px) rotateY(-3deg) rotateX(1deg) translateY(0)}
50%{transform:perspective(1100px) rotateY(-1.7deg) rotateX(.4deg) translateY(-8px)}
}
.pro-positioning-screen-top{
min-height:48px;
padding:0 17px;
display:grid;
grid-template-columns:auto 1fr auto;
gap:16px;
align-items:center;
border-bottom:1px solid rgba(255,255,255,.07);
color:#627b8a;
font-size:8px;
}
.pro-screen-dots{
display:flex;
gap:5px;
}
.pro-screen-dots i{
width:6px;
height:6px;
border-radius:50%;
background:#425767;
}
.pro-positioning-screen-top b{
padding:5px 8px;
border:1px solid rgba(91,218,151,.16);
border-radius:999px;
background:rgba(91,218,151,.06);
color:#75dca7;
font-size:6px;
letter-spacing:1px;
}
.pro-positioning-screen-body{
min-height:390px;
display:grid;
grid-template-columns:56px 1fr;
}
.pro-screen-side{
padding:24px 0;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
border-right:1px solid rgba(255,255,255,.055);
}
.pro-screen-side span{
width:17px;
height:17px;
border:1px solid rgba(255,255,255,.065);
border-radius:5px;
}
.pro-screen-side span.active{
border-color:rgba(103,193,248,.25);
background:rgba(102,184,247,.12);
box-shadow:0 0 14px rgba(102,184,247,.08);
}
.pro-screen-content{
padding:34px 34px 27px;
}
.pro-screen-content>small{
color:#6ebff1;
font-size:7px;
font-weight:800;
letter-spacing:1.6px;
}
.pro-screen-content h3{
margin:9px 0 7px;
color:#f7fbff;
font-size:26px;
letter-spacing:-.8px;
}
.pro-screen-content>p{
margin:0;
color:#7892a1;
font-size:10px;
}
.pro-screen-chart{
height:146px;
margin:31px 0 23px;
border-bottom:1px solid rgba(255,255,255,.05);
background:
linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
background-size:100% 36px,65px 100%;
overflow:hidden;
}
.pro-screen-chart svg{
width:100%;
height:100%;
overflow:visible;
}
.pro-screen-chart .area{
fill:url(#wtArea);
}
.pro-screen-chart .line{
fill:none;
stroke:#66b8f7;
stroke-width:2.3;
stroke-linecap:round;
stroke-dasharray:700;
stroke-dashoffset:700;
animation:wtLineDraw 4.2s ease-in-out infinite alternate;
filter:drop-shadow(0 0 5px rgba(102,184,247,.48));
}
@keyframes wtLineDraw{
0%,12%{stroke-dashoffset:700}
72%,100%{stroke-dashoffset:0}
}
.pro-screen-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:9px;
}
.pro-screen-stats div{
min-height:72px;
padding:12px;
border:1px solid rgba(255,255,255,.055);
border-radius:10px;
background:rgba(255,255,255,.02);
}
.pro-screen-stats small{
display:block;
margin-bottom:7px;
color:#5f7787;
font-size:6px;
font-weight:800;
letter-spacing:1px;
}
.pro-screen-stats strong{
color:#dcecf5;
font-size:10px;
}
.pro-positioning-float{
position:absolute;
z-index:4;
border:1px solid rgba(102,184,247,.15);
background:rgba(6,20,31,.84);
backdrop-filter:blur(16px);
box-shadow:0 17px 42px rgba(0,0,0,.26);
}
.pro-positioning-float.float-a{
right:-22px;
top:44px;
display:flex;
gap:10px;
align-items:center;
padding:12px 15px;
border-radius:13px;
animation:wtFloatA 6.2s ease-in-out infinite;
}
.pro-positioning-float.float-b{
left:-27px;
bottom:48px;
width:150px;
padding:15px;
border-radius:14px;
animation:wtFloatB 7.4s ease-in-out infinite;
}
@keyframes wtFloatA{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-9px)}
}
@keyframes wtFloatB{
0%,100%{transform:translateY(0)}
50%{transform:translateY(8px)}
}
.pro-positioning-float .pulse{
width:8px;
height:8px;
border-radius:50%;
background:#5cdf92;
box-shadow:0 0 0 5px rgba(92,223,146,.07),0 0 13px rgba(92,223,146,.45);
}
.pro-positioning-float small{
display:block;
color:#617b8a;
font-size:6px;
font-weight:800;
letter-spacing:1.1px;
}
.pro-positioning-float strong{
display:block;
margin-top:4px;
color:#edf8fd;
font-size:10px;
}
.pro-positioning-float.float-b strong{
margin:6px 0 2px;
color:#78c9f8;
font-size:24px;
}
.pro-positioning-float.float-b span{
color:#718a98;
font-size:7px;
}
@media(max-width:1000px){
.pro-positioning-fx-grid{
grid-template-columns:1fr;
gap:46px;
}
.pro-positioning-visual{
max-width:760px;
width:100%;
margin:0 auto;
}
}
@media(max-width:650px){
.pro-positioning-fx{
min-height:auto;
}
.pro-positioning-fx-copy h2{
font-size:38px;
}
.pro-word-rotator{
width:280px;
}
.pro-positioning-screen{
transform:none;
animation:none;
}
.pro-positioning-screen-body{
grid-template-columns:42px 1fr;
}
.pro-screen-content{
padding:25px 18px 22px;
}
.pro-positioning-float.float-a{
right:8px;
top:18px;
}
.pro-positioning-float.float-b{
display:none;
}
.pro-screen-stats{
grid-template-columns:1fr;
}
.pro-screen-stats div:nth-child(2),
.pro-screen-stats div:nth-child(3){
display:none;
}
}
@media(prefers-reduced-motion:reduce){
.pro-positioning-screen,
.pro-positioning-orb,
.pro-positioning-float,
.pro-screen-chart .line{
animation:none !important;
}
}
.webtrix-logo-image{
display:flex !important;
align-items:center;
flex:0 0 auto;
width:170px;
height:54px;
overflow:visible;
}
.webtrix-logo-image img{
display:block;
width:100%;
height:auto;
object-fit:contain;
filter:drop-shadow(0 0 10px rgba(76,180,246,.14));
}
.navbar .webtrix-logo-image{
width:178px;
height:58px;
}
.webtrix-logo-footer{
width:190px;
height:auto;
}
@media(max-width:600px){
.navbar .webtrix-logo-image{
width:145px;
height:50px;
}
.webtrix-logo-footer{
width:165px;
}
}
.ai-smart-section{
position:relative;
isolation:isolate;
padding:110px 0;
overflow:hidden;
background:
radial-gradient(circle at 12% 18%, rgba(102,184,247,.12), transparent 28%),
radial-gradient(circle at 86% 72%, rgba(68,118,255,.10), transparent 26%),
linear-gradient(180deg,#07111b 0%,#081522 100%);
}
.ai-smart-section::before{
content:"";
position:absolute; inset:0;
background-image:
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size:48px 48px;
mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
pointer-events:none;
}
.ai-smart-shell{
width:min(1280px,calc(100% - 48px));
margin:0 auto;
position:relative; z-index:2;
}
.ai-smart-head{
max-width:820px;
margin-bottom:42px;
}
.ai-smart-kicker{
display:inline-flex; align-items:center; gap:9px;
color:#8fd0ff; font-size:12px; font-weight:800; letter-spacing:.16em;
text-transform:uppercase; margin-bottom:14px;
}
.ai-smart-kicker::before{
content:""; width:30px; height:1px; background:#66b8f7;
box-shadow:0 0 12px rgba(102,184,247,.65);
}
.ai-smart-head h2{
margin:0 0 16px;
font-size:clamp(36px,5vw,62px);
line-height:1.02;
letter-spacing:-.045em;
}
.ai-smart-head h2 span{ color:#78c8ff; }
.ai-smart-head p{
max-width:720px;
color:#a9b8c5;
font-size:17px;
line-height:1.75;
}
.ai-smart-tabs{
display:flex; flex-wrap:wrap; gap:10px;
margin:0 0 26px;
}
.ai-tab{
appearance:none; border:1px solid rgba(255,255,255,.10);
background:rgba(255,255,255,.035); color:#b9c8d5;
padding:11px 15px; border-radius:999px;
font:700 13px/1 Inter,sans-serif; cursor:pointer;
transition:.25s ease;
}
.ai-tab:hover,.ai-tab.active{
color:#fff; border-color:rgba(102,184,247,.42);
background:rgba(102,184,247,.12);
box-shadow:0 0 0 4px rgba(102,184,247,.035);
}
.ai-smart-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:22px;
align-items:stretch;
}
.ai-card{
position:relative; overflow:hidden;
border:1px solid rgba(255,255,255,.085);
background:linear-gradient(180deg,rgba(14,34,52,.88),rgba(8,22,35,.9));
box-shadow:0 26px 80px rgba(0,0,0,.28);
border-radius:26px;
}
.ai-card::before{
content:""; position:absolute; inset:0 0 auto 0; height:1px;
background:linear-gradient(90deg,transparent,rgba(119,200,255,.65),transparent);
}
.ai-card-inner{ padding:28px; position:relative; z-index:2; }
.ai-card-title{
display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
margin-bottom:22px;
}
.ai-card-title h3{ margin:0 0 7px; font-size:22px; letter-spacing:-.02em; }
.ai-card-title p{ margin:0; color:#91a3b2; font-size:13.5px; line-height:1.6; }
.ai-status{
white-space:nowrap;
display:inline-flex; align-items:center; gap:7px;
padding:8px 10px; border-radius:999px;
background:rgba(76,201,148,.08); color:#86e1ba;
border:1px solid rgba(76,201,148,.18);
font-size:11px; font-weight:800;
}
.ai-status i{width:7px;height:7px;border-radius:50%;background:#62d7a5;box-shadow:0 0 12px #62d7a5}
.ai-url-row{ display:grid; grid-template-columns:1fr auto; gap:10px; }
.ai-input,.ai-select,.ai-textarea{
width:100%; box-sizing:border-box;
border:1px solid rgba(255,255,255,.09);
background:#081622; color:#eef8ff;
border-radius:14px; outline:none;
padding:14px 15px; font:500 14px Inter,sans-serif;
transition:.2s ease;
}
.ai-input:focus,.ai-select:focus,.ai-textarea:focus{
border-color:rgba(102,184,247,.5);
box-shadow:0 0 0 4px rgba(102,184,247,.07);
}
.ai-button{
border:0; cursor:pointer;
border-radius:14px; padding:14px 18px;
background:linear-gradient(135deg,#78c8ff,#4aa9ef);
color:#04101a; font:800 13px Inter,sans-serif;
box-shadow:0 12px 34px rgba(70,169,239,.18);
transition:transform .18s ease, box-shadow .18s ease;
}
.ai-button:hover{ transform:translateY(-1px); box-shadow:0 16px 40px rgba(70,169,239,.26); }
.ai-button.secondary{
background:rgba(255,255,255,.05); color:#eaf6ff;
border:1px solid rgba(255,255,255,.09); box-shadow:none;
}
.ai-scan-progress{
height:8px; overflow:hidden; border-radius:999px;
background:rgba(255,255,255,.05); margin:18px 0 12px;
}
.ai-scan-progress > span{
display:block; width:0%; height:100%;
background:linear-gradient(90deg,#4aa9ef,#8dd4ff);
border-radius:inherit; transition:width .45s ease;
}
.ai-scan-meta{
display:flex; justify-content:space-between; gap:12px;
color:#7f94a5; font-size:11px; font-weight:700;
}
.ai-scan-result{
display:none;
grid-template-columns:150px 1fr;
gap:20px; align-items:center;
margin-top:22px;
padding:18px; border-radius:18px;
background:rgba(3,12,20,.48);
border:1px solid rgba(255,255,255,.06);
}
.ai-score-ring{
--score:72;
width:122px;height:122px;border-radius:50%;
display:grid;place-items:center;
background:conic-gradient(#65bdf7 calc(var(--score)*1%),rgba(255,255,255,.06) 0);
position:relative;
}
.ai-score-ring::after{
content:"";position:absolute;inset:10px;border-radius:50%;background:#091724;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.ai-score-ring strong{position:relative;z-index:2;font-size:31px}
.ai-score-ring small{position:relative;z-index:2;color:#8397a8;font-size:10px;margin-left:2px}
.ai-findings{ display:grid; gap:9px; }
.ai-finding{
display:flex;align-items:center;gap:10px;
padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.025);
color:#c8d5df;font-size:12.5px;
}
.ai-finding i{width:8px;height:8px;border-radius:50%;background:#78c8ff;box-shadow:0 0 10px rgba(120,200,255,.55)}
.ai-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ai-field{display:grid;gap:7px}
.ai-field.full{grid-column:1/-1}
.ai-field label{font-size:11px;font-weight:800;color:#869baa;letter-spacing:.04em;text-transform:uppercase}
.ai-textarea{min-height:105px;resize:vertical}
.ai-summary{
margin-top:16px;padding:16px;border-radius:16px;
background:rgba(4,14,23,.5);border:1px solid rgba(255,255,255,.06);
}
.ai-summary-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ai-summary-head strong{font-size:13px}
.ai-lead-score{
display:inline-flex;align-items:center;gap:6px;
padding:7px 9px;border-radius:999px;
color:#8fd0ff;background:rgba(102,184,247,.08);
border:1px solid rgba(102,184,247,.16);
font-size:11px;font-weight:800;
}
.ai-summary-list{display:grid;gap:8px;color:#9eb0be;font-size:12.5px;line-height:1.5}
.ai-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.ai-admin-row{
display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
padding:13px 0;border-bottom:1px solid rgba(255,255,255,.055);
}
.ai-admin-row:last-child{border-bottom:0}
.ai-admin-person strong{display:block;font-size:13px;margin-bottom:4px}
.ai-admin-person span{color:#7f94a5;font-size:11px}
.ai-score-pill{
min-width:48px;text-align:center;padding:8px 10px;border-radius:10px;
background:rgba(102,184,247,.09);border:1px solid rgba(102,184,247,.16);
color:#9cd7ff;font-size:12px;font-weight:900;
}
.ai-persona-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ai-persona{
cursor:pointer;border-radius:12px;padding:10px 12px;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);
color:#aab9c5;font-size:12px;font-weight:700;
}
.ai-persona.active{background:rgba(102,184,247,.12);border-color:rgba(102,184,247,.35);color:#fff}
.ai-personalized-box{
margin-top:14px;padding:17px;border-radius:16px;
background:linear-gradient(135deg,rgba(102,184,247,.08),rgba(255,255,255,.025));
border:1px solid rgba(102,184,247,.13);
}
.ai-personalized-box small{display:block;color:#79c6fa;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:7px}
.ai-personalized-box strong{display:block;font-size:18px;margin-bottom:6px}
.ai-personalized-box p{margin:0;color:#8fa4b3;font-size:12.5px;line-height:1.55}
.ai-chat-demo{
display:grid;gap:10px;max-height:250px;overflow:auto;padding-right:3px;margin-bottom:12px
}
.ai-bubble{
max-width:85%;padding:11px 13px;border-radius:14px;
font-size:12.5px;line-height:1.55
}
.ai-bubble.bot{background:rgba(102,184,247,.09);border:1px solid rgba(102,184,247,.12);color:#cfeaff}
.ai-bubble.user{margin-left:auto;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);color:#e9f4fb}
.ai-chat-entry{display:grid;grid-template-columns:1fr auto;gap:8px}
.ai-note{
margin-top:16px;
font-size:11px; line-height:1.55; color:#718799;
}
@media(max-width:980px){
.ai-smart-grid,.ai-mini-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
.ai-smart-section{padding:82px 0}
.ai-smart-shell{width:min(100% - 28px,1280px)}
.ai-url-row,.ai-form-grid{grid-template-columns:1fr}
.ai-field.full{grid-column:auto}
.ai-scan-result{grid-template-columns:1fr;text-align:center}
.ai-score-ring{margin:auto}
}
.ai-suite-section{
position:relative; isolation:isolate; overflow:hidden;
padding:110px 0;
background:
radial-gradient(circle at 86% 10%,rgba(102,184,247,.11),transparent 28%),
radial-gradient(circle at 12% 82%,rgba(92,112,255,.08),transparent 26%),
#07111b;
}
.ai-suite-shell{width:min(1320px,calc(100% - 48px));margin:0 auto;position:relative;z-index:2}
.ai-suite-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
.ai-suite-head-copy{max-width:800px}
.ai-suite-head h2{font-size:clamp(34px,4.8vw,58px);line-height:1.02;letter-spacing:-.045em;margin:0 0 14px}
.ai-suite-head h2 span{color:#7acbff}
.ai-suite-head p{color:#9bb0bf;line-height:1.7;font-size:16px;margin:0}
.ai-suite-badge{padding:10px 13px;border:1px solid rgba(102,184,247,.18);background:rgba(102,184,247,.075);border-radius:999px;color:#92d6ff;font-size:11px;font-weight:800;white-space:nowrap}
.ai-suite-nav{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:24px}
.ai-suite-nav button{
cursor:pointer;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);
color:#9eafbc;border-radius:12px;padding:10px 13px;font:700 12px Inter,sans-serif
}
.ai-suite-nav button.active,.ai-suite-nav button:hover{background:rgba(102,184,247,.11);border-color:rgba(102,184,247,.28);color:#fff}
.ai-suite-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.ai-module{
grid-column:span 6;
border:1px solid rgba(255,255,255,.075);
background:linear-gradient(180deg,rgba(12,31,48,.9),rgba(7,19,30,.92));
border-radius:24px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.24)
}
.ai-module.wide{grid-column:span 12}
.ai-module.third{grid-column:span 4}
.ai-module-inner{padding:24px}
.ai-module-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:17px}
.ai-module-head h3{margin:0 0 6px;font-size:19px}
.ai-module-head p{margin:0;color:#8297a8;font-size:12.5px;line-height:1.55}
.ai-module-tag{padding:7px 9px;border-radius:999px;background:rgba(102,184,247,.08);border:1px solid rgba(102,184,247,.14);color:#8fd0ff;font-size:10px;font-weight:900}
.ai-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ai-control-grid .full{grid-column:1/-1}
.ai-control-label{display:grid;gap:6px}
.ai-control-label span{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#8194a4;font-weight:800}
.ai-c-input,.ai-c-select,.ai-c-textarea{
width:100%;box-sizing:border-box;padding:12px 13px;border-radius:12px;
border:1px solid rgba(255,255,255,.08);background:#081622;color:#eef8ff;
outline:none;font:500 13px Inter,sans-serif
}
.ai-c-input:focus,.ai-c-select:focus,.ai-c-textarea:focus{border-color:rgba(102,184,247,.45);box-shadow:0 0 0 4px rgba(102,184,247,.06)}
.ai-c-textarea{min-height:94px;resize:vertical}
.ai-c-btn{
cursor:pointer;border:0;border-radius:12px;padding:12px 14px;
background:linear-gradient(135deg,#7fd0ff,#49a8ef);color:#06111a;font:800 12px Inter,sans-serif
}
.ai-c-btn.ghost{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);color:#edf7fd}
.ai-output{
margin-top:14px;padding:15px;border-radius:15px;border:1px solid rgba(255,255,255,.06);
background:rgba(3,12,20,.46);color:#aebfcb;font-size:12.5px;line-height:1.65
}
.ai-output strong{color:#eff9ff}
.ai-output h4{margin:0 0 8px;color:#fff;font-size:14px}
.ai-output ul{margin:8px 0 0;padding-left:18px}
.ai-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.ai-kpi{padding:14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.055)}
.ai-kpi span{display:block;font-size:10px;color:#8195a5;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}
.ai-kpi strong{font-size:21px;color:#fff}
.ai-meter{height:7px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;margin-top:8px}
.ai-meter b{display:block;height:100%;background:linear-gradient(90deg,#53aff1,#83d1ff);border-radius:inherit}
.ai-case-list,.ai-search-results,.ai-seo-list,.ai-review-tags{display:grid;gap:9px}
.ai-case-item,.ai-search-item,.ai-seo-item{
padding:12px;border-radius:13px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.05)
}
.ai-case-item strong,.ai-search-item strong,.ai-seo-item strong{display:block;color:#f0f9ff;font-size:12.5px;margin-bottom:4px}
.ai-case-item span,.ai-search-item span,.ai-seo-item span{color:#7f94a4;font-size:11.5px}
.ai-price-big{font-size:31px;font-weight:900;color:#fff;letter-spacing:-.03em;margin:8px 0}
.ai-price-big small{font-size:12px;color:#8095a4;font-weight:600;letter-spacing:0}
.ai-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ai-slot{cursor:pointer;padding:10px;border-radius:11px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:#aec0cc;font-size:11px;text-align:center}
.ai-slot.active{background:rgba(102,184,247,.11);border-color:rgba(102,184,247,.3);color:#fff}
.ai-email-preview{white-space:pre-wrap}
.ai-crm-table{display:grid;gap:8px}
.ai-crm-row{display:grid;grid-template-columns:1.2fr 1fr .7fr .7fr;gap:10px;padding:11px;border-bottom:1px solid rgba(255,255,255,.05);align-items:center}
.ai-crm-row.header{color:#7890a1;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.ai-crm-row:not(.header){font-size:12px;color:#c5d2dc}
.ai-score-dot{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:6px 8px;border-radius:999px;background:rgba(102,184,247,.09);color:#8fd0ff;font-weight:900}
.ai-review-tags{grid-template-columns:repeat(2,1fr)}
.ai-review-tag{padding:12px;border-radius:13px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.05)}
.ai-review-tag strong{display:flex;justify-content:space-between;font-size:12px}
.ai-review-tag span{display:block;color:#7f94a4;font-size:11px;margin-top:5px}
.ai-onboard-steps{display:grid;gap:10px}
.ai-onboard-step{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:13px;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.05)}
.ai-onboard-step i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(102,184,247,.11);color:#8ed2ff;font-style:normal;font-size:11px;font-weight:900}
.ai-onboard-step strong{font-size:12.5px}.ai-onboard-step span{font-size:10px;color:#7590a1}
.ai-intent-box{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
.ai-intent-state{font-size:19px;color:#fff;font-weight:850}
.ai-intent-state small{display:block;font-size:10px;color:#82a0b1;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.ai-admin-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.ai-admin-tabs{display:flex;gap:7px;flex-wrap:wrap}
.ai-admin-tabs button{cursor:pointer;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025);color:#879aa8;padding:8px 10px;border-radius:10px;font:700 11px Inter,sans-serif}
.ai-admin-tabs button.active{color:#fff;background:rgba(102,184,247,.1);border-color:rgba(102,184,247,.25)}
.ai-exit-demo{
position:fixed;inset:auto 22px 22px auto;width:min(390px,calc(100% - 44px));z-index:9999;
display:none;border-radius:20px;border:1px solid rgba(102,184,247,.25);
background:linear-gradient(180deg,rgba(11,29,45,.98),rgba(7,18,29,.98));
box-shadow:0 30px 90px rgba(0,0,0,.45);padding:20px
}
.ai-exit-demo h4{margin:0 0 8px;font-size:18px}.ai-exit-demo p{margin:0 0 13px;color:#95a8b6;font-size:12.5px;line-height:1.6}
.ai-exit-close{position:absolute;right:12px;top:10px;background:none;border:0;color:#8196a5;cursor:pointer;font-size:18px}
@media(max-width:1000px){
.ai-module,.ai-module.third{grid-column:span 12}
.ai-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
.ai-suite-section{padding:82px 0}
.ai-suite-shell{width:min(100% - 28px,1320px)}
.ai-suite-head{display:block}.ai-suite-badge{display:inline-flex;margin-top:15px}
.ai-control-grid{grid-template-columns:1fr}.ai-control-grid .full{grid-column:auto}
.ai-kpis{grid-template-columns:1fr 1fr}
.ai-slot-grid{grid-template-columns:1fr 1fr}
.ai-crm-row{grid-template-columns:1fr auto}
.ai-crm-row > :nth-child(2),.ai-crm-row > :nth-child(4){display:none}
.ai-review-tags{grid-template-columns:1fr}
}
.lang-switcher{
display:flex;
align-items:center;
gap:4px;
margin-left:auto;
margin-right:8px;
padding:4px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
border-radius:12px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.lang-switcher button{
appearance:none;
border:0;
background:transparent;
color:#8fa4b3;
min-width:38px;
height:34px;
padding:0 10px;
border-radius:9px;
font:800 11px/1 Inter,sans-serif;
letter-spacing:.04em;
cursor:pointer;
transition:.2s ease;
}
.lang-switcher button:hover{
color:#fff;
background:rgba(255,255,255,.045);
}
.lang-switcher button.active{
color:#06111a;
background:linear-gradient(135deg,#8fd3ff,#5eb8f4);
box-shadow:0 8px 22px rgba(94,184,244,.18);
}
@media(max-width:980px){
.lang-switcher{
margin-left:8px;
margin-right:4px;
}
}
@media(max-width:760px){
.lang-switcher{
order:3;
}
.lang-switcher button{
min-width:34px;
height:32px;
padding:0 8px;
}
}
.ai-writing-wrap{
position:relative;
}
.ai-writing-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:9px;
flex-wrap:wrap;
}
.ai-writing-actions{
display:flex;
gap:8px;
flex-wrap:wrap;
}
.ai-writing-btn{
display:inline-flex;
align-items:center;
gap:7px;
min-height:36px;
padding:0 11px;
border-radius:10px;
border:1px solid rgba(102,184,247,.16);
background:rgba(102,184,247,.07);
color:#bfe7ff;
font:750 11px/1 Inter,sans-serif;
cursor:pointer;
transition:.2s ease;
}
.ai-writing-btn:hover{
background:rgba(102,184,247,.12);
border-color:rgba(102,184,247,.28);
color:#fff;
}
.ai-writing-btn.secondary{
background:rgba(255,255,255,.035);
border-color:rgba(255,255,255,.07);
color:#9fb0bd;
}
.ai-writing-btn svg{
width:14px;
height:14px;
flex:0 0 auto;
}
.ai-writing-status{
min-height:18px;
color:#7891a3;
font-size:10.5px;
line-height:1.4;
}
.ai-writing-status.success{ color:#84ddb7; }
.ai-writing-status.error{ color:#ff9e9e; }
.ai-writing-hint{
display:flex;
align-items:center;
gap:7px;
color:#6f8799;
font-size:10.5px;
}
.ai-writing-hint i{
width:6px;height:6px;border-radius:50%;
background:#66b8f7;
box-shadow:0 0 10px rgba(102,184,247,.55);
}
#c-bericht.ai-writing-active{
border-color:rgba(102,184,247,.42);
box-shadow:0 0 0 4px rgba(102,184,247,.055);
}
@media(max-width:600px){
.ai-writing-toolbar{align-items:flex-start}
.ai-writing-actions{width:100%}
.ai-writing-btn{flex:1;justify-content:center}
.ai-writing-hint{width:100%}
}
html{scroll-behavior:smooth}
.ai-smart-section,
.ai-complete-section,
section:not(.webtrix-slider):not(.navbar),
footer{
content-visibility:auto;
contain-intrinsic-size:900px;
}
.webtrix-slider,
.pro-positioning-fx{
contain:layout paint;
}
@media (max-width: 760px){
.webtrix-particles,
.pro-positioning-particles{
display:none !important;
}
.orb{
animation:none !important;
}
}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.001ms !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
scroll-behavior:auto !important;
}
}
.portal-nav-link{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 14px;
border-radius:11px;
border:1px solid rgba(102,184,247,.16);
background:rgba(102,184,247,.055);
color:#c8eaff !important;
text-decoration:none;
font:750 12.5px/1 Inter,sans-serif;
transition:.2s ease;
white-space:nowrap;
}
.portal-nav-link:hover{
background:rgba(102,184,247,.10);
border-color:rgba(102,184,247,.30);
transform:translateY(-1px);
}
@media(max-width:980px){
.portal-nav-link{display:none}
}
.hero-scan-actions{
display:flex;
align-items:center;
gap:12px;
margin-top:26px;
opacity:0;
transform:translateY(18px);
animation:heroIn .8s ease forwards;
animation-delay:.66s;
}
.hero-scan-btn{
appearance:none;
border:1px solid rgba(131,211,255,.38);
min-height:50px;
padding:0 20px;
border-radius:13px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
cursor:pointer;
color:#06111a;
font:850 13px/1 Inter,sans-serif;
background:linear-gradient(135deg,#a5ddff 0%,#6ac1f8 52%,#4aa9e9 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.58),
0 12px 30px rgba(61,168,235,.22);
transition:transform .2s ease, box-shadow .2s ease;
}
.hero-scan-btn:hover{
transform:translateY(-2px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.65),
0 16px 38px rgba(61,168,235,.28);
}
.hero-scan-btn svg{width:18px;height:18px;flex:0 0 auto}
.hero-scan-note{font-size:11px;color:#8699a8}
.ai-scan-modal{
position:fixed;
inset:0;
z-index:9999;
display:grid;
place-items:center;
padding:22px;
background:rgba(2,8,13,.74);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .22s ease, visibility .22s ease;
}
.ai-scan-modal.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}
.ai-scan-dialog{
width:min(610px,100%);
position:relative;
overflow:hidden;
border:1px solid rgba(137,211,255,.18);
border-radius:24px;
background:
radial-gradient(circle at 82% 4%,rgba(102,184,247,.18),transparent 30%),
linear-gradient(145deg,rgba(10,28,43,.98),rgba(5,17,27,.99));
box-shadow:
0 34px 100px rgba(0,0,0,.58),
inset 0 1px 0 rgba(255,255,255,.06);
transform:translateY(12px) scale(.985);
transition:transform .22s ease;
}
.ai-scan-modal.is-open .ai-scan-dialog{transform:translateY(0) scale(1)}
.ai-scan-dialog::before{
content:"";
position:absolute;
left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg,transparent,#78cbff,transparent);
}
.ai-scan-close{
position:absolute;
right:16px;
top:15px;
width:36px;
height:36px;
border-radius:10px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
color:#b6c7d4;
font-size:22px;
cursor:pointer;
display:grid;
place-items:center;
transition:.2s ease;
}
.ai-scan-close:hover{color:white;background:rgba(255,255,255,.07)}
.ai-scan-body{padding:34px}
.ai-scan-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:13px;
font-size:10px;
font-weight:900;
letter-spacing:.16em;
color:#8dd3ff;
}
.ai-scan-kicker i{
width:7px;height:7px;border-radius:50%;
background:#7bd2ff;
box-shadow:0 0 14px rgba(123,210,255,.78)
}
.ai-scan-body h3{
margin:0 44px 10px 0;
font-size:clamp(27px,4vw,38px);
letter-spacing:-.035em;
line-height:1.06;
}
.ai-scan-body > p{
margin:0;
max-width:520px;
color:#9fb2c1;
line-height:1.7;
font-size:14px;
}
.ai-scan-checks{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
margin:22px 0;
}
.ai-scan-check{
display:flex;
align-items:center;
gap:9px;
padding:11px 12px;
border:1px solid rgba(255,255,255,.07);
border-radius:11px;
background:rgba(255,255,255,.025);
color:#c7d6e0;
font-size:12px;
}
.ai-scan-check span{
width:18px;height:18px;border-radius:50%;
display:grid;place-items:center;
color:#07111b;
font-size:11px;font-weight:950;
background:#7fcfff;
flex:0 0 auto;
}
.ai-scan-form{display:flex;gap:9px;margin-top:8px}
.ai-scan-form input{
flex:1;
min-width:0;
height:52px;
border:1px solid rgba(255,255,255,.10);
border-radius:12px;
outline:0;
padding:0 15px;
color:#fff;
background:#071925;
font:600 13px/1 Inter,sans-serif;
transition:border-color .2s ease,box-shadow .2s ease;
}
.ai-scan-form input:focus{
border-color:rgba(102,184,247,.48);
box-shadow:0 0 0 4px rgba(102,184,247,.08);
}
.ai-scan-submit{
min-width:132px;
height:52px;
border:0;
border-radius:12px;
cursor:pointer;
color:#06111a;
font:850 12.5px/1 Inter,sans-serif;
background:linear-gradient(135deg,#95d8ff,#5eb8f4);
box-shadow:0 10px 26px rgba(64,167,231,.18);
}
.ai-scan-error{
display:none;
margin-top:10px;
color:#ffc28d;
font-size:11px;
}
.ai-scan-error.show{display:block}
.ai-scan-disclaimer{
margin-top:16px!important;
padding-top:14px;
border-top:1px solid rgba(255,255,255,.06);
color:#788e9e!important;
font-size:10.8px!important;
line-height:1.55!important;
}
body.ai-scan-lock{overflow:hidden}
@media(max-width:600px){
.hero-scan-actions{align-items:flex-start;flex-direction:column}
.hero-scan-btn{width:100%}
.ai-scan-body{padding:26px 20px 22px}
.ai-scan-checks{grid-template-columns:1fr}
.ai-scan-form{flex-direction:column}
.ai-scan-submit{width:100%}
}
.ai-scan-results{
display:none;
margin-top:18px;
padding:16px;
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
background:rgba(255,255,255,.025);
}
.ai-scan-results.show{display:block}
.ai-scan-result-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px
}
.ai-scan-score{
width:54px;height:54px;border-radius:50%;
display:grid;place-items:center;flex:0 0 auto;
color:#07111b;font-weight:950;font-size:15px;
background:linear-gradient(135deg,#9ddcff,#5eb8f4);
box-shadow:0 10px 26px rgba(70,174,238,.18)
}
.ai-scan-result-title{font-weight:850;font-size:14px;color:#eef8ff}
.ai-scan-result-domain{font-size:11px;color:#8097a7;margin-top:3px;word-break:break-all}
.ai-scan-result-list{display:grid;gap:8px}
.ai-scan-result-row{
display:flex;align-items:flex-start;gap:9px;
padding:10px 11px;border-radius:10px;
background:rgba(4,17,27,.55);border:1px solid rgba(255,255,255,.055);
font-size:11.5px;color:#b9c9d4;line-height:1.5
}
.ai-scan-result-row b{color:#eef8ff}
.ai-scan-dot{
width:8px;height:8px;border-radius:50%;margin-top:4px;flex:0 0 auto;background:#72ccff;
box-shadow:0 0 12px rgba(114,204,255,.55)
}
.ai-scan-result-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ai-scan-secondary{
height:40px;padding:0 13px;border-radius:10px;cursor:pointer;
border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);
color:#dceaf3;font:750 11px/1 Inter,sans-serif
}
.hero-scan-actions{
flex-wrap:wrap !important;
}
.hero-scan-btn{
width:auto !important;
min-width:max-content !important;
padding:0 22px !important;
white-space:nowrap !important;
line-height:1 !important;
flex:0 0 auto !important;
}
.hero-scan-btn span{
display:inline-block !important;
white-space:nowrap !important;
word-break:normal !important;
overflow-wrap:normal !important;
writing-mode:horizontal-tb !important;
}
.hero-scan-note{
max-width:260px;
line-height:1.45;
}
@media(max-width:600px){
.hero-scan-actions{
width:100%;
align-items:stretch !important;
}
.hero-scan-btn{
width:100% !important;
min-width:0 !important;
padding:0 16px !important;
font-size:12.5px !important;
}
.hero-scan-btn span{
white-space:nowrap !important;
}
.hero-scan-note{
max-width:none;
}
}
.ai-scan-score-card{
display:grid;
grid-template-columns:auto 1fr;
gap:16px;
align-items:center;
margin:16px 0 14px;
padding:18px;
border:1px solid rgba(117,204,255,.18);
border-radius:16px;
background:
radial-gradient(circle at 12% 20%,rgba(102,184,247,.13),transparent 35%),
rgba(7,25,37,.72);
box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.ai-scan-score-big{
min-width:116px;
text-align:center;
line-height:1;
}
.ai-scan-score-big strong{
display:block;
font-size:46px;
font-weight:950;
letter-spacing:-.055em;
color:#eef9ff;
}
.ai-scan-score-big small{
display:block;
margin-top:5px;
color:#7e94a4;
font-size:11px;
font-weight:800;
letter-spacing:.03em;
}
.ai-scan-score-meta h4{
margin:0 0 6px;
font-size:15px;
color:#f1f8fc;
}
.ai-scan-score-meta p{
margin:0;
font-size:11.5px;
line-height:1.55;
color:#8fa4b3;
}
.ai-scan-score-bar{
height:8px;
margin-top:12px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.065);
}
.ai-scan-score-bar > span{
display:block;
height:100%;
width:0;
border-radius:inherit;
background:linear-gradient(90deg,#5ab3ef,#8dd9ff);
box-shadow:0 0 18px rgba(104,199,255,.28);
transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.ai-scan-score-status{
display:inline-flex;
align-items:center;
gap:7px;
margin-top:9px;
padding:6px 9px;
border:1px solid rgba(255,255,255,.07);
border-radius:999px;
background:rgba(255,255,255,.03);
color:#b9cedb;
font-size:10.5px;
font-weight:800;
}
.ai-scan-score-status::before{
content:"";
width:7px;height:7px;border-radius:50%;
background:#75ccff;
box-shadow:0 0 10px rgba(117,204,255,.65);
}
@media(max-width:520px){
.ai-scan-score-card{grid-template-columns:1fr;text-align:center}
.ai-scan-score-meta{text-align:left}
}
.ai-chat-fab,.ai-quote-fab{position:fixed}
.ai-chat-fab::after,.ai-quote-fab::after{
position:absolute;
right:calc(100% + 12px);
top:50%;
transform:translateY(-50%) translateX(6px);
width:245px;
padding:10px 12px;
border:1px solid rgba(129,207,255,.14);
border-radius:11px;
background:rgba(7,20,31,.96);
box-shadow:0 14px 34px rgba(0,0,0,.28);
color:#aebfca;
font:600 10.5px/1.5 Inter,sans-serif;
text-align:left;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:.2s ease;
white-space:normal;
}
.ai-chat-fab::after{
content:"Direct antwoord over websites, IT, Microsoft 365 en onze diensten.";
}
.ai-quote-fab::after{
content:"Beantwoord een paar vragen en ontvang direct een eerste prijsindicatie.";
}
.ai-chat-fab:hover::after,.ai-chat-fab:focus-visible::after,
.ai-quote-fab:hover::after,.ai-quote-fab:focus-visible::after{
opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);
}
@media(max-width:760px){
.ai-chat-fab::after,.ai-quote-fab::after{display:none}
}
.action-purpose-copy{
margin:7px 0 16px;
color:#91a6b5;
font-size:12px;
line-height:1.6;
max-width:520px;
}
.navbar{
display:flex;
align-items:center;
}
.navbar .nav-links{
flex:1 1 auto;
display:flex;
align-items:center;
}
.lang-switch-wrap{
position:relative;
margin-left:auto;
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
padding-bottom:22px;
}
.lang-switcher{
position:relative;
z-index:2;
}
.lang-switch-hint{
position:absolute;
left:50%;
top:calc(100% - 13px);
transform:translateX(-50%);
display:inline-flex;
align-items:center;
gap:5px;
white-space:nowrap;
color:#7f96a6;
font-size:9.5px;
font-weight:700;
letter-spacing:.02em;
opacity:.82;
pointer-events:none;
animation:langHintFloat 2.4s ease-in-out infinite;
}
.lang-hint-dot{
width:5px;
height:5px;
border-radius:50%;
background:#76cfff;
box-shadow:0 0 9px rgba(118,207,255,.72);
animation:langHintPulse 1.7s ease-in-out infinite;
}
.lang-hint-arrow{
display:inline-block;
color:#72c9ff;
font-size:10px;
transform:translateY(-1px);
animation:langHintArrow 1.5s ease-in-out infinite;
}
@keyframes langHintFloat{
0%,100%{transform:translateX(-50%) translateY(0);opacity:.68}
50%{transform:translateX(-50%) translateY(3px);opacity:1}
}
@keyframes langHintPulse{
0%,100%{transform:scale(.8);opacity:.55}
50%{transform:scale(1.18);opacity:1}
}
@keyframes langHintArrow{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-3px)}
}
@media(max-width:980px){
.lang-switch-wrap{
padding-bottom:0;
margin-left:8px;
}
.lang-switch-hint{display:none}
}
@media(prefers-reduced-motion:reduce){
.lang-switch-hint,.lang-hint-dot,.lang-hint-arrow{animation:none!important}
}
.navbar{
overflow:visible !important;
}
.navbar .nav-links{
display:flex !important;
align-items:center !important;
flex-wrap:nowrap !important;
gap:10px !important;
padding:8px !important;
}
.lang-switch-wrap,
.lang-switch-hint{
display:none !important;
}
.lang-menu-item{
display:flex;
align-items:center;
justify-content:center;
flex:0 0 auto;
margin-left:2px;
padding:0;
}.lang-menu-item .lang-switcher{
position:relative;
inset:auto !important;
margin:0 !important;
padding:3px !important;
min-height:38px;
display:flex !important;
align-items:center;
gap:2px;
border:1px solid rgba(255,255,255,.08);
border-radius:11px;
background:rgba(255,255,255,.035);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.03),
0 0 0 1px rgba(102,184,247,.02);
overflow:hidden;
}
.lang-menu-item .lang-switcher::after{
content:"";
position:absolute;
inset:-1px;
border-radius:11px;
pointer-events:none;
background:linear-gradient(110deg,transparent 20%,rgba(109,202,255,.14) 50%,transparent 80%);
transform:translateX(-120%);
animation:langMenuSweep 4.5s ease-in-out infinite;
}
.lang-menu-item .lang-switcher button{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
}
.lang-menu-item .lang-switcher button::before{
content:none!important;
display:none!important;
}
.lang-menu-item .lang-switcher .lang-flag{
width:20px;
height:14px;
flex:0 0 20px;
display:inline-flex;
border-radius:2px;
overflow:hidden;
box-shadow:0 0 0 1px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.28);
}
.lang-menu-item .lang-switcher .lang-flag svg{
display:block;
width:100%;
height:100%;
}
.lang-menu-item .lang-switcher .lang-code{
position:relative;
z-index:1;
}
.lang-menu-item .lang-switcher button:hover .lang-flag,
.lang-menu-item .lang-switcher button.active .lang-flag{
transform:scale(1.05);
box-shadow:0 0 0 1px rgba(255,255,255,.38),0 3px 9px rgba(0,0,0,.30);
}
.lang-menu-item .lang-switcher button{
position:relative;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
overflow:hidden;
}
.lang-menu-item .lang-switcher button::before{
content:"";
width:18px;
height:12px;
flex:0 0 18px;
border-radius:2px;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
box-shadow:0 0 0 1px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.22);
}
.lang-menu-item .lang-switcher button[data-lang="nl"]::before{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%209%206%22%3E%0A%3Crect%20width%3D%229%22%20height%3D%222%22%20y%3D%220%22%20fill%3D%22#AE1C28%22/%3E%0A%3Crect%20width%3D%229%22%20height%3D%222%22%20y%3D%222%22%20fill%3D%22#FFFFFF%22/%3E%0A%3Crect%20width%3D%229%22%20height%3D%222%22%20y%3D%224%22%20fill%3D%22#21468B%22/%3E%0A%3C/svg%3E");
}
.lang-menu-item .lang-switcher button[data-lang="en"]::before{
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2030%22%3E%0A%3CclipPath%20id%3D%22s%22%3E%3Cpath%20d%3D%22M0,0%20v30%20h60%20v-30%20z%22/%3E%3C/clipPath%3E%0A%3CclipPath%20id%3D%22t%22%3E%3Cpath%20d%3D%22M30,15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%22/%3E%3C/clipPath%3E%0A%3Cg%20clip-path%3D%22url(#s)%22%3E%0A%3Cpath%20d%3D%22M0,0%20v30%20h60%20v-30%20z%22%20fill%3D%22#012169%22/%3E%0A%3Cpath%20d%3D%22M0,0%20L60,30%20M60,0%20L0,30%22%20stroke%3D%22#fff%22%20stroke-width%3D%226%22/%3E%0A%3Cpath%20d%3D%22M0,0%20L60,30%20M60,0%20L0,30%22%20clip-path%3D%22url(#t)%22%20stroke%3D%22#C8102E%22%20stroke-width%3D%224%22/%3E%0A%3Cpath%20d%3D%22M30,0%20v30%20M0,15%20h60%22%20stroke%3D%22#fff%22%20stroke-width%3D%2210%22/%3E%0A%3Cpath%20d%3D%22M30,0%20v30%20M0,15%20h60%22%20stroke%3D%22#C8102E%22%20stroke-width%3D%226%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
}
.lang-menu-item .lang-switcher button:hover::before,
.lang-menu-item .lang-switcher button.active::before{
transform:scale(1.06);
box-shadow:0 0 0 1px rgba(255,255,255,.34),0 3px 9px rgba(0,0,0,.28);
}
.lang-menu-item .lang-switcher button{
position:relative;
isolation:isolate;
overflow:hidden;
}
.lang-menu-item .lang-switcher button::before{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
line-height:1;
opacity:.18;
filter:saturate(.95);
transform:scale(1.18);
pointer-events:none;
z-index:-1;
}
.lang-menu-item .lang-switcher button[data-lang="nl"]::before{
content:"🇳🇱";
}
.lang-menu-item .lang-switcher button[data-lang="en"]::before{
content:"🇬🇧";
}
.lang-menu-item .lang-switcher button:hover::before,
.lang-menu-item .lang-switcher button.active::before{
opacity:.28;
transform:scale(1.24);
}
.lang-menu-item .lang-switcher button{
position:relative;
z-index:1;
min-width:34px;
height:32px;
padding:0 9px !important;
border-radius:8px !important;
font-size:11px !important;
line-height:1 !important;
white-space:nowrap !important;
}
.lang-menu-item .lang-switcher button.active{
box-shadow:0 4px 14px rgba(70,175,239,.18);
}
@keyframes langMenuSweep{
0%,72%,100%{transform:translateX(-120%)}
82%{transform:translateX(120%)}
}
@media(max-width:1180px){
.navbar .nav-links{
gap:7px !important;
}
.navbar .nav-links a{
padding-left:11px !important;
padding-right:11px !important;
}
.lang-menu-item .lang-switcher button{
min-width:31px;
padding:0 7px !important;
}
}
@media(max-width:980px){
.lang-menu-item{
margin-left:0;
}
.lang-menu-item .lang-switcher{
width:100%;
justify-content:center;
}
}
@media(prefers-reduced-motion:reduce){
.lang-menu-item .lang-switcher::after{animation:none!important}
}
.navbar .nav-links{
display:flex !important;
align-items:center !important;
flex-wrap:nowrap !important;
}
.portal-nav-link{
margin-left:auto !important;
flex:0 0 auto !important;
}
.lang-menu-item{
margin-left:6px !important;
flex:0 0 auto !important;
align-self:center;
}
.lang-menu-item .lang-switcher{
margin:0 !important;
position:relative !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
}
@media(max-width:980px){
.portal-nav-link{margin-left:0 !important}
.lang-menu-item{margin-left:0 !important}
}
.navbar{
display:flex !important;
align-items:center !important;
width:100% !important;
}
.navbar .logo,
.navbar .webtrix-logo-image{
flex:0 0 auto !important;
margin-right:24px !important;
}
.navbar .nav-links{
flex:1 1 auto !important;
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
flex-wrap:nowrap !important;
margin-left:auto !important;
width:auto !important;
}
.navbar .nav-links > *{
flex:0 0 auto !important;
}
.portal-nav-link{
margin-left:0 !important;
}
.lang-menu-item{
margin-left:6px !important;
}
@media(max-width:1180px){
.navbar .logo,
.navbar .webtrix-logo-image{
margin-right:14px !important;
}
}
@media(max-width:980px){
.navbar .nav-links{
justify-content:flex-end !important;
margin-left:auto !important;
}
}
.navbar{
display:flex !important;
align-items:center !important;
width:100% !important;
}
.navbar .logo,
.navbar .webtrix-logo-image{
flex:0 0 auto !important;
margin-right:auto !important;
}
.navbar .nav-links{
flex:0 0 auto !important;
width:max-content !important;
max-width:calc(100% - 210px) !important;
margin-left:auto !important;
margin-right:0 !important;
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
flex-wrap:nowrap !important;
gap:10px !important;
}
.navbar .nav-links > *{
flex:0 0 auto !important;
}
.portal-nav-link{
margin-left:0 !important;
}
.lang-menu-item{
margin-left:6px !important;
}
.navbar .nav-links::before,
.navbar .nav-links::after{
inset:0 !important;
width:100% !important;
max-width:100% !important;
border-radius:inherit !important;
pointer-events:none !important;
}
@media(max-width:1180px){
.navbar .nav-links{
gap:7px !important;
max-width:calc(100% - 175px) !important;
}
}
@media(max-width:980px){
.navbar .nav-links{
width:auto !important;
max-width:none !important;
}
}
.webtrix-logo-frame{
display:block;
width:100%;
height:100%;
border:0;
background:transparent;
overflow:hidden;
pointer-events:none;
}
.navbar .webtrix-animated-logo-nav{
width:220px !important;
height:58px !important;
overflow:visible !important;
}
.webtrix-animated-logo-footer{
width:230px !important;
height:66px !important;
overflow:visible !important;
}
@media(max-width:1180px){
.navbar .webtrix-animated-logo-nav{width:190px !important;height:54px !important;}
}
@media(max-width:600px){
.navbar .webtrix-animated-logo-nav{width:155px !important;height:46px !important;}
.webtrix-animated-logo-footer{width:190px !important;height:56px !important;}
}
.navbar .webtrix-animated-logo-nav,
.webtrix-animated-logo-footer{
background:transparent !important;
background-color:transparent !important;
background-image:none !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
.webtrix-logo-frame{
background:transparent !important;
background-color:transparent !important;
color-scheme:light only;
mix-blend-mode:normal;
}
.navbar .nav-inner,
.navbar .container,
nav .container{
align-items:center !important;
}
.navbar .webtrix-animated-logo-nav{
width:210px !important;
height:54px !important;
flex:0 0 210px !important;
margin-right:24px !important;
margin-left:0 !important;
align-self:center !important;
overflow:visible !important;
}
.navbar .webtrix-animated-logo-nav .webtrix-logo-frame{
width:100% !important;
height:100% !important;
display:block !important;
}
.webtrix-animated-logo-footer{
width:185px !important;
height:52px !important;
opacity:.92;
}
@media (max-width:1180px){
.navbar .webtrix-animated-logo-nav{
width:185px !important;
height:50px !important;
flex-basis:185px !important;
margin-right:16px !important;
}
}
@media (max-width:760px){
.navbar .webtrix-animated-logo-nav{
width:160px !important;
height:46px !important;
flex-basis:160px !important;
margin-right:10px !important;
}
}
.webtrix-brand-link{
display:inline-flex;
align-items:center;
flex:0 0 auto;
text-decoration:none;
line-height:0;
}
.webtrix-brand-link:focus-visible{
outline:1px solid rgba(56,185,255,.8);
outline-offset:5px;
border-radius:10px;
}
.navbar .webtrix-brand-link{
margin-left:18px !important;
}
@media (max-width:760px){
.navbar .webtrix-brand-link{
margin-left:8px !important;
}
}
.webtrix-logo-frame{
transform:translateZ(0);
backface-visibility:hidden;
-webkit-font-smoothing:antialiased;
}
.navbar .webtrix-animated-logo-nav{
width:250px !important;
height:64px !important;
flex:0 0 250px !important;
}
@media (max-width:1180px){
.navbar .webtrix-animated-logo-nav{
width:220px !important;
height:58px !important;
flex-basis:220px !important;
}
}
@media (max-width:760px){
.navbar .webtrix-animated-logo-nav{
width:180px !important;
height:50px !important;
flex-basis:180px !important;
}
}
.navbar .webtrix-animated-logo-nav{
height:68px !important;
}
.webtrix-animated-logo-footer{
height:58px !important;
}
:root{
--webtrix-orange:#ff6a00;
--webtrix-orange-soft:rgba(255,106,0,.14);
--webtrix-orange-border:rgba(255,106,0,.28);
}
.nav-links a{
position:relative;
}
.nav-links a::after{
content:"";
position:absolute;
left:50%;
bottom:-8px;
width:0;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,transparent,var(--webtrix-orange),transparent);
transform:translateX(-50%);
transition:width .25s ease, opacity .25s ease;
opacity:.82;
}
.nav-links a:hover::after,
.nav-links a.active::after{
width:72%;
}
.eyebrow::before,
.quote-label::before,
.pro-positioning-eyebrow::before,
.pro-faq-v3-eyebrow::before{
content:"";
display:inline-block;
width:5px;
height:5px;
margin-right:8px;
border-radius:50%;
background:var(--webtrix-orange);
box-shadow:0 0 10px rgba(255,106,0,.42);
vertical-align:middle;
}
.ai-suite-badge,
.pro-project-pill{
border-color:var(--webtrix-orange-border) !important;
box-shadow:inset 0 0 0 1px rgba(255,106,0,.025);
}
.ai-suite-badge:hover,
.pro-project-pill:hover{
border-color:rgba(255,106,0,.42) !important;
box-shadow:0 8px 22px rgba(255,106,0,.08);
}
.hero-scan-btn,
.ai-quote-fab{
position:relative;
}
.hero-scan-btn:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.58),
0 12px 30px rgba(61,168,235,.20),
0 0 0 1px rgba(255,106,0,.18),
0 0 24px rgba(255,106,0,.08);
}
.ai-quote-fab:hover{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.5),
0 10px 28px rgba(40,145,220,.30),
0 0 0 2px rgba(255,106,0,.18),
0 0 26px rgba(255,106,0,.10);
}
.quote-card,
.ai-smart-section,
.ai-suite-section{
position:relative;
}
.quote-card::before,
.ai-smart-section::before,
.ai-suite-section::before{
content:"";
position:absolute;
top:0;
left:22px;
width:58px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg,var(--webtrix-orange),rgba(255,106,0,.12));
opacity:.8;
pointer-events:none;
}
#ai-smart{
display:none !important;
}
#ai-suite{
display:none !important;
}
#cases .pro-case-v3-browser-wrap.pro-case-photo-visual{
position:relative;
overflow:hidden;
background:
linear-gradient(180deg,rgba(4,18,30,.04),rgba(4,18,30,.30)),
url("https://images.pexels.com/photos/16129705/pexels-photo-16129705/free-photo-of-man-sitting-at-desk-working-on-computers.jpeg?auto=compress&cs=tinysrgb&w=1600") center center / cover no-repeat !important;
}
#cases .pro-case-v3-browser-wrap.pro-case-photo-visual::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg,rgba(3,16,27,.05) 0%,rgba(3,16,27,.12) 55%,rgba(3,16,27,.42) 100%),
linear-gradient(90deg,rgba(12,121,208,.08),transparent 42%);
}
#cases .pro-case-v3-browser-wrap.pro-case-photo-visual img{
display:none !important;
}
.navbar .logo::after,
.navbar .logo::before,
.navbar .webtrix-brand-link::after,
.navbar .webtrix-brand-link::before,
.navbar .webtrix-logo-image::after,
.navbar .webtrix-logo-image::before{
content:none !important;
display:none !important;
background:none !important;
border:0 !important;
box-shadow:none !important;
}
.navbar .nav-links a::after{
left:50% !important;
right:auto !important;
width:22px !important;
height:2px !important;
bottom:7px !important;
transform:translateX(-50%) scaleX(0) !important;
transform-origin:center !important;
border-radius:999px !important;
transition:transform .22s ease, opacity .22s ease !important;
}
.navbar .nav-links a:hover::after,
.navbar .nav-links a:focus-visible::after{
transform:translateX(-50%) scaleX(1) !important;
}
.webtrix-packages{
position:relative;
isolation:isolate;
padding:108px min(6vw,60px);
overflow:hidden;
background:
radial-gradient(circle at 12% 15%,rgba(69,166,229,.11),transparent 28%),
radial-gradient(circle at 88% 74%,rgba(255,106,0,.055),transparent 23%),
#07111b;
}
.webtrix-packages::before{
content:"";
position:absolute; inset:0; pointer-events:none; z-index:-1;
background-image:
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:52px 52px;
mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
}
.packages-shell{max-width:1200px;margin:0 auto}
.packages-head{
max-width:780px;
margin:0 auto 48px;
text-align:center;
}
.packages-kicker{
display:inline-flex;align-items:center;gap:8px;
margin-bottom:14px;
color:#83cdfb;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
}
.packages-kicker::before{
content:"";width:7px;height:7px;border-radius:50%;background:#ff6a00;
box-shadow:0 0 12px rgba(255,106,0,.48);
}
.packages-head h2{
margin:0;color:#f6fbff;
font-size:clamp(32px,4.6vw,54px);line-height:1.04;letter-spacing:-2px;
}
.packages-head p{
max-width:650px;margin:18px auto 0;color:#9eb2c2;font-size:15px;line-height:1.7;
}
.packages-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;
}
.package-card{
position:relative;
display:flex;flex-direction:column;
min-height:610px;
padding:30px;
border:1px solid rgba(255,255,255,.09);
border-radius:22px;
background:linear-gradient(155deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
box-shadow:0 24px 60px rgba(0,0,0,.20);
overflow:hidden;
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.package-card:hover{
transform:translateY(-5px);
border-color:rgba(102,184,247,.26);
box-shadow:0 30px 70px rgba(0,0,0,.28);
}
.package-card.featured{
border-color:rgba(102,184,247,.35);
background:
linear-gradient(155deg,rgba(68,157,218,.13),rgba(255,255,255,.025)),
#0a1926;
}
.package-card.featured::before{
content:"MEEST GEKOZEN";
position:absolute;right:18px;top:18px;
padding:7px 10px;border-radius:999px;
border:1px solid rgba(102,184,247,.24);
background:rgba(102,184,247,.10);
color:#9edcff;font-size:9px;font-weight:900;letter-spacing:1.1px;
}
.package-num{
color:rgba(255,255,255,.11);font-size:42px;font-weight:800;line-height:1;margin-bottom:30px;
}
.package-card h3{
margin:0;color:#fff;font-size:25px;letter-spacing:-.5px;
}
.package-for{margin:8px 0 22px;color:#8ea4b5;font-size:13px;min-height:40px;line-height:1.5}
.package-price{display:flex;align-items:flex-end;gap:7px;margin-bottom:22px}
.package-price strong{font-size:40px;line-height:1;color:#f4faff;letter-spacing:-1.5px}
.package-price span{color:#7890a3;font-size:12px;padding-bottom:5px}
.package-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.package-list li{
position:relative;padding-left:25px;color:#c6d5df;font-size:13.5px;line-height:1.45;
}
.package-list li::before{
content:"✓";position:absolute;left:0;top:0;
width:17px;height:17px;border-radius:50%;
display:grid;place-items:center;
background:rgba(102,184,247,.10);color:#79c9fa;font-size:10px;font-weight:900;
}
.package-note{
margin-top:auto;padding:13px 14px;border-radius:11px;
background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.055);
color:#8196a6;font-size:11.5px;line-height:1.5;
}
.package-btn{
margin-top:16px;width:100%;min-height:48px;
border:1px solid rgba(102,184,247,.22);border-radius:11px;
background:rgba(102,184,247,.08);color:#dff4ff;
font:800 13px/1 Inter,Arial,sans-serif;cursor:pointer;
transition:.2s ease;
}
.package-btn:hover{background:#69baf1;color:#07111b;transform:translateY(-1px)}
.package-card.featured .package-btn{
background:linear-gradient(180deg,#8ed1ff,#57ace7);
color:#06111b;border-color:transparent;
}
.domain-check-wrap{
margin-top:26px;
display:grid;grid-template-columns:.8fr 1.2fr;
border:1px solid rgba(102,184,247,.17);
border-radius:24px;
overflow:hidden;
background:#091824;
box-shadow:0 25px 65px rgba(0,0,0,.22);
}
.domain-copy{
padding:38px;
background:
radial-gradient(circle at 15% 15%,rgba(102,184,247,.13),transparent 36%),
linear-gradient(160deg,#0c2131,#091824);
}
.domain-copy .domain-icon{
width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:24px;
border:1px solid rgba(102,184,247,.18);background:rgba(102,184,247,.08);color:#8ed4ff;
}
.domain-copy h3{margin:0 0 12px;color:#fff;font-size:27px;letter-spacing:-.5px}
.domain-copy p{margin:0;color:#92a9ba;font-size:13.5px;line-height:1.7}
.domain-badges{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}
.domain-badges span{
padding:6px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.07);
background:rgba(255,255,255,.03);color:#8ca4b5;font-size:10px;font-weight:700;
}
.domain-tool{padding:38px;display:flex;flex-direction:column;justify-content:center}
.domain-label{display:block;margin:0 0 9px;color:#d8e7f1;font-size:12px;font-weight:800}
.domain-row{display:grid;grid-template-columns:1fr auto;gap:9px}
.domain-row input{
min-width:0;height:54px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.045);color:#fff;padding:0 16px;outline:none;
font:600 15px/1 Inter,Arial,sans-serif;
transition:border-color .2s ease,box-shadow .2s ease;
}
.domain-row input:focus{
border-color:rgba(102,184,247,.52);
box-shadow:0 0 0 3px rgba(102,184,247,.08);
}
.domain-row button{
height:54px;padding:0 20px;border:0;border-radius:12px;cursor:pointer;
background:linear-gradient(180deg,#8ed1ff,#57ace7);color:#06111b;
font:900 12px/1 Inter,Arial,sans-serif;
}
.domain-quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.domain-quick button{
border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#8fa7b9;
border-radius:8px;padding:7px 9px;cursor:pointer;font:700 10px Inter,Arial,sans-serif;
}
.domain-quick button:hover{color:#fff;border-color:rgba(102,184,247,.24)}
.domain-result{
display:none;margin-top:14px;padding:14px 15px;border-radius:11px;
font-size:13px;line-height:1.55;border:1px solid transparent;
}
.domain-result.show{display:block}
.domain-result.available{
color:#baf6dc;background:rgba(45,190,126,.085);border-color:rgba(45,190,126,.22);
}
.domain-result.taken{
color:#ffd4d4;background:rgba(242,94,94,.075);border-color:rgba(242,94,94,.18);
}
.domain-result.neutral{
color:#c6dae7;background:rgba(102,184,247,.07);border-color:rgba(102,184,247,.15);
}
.domain-result strong{color:inherit}
.domain-select{
display:none;margin-top:10px;height:43px;padding:0 15px;border-radius:9px;
border:1px solid rgba(45,190,126,.25);background:rgba(45,190,126,.10);color:#caffea;
cursor:pointer;font-weight:800;
}
.domain-select.show{display:inline-flex;align-items:center}
.domain-small{margin:12px 0 0;color:#687f91;font-size:10.5px;line-height:1.5}
@media(max-width:940px){
.packages-grid{grid-template-columns:1fr}
.package-card{min-height:0}
.domain-check-wrap{grid-template-columns:1fr}
}
@media(max-width:620px){
.webtrix-packages{padding:78px 18px}
.package-card,.domain-copy,.domain-tool{padding:25px}
.domain-row{grid-template-columns:1fr}
.domain-row button{width:100%}
}
.package-ai-tag{
display:inline-flex;
align-items:center;
gap:7px;
align-self:flex-start;
margin:0 0 14px;
padding:7px 10px;
border:1px solid rgba(102,184,247,.18);
border-radius:999px;
background:rgba(102,184,247,.07);
color:#9edcff;
font-size:9.5px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
}
.package-ai-tag::before{
content:"✦";
color:#ff6a00;
font-size:11px;
}
.package-ai-box{
margin:4px 0 19px;
padding:15px 16px;
border-radius:13px;
border:1px solid rgba(102,184,247,.12);
background:linear-gradient(145deg,rgba(102,184,247,.065),rgba(255,255,255,.018));
}
.package-ai-box strong{
display:block;
margin-bottom:7px;
color:#e8f7ff;
font-size:11px;
letter-spacing:.2px;
}
.package-ai-box p{
margin:0;
color:#91a9ba;
font-size:11.5px;
line-height:1.55;
}
.package-ai-list-title{
margin:5px 0 11px;
color:#74c7f8;
font-size:10px;
font-weight:900;
letter-spacing:.75px;
text-transform:uppercase;
}
.packages-ai-footnote{
max-width:1000px;
margin:18px auto 0;
padding:15px 17px;
border-radius:13px;
border:1px solid rgba(255,255,255,.055);
background:rgba(255,255,255,.022);
color:#788f9f;
font-size:10.5px;
line-height:1.6;
text-align:center;
}
.ai-market-strip{
margin-top:26px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
}
.ai-market-item{
padding:18px;
border:1px solid rgba(255,255,255,.07);
border-radius:14px;
background:rgba(255,255,255,.025);
}
.ai-market-item span{
display:block;
margin-bottom:7px;
color:#75c8fa;
font-size:10px;
font-weight:900;
letter-spacing:.7px;
text-transform:uppercase;
}
.ai-market-item strong{
display:block;
margin-bottom:5px;
color:#eef9ff;
font-size:13px;
}
.ai-market-item p{
margin:0;
color:#7f95a5;
font-size:10.5px;
line-height:1.5;
}
@media(max-width:940px){
.ai-market-strip{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.ai-market-strip{grid-template-columns:1fr}
}
.compact-packages .package-card{
min-height:0 !important;
padding:25px !important;
}
.compact-packages .package-num{
margin-bottom:19px !important;
font-size:34px !important;
}
.compact-packages .package-for{
min-height:38px !important;
margin-bottom:16px !important;
}
.compact-packages .package-price{
margin-bottom:18px !important;
}
.compact-packages .package-list{
gap:9px !important;
margin-bottom:15px !important;
}
.compact-packages .package-list li{
font-size:12.5px !important;
}
.package-ai-toggle{
width:100%;
min-height:43px;
margin:0 0 12px;
padding:0 13px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
border:1px solid rgba(102,184,247,.18);
border-radius:10px;
background:rgba(102,184,247,.055);
color:#9edcff;
cursor:pointer;
font:800 11.5px/1 Inter,Arial,sans-serif;
transition:.2s ease;
}
.package-ai-toggle:hover{
background:rgba(102,184,247,.10);
border-color:rgba(102,184,247,.32);
}
.package-ai-toggle b{
display:grid;
place-items:center;
width:22px;
height:22px;
border-radius:50%;
background:rgba(255,255,255,.05);
color:#fff;
font-size:16px;
font-weight:400;
transition:transform .2s ease;
}
.package-ai-toggle[aria-expanded="true"] b{
transform:rotate(45deg);
}
.package-ai-collapse{
margin:-3px 0 13px;
padding:14px 15px;
border:1px solid rgba(102,184,247,.12);
border-radius:10px;
background:linear-gradient(145deg,rgba(102,184,247,.065),rgba(255,255,255,.018));
}
.package-ai-collapse strong{
display:block;
margin-bottom:9px;
color:#e9f8ff;
font-size:11px;
}
.package-ai-collapse ul{
list-style:none;
margin:0;
padding:0;
display:grid;
gap:8px;
}
.package-ai-collapse li{
position:relative;
padding-left:18px;
color:#91a9ba;
font-size:11px;
line-height:1.45;
}
.package-ai-collapse li::before{
content:"✦";
position:absolute;
left:0;
color:#ff6a00;
font-size:9px;
}
.compact-packages .package-note{
margin-top:auto !important;
}
.navbar .webtrix-brand-link{
margin-left:30px !important;
}
@media (max-width:760px){
.navbar .webtrix-brand-link{
margin-left:14px !important;
}
}
.ai-quote-fab{position:fixed!important;right:26px!important;left:auto!important;bottom:118px!important;z-index:240!important;}
.ai-chat-fab{position:fixed!important;right:26px!important;left:auto!important;bottom:26px!important;z-index:240!important;}
.ai-quote-panel{right:26px!important;left:auto!important;}
@media(max-width:480px){.ai-quote-fab{right:18px!important;bottom:108px!important}.ai-chat-fab{right:18px!important;bottom:18px!important}.ai-quote-panel{right:14px!important;left:14px!important;width:auto!important}}
.product-showcase{padding:92px 0;background:radial-gradient(circle at 15% 10%,rgba(34,143,255,.10),transparent 33%),linear-gradient(180deg,#07111b,#091621);border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.product-showcase .ps-shell{width:min(1180px,calc(100% - 40px));margin:auto}.product-showcase .ps-kicker{font-size:11px;letter-spacing:2px;font-weight:800;color:#66b8f7;text-transform:uppercase}.product-showcase h2{font-size:clamp(34px,4vw,56px);line-height:1.03;letter-spacing:-2px;margin:12px 0 14px;color:#fff}.product-showcase .ps-intro{max-width:760px;color:#a9bbca;line-height:1.75;margin-bottom:34px}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.product-card{position:relative;padding:26px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:linear-gradient(165deg,rgba(17,34,50,.92),rgba(8,18,29,.95));box-shadow:0 18px 50px rgba(0,0,0,.22);min-height:300px;display:flex;flex-direction:column}.product-card:hover{transform:translateY(-3px);border-color:rgba(102,184,247,.32)}.product-logo{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:rgba(102,184,247,.09);border:1px solid rgba(102,184,247,.16);color:#8bd0ff;margin-bottom:22px}.product-card h3{color:#fff;font-size:22px;margin:0 0 10px}.product-card p{color:#9eb1c1;line-height:1.65;font-size:14px;margin:0 0 20px}.product-card .ps-actions{margin-top:auto;display:flex;gap:9px;flex-wrap:wrap}.ps-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border-radius:10px;text-decoration:none;font-weight:800;font-size:12px}.ps-btn.primary{background:linear-gradient(180deg,#8ed1ff,#58ace8);color:#06111b}.ps-btn.secondary{border:1px solid rgba(255,255,255,.13);color:#dce8f2;background:rgba(255,255,255,.03)}.product-order-strip{padding:64px 0;background:#07111b}.product-order-strip .ps-shell{width:min(1180px,calc(100% - 40px));margin:auto}.product-order-strip .order-box{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:34px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:linear-gradient(135deg,rgba(102,184,247,.10),rgba(255,106,0,.035))}.product-order-strip h2{margin:0 0 8px;color:#fff;font-size:30px}.product-order-strip p{margin:0;color:#9eb1c1}.product-order-strip a{white-space:nowrap}.homepage-city-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.homepage-city-links a{font-size:11px;color:#9fc8e5;text-decoration:none;border:1px solid rgba(255,255,255,.09);padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.02)}
@media(max-width:980px){.product-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.product-grid{grid-template-columns:1fr}.product-showcase{padding:64px 0}.product-order-strip .order-box{align-items:flex-start;flex-direction:column}}