:root {
  --ink: #22334f;
  --muted: #75849a;
  --blue: #3f75e8;
  --blue-deep: #1d4a9d;
  --line: #e3eaf3;
  --soft: #f5f8fd;
  --shadow: 0 14px 31px rgba(33, 65, 132, .09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html[data-device="mobile"] { -webkit-tap-highlight-color: rgba(63, 117, 232, .13); }
body { margin: 0; color: var(--ink); background: #fff; font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; transition: .18s ease; }
button, input { font: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }

.site-header { height: 78px; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(225, 232, 243, .88); background: rgba(255, 255, 255, .94); backdrop-filter: blur(13px); }
.site-header-inner { width: min(1180px, calc(100% - 48px)); height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 48px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #1c2c47; white-space: nowrap; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #3480f4; background: linear-gradient(145deg, #e5f0ff, #fbfdff); font-size: 24px; line-height: 1; }
.brand b { font-size: 22px; letter-spacing: -1.2px; }
.primary-nav { height: 100%; display: flex; align-items: stretch; gap: 28px; }
.primary-nav a { min-width: 46px; position: relative; display: flex; align-items: center; justify-content: center; color: #3e4b60; font-size: 14px; font-weight: 600; }
.primary-nav a:hover, .primary-nav a.active { color: #2d72ee; }
.primary-nav a.active::after { width: 23px; height: 3px; position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); border-radius: 5px; background: var(--blue); content: ""; }
.header-login { min-height: 38px; margin-left: auto; padding: 0 15px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e1e8f4; border-radius: 7px; color: #4671cd; font-size: 13px; font-weight: 700; box-shadow: 0 7px 18px rgba(47, 78, 134, .05); }
.header-login:hover { color: #2868df; border-color: #adc5f5; background: #f8fbff; }
.nav-toggle { display: none; }

.ui-icon { display: inline-flex; align-items: center; justify-content: center; font-style: normal; line-height: 1; }
.button { min-height: 45px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border-radius: 8px; font-size: 14px; font-weight: 720; }
.button.primary { color: #fff; background: linear-gradient(135deg, #4f82fa, #2d62dd); box-shadow: 0 12px 23px rgba(44, 91, 213, .24); }
.button.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 29px rgba(44, 91, 213, .3); }
.text-link { color: #5871aa; font-size: 14px; font-weight: 700; }
.text-link:hover { color: #2e6ee8; }

.hero { min-height: 590px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(480px, .94fr); align-items: center; overflow: hidden; background: linear-gradient(107deg, #fff 0%, #fff 45%, #f2f6ff 100%); }
.hero::before { width: 850px; height: 850px; position: absolute; top: -500px; right: -25px; border-radius: 50%; background: radial-gradient(circle, rgba(154, 186, 255, .28), rgba(190, 210, 255, .08) 43%, transparent 68%); content: ""; }
.hero-copy { width: min(565px, calc(100% - 40px)); margin-left: max(24px, calc((100vw - 1180px) / 2)); position: relative; z-index: 1; }
.eyebrow, .section-heading > p, .catalog-intro > p, .doc-head > p { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; color: #4c79dc; font-size: 13px; font-weight: 760; letter-spacing: .8px; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #4c81ee; box-shadow: 0 0 0 5px rgba(76, 129, 238, .1); }
.hero h1 { max-width: 560px; margin: 0; color: #192a45; font-size: clamp(42px, 4.35vw, 61px); line-height: 1.19; letter-spacing: -3px; }
.hero h1 span { display: block; color: #3676ee; }
.hero-copy > p:not(.eyebrow) { max-width: 500px; margin: 25px 0 0; color: #718099; font-size: 16px; line-height: 1.95; }
.button-row { margin-top: 28px; display: flex; align-items: center; gap: 23px; }
.check-row { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 10px 19px; color: #7e8b9c; font-size: 12px; }
.check-row span { display: inline-flex; align-items: center; gap: 5px; }.check-row .ui-icon { color: #5b8de9; }

.hero-visual { width: 560px; height: 520px; position: relative; z-index: 1; }
.visual-ring { position: absolute; border: 1px solid rgba(90, 136, 238, .21); border-radius: 50%; }.ring-a { width: 450px; height: 450px; top: 34px; left: 65px; }.ring-b { width: 340px; height: 340px; top: 89px; left: 120px; border-style: dashed; }
.visual-cloud { width: 157px; height: 114px; position: absolute; top: 82px; left: 90px; display: grid; place-items: center; transform: rotate(-12deg); border: 1px solid rgba(255,255,255,.86); border-radius: 32px; background: linear-gradient(145deg, #e6efff, #a8c1fb); box-shadow: 0 19px 29px rgba(56,91,178,.21); color: rgba(255,255,255,.83); font-size: 67px; }.visual-cloud b { position: absolute; color: #3665c7; font-size: 20px; }
.visual-console { width: 260px; height: 307px; position: absolute; top: 101px; left: 193px; padding: 15px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 18px 1fr 1fr; gap: 9px; transform: rotate(-4.5deg); overflow: hidden; border: 7px solid #f9fbff; border-radius: 22px; background: linear-gradient(143deg, #305dbd, #153173); box-shadow: 18px 24px 31px rgba(30,57,126,.25); }.visual-console > div { grid-column: 1 / -1; display: flex; align-items: center; gap: 4px; color: #d9e7ff; }.visual-console > div i { width: 6px; height: 6px; border-radius: 50%; background: #8bb4ff; }.visual-console > div b { margin-left: 7px; font-size: 9px; letter-spacing: .1px; }.visual-console > span { border: 1px solid rgba(198,219,255,.18); border-radius: 7px; background: linear-gradient(145deg, rgba(145,183,255,.94), rgba(95,140,239,.75)); }.visual-console > span:nth-of-type(2), .visual-console > span:nth-of-type(5) { opacity: .5; }
.visual-server { width: 143px; position: absolute; top: 193px; left: 430px; padding: 13px 11px 11px; transform: rotate(8deg); border: 5px solid #eaf1ff; border-radius: 12px; background: linear-gradient(145deg, #afc4ee, #dce7fb); box-shadow: 11px 18px 25px rgba(43,69,143,.18); }.visual-server b { display: block; margin-bottom: 8px; color: #6682bd; font-size: 9px; letter-spacing: .7px; }.visual-server i { height: 29px; margin-top: 5px; display: block; border-radius: 4px; background: linear-gradient(90deg, #4b84e9 10%, #d6e2f7 10% 80%, #9be0c3 80%); }
.visual-tag { min-height: 33px; padding: 0 11px; position: absolute; display: flex; align-items: center; gap: 5px; border: 1px solid rgba(225,234,250,.95); border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: 0 11px 21px rgba(44,76,144,.13); color: #5b75ae; font-size: 10px; font-style: normal; font-weight: 720; }.tag-one { top: 371px; left: 86px; transform: rotate(9deg); }.tag-two { top: 405px; left: 347px; transform: rotate(-9deg); }

.facts { padding: 34px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #eaf0f7; }.facts article { min-height: 43px; padding: 0 29px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #e8edf5; }.facts article:first-child { padding-left: 2px; }.facts article:last-child { border: 0; }.facts b { color: #2e4774; font-size: 17px; letter-spacing: -.5px; }.facts span { margin-top: 5px; color: #8b98a8; font-size: 12px; }
.section { padding: 92px 0; }.section-heading { max-width: 700px; }.section-heading h2 { margin: 0; color: #21334f; font-size: clamp(28px,3vw,36px); line-height: 1.3; letter-spacing: -1.5px; }.section-heading > span { max-width: 650px; margin-top: 13px; display: block; color: #7b8899; font-size: 14px; line-height: 1.85; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }.home-products { margin-top: 34px; grid-template-columns: repeat(4, minmax(0,1fr)); }
.product-card { min-height: 270px; padding: 22px; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e2e9f2; border-radius: 13px; background: linear-gradient(145deg,#fff,#fbfcff); box-shadow: 0 9px 20px rgba(32,59,107,.035); }.product-card::after { width: 125px; height: 125px; position: absolute; top: -75px; right: -58px; border-radius: 50%; background: #eff5ff; content: ""; }.product-card:hover { border-color: #adcaef; box-shadow: var(--shadow); transform: translateY(-4px); }.product-card-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }.product-card-top > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #eaf2ff; color: #5480e8; font-size: 21px; }.product-card-top small { color: #8797ad; font-size: 11px; font-weight: 650; }.product-card h3 { margin: 22px 0 7px; color: #2d3d59; font-size: 19px; }.product-card > p { margin: 0; color: #78869a; font-size: 13px; line-height: 1.78; }.card-price { margin-top: auto; padding-top: 16px; display: flex; align-items: end; justify-content: space-between; border-top: 1px solid #edf1f6; }.card-price small { display: block; color: #9aa5b4; font-size: 10px; }.card-price b { color: #3e73e5; font-size: 19px; letter-spacing: -.5px; }.card-price em, .card-price a { display: inline-flex; align-items: center; gap: 2px; color: #5a79bf; font-size: 11px; font-style: normal; font-weight: 700; }.card-price a:hover { color: #2868df; }
.feature-band { padding: 91px 0 94px; position: relative; overflow: hidden; background: #f4f8ff; }.feature-band::before { width: 470px; height: 470px; position: absolute; top: -340px; right: -75px; border: 1px solid rgba(94,140,231,.16); border-radius: 50%; box-shadow: 0 0 0 65px rgba(94,140,231,.04),0 0 0 130px rgba(94,140,231,.025); content: ""; }.feature-grid { margin-top: 37px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.feature-grid article { min-height: 153px; padding: 22px; display: grid; grid-template-columns: 46px 1fr; gap: 14px; border: 1px solid rgba(219,228,243,.92); border-radius: 12px; background: rgba(255,255,255,.82); }.feature-grid article > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; color: #5983e6; background: #e9f2ff; font-size: 19px; }.feature-grid h3 { margin: 1px 0 7px; color: #33435d; font-size: 15px; }.feature-grid p { margin: 0; color: #78869a; font-size: 12px; line-height: 1.75; }
.journey { padding-bottom: 88px; }.step-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.step-grid article { min-height: 220px; padding: 24px; position: relative; border: 1px solid #e4eaf2; border-radius: 12px; background: #fff; }.step-grid article > span { color: #4c7be3; font-size: 13px; font-family: monospace; font-weight: 730; }.step-grid h3 { margin: 20px 0 8px; color: #31415b; font-size: 18px; }.step-grid p { margin: 0; color: #7b8899; font-size: 13px; line-height: 1.78; }.step-grid a { margin-top: 20px; display: inline-flex; align-items: center; gap: 2px; color: #4e75d8; font-size: 12px; font-weight: 710; }

.catalog-page { min-height: calc(100vh - 78px); padding: 34px 0 50px; }.catalog-intro { max-width: 690px; padding-top: 43px; }.catalog-intro h1, .category-hero h1, .detail-copy h1 { margin: 0; color: #24314a; font-size: 39px; line-height: 1.25; letter-spacing: -1.8px; }.catalog-intro > span { margin-top: 16px; display: block; color: #738198; font-size: 15px; line-height: 1.8; }.category-grid { margin-top: 37px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }.category-card { min-height: 262px; padding: 22px; position: relative; overflow: hidden; border: 1px solid #e0e7f0; border-radius: 13px; background: linear-gradient(145deg,#fff,#f9fbff); box-shadow: 0 8px 20px rgba(32,59,107,.04); }.category-card:hover { border-color: #b8cdf8; box-shadow: var(--shadow); transform: translateY(-3px); }.category-number { position: absolute; top: 15px; right: 16px; color: #c0cdea; font: 700 12px monospace; }.category-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 14px; background: #eaf2ff; color: #4e79e7; font-size: 26px; }.category-card h2 { margin: 22px 0 7px; color: #2b3850; font-size: 19px; }.category-card p { margin: 0; color: #768399; font-size: 13px; line-height: 1.75; }.category-card em { position: absolute; right: 20px; bottom: 18px; left: 20px; display: flex; align-items: center; justify-content: space-between; color: #4c75df; font-size: 12px; font-style: normal; font-weight: 680; }.notice { min-height: 69px; margin-top: 33px; padding: 13px 17px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 10px; border: 1px solid #dce8fb; border-radius: 8px; color: #5882c9; background: #f3f8ff; }.notice p { margin: 0; color: #637794; font-size: 13px; }.notice p b { margin-right: 8px; color: #3d5b86; }.notice a { color: #3f70da; font-size: 13px; font-weight: 700; }
.crumb { display: flex; align-items: center; gap: 8px; color: #8b98ab; font-size: 12px; }.crumb a:hover { color: #5176dd; }.crumb b { color: #536175; }.category-hero { min-height: 223px; margin-top: 18px; padding: 34px 40px; position: relative; overflow: hidden; border-radius: 14px; background: radial-gradient(circle at 83% 20%,rgba(152,181,255,.34),transparent 23%),linear-gradient(117deg,#edf4ff,#fff 62%); }.category-hero > span { width: 57px; height: 57px; position: absolute; right: 14%; bottom: 40px; display: grid; place-items: center; border-radius: 17px; color: #547de8; background: #fff; box-shadow: 0 13px 28px rgba(49,85,167,.14); font-size: 27px; }.category-hero p { margin: 0 0 7px; color: #527ae5; font-size: 13px; font-weight: 750; letter-spacing: .8px; }.category-hero strong { max-width: 570px; margin-top: 13px; display: block; color: #697994; font-size: 15px; font-weight: 480; line-height: 1.8; }
.region-nav { margin-top: 24px; padding: 8px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; border: 1px solid #e0e7f1; border-radius: 10px; background: #fff; }.region-nav a { min-height: 47px; padding: 0 15px; display: flex; align-items: center; gap: 8px; border-radius: 7px; color: #4e6487; background: #f6f9fe; font-size: 13px; font-weight: 700; }.region-nav a .ui-icon:last-child { margin-left: auto; color: #91a8d8; }.region-nav a:hover { color: #316cdd; background: #edf4ff; }.region-list { margin-top: 35px; display: grid; gap: 53px; }.region-section { scroll-margin-top: 92px; }.region-section > header { min-height: 58px; padding-bottom: 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4eaf2; }.region-section > header > div { display: flex; align-items: center; gap: 11px; }.region-section > header > div > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 10px; color: #5881e5; background: #eaf2ff; }.region-section p { margin: 0 0 2px; color: #8696ae; font-size: 11px; font-weight: 620; }.region-section h2 { margin: 0; color: #2d3d59; font-size: 21px; letter-spacing: -.6px; }.region-section > header small { padding: 5px 8px; border-radius: 5px; color: #7790bc; background: #eff4fd; font-size: 11px; }.catalog-products { margin-top: 25px; }.region-section .catalog-products { margin-top: 18px; }.catalog-product { min-height: 278px; }.mini-features { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 7px; }.mini-features span { min-height: 27px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 4px; color: #63708a; background: #f5f7fb; font-size: 11px; }.hot-label { position: absolute; top: 13px; right: -22px; width: 78px; height: 22px; display: grid; place-items: center; transform: rotate(45deg); color: #fff; background: #f18458; font-size: 9px; font-weight: 700; }

.detail-page { padding: 34px 0 50px; }.detail-hero { min-height: 299px; margin-top: 18px; padding: 42px 48px; display: grid; grid-template-columns: minmax(0,1fr) 308px; gap: 55px; border-radius: 15px; background: radial-gradient(circle at 83% 11%,rgba(176,198,255,.55),transparent 22%),linear-gradient(115deg,#f0f5ff,#fff 68%); }.detail-copy > span { width: 60px; height: 60px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 16px; color: #5079e7; background: #e4efff; font-size: 30px; }.detail-copy > p { margin: 0 0 6px; color: #5882e4; font-size: 12px; font-weight: 700; }.detail-copy h1 { font-size: 35px; }.detail-copy strong { margin-top: 9px; display: block; color: #63738d; font-size: 15px; font-weight: 500; }.detail-copy ul { margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; list-style: none; color: #71809a; font-size: 12px; }.detail-copy li { display: inline-flex; align-items: center; gap: 5px; }.detail-copy li .ui-icon { color: #5c8be9; }.purchase-card { padding: 24px; align-self: center; border: 1px solid #dce5f5; border-radius: 12px; background: rgba(255,255,255,.87); box-shadow: 0 13px 28px rgba(54,83,145,.09); }.purchase-card > small { color: #8190a6; font-size: 11px; }.purchase-card > div { margin: 3px 0 5px; color: #416ce5; }.purchase-card > div b { font-size: 37px; letter-spacing: -1.5px; }.purchase-card > p { margin: 5px 0 13px; color: #75839a; font-size: 11px; line-height: 1.65; }.purchase-card .button { width: 100%; }.sale-status { margin-top: 11px; display: flex; align-items: center; gap: 5px; color: #8491a3; font-size: 10px; }.sale-status i { width: 6px; height: 6px; border-radius: 50%; background: #28b876; }.spec-section { margin-top: 45px; }.spec-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: hidden; border: 1px solid #e1e7ef; border-radius: 10px; background: #fff; }.spec-grid article { min-height: 116px; padding: 19px; display: grid; grid-template-columns: 37px 1fr; grid-template-rows: 22px 1fr; column-gap: 11px; align-items: center; border-right: 1px solid #e8edf3; border-bottom: 1px solid #e8edf3; }.spec-grid article:nth-child(3n) { border-right: 0; }.spec-grid article:nth-last-child(-n + 3) { border-bottom: 0; }.spec-grid article > span { width: 35px; height: 35px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 9px; color: #6786dc; background: #f0f5ff; }.spec-grid small { align-self: end; color: #8a96a6; font-size: 11px; }.spec-grid b { align-self: start; color: #334157; font-size: 15px; }.detail-notes { margin-top: 23px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.detail-notes article { min-height: 122px; padding: 17px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid #e1e7ef; border-radius: 9px; background: #fff; }.detail-notes article > span { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #6384dd; background: #eff5ff; }.detail-notes b { color: #405067; font-size: 13px; }.detail-notes p { margin: 4px 0 0; color: #7d899b; font-size: 12px; line-height: 1.65; }.page-next { margin-top: 30px; display: flex; justify-content: space-between; }.page-next a { color: #4c74dd; font-size: 13px; font-weight: 680; }

.doc-page { padding: 42px 0 60px; display: grid; grid-template-columns: minmax(0,1fr) 220px; gap: 53px; }.doc-content { min-width: 0; }.doc-head { padding: 20px 0 31px; border-bottom: 1px solid #e6edf5; }.doc-head h1 { margin: 0; color: #263956; font-size: clamp(31px,4vw,43px); letter-spacing: -1.8px; }.doc-head > span { max-width: 760px; margin-top: 15px; display: block; color: #677992; font-size: 15px; line-height: 1.9; }.doc-head > small { margin-top: 17px; display: block; color: #95a2b4; font-size: 12px; }.doc-toc { height: fit-content; position: sticky; top: 105px; padding: 18px; border-left: 1px solid #e2e9f3; }.doc-toc b { margin-bottom: 12px; display: block; color: #455875; font-size: 13px; }.doc-toc a { display: block; margin-top: 8px; color: #78879d; font-size: 12px; }.doc-toc a:hover { color: #3b72de; }.callout { margin: 25px 0; padding: 17px 19px; border: 1px solid #d9e8ff; border-left: 4px solid #5990ed; border-radius: 8px; color: #54719d; background: #f3f8ff; }.callout.warning { border-color: #ffe2b8; border-left-color: #ecaa55; color: #826036; background: #fff9ee; }.callout b { color: #3e5c88; font-size: 13px; }.callout p { margin: 5px 0 0; font-size: 13px; line-height: 1.75; }.rule-block { padding: 25px 0; border-bottom: 1px solid #e9eef5; }.rule-block h2 { margin: 0; display: flex; align-items: center; gap: 10px; color: #2c3f5d; font-size: 23px; letter-spacing: -.6px; }.rule-block h2 span { color: #5b85df; font: 700 13px monospace; }.rule-block > p, .rule-block li, .support-section > p { color: #667992; font-size: 14px; line-height: 1.9; }.rule-block ul { padding-left: 19px; }.rule-block li { margin-top: 5px; }.rate-table { margin-top: 16px; overflow: hidden; border: 1px solid #e1e8f1; border-radius: 8px; }.rate-table > div { min-height: 47px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 13px; border-bottom: 1px solid #e7edf3; }.rate-table > div:last-child { border-bottom: 0; }.rate-table b { color: #4b5f7d; font-size: 13px; }.rate-table span { color: #5879bf; font-size: 12px; font-weight: 650; }.code-card { margin: 26px 0; padding: 20px; display: grid; gap: 8px; border-radius: 10px; color: #d6e6ff; background: #16315f; }.code-card b { color: #94c4ff; font-size: 12px; }.code-card code { color: #fff; font-size: 13px; }.guide-section { padding: 25px 0; border-bottom: 1px solid #e9eef5; }.guide-section h2, .support-section h2 { margin: 0; color: #2c3f5d; font-size: 23px; }.guide-section ol { margin: 18px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; }.guide-section li { display: grid; grid-template-columns: 29px 1fr; gap: 10px; }.guide-section li span, .support-list li span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: #4d7ee4; background: #eaf2ff; font: 700 11px monospace; }.guide-section li p { margin: 1px 0 0; color: #667992; font-size: 14px; line-height: 1.8; }
.tutorial-search { margin-top: 25px; display: grid; gap: 7px; color: #607491; font-size: 12px; font-weight: 700; }.tutorial-search input { width: 100%; min-height: 43px; padding: 0 14px; border: 1px solid #dfe7f1; border-radius: 8px; outline: 0; color: #3f516d; }.tutorial-search input:focus { border-color: #86acec; box-shadow: 0 0 0 4px rgba(73,123,227,.1); }.tutorial-tabs { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }.tutorial-tabs button { min-height: 32px; padding: 0 11px; border: 1px solid #dde6f2; border-radius: 5px; color: #718097; background: #fff; font-size: 11px; cursor: pointer; }.tutorial-tabs button.active, .tutorial-tabs button:hover { border-color: #648ee6; color: #fff; background: #4e7ce2; }.tutorial-list { margin-top: 18px; display: grid; gap: 9px; }.tutorial-item { border: 1px solid #e1e8f1; border-radius: 8px; background: #fff; }.tutorial-item summary { padding: 14px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; cursor: pointer; list-style: none; }.tutorial-item summary::-webkit-details-marker { display: none; }.tutorial-item summary > span { color: #7292d6; font: 700 11px monospace; }.tutorial-item small { color: #7190c9; font-size: 10px; }.tutorial-item summary b { display: block; color: #40516c; font-size: 14px; }.tutorial-item summary p { margin: 3px 0 0; color: #8591a1; font-size: 12px; }.tutorial-item summary em { color: #6083ca; font-size: 11px; font-style: normal; }.tutorial-body { margin: 0 14px; padding: 14px 0 16px 48px; border-top: 1px solid #edf1f6; color: #697b94; font-size: 13px; }.tutorial-body > b { color: #4c607e; }.tutorial-body ol { padding-left: 18px; line-height: 1.9; }.tutorial-body p { margin: 10px 0 0; color: #8c98a8; font-size: 12px; }
.support-section { padding: 28px 0; border-bottom: 1px solid #e9eef5; }.channel-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }.channel-grid a { min-height: 137px; padding: 16px; display: grid; grid-template-columns: 40px 1fr; gap: 10px; border: 1px solid #e0e8f3; border-radius: 9px; }.channel-grid a:hover { border-color: #aecaef; box-shadow: var(--shadow); }.channel-grid > a > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; color: #4c7ee3; background: #eaf2ff; font-size: 11px; font-weight: 800; }.channel-grid b { color: #41546f; font-size: 13px; }.channel-grid p { margin: 4px 0 0; color: #7a889b; font-size: 11px; line-height: 1.6; }.channel-grid em { margin-top: 9px; display: block; color: #5579c8; font-size: 11px; font-style: normal; font-weight: 700; }.support-list { margin: 17px 0 0; padding: 0; display: grid; gap: 11px; list-style: none; }.support-list li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }.support-list p { margin: 2px 0 0; color: #667992; font-size: 13px; }.support-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.support-grid article { min-height: 65px; padding: 13px; border: 1px solid #e4ebf3; border-radius: 7px; color: #677a93; font-size: 12px; line-height: 1.7; }
.not-found { min-height: calc(100vh - 260px); padding: 120px 0; text-align: center; }.not-found > span { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; border-radius: 15px; color: #5d86e5; background: #eaf2ff; font-size: 29px; }.not-found h1 { margin: 18px 0 5px; color: #2e405d; }.not-found p { margin: 0 0 21px; color: #7e8b9c; }

.support-fab { position: fixed; right: 22px; bottom: 22px; z-index: 25; display: grid; overflow: hidden; border-radius: 9px; box-shadow: 0 13px 28px rgba(28,63,135,.23); }.support-fab a { min-height: 35px; padding: 0 12px; display: flex; align-items: center; gap: 6px; color: #fff; background: #376edc; font-size: 11px; font-weight: 700; }.support-fab a + a { border-top: 1px solid rgba(255,255,255,.22); background: #275ebf; }.support-fab a:hover { background: #1f53ae; }
.site-footer { width: min(1120px, calc(100% - 48px)); min-height: 176px; margin: 0 auto; padding: 38px 0 24px; display: grid; grid-template-columns: 1fr auto; gap: 20px 80px; border-top: 1px solid #e7edf5; }.footer-brand .brand-mark { width: 34px; height: 34px; font-size: 21px; }.footer-brand b { font-size: 18px; }.site-footer p { max-width: 460px; margin: 13px 0 0; color: #7f8b9b; font-size: 12px; line-height: 1.75; }.site-footer nav { display: flex; align-items: flex-start; gap: 22px; }.site-footer nav a, .site-footer small { color: #7c899a; font-size: 12px; }.site-footer nav a:hover { color: #4774db; }.site-footer small { grid-column: 1 / -1; padding-top: 15px; border-top: 1px solid #f0f2f6; }

@media (max-width: 960px) { .site-header-inner { gap: 22px; }.primary-nav { gap: 14px; }.hero { grid-template-columns: minmax(0,1fr) minmax(400px,.85fr); }.hero-visual { transform: scale(.84); transform-origin: center right; }.home-products, .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.detail-hero { padding: 36px; gap: 28px; }.channel-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .wrap, .site-header-inner, .site-footer { width: min(100% - 30px, 540px); }.site-header { height: auto; }.site-header-inner { min-height: 68px; flex-wrap: wrap; gap: 0 14px; }.brand-mark { width: 34px; height: 34px; font-size: 21px; }.brand b { font-size: 20px; }.nav-toggle { min-height: 34px; margin-left: auto; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid #e1e8f4; border-radius: 6px; color: #5975ad; background: #fff; font-size: 11px; }.primary-nav { width: 100%; height: auto; order: 3; display: none; padding: 4px 0 10px; flex-wrap: wrap; gap: 0; }.primary-nav.is-open { display: flex; }.primary-nav a { width: 33.333%; min-height: 37px; justify-content: flex-start; font-size: 12px; }.primary-nav a.active::after { display: none; }.header-login { margin-left: 0; min-height: 34px; padding: 0 10px; font-size: 11px; }.hero { min-height: auto; grid-template-columns: 1fr; padding-top: 52px; }.hero-copy { width: min(100% - 42px, 540px); margin: 0 auto; }.hero h1 { font-size: 42px; letter-spacing: -2.4px; }.hero-copy > p:not(.eyebrow) { font-size: 14px; }.hero-visual { width: 560px; height: 394px; margin: -8px auto 0; transform: scale(.72); transform-origin: top center; }.facts { width: min(100% - 34px, 540px); padding: 18px 0; grid-template-columns: repeat(2,1fr); }.facts article { min-height: 64px; padding: 9px 12px; border-right: 0; }.facts article:nth-child(odd) { border-right: 1px solid #e8edf5; }.facts b { font-size: 14px; }.facts span { font-size: 10px; line-height: 1.45; }.section { padding: 55px 0; }.section-heading h2 { font-size: 27px; }.product-grid, .home-products, .category-grid, .feature-grid, .step-grid { grid-template-columns: 1fr; }.home-products { margin-top: 23px; }.product-card { min-height: 220px; }.feature-band { padding: 55px 0; }.feature-grid { margin-top: 24px; }.feature-grid article { min-height: 130px; }.journey { padding-bottom: 57px; }.step-grid { margin-top: 24px; }.step-grid article { min-height: 185px; }.catalog-page, .detail-page { padding-top: 24px; }.catalog-intro { padding-top: 25px; }.catalog-intro h1, .category-hero h1, .detail-copy h1 { font-size: 31px; }.category-hero { min-height: 205px; padding: 27px 25px; }.category-hero > span { right: 10%; bottom: 27px; }.region-nav { margin-top: 17px; grid-template-columns: 1fr; }.region-list { margin-top: 30px; gap: 38px; }.region-section h2 { font-size: 18px; }.notice { grid-template-columns: 23px 1fr; }.notice a { grid-column: 2; }.detail-hero { padding: 28px 22px; grid-template-columns: 1fr; }.purchase-card { width: 100%; }.spec-grid, .detail-notes, .support-grid { grid-template-columns: 1fr; }.spec-grid article, .spec-grid article:nth-child(3n), .spec-grid article:nth-last-child(-n + 3) { border-right: 0; border-bottom: 1px solid #e8edf3; }.spec-grid article:last-child { border-bottom: 0; }.page-next { gap: 16px; }.doc-page { padding: 28px 0 50px; display: block; }.doc-toc { display: none; }.doc-head h1 { font-size: 30px; }.rule-block h2, .guide-section h2, .support-section h2 { font-size: 21px; }.tutorial-item summary { grid-template-columns: 32px 1fr; }.tutorial-item summary em { display: none; }.tutorial-body { padding-left: 10px; }.support-fab { right: 12px; bottom: 12px; }.site-footer { min-height: 220px; padding-top: 31px; grid-template-columns: 1fr; gap: 20px; }.site-footer nav { flex-wrap: wrap; gap: 12px 20px; } }

@media (max-width: 700px) {
  .support-fab { bottom: calc(12px + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}