/* Marketing page only. The storefront keeps its existing styles and behavior. */
:root { --blue:#315efb; --ink:#101e3c; --muted:#68758e; --pale:#f1f7ff; --line:#e6ebf5; --font:'PingFang SC','Microsoft YaHei',system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; color:var(--ink); background:#fff; font:16px/1.7 var(--font); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p,figure { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
a,button,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid #254cdd; outline-offset:5px; }
.container { width:calc(100% - 104px); max-width:1280px; margin-inline:auto; }
.skip-link { position:fixed; top:-80px; left:16px; z-index:20; padding:12px 20px; background:#fff; }
.skip-link:focus { top:8px; }
.site-header { background:#fff; position:relative; z-index:5; }
.header-inner { height:76px; display:flex; align-items:center; gap:52px; }
.brand { color:#1955fb; font-size:29px; font-weight:850; letter-spacing:-1px; white-space:nowrap; line-height:1.25; }
.header-inner nav { display:flex; gap:38px; font-size:15px; }
.header-inner nav a { padding:12px 0; color:#46516a; }
.header-inner nav a:hover,.footer-links a:hover { color:var(--blue); }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:54px; padding:12px 32px; border:1px solid transparent; border-radius:10px; font-size:17px; font-weight:650; line-height:1.5; transition:transform .18s,box-shadow .18s,background .18s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:linear-gradient(110deg,#304aff,#167bff); color:#fff; box-shadow:0 6px 16px #315efb19; }
.button-primary:hover { box-shadow:0 8px 22px #315efb35; }
.button-outline { border-color:#537bff; background:#ffffff38; }
.button-outline:hover { background:#fff; }
.header-cta { margin-left:auto; min-height:42px; padding:9px 24px; font-size:14px; border-radius:8px; }
.menu-toggle { display:none; }
.hero { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(115deg,#eff7ff,#e4f0ff 60%,#eaf4ff); }
.hero::before { content:''; position:absolute; z-index:-1; width:110%; height:145%; border-radius:50%; background:#ffffff6b; left:20%; top:-109%; transform:rotate(10deg); }
.hero::after { content:''; position:absolute; z-index:-1; width:95%; height:120%; border-radius:50%; background:#ffffff4d; left:-35%; bottom:-87%; transform:rotate(15deg); }
.hero-inner { min-height:600px; display:grid; grid-template-columns:47% 53%; align-items:center; position:relative; }
.hero-copy { position:relative; z-index:2; padding:50px 0 66px; }
h1 { font-size:clamp(32px,3.36vw,49px); line-height:1.38; letter-spacing:-1.6px; font-weight:850; }
h1+p { font-size:18px; color:#566683; margin-top:21px; line-height:1.85; max-width:510px; }
.hero-actions { display:flex; gap:20px; margin-top:38px; }
.hero-actions .button { min-width:158px; }
.device-scene { height:530px; position:relative; min-width:0; width:calc(100% + 18px); margin-left:-5px; }
.laptop { position:absolute; width:90%; top:48px; right:-4px; }
.laptop-screen { height:397px; border:12px solid #151719; border-bottom-width:17px; border-radius:20px 20px 7px 7px; background:#fff; box-shadow:0 14px 24px #243a6420; overflow:hidden; }
.laptop-base { height:17px; background:linear-gradient(#d6d8db,#969da4 70%,#d5d9de); margin:0 -25px; border-radius:2px 2px 55% 55%; box-shadow:0 12px 12px #30466322; position:relative; }
.laptop-base::before { content:''; position:absolute; left:39%; width:22%; height:5px; background:#8e949d; border-radius:0 0 8px 8px; }
.phone { position:absolute; width:195px; height:407px; left:-6px; bottom:16px; border:7px solid #1a1c1f; border-radius:32px; background:#fff; box-shadow:0 8px 16px #10233c35,inset 0 0 0 1px #ddd; overflow:hidden; padding:8px 7px 18px; }
.phone-camera { position:absolute; top:0; left:50%; transform:translateX(-50%); width:80px; height:16px; background:#1a1c1f; border-radius:0 0 12px 12px; }
.phone-status { display:flex; justify-content:space-between; font-size:8px; font-weight:700; line-height:16px; padding:0 4px; margin-bottom:10px; }
.phone-home { position:absolute; bottom:5px; left:33%; width:34%; height:3px; background:#191b20; border-radius:4px; }
/* Code-native, non-interactive product illustrations; shared public demo sprite. */
.catalog-preview { padding:15px 14px; }
.sample-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:15px; }
.sample-header b { font-size:18px; color:#2159ff; white-space:nowrap; }
.sample-search { display:flex; align-items:center; gap:6px; font-size:9px; color:#9098aa; background:#f4f5f8; border-radius:5px; padding:6px 9px; white-space:nowrap; overflow:hidden; }
.sample-search svg { width:12px; height:12px; flex:none; }
.sample-header .sample-search { width:61%; }
.sample-tabs { display:flex; gap:18px; border-bottom:1px solid #eef0f5; white-space:nowrap; font-size:9px; padding-bottom:8px; margin-bottom:12px; color:#667084; overflow:hidden; }
.sample-tabs .selected { color:var(--blue); position:relative; }
.sample-tabs .selected::after { content:''; height:2px; background:var(--blue); position:absolute; left:0; right:0; bottom:-8px; }
.sample-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px 9px; }
.sample-card { min-width:0; text-align:left; background:#fff; border-radius:5px; overflow:hidden; }
.sample-photo { display:block; position:relative; overflow:hidden; aspect-ratio:1.25; background:#e9e2d6; border-radius:5px; }
.sample-photo::before { content:''; position:absolute; height:100%; aspect-ratio:3/4; max-width:100%; left:50%; transform:translateX(-50%); background:url('../public/images/demo/products.webp') var(--photo-x) var(--photo-y)/400% 200% no-repeat; }
.laptop .sample-photo { aspect-ratio:1.65; }
.sample-card strong { display:block; font-size:9px; font-weight:650; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.5; }
.sample-card small { display:block; font-size:8px; color:#8b93a2; line-height:1.4; }
.sample-price { display:block; color:#ed625d; font-size:11px; font-weight:600; line-height:1.7; }
.sample-price small { display:inline; color:#ed625d; font-size:.75em; font-weight:400; }
.phone .catalog-preview { padding:0; }
.phone .sample-header { margin-bottom:9px; gap:4px; }
.phone .sample-header b { font-size:13px; }
.phone .sample-header>span { font-size:7px; color:#63718a; }
.phone .sample-search { font-size:7px; padding:5px; margin-bottom:9px; gap:3px; }
.phone .sample-tabs { gap:8px; font-size:6px; margin-bottom:9px; padding-bottom:6px; }
.phone .sample-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px 6px; }
.phone .sample-card strong { font-size:7px; }
.phone .sample-card small { font-size:6px; }
.phone .sample-price { font-size:9px; }
.phone .sample-photo { aspect-ratio:.94; }
/* Keep both rows and their labels within each device at every viewport. */
.catalog-preview { display:flex; flex-direction:column; height:100%; }
.catalog-preview .sample-header,.catalog-preview>.sample-search,.catalog-preview .sample-tabs { flex-shrink:0; }
.catalog-preview .sample-grid { flex:1; min-height:0; grid-template-rows:repeat(2,minmax(0,1fr)); }
.catalog-preview .sample-card { display:flex; flex-direction:column; min-height:0; }
.catalog-preview .sample-photo { flex:1; min-height:0; aspect-ratio:auto; }
.catalog-preview .sample-card strong,.catalog-preview .sample-card small,.catalog-preview .sample-price { flex-shrink:0; }
.phone .catalog-preview { height:calc(100% - 28px); }
.features { padding-top:56px; padding-bottom:36px; }
h2 { font-size:35px; line-height:1.4; font-weight:800; letter-spacing:-.7px; }
.features>h2 { text-align:center; margin-bottom:35px; }
.feature-row { display:grid; grid-template-columns:53% 47%; align-items:center; min-height:273px; margin-bottom:16px; }
.feature-copy { padding-left:64px; }
.feature-number { display:block; color:#9eb5ff; font-size:43px; font-style:italic; line-height:1.2; font-weight:750; margin-bottom:12px; }
.feature-copy h3 { font-size:29px; line-height:1.5; font-weight:750; letter-spacing:-.7px; }
.feature-copy p { color:var(--muted); font-size:18px; margin-top:9px; }
.feature-visual { background:linear-gradient(125deg,#f2f7fe,#f7faff); border-radius:14px; padding:20px 24px; min-width:0; overflow:hidden; }
.feature-row-reverse { grid-template-columns:45% 55%; }
.feature-row-reverse .feature-visual { grid-column:2; grid-row:1; }
.feature-row-reverse .feature-copy { grid-column:1; grid-row:1; padding:0 32px 0 0; }
.sample-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; background:#ffffffa6; padding:6px; border-radius:9px; }
.sample-products .sample-card { padding-bottom:7px; border:1px solid #e9ecf1; }
.sample-products .sample-card strong,.sample-products .sample-card small,.sample-products .sample-price { margin-inline:9px; }
.sample-products .sample-card strong { font-size:12px; margin-top:7px; }
.sample-products .sample-card small { font-size:10px; }
.sample-products .sample-price { font-size:13px; }
.sample-products .sample-photo { aspect-ratio:1.4; border-radius:4px 4px 0 0; }
.sample-spec { display:block; width:max-content; max-width:calc(100% - 16px); margin:6px 8px 0; padding:2px 5px; border:1px solid #e7eaf0; border-radius:3px; font-size:9px; color:#778095; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.selection-visual { padding:16px; }
.selection-preview { display:grid; grid-template-columns:minmax(0,45fr) minmax(0,55fr); gap:12px; }
.select-search,.select-list { background:#fff; border:1px solid #edf0f6; border-radius:9px; padding:12px; min-width:0; }
.select-search .sample-tabs { gap:13px; font-size:9px; margin-top:10px; }
.select-product { display:grid; grid-template-columns:46px minmax(0,1fr); gap:8px; margin-top:12px; position:relative; min-height:67px; }
.select-product .sample-photo { aspect-ratio:1; height:46px; }
.select-product strong,.select-item strong { font-size:10px; display:block; line-height:1.5; }
.select-product small,.select-item small { font-size:8px; color:#8b93a2; display:block; }
.sample-action { background:var(--blue); color:#fff; border-radius:4px; padding:5px 8px; font-size:8px; white-space:nowrap; }
.select-product .sample-action { position:absolute; right:0; bottom:0; padding:3px 6px; }
.select-list>b { display:block; font-size:13px; padding-bottom:9px; border-bottom:1px solid #edf0f6; }
.select-item { display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:8px; align-items:center; padding:9px 0; border-bottom:1px solid #f1f3f7; }
.select-item .sample-photo { aspect-ratio:1; }
.sample-count { font-size:10px; background:#f4f6fa; border-radius:3px; padding:3px 5px; white-space:nowrap; }
.sample-export { display:flex; gap:8px; margin-top:10px; }
.sample-export span { border:1px solid #dce4fb; border-radius:4px; color:var(--blue); font-size:9px; padding:3px 9px; }
.admin-visual { padding:14px 16px; }
.admin-preview { display:grid; grid-template-columns:24% 76%; background:#fff; border-radius:9px; overflow:hidden; border:1px solid #ecf0f7; min-height:229px; }
.admin-preview aside { background:#f8faff; display:flex; flex-direction:column; gap:8px; padding:16px 10px; }
.admin-preview aside b { color:var(--blue); font-size:15px; margin-bottom:12px; white-space:nowrap; }
.admin-preview aside span { font-size:11px; padding:6px 10px; }
.admin-preview aside .selected { color:var(--blue); background:#eaf0ff; border-radius:5px; }
.admin-editor { padding:14px; min-width:0; }
.admin-toolbar { display:flex; gap:8px; align-items:center; font-size:9px; border-bottom:1px solid #edf0f6; padding-bottom:12px; }
.admin-toolbar b { font-size:12px; margin-right:auto; white-space:nowrap; }
.admin-toolbar>span:not(.sample-action) { font-size:8px; white-space:nowrap; }
.admin-fields { display:grid; grid-template-columns:minmax(0,36fr) minmax(0,64fr); gap:12px; padding-top:14px; }
.admin-fields>.sample-photo { aspect-ratio:.95; }
.admin-fields small { font-size:8px; color:#7f899b; display:block; }
.sample-input { display:flex; justify-content:space-between; gap:4px; padding:3px 6px; border:1px solid #edf0f6; border-radius:3px; font-size:9px; margin:3px 0 7px; }
.sample-input em { font-style:normal; white-space:nowrap; }
.save-draft { font-size:9px; color:var(--blue); }
.guide-band { background:linear-gradient(110deg,#f1f7ff,#edf5ff); }
.workflow { padding-top:44px; }
.workflow h2 { text-align:center; }
.steps { list-style:none; margin:30px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr 1.15fr; gap:36px; }
.steps li { display:flex; gap:18px; align-items:center; position:relative; min-width:0; }
.step-number { display:grid; place-items:center; background:linear-gradient(130deg,#245bff,#4265ff); border:1px solid #7393ff; color:#fff; border-radius:50%; width:62px; height:62px; flex-shrink:0; font-style:italic; font-size:23px; font-weight:650; box-shadow:0 5px 12px #315efb17; }
.steps h3 { font-size:18px; line-height:1.6; white-space:nowrap; }
.steps p { font-size:12px; color:#7a879d; margin-top:6px; }
.steps li:not(:last-child)::after { content:''; position:absolute; top:24px; height:1px; border-top:1px dashed #bfcefa; left:calc(100% - 3px); width:30px; }
.faq { max-width:1216px; padding:32px 0 28px; }
.faq h2 { text-align:center; font-size:28px; margin-bottom:17px; }
.faq details { position:relative; background:#fff; border-radius:6px; margin:5px 0; padding:0 24px; font-size:14px; }
.faq summary { cursor:pointer; list-style:none; padding:13px 34px 13px 0; min-height:48px; font-weight:600; position:relative; z-index:1; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary svg { position:absolute; right:0; top:15px; width:18px; height:18px; color:#7786a3; transition:transform .2s; }
.faq details[open] summary svg { transform:rotate(180deg); }
.faq details p { position:absolute; left:27%; top:13px; right:65px; color:var(--muted); pointer-events:none; font-size:13px; }
.closing-cta { background:linear-gradient(110deg,#467dfc,#315efb 70%,#347bfc); color:#fff; }
.closing-cta>.container { display:flex; align-items:center; justify-content:center; gap:75px; min-height:102px; padding-block:20px; }
.closing-cta h2 { font-size:28px; }
.button-white { background:#fff; color:var(--blue); min-height:48px; font-size:15px; padding-inline:32px; border-radius:7px; }
.site-footer { min-height:87px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-footer .brand { font-size:26px; }
.footer-links { display:flex; gap:28px; align-items:center; color:#79849a; font-size:13px; }
.footer-links span { border-left:1px solid #dce2ed; padding-left:28px; }
[hidden] { display:none!important; }
@media(min-width:1500px) {
  .hero-inner { min-height:640px; }
  .device-scene { transform:scale(1.03); transform-origin:right center; }
}
@media(max-width:1150px) {
  .container { width:calc(100% - 64px); }
  .header-inner { gap:38px; } .header-inner nav { gap:26px; }
  .hero-inner { min-height:500px; grid-template-columns:46% 54%; }
  .hero-copy { padding-bottom:50px; } h1 { font-size:35px; letter-spacing:-1px; }
  h1+p { font-size:15px; max-width:370px; }
  .hero-actions { gap:14px; margin-top:29px; }
  .hero-actions .button { min-width:132px; padding:12px 22px; font-size:16px; }
  .device-scene { height:440px; } .laptop { top:46px; }
  .laptop-screen { height:325px; border-width:10px; }
  .phone { width:162px; height:336px; border-width:6px; border-radius:26px; bottom:14px; }
  .phone .sample-photo { aspect-ratio:1.1; } .phone .sample-grid { gap:8px 5px; }
  .phone .sample-header b { font-size:11px; } .phone .sample-tabs { gap:6px; }
  .catalog-preview { padding:10px; } .sample-header b { font-size:15px; }
  .sample-header { margin-bottom:10px; } .sample-tabs { gap:13px; font-size:8px; }
  .sample-card strong { font-size:8px; } .sample-grid { gap:8px; }
  .feature-copy { padding-left:45px; } .feature-copy h3 { font-size:26px; }
  .feature-copy p { font-size:16px; } .feature-number { font-size:38px; }
  .feature-row { min-height:246px; } .feature-visual { padding:16px; }
  .select-search,.select-list { padding:9px; }
  .select-product { grid-template-columns:38px minmax(0,1fr); gap:5px; }
  .select-product .sample-photo { height:38px; }
  .select-item { grid-template-columns:33px minmax(0,1fr) auto; gap:5px; }
  .admin-toolbar { gap:5px; } .admin-editor { padding:10px; }
  .steps { gap:24px; } .steps li { gap:12px; }
  .step-number { width:52px; height:52px; font-size:20px; }
  .steps h3 { font-size:16px; } .steps p { font-size:11px; }
  .steps li:not(:last-child)::after { width:17px; }
  .faq details p { font-size:12px; } .faq summary { font-size:13px; }
}
/* Match the approved 992px composition before switching to the stacked tablet layout. */
@media(min-width:901px) and (max-width:1150px) {
  .container { width:90%; }
  .header-inner { height:50px; gap:36px; }
  .brand { font-size:24px; }
  .header-inner nav { font-size:12px; gap:26px; }
  .header-cta { min-height:32px; padding:6px 18px; font-size:12px; border-radius:6px; }
  .hero-inner { min-height:444px; grid-template-columns:45% 55%; }
  .hero-copy { padding:36px 0 45px; }
  h1 { font-size:38px; line-height:1.4; }
  h1+p { font-size:15px; margin-top:18px; }
  .hero-actions { margin-top:27px; }
  .hero-actions .button { min-height:50px; padding:11px 22px; }
  .device-scene { height:414px; }
  .laptop { top:16px; }
  .laptop-screen { height:324px; }
  .phone { bottom:10px; }
  h2 { font-size:29px; }
  .features { padding-top:32px; padding-bottom:16px; }
  .features>h2 { margin-bottom:22px; }
  .feature-row { min-height:190px; margin-bottom:12px; }
  .feature-copy { padding-left:48px; }
  .feature-copy h3 { font-size:25px; }
  .feature-copy p { font-size:16px; margin-top:6px; }
  .feature-number { font-size:35px; margin-bottom:8px; }
  .feature-visual { padding:12px 16px; }
  .sample-products { padding:4px; gap:8px; }
  .sample-products .sample-photo { aspect-ratio:1.55; }
  .sample-products .sample-card strong { font-size:9px; margin-top:4px; }
  .sample-products .sample-card small { font-size:8px; }
  .sample-products .sample-price { font-size:10px; }
  .sample-spec { font-size:7px; margin-top:4px; }
  .selection-visual { padding:12px; }
  .select-product { min-height:53px; margin-top:8px; }
  .select-item { grid-template-columns:30px minmax(0,1fr) auto; padding:6px 0; }
  .select-list>b { font-size:12px; padding-bottom:6px; }
  .select-product strong,.select-item strong { font-size:9px; }
  .sample-export { margin-top:7px; }
  .sample-export span { font-size:8px; padding:2px 7px; }
  .admin-visual { padding:10px 14px; }
  .admin-preview { min-height:172px; }
  .admin-preview aside { padding:10px; gap:4px; }
  .admin-preview aside b { font-size:13px; margin-bottom:7px; }
  .admin-preview aside span { font-size:10px; padding:4px 8px; }
  .admin-fields { padding-top:10px; gap:9px; }
  .admin-toolbar { padding-bottom:8px; }
  .admin-fields small { font-size:7px; }
  .sample-input { font-size:8px; margin:2px 0 5px; padding:2px 5px; }
  .workflow { padding-top:26px; }
  .steps { margin-top:22px; gap:25px; }
  .step-number { width:48px; height:48px; font-size:19px; }
  .steps h3 { font-size:15px; }
  .steps p { font-size:10px; margin-top:4px; }
  .faq { padding:20px 0 14px; }
  .faq h2 { font-size:25px; margin-bottom:12px; }
  .faq summary { min-height:34px; padding-block:7px; font-size:11px; }
  .faq summary svg { top:9px; width:15px; height:15px; }
  .faq details p { top:7px; font-size:11px; }
  .closing-cta>.container { min-height:74px; padding-block:14px; gap:65px; }
  .closing-cta h2 { font-size:24px; }
  .button-white { min-height:40px; padding:8px 26px; font-size:13px; }
  .site-footer { min-height:54px; }
  .site-footer .brand { font-size:24px; }
  .footer-links { font-size:11px; }
}
@media(min-width:701px) and (max-width:900px) {
  .container { width:calc(100% - 48px); } .brand { font-size:25px; }
  .header-inner { gap:26px; height:68px; } .header-inner nav { gap:20px; font-size:13px; }
  .header-cta { padding-inline:16px; }
  .hero-inner { grid-template-columns:1fr; min-height:0; text-align:center; padding-top:12px; }
  .hero-copy { padding:34px 0 0; } h1 { font-size:41px; }
  h1+p { max-width:none; font-size:16px; margin-top:14px; }
  .hero-actions { justify-content:center; margin-top:24px; }
  .device-scene { max-width:560px; width:100%; height:440px; margin:10px auto 0; text-align:left; }
  .feature-copy { padding-left:27px; } .feature-copy h3 { font-size:22px; }
  .feature-copy p { font-size:14px; } .feature-visual { padding:12px; }
  .feature-row { min-height:216px; } .feature-number { font-size:33px; }
  .sample-products .sample-card strong { font-size:9px; }
  .sample-products .sample-card small,.sample-products .sample-spec { font-size:8px; }
  .selection-preview { gap:7px; grid-template-columns:minmax(0,43fr) minmax(0,57fr); }
  .select-product { grid-template-columns:28px minmax(0,1fr); gap:4px; }
  .select-product .sample-photo { height:28px; }
  .select-product strong,.select-item strong { font-size:8px; }
  .select-item { grid-template-columns:25px minmax(0,1fr) auto; gap:4px; }
  .select-item small { font-size:7px; } .sample-count { font-size:8px; }
  .sample-export { gap:3px; } .sample-export span { font-size:7px; padding:3px 5px; }
  .admin-preview { min-height:195px; } .admin-preview aside { padding:12px 7px; }
  .admin-preview aside b { font-size:11px; } .admin-preview aside span { padding:5px; font-size:9px; }
  .admin-toolbar b { font-size:10px; } .admin-toolbar .sample-action { font-size:6px; padding:4px; }
  .admin-toolbar>span:not(.sample-action) { font-size:6px; }
  .admin-fields { gap:6px; } .sample-input { font-size:7px; }
  .steps { gap:18px; } .steps li { align-items:flex-start; gap:10px; }
  .step-number { width:42px; height:42px; font-size:17px; }
  .steps h3 { font-size:14px; } .steps p { font-size:11px; }
  .steps li:not(:last-child)::after { display:none; } h2 { font-size:29px; }
  .faq details p { left:30%; } .footer-links { gap:18px; font-size:11px; }
  .footer-links span { padding-left:18px; }
}
@media(max-width:700px) {
  html { scroll-padding-top:22px; } .container { width:calc(100% - 40px); }
  .header-inner { height:68px; gap:14px; flex-wrap:wrap; align-content:center; }
  .brand { font-size:25px; } .header-cta { margin-left:auto; padding:9px 15px; min-height:40px; font-size:12px; }
  .menu-toggle { display:grid; place-items:center; order:3; background:none; border:1px solid #e4e9f4; width:40px; height:40px; border-radius:7px; padding:8px; color:var(--ink); }
  .header-inner nav { order:4; width:100%; justify-content:center; gap:30px; padding:6px 0 14px; font-size:14px; }
  .header-inner:has(nav) { height:auto; min-height:68px; padding-top:14px; }
  .has-js .header-inner { height:68px; padding-top:0; }
  .has-js .header-inner nav { display:none; position:absolute; left:0; right:0; top:68px; background:#fff; padding:15px 20px; border-top:1px solid var(--line); box-shadow:0 10px 15px #1532690c; }
  .has-js .header-inner nav.is-open { display:flex; }
  .hero-inner { display:block; min-height:0; padding-top:1px; }
  .hero-copy { padding:38px 0 0; text-align:center; }
  h1 { font-size:clamp(27px,7.6vw,39px); line-height:1.4; letter-spacing:-1px; }
  h1+p { font-size:14px; line-height:1.8; margin:17px auto 0; max-width:330px; } h1+p span { display:block; }
  .hero-actions { justify-content:center; margin-top:25px; gap:14px; }
  .hero-actions .button { font-size:15px; min-width:130px; min-height:48px; padding:11px 18px; border-radius:8px; }
  .device-scene { width:100%; max-width:470px; height:auto; aspect-ratio:1.18; margin:16px auto 0; container-type:inline-size; }
  .laptop { width:87%; top:10%; right:0; }
  .laptop-screen { height:53cqw; border:7px solid #16181b; border-bottom-width:10px; border-radius:12px 12px 3px 3px; }
  .laptop-base { height:11px; margin:0 -10px; }
  .phone { width:31%; height:65cqw; left:1%; bottom:4%; padding:5px 4px 11px; border-width:4px; border-radius:20px; }
  .phone-camera { width:45%; height:10px; }
  .phone-status { font-size:5px; line-height:8px; margin-bottom:7px; padding:0 2px; }
  .phone-home { height:2px; bottom:3px; }
  .catalog-preview { padding:7px; } .sample-header { margin-bottom:7px; gap:5px; }
  .sample-header b { font-size:3cqw; }
  .sample-header .sample-search { font-size:1.5cqw; padding:3px; gap:3px; }
  .sample-search svg { width:8px; height:8px; }
  .sample-tabs { font-size:1.5cqw; gap:8px; margin-bottom:7px; padding-bottom:5px; }
  .sample-grid { gap:5px; } .sample-card strong { font-size:1.55cqw; margin-top:3px; }
  .sample-card small { font-size:1.3cqw; } .sample-price { font-size:1.8cqw; }
  .phone .sample-header { margin-bottom:5px; } .phone .sample-header b { font-size:2.5cqw; }
  .phone .sample-header>span { font-size:1.2cqw; }
  .phone .sample-search { font-size:1.4cqw; margin-bottom:6px; padding:3px; gap:2px; }
  .phone .sample-tabs { font-size:1.2cqw; gap:4px; margin-bottom:5px; padding-bottom:5px; }
  .phone .sample-grid { gap:5px 4px; } .phone .sample-card strong { font-size:1.5cqw; margin-top:2px; }
  .phone .sample-card small { font-size:1.2cqw; } .phone .sample-price { font-size:1.7cqw; }
  .phone .sample-photo { aspect-ratio:1; }
  .features { padding-top:35px; padding-bottom:8px; } h2 { font-size:25px; letter-spacing:-.5px; }
  .features>h2 { font-size:clamp(21px,5.7vw,29px); margin-bottom:30px; }
  .feature-row,.feature-row-reverse { display:flex; flex-direction:column; align-items:stretch; min-height:0; gap:20px; margin-bottom:36px; }
  .feature-copy,.feature-row-reverse .feature-copy { padding:0 0 0 48px; order:0; position:relative; }
  .feature-number { position:absolute; left:0; top:0; font-size:29px; line-height:1.4; margin:0; }
  .feature-copy h3 { font-size:23px; line-height:1.5; }
  .feature-copy p { font-size:13px; line-height:1.8; margin-top:6px; }
  .feature-visual { order:1; padding:14px; border-radius:11px; }
  .sample-products { gap:6px; padding:4px; }
  .sample-products .sample-card strong { font-size:9px; margin:5px 5px 0; }
  .sample-products .sample-card small { font-size:8px; margin-inline:5px; }
  .sample-products .sample-price { font-size:10px; margin-inline:5px; }
  .sample-products .sample-photo { aspect-ratio:1; }
  .sample-spec { font-size:7px; margin:5px 4px 0; max-width:calc(100% - 8px); padding:2px; }
  .selection-visual { padding:10px; }
  .selection-preview { gap:8px; grid-template-columns:minmax(0,44fr) minmax(0,56fr); }
  .select-search,.select-list { padding:8px; }
  .select-search .sample-search { font-size:6px; padding:5px; gap:3px; }
  .select-search .sample-tabs { font-size:7px; gap:9px; padding-bottom:7px; margin-bottom:6px; }
  .select-product { grid-template-columns:32px minmax(0,1fr); gap:5px; min-height:59px; margin-top:10px; }
  .select-product .sample-photo { height:32px; }
  .select-product strong,.select-item strong { font-size:8px; }
  .select-product small,.select-item small { font-size:7px; }
  .select-product .sample-price { font-size:10px; } .select-product .sample-action { font-size:7px; }
  .select-list>b { font-size:10px; }
  .select-item { grid-template-columns:28px minmax(0,1fr) auto; gap:5px; padding:8px 0; }
  .sample-count { font-size:8px; padding:2px 3px; }
  .sample-export { gap:4px; } .sample-export span { font-size:7px; padding:3px 5px; }
  .admin-visual { padding:10px; }
  .admin-preview { min-height:200px; grid-template-columns:22% 78%; }
  .admin-preview aside { padding:12px 7px; gap:7px; }
  .admin-preview aside b { font-size:11px; margin-bottom:8px; }
  .admin-preview aside span { font-size:8px; padding:5px; }
  .admin-editor { padding:10px; } .admin-toolbar { gap:5px; padding-bottom:10px; }
  .admin-toolbar b { font-size:10px; }
  .admin-toolbar>span:not(.sample-action) { font-size:6px; }
  .admin-toolbar .sample-action { font-size:6px; padding:4px; }
  .admin-fields { gap:7px; } .admin-fields small { font-size:7px; }
  .sample-input { font-size:7px; padding:3px; margin-bottom:6px; } .save-draft { font-size:8px; }
  .workflow { padding-top:32px; } .workflow h2 { font-size:23px; }
  .steps { display:flex; flex-direction:column; gap:23px; margin-top:27px; padding-inline:5px; }
  .steps li { gap:17px; align-items:center; }
  .step-number { width:48px; height:48px; font-size:19px; }
  .steps h3 { font-size:17px; } .steps p { font-size:12px; margin-top:3px; }
  .steps li:not(:last-child)::after { top:54px; left:24px; right:auto; width:0; height:12px; border-top:0; border-left:1px dashed #c1d0f5; }
  .faq { padding:34px 0 28px; } .faq h2 { font-size:23px; margin-bottom:18px; }
  .faq details { padding:0 15px; margin:8px 0; border-radius:7px; }
  .faq summary { font-size:13px; padding-top:13px; padding-bottom:13px; }
  .faq details p { position:static; padding:0 20px 14px 0; font-size:12px; line-height:1.8; }
  .closing-cta>.container { flex-direction:column; gap:18px; padding:28px 0; }
  .closing-cta h2 { font-size:25px; } .button-white { min-height:44px; font-size:14px; padding-inline:30px; }
  .site-footer { padding:25px 0; flex-direction:column; gap:17px; }
  .site-footer .brand { font-size:24px; }
  .footer-links { justify-content:center; gap:12px 24px; flex-wrap:wrap; font-size:12px; }
  .footer-links a { padding:7px 0; }
  .footer-links span { flex-basis:100%; text-align:center; border:0; padding:0; font-size:11px; }
}
@media(max-width:360px) {
  .container { width:calc(100% - 32px); } .brand { font-size:22px; }
  .header-inner { gap:10px; } .header-cta { font-size:11px; padding-inline:12px; }
  .menu-toggle { width:36px; height:38px; }
  .hero-actions .button { min-width:120px; font-size:14px; } .hero-actions { gap:12px; }
  h1+p { font-size:13px; }
  .feature-copy,.feature-row-reverse .feature-copy { padding-left:42px; }
  .feature-copy h3 { font-size:20px; } .feature-copy p { font-size:12px; }
  .sample-products .sample-card strong { font-size:8px; }
  .sample-products .sample-card small { font-size:7px; } .sample-spec { font-size:6px; }
  .select-product { grid-template-columns:24px minmax(0,1fr); }
  .select-product .sample-photo { height:24px; }
  .select-product strong,.select-item strong { font-size:7px; }
  .select-item { grid-template-columns:23px minmax(0,1fr) auto; gap:3px; }
  .select-item small { font-size:6px; } .admin-preview aside b { font-size:9px; }
  .admin-toolbar b { font-size:8px; } .admin-toolbar { gap:3px; }
  .admin-toolbar>span:not(.sample-action),.admin-toolbar .sample-action { font-size:5px; }
  .workflow h2 { font-size:21px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; }
}