/* KROLA – v2 */
:root{
 --navy:#050d1f; --navy2:#0a1836; --navy3:#0f2147;
 --cyan:#22d3ee; --cyan2:#2ee6f5; --blue:#2563eb; --sky:#3b9cf6; --purple:#8b5cf6; --violet:#a855f7; --indigo:#5b5ef0; --teal:#14b8c8;
 --ink:#0b1633; --muted:#4b5b7c; --line:#dfe8f5; --bg:#f2f7fd; --bg2:#e9f1fb; --card:#fff;
 --r:18px; --shadow:0 18px 45px rgba(20,60,130,.10),0 2px 6px rgba(20,60,130,.05);
 --wrap:1340px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:Manrope,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.55}
body.modal-open,body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.sm{width:14px;height:14px}.ic.lg{width:30px;height:30px}.ic.xl{width:42px;height:42px;stroke-width:1.7}.ic.xxl{width:64px;height:64px;stroke-width:1.6}
.c-cyan{color:var(--cyan)}.c-blue{color:var(--sky)}.c-purple{color:var(--violet)}.c-indigo{color:var(--indigo)}
.grad{background:linear-gradient(90deg,#22d3ee,#5eead4);-webkit-background-clip:text;background-clip:text;color:transparent}
.grad-l{background:linear-gradient(90deg,#1aa7e8,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;border-radius:12px;padding:13px 22px;font-size:16px;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn-lg{padding:17px 28px;font-size:17px}
.btn-cyan{background:linear-gradient(90deg,#22d3ee,#2ee6f5);color:#03132a;box-shadow:0 0 30px rgba(34,211,238,.35)}
.btn-cyan:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(34,211,238,.55)}
.btn-outline{border:2px solid var(--cyan);color:#fff;background:rgba(34,211,238,.04)}
.btn-outline:hover{background:rgba(34,211,238,.12)}
.btn-block{width:100%;padding:16px;font-size:18px}
.play{width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#03132a;display:inline-flex;align-items:center;justify-content:center}
.play .ic{width:15px;height:15px;margin-left:2px}

/* header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background .3s,box-shadow .3s;background:rgba(5,13,31,.0)}
.site-header.scrolled{background:rgba(5,13,31,.88);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(100,160,255,.12)}
.header-in{display:flex;align-items:center;gap:26px;height:84px}
.logo{display:flex;align-items:center;gap:12px;color:#fff;padding-right:26px;border-right:1px solid rgba(255,255,255,.18)}
.logo-k{width:44px;height:44px;filter:drop-shadow(0 0 10px rgba(34,211,238,.35))}
.logo b{display:block;font-size:27px;letter-spacing:.5px;line-height:1}
.logo small{display:block;font-size:12.5px;opacity:.85;margin-top:4px}
.main-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.main-nav>a,.dd-btn{white-space:nowrap;color:#e7f0ff;font-weight:600;font-size:15.5px;padding:10px 12px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;position:relative}
.main-nav>a:hover,.dd-btn:hover{color:var(--cyan)}
.main-nav>a.active{color:var(--cyan)}
.main-nav>a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:2px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.ai-badge{border:2px solid var(--cyan);color:var(--cyan);border-radius:7px;font-size:12px;font-weight:800;padding:1px 5px;margin-right:4px}
.dd{position:relative}
.dd-menu{position:absolute;top:100%;left:0;min-width:230px;background:#0c1b3b;border:1px solid #23426f;border-radius:14px;padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;color:#e7f0ff;font-weight:600;padding:11px 12px;border-radius:9px}
.dd-menu button:hover{background:rgba(34,211,238,.1);color:var(--cyan)}
.head-cta{padding:14px 20px}
.menu-toggle{display:none;width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.2);flex-direction:column;gap:5px;align-items:center;justify-content:center;margin-left:auto}
.menu-toggle span{width:20px;height:2px;background:#fff;border-radius:2px}

/* dark sections */
.dark{background:radial-gradient(1000px 600px at 75% 30%,#0f2a5c 0%,rgba(15,42,92,0) 70%),radial-gradient(800px 500px at 10% 90%,#0b1d44 0%,rgba(11,29,68,0) 70%),linear-gradient(180deg,#071330,#050d1f);color:#fff;position:relative;overflow:hidden}
.kicker{font-size:15px;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#dfe9ff;display:flex;align-items:center;gap:16px}
.kicker::after{content:"";width:58px;height:3px;border-radius:2px;background:var(--cyan)}
.lead{font-size:20px;color:#d7e3f7;max-width:620px}

/* hero */
.hero{padding-top:84px}
.hero-in{display:grid;grid-template-columns:1.12fr 1fr;align-items:center;gap:20px;min-height:640px;padding-top:40px;position:relative;z-index:2}
.hero h1{font-size:clamp(36px,3.9vw,56px);line-height:1.08;letter-spacing:-1.5px;margin:22px 0 24px;font-weight:800}
.hero-btns{display:flex;gap:18px;margin-top:36px;flex-wrap:wrap}
.hero-visual{margin-right:-90px}
.hero-visual img{width:100%;height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.4))}
.waves{position:absolute;left:0;right:0;bottom:120px;height:260px;z-index:1;pointer-events:none}
.waves svg{width:100%;height:100%}
.feature-strip{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);padding:34px 0 46px;position:relative;z-index:2}
.feature-strip li{display:flex;align-items:center;gap:16px;justify-content:center;font-weight:600;font-size:17px;color:#e8f0ff;line-height:1.35;border-left:1px solid rgba(255,255,255,.14)}
.feature-strip li:first-child{border-left:0}

/* light sections */
.sec{padding:96px 0}
.light{background:radial-gradient(900px 400px at 50% 0,#ffffff 0,rgba(255,255,255,0) 70%),var(--bg)}
.light.alt{background:linear-gradient(180deg,#eaf2fc,#f4f8fe)}
.sec-head{text-align:center;max-width:960px;margin:0 auto 46px}
.eyebrow{display:inline-flex;align-items:center;gap:20px;color:var(--blue);font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:17px}
.eyebrow::before,.eyebrow::after{content:"";width:50px;height:2px;background:var(--blue)}
.sec-head h2{font-size:clamp(28px,3.4vw,44px);line-height:1.15;letter-spacing:-.8px;margin:10px 0 14px;font-weight:800}
.sec-head p{font-size:18px;color:#2d3b5a}

.sq{width:52px;height:52px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:none;box-shadow:0 8px 20px rgba(37,99,235,.25)}
.sq .ic{width:28px;height:28px}
.sq.lg{width:62px;height:62px;border-radius:16px}.sq.lg .ic{width:32px;height:32px}
.g-blue{background:linear-gradient(135deg,#4f8cff,#2b55e6)}
.g-sky{background:linear-gradient(135deg,#38c6f4,#1e7be6)}
.g-teal{background:linear-gradient(135deg,#2dd4bf,#0ea5c6)}
.g-indigo{background:linear-gradient(135deg,#6b7bff,#3b44d9)}
.g-purple{background:linear-gradient(135deg,#a78bfa,#7c3aed)}

/* solution cards */
.sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.sol-card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;outline:none}
.sol-card:hover,.sol-card:focus-visible{transform:translateY(-6px);box-shadow:0 26px 60px rgba(20,60,130,.18)}
.sol-card:focus-visible{box-shadow:0 0 0 3px var(--cyan),var(--shadow)}
.sol-img{aspect-ratio:385/165;overflow:hidden}
.sol-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.sol-card:hover .sol-img img{transform:scale(1.05)}
.sol-body{padding:0 22px 24px;margin-top:-26px;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.0),#fff 26px);border-radius:22px 22px 0 0;flex:1;display:flex;flex-direction:column}
.sol-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding-top:18px}
.sol-top h3{font-size:21px;white-space:nowrap;letter-spacing:-.4px;font-weight:800}
.arrow-btn{width:40px;height:40px;border-radius:11px;background:#e2f3fd;color:var(--blue);display:flex;align-items:center;justify-content:center;transition:.2s}
.sol-card:hover .arrow-btn{background:var(--blue);color:#fff}
.sol-desc{font-size:15px;color:#22304f;margin:8px 0 0 64px;min-height:68px;line-height:1.5}
.checks{list-style:none;border-top:1px solid var(--line);margin-top:16px;padding-top:14px;display:grid;gap:9px}
.checks li{position:relative;padding-left:30px;font-size:15.5px;font-weight:500;color:#1a2747}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8ef1' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
.checks.c li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f8ef1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m7.8 12.3 3 3L16.5 9.4'/%3E%3C/svg%3E")}

/* dark band */
.dark-band{background:radial-gradient(600px 220px at 15% 50%,rgba(56,120,255,.35),rgba(56,120,255,0) 70%),linear-gradient(120deg,#0a1a3d,#06102a 60%,#0b1e48);color:#fff;border-radius:24px;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(5,15,40,.25)}
.dark-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:radial-gradient(60% 100% at 50% 100%,rgba(99,102,241,.35),transparent),repeating-linear-gradient(90deg,rgba(96,165,250,.35) 0 2px,transparent 2px 12px);-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000);opacity:.5;pointer-events:none}
.ai-band{display:grid;grid-template-columns:430px 1fr;align-items:center;gap:30px;padding:28px 34px;margin-top:40px}
.ai-band-title{display:flex;align-items:center;gap:24px;padding-right:30px;border-right:1px solid rgba(255,255,255,.15)}
.ai-chip{width:112px;height:112px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,#123a7a,#0a1c44);border:2px solid #4fd8ff;box-shadow:0 0 30px rgba(34,211,238,.5),inset 0 0 20px rgba(34,211,238,.25);color:#e9fbff}
.ai-chip .ic{width:70px;height:70px;stroke-width:1.3}
.ai-band h3{font-size:32px;line-height:1.15;letter-spacing:-.5px}
.ai-band-list{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);position:relative;z-index:1}
.ai-band-list li{text-align:center;font-weight:600;font-size:15.5px;display:flex;flex-direction:column;align-items:center;gap:10px;line-height:1.35;border-left:1px solid rgba(255,255,255,.12);padding:0 8px}
.ai-band-list li:first-child{border-left:0}
.ai-band-list .ic.lg{width:40px;height:40px}
.custom-strip{display:flex;align-items:center;gap:30px;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:22px 30px;margin-top:26px;flex-wrap:wrap}
.cs-title{display:flex;align-items:center;gap:16px;font-size:22px;padding-right:30px;border-right:1px solid var(--line)}
.custom-strip ul{list-style:none;display:flex;flex:1;justify-content:space-between;gap:18px;flex-wrap:wrap}
.custom-strip li{white-space:nowrap}
.custom-strip li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}

/* AI section */
.ai-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:50px;align-items:center}
.ai-visual{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);display:block;padding:0}
.ai-visual img{width:100%;transition:transform .5s}
.ai-visual:hover img{transform:scale(1.03)}
.video-pill{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:12px;background:rgba(5,13,31,.82);backdrop-filter:blur(6px);color:#fff;font-weight:700;padding:10px 18px 10px 10px;border-radius:40px;border:1px solid rgba(34,211,238,.5);box-shadow:0 0 24px rgba(34,211,238,.3);transition:.2s}
.ai-visual:hover .video-pill{background:var(--cyan);color:#03132a}
.ai-visual:hover .video-pill .play{background:#03132a;color:var(--cyan)}
.ai-points h3{font-size:32px;letter-spacing:-.6px;margin-bottom:24px;line-height:1.2}
.pt{display:flex;gap:20px;align-items:flex-start;margin-bottom:22px}
.pt .sq{width:64px;height:58px}
.pt b{font-size:19px;display:block;margin-bottom:3px}
.pt p{color:#2d3b5a;font-size:16px}
.steps-card{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:30px 32px}
#ai .steps-card{display:grid;grid-template-columns:270px 1fr;align-items:center;gap:20px;margin-top:50px}
.steps-title{font-size:27px;line-height:1.2;letter-spacing:-.4px;position:relative;padding-bottom:16px}
.steps-title::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:4px;border-radius:2px;background:var(--cyan)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;counter-reset:s}
.steps li{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;padding:0 6px}
.steps li:not(:last-child)::after{content:"";position:absolute;right:-12px;top:14px;width:12px;height:12px;border-top:3px solid var(--sky);border-right:3px solid var(--sky);transform:rotate(45deg)}
.steps b{font-size:17px;margin-top:6px}
.steps span{font-size:14.5px;color:#334366;line-height:1.4}
.integr{display:grid;grid-template-columns:260px 1fr;align-items:center;gap:20px;padding:30px 34px;margin-top:30px}
.integr h3{font-size:28px;line-height:1.2;position:relative;padding-bottom:16px;border-right:1px solid rgba(255,255,255,.15)}
.integr h3::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:4px;border-radius:2px;background:var(--cyan)}
.integr ul{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);position:relative;z-index:1}
.integr li{text-align:center;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:10px;line-height:1.35;border-left:1px solid rgba(255,255,255,.12);padding:0 6px}
.integr li:first-child{border-left:0}

/* references */
.ref-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ref-card{background:#fff;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;cursor:pointer;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;outline:none}
.ref-card:hover,.ref-card:focus-visible{transform:translateY(-6px);box-shadow:0 26px 60px rgba(20,60,130,.18)}
.ref-head{display:flex;align-items:center;gap:14px;padding:16px 20px 12px;min-height:86px}
.ref-head b{font-size:22px;display:block;line-height:1.1}
.ref-head small{font-size:14px;color:#334366}
.ref-img{aspect-ratio:526/215;overflow:hidden}
.ref-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ref-card:hover .ref-img img{transform:scale(1.05)}
.ref-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.ref-body h3{font-size:19px;letter-spacing:-.3px;line-height:1.25}
.ref-body>p{font-size:14.5px;color:#2d3b5a;margin-top:8px}
.ref-body .checks{border:0;padding-top:0;margin-top:14px;gap:7px}
.ref-body .checks li{font-size:14.5px}
.ref-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:16px}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--blue);font-size:15px}
.more .ic{width:17px;height:17px;transition:transform .2s}
.ref-card:hover .more .ic{transform:translateX(4px)}
.site-link{display:inline-flex;align-items:center;gap:7px;background:#e2f3fd;color:#0b6fc2;font-weight:700;font-size:14px;padding:8px 13px;border-radius:9px}
.site-link .ic{width:15px;height:15px}
.site-link:hover{background:var(--blue);color:#fff}
.results-row{display:grid;grid-template-columns:2.4fr 1fr;gap:24px;margin-top:40px}
.stats{display:grid;grid-template-columns:220px 1fr;align-items:center;padding:30px 34px}
.stats h3{font-size:28px;line-height:1.2;position:relative;padding-bottom:16px}
.stats h3::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:4px;border-radius:2px;background:var(--cyan)}
.stats ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:1}
.stats li{text-align:center;display:flex;flex-direction:column;align-items:center;border-left:1px solid rgba(255,255,255,.15)}
.stats li b{font-size:32px;margin-top:6px;letter-spacing:-.5px}
.stats li span{font-size:14.5px;color:#d5e2fb}
.quote{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:26px 28px;display:flex;flex-direction:column;justify-content:center;position:relative}
.quote .q{width:44px;height:44px;color:var(--sky);position:absolute;left:22px;top:22px}
.quote blockquote{font-size:17px;font-weight:600;margin-left:56px;line-height:1.45}
.quote figcaption{display:flex;align-items:center;gap:10px;margin:16px 0 0 56px;font-weight:600;color:#334366;border-top:2px solid #cfe9fb;padding-top:12px}

/* why */
.why-grid{display:grid;grid-template-columns:310px 1fr;gap:36px;align-items:start}
.why-side{padding:34px 30px 0;position:sticky;top:110px}
.why-logo{display:flex;align-items:center;gap:12px;padding-bottom:22px;position:relative}
.why-logo::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:3px;background:var(--cyan)}
.why-logo b{font-size:30px;display:block;line-height:1}.why-logo small{font-size:13px;opacity:.85}
.why-claim{font-size:30px;font-weight:700;line-height:1.2;margin:26px 0 26px;letter-spacing:-.5px}
.why-side img{margin:0 -30px;width:calc(100% + 60px);max-width:none;-webkit-mask:linear-gradient(transparent,#000 25%);mask:linear-gradient(transparent,#000 25%)}
.why-main .sec-head{margin-bottom:32px}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.wc{background:linear-gradient(160deg,#fff,#f5f9ff);border:1px solid #e3ecf8;border-radius:20px;box-shadow:var(--shadow);padding:20px;display:flex;gap:16px;align-items:flex-start}
.wc b{font-size:19px;display:block;margin-bottom:6px;letter-spacing:-.2px}
.wc p{font-size:15px;color:#2d3b5a;line-height:1.45}
.how-title{text-align:center;color:var(--blue);font-size:28px;margin:42px 0 20px;display:flex;align-items:center;justify-content:center;gap:20px}
.how-title::before,.how-title::after{content:"";width:50px;height:2px;background:var(--blue)}
.cta-band{display:grid;grid-template-columns:auto auto minmax(240px,1fr) auto;align-items:center;gap:30px;padding:30px 36px;margin-top:46px}
.cta-band h3{font-size:27px;line-height:1.2;padding-right:30px;border-right:1px solid rgba(255,255,255,.18)}
.cta-band p{color:#dbe6fb;font-size:17px}
.cta-btns{display:flex;gap:16px;position:relative;z-index:1}

/* contact */
.contact{padding-top:110px}
.contact-grid{display:grid;grid-template-columns:1.05fr 1.35fr .95fr;gap:34px;align-items:start;position:relative;z-index:2}
.contact h2{font-size:clamp(36px,3.8vw,52px);line-height:1.06;letter-spacing:-1.2px;margin:20px 0}
.contact .lead{font-size:18.5px}
.perks{list-style:none;margin-top:30px;display:grid;gap:20px}
.perks li{display:flex;gap:18px;align-items:center}
.perks b{display:block;font-size:19px}.perks span{color:#cbd8f0;font-size:15px}
.contact-desk{margin-top:30px;border-radius:18px;-webkit-mask:linear-gradient(90deg,#000 70%,transparent);mask:linear-gradient(90deg,#000 70%,transparent);opacity:.95}
.form-card{background:rgba(255,255,255,.96);color:var(--ink);border-radius:26px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.4)}
.form-card h3{display:flex;align-items:center;gap:10px;font-size:24px;margin-bottom:22px;letter-spacing:-.5px;flex-wrap:wrap}
.form-card h3 .sl{color:#9aa8c2;font-weight:400}
.hp{position:absolute;left:-9999px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{position:relative;display:block;margin-bottom:14px}
.f2 .fld{margin:0}
.f2{margin-bottom:14px}
.fld>.ic{position:absolute;left:16px;top:17px;color:#4b6ef0;width:21px;height:21px;pointer-events:none}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid #d6e0ee;border-radius:12px;padding:22px 16px 8px 50px;outline:none;transition:border .2s,box-shadow .2s;appearance:none}
.fld textarea{resize:vertical;min-height:120px;padding-top:26px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(59,156,246,.15)}
.fld>span{position:absolute;left:51px;top:16px;color:#2c3a58;font-size:16px;pointer-events:none;transition:.18s}
.fld>span i,.consent i{color:#e11d48;font-style:normal}
.fld input:focus+span,.fld input:not(:placeholder-shown)+span,.fld textarea:focus+span,.fld textarea:not(:placeholder-shown)+span,.fld select:focus+span,.fld select.filled+span{top:6px;font-size:12px;color:#5b6b8c}
.fld .chev{position:absolute;right:16px;top:18px;left:auto;color:#334366;width:18px;height:18px;pointer-events:none}
.count{position:absolute;right:14px;bottom:10px;font-size:12.5px;color:#7a88a5}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:#334366;margin:4px 0 18px;cursor:pointer}
.consent input{width:22px;height:22px;accent-color:var(--blue);flex:none;margin-top:1px}
.consent a{color:var(--blue);text-decoration:underline}
.form-status{margin-top:12px;font-size:15px;font-weight:600;min-height:1em}
.form-status.error{color:#dc2626}.form-status.success{color:#059669}
.fld.invalid input,.fld.invalid select,.fld.invalid textarea{border-color:#ef4444}
.contact-card{background:linear-gradient(160deg,#0f2a5c,#0a1a3d);border:1px solid rgba(96,165,250,.3);border-radius:24px;padding:30px 26px;box-shadow:0 30px 70px rgba(0,0,0,.35);position:relative;overflow:hidden}
.contact-card::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-20px;height:120px;background:radial-gradient(50% 80% at 70% 100%,rgba(59,130,246,.55),transparent),repeating-linear-gradient(100deg,rgba(96,165,250,.4) 0 2px,transparent 2px 11px);-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000);opacity:.6}
.contact-card h3{font-size:27px;padding-bottom:16px;margin-bottom:20px;position:relative}
.contact-card h3::after{content:"";position:absolute;left:0;right:20%;bottom:0;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}
.ci{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;position:relative;z-index:1}
.ci b{display:block;font-size:19px}.ci span{font-size:14.5px;color:#cbd8f0;line-height:1.4;display:block}
a.ci:hover b{color:var(--cyan)}
.site-footer{position:relative;margin-top:70px;padding-top:70px}
.foot-waves{bottom:auto;top:0;height:140px}
.foot-in{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;position:relative;z-index:2;padding-bottom:30px}
.foot-feats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.foot-feats li{display:flex;flex-direction:column;align-items:center;gap:12px;font-weight:700;font-size:17px;border-left:1px solid rgba(255,255,255,.15);text-align:center}
.foot-feats li:first-child{border-left:0}
.foot-brand{display:flex;align-items:center;gap:18px;padding-left:40px;border-left:1px solid rgba(255,255,255,.15)}
.logo-k.big{width:84px;height:84px}
.foot-brand b{font-size:40px;line-height:1;display:block}.foot-brand span{color:#cfdcf5;font-size:16px}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);padding:20px 28px 26px;font-size:14px;color:#9fb0d0;position:relative;z-index:2}
.foot-bottom a:hover{color:var(--cyan)}

/* modal */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,9,24,.72);backdrop-filter:blur(6px);animation:fade .2s}
.modal-dialog{position:relative;width:min(940px,100%);max-height:calc(100vh - 48px);overflow:auto;background:linear-gradient(180deg,#f3f8ff,#eaf3fd);border-radius:24px;box-shadow:0 40px 120px rgba(0,0,0,.5);animation:pop .25s ease-out}
@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}}
.modal-close{position:absolute;right:18px;top:18px;z-index:3;width:46px;height:46px;border-radius:50%;background:#0b1633;color:#fff;font-size:26px;line-height:1;box-shadow:0 0 0 3px var(--cyan),0 0 22px rgba(34,211,238,.6);transition:.2s}
.modal-close:hover{transform:rotate(90deg)}
.m-hero{position:relative;height:230px;overflow:hidden;background:#071330}
.m-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.m-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,13,31,.96) 0%,rgba(5,13,31,.75) 50%,rgba(5,13,31,.2))}
.m-hero-txt{position:relative;z-index:2;padding:40px 44px;color:#fff;max-width:720px}
.m-hero .eyebrow{color:var(--cyan);font-size:13px;letter-spacing:3px}
.m-hero .eyebrow::before,.m-hero .eyebrow::after{display:none}
.m-hero h2{font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.8px;margin:10px 0}
.m-hero p{color:#cfdcf5;font-weight:600}
.m-body{padding:30px 44px 36px}
.m-intro{font-size:18px;color:#2d3b5a;margin-bottom:24px}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.m-box{background:#fff;border:1px solid #dbe7f5;border-radius:18px;padding:20px 22px;box-shadow:0 8px 24px rgba(20,60,130,.06)}
.m-box.wide{grid-column:1/-1}
.m-box.ai{background:linear-gradient(135deg,#f6f1ff,#eef6ff);border-color:#d9ccfb}
.m-box h4{color:#0e8fb1;font-size:16px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.m-box.ai h4{color:#7c3aed}
.m-box p,.m-box li{font-size:15px;color:#22304f}
.m-box ul{padding-left:20px;display:grid;gap:6px}
.m-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:24px;flex-wrap:wrap}
.btn-ghost{border:2px solid #c9d8ee;color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.video-dialog{position:relative;width:min(1100px,100%);animation:pop .25s ease-out}
.video-dialog video{width:100%;border-radius:18px;background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(34,211,238,.3);display:block}
.video-dialog .modal-close{right:-14px;top:-14px}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* responsive */
@media (max-width:1400px){.logo small{display:none}}
.contact .kicker{letter-spacing:2.5px;font-size:14px}
@media (max-width:1200px){
 .main-nav>a,.dd-btn{padding:10px 8px;font-size:14.5px}
 .logo{padding-right:16px}.header-in{gap:14px}
 .sol-grid,.ref-grid{grid-template-columns:repeat(2,1fr)}
 .sol-desc{min-height:0}
 .ai-band{grid-template-columns:1fr}.ai-band-title{border:0;padding:0}
 .why-grid{grid-template-columns:1fr}.why-side{position:relative;top:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:0}
 .why-side img{grid-column:2;grid-row:1/3;margin:0 -30px 0 0;width:calc(100% + 30px);align-self:end}
 .contact-grid{grid-template-columns:1fr 1fr}.contact-intro{grid-column:1/-1}.contact-desk{display:none}
 .cta-band{grid-template-columns:auto 1fr}.cta-band p{grid-column:1/-1}.cta-btns{grid-column:1/-1}
 .results-row{grid-template-columns:1fr}
}
@media (max-width:1020px){
 .main-nav,.head-cta{display:none}
 .menu-toggle{display:flex}
 .main-nav.open{display:flex;position:fixed;inset:84px 0 0;background:rgba(5,13,31,.98);flex-direction:column;align-items:stretch;padding:20px 24px;gap:4px;overflow:auto}
 .main-nav.open>a,.main-nav.open .dd-btn{font-size:19px;padding:14px 8px}
 .main-nav.open>a.active::after{display:none}
 .main-nav.open .dd-menu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:0 0 0 12px}
 .site-header{background:rgba(5,13,31,.88);backdrop-filter:blur(12px)}
 .hero-in{grid-template-columns:1fr;min-height:0;padding-top:30px}
 .hero-visual{margin:0 -20px}
 .waves{bottom:200px}
 .feature-strip{grid-template-columns:repeat(3,1fr);row-gap:24px}
 .feature-strip li:nth-child(4){border-left:0}
 .ai-grid{grid-template-columns:1fr}
 #ai .steps-card{grid-template-columns:1fr}
 .integr{grid-template-columns:1fr}.integr h3{border:0}
 .integr ul{grid-template-columns:repeat(4,1fr);row-gap:24px}
 .integr li:nth-child(5){border-left:0}
 .stats{grid-template-columns:1fr;gap:20px}
 .why-cards{grid-template-columns:1fr 1fr}
 .foot-in{grid-template-columns:1fr}.foot-brand{border:0;padding:0;justify-content:center}
}
@media (max-width:700px){
 .wrap{padding:0 18px}
 .logo small{display:none}.logo{border:0}
 .sec{padding:70px 0}
 .lead{font-size:17.5px}
 .hero-btns .btn{width:100%}
 .feature-strip{grid-template-columns:1fr 1fr}
 .feature-strip li{border:0!important;justify-content:flex-start;font-size:15px}
 .feature-strip .ic.xl{width:34px;height:34px}
 .sol-grid,.ref-grid,.why-cards{grid-template-columns:1fr}
 .ai-band{padding:24px 20px}.ai-chip{width:80px;height:80px}.ai-chip .ic{width:50px;height:50px}.ai-band h3{font-size:25px}
 .ai-band-list{grid-template-columns:1fr 1fr;row-gap:22px}.ai-band-list li{border:0!important}
 .custom-strip{padding:20px}.cs-title{border:0;padding:0;font-size:19px}.custom-strip ul{flex-direction:column}
 .steps{grid-template-columns:1fr;gap:18px}.steps li:not(:last-child)::after{display:none}
 .steps li{display:grid;grid-template-columns:48px 1fr;text-align:left;align-items:center;column-gap:14px}
 .steps li .ic{grid-row:1/3}.steps b{margin:0}
 .integr ul,.stats ul{grid-template-columns:1fr 1fr;row-gap:22px}.integr li,.stats li{border:0!important}
 .why-side{grid-template-columns:1fr}.why-side img{grid-column:1;grid-row:auto;margin:0 -30px;width:calc(100% + 60px)}
 .why-claim{font-size:28px}
 .wc{padding:18px}
 .cta-band{grid-template-columns:1fr;padding:26px 22px}.cta-band h3{border:0;padding:0;font-size:25px}.cta-btns{flex-direction:column}
 .contact-grid{grid-template-columns:1fr}
 .f2{grid-template-columns:1fr}
 .form-card{padding:22px 18px}.form-card h3{font-size:22px}
 .foot-feats{grid-template-columns:1fr 1fr;row-gap:24px}.foot-feats li{border:0!important;font-size:15px}
 .foot-bottom{flex-direction:column;gap:8px;align-items:center}
 .m-hero{height:200px}.m-hero-txt{padding:28px 22px}.m-body{padding:22px}.m-grid{grid-template-columns:1fr}
 .modal{padding:10px}.modal-close{right:12px;top:12px}
 .video-dialog .modal-close{right:4px;top:-54px}
 .quote blockquote,.quote figcaption{margin-left:50px}
 .sol-desc{margin-left:0}
}

.sec-head h2 .grad-l{white-space:nowrap}
@media (max-width:700px){.sec-head h2 .grad-l{white-space:normal}}

/* ---- mobil kiegészítések ---- */
.m-sol-grid{display:grid;grid-template-columns:1fr;gap:16px;justify-items:center}
.m-card{display:block;width:100%;max-width:460px;padding:0;border:0;background:none;cursor:pointer;border-radius:22px;transition:transform .2s}
.m-card img{width:100%;height:auto;display:block}
.m-card:active{transform:scale(.98)}
.ai-visual{cursor:default}
.form-card{position:relative}
.m-success{position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,#fff,#f1f7ff);border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.m-success[hidden]{display:none}
.ms-icon{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#10b981);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 12px rgba(16,185,129,.12),0 12px 30px rgba(16,185,129,.35)}
.ms-icon svg{width:46px;height:46px}
.m-success h3{display:block;font-size:23px;margin:24px 0 8px;color:#0b1633}
.m-success p{color:#334366;font-size:16px;max-width:320px}
.ms-close{margin-top:22px;font-weight:700;font-size:16px;color:#0b6fc2;background:#e2f3fd;border-radius:10px;padding:12px 26px}
.ms-close:hover{background:#2563eb;color:#fff}
@media (max-width:900px){
 .hero-in{grid-template-columns:1fr;min-height:0;padding-top:30px}
 .hero-visual{margin:0 -20px}
 .main-nav,.head-cta{display:none}
 .menu-toggle{display:flex}
 .site-header{background:rgba(5,13,31,.92);backdrop-filter:blur(12px)}
}
@media (max-width:600px){
 .hero h1{font-size:34px;letter-spacing:-1px}
 .kicker{letter-spacing:2px;font-size:12.5px}
 .kicker::after{width:36px}
 .ai-band{padding:22px 16px}
 .ai-band h3{font-size:22px}
 .ai-band-list li{font-size:13.5px;overflow-wrap:anywhere;padding:0 4px}
 .steps-title,.integr h3,.stats h3,.cta-band h3{font-size:22px}
 .ai-points h3{font-size:25px}
 .sec-head h2{font-size:26px}
 .eyebrow{font-size:14px;gap:12px}.eyebrow::before,.eyebrow::after{width:30px}
}
body.menu-open .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#050d1f}
.site-header.scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,13,31,.97)}
@media (max-width:900px){.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(5,13,31,.97)}.main-nav.open{z-index:60}}
@media (max-width:900px){.main-nav.open{background:#050d1f}}
/* ---- telefon: kilógások javítása (valódi Manrope betűvel mérve) ---- */
@media (max-width:900px){
 html,body{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .mob{overflow-x:hidden}
 .hero-in,.ai-grid,.why-grid,.contact-grid,.integr,.stats,.cta-band,#ai .steps-card{grid-template-columns:minmax(0,1fr)!important}
 .hero-in>*,.why-main,.why-side{min-width:0}
 .hero-visual{margin:0 -8px}
}
@media (max-width:600px){
 .hero h1{font-size:min(34px,7.4vw);letter-spacing:-.6px}
 .lead{font-size:16.5px}
 .kicker{flex-wrap:wrap;font-size:12px;letter-spacing:1.6px;gap:10px}
 .kicker::after{display:none}
 .feature-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}
 .feature-strip li{flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:14.5px}
 .feature-strip li:last-child{grid-column:1/-1}
 .ai-band-title{flex-direction:column;align-items:flex-start;gap:14px}
 .ai-chip{width:72px;height:72px;border-radius:18px}.ai-chip .ic{width:44px;height:44px}
 .ai-band h3{font-size:min(24px,6.2vw)}
 .ai-band-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sec-head h2{font-size:min(28px,7vw)}
 .why-claim{font-size:min(30px,7.6vw)}
 .contact h2{font-size:min(40px,10vw)}
 .steps-card{padding:22px 18px}
 .steps li{grid-template-columns:40px minmax(0,1fr)}
 .steps li .ic.xl{width:34px;height:34px}
 .steps b{font-size:16px}.steps span{font-size:14px}
 .wc{gap:14px}.wc b{font-size:17.5px}.wc p{font-size:14.5px}
 .sq.lg{width:52px;height:52px}.sq.lg .ic{width:28px;height:28px}
 .integr ul,.stats ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 .form-card h3{font-size:21px}
 .foot-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .foot-brand b{font-size:32px}.logo-k.big{width:64px;height:64px}
}

/* referencia kártya – képszámláló */
.ref-img{position:relative}
.ref-count{position:absolute;right:10px;bottom:10px;background:rgba(5,13,31,.8);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;box-shadow:0 0 0 1px rgba(34,211,238,.6)}
.ref-img img{object-position:left top}
.ref-head small{display:block}

/* ingyenes ajánlat – mobil nyitókép */
.hero-offer-m{display:flex;align-items:flex-start;gap:10px;margin-top:18px;padding:12px 14px;border-radius:14px;background:rgba(5,16,40,.7);border:1px solid rgba(34,211,238,.45);color:#e6f3ff;font-size:15px;font-weight:600;line-height:1.4}
.hero-offer-m b{color:#22d3ee;font-weight:800}
.hero-offer-m .ho-ic{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#22d3ee,#2ee6f5);color:#03132a;display:inline-flex;align-items:center;justify-content:center;flex:none}
.hero-offer-m .ho-ic .ic{width:14px;height:14px;stroke-width:3}
.hero-offer-m small{display:block;margin-top:6px;font-size:13.5px;font-weight:500;color:#b9cbe6;line-height:1.45}
.ref-body .fict{font-size:13px;color:#6b7ea3;font-style:italic;margin-top:6px}
.mfacts{display:flex;flex-direction:column;gap:10px}
.mfacts .dfk{font-size:12px;font-weight:800;letter-spacing:3px;color:#1aa7e8;text-transform:uppercase}
.mfacts ul{list-style:none;display:grid;gap:10px}
.mfacts li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:#2d3b5a;line-height:1.4}
.mfacts li b{color:#0b1633}
.mfacts .ic{width:20px;height:20px;color:#1f8ef1;flex:none;margin-top:2px}
.vcount-m{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;font-weight:600;color:#cfe6fb}
.vcount-m .vc-dot{width:8px;height:8px;border-radius:50%;background:#22d3ee;box-shadow:0 0 10px #22d3ee;flex:none}
.vcount-m .vc-since{color:#8fb3d9;font-weight:500}
.foot-brand .vcount-m b{font-size:inherit;display:inline;line-height:inherit;letter-spacing:0}