:root {
      --navy-950: #06111f;
      --navy-900: #081729;
      --navy-850: #0b1d31;
      --navy-800: #102640;
      --navy-700: #173653;
      --cream-100: #fbf8f3;
      --cream-200: #f4eee5;
      --white: #ffffff;
      --ink: #122033;
      --ink-soft: #506177;
      --line-dark: rgba(255,255,255,.12);
      --line-light: #e7ded2;
      --copper: #ed9853;
      --copper-dark: #d57b36;
      --mint: #63d6bd;
      --mint-soft: #dff7f1;
      --blue-soft: #dfeeff;
      --shadow-lg: 0 32px 90px rgba(5, 17, 31, .28);
      --shadow-md: 0 18px 50px rgba(11, 29, 49, .12);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 16px;
      --wrap: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--cream-100);
      font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      overflow-x: hidden;
    }
    body.menu-open { overflow: hidden; }
    img, svg { max-width: 100%; }
    button, input { font: inherit; }
    a { color: inherit; }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { letter-spacing: -.04em; line-height: 1.08; }
    h1 { font-size: clamp(3rem, 7vw, 6.6rem); }
    h2 { font-size: clamp(2.2rem, 4.7vw, 4.6rem); }
    h3 { font-size: 1.25rem; }

    .wrap { width: min(var(--wrap), calc(100% - 40px)); margin-inline: auto; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
      color: var(--copper-dark);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 99px; }
    .section-copy { max-width: 700px; color: var(--ink-soft); font-size: 1.08rem; }
    .section-head { margin-bottom: 48px; }
    .section-head.center { max-width: 820px; margin-inline: auto; margin-bottom: 54px; text-align: center; }
    .section-head.center .section-copy { margin-inline: auto; }
    .section { padding: 112px 0; }
    .section-dark { color: var(--white); background: var(--navy-950); }
    .section-dark .section-copy { color: #aebfd2; }
    .section-cream { background: var(--cream-200); }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 0 24px;
      border: 1px solid transparent;
      border-radius: 14px;
      background: var(--copper);
      color: var(--navy-950);
      box-shadow: 0 10px 30px rgba(237, 152, 83, .22);
      font-size: .96rem;
      font-weight: 800;
      text-decoration: none;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    }
    .btn:hover { transform: translateY(-2px); background: #f4a563; box-shadow: 0 15px 40px rgba(237, 152, 83, .3); }
    .btn:focus-visible, .nav-link:focus-visible, summary:focus-visible { outline: 3px solid rgba(99,214,189,.7); outline-offset: 3px; }
    .btn-secondary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--white); box-shadow: none; }
    .btn-secondary:hover { background: rgba(255,255,255,.11); box-shadow: none; }
    .btn-light { background: var(--white); color: var(--navy-950); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
    .btn-light:hover { background: var(--cream-100); }
    .btn-sm { min-height: 42px; padding: 0 18px; border-radius: 11px; font-size: .88rem; }
    .arrow { width: 18px; height: 18px; transition: transform .2s ease; }
    .btn:hover .arrow { transform: translateX(3px); }

    .announcement {
      background: linear-gradient(90deg, #4fd0b7, #7ed9c7);
      color: var(--navy-950);
      font-size: .82rem;
      font-weight: 800;
    }
    .announcement .wrap { display: flex; min-height: 36px; align-items: center; justify-content: center; gap: 10px; text-align: center; }
    .announcement-badge { padding: 3px 8px; border-radius: 99px; background: rgba(6,17,31,.12); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

    .nav {
      position: sticky;
      top: 0;
      z-index: 60;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(8,23,41,.84);
      backdrop-filter: blur(18px);
    }
    .nav-inner { display: flex; height: 72px; align-items: center; justify-content: space-between; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--white); font-weight: 800; text-decoration: none; letter-spacing: -.03em; }
    .brand-mark {
      position: relative;
      width: 34px;
      height: 34px;
      overflow: hidden;
      border-radius: 10px;
      background: linear-gradient(145deg, var(--copper), #f7b477);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
    }
    .brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 7px; border: 2px solid var(--navy-950); border-radius: 50%; transform: skewX(-18deg); }
    .brand-mark::after { inset: 12px 7px 7px 12px; opacity: .45; }
    .brand-name { font-size: 1.08rem; }
    .brand-name span { color: var(--copper); }
    .nav-links { display: flex; align-items: center; gap: 28px; }
    .nav-link { color: #b8c6d6; font-size: .89rem; font-weight: 700; text-decoration: none; transition: color .2s ease; }
    .nav-link:hover { color: var(--white); }
    .nav-actions { display: flex; align-items: center; gap: 10px; }
    .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: 12px; background: rgba(255,255,255,.05); color: var(--white); cursor: pointer; }
    .menu-toggle span { display: block; width: 18px; height: 2px; margin: 4px auto; border-radius: 99px; background: currentColor; transition: .2s ease; }
    .mobile-menu { display: none; }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 74px 0 78px;
      color: var(--white);
      background:
        radial-gradient(circle at 78% 12%, rgba(60, 139, 185, .27), transparent 28%),
        radial-gradient(circle at 15% 72%, rgba(237, 152, 83, .13), transparent 29%),
        linear-gradient(180deg, var(--navy-900), var(--navy-950));
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .22;
      background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
      background-size: 52px 52px;
      mask-image: linear-gradient(to bottom, black, transparent 85%);
    }
    .hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(450px, .98fr); align-items: center; gap: 64px; }
    .hero-copy { padding: 34px 0; }
    .beta-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 22px;
      padding: 7px 12px;
      border: 1px solid rgba(99,214,189,.28);
      border-radius: 999px;
      background: rgba(99,214,189,.08);
      color: #baf4e7;
      font-size: .79rem;
      font-weight: 800;
    }
    .beta-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(99,214,189,.12); }
    .hero h1 { max-width: 780px; margin-bottom: 24px; font-weight: 800; }
    .hero h1 .highlight { color: var(--copper); }
    .hero-lead { max-width: 690px; margin-bottom: 30px; color: #b7c6d7; font-size: clamp(1.05rem, 1.5vw, 1.24rem); }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
    .hero-trust { display: flex; flex-wrap: wrap; gap: 18px; color: #93a8bd; font-size: .82rem; font-weight: 700; }
    .hero-trust span { display: inline-flex; align-items: center; gap: 8px; }
    .hero-trust svg { width: 15px; color: var(--mint); }

    .product-stage { position: relative; min-height: 590px; }
    .glow { position: absolute; inset: 12% 8% 4%; border-radius: 50%; background: rgba(64,137,182,.22); filter: blur(60px); }
    .browser {
      position: absolute;
      inset: 26px 0 40px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 24px;
      background: #f7f9fb;
      box-shadow: var(--shadow-lg);
      transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
      transform-origin: center right;
    }
    .browser-top { display: flex; height: 44px; align-items: center; gap: 7px; padding: 0 15px; border-bottom: 1px solid #e3e9ef; background: #fff; }
    .dot { width: 8px; height: 8px; border-radius: 50%; background: #dbe1e8; }
    .address { width: 46%; height: 20px; margin-left: 12px; border-radius: 99px; background: #f0f3f6; }
    .app { display: grid; grid-template-columns: 34% 1fr; height: calc(100% - 44px); }
    .side-panel { padding: 17px; border-right: 1px solid #e6ebf0; background: #fff; }
    .mini-brand { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; color: var(--navy-900); font-size: .68rem; font-weight: 800; }
    .mini-brand .brand-mark { width: 22px; height: 22px; border-radius: 6px; }
    .control-title { margin: 12px 0 7px; color: #738196; font-size: .5rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .search-field, .select-field { height: 28px; border: 1px solid #e2e8ee; border-radius: 7px; background: #fafbfd; }
    .select-field { margin-top: 7px; }
    .toggle-row { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; color: #405067; font-size: .57rem; font-weight: 700; }
    .switch { width: 25px; height: 14px; padding: 2px; border-radius: 99px; background: var(--mint); }
    .switch::after { content: ""; display: block; width: 10px; height: 10px; margin-left: auto; border-radius: 50%; background: #fff; }
    .layer-list { display: grid; gap: 6px; margin-top: 8px; }
    .layer-item { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 8px; border: 1px solid #e8edf2; border-radius: 7px; color: #536276; font-size: .54rem; font-weight: 700; }
    .layer-swatch { width: 9px; height: 9px; border-radius: 3px; background: var(--navy-700); }
    .layer-item:nth-child(2) .layer-swatch { background: #69bfc1; }
    .layer-item:nth-child(3) .layer-swatch { background: #82b681; }
    .layer-item:nth-child(4) .layer-swatch { background: var(--copper); }
    .export-button { display: flex; height: 31px; margin-top: 13px; align-items: center; justify-content: center; border-radius: 8px; background: var(--navy-900); color: #fff; font-size: .57rem; font-weight: 800; }
    .canvas { position: relative; overflow: hidden; background: #edf2f5; }
    .canvas-toolbar { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; gap: 6px; }
    .tool { width: 25px; height: 25px; border: 1px solid #dfe6eb; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
    .map-board { position: absolute; inset: 34px 32px 42px; display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #e8dfd0, #f5eee5); box-shadow: 0 20px 35px rgba(37,49,61,.18); transform: rotate(-1.6deg); }
    .map-board::before { content: ""; position: absolute; inset: 12px; border: 7px solid #173047; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
    .map-art { position: absolute; inset: 30px; }
    .water-shape { fill: #65c7cd; }
    .road-main { fill: none; stroke: #15314b; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
    .road-thin { fill: none; stroke: #15314b; stroke-width: 1.25; stroke-linecap: round; opacity: .92; }
    .park { fill: #8fbd85; opacity: .92; }
    .pin { fill: var(--copper); stroke: #fff; stroke-width: 1.4; }
    .map-title { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); color: var(--navy-900); font-size: .7rem; font-weight: 800; letter-spacing: .2em; }
    .float-card {
      position: absolute;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 165px;
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 15px;
      background: rgba(14,36,59,.92);
      box-shadow: 0 18px 38px rgba(0,0,0,.24);
      backdrop-filter: blur(16px);
      color: var(--white);
    }
    .float-card .icon { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 10px; background: rgba(99,214,189,.13); color: var(--mint); }
    .float-card b { display: block; font-size: .72rem; }
    .float-card small { display: block; color: #9bb0c4; font-size: .58rem; }
    .fc-one { top: 0; right: -24px; }
    .fc-two { left: -36px; bottom: 72px; }
    .fc-three { right: 16px; bottom: 4px; }

    .compatibility { color: #9fb0c2; background: var(--navy-950); border-top: 1px solid rgba(255,255,255,.06); }
    .compat-inner { display: flex; min-height: 82px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 34px; }
    .compat-label { color: #6f849a; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .compat-name { font-size: .98rem; font-weight: 800; letter-spacing: -.02em; }

    .metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: -38px; position: relative; z-index: 4; }
    .metric { padding: 26px 28px; border: 1px solid var(--line-light); border-radius: 19px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-md); }
    .metric strong { display: block; margin-bottom: 5px; color: var(--navy-900); font-size: 1.65rem; letter-spacing: -.05em; }
    .metric span { color: var(--ink-soft); font-size: .86rem; font-weight: 600; }

    .problem-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
    .problem-list { display: grid; gap: 12px; margin-top: 28px; }
    .problem-item { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-soft); font-size: .93rem; }
    .problem-item i { display: grid; flex: 0 0 24px; height: 24px; place-items: center; border-radius: 50%; background: #ffe7d5; color: var(--copper-dark); font-style: normal; font-weight: 800; }
    .product-stack { position: relative; min-height: 470px; }
    .stack-card { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--line-light); border-radius: 28px; background: #fff; box-shadow: var(--shadow-md); }
    .stack-card:nth-child(1) { transform: translate(-20px, 24px) rotate(-4deg); background: #d8eee9; }
    .stack-card:nth-child(2) { transform: translate(20px, -12px) rotate(3deg); background: #f0dcc8; }
    .stack-card:nth-child(3) { transform: translate(0, 0); }
    .stack-top { display: flex; height: 53px; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #e8edf0; color: var(--navy-900); font-size: .76rem; font-weight: 800; }
    .stack-content { display: grid; height: calc(100% - 53px); place-items: center; background: #f3f6f7; }
    .physical-map { position: relative; width: 72%; aspect-ratio: 1; border: 9px solid #183249; border-radius: 8px; background: #e9dfcf; box-shadow: 0 25px 40px rgba(17,37,58,.18); transform: rotate(-2deg); }
    .physical-map svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
    .physical-label { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); color: #183249; font-size: .65rem; font-weight: 800; letter-spacing: .16em; }
    .stack-tag { position: absolute; right: 18px; top: 70px; padding: 8px 10px; border-radius: 9px; background: var(--navy-900); color: #fff; font-size: .66rem; font-weight: 800; }

    .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
    .bento-card { position: relative; overflow: hidden; min-height: 400px; padding: 34px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); background: var(--navy-850); }
    .bento-card h3 { margin-bottom: 12px; font-size: 1.55rem; }
    .bento-card p { max-width: 450px; color: #a9bbcd; font-size: .94rem; }
    .bento-number { display: inline-grid; width: 34px; height: 34px; margin-bottom: 72px; place-items: center; border-radius: 10px; background: rgba(237,152,83,.14); color: var(--copper); font-size: .72rem; font-weight: 800; }
    .bento-big { grid-column: span 7; }
    .bento-small { grid-column: span 5; }
    .layer-visual { position: absolute; right: -3%; bottom: -9%; width: 61%; aspect-ratio: 1.15; }
    .layer-sheet { position: absolute; inset: 18%; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: #18344f; box-shadow: 0 20px 40px rgba(0,0,0,.24); }
    .layer-sheet:nth-child(1) { transform: translate(-26px, 28px); background: #ed9853; }
    .layer-sheet:nth-child(2) { transform: translate(-13px, 14px); background: #76c9be; }
    .layer-sheet:nth-child(3) { background: #e8dfd1; }
    .layer-sheet svg { width: 100%; height: 100%; padding: 12%; }
    .viewer-visual { position: absolute; right: 20px; bottom: -20px; width: 72%; aspect-ratio: 1.35; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: radial-gradient(circle at 50% 40%, #21445f, #0c2034 70%); box-shadow: 0 25px 50px rgba(0,0,0,.24); transform: rotate(2deg); }
    .viewer-layer { position: absolute; left: 50%; width: 64%; aspect-ratio: 1.4; border: 3px solid #e4d7c5; border-radius: 4px; transform: translateX(-50%) rotateX(58deg) rotateZ(-8deg); box-shadow: 0 12px 18px rgba(0,0,0,.25); }
    .viewer-layer:nth-child(1) { bottom: 20%; background: #d9c7ae; }
    .viewer-layer:nth-child(2) { bottom: 32%; background: #69c4c3; }
    .viewer-layer:nth-child(3) { bottom: 44%; background: #e9e0d2; }
    .viewer-layer:nth-child(4) { bottom: 56%; border-color: #e69552; background: transparent; }
    .store-visual { position: absolute; right: -28px; bottom: -25px; width: 72%; aspect-ratio: 1.4; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: #f8fafb; color: var(--ink); box-shadow: 0 25px 50px rgba(0,0,0,.26); transform: rotate(-3deg); }
    .store-head { height: 38px; border-bottom: 1px solid #e5e9ed; }
    .store-content { display: grid; grid-template-columns: 48% 1fr; height: calc(100% - 38px); }
    .store-map { margin: 16px; border-radius: 10px; background: #e9dfd0; }
    .store-options { padding: 17px 14px 14px 0; }
    .fake-line { height: 7px; margin-bottom: 8px; border-radius: 99px; background: #dfe5e9; }
    .fake-line.short { width: 58%; }
    .fake-button { height: 25px; margin-top: 13px; border-radius: 7px; background: var(--copper); }

    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .step { position: relative; min-height: 280px; padding: 30px; border: 1px solid var(--line-light); border-radius: 22px; background: var(--white); box-shadow: 0 12px 35px rgba(17,37,58,.06); }
    .step::after { content: ""; position: absolute; top: 56px; right: -24px; width: 26px; height: 2px; background: var(--line-light); }
    .step:last-child::after { display: none; }
    .step-index { display: grid; width: 42px; height: 42px; margin-bottom: 46px; place-items: center; border-radius: 13px; background: var(--navy-900); color: var(--white); font-size: .78rem; font-weight: 800; }
    .step h3 { margin-bottom: 10px; }
    .step p { color: var(--ink-soft); font-size: .92rem; }
    .step-chip { display: inline-flex; margin-top: 15px; padding: 6px 9px; border-radius: 8px; background: var(--mint-soft); color: #127262; font-size: .67rem; font-weight: 800; }

    .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .product-card { overflow: hidden; border: 1px solid var(--line-light); border-radius: 22px; background: var(--white); transition: transform .25s ease, box-shadow .25s ease; }
    .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
    .product-thumb { position: relative; display: grid; min-height: 235px; place-items: center; overflow: hidden; background: linear-gradient(145deg, #edf2f2, #f9f6f0); }
    .product-thumb::after { content: ""; position: absolute; inset: auto 15% -36% 15%; height: 50%; border-radius: 50%; background: rgba(19,47,72,.12); filter: blur(28px); }
    .mini-product { position: relative; z-index: 2; width: 58%; aspect-ratio: 1; border: 7px solid #183249; border-radius: 5px; background: #e9dfcf; box-shadow: 0 19px 30px rgba(17,37,58,.2); transform: rotate(-2deg); }
    .mini-product.round { border-radius: 50%; }
    .mini-product.wide { width: 72%; aspect-ratio: 1.55; }
    .mini-product.keyholder { width: 72%; aspect-ratio: 1.8; border-width: 5px; }
    .mini-product svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
    /* [2026-07-23] Realne grafiki: screeny z żywego designera + zdjęcia produktów sklepu zamiast ilustracji SVG */
    .map-photo { position: absolute; inset: 30px; width: calc(100% - 60px); height: calc(100% - 60px); object-fit: cover; border-radius: 4px; }
    .phys-photo { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: cover; border-radius: 3px; }
    .bento-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 22px 44px rgba(0,0,0,.26); }
    .prod-photo { position: relative; z-index: 2; width: 78%; max-height: 84%; object-fit: contain; border-radius: 10px; box-shadow: 0 18px 30px rgba(17,37,58,.22); transform: rotate(-1.5deg); }
    /* [2026-07-23 v2] Hero = pełny screen Exploded; karty bento: tekst u góry, obraz w kontenerze pod spodem — NIGDY nie zasłania napisów */
    .product-stage { min-height: auto !important; display: flex !important; align-items: center; }
    .hero-shot { display: block; width: 100% !important; height: auto !important; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); box-shadow: var(--shadow-lg); background: #f2ece2; }
    .bento-card { display: flex !important; flex-direction: column; }
    .bento-number { margin-bottom: 16px !important; }
    .layer-visual, .viewer-visual, .store-visual { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; transform: none !important; background: transparent !important; flex: 1 1 auto !important; margin-top: 20px !important; min-height: 190px !important; border-radius: 16px; overflow: hidden; }
    .bento-photo { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 16px; box-shadow: none !important; background: #f7f3ea; }
    .hooks { position: absolute; z-index: 4; left: 50%; bottom: -15px; display: flex; gap: 18px; transform: translateX(-50%); }
    .hooks i { display: block; width: 4px; height: 24px; border-radius: 0 0 5px 5px; background: #183249; }
    .product-copy { padding: 24px; }
    .product-copy h3 { margin-bottom: 9px; font-size: 1.15rem; }
    .product-copy p { margin-bottom: 0; color: var(--ink-soft); font-size: .87rem; }
    .tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; }
    .tag { padding: 5px 8px; border-radius: 7px; background: var(--cream-200); color: #657287; font-size: .62rem; font-weight: 800; text-transform: uppercase; }

    .dense-grid { display: grid; grid-template-columns: .83fr 1.17fr; gap: 58px; align-items: center; }
    .dense-visual { overflow: hidden; border: 1px solid var(--line-light); border-radius: 25px; background: #fff; box-shadow: var(--shadow-md); }
    .dense-top { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid var(--line-light); font-size: .76rem; font-weight: 800; }
    .dense-panels { display: grid; grid-template-columns: 1fr 1fr; }
    .dense-panel { position: relative; min-height: 380px; padding: 18px; background: #f6f2ec; }
    .dense-panel + .dense-panel { border-left: 1px solid var(--line-light); background: #eaf1f2; }
    .dense-label { position: absolute; z-index: 3; top: 14px; left: 14px; padding: 6px 9px; border-radius: 8px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.08); color: var(--ink); font-size: .62rem; font-weight: 800; }
    .dense-map { position: absolute; inset: 58px 18px 18px; }
    .messy path { stroke: #6d7884; stroke-width: .75; opacity: .65; }
    .clean path { stroke: #173653; stroke-width: 2.1; }
    .clean .thin { stroke-width: .8; opacity: .8; }
    .dense-points { display: grid; gap: 14px; margin-top: 27px; }
    .dense-point { display: flex; gap: 11px; color: var(--ink-soft); font-size: .91rem; }
    .dense-point svg { flex: 0 0 19px; color: #1b8e7c; }

    .store-section { position: relative; overflow: hidden; }
    .store-section::after { content: ""; position: absolute; top: 4%; right: -8%; width: 470px; height: 470px; border-radius: 50%; background: rgba(99,214,189,.09); filter: blur(10px); }
    .store-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .store-benefits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 30px; }
    .store-benefit { padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.04); }
    .store-benefit b { display: block; margin-bottom: 4px; font-size: .82rem; }
    .store-benefit span { color: #9bb0c4; font-size: .74rem; }
    .shop-browser { position: relative; min-height: 530px; }
    .shop-window { position: absolute; inset: 18px 0 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 25px; background: #fff; box-shadow: var(--shadow-lg); transform: rotate(2deg); }
    .shop-top { display: flex; height: 48px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #e5e9ed; color: var(--ink); }
    .shop-logo { font-size: .75rem; font-weight: 800; }
    .shop-nav { display: flex; gap: 12px; color: #7c8998; font-size: .48rem; font-weight: 700; }
    .shop-body { display: grid; grid-template-columns: 53% 1fr; height: calc(100% - 48px); }
    .shop-preview { position: relative; display: grid; place-items: center; background: #f0ece5; }
    .shop-preview .mini-product { width: 64%; }
    .shop-form { padding: 24px 20px; color: var(--ink); }
    .shop-form h4 { margin: 0 0 7px; font-size: .9rem; }
    .shop-form p { color: #7d8997; font-size: .56rem; }
    .option-label { margin: 13px 0 6px; color: #657385; font-size: .48rem; font-weight: 800; text-transform: uppercase; }
    .option-buttons { display: flex; gap: 5px; }
    .option-buttons i { display: block; width: 31px; height: 24px; border: 1px solid #dfe5e9; border-radius: 6px; }
    .shop-cta { display: grid; height: 34px; margin-top: 17px; place-items: center; border-radius: 8px; background: var(--copper); color: var(--navy-950); font-size: .55rem; font-weight: 800; }
    .code-card { position: absolute; right: -26px; bottom: 0; width: 190px; padding: 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 15px; background: rgba(16,38,64,.95); box-shadow: 0 18px 40px rgba(0,0,0,.25); }
    .code-card small { display: block; margin-bottom: 7px; color: #8fa4b9; font-size: .59rem; font-weight: 800; text-transform: uppercase; }
    .code { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }

    .audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .audience-card { padding: 26px 22px; border: 1px solid var(--line-light); border-radius: 19px; background: #fff; text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
    .audience-card:hover { transform: translateY(-4px); border-color: #d8a16f; }
    .audience-icon { display: grid; width: 42px; height: 42px; margin-bottom: 34px; place-items: center; border-radius: 13px; background: var(--cream-200); color: var(--navy-900); }
    .audience-card h3 { margin-bottom: 8px; font-size: 1.02rem; }
    .audience-card p { margin-bottom: 18px; color: var(--ink-soft); font-size: .82rem; }
    .audience-link { color: var(--copper-dark); font-size: .74rem; font-weight: 800; }

    .compare-wrap { overflow-x: auto; border: 1px solid var(--line-light); border-radius: 22px; background: #fff; box-shadow: 0 14px 40px rgba(17,37,58,.07); }
    .compare { width: 100%; min-width: 780px; border-collapse: collapse; }
    .compare th, .compare td { padding: 16px 18px; border-bottom: 1px solid #ece6dd; text-align: left; font-size: .83rem; }
    .compare th { color: #687689; background: #fbfaf7; font-size: .69rem; letter-spacing: .08em; text-transform: uppercase; }
    .compare th:nth-child(2), .compare td:nth-child(2) { background: #f0faf7; }
    .compare td:first-child { font-weight: 700; }
    .compare tr:last-child td { border-bottom: 0; }
    .yes { color: #167967; font-weight: 800; }
    .partial { color: #8a7058; font-weight: 700; }
    .no { color: #9aa5b2; }

    .founder-card { display: grid; grid-template-columns: .42fr 1fr; overflow: hidden; border-radius: 28px; background: var(--navy-900); color: var(--white); box-shadow: var(--shadow-md); }
    .founder-art { position: relative; min-height: 390px; overflow: hidden; background: linear-gradient(150deg, #1d405e, #0a1c30); }
    .founder-art::before { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
    .laser-line { position: absolute; left: 10%; right: 10%; top: 49%; height: 2px; background: linear-gradient(90deg, transparent, var(--copper), transparent); box-shadow: 0 0 18px var(--copper); transform: rotate(-13deg); }
    .founder-map { position: absolute; width: 58%; aspect-ratio: 1; left: 21%; top: 20%; border: 8px solid #d9c8af; background: #18344f; box-shadow: 0 26px 40px rgba(0,0,0,.3); transform: rotate(-6deg); }
    .founder-map svg { width: 100%; height: 100%; padding: 10%; }
    .founder-copy { display: flex; flex-direction: column; justify-content: center; padding: 52px; }
    .founder-copy blockquote { margin: 0 0 24px; font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.18; }
    .founder-copy p { color: #a9bacb; }
    .founder-name { display: flex; align-items: center; gap: 12px; color: #fff; font-size: .8rem; font-weight: 800; }
    .founder-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--copper); color: var(--navy-950); }

    .faq-list { max-width: 860px; margin-inline: auto; }
    .faq-item { border-bottom: 1px solid var(--line-light); }
    .faq-item:first-child { border-top: 1px solid var(--line-light); }
    .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 2px; cursor: pointer; list-style: none; font-weight: 800; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: "+"; display: grid; flex: 0 0 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--cream-200); color: var(--navy-900); font-size: 1.1rem; }
    .faq-item[open] summary::after { content: "−"; }
    .faq-item p { max-width: 760px; padding: 0 42px 24px 2px; color: var(--ink-soft); font-size: .92rem; }

    .final-cta { padding: 100px 0; background: var(--cream-100); }
    .cta-box { position: relative; overflow: hidden; padding: 76px 40px; border-radius: 32px; background: var(--navy-900); color: #fff; text-align: center; box-shadow: var(--shadow-md); }
    .cta-box::before, .cta-box::after { content: ""; position: absolute; border-radius: 50%; filter: blur(2px); }
    .cta-box::before { width: 330px; height: 330px; left: -140px; top: -150px; background: rgba(237,152,83,.16); }
    .cta-box::after { width: 380px; height: 380px; right: -170px; bottom: -190px; background: rgba(99,214,189,.14); }
    .cta-inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
    .cta-inner h2 { margin-bottom: 17px; }
    .cta-inner p { margin-bottom: 28px; color: #adbdce; }
    .cta-meta { margin-top: 16px; color: #8fa3b7; font-size: .78rem; font-weight: 700; }

    footer { padding: 54px 0 26px; color: #92a6ba; background: var(--navy-950); }
    .footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding-bottom: 42px; }
    .footer-brand p { max-width: 310px; margin-top: 16px; color: #8196aa; font-size: .82rem; }
    .footer-col h4 { margin: 0 0 14px; color: #fff; font-size: .77rem; letter-spacing: .08em; text-transform: uppercase; }
    .footer-col a { display: block; margin: 9px 0; color: #91a5b9; font-size: .8rem; text-decoration: none; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: .72rem; }

    .mobile-cta { display: none; }
    .reveal { opacity: 1; transform: none; }
    .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
    .js .reveal.visible { opacity: 1; transform: none; }

    @media (max-width: 1050px) {
      .nav-links { display: none; }
      .menu-toggle { display: block; }
      .nav-actions .nav-link { display: none; }
      .mobile-menu {
        display: grid;
        position: fixed;
        inset: 108px 0 0;
        z-index: 55;
        display: grid;
        align-content: start;
        gap: 8px;
        padding: 24px 20px;
        background: var(--navy-950);
        transform: translateY(-120%);
        transition: transform .25s ease;
      }
      .mobile-menu.open { transform: none; }
      .mobile-menu a { padding: 15px 6px; border-bottom: 1px solid rgba(255,255,255,.08); color: #d9e3ed; font-weight: 700; text-decoration: none; }
      .hero-grid { grid-template-columns: 1fr; gap: 24px; }
      .hero-copy { max-width: 780px; padding-bottom: 0; }
      .product-stage { min-height: 590px; max-width: 720px; width: 100%; margin-inline: auto; }
      .browser { transform: perspective(1400px) rotateY(-3deg); }
      .problem-grid, .dense-grid, .store-grid { grid-template-columns: 1fr; }
      .product-stack { max-width: 670px; width: 100%; margin: 0 auto 20px; }
      .bento-big, .bento-small { grid-column: span 12; }
      .bento-card { min-height: 380px; }
      .product-grid { grid-template-columns: repeat(2, 1fr); }
      .audience-grid { grid-template-columns: repeat(2, 1fr); }
      .founder-card { grid-template-columns: .55fr 1fr; }
    }

    @media (max-width: 760px) {
      .wrap { width: min(100% - 28px, var(--wrap)); }
      .section { padding: 82px 0; }
      .announcement .wrap { min-height: 44px; }
      .nav-inner { height: 64px; }
      .mobile-menu { inset: 108px 0 0; }
      .hero { padding: 52px 0 40px; }
      .hero h1 { font-size: clamp(2.85rem, 14vw, 4.8rem); }
      .hero-actions .btn { width: 100%; }
      .product-stage { min-height: 470px; }
      .browser { inset: 18px 0 30px; border-radius: 18px; transform: none; }
      .app { grid-template-columns: 31% 1fr; }
      .side-panel { padding: 10px; }
      .control-title { margin: 8px 0 4px; }
      .layer-item { padding-inline: 5px; }
      .map-board { inset: 25px 17px 32px; }
      .float-card { min-width: 132px; padding: 9px 10px; }
      .float-card .icon { flex-basis: 29px; height: 29px; }
      .fc-one { top: 0; right: -6px; }
      .fc-two { left: -4px; bottom: 50px; }
      .fc-three { display: none; }
      .metric-grid { grid-template-columns: 1fr; margin-top: 18px; }
      .metric { padding: 21px 22px; }
      .problem-grid, .store-grid, .dense-grid { gap: 40px; }
      .product-stack { min-height: 390px; }
      .bento-card { min-height: 450px; padding: 27px; }
      .bento-number { margin-bottom: 38px; }
      .layer-visual { width: 80%; }
      .viewer-visual, .store-visual { width: 85%; }
      .steps { grid-template-columns: 1fr; }
      .step { min-height: auto; }
      .step::after { display: none; }
      .step-index { margin-bottom: 30px; }
      .product-grid { grid-template-columns: 1fr; }
      .dense-panels { grid-template-columns: 1fr; }
      .dense-panel + .dense-panel { border-left: 0; border-top: 1px solid var(--line-light); }
      .store-benefits { grid-template-columns: 1fr; }
      .shop-browser { min-height: 430px; }
      .shop-body { grid-template-columns: 1fr; }
      .shop-form { display: none; }
      .code-card { right: 5px; }
      .audience-grid { grid-template-columns: 1fr; }
      .founder-card { grid-template-columns: 1fr; }
      .founder-art { min-height: 300px; }
      .founder-copy { padding: 34px 28px; }
      .cta-box { padding: 58px 22px; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
      .footer-bottom { align-items: flex-start; flex-direction: column; }
      .mobile-cta {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 50;
        display: flex;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        background: var(--copper);
        box-shadow: 0 14px 35px rgba(0,0,0,.22);
        color: var(--navy-950);
        font-size: .88rem;
        font-weight: 800;
        text-decoration: none;
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px);
        transition: opacity .2s ease, transform .2s ease;
      }
      .mobile-cta.show { opacity: 1; pointer-events: auto; transform: none; }
      footer { padding-bottom: 88px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      .reveal { opacity: 1; transform: none; }
    }

/* ===== SEO content pages (articles, styles, blog, cities) 2026-07-23 ===== */
.prose{max-width:820px;margin-inline:auto}
.prose h2{margin:44px 0 14px;font-size:1.9rem}
.prose h3{margin:28px 0 10px;font-size:1.2rem}
.prose p{margin:0 0 16px;color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--ink-soft);line-height:1.7}
.prose li{margin:6px 0}
.prose a{color:var(--copper-dark);font-weight:700;text-decoration:none}
.prose a:hover{text-decoration:underline}
.prose strong{color:var(--ink)}
.prose blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--copper);background:#fff;border-radius:0 12px 12px 0;color:var(--ink);font-weight:600}
.lead-note{font-size:1.12rem;color:var(--ink);font-weight:600;margin:0 auto 26px;max-width:820px}
.styles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.style-card{display:block;overflow:hidden;border:1px solid var(--line-light);border-radius:20px;background:#fff;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.style-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.style-card img{width:100%;height:200px;object-fit:cover;display:block;background:#f0ece5}
.style-card .sc-body{padding:18px 20px}
.style-card h3{margin:0 0 6px;font-size:1.12rem}
.style-card p{margin:0;color:var(--ink-soft);font-size:.86rem}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line-light);border-radius:20px;background:#fff;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.post-card .pc-cat{color:var(--copper-dark);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.post-card .pc-body{padding:22px}
.post-card h3{margin:0 0 8px;font-size:1.12rem;letter-spacing:-.02em}
.post-card p{margin:0;color:var(--ink-soft);font-size:.86rem}
.breadcrumbs{max-width:820px;margin:0 auto 18px;font-size:.8rem;color:var(--ink-soft)}
.breadcrumbs a{color:var(--copper-dark);text-decoration:none;font-weight:700}
.article-head{padding:60px 0 0}
.article-head h1{max-width:820px;margin:8px auto 0;font-size:clamp(2rem,4vw,3.05rem)}
.article-meta{max-width:820px;margin:14px auto 0;color:var(--ink-soft);font-size:.85rem;font-weight:700}
.article-hero-img{width:min(980px,100%);margin:34px auto 0;display:block;border-radius:20px;border:1px solid var(--line-light)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.info-card{padding:22px;border:1px solid var(--line-light);border-radius:18px;background:#fff}
.info-card b{display:block;margin-bottom:6px;color:var(--navy-900);font-size:1.05rem}
.info-card span{color:var(--ink-soft);font-size:.9rem}
.city-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.city-grid a{padding:12px 14px;border:1px solid var(--line-light);border-radius:12px;background:#fff;text-decoration:none;color:var(--ink);font-weight:700;font-size:.85rem;transition:border-color .2s ease,color .2s ease}
.city-grid a:hover{border-color:var(--copper);color:var(--copper-dark)}
.city-preview{width:min(760px,100%);margin:0 auto;display:block;border-radius:18px;border:1px solid var(--line-light)}
@media(max-width:900px){.styles-grid,.post-grid,.info-grid{grid-template-columns:1fr 1fr}.city-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.styles-grid,.post-grid,.info-grid{grid-template-columns:1fr}.city-grid{grid-template-columns:1fr 1fr}}

/* language switcher */
.lang-switch{display:inline-flex;gap:2px;margin-right:4px}
.lang-switch a,.lang-switch span{padding:5px 7px;border-radius:7px;font-size:.72rem;font-weight:800;color:#8aa0b6;text-decoration:none;transition:color .2s ease,background .2s ease}
.lang-switch a:hover{color:#fff}
.lang-switch a[aria-current]{background:rgba(255,255,255,.1);color:#fff}
.lang-switch .off{opacity:.28}
@media(max-width:1050px){.lang-switch{display:none}}

/* flag language switcher */
.lang-switch a,.lang-switch span{display:inline-flex;align-items:center;gap:5px}
.lang-switch .fl{font-size:.98rem;line-height:1}
.lang-mob{display:none}
@media(max-width:1050px){.lang-mob{display:flex !important;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}.lang-mob a,.lang-mob span{color:#d9e3ed;font-size:.9rem}}

/* ===== home: demo video + audience row ===== */
.home-video{max-width:960px;margin:0 auto;position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-light);box-shadow:var(--shadow-lg);background:#0d1b2e}
.home-video video{width:100%;display:block}
.vsteps{position:absolute;top:14px;left:14px;display:flex;gap:8px;z-index:2;pointer-events:none}
.vsteps span{font-size:.72rem;font-weight:800;letter-spacing:.04em;color:#fff;background:rgba(6,17,31,.72);border:1px solid rgba(255,255,255,.18);padding:7px 13px;border-radius:99px;opacity:.5;transition:opacity .3s ease,background .3s ease}
.vsteps span.on{opacity:1;background:var(--copper);border-color:var(--copper);color:#06111f}
.vcap{padding:14px 18px;color:#9fb0c2;font-size:.85rem;text-align:center;background:#0d1b2e}
.audience-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.aud{display:block;padding:24px 22px;border:1px solid var(--line-light);border-radius:18px;background:#fff;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}
.aud:hover{transform:translateY(-4px);border-color:var(--copper)}
.aud .ic{display:grid;width:42px;height:42px;place-items:center;border-radius:12px;background:var(--cream-200);color:var(--navy-900);margin-bottom:14px;font-size:1.05rem;font-weight:800}
.aud h3{margin:0 0 6px;font-size:1.02rem}.aud p{margin:0 0 12px;color:var(--ink-soft);font-size:.85rem}
.aud .lk{color:var(--copper-dark);font-size:.78rem;font-weight:800}
@media(max-width:900px){.audience-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.audience-row{grid-template-columns:1fr}}