:root { --ink:#152231; --muted:#5d6c7c; --line:#dfe7ee; --soft:#f5f7f9; --brand:#d9002a; --brand-dark:#ad0022; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--white); font:16px/1.5 Arial,sans-serif; }
a { color:inherit; }
.site-container { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.site-header { position:relative; z-index:10; border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); }
.site-header__inner { display:flex; align-items:center; gap:24px; min-height:94px; }
.site-logo { display:block; width:94px; height:82px; flex:0 0 94px; }
.site-logo img { display:block; width:94px; height:82px; object-fit:contain; }
.site-nav { display:flex; align-items:center; gap:24px; margin-left:auto; color:var(--muted); font-size:15px; }
.site-nav a,.site-mobile-menu a { text-decoration:none; }
.site-nav a:hover,.site-mobile-menu a:hover { color:var(--brand); }
.site-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 18px; border-radius:7px; font-weight:700; text-decoration:none; }
.site-button--outline { border:1px solid var(--brand); color:var(--brand); }
.site-menu-toggle,.site-mobile-menu { display:none; }
.hero { padding:80px 0 96px; background:linear-gradient(135deg,#fff 0%,#f5f7f9 100%); }
.hero__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.eyebrow { margin:0 0 16px; color:var(--brand); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:13px; }
h1,h2,h3 { line-height:1.15; }
h1 { max-width:720px; margin:0 0 22px; font-size:clamp(40px,5vw,68px); letter-spacing:-.04em; }
h2 { margin:0 0 18px; font-size:clamp(30px,4vw,46px); letter-spacing:-.03em; }
h3 { margin:0 0 10px; font-size:21px; }
.lead { max-width:680px; color:var(--muted); font-size:19px; }
.hero__actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.site-button--primary { border:1px solid var(--brand); color:var(--white); background:var(--brand); }
.hero-card { padding:25px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:0 20px 60px rgba(21,34,49,.1); }
.hero-card__bar { display:flex; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; }
.hero-card__image { display:block; width:100%; aspect-ratio:16/9; margin-top:20px; border-radius:9px; object-fit:cover; object-position:center; }
.hero__visual { display:flex; flex-direction:column; gap:14px; }
.hero-card__platform-links { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.hero-card__platform-links a { display:flex; flex-direction:column; gap:5px; min-height:74px; padding:13px 14px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--soft); text-decoration:none; transition: border-color .2s, transform .2s; }
.hero-card__platform-links a:hover { border-color:var(--brand); transform:translateY(-2px); }
.hero-card__platform-links strong { font-size:14px; }
.hero-card__platform-links span { color:var(--muted); font-size:12px; line-height:1.35; }
.hero-card__metric { margin:26px 0; font-size:40px; font-weight:700; }
.hero-card table { width:100%; border-collapse:collapse; font-size:14px; }
.hero-card td { padding:11px 0; border-bottom:1px solid var(--line); }
.hero-card td:last-child { text-align:right; color:var(--brand); font-weight:700; }
.section { padding:88px 0; }
.section--soft { background:var(--soft); }
.section-head { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:30px; }
.section-head > p { max-width:450px; color:var(--muted); }
.filter { display:flex; gap:8px; flex-wrap:wrap; }
.filter button,.filter a { display:inline-block; padding:10px 14px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--white); cursor:pointer; text-decoration:none; }
.filter button.is-active,.filter button:hover,.filter a.is-active,.filter a:hover { border-color:var(--brand); color:var(--white); background:var(--brand); }
.product-grid,.scenario-grid,.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.product-card,.scenario-card,.blog-card { padding:24px; border:1px solid var(--line); border-radius:12px; background:var(--white); }
.product-card { display:flex; flex-direction:column; }
.product-card h3 { min-height:2.3em; }
.product-card__image { display:block; width:calc(100% + 48px); height:150px; margin:-24px -24px 22px; border-bottom:1px solid var(--line); border-radius:12px 12px 0 0; object-fit:cover; object-position:center; }
.product-card p,.scenario-card p,.blog-card p { color:var(--muted); }
.product-card__meta { align-items:center; }
.product-card__meta span { padding:6px 9px; border:1px solid #f0b8c3; border-radius:6px; color:var(--brand); background:#fffafb; }
.product-card__link { display:inline-block; margin-top:16px; color:var(--brand); font-weight:700; text-decoration:none; }
.product-card__meta { display:flex; justify-content:space-between; gap:10px; margin-top:auto; color:var(--brand); font-size:13px; font-weight:700; }
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; }
.about-note { padding:28px; border-left:3px solid var(--brand); background:var(--soft); }
.screen-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.screen-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--white); }
.screen-card > img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center; border-bottom:1px solid var(--line); }
.screen-card__body { padding:22px; }
.screen-card__platform { margin:0 0 8px; color:var(--brand); font-size:13px; font-weight:700; text-transform:uppercase; }
.screen-card__body p:not(.screen-card__platform) { color:var(--muted); }
.screen-card__body a { color:var(--brand); font-weight:700; text-decoration:none; }
.blog-card { display:flex; flex-direction:column; }
.blog-card a { margin-top:auto; color:var(--brand); font-weight:700; text-decoration:none; }
.cta { padding:64px 0; color:var(--white); background:#202428; }
.cta__inner { display:flex; justify-content:space-between; align-items:center; gap:30px; }
.cta p { color:rgba(255,255,255,.75); }
.site-footer { padding:28px 0; color:#9da8b3; background:#171a1f; font-size:14px; }
.site-footer__inner { display:flex; justify-content:space-between; gap:20px; }
.site-footer a { color:inherit; }
.articles-page,.article-page { padding:72px 0 88px; }
.articles-page__head { max-width:760px; margin-bottom:36px; }
.articles-page__head h1 { margin:0 0 16px; font-size:clamp(36px,5vw,64px); line-height:1.08; }
.article-page h1 { max-width:820px; margin:0 0 16px; font-size:clamp(30px,3.5vw,48px); line-height:1.12; }
.articles-page__head > p:last-child,.article-page__lead { color:var(--muted); font-size:19px; }
.articles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.article-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--white); }
.article-card__image { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--soft); }
.article-card__image img { width:100%; height:100%; object-fit:cover; }
.article-card__body { padding:24px; }
.article-card h2 { margin:0 0 12px; font-size:24px; line-height:1.2; }
.article-card h2 a { color:var(--ink); text-decoration:none; }
.article-card p { display:-webkit-box; overflow:hidden; margin:0 0 20px; color:var(--muted); -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.article-card__link,.article-page__back { color:var(--brand); font-weight:700; text-decoration:none; }
.articles-page__pager { margin-top:36px; }
.articles-pagination { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.articles-pagination a,.articles-pagination .is-current { display:inline-flex; min-width:42px; min-height:42px; padding:8px 12px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:7px; text-decoration:none; }
.articles-pagination a { color:var(--ink); background:var(--white); }
.articles-pagination a:hover,.articles-pagination .is-current { border-color:var(--brand); color:var(--white); background:var(--brand); }
.article-page__inner { max-width:900px; }
.article-page__back { display:inline-block; margin-bottom:24px; }
.article-page__image { width:100%; margin:24px 0 32px; border-radius:12px; }
.article-page__content { font-size:17px; line-height:1.7; }
.article-page__content img { max-width:100%; height:auto; }
.article-page__content h2 { margin-top:42px; }
.article-page__content h3 { margin-top:32px; }
.company-page { padding:76px 0 90px; }
.company-page__hero { max-width:900px; margin-bottom:72px; }
.company-page__hero h1 { max-width:820px; margin:0 0 22px; font-size:clamp(42px,6vw,72px); }
.company-page__hero > p:last-child { max-width:780px; color:var(--muted); font-size:21px; }
.company-page__section { margin-bottom:72px; }
.company-page__heading { margin-bottom:28px; }
.company-page__heading h2,.company-principles h2,.company-page__contact h2 { margin:0 0 12px; font-size:32px; }
.company-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.company-service { display:flex; flex-direction:column; padding:28px; border:1px solid var(--line); border-radius:12px; background:var(--white); }
.company-service__label { margin:0 0 14px; color:var(--brand); font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.company-service h3 { margin:0 0 14px; font-size:23px; }
.company-service > p:not(.company-service__label) { color:var(--muted); }
.company-service ul { margin:12px 0 0; padding-left:20px; }
.company-service li { margin:7px 0; }
.company-service a { color:var(--brand); font-weight:700; text-decoration:none; }
.company-service__link { margin-top:auto; padding-top:18px; }
.company-principles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:72px; }
.company-principles article { padding:32px; background:var(--soft); }
.company-principles article > p:last-child { color:var(--muted); }
.company-page__contact { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:38px; color:var(--white); background:#202428; border-radius:12px; }
.company-page__contact p { margin-bottom:0; color:rgba(255,255,255,.75); }
@media (max-width:900px) { .site-nav { gap:14px; font-size:14px; } .hero__grid,.about-grid { grid-template-columns:1fr; } .product-grid,.scenario-grid,.blog-grid,.screen-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:900px) { .company-services { grid-template-columns:1fr; } }
@media (max-width:680px) { .site-container { width:min(100% - 28px,1180px); } .site-header__inner { min-height:88px; } .site-nav,.site-header__inner > .site-button { display:none; } .site-menu-toggle { display:block; margin-left:auto; padding:9px 12px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--white); } .site-mobile-menu { display:none; padding:0 14px 16px; } .site-mobile-menu.is-open { display:grid; gap:12px; } .hero { padding:56px 0 70px; } .section,.articles-page,.article-page,.company-page { padding:64px 0; } .section-head,.cta__inner,.site-footer__inner,.company-page__contact { display:block; } .product-grid,.scenario-grid,.blog-grid,.screen-grid,.articles-grid,.company-principles { grid-template-columns:1fr; } .section-head > p { margin-top:12px; } .hero-card__platform-links { grid-template-columns:1fr; } .company-page__hero,.company-page__section,.company-principles { margin-bottom:52px; } .company-page__contact .site-button { margin-top:22px; } }