:root { --page:#f8f7fb; --surface:#fff; --ink:#171520; --muted:#686472; --line:#e8e3ee; --violet:#6657d9; --violet-dark:#4f43b8; --pink:#d65c8c; --focus:rgba(102,87,217,.28); color-scheme:light; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:20rem; min-height:100dvh; margin:0; background:var(--page); color:var(--ink); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
a, button { touch-action:manipulation; }
a:focus-visible { outline:.1875rem solid var(--focus); outline-offset:.1875rem; border-radius:.375rem; }
.skip-link { padding:.625rem .875rem; position:fixed; top:.75rem; left:.75rem; z-index:100; display:block; border-radius:.5rem; background:var(--ink); color:#fff; transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.site-header { width:min(100% - 2rem,72rem); height:5rem; margin:0 auto; display:flex; align-items:center; gap:1.5rem; }
.brand { min-height:2.75rem; display:inline-flex; align-items:center; gap:.625rem; font-size:.875rem; font-weight:750; letter-spacing:-.015em; }
.brand__mark { width:2rem; height:2rem; display:grid; place-items:center; border-radius:.625rem; background:var(--ink); color:#fff; font-size:.75rem; }
.site-nav { margin-left:auto; display:flex; align-items:center; gap:1.5rem; color:var(--muted); font-size:.8125rem; font-weight:650; }
.site-nav a { min-height:2.75rem; display:inline-flex; align-items:center; transition:color .2s ease; }
.site-nav a:hover { color:var(--ink); }
.language-switch { padding:.1875rem; display:flex; align-items:center; gap:.125rem; border:.0625rem solid var(--line); border-radius:.625rem; background:rgba(255,255,255,.68); font-size:.6875rem; font-weight:750; }
.language-switch a { min-width:2.5rem; min-height:2.25rem; padding:0 .5rem; display:inline-flex; align-items:center; justify-content:center; border-radius:.4375rem; color:var(--muted); }
.language-switch a[aria-current="page"] { background:var(--ink); color:#fff; }
main { overflow:hidden; }
.hero { width:min(100% - 2rem,72rem); min-height:calc(100dvh - 5rem); margin:0 auto; padding:5rem 0 7rem; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(22rem,.95fr); align-items:center; gap:5rem; }
.eyebrow { margin:0 0 1rem; color:var(--violet-dark); font-size:.6875rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.hero h1 { max-width:47rem; margin:0; font-size:clamp(2.75rem,6vw,5.75rem); font-weight:760; line-height:1.02; letter-spacing:-.065em; }
.hero__intro { max-width:39rem; margin:1.75rem 0 0; color:var(--muted); font-size:clamp(1rem,1.5vw,1.1875rem); line-height:1.75; }
.hero__actions { margin:2rem 0 0; display:flex; flex-wrap:wrap; gap:.75rem; }
.button { min-height:3rem; padding:0 1.125rem; display:inline-flex; align-items:center; justify-content:center; border:.0625rem solid transparent; border-radius:.75rem; font-size:.8125rem; font-weight:750; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease; }
.button:hover { transform:translateY(-.0625rem); }
.button--primary { background:var(--violet); color:#fff; }
.button--primary:hover { background:var(--violet-dark); }
.button--secondary { border-color:var(--line); background:rgba(255,255,255,.68); color:var(--ink); }
.button--secondary:hover { border-color:#d5cfdd; background:#fff; }
.hero__visual { min-height:29rem; position:relative; display:grid; place-items:center; border:.0625rem solid rgba(255,255,255,.72); border-radius:2rem; overflow:hidden; background:radial-gradient(circle at 20% 20%,rgba(214,92,140,.25),transparent 35%),radial-gradient(circle at 82% 76%,rgba(102,87,217,.3),transparent 40%),#201d2b; box-shadow:0 2rem 5rem rgba(37,29,54,.18); }
.hero__visual::before { width:17rem; height:17rem; position:absolute; border:.0625rem solid rgba(255,255,255,.08); border-radius:50%; content:""; }
.hero-card { width:15rem; min-height:5.5rem; padding:.875rem; position:absolute; display:flex; align-items:center; gap:.875rem; border:.0625rem solid rgba(255,255,255,.15); border-radius:1.125rem; background:rgba(255,255,255,.1); color:#fff; box-shadow:0 1.25rem 3rem rgba(0,0,0,.2); backdrop-filter:blur(1rem); }
.hero-card img { width:3.5rem; height:3.5rem; flex:0 0 auto; border-radius:.875rem; object-fit:cover; }
.hero-card span { display:block; color:rgba(255,255,255,.62); font-size:.625rem; font-weight:650; text-transform:uppercase; letter-spacing:.08em; }
.hero-card strong { margin:.1875rem 0 0; display:block; font-size:.9375rem; line-height:1.3; }
.hero-card--radar { top:22%; left:11%; transform:rotate(-5deg); }
.hero-card--veilary { right:9%; bottom:20%; transform:rotate(5deg); }
.products { width:min(100% - 2rem,72rem); margin:0 auto; padding:7rem 0; }
.section-heading { max-width:42rem; margin:0 0 2.5rem; }
.section-heading h2 { margin:0; font-size:clamp(2rem,4vw,3.5rem); line-height:1.08; letter-spacing:-.05em; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.product-card { min-height:34rem; padding:2rem; display:flex; flex-direction:column; border:.0625rem solid var(--line); border-radius:1.5rem; background:var(--surface); box-shadow:0 .75rem 2.5rem rgba(34,27,48,.05); }
.product-card__head { display:flex; align-items:center; gap:1rem; }
.product-card__head img { width:4.5rem; height:4.5rem; border-radius:1.125rem; object-fit:cover; box-shadow:0 .5rem 1.5rem rgba(30,24,42,.12); }
.product-label { color:var(--violet-dark); font-size:.6875rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.product-card h3 { margin:.15rem 0 0; font-size:1.625rem; line-height:1.2; letter-spacing:-.035em; }
.product-card > p { max-width:33rem; margin:2rem 0 0; color:var(--muted); font-size:1rem; line-height:1.75; }
.product-card ul { margin:2rem 0; padding:0; display:grid; gap:.875rem; list-style:none; }
.product-card li { position:relative; padding-left:1.5rem; color:#3f3b48; font-size:.875rem; }
.product-card li::before { width:.5rem; height:.5rem; position:absolute; top:.48rem; left:0; border:.125rem solid var(--violet); border-radius:50%; content:""; }
.product-card--veilary .product-label { color:#a63b68; }
.product-card--veilary li::before { border-color:var(--pink); }
.product-card__footer { margin-top:auto; padding-top:1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:.0625rem solid var(--line); color:var(--muted); font-size:.75rem; }
.product-card__footer a { min-height:2.75rem; display:inline-flex; align-items:center; color:var(--violet-dark); font-weight:750; }
.product-card__footer a:hover { text-decoration:underline; text-underline-offset:.25rem; }
.principle { width:min(100% - 2rem,72rem); margin:2rem auto 8rem; padding:3rem; display:grid; grid-template-columns:auto 1fr; align-items:start; gap:1.5rem; border:.0625rem solid #ddd7e7; border-radius:1.5rem; background:#eeebf4; }
.principle__mark { width:1rem; height:1rem; margin-top:.4rem; border:.25rem solid var(--violet); border-radius:50%; }
.principle h2 { margin:0; font-size:1.5rem; letter-spacing:-.03em; }
.principle p { max-width:48rem; margin:.625rem 0 0; color:var(--muted); }
.site-footer { padding:4rem max(1rem,calc((100vw - 72rem)/2)); background:#1c1923; color:#fff; }
.site-footer__main { padding-bottom:3rem; display:flex; align-items:flex-start; justify-content:space-between; gap:2rem; }
.site-footer strong { font-size:1rem; }
.site-footer p { margin:.5rem 0 0; color:#aaa5b3; font-size:.8125rem; }
.contact-list { display:flex; flex-direction:column; align-items:flex-end; gap:.625rem; color:#d3ced8; font-size:.75rem; }
.contact-list a:hover { color:#fff; }
.site-footer__legal { padding-top:1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; border-top:.0625rem solid rgba(255,255,255,.1); color:#8e8996; font-size:.6875rem; }
.legal-links,.filings { display:flex; align-items:center; flex-wrap:wrap; gap:1rem; }
.legal-links a:hover,.filings a:hover { color:#fff; }
.filings a { display:inline-flex; align-items:center; gap:.35rem; }
.filings img { width:.875rem; height:.875rem; opacity:.78; }
@media (max-width:56rem) { .hero { min-height:auto; padding:4rem 0 6rem; grid-template-columns:1fr; gap:3rem; } .hero__visual { min-height:24rem; } .product-card { min-height:32rem; } }
@media (max-width:42rem) { .site-header { height:4.5rem; } .site-nav { display:none; } .language-switch { margin-left:auto; } .hero { padding:3rem 0 5rem; } .hero h1 { font-size:clamp(2.5rem,13vw,4.25rem); } .hero__actions { flex-direction:column; } .button { width:100%; } .hero__visual { min-height:20rem; border-radius:1.5rem; } .hero-card { width:13.25rem; min-height:4.75rem; } .hero-card img { width:3rem; height:3rem; } .hero-card--radar { top:18%; left:5%; } .hero-card--veilary { right:5%; bottom:18%; } .products { padding:5rem 0; } .product-grid { grid-template-columns:1fr; } .product-card { min-height:auto; padding:1.5rem; } .principle { margin-bottom:5rem; padding:1.5rem; grid-template-columns:1fr; gap:.75rem; } .site-footer__main,.site-footer__legal { flex-direction:column; } .contact-list { align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }