/* ========================================================= v31 — cleaner corporate layout inspired by large B2B sites ========================================================= */ /* ---------- shared header ---------- */
.v31-header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border-bottom:1px solid #e6ecef;
}
.v31-head{ width:min(1440px,calc(100% - 44px)); margin:auto; height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.v31-brand{ display:flex; align-items:center; gap:11px; min-width:max-content;
}
.v31-brand-mark{ width:18px;height:18px;border-radius:50%; background:linear-gradient(135deg,#55e28c,#0baec7); box-shadow:inset -5px -5px 0 rgba(4,32,46,.28);
}
.v31-brand-name{ font-size:18px;font-weight:950;letter-spacing:-.04em;color:#10202a;
}
.v31-brand-sub{ display:block;margin-top:2px; font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#8b9aa2;
}
.v31-nav{ display:flex;align-items:center;gap:3px;
}
.v31-nav>a,.v31-drop>button{ border:0;background:transparent; padding:10px 12px;border-radius:10px; color:#435761;font-size:13px;font-weight:760; cursor:pointer;
}
.v31-nav>a:hover,.v31-drop:hover>button{ background:#f2f5f6;color:#0e2632;
}
.v31-drop{position:relative}
.v31-mega{ position:absolute;top:48px;left:-170px; width:820px; display:none; grid-template-columns:1fr 1fr 260px; gap:18px; padding:18px; border:1px solid #dde7ea; border-radius:22px; background:#fff; box-shadow:0 28px 70px rgba(10,31,40,.15);
}
.v31-drop:hover .v31-mega,
.v31-drop:focus-within .v31-mega{display:grid}
.v31-mega h4{ margin:0 0 9px; color:#91a0a7; font-size:10px; text-transform:uppercase; letter-spacing:.12em;
}
.v31-mega-links{display:grid;gap:4px}
.v31-mega-links a{ padding:9px 10px;border-radius:12px;
}
.v31-mega-links a:hover{background:#f3f7f8}
.v31-mega-links b{ display:block;font-size:13px;color:#142832;line-height:1.2
}
.v31-mega-links span{ display:block;margin-top:2px; color:#819198;font-size:10px;line-height:1.35
}
.v31-mega-side{ padding:12px; border-radius:17px; background:#f2f6f7;
}
.v31-mega-side img{ width:100%;height:128px;object-fit:cover;border-radius:12px
}
.v31-mega-side h3{ margin:13px 0 5px;font-size:18px;letter-spacing:-.03em
}
.v31-mega-side p{ margin:0;color:#6f8088;font-size:12px;line-height:1.45
}
.v31-mega-side a{ display:inline-flex;margin-top:12px; font-size:12px;font-weight:900;color:#114659
}
.v31-head-actions{ display:flex;align-items:center;gap:14px;min-width:max-content
}
.v31-phone{ font-size:14px;font-weight:900;color:#122936
}
.v31-top-cta{ padding:13px 18px;border-radius:11px; background:#0b2539;color:#fff; font-size:13px;font-weight:900
}
.v31-mobile{display:none} /* ---------- utility ---------- */
.home31{ --h31-navy:#0b2030; --h31-text:#0c1b24; --h31-muted:#71828a; --h31-line:#dce6e9; --h31-green:#51e28c; --h31-cyan:#12cde3;
}
.home31 .h31-container{ width:min(1380px,calc(100% - 64px));margin:auto
}
.home31 .h31-kicker{ font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:#91a0a7;font-weight:850;margin-bottom:10px
}
.home31 .h31-title{ margin:0; font-size:clamp(38px,4.4vw,62px); line-height:.99; letter-spacing:-.055em; color:var(--h31-text)
}
.home31 .h31-lead{ margin:14px 0 0; max-width:780px; color:var(--h31-muted); font-size:17px;line-height:1.55
}
.home31 .h31-section{padding:72px 0}
.home31 .h31-toprow{ display:flex;justify-content:space-between;align-items:flex-end;gap:24px
}
.home31 .h31-all{ flex:0 0 auto; font-size:13px;font-weight:900;color:#174b61
} /* ---------- full-width hero ---------- */
.home31 .h31-hero{ position:relative; min-height:650px; width:100%; overflow:hidden; background:#0c2130;
}
.home31 .h31-hero>img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center; filter:brightness(.69)
}
.home31 .h31-hero:after{ content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(7,25,39,.92) 0%,rgba(7,25,39,.77) 38%,rgba(7,25,39,.22) 72%,rgba(7,25,39,.10) 100%), linear-gradient(0deg,rgba(5,21,31,.45),transparent 42%)
}
.home31 .h31-hero-inner{ position:relative;z-index:2; min-height:650px; display:flex;flex-direction:column;justify-content:center
}
.home31 .h31-hero-copy{ max-width:760px; padding:52px 0 120px
}
.home31 .h31-hero-badge{ display:inline-flex; padding:9px 13px; border:1px solid rgba(255,255,255,.26); border-radius:999px; color:rgba(255,255,255,.87); font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase
}
.home31 .h31-hero h1{ margin:18px 0 18px; max-width:820px; color:#fff; font-size:clamp(54px,6.5vw,94px); line-height:.91; letter-spacing:-.065em
}
.home31 .h31-hero-rotate{ color:#75e6bb; display:inline-block; border-bottom:3px solid rgba(117,230,187,.55); transition:opacity .2s ease,transform .2s ease
}
.home31 .h31-hero p{ max-width:700px; margin:0; color:rgba(255,255,255,.81); font-size:19px;line-height:1.52
}
.home31 .h31-buttons{ display:flex;gap:12px;flex-wrap:wrap;margin-top:27px
}
.home31 .h31-btn{ display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0 22px;border-radius:12px; font-size:14px;font-weight:900
}
.home31 .h31-btn-main{ background:linear-gradient(135deg,#14cedf,#55e28c); color:#06313b
}
.home31 .h31-btn-ghost{ border:1px solid rgba(255,255,255,.3); color:#fff;background:rgba(255,255,255,.05)
}
.home31 .h31-techline{ margin-top:22px; color:rgba(255,255,255,.62); font-size:12px;font-weight:750;letter-spacing:.02em
}
.home31 .h31-hero-proof{ position:absolute;z-index:3; left:0;right:0;bottom:0; border-top:1px solid rgba(255,255,255,.14); background:rgba(5,23,34,.48); backdrop-filter:blur(11px)
}
.home31 .h31-proof-inner{ width:min(1380px,calc(100% - 64px));margin:auto; display:grid;grid-template-columns:repeat(4,1fr)
}
.home31 .h31-proof{ min-height:92px; padding:20px 24px; display:flex;gap:12px;align-items:center; border-right:1px solid rgba(255,255,255,.12)
}
.home31 .h31-proof:first-child{padding-left:0}
.home31 .h31-proof:last-child{border-right:0}
.home31 .h31-proof-icon{ width:38px;height:38px;border-radius:50%; display:grid;place-items:center;flex:0 0 38px; border:1px solid rgba(255,255,255,.25); color:#7ae2bd;font-weight:900;font-size:12px
}
.home31 .h31-proof b{ display:block;color:#fff;font-size:13px;line-height:1.25
}
.home31 .h31-proof span{ display:block;margin-top:3px; color:rgba(255,255,255,.57); font-size:10px;line-height:1.3
} /* ---------- four steps ---------- */
.home31 .h31-steps{ display:grid;grid-template-columns:repeat(4,1fr); margin-top:42px
}
.home31 .h31-step{ position:relative;text-align:center;padding:0 24px
}
.home31 .h31-step:not(:last-child):after{ content:""; position:absolute;top:31px;left:calc(50% + 44px);right:calc(-50% + 44px); border-top:1px dashed #b9c7cc
}
.home31 .h31-step-no{ position:relative;z-index:2; width:64px;height:64px;margin:0 auto 17px; display:grid;place-items:center; border:2px solid #c7d1d6;border-right-color:#1ed1d0; border-radius:50%; background:#fff; font-size:24px;color:#23343c
}
.home31 .h31-step h3{ margin:0 0 7px;font-size:18px;letter-spacing:-.025em
}
.home31 .h31-step p{ margin:0;color:#75858d;font-size:12px;line-height:1.5
} /* ---------- three large solution cards ---------- */
.home31 .h31-solutions{ display:grid;grid-template-columns:repeat(3,1fr); gap:16px;margin-top:28px
}
.home31 .h31-solution{ position:relative;overflow:hidden; min-height:350px;border-radius:26px; border:1px solid #e0e8eb; background:#fff
}
.home31 .h31-solution:nth-child(1){background:#edf7fb}
.home31 .h31-solution:nth-child(2){background:#f5f4ff}
.home31 .h31-solution:nth-child(3){background:#eff9f4}
.home31 .h31-solution-copy{padding:27px;max-width:75%}
.home31 .h31-solution-tag{ font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7f9098;font-weight:900
}
.home31 .h31-solution h3{ margin:10px 0 9px;font-size:29px;line-height:1.04;letter-spacing:-.045em
}
.home31 .h31-solution p{ margin:0;color:#667881;font-size:14px;line-height:1.5
}
.home31 .h31-solution a{ display:inline-flex;margin-top:18px; font-size:13px;font-weight:900;color:#173f52
}
.home31 .h31-solution-img{ position:absolute;right:-14px;bottom:-12px; width:48%;height:54%;object-fit:cover; border-radius:24px 0 0 0; box-shadow:-10px -10px 32px rgba(18,42,54,.08)
} /* ---------- industry carousel ---------- */
.home31 .h31-carousel-wrap{position:relative;margin-top:27px}
.home31 .h31-carousel{ display:flex;gap:15px;overflow-x:auto; scroll-behavior:smooth;scroll-snap-type:x mandatory; padding:2px 2px 12px; scrollbar-width:none
}
.home31 .h31-carousel::-webkit-scrollbar{display:none}
.home31 .h31-industry{ flex:0 0 300px; scroll-snap-align:start; overflow:hidden; border:1px solid #dfe7ea; border-radius:22px; background:#fff
}
.home31 .h31-industry-img{ height:185px;overflow:hidden;margin:12px;border-radius:16px
}
.home31 .h31-industry-img img{width:100%;height:100%;object-fit:cover}
.home31 .h31-industry-copy{padding:7px 18px 20px}
.home31 .h31-industry h3{ margin:0 0 7px;font-size:20px;letter-spacing:-.03em
}
.home31 .h31-industry p{ margin:0;min-height:38px;color:#7a8990;font-size:12px;line-height:1.45
}
.home31 .h31-industry a{ display:flex;justify-content:space-between;align-items:center; margin-top:20px; font-size:12px;font-weight:900;color:#223d49
}
.home31 .h31-arrow{ width:34px;height:34px;border-radius:50%; display:grid;place-items:center; background:#f2f5f6;font-size:17px
}
.home31 .h31-carousel-controls{ display:flex;gap:8px
}
.home31 .h31-carousel-btn{ width:42px;height:42px;border:1px solid #dbe5e8; border-radius:50%;background:#fff;cursor:pointer; font-size:18px;color:#27404a
} /* ---------- ecosystem ---------- */
.home31 .h31-eco{ display:grid;grid-template-columns:.9fr 1.1fr; gap:0; overflow:hidden; border-radius:30px; background:#0d2635; color:#fff
}
.home31 .h31-eco-copy{padding:42px}
.home31 .h31-eco .h31-kicker{color:#81a0ad}
.home31 .h31-eco h2{ margin:0;font-size:clamp(38px,4vw,58px); line-height:.99;letter-spacing:-.055em
}
.home31 .h31-eco-copy>p{ margin:16px 0 0; max-width:650px; color:rgba(255,255,255,.67); font-size:15px;line-height:1.55
}
.home31 .h31-eco-pills{ display:flex;flex-wrap:wrap;gap:8px;margin-top:22px
}
.home31 .h31-eco-pills a{ padding:9px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.78); font-size:11px;font-weight:850
}
.home31 .h31-eco-visual{ min-height:420px; display:flex;align-items:center;justify-content:center; padding:30px; background: radial-gradient(circle at 50% 50%,rgba(38,205,184,.20),transparent 36%), linear-gradient(135deg,#123449,#0b2231)
}
.home31 .h31-eco-flow{ width:100%; display:grid;grid-template-columns:1fr auto 1fr auto 1fr; gap:10px;align-items:center
}
.home31 .h31-eco-node{ min-height:150px;padding:17px; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; border-radius:20px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06)
}
.home31 .h31-eco-node b{font-size:16px}
.home31 .h31-eco-node span{ margin-top:6px;color:rgba(255,255,255,.58); font-size:10px;line-height:1.35
}
.home31 .h31-eco-arrow{color:#75e6bb;font-size:22px} /* ---------- product carousel + quick pick ---------- */
.home31 .h31-products{ display:flex;gap:14px;overflow-x:auto; scroll-behavior:smooth;scroll-snap-type:x mandatory; padding:2px 2px 12px;margin-top:26px;scrollbar-width:none
}
.home31 .h31-products::-webkit-scrollbar{display:none}
.home31 .h31-product{ flex:0 0 270px;scroll-snap-align:start; overflow:hidden;border:1px solid #dfe7ea;border-radius:21px;background:#fff
}
.home31 .h31-product-img{ height:182px;display:grid;place-items:center;background:#f4f7f8
}
.home31 .h31-product-img img{ width:70%;height:70%;object-fit:contain;mix-blend-mode:multiply
}
.home31 .h31-product-copy{padding:17px}
.home31 .h31-product-copy small{ color:#8b9aa1;font-size:9px;text-transform:uppercase;letter-spacing:.1em;font-weight:900
}
.home31 .h31-product-copy h3{margin:7px 0 5px;font-size:18px}
.home31 .h31-product-copy p{margin:0;color:#73848c;font-size:11px;line-height:1.45}
.home31 .h31-pick{ margin-top:22px; display:grid;grid-template-columns:1fr auto; gap:18px;align-items:center; padding:24px 26px; border:1px solid #dfe7ea;border-radius:22px;background:#fff
}
.home31 .h31-pick h3{margin:0 0 4px;font-size:24px;letter-spacing:-.035em}
.home31 .h31-pick p{margin:0;color:#74858d;font-size:12px}
.home31 .h31-pick-controls{ display:flex;gap:8px;align-items:center
}
.home31 .h31-pick select{ height:42px;padding:0 12px;border:1px solid #dbe5e8;border-radius:11px;background:#fff
}
.home31 .h31-pick button{ height:42px;padding:0 16px;border:0;border-radius:11px; background:linear-gradient(135deg,#14cedf,#55e28c); font-weight:900;color:#06313b;cursor:pointer
}
.home31 .h31-pick-result{ display:none;grid-column:1/-1; padding:14px;border-radius:13px;background:#eef8f4; color:#49665b;font-size:12px;line-height:1.45
}
.home31 .h31-pick-result b{color:#19372e} /* ---------- FAQ + form ---------- */
.home31 .h31-contact{ display:grid;grid-template-columns:1.05fr .95fr; gap:22px
}
.home31 .h31-faq{ display:grid;gap:9px;margin-top:24px
}
.home31 .h31-faq-item{ overflow:hidden; border:1px solid #dfe7ea;border-radius:16px;background:#fff
}
.home31 .h31-faq-q{ width:100%;padding:17px 18px; border:0;background:transparent;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:15px; text-align:left;font-size:14px;font-weight:850
}
.home31 .h31-faq-a{ display:none;padding:0 18px 17px; color:#73848c;font-size:12px;line-height:1.55
}
.home31 .h31-faq-item.open .h31-faq-a{display:block}
.home31 .h31-form-card{ padding:30px;border-radius:26px;background:#0d2635;color:#fff
}
.home31 .h31-form-card h2{ margin:0;font-size:38px;line-height:1.02;letter-spacing:-.05em
}
.home31 .h31-form-card>p{ margin:12px 0 22px;color:rgba(255,255,255,.65); font-size:13px;line-height:1.5
} /* adapt existing protected form inside new card */
.home31 .h31-form-card .form{ background:transparent; border:0; padding:0
} /* footer spacing */
body:has(.home31) footer{margin-top:0} /* ---------- responsive ---------- */
@media(max-width:1180px){ .v31-nav{display:none} .v31-phone{display:none} .v31-mobile{display:block;position:relative} .v31-mobile summary{ list-style:none;cursor:pointer;padding:10px 12px;border-radius:10px;background:#f2f5f6;font-size:13px;font-weight:850 } .v31-mobile summary::-webkit-details-marker{display:none} .v31-mobile-menu{ position:absolute;right:0;top:46px;width:290px;padding:10px; border:1px solid #dfe7ea;border-radius:16px;background:#fff;box-shadow:0 18px 50px rgba(10,31,40,.14) } .v31-mobile-menu a{display:block;padding:10px;border-radius:10px;font-size:13px} .home31 .h31-solutions{grid-template-columns:1fr 1fr} .home31 .h31-solution:last-child{grid-column:1/-1} .home31 .h31-eco{grid-template-columns:1fr} .home31 .h31-contact{grid-template-columns:1fr}
}
@media(max-width:780px){ .v31-head{width:calc(100% - 22px);height:68px;gap:10px} .v31-brand-sub{display:none} .v31-brand-name{font-size:15px} .v31-top-cta{display:none} .home31 .h31-container, .home31 .h31-proof-inner{width:calc(100% - 24px)} .home31 .h31-section{padding:50px 0} .home31 .h31-hero,.home31 .h31-hero-inner{min-height:650px} .home31 .h31-hero-copy{padding:42px 0 195px} .home31 .h31-hero h1{font-size:49px} .home31 .h31-hero p{font-size:16px} .home31 .h31-proof-inner{grid-template-columns:1fr 1fr} .home31 .h31-proof{min-height:82px;padding:14px;border-bottom:1px solid rgba(255,255,255,.1)} .home31 .h31-proof:nth-child(odd){padding-left:0} .home31 .h31-steps{grid-template-columns:1fr 1fr;gap:28px 0} .home31 .h31-step:not(:last-child):after{display:none} .home31 .h31-solutions{grid-template-columns:1fr} .home31 .h31-solution:last-child{grid-column:auto} .home31 .h31-solution{min-height:310px} .home31 .h31-solution-copy{max-width:82%} .home31 .h31-industry{flex-basis:82%} .home31 .h31-eco-copy{padding:28px} .home31 .h31-eco-visual{min-height:360px;padding:20px} .home31 .h31-eco-flow{grid-template-columns:1fr} .home31 .h31-eco-arrow{transform:rotate(90deg);text-align:center} .home31 .h31-pick{grid-template-columns:1fr} .home31 .h31-pick-controls{flex-direction:column;align-items:stretch} .home31 .h31-pick select,.home31 .h31-pick button{width:100%}
}