@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --ink:#1a1930; --navy:#191831; --purple:#6959e8; --purple-light:#8c7cf6; --green:#5ed09a; --text:#29283b; --muted:#676579; --soft:#f5f4fa; --line:#e3e1ed; --white:#fff; --shadow:0 24px 70px rgba(26,25,48,.13); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--white); font-family:'DM Sans',sans-serif; line-height:1.65; }
a { color:inherit; }
img { max-width:100%; }
.shell { width:min(1160px,calc(100% - 40px)); margin-inline:auto; }
.skip { position:fixed; top:-100px; left:20px; z-index:100; padding:10px 16px; background:#fff; color:#111; }
.skip:focus { top:10px; }
.site-header { position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(25,24,49,.95); backdrop-filter:blur(14px); }
.nav-wrap { display:flex; min-height:76px; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:11px; color:#fff; text-decoration:none; }
.brand-symbol { display:grid; width:38px; height:38px; place-items:center; border-radius:11px; background:linear-gradient(145deg,var(--purple-light),var(--purple)); font-size:.8rem; font-weight:800; }
.brand strong,.brand small { display:block; line-height:1.2; }
.brand strong { font-family:'Manrope',sans-serif; font-size:1.05rem; }
.brand small { margin-top:3px; color:rgba(255,255,255,.5); font-size:.67rem; }
.navigation { display:flex; align-items:center; gap:16px; }
.navigation > a,.nav-dropdown > summary { color:rgba(255,255,255,.72); font-size:.88rem; font-weight:600; text-decoration:none; }
.navigation > a:hover,.nav-dropdown > summary:hover { color:#fff; }
.nav-dropdown { position:relative; }
.nav-dropdown > summary { display:flex; align-items:center; gap:5px; cursor:pointer; list-style:none; }
.nav-dropdown > summary::-webkit-details-marker { display:none; }
.nav-dropdown > summary span { color:var(--green); font-size:.82rem; transition:transform .2s ease; }
.nav-dropdown[open] > summary span { transform:rotate(180deg); }
.nav-menu { position:absolute; top:calc(100% + 20px); left:-18px; display:grid; width:max-content; min-width:260px; max-width:370px; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#211f40; box-shadow:0 22px 55px rgba(0,0,0,.32); }
.nav-menu::before { position:absolute; top:-20px; right:0; left:0; height:20px; content:''; }
.nav-menu a { padding:10px 12px; border-radius:6px; color:rgba(255,255,255,.75); font-size:.8rem; line-height:1.35; text-decoration:none; }
.nav-menu a:hover,.nav-menu a.is-active { color:#fff; background:rgba(255,255,255,.08); }
.nav-menu a.is-active { box-shadow:inset 3px 0 var(--green); }
.language-switch { display:flex; align-items:center; gap:4px; color:rgba(255,255,255,.38); font-size:.72rem; font-weight:700; }
.language-switch a { color:rgba(255,255,255,.58); text-decoration:none; }
.language-switch a:hover,.language-switch a.is-current { color:var(--green); }
.navigation > a.is-active:not(.button),.nav-dropdown > summary.is-active { position:relative; color:#fff; }
.navigation > a.is-active:not(.button)::after,.nav-dropdown > summary.is-active::after { position:absolute; right:0; bottom:-10px; left:0; height:2px; border-radius:2px; background:var(--green); content:''; }
.menu-button { display:none; border:1px solid rgba(255,255,255,.25); border-radius:7px; padding:8px 12px; color:#fff; background:transparent; }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; border:0; border-radius:8px; padding:0 23px; color:#fff; background:var(--purple); box-shadow:0 9px 26px rgba(105,89,232,.28); font-weight:700; text-decoration:none; transition:.2s ease; }
.button:hover { background:#5949d8; transform:translateY(-2px); }
.button-small { min-height:40px; padding-inline:17px; color:#fff!important; }
.hero { overflow:hidden; padding:clamp(75px,9vw,130px) 0 95px; background:radial-gradient(circle at 83% 30%,rgba(105,89,232,.23),transparent 28%),linear-gradient(145deg,#191831,#222042); color:#fff; }
.hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:clamp(45px,7vw,90px); }
.kicker { margin:0 0 15px; color:var(--purple); font-size:.74rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero .kicker,.section-dark .kicker,.contact .kicker { color:var(--green); }
h1,h2,h3 { margin-top:0; color:var(--ink); font-family:'Manrope',sans-serif; line-height:1.14; letter-spacing:-.035em; }
h1 { margin-bottom:25px; color:#fff; font-size:clamp(2.7rem,5.2vw,5rem); }
h2 { margin-bottom:19px; font-size:clamp(2rem,3.7vw,3.35rem); }
h3 { margin-bottom:12px; font-size:1.25rem; }
p { margin:0 0 18px; }
.lead { color:rgba(255,255,255,.72); font-size:clamp(1.05rem,1.8vw,1.27rem); }
.actions { display:flex; align-items:center; gap:25px; margin:32px 0; }
.text-link { color:#fff; font-weight:700; text-decoration:none; }
.text-link span { color:var(--green); }
.proof { display:flex; flex-wrap:wrap; gap:10px 24px; margin:0; padding:0; list-style:none; color:rgba(255,255,255,.57); font-size:.78rem; }
.proof li::before { content:'✓'; margin-right:7px; color:var(--green); font-weight:900; }
.hero-product { margin:0; padding:12px; border:1px solid rgba(255,255,255,.16); border-radius:17px; background:#111026; box-shadow:0 45px 95px rgba(0,0,0,.4); transform:perspective(900px) rotateY(-3deg) rotateX(1deg); }
.hero-product img { display:block; width:100%; height:auto; border-radius:9px; }
.hero-product:focus-visible,.product-shot:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
.hero-product.js-product-view,.product-shot.js-product-view { cursor:zoom-in; }
.shot-action { margin:8px 4px 0; color:rgba(255,255,255,.48); font-size:.7rem; }
.window-bar { display:flex; align-items:center; gap:6px; min-height:29px; padding:0 4px 9px; color:rgba(255,255,255,.38); font-size:.68rem; }
.window-bar i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.27); }
.window-bar span { margin-left:7px; }
.trust-strip { border-bottom:1px solid var(--line); background:#fff; }
.trust-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.trust-grid p { margin:0; padding:24px 18px; border-right:1px solid var(--line); }
.trust-grid p:first-child { border-left:1px solid var(--line); }
.trust-grid strong,.trust-grid span { display:block; }
.trust-grid strong { color:var(--ink); font-family:'Manrope'; font-size:.9rem; }
.trust-grid span { color:var(--muted); font-size:.76rem; }
.section { padding:clamp(75px,9vw,125px) 0; }
.section-soft { background:var(--soft); }
.section-head { max-width:780px; margin-bottom:48px; }
.section-head > p:last-child,.split-head > p,.faq-layout > div:first-child > p:last-child { color:var(--muted); font-size:1.08rem; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.feature-grid article { min-height:240px; padding:31px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.feature-grid article > span { display:block; margin-bottom:42px; color:var(--purple); font-size:.72rem; font-weight:800; }
.feature-grid p { color:var(--muted); font-size:.9rem; }
.section-dark { background:var(--navy); color:#fff; }
.section-dark h2 { color:#fff; }
.product-proof-head { margin-bottom:65px; }
.product-proof-head > p:last-child { color:rgba(255,255,255,.65); }
.story-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:65px 70px; align-items:center; }
.story-copy p:last-child { color:rgba(255,255,255,.65); font-size:1.03rem; }
.product-shot { margin:0; padding:10px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:#0f0e23; box-shadow:0 25px 65px rgba(0,0,0,.28); }
.product-shot img { display:block; width:100%; height:auto; border-radius:7px; }
.product-shot figcaption { padding:11px 6px 2px; color:rgba(255,255,255,.45); font-size:.72rem; }
.image-viewer { width:min(1120px,calc(100% - 32px)); max-width:none; border:0; padding:0; color:#fff; background:transparent; }
.image-viewer::backdrop { background:rgba(8,7,20,.9); backdrop-filter:blur(7px); }
.image-viewer-inner { position:relative; padding:13px; border:1px solid rgba(255,255,255,.18); border-radius:14px; background:#111026; box-shadow:0 35px 100px rgba(0,0,0,.55); }
.image-viewer img { display:block; width:100%; max-height:78vh; object-fit:contain; border-radius:8px; }
.image-viewer p { margin:12px 48px 2px 5px; color:rgba(255,255,255,.7); font-size:.82rem; }
.image-viewer-close { position:absolute; right:17px; bottom:13px; width:35px; height:35px; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#fff; background:#272443; cursor:pointer; }
.module-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.module-card { position:relative; min-height:480px; overflow:hidden; border-radius:14px; padding:clamp(32px,5vw,58px); color:#fff; background:var(--navy); box-shadow:var(--shadow); }
.module-accent { background:linear-gradient(145deg,#5848d6,#7868ed); }
.module-card::after { content:''; position:absolute; right:-80px; bottom:-110px; width:260px; height:260px; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.03),0 0 0 90px rgba(255,255,255,.025); }
.module-card h3 { max-width:520px; color:#fff; font-size:clamp(1.7rem,3vw,2.55rem); }
.module-card > p:not(.tag),.module-card li { color:rgba(255,255,255,.7); }
.tag { color:var(--green); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.module-card ul { position:relative; z-index:1; padding-left:19px; }
.split-head { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin-bottom:47px; }
.content-levels { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.content-levels article { min-height:280px; padding:34px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.content-levels b { display:inline-block; margin-bottom:55px; color:var(--purple); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
.supplier-section { overflow:hidden; background:var(--navy); }
.supplier-showcase { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,8vw,105px); align-items:center; }
.supplier-copy h2,.supplier-benefits h3 { color:#fff; }
.supplier-copy .lead { color:rgba(255,255,255,.78); }
.supplier-copy > p:last-child { color:rgba(255,255,255,.58); }
.supplier-benefits { border-top:1px solid rgba(255,255,255,.14); }
.supplier-benefits article { display:grid; grid-template-columns:48px 1fr; gap:20px; padding:27px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.supplier-benefits article > span { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:var(--green); background:rgba(115,210,138,.1); font-size:.72rem; font-weight:800; }
.supplier-benefits h3 { margin:0 0 7px; font-size:1.15rem; }
.supplier-benefits p { margin:0; color:rgba(255,255,255,.57); font-size:.9rem; }
.content-levels p { color:var(--muted); font-size:.9rem; }
.level-link { display:inline-block; margin-top:8px; color:var(--purple); font-size:.84rem; font-weight:700; text-decoration:none; }
.level-link:hover { text-decoration:underline; }
.deployment-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.deployment-grid article { padding:40px; border:1px solid var(--line); border-radius:11px; }
.deployment-grid p { color:var(--muted); }
.deployment-icon { display:grid; width:50px; height:50px; margin-bottom:28px; place-items:center; border-radius:12px; color:#fff; background:var(--purple); font-size:.74rem; font-weight:800; }
.detail-note { margin:24px 0 0; padding:19px 23px; border-left:3px solid var(--green); color:var(--muted); background:var(--soft); font-size:.85rem; }
.faq-layout { display:grid; grid-template-columns:.72fr 1.28fr; gap:85px; }
.faq-list { display:grid; gap:11px; }
.faq-list details { border:1px solid var(--line); border-radius:9px; background:#fff; }
.faq-list summary { padding:20px 52px 20px 22px; color:var(--ink); font-family:'Manrope'; font-weight:700; cursor:pointer; list-style:none; }
.faq-list summary::after { content:'+'; float:right; margin-right:-30px; color:var(--purple); font-size:1.25rem; }
.faq-list details[open] summary::after { content:'−'; }
.faq-list details p { padding:0 22px 20px; color:var(--muted); font-size:.9rem; }
.contact { padding:clamp(75px,9vw,120px) 0; color:#fff; background:linear-gradient(145deg,#17162e,#26234d); }
.contact-inner { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(45px,7vw,90px); align-items:start; }
.contact h2 { color:#fff; }
.contact-inner > div:first-child > p:last-child { color:rgba(255,255,255,.6); }
.contact-card { padding:35px; border:1px solid rgba(255,255,255,.14); border-radius:13px; background:rgba(255,255,255,.06); }
.contact-card h3 { color:#fff; }
.contact-card p { color:rgba(255,255,255,.62); }
.contact-details { margin-top:40px; padding-top:30px; border-top:1px solid rgba(255,255,255,.14); }
.contact-details h3 { color:#fff; }
.contact-details > p { color:rgba(255,255,255,.66); }
.contact-details > p:not(:first-of-type) { display:grid; gap:3px; margin:20px 0 0; }
.contact-details strong { color:rgba(255,255,255,.48); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; }
.contact-details a { color:#fff; font-weight:700; text-decoration:none; }
.contact-form { display:grid; gap:17px; margin-top:25px; }
.contact-form .form-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.contact-form label { display:grid; gap:7px; color:rgba(255,255,255,.82); font-size:.82rem; font-weight:700; }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; padding:12px 13px; border:1px solid rgba(255,255,255,.2); border-radius:7px; outline:0; background:rgba(255,255,255,.08); color:#fff; font:inherit; }
.contact-form input,.contact-form select { min-height:47px; }
.contact-form textarea { min-height:125px; resize:vertical; }
.contact-form select option { color:var(--ink); background:#fff; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color:rgba(255,255,255,.38); }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(115,210,138,.14); }
.contact-card .button { width:100%; margin-top:3px; }
.contact-form button:disabled { cursor:wait; opacity:.65; transform:none; }
.form-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.form-status { min-height:1.5em; margin:0; color:rgba(255,255,255,.72)!important; font-size:.86rem; }
.form-status.is-success { color:var(--green)!important; }
.form-status.is-error { color:#ffb4b4!important; }
.form-privacy { margin:0!important; color:rgba(255,255,255,.48)!important; font-size:.73rem!important; line-height:1.5; }
.phone { display:block; margin-top:17px; color:rgba(255,255,255,.72); text-align:center; text-decoration:none; }
footer { padding:34px 0; background:#100f22; color:rgba(255,255,255,.5); }
.footer-grid { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:30px; }
.footer-grid p { margin:0; font-size:.78rem; }
.footer-grid p:last-child { text-align:right; }
.contact-services { display:inline-block; margin-top:28px; color:var(--green)!important; font-size:.95rem; font-weight:700; text-decoration:none!important; }
.contact-services:hover { color:#fff!important; text-decoration:underline!important; }
.footer-company { color:inherit; text-decoration:none; }
.footer-company:hover { color:#fff; text-decoration:underline; }
.seo-hero { padding:75px 0 88px; color:#fff; background:radial-gradient(circle at 84% 15%,rgba(105,89,232,.25),transparent 27%),var(--navy); }
.seo-hero h1 { max-width:900px; margin-bottom:24px; font-size:clamp(2.55rem,5vw,4.7rem); }
.seo-lead { max-width:820px; color:rgba(255,255,255,.7); font-size:clamp(1.05rem,1.7vw,1.25rem); }
.seo-hero .button { margin-top:17px; }
.breadcrumb { display:flex; align-items:center; gap:9px; margin-bottom:52px; color:rgba(255,255,255,.5); font-size:.78rem; }
.breadcrumb a { color:rgba(255,255,255,.7); text-decoration:none; }
.seo-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.seo-block { min-height:360px; padding:38px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.seo-block > span { display:block; margin-bottom:65px; color:var(--purple); font-size:.72rem; font-weight:800; }
.seo-block h2 { font-size:1.55rem; }
.seo-block p { color:var(--muted); font-size:.94rem; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-top:35px; }
.related-grid a { display:flex; min-height:105px; align-items:center; justify-content:space-between; gap:15px; padding:25px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; font-family:'Manrope'; font-weight:700; text-decoration:none; }
.related-grid a:hover { border-color:var(--purple); }
.related-grid span { color:var(--purple); }
.article { padding:65px 0 100px; }
.article .breadcrumb { color:var(--muted); }
.article .breadcrumb a { color:var(--purple); }
.article-shell { max-width:840px; }
.article h1 { color:var(--ink); font-size:clamp(2.4rem,5vw,4.35rem); }
.article .seo-lead { color:var(--muted); }
.article-meta { margin:26px 0 65px; padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--muted); font-size:.8rem; }
.article section { margin:0 0 48px; }
.article section h2 { font-size:clamp(1.6rem,3vw,2.25rem); }
.article section p { color:var(--muted); font-size:1.04rem; }
.article-note { margin-top:65px; padding:28px; border-left:4px solid var(--green); background:var(--soft); }
.article-note strong { color:var(--ink); font-family:'Manrope'; font-size:1.1rem; }
.article-note p { margin:8px 0 0; color:var(--muted); }
.article-list { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; }
.article-list article { min-height:285px; padding:35px; border:1px solid var(--line); border-radius:10px; }
.article-list h2 { font-size:1.5rem; }
.article-list h2 a { text-decoration:none; }
.article-list article > p:not(.kicker) { color:var(--muted); }
.article-list article > a { color:var(--purple); font-weight:700; text-decoration:none; }

@media (max-width:900px) {
  .menu-button { display:block; }
  .navigation { position:absolute; top:76px; left:0; right:0; display:none; padding:22px; background:var(--navy); flex-direction:column; align-items:stretch; }
  .navigation.is-open { display:flex; }
  .navigation > a.is-active:not(.button)::after,.nav-dropdown > summary.is-active::after { top:50%; right:auto; bottom:auto; left:-10px; width:3px; height:22px; transform:translateY(-50%); }
  .nav-dropdown > summary { justify-content:space-between; }
  .language-switch { padding:7px 0; font-size:.82rem; }
  .nav-menu { position:static; width:auto; min-width:0; max-width:none; margin-top:10px; padding:7px; border-color:rgba(255,255,255,.09); border-radius:7px; background:rgba(255,255,255,.04); box-shadow:none; }
  .nav-menu::before { display:none; }
  .hero-grid,.story-grid,.contact-inner,.faq-layout,.supplier-showcase { grid-template-columns:1fr; }
  .seo-grid { grid-template-columns:1fr 1fr; }
  .hero-product { transform:none; }
  .feature-grid,.content-levels { grid-template-columns:repeat(2,1fr); }
  .story-copy:nth-of-type(2) { grid-row:3; }
  .product-shot-large { grid-row:4; }
  .faq-layout { gap:35px; }
}
@media (max-width:640px) {
  .shell { width:min(100% - 28px,1160px); }
  h1 { font-size:2.65rem; }
  .actions { align-items:flex-start; flex-direction:column; }
  .proof { display:grid; }
  .trust-grid,.feature-grid,.module-grid,.split-head,.content-levels,.deployment-grid,.footer-grid,.seo-grid,.related-grid,.article-list { grid-template-columns:1fr; }
  .seo-block { min-height:0; }
  .seo-block > span { margin-bottom:28px; }
  .trust-grid p,.trust-grid p:first-child { border-left:1px solid var(--line); }
  .feature-grid article { min-height:0; }
  .feature-grid article > span,.content-levels b { margin-bottom:24px; }
  .module-card { min-height:420px; }
  .split-head { gap:15px; }
  .contact-form .form-row { grid-template-columns:1fr; }
  .footer-grid p:last-child { text-align:left; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
