/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {
        *, :before, :after, ::backdrop {
            --tw-rotate-x:initial;
            --tw-rotate-y:initial;
            --tw-rotate-z:initial;
            --tw-skew-x:initial;
            --tw-skew-y:initial;
            --tw-blur:initial;
            --tw-brightness:initial;
            --tw-contrast:initial;
            --tw-grayscale:initial;
            --tw-hue-rotate:initial;
            --tw-invert:initial;
            --tw-opacity:initial;
            --tw-saturate:initial;
            --tw-sepia:initial;
            --tw-drop-shadow:initial;
            --tw-drop-shadow-color:initial;
            --tw-drop-shadow-alpha:100%;
            --tw-drop-shadow-size:initial
        }
    }
}
@layer theme {
    :root, :host {
        --font-sans:ui-sans-serif,  system-ui,  sans-serif,  "Apple Color Emoji",  "Segoe UI Emoji",  "Segoe UI Symbol",  "Noto Color Emoji";
        --font-mono:ui-monospace,  SFMono-Regular,  Menlo,  Monaco,  Consolas,  "Liberation Mono",  "Courier New",  monospace;
        --spacing:.25rem;
        --default-font-family:var(--font-sans);
        --default-mono-font-family:var(--font-mono)
    }
}
@layer base {
    *, :after, :before, ::backdrop {
        box-sizing:border-box;
        border:0 solid;
        margin:0;
        padding:0
    }
    ::file-selector-button {
        box-sizing:border-box;
        border:0 solid;
        margin:0;
        padding:0
    }
    html, :host {
        -webkit-text-size-adjust:100%;
        tab-size:4;
        line-height:1.5;
        font-family:var(--default-font-family, ui-sans-serif,  system-ui,  sans-serif,  "Apple Color Emoji",  "Segoe UI Emoji",  "Segoe UI Symbol",  "Noto Color Emoji");
        font-feature-settings:var(--default-font-feature-settings, normal);
        font-variation-settings:var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color:transparent
    }
    hr {
        height:0;
        color:inherit;
        border-top-width:1px
    }
    abbr:where([title]) {
        -webkit-text-decoration:underline dotted;
        text-decoration:underline dotted
    }
    h1, h2, h3, h4, h5, h6 {
        font-size:inherit;
        font-weight:inherit
    }
    a {
        color:inherit;
        -webkit-text-decoration:inherit;
        -webkit-text-decoration:inherit;
        -webkit-text-decoration:inherit;
        -webkit-text-decoration:inherit;
        text-decoration:inherit
    }
    b, strong {
        font-weight:bolder
    }
    code, kbd, samp, pre {
        font-family:var(--default-mono-font-family, ui-monospace,  SFMono-Regular,  Menlo,  Monaco,  Consolas,  "Liberation Mono",  "Courier New",  monospace);
        font-feature-settings:var(--default-mono-font-feature-settings, normal);
        font-variation-settings:var(--default-mono-font-variation-settings, normal);
        font-size:1em
    }
    small {
        font-size:80%
    }
    sub, sup {
        vertical-align:baseline;
        font-size:75%;
        line-height:0;
        position:relative
    }
    sub {
        bottom:-.25em
    }
    sup {
        top:-.5em
    }
    table {
        text-indent:0;
        border-color:inherit;
        border-collapse:collapse
    }
    :-moz-focusring {
        outline:auto
    }
    progress {
        vertical-align:baseline
    }
    summary {
        display:list-item
    }
    ol, ul, menu {
        list-style:none
    }
    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align:middle;
        display:block
    }
    img, video {
        max-width:100%;
        height:auto
    }
    button, input, select, optgroup, textarea {
        font:inherit;
        font-feature-settings:inherit;
        font-variation-settings:inherit;
        letter-spacing:inherit;
        color:inherit;
        opacity:1;
        background-color:#0000;
        border-radius:0
    }
    ::file-selector-button {
        font:inherit;
        font-feature-settings:inherit;
        font-variation-settings:inherit;
        letter-spacing:inherit;
        color:inherit;
        opacity:1;
        background-color:#0000;
        border-radius:0
    }
    :where(select:is([multiple], [size])) optgroup {
        font-weight:bolder
    }
    :where(select:is([multiple], [size])) optgroup option {
        padding-inline-start:20px
    }
    ::file-selector-button {
        margin-inline-end:4px
    }
    ::placeholder {
        opacity:1
    }
    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color:currentColor
        }
        @supports (color:color-mix(in lab,  red,  red)) {
            ::placeholder {
                color:color-mix(in oklab,  currentcolor 50%,  transparent)
            }
        }
    }
    textarea {
        resize:vertical
    }
    ::-webkit-search-decoration {
        -webkit-appearance:none
    }
    ::-webkit-date-and-time-value {
        min-height:1lh;
        text-align:inherit
    }
    ::-webkit-datetime-edit {
        display:inline-flex
    }
    ::-webkit-datetime-edit-fields-wrapper {
        padding:0
    }
    ::-webkit-datetime-edit {
        padding-block:0
    }
    ::-webkit-datetime-edit-year-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-month-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-day-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-hour-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-minute-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-second-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-millisecond-field {
        padding-block:0
    }
    ::-webkit-datetime-edit-meridiem-field {
        padding-block:0
    }
    ::-webkit-calendar-picker-indicator {
        line-height:1
    }
    :-moz-ui-invalid {
        box-shadow:none
    }
    button, input:where([type=button], [type=reset], [type=submit]) {
        appearance:button
    }
    ::file-selector-button {
        appearance:button
    }
    ::-webkit-inner-spin-button {
        height:auto
    }
    ::-webkit-outer-spin-button {
        height:auto
    }
    [hidden]:where(:not([hidden=until-found])) {
        display:none!important
    }
}
@layer components;
@layer utilities {
    .collapse {
        visibility:collapse
    }
    .visible {
        visibility:visible
    }
    .absolute {
        position:absolute
    }
    .relative {
        position:relative
    }
    .static {
        position:static
    }
    .start {
        inset-inline-start:var(--spacing)
    }
    .end {
        inset-inline-end:var(--spacing)
    }
    .isolate {
        isolation:isolate
    }
    .container {
        width:100%
    }
    @media (width>=40rem) {
        .container {
            max-width:40rem
        }
    }
    @media (width>=48rem) {
        .container {
            max-width:48rem
        }
    }
    @media (width>=64rem) {
        .container {
            max-width:64rem
        }
    }
    @media (width>=80rem) {
        .container {
            max-width:80rem
        }
    }
    @media (width>=96rem) {
        .container {
            max-width:96rem
        }
    }
    .block {
        display:block
    }
    .contents {
        display:contents
    }
    .flex {
        display:flex
    }
    .hidden {
        display:none
    }
    .inline {
        display:inline
    }
    .table {
        display:table
    }
    .transform {
        transform:var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )
    }
    .resize {
        resize:both
    }
    .italic {
        font-style:italic
    }
    .antialiased {
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale
    }
    .blur {
        --tw-blur:blur(8px);
        filter:var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, )
    }
}
:root {
    --site-header-height:76px;
    --catalog-page-height:calc(100svh - var(--site-header-height));
    --ink:#05070b;
    --ink-soft:#0b1019;
    --paper:#f6f7f9;
    --white:#fff;
    --muted:#9ba6b6;
    --cyan:#1da8ff;
    --cyan-bright:#61cbff;
    --orange:#ff4b19
}
* {
    box-sizing:border-box
}
html {
    background:var(--ink)
}
body {
    background:var(--ink);
    color:var(--white);
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    overflow-x:hidden
}
main {
    padding-top:var(--site-header-height)
}
a {
    color:inherit;
    text-decoration:none
}
button, a {
    -webkit-tap-highlight-color:transparent
}
.site-header {
    z-index:50;
    height:var(--site-header-height);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    background:#05070bc2;
    border-bottom:1px solid #ffffff17;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    padding:0 4.5vw;
    display:grid;
    position:fixed;
    top:0;
    left:0;
    right:0
}
.site-header>a:first-child {
    justify-self:start;
    align-items:center;
    height:100%;
    display:flex
}
.navbar-logo {
    object-fit:contain;
    width:118px;
    height:auto;
    display:block
}
.site-header nav {
    color:#cbd3df;
    letter-spacing:.12em;
    text-transform:uppercase;
    gap:30px;
    font-size:12px;
    display:flex
}
.site-header nav a, .header-cta {
    transition:color .18s, border-color .18s
}
.site-header nav a:hover {
    color:var(--white)
}
.header-cta {
    letter-spacing:.1em;
    text-transform:uppercase;
    border:1px solid #ffffff40;
    border-radius:999px;
    justify-self:end;
    padding:10px 16px;
    font-size:11px
}
.header-cta:hover {
    border-color:var(--cyan);
    color:var(--cyan-bright)
}
.ommi-mark {
    align-items:center;
    width:max-content;
    line-height:0;
    display:flex
}
.mark-logo {
    object-fit:contain;
    width:70px;
    height:auto;
    display:block
}
.ommi-mark.compact .mark-logo {
    width:94px
}
.mark-glyph {
    clip-path:polygon(20% 0, 80% 0, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0 80%, 0 20%);
    border:9px solid #e9edf2;
    width:56px;
    height:50px
}
.compact .mark-glyph {
    border-width:4px;
    width:24px;
    height:22px
}
.mark-word {
    letter-spacing:.08em;
    font-size:20px;
    font-weight:900
}
.compact .mark-word {
    font-size:14px
}
.page-rail {
    z-index:40;
    right:clamp(18px, 2vw, 28px);
    top:calc(var(--site-header-height) + (100svh - var(--site-header-height)) / 2);
    flex-direction:column;
    align-items:center;
    gap:14px;
    width:34px;
    display:flex;
    position:fixed;
    transform:translateY(-50%)
}
.page-count {
    writing-mode:vertical-rl;
    color:#ffffff73;
    font-family:var(--font-geist-mono),  monospace;
    letter-spacing:.16em;
    font-size:10px
}
.rail-track {
    background:#ffffff2e;
    width:1px;
    height:104px
}
.rail-track span {
    background:var(--cyan);
    width:100%;
    transition:height .3s;
    display:block
}
.rail-buttons {
    gap:4px;
    display:grid
}
.rail-buttons button {
    width:28px;
    height:28px;
    color:var(--white);
    cursor:pointer;
    background:#02050abf;
    border:1px solid #ffffff21;
    border-radius:50%
}
.rail-buttons button:disabled {
    cursor:default;
    opacity:.24
}
.catalog-page {
    min-height:var(--catalog-page-height);
    isolation:isolate;
    scroll-margin-top:var(--site-header-height);
    border-bottom:1px solid #ffffff14;
    padding:118px max(7vw, 72px) 70px;
    display:grid;
    position:relative;
    overflow:hidden
}
.catalog-page:after {
    content:attr(data-page);
    color:#ffffff59;
    font-family:var(--font-geist-mono),  monospace;
    letter-spacing:.14em;
    font-size:11px;
    position:absolute;
    bottom:30px;
    right:76px
}
.eyebrow {
    color:var(--cyan-bright);
    letter-spacing:.22em;
    text-transform:uppercase;
    margin:0 0 22px;
    font-size:11px;
    font-weight:700
}
.cover-page {
    background:radial-gradient(circle at 73% 48%, #0c6eff42, #0000 28%), linear-gradient(128deg, #090c13 0%, #030509 62%, #020308 100%);
    grid-template-columns:48% 52%;
    align-items:center
}
.cover-page:before {
    content:"";
    z-index:-2;
    background-image:linear-gradient(#ffffff06 1px, #0000 1px), linear-gradient(90deg, #ffffff06 1px, #0000 1px);
    background-size:42px 42px;
    position:absolute;
    inset:0;
    -webkit-mask-image:linear-gradient(90deg, #000, #0000 68%);
    mask-image:linear-gradient(90deg, #000, #0000 68%)
}
.cover-copy {
    z-index:2;
    width:min(680px, 100%);
    position:relative
}
.cover-copy .ommi-mark {
    margin-bottom:42px
}
.cover-copy .mark-logo {
    width:clamp(68px, 5vw, 82px)
}
.cover-copy h1 {
    letter-spacing:-.055em;
    margin:0;
    font-size:clamp(50px, 5.8vw, 90px);
    font-weight:300;
    line-height:.94
}
.cover-copy h1 span {
    color:#b9c5d3
}
.micro-tagline {
    color:#aab5c4;
    letter-spacing:.24em;
    margin:18px 0 0;
    font-size:10px
}
.orange-rule {
    background:var(--orange);
    width:38px;
    height:4px;
    margin:46px 0 20px
}
.cover-intro {
    color:#9ba6b6;
    letter-spacing:.08em;
    text-transform:uppercase;
    max-width:300px;
    font-size:12px;
    line-height:1.8
}
.hero-benefits {
    grid-template-columns:repeat(4, minmax(0, 1fr));
    align-items:stretch;
    width:min(620px, 100%);
    margin-top:48px;
    display:grid
}
.hero-benefit {
    text-align:center;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;
    min-width:0;
    min-height:124px;
    padding:0 22px;
    transition:transform .22s;
    display:flex
}
.hero-benefit+.hero-benefit {
    border-left:1px solid #1da8ff59
}
.hero-benefit-icon {
    color:#aab5c4;
    filter:drop-shadow(0 0 #0000);
    flex:none;
    width:40px;
    height:40px;
    margin-bottom:16px;
    transition:color .22s, filter .22s
}
.hero-benefit-copy {
    flex-direction:column;
    align-items:center;
    min-width:0;
    line-height:1.35;
    display:flex
}
.hero-benefit-title, .hero-benefit-subtitle {
    text-transform:uppercase
}
.hero-benefit-title {
    color:var(--white);
    letter-spacing:.04em;
    font-size:14px;
    font-weight:600
}
.hero-benefit-subtitle {
    color:#748195;
    letter-spacing:.08em;
    font-size:13px
}
.hero-benefit:hover {
    transform:translateY(-4px)
}
.hero-benefit:hover .hero-benefit-icon {
    color:var(--cyan-bright);
    filter:drop-shadow(0 0 8px #1da8ff47)
}
@media (prefers-reduced-motion:reduce) {
    .hero-benefit, .hero-benefit-icon {
        transition:none
    }
    .hero-benefit:hover {
        transform:none
    }
}
.beyond {
    color:#5f6b7a;
    letter-spacing:.24em;
    text-transform:uppercase;
    margin-top:42px;
    font-size:9px
}
.tech-orbit {
    z-index:-1;
    aspect-ratio:1;
    border:1px solid #48beff57;
    border-radius:50%;
    width:min(78vw, 920px);
    position:absolute;
    top:50%;
    right:-18vw;
    transform:translateY(-50%);
    box-shadow:0 0 30px #2fa6ff59, inset 0 0 40px #257cff3d
}
.tech-orbit:before, .tech-orbit:after, .tech-orbit i {
    content:"";
    border-radius:50%;
    position:absolute
}
.tech-orbit:before {
    border:2px solid #50c9ff73;
    inset:9%;
    box-shadow:0 0 22px #46c8ff8c
}
.tech-orbit:after {
    border:1px dashed #58c1ff80;
    inset:20%
}
.tech-orbit i {
    border:1px solid #ffffff2e;
    inset:31%
}
.tech-orbit i:nth-child(2) {
    border-color:#389dff66;
    inset:38%
}
.tech-orbit i:nth-child(3) {
    background:radial-gradient(circle, #1998ff80, #0000 68%);
    inset:47%
}
.vertical-year, .vertical-category {
    color:#ffffff52;
    letter-spacing:.28em;
    writing-mode:vertical-rl;
    font-size:10px;
    position:absolute;
    top:50%;
    right:5.8vw;
    transform:translateY(-50%)
}
.domain {
    color:#ffffff6b;
    letter-spacing:.06em;
    font-size:12px;
    position:absolute;
    bottom:34px;
    right:7vw
}
.story-page {
    min-height:var(--catalog-page-height);
    background-color:#030506;
    background-image:linear-gradient(#010305fc 0%, #010305f0 30%, #010305b8 56%, #01030561 100%), url(../assets/brand/shenzhen-tech-city.webp);
    background-position:bottom;
    background-repeat:no-repeat;
    background-size:cover;
    padding-top:clamp(120px, 14vh, 168px);
    padding-bottom:clamp(340px, 43vh, 500px);
    display:block
}
.story-copy {
    z-index:2;
    width:100%;
    max-width:920px;
    position:relative
}
.story-copy h2 {
    letter-spacing:-.035em;
    max-width:900px;
    margin:0;
    font-size:clamp(34px, 3vw, 52px);
    font-weight:400;
    line-height:1.1
}
.category-copy h2 {
    letter-spacing:-.04em;
    margin:0;
    font-size:clamp(42px, 5vw, 78px);
    font-weight:400;
    line-height:1
}
.story-copy>p:not(.eyebrow) {
    color:#ffffffc7;
    max-width:880px;
    margin:24px 0 0;
    font-size:clamp(16px, 1.2vw, 20px);
    line-height:1.55
}
.story-copy strong {
    color:var(--orange)
}
.watermark {
    z-index:1;
    aspect-ratio:1.16;
    opacity:.045;
    pointer-events:none;
    -webkit-user-select:none;
    user-select:none;
    width:clamp(360px, 40vw, 720px);
    position:absolute;
    top:8%;
    left:50%;
    overflow:hidden;
    transform:translate(-50%)
}
.watermark img {
    filter:grayscale()brightness(1.8);
    width:100%;
    height:auto;
    display:block
}
.asset-placeholder {
    background:linear-gradient(135deg, #0000 0 49.8%, #ffffff1a 50%, #0000 50.2%), linear-gradient(45deg, #0000 0 49.8%, #ffffff1a 50%, #0000 50.2%), #0c111a;
    border:1px solid #ffffff21;
    border-radius:3px;
    place-items:center;
    display:grid;
    position:relative;
    overflow:hidden
}
.asset-placeholder.blue {
    background:radial-gradient(circle, #157eff4f, #0000 42%), linear-gradient(135deg, #0000 0 49.8%, #5ac6ff2e 50%, #0000 50.2%), linear-gradient(45deg, #0000 0 49.8%, #5ac6ff2e 50%, #0000 50.2%), #07101d
}
.asset-placeholder.light {
    background:linear-gradient(135deg, #0000 0 49.8%, #dce2e8 50%, #0000 50.2%), linear-gradient(45deg, #0000 0 49.8%, #dce2e8 50%, #0000 50.2%), #f5f7f9;
    border-color:#dfe4ea
}
.asset-placeholder span {
    color:#ffffff87;
    font-family:var(--font-geist-mono),  monospace;
    letter-spacing:.06em;
    background:#00000057;
    border:1px solid #ffffff1f;
    border-radius:999px;
    padding:8px 12px;
    font-size:10px
}
.asset-placeholder>img {
    opacity:1;
    object-fit:contain;
    width:100%;
    height:100%;
    position:absolute;
    inset:0
}
.asset-placeholder.has-asset {
    background:0 0
}
.asset-placeholder.has-asset>img {
    opacity:1
}
.asset-placeholder.has-asset>span {
    display:none
}
.lifestyle-bg>img, .category-visual>img, .audio-lifestyle-asset>img, .ecosystem-visual>img {
    object-fit:cover
}
.asset-placeholder.light span {
    color:#697586;
    background:#fffc;
    border-color:#d8dde4
}
.reliability-page {
    width:100%;
    height:var(--catalog-page-height);
    min-height:var(--catalog-page-height);
    background:#000;
    border-bottom:0;
    grid-template-rows:clamp(180px, 24%, 240px) minmax(0, 1fr);
    padding:0;
    display:grid;
    overflow:hidden
}
.reliability-page:after {
    display:none
}
.reliability-copy {
    text-align:center;
    background:#000;
    justify-content:center;
    align-items:center;
    width:100%;
    min-height:0;
    padding:60px 7vw;
    display:flex
}
.reliability-copy h2 {
    color:#fff;
    letter-spacing:0;
    max-width:960px;
    margin:0 auto;
    font-size:clamp(20px, 1.7vw, 30px);
    font-weight:600;
    line-height:1.25
}
.reliability-image {
    object-fit:cover;
    object-position:center;
    width:100%;
    height:100%;
    min-height:0;
    display:block
}
.category-page {
    background:linear-gradient(90deg, #000000f5, #0000005c), radial-gradient(circle at 72% 42%, #0a5aad 0%, #061426 35%, #030407 70%);
    grid-template-columns:.7fr 1.3fr;
    align-items:center;
    gap:7vw
}
.category-copy {
    z-index:2;
    position:relative
}
.category-copy h2 {
    text-transform:uppercase
}
.category-copy p:not(.eyebrow) {
    color:#9aa6b5;
    max-width:420px;
    font-size:15px;
    line-height:1.7
}
.category-copy a {
    border-bottom:1px solid var(--cyan);
    color:var(--cyan-bright);
    letter-spacing:.16em;
    text-transform:uppercase;
    align-items:center;
    gap:24px;
    margin-top:24px;
    padding-bottom:8px;
    font-size:11px;
    display:inline-flex
}
.category-visual {
    min-height:70vh
}
.feature-category {
    width:100%;
    min-height:var(--catalog-page-height);
    background-color:#010205;
    background-image:url(../assets/feature-phone/feature-phone-family.webp);
    background-position:50%;
    background-repeat:no-repeat;
    background-size:contain;
    padding:0;
    display:block
}
.light-page {
    color:#10141b;
    background:#f5f6f8;
    border-bottom-color:#dfe3e8
}
.light-page:after {
    color:#0f141b57
}
.lifestyle-page {
    background:#030609;
    padding:0;
    display:block
}
.lifestyle-bg {
    z-index:-2;
    border:0;
    border-radius:0;
    min-height:100%;
    position:absolute;
    inset:0
}
.lifestyle-page:before {
    content:"";
    z-index:-1;
    background:linear-gradient(#00000014 0%, #0000 48%, #000000db 100%), linear-gradient(90deg, #00000070, #0000 60%);
    position:absolute;
    inset:0
}
.model-corner {
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    background:#03060a9e;
    border:1px solid #ffffff2e;
    align-items:center;
    gap:18px;
    padding:14px 20px;
    display:flex;
    position:absolute;
    top:112px;
    left:max(7vw, 72px)
}
.model-corner strong {
    letter-spacing:.04em;
    font-size:24px
}
.lifestyle-caption {
    text-align:right;
    max-width:760px;
    position:absolute;
    bottom:8vh;
    right:max(9vw, 100px)
}
.lifestyle-caption span {
    color:var(--cyan-bright);
    letter-spacing:.2em;
    text-transform:uppercase;
    font-size:11px;
    font-weight:700
}
.lifestyle-caption h2 {
    letter-spacing:-.05em;
    margin:16px 0 0;
    font-size:clamp(38px, 5vw, 76px);
    font-weight:400;
    line-height:.98
}
.m11-lifestyle .lifestyle-caption h2 {
    max-width:850px
}
.m22-lifestyle:before, .m33-lifestyle:before {
    background:linear-gradient(#0000001f, #0000 48%, #000000e6), linear-gradient(90deg, #0000001f, #07193457)
}
.phone-detail-page {
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:6vw
}
.phone-gallery {
    grid-template-rows:minmax(44vh, 1fr) 105px;
    gap:14px;
    min-height:67vh;
    display:grid
}
.phone-main {
    min-height:44vh
}
.phone-thumbs {
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
    display:grid
}
.phone-thumbs .asset-placeholder span {
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:88%;
    overflow:hidden
}
.phone-copy .eyebrow, .grid-page-head .eyebrow, .powerbank-detail-page .eyebrow, .audio-product-copy .eyebrow {
    color:#0877bb
}
.phone-copy h2 {
    letter-spacing:-.07em;
    margin:0 0 30px;
    font-size:clamp(60px, 8vw, 120px);
    line-height:.85
}
.feature-icon-grid {
    background:#dfe3e8;
    border:1px solid #dfe3e8;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1px;
    margin:28px 0;
    display:grid
}
.feature-icon-grid span {
    color:#3c4653;
    background:#fff;
    min-height:66px;
    padding:18px;
    font-size:11px;
    line-height:1.5
}
.spec-table {
    border-top:1px solid #ccd2d9;
    margin:0
}
.spec-table div {
    border-bottom:1px solid #dde1e6;
    grid-template-columns:.8fr 1.2fr;
    gap:16px;
    padding:9px 0;
    display:grid
}
.spec-table dt {
    color:#748090;
    text-transform:uppercase;
    font-size:11px
}
.spec-table dd {
    margin:0;
    font-size:12px;
    font-weight:700
}
.color-dots {
    align-items:center;
    gap:8px;
    margin-top:20px;
    display:flex
}
.color-dots i {
    border:1px solid #0000002e;
    border-radius:50%;
    width:15px;
    height:15px
}
.color-dots .mint {
    background:#5dd4c5
}
.color-dots .red {
    background:#d8353e
}
.color-dots .black {
    background:#17191d
}
.color-dots .blue {
    background:#3986c4
}
.color-dots .white {
    background:#fff
}
.m22-detail {
    min-height:var(--catalog-page-height);
    background:#f3f5f7;
    grid-template-columns:minmax(0, 1.08fr) minmax(520px, .92fr);
    align-items:center;
    gap:clamp(44px, 5vw, 88px);
    padding:clamp(38px, 5vh, 58px) max(7vw, 72px)
}
.m22-detail:after {
    color:#9ca6b2;
    bottom:24px;
    right:34px
}
.m22-product-stage {
    background:radial-gradient(circle at 48% 44%, #fffffffa 0 28%, #fff0 64%), linear-gradient(145deg, #edf3f7, #f9fafb 62%, #e8edf1);
    border:1px solid #e3e8ed;
    border-radius:24px;
    place-items:center;
    min-width:0;
    height:min(70vh, 680px);
    margin:0;
    display:grid;
    position:relative;
    overflow:hidden;
    box-shadow:0 24px 70px #14233214
}
.m22-product-stage:before {
    content:"";
    aspect-ratio:1;
    border:1px solid #2b84be1f;
    border-radius:50%;
    width:58%;
    position:absolute;
    box-shadow:0 0 0 70px #2b84be06, 0 0 0 140px #2b84be05
}
.m22-product-stage img {
    z-index:1;
    object-fit:contain;
    mix-blend-mode:multiply;
    filter:drop-shadow(0 26px 24px #16232e1f);
    width:92%;
    height:82%;
    display:block;
    position:relative
}
.m22-stage-label {
    z-index:2;
    gap:3px;
    display:grid;
    position:absolute;
    top:24px;
    left:26px
}
.m22-stage-label span, .m22-product-stage figcaption>span {
    color:#718090;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:10px
}
.m22-stage-label strong {
    color:#17202a;
    font-size:16px;
    font-weight:600
}
.m22-product-stage figcaption {
    z-index:2;
    align-items:center;
    gap:12px;
    display:flex;
    position:absolute;
    bottom:22px;
    right:24px
}
.m22-product-stage .color-dots {
    gap:6px;
    margin:0
}
.m22-product-stage .color-dots i {
    width:12px;
    height:12px
}
.m22-copy {
    min-width:0
}
.m22-copy .eyebrow {
    color:#0877bb;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin:0 0 12px;
    font-size:10px;
    font-weight:650
}
.m22-copy .eyebrow span {
    color:#a5afb9;
    margin:0 8px
}
.m22-title-row {
    justify-content:space-between;
    align-items:end;
    gap:24px;
    margin-bottom:26px;
    display:flex
}
.m22-copy .m22-title-row h2 {
    color:#0c1118;
    letter-spacing:-.075em;
    margin:0;
    font-size:clamp(70px, 7.2vw, 112px);
    font-weight:500;
    line-height:.78
}
.m22-title-row>p {
    color:#687583;
    text-align:right;
    margin:0;
    font-size:12px;
    line-height:1.55
}
.m22-feature-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
    margin:0 0 24px;
    padding:0;
    list-style:none;
    display:grid
}
.m22-feature-grid li {
    color:#75818d;
    background:#ffffffb8;
    border:1px solid #dfe5ea;
    border-radius:12px;
    align-content:space-between;
    min-height:100px;
    padding:15px;
    font-size:9px;
    line-height:1.45;
    display:grid
}
.m22-feature-grid svg {
    color:#0877bb;
    stroke-width:1.7px;
    width:20px;
    height:20px
}
.m22-feature-grid strong {
    color:#1b2631;
    font-size:10px;
    font-weight:650;
    display:block
}
.m22-spec-table {
    border-top:1px solid #cfd6dd;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    display:grid
}
.m22-spec-table div {
    min-width:0;
    padding:12px 10px 10px 0;
    display:block
}
.m22-spec-table dt {
    letter-spacing:.1em;
    margin-bottom:4px;
    font-size:8px
}
.m22-spec-table dd {
    color:#17202a;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    overflow:hidden
}
@media (width<=1180px) {
    .m22-detail {
        grid-template-columns:minmax(0, .95fr) minmax(460px, 1.05fr);
        gap:38px
    }
    .m22-feature-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
    .m22-feature-grid li {
        min-height:82px
    }
}
.coming-detail-page {
    grid-template-columns:.7fr 1.3fr;
    align-items:center;
    gap:7vw
}
.coming-detail-copy h2 {
    letter-spacing:-.08em;
    margin:0;
    font-size:clamp(74px, 11vw, 160px);
    line-height:.82
}
.coming-detail-copy>p:not(.eyebrow) {
    color:#667281;
    max-width:420px;
    line-height:1.7
}
.coming-badge {
    color:#fff;
    letter-spacing:.16em;
    text-transform:uppercase;
    background:#111822;
    border-radius:999px;
    margin-top:20px;
    padding:9px 14px;
    font-size:10px;
    display:inline-flex
}
.coming-product-visual {
    min-height:62vh
}
.coming-detail-page>.color-dots {
    position:absolute;
    bottom:44px;
    right:7vw
}
.phone-family-page {
    width:100%;
    height:var(--catalog-page-height);
    min-height:var(--catalog-page-height);
    background:#02050a;
    border-bottom:0;
    padding:0;
    display:block
}
#m33-detail.phone-family-page {
    background:#f2f2f2
}
.phone-family-page:after {
    display:none
}
.phone-family-page>img {
    object-fit:contain;
    object-position:center;
    width:100%;
    height:100%;
    display:block
}
.accessories-category, .cable-category, .audio-category {
    background:linear-gradient(90deg, #000000f7, #00000040), radial-gradient(circle at 72% 48%, #2089ff5c, #0000 30%), #030509
}
.adapter-hero .lifestyle-caption, .powerbank-hero .lifestyle-caption {
    text-align:left;
    left:max(7vw, 72px);
    right:auto
}
.adapter-hero .lifestyle-caption h2, .powerbank-hero .lifestyle-caption h2 {
    text-transform:uppercase
}
.product-grid-page {
    grid-template-rows:auto 1fr;
    gap:26px
}
.grid-page-head {
    grid-template-columns:1fr auto;
    align-items:end;
    display:grid
}
.grid-page-head .eyebrow {
    grid-column:1/-1;
    margin-bottom:8px
}
.grid-page-head h2 {
    letter-spacing:-.045em;
    margin:0;
    font-size:clamp(34px, 4.2vw, 66px);
    font-weight:500
}
.grid-page-head>span {
    color:#758190;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:10px
}
.product-grid {
    gap:14px;
    min-height:0;
    display:grid
}
.product-grid-2 {
    grid-template-columns:repeat(2, 1fr)
}
.product-grid-3 {
    grid-template-columns:repeat(3, 1fr)
}
.product-grid-4 {
    grid-template-columns:repeat(4, 1fr)
}
.product-grid-5 {
    grid-template-columns:repeat(5, 1fr)
}
.product-card {
    background:#fff;
    border:1px solid #dfe3e8;
    grid-template-rows:minmax(230px, 1fr) auto;
    min-width:0;
    display:grid;
    overflow:hidden
}
.product-card-asset {
    border:0;
    border-bottom:1px solid #e4e7eb;
    border-radius:0;
    min-height:230px
}
.product-card-copy {
    padding:22px
}
.product-kicker {
    color:#8994a2;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin:0 0 5px;
    font-size:9px
}
.product-card h3 {
    letter-spacing:-.04em;
    margin:0;
    font-size:25px
}
.product-feature {
    color:#0877bb;
    margin:4px 0 14px;
    font-size:11px;
    font-weight:700
}
.spec-list {
    gap:6px;
    margin:12px 0 0;
    padding:0;
    list-style:none;
    display:grid
}
.spec-list li {
    color:#5e6977;
    font-size:10px;
    line-height:1.45
}
.spec-list li:before {
    content:"—";
    color:#13a0f0;
    margin-right:6px
}
.product-card.compact {
    grid-template-rows:minmax(170px, 1fr) auto
}
.product-card.compact .product-card-asset {
    min-height:170px
}
.product-card.compact .product-card-copy {
    padding:16px
}
.product-card.compact h3 {
    font-size:19px
}
.product-card.compact .spec-list li {
    font-size:9px
}
.powerbank-detail-page {
    grid-template-rows:1fr auto;
    gap:28px
}
.powerbank-products {
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
    min-height:0;
    display:grid
}
.powerbank-products article {
    background:#fff;
    border:1px solid #dde2e8;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:24px;
    padding:34px;
    display:grid
}
.powerbank-products h2 {
    letter-spacing:-.06em;
    margin:0;
    font-size:clamp(42px, 5vw, 74px);
    line-height:.9
}
.powerbank-products h2 span {
    letter-spacing:.04em;
    margin-left:4px;
    font-size:.24em
}
.powerbank-products h3 {
    color:#0786d1;
    margin:10px 0 18px;
    font-size:18px
}
.powerbank-asset {
    min-height:50vh
}
.powerbank-features {
    background:#10161f;
    border:1px solid #dde2e8;
    grid-template-columns:repeat(6, 1fr);
    display:grid
}
.powerbank-features span {
    color:#dce2ea;
    letter-spacing:.08em;
    text-align:center;
    text-transform:uppercase;
    border-right:1px solid #ffffff1f;
    place-items:center;
    min-height:76px;
    padding:12px;
    font-size:9px;
    line-height:1.4;
    display:grid
}
.powerbank-features span:last-child {
    border-right:0
}
.cable-grid-page .product-card-asset {
    background:radial-gradient(circle, #e4aa562e, #0000 48%), linear-gradient(135deg, #0000 0 49.8%, #dce2e8 50%, #0000 50.2%), linear-gradient(45deg, #0000 0 49.8%, #dce2e8 50%, #0000 50.2%), #f8f7f4
}
.audio-product-page {
    grid-template-rows:1fr;
    grid-template-columns:.8fr .8fr 1.4fr;
    align-items:stretch;
    gap:18px
}
.audio-product-copy {
    align-self:center;
    max-width:540px
}
.audio-product-copy h2 {
    letter-spacing:-.06em;
    margin:0 0 24px;
    font-size:clamp(48px, 5.4vw, 82px);
    line-height:.9
}
.audio-product-copy h2 span {
    color:#6f7a88;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-top:10px;
    font-size:.24em;
    font-weight:500;
    display:block
}
.audio-product-copy .spec-list {
    grid-template-columns:repeat(2, 1fr);
    gap:9px 20px
}
.audio-product-asset, .audio-lifestyle-asset {
    min-height:66vh
}
.audio-features {
    flex-wrap:wrap;
    gap:8px;
    margin-top:26px;
    display:flex
}
.audio-features span {
    color:#434d5a;
    letter-spacing:.08em;
    text-transform:uppercase;
    border:1px solid #d6dce3;
    padding:8px 10px;
    font-size:9px
}
.coming-ecosystem-page {
    background:radial-gradient(circle at 65% 38%, #f4781f2e, #0000 28%), radial-gradient(circle at 34% 52%, #0d8bff3d, #0000 34%), #030409;
    grid-template-columns:1.25fr .75fr;
    align-items:center;
    gap:7vw
}
.ecosystem-visual {
    min-height:68vh
}
.ecosystem-copy h2 {
    letter-spacing:-.07em;
    text-transform:uppercase;
    margin:0;
    font-size:clamp(60px, 8vw, 120px);
    font-weight:300;
    line-height:.86
}
.ecosystem-copy>div {
    flex-wrap:wrap;
    gap:8px;
    margin-top:34px;
    display:flex
}
.ecosystem-copy>div span {
    color:#afbac7;
    letter-spacing:.12em;
    text-transform:uppercase;
    border:1px solid #ffffff29;
    padding:9px 12px;
    font-size:9px
}
.branch-page {
    background:linear-gradient(120deg, #0000 0 35%, #ffffff06 35% 36%, #0000 36%), #05070a;
    grid-template-columns:.28fr .72fr;
    align-items:start;
    gap:4vw
}
.branch-heading {
    position:sticky;
    top:118px
}
.branch-heading h2 {
    letter-spacing:-.055em;
    margin:0;
    font-size:clamp(46px, 5vw, 72px);
    font-weight:400;
    line-height:.92
}
.branch-heading>p:last-child {
    color:#7ed5ff;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:11px;
    line-height:1.5
}
.branch-grid {
    background:#ffffff17;
    border:1px solid #ffffff17;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    display:grid
}
.branch-grid article {
    background:#080b10;
    min-height:172px;
    padding:18px
}
.branch-grid h3 {
    letter-spacing:.02em;
    margin:0 0 10px;
    font-size:14px
}
.branch-grid p {
    color:#8793a3;
    margin:0 0 12px;
    font-size:9px;
    line-height:1.6
}
.branch-grid a {
    color:#16d8c5;
    font-family:var(--font-geist-mono),  monospace;
    margin-bottom:5px;
    font-size:9px;
    display:block
}
.branch-grid strong {
    color:#c9d1dc;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:9px
}

.branch-grid .branch-map-link {
    color:#7ed5ff;
    width:max-content;
    margin:8px 0 7px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase
}

.branch-grid .branch-map-link:hover,
.branch-grid .branch-map-link:focus-visible {
    color:#fff
}
.branch-watermark {
    z-index:-1;
    color:#ffffff06;
    letter-spacing:-.08em;
    font-size:22vw;
    font-weight:900;
    position:absolute;
    bottom:-.2em;
    right:2vw
}
.closing-page {
    text-align:center;
    background:linear-gradient(#01050b1f, #01050bdb), radial-gradient(circle at 50% 42%, #1a8eff5c, #0000 26%), #010307;
    align-content:center;
    place-items:center
}
.closing-page .ommi-mark {
    z-index:2;
    position:relative;
    transform:scale(2.4)
}
.closing-page>p {
    color:#99a8ba;
    letter-spacing:.24em;
    text-transform:uppercase;
    margin:88px 0 32px;
    font-size:10px
}
.closing-page>a:not(.closing-whatsapp) {
    color:#25e4d2;
    font-size:clamp(20px, 2.3vw, 34px);
    font-weight:300
}
.closing-whatsapp {
    color:#c8d0db;
    margin-top:12px;
    font-size:12px
}
.closing-page>span:last-child {
    color:#556171;
    letter-spacing:.24em;
    text-transform:uppercase;
    font-size:9px;
    position:absolute;
    bottom:36px
}
.closing-glow {
    z-index:-1;
    aspect-ratio:1.7;
    clip-path:polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
    border:1px solid #38a8ff38;
    width:min(62vw, 780px);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -58%);
    box-shadow:inset 0 0 70px #106fff38, 0 0 70px #1470ff29
}
@media (width<=920px) {
    :root {
        --site-header-height:66px
    }
    .site-header {
        height:var(--site-header-height);
        grid-template-columns:1fr auto;
        padding:0 22px
    }
    .navbar-logo {
        width:104px
    }
    .site-header nav {
        display:none
    }
    .catalog-page {
        min-height:var(--catalog-page-height);
        padding:96px 48px 60px 24px
    }
    .reliability-page {
        height:var(--catalog-page-height);
        min-height:var(--catalog-page-height);
        grid-template-rows:clamp(170px, 23%, 210px) minmax(0, 1fr);
        padding:0
    }
    .reliability-copy {
        min-height:0;
        padding:48px 24px
    }
    .reliability-copy h2 {
        font-size:clamp(17px, 2.7vw, 21px)
    }
    .cover-page, .category-page {
        grid-template-columns:1fr
    }
    .cover-page {
        align-items:end
    }
    .cover-copy h1 {
        font-size:clamp(44px, 14vw, 70px)
    }
    .tech-orbit {
        opacity:.7;
        width:140vw;
        top:32%;
        right:-70vw
    }
    .category-page {
        align-content:center;
        gap:36px
    }
    .category-visual {
        min-height:38vh
    }
    .feature-category {
        min-height:var(--catalog-page-height);
        background-position:50%;
        padding:0
    }
    .model-corner {
        top:92px;
        left:24px
    }
    .lifestyle-caption {
        bottom:9vh;
        left:24px;
        right:48px
    }
    .adapter-hero .lifestyle-caption, .powerbank-hero .lifestyle-caption {
        left:24px
    }
    .lifestyle-caption h2 {
        font-size:clamp(38px, 10vw, 64px)
    }
    .phone-detail-page, .coming-detail-page, .coming-ecosystem-page {
        grid-template-columns:1fr
    }
    .phone-gallery {
        grid-template-rows:minmax(36vh, 1fr) 86px;
        min-height:48vh
    }
    .phone-main {
        min-height:36vh
    }
    .feature-icon-grid {
        grid-template-columns:1fr
    }
    .coming-product-visual, .ecosystem-visual {
        min-height:42vh
    }
    .product-grid-page {
        display:block
    }
    .grid-page-head {
        margin-bottom:24px
    }
    .product-grid, .product-grid-2, .product-grid-3, .product-grid-4, .product-grid-5 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
    .product-card, .product-card.compact {
        grid-template-rows:minmax(170px, 1fr) auto
    }
    .product-card-asset, .product-card.compact .product-card-asset {
        min-height:170px
    }
    .powerbank-products {
        grid-template-columns:1fr
    }
    .powerbank-products article {
        grid-template-columns:1fr 1fr
    }
    .powerbank-asset {
        min-height:34vh
    }
    .powerbank-features {
        grid-template-columns:repeat(3, 1fr)
    }
    .powerbank-features span:nth-child(3) {
        border-right:0
    }
    .audio-product-page {
        grid-template-columns:1fr 1fr
    }
    .audio-product-copy {
        grid-column:1/-1
    }
    .audio-product-asset, .audio-lifestyle-asset {
        min-height:36vh
    }
    .branch-page {
        display:block
    }
    .branch-heading {
        margin-bottom:30px;
        position:relative;
        top:auto
    }
    .branch-grid {
        grid-template-columns:repeat(2, 1fr)
    }
    .page-rail {
        right:12px;
        top:calc(var(--site-header-height) + (100svh - var(--site-header-height)) / 2)
    }
}
@media (width<=640px) {
    .hero-benefits {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
    .hero-benefit, .hero-benefit+.hero-benefit {
        border-left:0
    }
    .hero-benefit:nth-child(2n) {
        border-left:1px solid #1da8ff59
    }
}
@media (width<=560px) {
    .page-rail {
        -webkit-backdrop-filter:blur(10px);
        backdrop-filter:blur(10px);
        background:#03060abd;
        border:1px solid #ffffff1f;
        border-radius:26px;
        width:auto;
        padding:6px;
        display:block;
        top:auto;
        bottom:14px;
        right:14px;
        transform:none
    }
    .page-rail .page-count, .page-rail .rail-track {
        display:none
    }
    .rail-buttons {
        gap:6px
    }
    .rail-buttons button {
        width:38px;
        height:38px
    }
    .header-cta {
        padding:9px 12px
    }
    .cover-copy .ommi-mark {
        margin-bottom:28px
    }
    .cover-copy .mark-logo {
        width:62px
    }
    .mark-glyph {
        border-width:7px;
        width:44px;
        height:40px
    }
    .cover-copy h1 {
        letter-spacing:-.065em
    }
    .orange-rule {
        margin-top:30px
    }
    .hero-benefit {
        min-height:108px;
        padding:12px 8px
    }
    .hero-benefit-icon {
        width:34px;
        height:34px;
        margin-bottom:13px
    }
    .hero-benefit-title {
        font-size:12px
    }
    .hero-benefit-subtitle {
        font-size:11px
    }
    .category-copy h2 {
        font-size:clamp(38px, 12vw, 58px)
    }
    .story-page {
        min-height:var(--catalog-page-height);
        background-position:60% bottom;
        padding:90px 24px max(340px, 42svh)
    }
    .story-copy h2 {
        font-size:clamp(34px, 10.5vw, 42px)
    }
    .story-copy>p:not(.eyebrow) {
        margin-top:20px;
        font-size:16px
    }
    .story-page .watermark {
        width:122vw;
        top:18%
    }
    .feature-category {
        background-position:46%
    }
    .model-corner {
        padding:10px 12px
    }
    .model-corner .mark-logo {
        width:80px
    }
    .model-corner strong {
        font-size:17px
    }
    .lifestyle-caption {
        text-align:left
    }
    .phone-detail-page {
        display:block
    }
    .phone-copy {
        margin-top:38px
    }
    .phone-copy h2 {
        font-size:78px
    }
    .product-grid, .product-grid-2, .product-grid-3, .product-grid-4, .product-grid-5, .grid-page-head {
        grid-template-columns:1fr
    }
    .grid-page-head>span {
        margin-top:8px
    }
    .product-card, .product-card.compact {
        grid-template-rows:auto;
        grid-template-columns:.8fr 1.2fr
    }
    .product-card-asset, .product-card.compact .product-card-asset {
        border-bottom:0;
        border-right:1px solid #e4e7eb;
        min-height:260px
    }
    .product-card-copy, .product-card.compact .product-card-copy {
        padding:18px
    }
    .powerbank-products article {
        grid-template-columns:1fr
    }
    .powerbank-features {
        grid-template-columns:repeat(2, 1fr)
    }
    .powerbank-features span:nth-child(3) {
        border-right:1px solid #ffffff1f
    }
    .powerbank-features span:nth-child(2n) {
        border-right:0
    }
    .audio-product-page {
        display:block
    }
    .audio-product-copy .spec-list {
        grid-template-columns:1fr
    }
    .audio-product-asset, .audio-lifestyle-asset {
        min-height:42vh;
        margin-top:16px
    }
    .branch-grid {
        grid-template-columns:1fr
    }
    .branch-grid article {
        min-height:140px
    }
    .closing-page .ommi-mark {
        transform:scale(1.7)
    }
    .closing-page>p {
        margin-top:64px
    }
}
.m11-lifestyle {
    min-height:var(--catalog-page-height);
    background:#07131d
}
.m11-lifestyle:after, .m11-specification:after {
    display:none
}
.m11-lifestyle:before {
    content:"";
    z-index:-2;
    filter:blur(18px)saturate(.9)brightness(.68);
    background:url(../assets/feature-phone/m11-lifestyle.webp) 50%/cover no-repeat;
    display:block;
    position:absolute;
    inset:-28px;
    transform:scale(1.06)
}
.m11-lifestyle-image {
    z-index:-1;
    object-fit:contain;
    object-position:center;
    width:100%;
    height:100%;
    position:absolute;
    inset:0
}
.m11-catalog-label {
    clip-path:polygon(0 0, 84% 0, 100% 50%, 84% 100%, 0 100%);
    background:#050505;
    justify-content:center;
    align-items:center;
    gap:clamp(16px, 1.5vw, 28px);
    width:clamp(210px, 18vw, 310px);
    height:clamp(82px, 8.5vw, 126px);
    padding:18px 46px 18px 30px;
    display:flex;
    position:absolute;
    top:clamp(92px, 10.5vh, 122px);
    left:0
}
.m11-catalog-label img {
    width:clamp(82px, 7.2vw, 118px);
    height:auto
}
.m11-catalog-label strong {
    color:#fff;
    letter-spacing:.02em;
    font-size:clamp(22px, 2.1vw, 34px);
    font-weight:600
}
.m11-catalog-caption {
    background:#00000094;
    place-items:center;
    min-height:clamp(104px, 14vh, 160px);
    padding:24px max(7vw, 72px);
    display:grid;
    position:absolute;
    bottom:0;
    left:0;
    right:0
}
.m11-catalog-caption h2 {
    color:#fff;
    letter-spacing:-.02em;
    text-align:center;
    margin:0;
    font-size:clamp(24px, 2.8vw, 46px);
    font-weight:450;
    line-height:1.15
}
.m11-specification {
    min-height:var(--catalog-page-height);
    color:#090909;
    background:#fff;
    border-bottom-color:#e5e5e5;
    padding:88px max(7vw, 72px) 70px;
    display:block;
    overflow:hidden
}
.m11-product-composition {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    align-items:end;
    gap:clamp(10px, 1.8vw, 28px);
    width:min(1180px, 88vw);
    height:clamp(340px, 48vh, 520px);
    margin:0 auto 42px;
    display:grid
}
.m11-variant {
    background:#fff;
    justify-content:center;
    align-items:flex-end;
    width:100%;
    min-width:0;
    height:100%;
    display:flex;
    overflow:hidden
}
.m11-variant img {
    filter:contrast(1.025)brightness(1.01);
    width:auto;
    max-width:none;
    height:100%;
    display:block
}
.m11-specification-content {
    grid-template-columns:minmax(0, 1.05fr) minmax(330px, .95fr);
    align-items:start;
    gap:clamp(50px, 8vw, 130px);
    width:min(1180px, 100%);
    margin:0 auto;
    display:grid
}
.m11-feature-list {
    gap:0;
    margin:0;
    padding:0;
    list-style:none;
    display:grid
}
.m11-feature-list li {
    border-bottom:1px solid #dedede;
    grid-template-columns:42px 1fr;
    align-items:center;
    gap:18px;
    min-height:58px;
    font-size:clamp(15px, 1.05vw, 18px);
    font-weight:520;
    line-height:1.35;
    display:grid
}
.m11-feature-list li:last-child {
    border-bottom:0
}
.m11-feature-list svg {
    stroke-width:1.7px;
    width:29px;
    height:29px
}
.m11-specification-copy h2 {
    letter-spacing:-.035em;
    margin:-5px 0 18px;
    font-size:clamp(34px, 3vw, 48px);
    font-weight:700;
    line-height:1.08
}
.m11-specification-copy dl {
    gap:5px;
    margin:0;
    font-size:clamp(16px, 1.12vw, 20px);
    line-height:1.45;
    display:grid
}
.m11-specification-copy dl div {
    gap:.35em;
    display:flex
}
.m11-specification-copy dt {
    font-weight:500
}
.m11-specification-copy dd {
    margin:0
}
.m11-color-indicators {
    gap:16px;
    margin-top:24px;
    display:flex
}
.m11-color-indicators i {
    border:1px solid #0000003d;
    border-radius:50%;
    width:18px;
    height:18px
}
.m11-color-indicators .mint-white {
    background:linear-gradient(135deg, #29a991 0 50%, #fff 50%)
}
.m11-color-indicators .red {
    background:#d41425
}
.m11-color-indicators .black {
    background:#111
}
@media (width<=920px) {
    .m11-lifestyle {
        min-height:var(--catalog-page-height);
        padding:0
    }
    .m11-catalog-label {
        top:92px
    }
    .m11-catalog-caption {
        padding-left:24px;
        padding-right:48px
    }
    .m11-specification {
        min-height:var(--catalog-page-height);
        padding:82px 48px 60px 24px
    }
    .m11-product-composition {
        width:min(100%, 820px);
        height:clamp(300px, 44vw, 410px);
        margin-bottom:36px
    }
    .m11-specification-content {
        grid-template-columns:minmax(0, 1fr) minmax(300px, .92fr);
        gap:42px
    }
}
@media (width<=767px) {
    .m11-catalog-label {
        gap:13px;
        width:190px;
        height:76px;
        padding:14px 38px 14px 24px
    }
    .m11-catalog-label img {
        width:76px
    }
    .m11-catalog-label strong {
        font-size:21px
    }
    .m11-catalog-caption {
        min-height:116px;
        padding:24px
    }
    .m11-specification {
        padding:82px 24px 64px
    }
    .m11-product-composition {
        gap:4px;
        width:100%;
        height:clamp(155px, 42vw, 190px);
        margin-bottom:30px;
        display:grid;
        position:static
    }
    .m11-variant {
        background:#fff;
        width:100%;
        position:static;
        overflow:hidden
    }
    .m11-variant img {
        width:165%;
        max-width:none;
        height:auto
    }
    .m11-variant-black img {
        width:125%
    }
    .m11-specification-content {
        grid-template-columns:1fr;
        gap:44px
    }
    .m11-feature-list li {
        grid-template-columns:36px 1fr;
        gap:14px;
        min-height:64px
    }
    .m11-feature-list svg {
        width:27px;
        height:27px
    }
    .m11-specification-copy h2 {
        margin-top:0
    }
}
@media (width<=920px) {
    .m22-detail {
        grid-template-columns:1fr;
        gap:38px;
        padding:86px 48px 64px 24px;
        display:grid
    }
    .m22-product-stage {
        width:100%;
        height:min(52vh, 500px)
    }
    .m22-copy {
        margin:0
    }
}
@media (width<=560px) {
    .m22-detail {
        gap:32px;
        padding:82px 24px 76px
    }
    .m22-product-stage {
        border-radius:18px;
        height:390px
    }
    .m22-product-stage img {
        width:112%;
        height:78%
    }
    .m22-stage-label {
        top:18px;
        left:18px
    }
    .m22-product-stage figcaption {
        bottom:18px;
        right:18px
    }
    .m22-title-row {
        display:block
    }
    .m22-copy .m22-title-row h2 {
        font-size:76px
    }
    .m22-title-row>p {
        text-align:left;
        margin-top:18px
    }
    .m22-feature-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
    .m22-feature-grid li {
        min-height:108px
    }
    .m22-spec-table {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}
@media (width<=920px) {
    .phone-family-page {
        padding:0
    }
}
@media (width<=720px) {
    .phone-family-page {
        aspect-ratio:1672/941;
        width:100%;
        height:auto;
        min-height:0
    }
    .phone-family-page>img {
        width:100%;
        height:100%
    }
}
.site-header nav a {
    position:relative
}
.site-header nav a:after {
    content:"";
    background:var(--cyan-bright);
    height:1px;
    transition:transform .18s;
    position:absolute;
    bottom:-9px;
    left:0;
    right:0;
    transform:scaleX(0)
}
.site-header nav a:hover:after, .site-header nav a:focus-visible:after {
    transform:scaleX(1)
}
.phone-spotlight {
    background:linear-gradient(90deg, #1771ff14 1px, #0000 1px) 0 0/52px 52px, linear-gradient(#1771ff14 1px, #0000 1px) 0 0/52px 52px, radial-gradient(circle at 75%, #1da8ff38, #0000 31%), #05070b;
    grid-template-columns:minmax(0, .95fr) minmax(420px, 1.05fr);
    align-items:center;
    gap:clamp(42px, 7vw, 120px)
}
.spotlight-copy {
    z-index:3;
    position:relative
}
.model-index {
    color:#667486;
    font-family:var(--font-geist-mono),  monospace;
    letter-spacing:.16em;
    margin:0 0 20px;
    font-size:11px
}
.spotlight-copy h2, .cable-copy h2, .connect-page h2 {
    letter-spacing:-.07em;
    margin:0;
    font-size:clamp(52px, 6.3vw, 102px);
    font-weight:300;
    line-height:.91
}
.spotlight-copy h2 span, .cable-copy h2 span {
    color:#8592a3
}
.spotlight-lead, .cable-copy>p:not(.eyebrow) {
    color:#9aa6b6;
    max-width:570px;
    margin:28px 0 0;
    font-size:clamp(15px, 1.2vw, 19px);
    line-height:1.65
}
.feature-pills {
    background:#ffffff1a;
    border:1px solid #ffffff1a;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1px;
    margin-top:34px;
    display:grid
}
.feature-pill {
    background:#04080ee0;
    align-items:center;
    gap:15px;
    min-height:92px;
    padding:18px;
    display:flex
}
.feature-pill svg {
    width:25px;
    color:var(--cyan-bright);
    stroke-width:1.5px;
    flex:none
}
.feature-pill span {
    gap:5px;
    display:grid
}
.feature-pill strong {
    font-size:13px;
    font-weight:600
}
.feature-pill small {
    color:#687688;
    font-size:10px
}
.text-link {
    color:#d9e2ec;
    letter-spacing:.12em;
    text-transform:uppercase;
    align-items:center;
    gap:18px;
    margin-top:34px;
    font-size:12px;
    display:inline-flex
}
.text-link span {
    color:var(--cyan-bright);
    font-size:18px
}
.phone-stage {
    place-items:center;
    min-height:min(72vh, 760px);
    display:grid;
    position:relative
}
.phone-stage img {
    z-index:2;
    object-fit:contain;
    filter:drop-shadow(0 38px 55px #0000009e);
    width:min(86%, 560px);
    max-height:69vh;
    position:relative;
    transform:rotate(3deg)
}
.phone-halo {
    aspect-ratio:1;
    border:1px solid #61cbff3d;
    border-radius:50%;
    width:min(38vw, 570px);
    position:absolute;
    box-shadow:inset 0 0 100px #127bff33, 0 0 80px #127bff1f
}
.phone-halo:before, .phone-halo:after {
    content:"";
    border-radius:inherit;
    border:1px solid #61cbff26;
    position:absolute
}
.phone-halo:before {
    inset:11%
}
.phone-halo:after {
    border-style:dashed;
    inset:25%
}
.stage-note {
    z-index:3;
    color:#9ca9b9;
    letter-spacing:.16em;
    text-transform:uppercase;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    background:#04080eb8;
    border:1px solid #ffffff24;
    border-radius:99px;
    padding:8px 12px;
    font-size:9px;
    position:absolute
}
.stage-note-top {
    top:18%;
    right:5%
}
.stage-note-bottom {
    bottom:17%;
    left:3%
}
.phone-lineup-page {
    color:#080b10;
    background:#f0f2f4;
    display:block
}
.phone-lineup-page:after, .cable-highlight-page:after {
    color:#05070b61
}
.section-heading {
    grid-template-columns:1.2fr .8fr;
    align-items:end;
    gap:8vw;
    margin-bottom:clamp(34px, 5vh, 64px);
    display:grid
}
.section-heading h2 {
    letter-spacing:-.065em;
    margin:0;
    font-size:clamp(46px, 5.5vw, 86px);
    font-weight:350;
    line-height:.95
}
.section-heading>p {
    color:#657080;
    max-width:440px;
    margin:0;
    font-size:15px;
    line-height:1.65
}
.phone-lineup {
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    display:grid
}
.phone-card {
    background:#fff;
    border:1px solid #d8dde3;
    border-radius:4px;
    grid-template-rows:auto 1fr auto;
    min-height:490px;
    transition:transform .22s, box-shadow .22s;
    display:grid;
    overflow:hidden
}
.phone-card:hover {
    transform:translateY(-7px);
    box-shadow:0 24px 50px #161f2b1f
}
.phone-card-top {
    color:#7b8591;
    font-family:var(--font-geist-mono),  monospace;
    letter-spacing:.12em;
    text-transform:uppercase;
    border-bottom:1px solid #e7eaee;
    justify-content:space-between;
    padding:16px 18px;
    font-size:10px;
    display:flex
}
.phone-card-image {
    background:radial-gradient(circle at 50% 48%, #fff 0 28%, #edf0f3 68%);
    place-items:center;
    min-height:300px;
    padding:20px;
    display:grid;
    overflow:hidden
}
.phone-card-image img {
    object-fit:contain;
    width:100%;
    height:290px;
    transition:transform .26s
}
.phone-card:hover img {
    transform:scale(1.04)
}
.phone-card-copy {
    border-top:1px solid #e7eaee;
    padding:22px
}
.phone-card-copy h3 {
    letter-spacing:-.04em;
    margin:0;
    font-size:30px
}
.phone-card-copy p {
    color:#79838e;
    margin:6px 0 0;
    font-size:11px
}
.cable-highlight-page {
    color:#0c0e11;
    background:#f4f2ed;
    grid-template-columns:minmax(340px, .72fr) minmax(520px, 1.28fr);
    align-items:center;
    gap:8vw
}
.cable-copy {
    align-self:center
}
.cable-copy .eyebrow {
    color:#e64920
}
.cable-copy h2 {
    font-size:clamp(48px, 5.4vw, 86px)
}
.cable-list {
    gap:10px;
    display:grid
}
.cable-list article {
    background:#ffffff94;
    border:1px solid #d8d5ce;
    border-radius:3px;
    grid-template-columns:58px 35px 1fr auto;
    align-items:center;
    gap:18px;
    min-height:152px;
    padding:24px;
    display:grid
}
.cable-list article.featured {
    color:#fff;
    background:#11151b;
    border-color:#12151a;
    box-shadow:0 24px 60px #14181f2e
}
.cable-icon {
    opacity:.72;
    border:1px solid;
    border-radius:50%;
    place-items:center;
    width:58px;
    height:58px;
    display:grid
}
.cable-icon svg {
    stroke-width:1.4px;
    width:24px
}
.cable-number {
    color:#9b958c;
    font-family:var(--font-geist-mono),  monospace;
    font-size:10px
}
.cable-list small {
    color:#e64920;
    letter-spacing:.13em;
    text-transform:uppercase;
    font-size:9px
}
.cable-list h3 {
    letter-spacing:-.035em;
    margin:6px 0;
    font-size:clamp(19px, 1.7vw, 27px);
    font-weight:500
}
.cable-list p {
    color:#77746e;
    margin:0;
    font-size:10px
}
.cable-list article.featured p {
    color:#939aa5
}
.cable-list article>strong {
    font-size:clamp(20px, 2vw, 30px);
    font-weight:350
}
.connect-page {
    text-align:center;
    background:radial-gradient(circle at 50% 43%, #147cff40, #0000 27%), #030509;
    align-content:center;
    place-items:center
}
.connect-page .mark-logo {
    display:none
}
.connect-page h2 {
    max-width:980px;
    font-size:clamp(58px, 8vw, 126px)
}
.connect-page>p:not(.eyebrow) {
    color:#8d99aa;
    max-width:620px;
    margin:26px 0 0;
    font-size:16px;
    line-height:1.6
}
.connect-page>a {
    color:#dff5ff;
    letter-spacing:.14em;
    text-transform:uppercase;
    border:1px solid #61cbff61;
    border-radius:99px;
    gap:22px;
    margin-top:42px;
    padding:16px 22px;
    font-size:11px;
    display:inline-flex
}
.connect-page>a span {
    color:var(--cyan-bright)
}
.connect-page>small {
    color:#515d6e;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:9px;
    position:absolute;
    bottom:34px
}
.connect-orb {
    aspect-ratio:1;
    border:1px solid #43b3ff21;
    border-radius:50%;
    width:min(66vw, 850px);
    position:absolute;
    box-shadow:inset 0 0 100px #1f77ff17, 0 0 100px #1f77ff14
}
@media (width<=1050px) {
    .phone-spotlight, .cable-highlight-page {
        grid-template-columns:1fr 1fr;
        gap:36px
    }
    .phone-lineup {
        grid-template-columns:repeat(2, 1fr)
    }
    .phone-card {
        min-height:430px
    }
}
@media (width<=760px) {
    .phone-spotlight, .cable-highlight-page {
        padding-right:24px;
        display:block
    }
    .phone-stage {
        min-height:66vh;
        margin-top:30px
    }
    .phone-halo {
        width:86vw
    }
    .section-heading {
        grid-template-columns:1fr;
        gap:22px
    }
    .phone-lineup {
        grid-template-columns:1fr
    }
    .phone-card {
        grid-template-rows:auto 1fr;
        grid-template-columns:1fr 1fr;
        min-height:0
    }
    .phone-card-top {
        grid-column:1/-1
    }
    .phone-card-image {
        grid-row:2;
        min-height:260px
    }
    .phone-card-image img {
        height:250px
    }
    .phone-card-copy {
        border-top:0;
        border-left:1px solid #e7eaee;
        flex-direction:column;
        justify-content:center;
        display:flex
    }
    .cable-copy {
        margin-bottom:44px
    }
    .cable-list article {
        grid-template-columns:52px 1fr auto;
        gap:14px;
        padding:18px
    }
    .cable-number {
        display:none
    }
}
@media (width<=520px) {
    .feature-pills {
        grid-template-columns:1fr
    }
    .phone-stage {
        min-height:520px
    }
    .phone-stage img {
        width:96%
    }
    .phone-lineup-page {
        padding-right:24px
    }
    .phone-card-image {
        padding:8px
    }
    .phone-card-image img {
        width:120%
    }
    .phone-card-copy {
        padding:18px
    }
    .cable-list article {
        grid-template-columns:44px 1fr
    }
    .cable-icon {
        width:44px;
        height:44px
    }
    .cable-list article>strong {
        grid-column:2
    }
}
.power-bank-page {
    background:linear-gradient(#2d82d20e 1px, #0000 1px) 0 0/44px 44px, linear-gradient(90deg, #2d82d20e 1px, #0000 1px) 0 0/44px 44px, radial-gradient(circle at 72% 46%, #146cff33, #0000 32%), #05070b;
    grid-template-columns:minmax(360px, .74fr) minmax(620px, 1.26fr);
    align-items:center;
    gap:clamp(42px, 5vw, 82px)
}
.power-bank-page .product-story-copy {
    min-width:0
}
.power-bank-page .product-story-copy h2 {
    margin-top:18px;
    font-size:clamp(54px, 5.5vw, 90px)
}
.power-bank-page .product-story-copy>p:not(.eyebrow) {
    max-width:520px
}
.power-bank-page .product-spec-row {
    width:min(100%, 560px)
}
.power-bank-gallery {
    grid-template-columns:minmax(0, 2.68fr) minmax(180px, 1fr);
    align-items:start;
    gap:12px;
    width:100%;
    min-width:0;
    display:grid
}
.power-bank-gallery-stack {
    gap:12px;
    min-width:0;
    display:grid
}
.power-bank-gallery .power-bank-card {
    background-color:#080c12;
    background-image:linear-gradient(#489add0f 1px, #0000 1px), linear-gradient(90deg, #489add0f 1px, #0000 1px), none;
    background-position:0 0, 0 0, 0 0;
    background-repeat:repeat, repeat, repeat;
    background-size:28px 28px;
    background-attachment:scroll, scroll, scroll;
    background-origin:padding-box, padding-box, padding-box;
    background-clip:border-box, border-box, border-box;
    border:1px solid #7097b857;
    min-height:0;
    overflow:hidden
}
.power-bank-gallery .power-bank-card-large {
    aspect-ratio:4/3
}
.power-bank-gallery .power-bank-card-small {
    aspect-ratio:1
}
.power-bank-gallery .power-bank-card:before, .power-bank-gallery .power-bank-card:after {
    z-index:5;
    color:#61cbffcc;
    pointer-events:none;
    width:20px;
    height:20px
}
.power-bank-gallery .power-bank-card>img {
    object-fit:cover;
    object-position:center;
    width:100%;
    height:100%;
    transition:transform .42s cubic-bezier(.2, .7, .2, 1);
    transform:scale(1)
}
.power-bank-gallery .power-bank-card:hover>img {
    transform:scale(1.04)
}
.power-bank-gallery .power-bank-card.image-ready {
    background-color:#080c12;
    background-image:linear-gradient(#489add0b 1px, #0000 1px), linear-gradient(90deg, #489add0b 1px, #0000 1px), none;
    background-position:0 0, 0 0, 0 0;
    background-repeat:repeat, repeat, repeat;
    background-size:28px 28px;
    background-attachment:scroll, scroll, scroll;
    background-origin:padding-box, padding-box, padding-box;
    background-clip:border-box, border-box, border-box;
    border-color:#7097b861
}
.power-bank-card-meta {
    z-index:4;
    color:#fff;
    opacity:.94;
    pointer-events:none;
    background:linear-gradient(#0000, #020509eb);
    justify-content:space-between;
    align-items:end;
    gap:16px;
    min-height:76px;
    padding:28px 18px 16px;
    transition:background .26s;
    display:flex;
    position:absolute;
    bottom:0;
    left:0;
    right:0
}
.power-bank-card-meta>div {
    gap:4px;
    display:grid
}
.power-bank-card-meta small {
    color:#94a3b5;
    letter-spacing:.13em;
    text-transform:uppercase;
    font-size:8px
}
.power-bank-card-meta strong {
    letter-spacing:.02em;
    font-size:12px;
    font-weight:550
}
.power-bank-card-meta>span {
    color:var(--cyan-bright);
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:0;
    font-size:8px;
    transition:opacity .22s, transform .22s;
    transform:translateY(4px)
}
.power-bank-card:hover .power-bank-card-meta {
    background:linear-gradient(#0000 20%, #020509f5)
}
.power-bank-card:hover .power-bank-card-meta>span {
    opacity:1;
    transform:translateY(0)
}
@media (prefers-reduced-motion:reduce) {
    .power-bank-gallery .power-bank-card>img, .power-bank-card-meta>span {
        transition:none
    }
    .power-bank-gallery .power-bank-card:hover>img {
        transform:none
    }
}
@media (width<=1180px) {
    .power-bank-page {
        padding-right:max(7vw, 72px);
        display:block
    }
    .power-bank-page .product-story-copy {
        grid-template-columns:minmax(0, 1fr) minmax(350px, .85fr);
        align-items:end;
        column-gap:52px;
        display:grid
    }
    .power-bank-page .product-story-copy .eyebrow, .power-bank-page .product-story-copy .product-section-number, .power-bank-page .product-story-copy h2 {
        grid-column:1
    }
    .power-bank-page .product-story-copy>p:not(.eyebrow), .power-bank-page .product-spec-row {
        grid-column:2
    }
    .power-bank-page .product-story-copy>p:not(.eyebrow) {
        grid-row:1/4;
        align-self:center;
        margin:0 0 94px
    }
    .power-bank-page .product-spec-row {
        grid-row:3/5;
        align-self:end;
        margin-top:0
    }
    .power-bank-gallery {
        margin-top:48px
    }
}
@media (width<=820px) {
    .power-bank-page {
        padding:92px 48px 64px 24px
    }
    .power-bank-page .product-story-copy {
        display:block
    }
    .power-bank-page .product-story-copy>p:not(.eyebrow) {
        margin-top:24px
    }
    .power-bank-page .product-spec-row {
        margin-top:30px
    }
    .power-bank-gallery {
        grid-template-columns:minmax(0, 2.68fr) minmax(150px, 1fr);
        gap:10px
    }
    .power-bank-gallery-stack {
        gap:10px
    }
    .power-bank-card-meta {
        min-height:64px;
        padding:22px 12px 12px
    }
    .power-bank-card-meta>span {
        display:none
    }
}
@media (width<=640px) {
    .power-bank-page {
        padding-right:24px
    }
    .power-bank-gallery {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:10px
    }
    .power-bank-gallery .power-bank-card-large {
        grid-column:1/-1
    }
    .power-bank-gallery-stack {
        display:contents
    }
    .power-bank-gallery .power-bank-card-small {
        width:100%
    }
    .power-bank-page .product-spec-row {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
    .power-bank-page .product-spec-row span {
        min-width:0;
        padding:16px 8px
    }
    .power-bank-page .product-spec-row span+span {
        border-top:0;
        border-left:1px solid #ffffff1f;
        padding-left:10px
    }
    .power-bank-page .product-spec-row strong {
        font-size:clamp(17px, 5.5vw, 24px)
    }
    .power-bank-page .product-spec-row small {
        font-size:8px
    }
}
.product-categories-page {
    background:radial-gradient(circle at 85% 12%, #1da8ff21, #0000 27%), #06090e;
    display:block
}
.categories-heading {
    color:#fff
}
.categories-heading>p {
    color:#8895a6
}
.category-cards {
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    min-height:50vh;
    display:grid
}
.category-card {
    background:linear-gradient(155deg, #ffffff12, #ffffff04);
    border:1px solid #ffffff1c;
    grid-template-rows:auto 1fr auto;
    align-items:start;
    min-height:440px;
    padding:24px;
    transition:transform .22s, border-color .22s, background .22s;
    display:grid;
    position:relative;
    overflow:hidden
}
.category-card:after {
    content:"";
    z-index:1;
    pointer-events:none;
    background:linear-gradient(#03070c1a 0%, #03070c38 42%, #03070cf0 83%), linear-gradient(90deg, #03070c24, #0000 58%);
    position:absolute;
    inset:0
}
.category-card>img {
    object-fit:cover;
    object-position:center;
    width:100%;
    height:100%;
    transition:transform .42s cubic-bezier(.2, .7, .2, 1), filter .26s;
    position:absolute;
    inset:0;
    transform:scale(1.01)
}
.category-card:hover>img {
    filter:saturate(1.06)brightness(1.04);
    transform:scale(1.06)
}
.category-card:hover {
    background:linear-gradient(155deg, #1da8ff24, #ffffff05);
    border-color:#61cbff7a;
    transform:translateY(-6px)
}
.category-card>svg {
    color:#61cbff3d;
    stroke-width:.8px;
    width:92px;
    height:92px;
    position:absolute;
    top:28%;
    left:50%;
    transform:translate(-50%)
}
.category-card-phone>img {
    object-position:center 42%
}
.category-card-power>img {
    object-position:center
}
.category-card-audio>img {
    object-position:center 38%
}
.category-card-cable>img {
    object-position:center
}
.category-card>span {
    z-index:2;
    color:#667487;
    font-family:var(--font-geist-mono),  monospace;
    letter-spacing:.16em;
    font-size:10px;
    position:relative
}
.category-card>div {
    z-index:2;
    align-self:end;
    position:relative
}
.category-card small {
    color:var(--cyan-bright);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:9px
}
.category-card h3 {
    letter-spacing:-.045em;
    margin:8px 0 0;
    font-size:clamp(26px, 2.4vw, 38px);
    font-weight:350
}
.category-card>strong {
    z-index:2;
    color:#8a96a6;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin-top:28px;
    font-size:9px;
    font-weight:500;
    position:relative
}
@media (prefers-reduced-motion:reduce) {
    .category-card>img {
        transition:none
    }
    .category-card:hover>img {
        transform:scale(1.01)
    }
}
.prepared-visual {
    background:linear-gradient(#61cbff0b 1px, #0000 1px) 0 0/32px 32px, linear-gradient(90deg, #61cbff0b 1px, #0000 1px) 0 0/32px 32px, radial-gradient(circle, #1da8ff1c, #0000 42%), #0a0e14;
    border:1px dashed #61cbff52;
    place-items:center;
    min-height:260px;
    display:grid;
    position:relative;
    overflow:hidden
}
.prepared-visual:before, .prepared-visual:after {
    content:"";
    border-color:#61cbffb3;
    width:18px;
    height:18px;
    position:absolute
}
.prepared-visual:before {
    border-top:1px solid;
    border-left:1px solid;
    top:12px;
    left:12px
}
.prepared-visual:after {
    border-bottom:1px solid;
    border-right:1px solid;
    bottom:12px;
    right:12px
}
.prepared-visual>img {
    z-index:2;
    object-fit:contain;
    width:100%;
    height:100%;
    position:absolute;
    inset:0
}
.prepared-visual.image-ready {
    background:#f5f5f3;
    border-style:solid;
    border-color:#ffffff14
}
.prepared-visual.image-ready .prepared-visual-label {
    display:none
}
.prepared-visual-label {
    text-align:center;
    gap:8px;
    max-width:80%;
    display:grid
}
.prepared-visual-label span {
    color:var(--cyan-bright);
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:9px
}
.prepared-visual-label strong {
    font-size:17px;
    font-weight:450
}
.prepared-visual-label small {
    color:#5f6d7e;
    font-family:var(--font-geist-mono),  monospace;
    font-size:8px;
    line-height:1.5
}
.product-story-copy h2, .audio-focus-head h2 {
    letter-spacing:-.07em;
    margin:16px 0 0;
    font-size:clamp(50px, 5.8vw, 92px);
    font-weight:300;
    line-height:.92
}
.product-story-copy h2 span, .audio-focus-head h2 span {
    color:#8592a3
}
.product-story-copy>p:not(.eyebrow), .audio-focus-head>p {
    color:#8f9cad;
    max-width:540px;
    margin:28px 0 0;
    font-size:15px;
    line-height:1.7
}
.product-section-number {
    color:#5f6c7d;
    font-family:var(--font-geist-mono),  monospace;
    letter-spacing:.15em;
    font-size:10px
}
.product-spec-row {
    border-top:1px solid #ffffff1f;
    border-bottom:1px solid #ffffff1f;
    grid-template-columns:repeat(3, 1fr);
    margin-top:38px;
    display:grid
}
.product-spec-row span {
    gap:5px;
    padding:20px 14px 20px 0;
    display:grid
}
.product-spec-row span+span {
    border-left:1px solid #ffffff1f;
    padding-left:16px
}
.product-spec-row strong {
    font-size:clamp(20px, 2vw, 30px);
    font-weight:350
}
.product-spec-row small {
    color:#667486;
    font-size:9px
}
.audio-focus-page {
    color:#080b10;
    background:#f1f2f4;
    display:block
}
.audio-focus-page:after {
    color:#05070b61
}
.audio-focus-head {
    grid-template-columns:.34fr .8fr .52fr;
    align-items:end;
    gap:4vw;
    margin-bottom:44px;
    display:grid
}
.audio-focus-head h2 {
    font-size:clamp(44px, 5vw, 78px)
}
.audio-focus-head>p {
    color:#6d7784;
    margin:0
}
.audio-products {
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    display:grid
}
.audio-products article {
    background:#fff;
    border:1px solid #d9dde2;
    grid-template-rows:1fr auto;
    min-height:440px;
    display:grid
}
.audio-products article.audio-product-featured {
    color:#fff;
    background:#0b0e13;
    transform:translateY(-12px);
    box-shadow:0 28px 60px #171d252b
}
.audio-products .prepared-visual {
    aspect-ratio:1;
    border:0;
    border-bottom:1px solid #dfe3e7;
    min-height:0
}
.audio-products .prepared-visual>img, .cable-hero-slot .prepared-visual>img {
    object-fit:cover;
    object-position:center
}
.audio-products article>div:last-child {
    padding:20px 22px
}
.audio-products small {
    color:#e65026;
    letter-spacing:.13em;
    text-transform:uppercase;
    font-size:9px
}
.audio-products h3 {
    letter-spacing:-.04em;
    margin:6px 0 2px;
    font-size:30px
}
.audio-products p {
    color:#7b8592;
    margin:0;
    font-size:10px
}
.cable-highlight-page {
    grid-template-columns:minmax(310px, .58fr) minmax(620px, 1.42fr)
}
.cable-showcase {
    grid-template-columns:minmax(240px, .75fr) minmax(380px, 1.25fr);
    gap:10px;
    display:grid
}
.cable-hero-slot .prepared-visual {
    color:#15181d;
    background-color:#e8e6e0;
    border-color:#c9c6bf;
    height:100%;
    min-height:100%
}
@media (width<=1050px) {
    .category-cards {
        grid-template-columns:repeat(2, 1fr)
    }
    .category-card {
        min-height:320px
    }
    .audio-focus-head {
        grid-template-columns:.34fr 1fr
    }
    .audio-focus-head>p {
        grid-column:2
    }
    .cable-showcase {
        grid-template-columns:1fr
    }
    .cable-hero-slot {
        min-height:300px
    }
}
@media (width<=820px) {
    .audio-focus-head {
        grid-template-columns:1fr
    }
    .audio-focus-head>p {
        grid-column:auto
    }
    .audio-products {
        grid-template-columns:1fr
    }
    .audio-products article.audio-product-featured {
        transform:none
    }
    .cable-highlight-page {
        display:block
    }
    .cable-showcase {
        margin-top:40px
    }
}
@media (width<=760px) {
    .product-categories-page, .power-bank-page, .audio-focus-page {
        padding-right:24px
    }
    .power-bank-page {
        display:block
    }
    .audio-focus-head {
        grid-template-columns:1fr
    }
    .audio-focus-head>p {
        grid-column:auto
    }
    .audio-products {
        grid-template-columns:1fr
    }
    .audio-products article.audio-product-featured {
        transform:none
    }
    .cable-showcase {
        margin-top:40px
    }
}
@media (width<=520px) {
    .category-cards {
        grid-template-columns:1fr
    }
    .category-card {
        min-height:270px
    }
    .product-spec-row {
        grid-template-columns:1fr
    }
    .product-spec-row span+span {
        border-top:1px solid #ffffff1f;
        border-left:0;
        padding-left:0
    }
    .product-image-composition {
        grid-template-rows:repeat(3, 280px);
        grid-template-columns:1fr;
        min-height:auto
    }
    .product-image-composition .prepared-visual:first-child {
        grid-row:auto
    }
}
@property --tw-rotate-x {
    syntax:"*";
    inherits:false
}
@property --tw-rotate-y {
    syntax:"*";
    inherits:false
}
@property --tw-rotate-z {
    syntax:"*";
    inherits:false
}
@property --tw-skew-x {
    syntax:"*";
    inherits:false
}
@property --tw-skew-y {
    syntax:"*";
    inherits:false
}
@property --tw-blur {
    syntax:"*";
    inherits:false
}
@property --tw-brightness {
    syntax:"*";
    inherits:false
}
@property --tw-contrast {
    syntax:"*";
    inherits:false
}
@property --tw-grayscale {
    syntax:"*";
    inherits:false
}
@property --tw-hue-rotate {
    syntax:"*";
    inherits:false
}
@property --tw-invert {
    syntax:"*";
    inherits:false
}
@property --tw-opacity {
    syntax:"*";
    inherits:false
}
@property --tw-saturate {
    syntax:"*";
    inherits:false
}
@property --tw-sepia {
    syntax:"*";
    inherits:false
}
@property --tw-drop-shadow {
    syntax:"*";
    inherits:false
}
@property --tw-drop-shadow-color {
    syntax:"*";
    inherits:false
}
@property --tw-drop-shadow-alpha {
    syntax:"<percentage>";
    inherits:false;
    initial-value:100%
}
@property --tw-drop-shadow-size {
    syntax:"*";
    inherits:false
}
/* =========================================================
   REVISION COVER OMMI
   ========================================================= */

/* 1. Logo navbar tetap tampil */
.site-header > a:first-child {
    visibility: visible !important;
}

/* 2. Hilangkan tulisan "OMMI PRODUCT · 2026" */
.cover-page .eyebrow {
    display: none !important;
}

/* 3. Hilangkan logo OMMI di dalam bulatan biru kanan */
.cover-copy {
    position: static;
}

.cover-copy > .mark-logo {
    display: none !important;
}

/* 4. Hilangkan tulisan vertikal di dalam bulatan biru */
.cover-page .vertical-year,
.cover-page .vertical-category {
    display: none !important;
}

/* Hilangkan label biru yang mengulang teks oranye di paragraf cerita. */
.story-page > .story-copy > .eyebrow {
    display: none !important;
}

/* Tampilkan foto proses reliability dalam rasio aslinya agar tidak terpotong. */
.reliability-page {
    height: auto;
    min-height: 0;
    display: block;
    overflow: hidden;
}

.reliability-image {
    object-fit: contain;
    width: 100%;
    height: auto;
}

/* Gunakan artwork katalog M11 secara utuh pada area spotlight. */
.phone-spotlight .phone-stage {
    aspect-ratio: 1;
    width: min(100%, 640px);
    min-height: 0;
    justify-self: center;
    overflow: hidden;
}

.phone-spotlight .phone-stage > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-height: none;
    filter: none;
    transform: none;
}

.phone-spotlight .phone-halo,
.phone-spotlight .stage-note {
    display: none;
}

/* Rapikan katalog telepon dan sediakan pemilih warna interaktif. */
.phone-card {
    border-bottom: 3px solid var(--selected-phone-color, #d8dde3);
}

.phone-card-top small {
    display: none;
}

.phone-card-image {
    background: #fff;
}

.phone-card-image img {
    object-fit: contain;
}

.phone-color-controls {
    border-top: 1px solid #e7eaee;
    margin-top: 16px;
    padding-top: 14px;
}

.phone-color-label {
    color: #5f6975;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 9px;
}

.phone-color-swatches {
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    display: flex;
}

.phone-color-swatch {
    background: var(--swatch-color);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    box-shadow: 0 0 0 1px #aeb6c0;
    transition: transform .18s, box-shadow .18s;
}

.phone-color-swatch:hover {
    transform: scale(1.1);
}

.phone-color-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px #151a21, 0 0 0 4px #fff;
    transform: scale(1.08);
}

.phone-color-swatch:focus-visible,
.phone-specifications summary:focus-visible {
    outline: 2px solid #147fd1;
    outline-offset: 3px;
}

.phone-specifications {
    border-top: 1px solid #e7eaee;
    margin-top: 15px;
    padding-top: 13px;
}

.phone-specifications summary {
    color: #18202a;
    cursor: pointer;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
}

.phone-specifications ul {
    color: #66717e;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    margin-top: 12px;
    display: grid;
}

.phone-specifications li {
    font-size: 9px;
    line-height: 1.35;
}

.phone-specifications li::before {
    content: "•";
    color: var(--selected-phone-color, #147fd1);
    margin-right: 5px;
}

.phone-specifications-panel h4 {
    color: #18202a;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 14px 0 8px;
    font-size: 9px;
}

.phone-card-copy,
.phone-specifications,
.phone-specifications-panel {
    min-width: 0;
}

.phone-specifications .phone-technical-specifications,
.phone-specifications .phone-key-features {
    list-style: none;
    padding: 0;
}

.phone-specifications .phone-technical-specifications {
    margin: 0;
}

.phone-specifications .phone-key-features {
    color: #4f5b68;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin: 0;
}

.phone-specifications .phone-key-features li {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    display: grid;
}

.phone-specifications .phone-key-features li::before {
    content: none;
}

.phone-key-features img {
    object-fit: contain;
    width: 34px;
    height: 34px;
}

.phone-key-features span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.phone-availability-status {
    color: #60758b !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    border: 1px solid #ccd6df;
    border-radius: 99px;
    width: fit-content;
    margin-top: 15px !important;
    padding: 7px 10px;
    font-size: 9px !important;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .phone-color-swatch {
        transition: none;
    }
}

/* Galeri power bank: gambar utuh dan dapat dibuka dalam lightbox. */
.power-bank-gallery .power-bank-card {
    cursor: zoom-in;
}

.power-bank-gallery .power-bank-card > img,
.power-bank-gallery .power-bank-card:hover > img {
    object-fit: contain;
    object-position: center;
    transform: none;
}

.power-bank-gallery .power-bank-card:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 4px;
}

.product-lightbox {
    color: #fff;
    background: #05080de8;
    border: 1px solid #ffffff2e;
    border-radius: 8px;
    width: min(94vw, 1180px);
    max-width: none;
    height: min(92vh, 900px);
    max-height: none;
    padding: 52px 24px 24px;
    overflow: hidden;
    box-shadow: 0 30px 100px #000c;
}

.product-lightbox[open] {
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: 14px;
    display: grid;
}

.product-lightbox::backdrop {
    background: #010308e6;
    backdrop-filter: blur(8px);
}

.product-lightbox-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.product-lightbox-caption {
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0;
    font-size: 11px;
}

.product-lightbox-close {
    color: #fff;
    background: #111720e8;
    border: 1px solid #ffffff3b;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 25px;
    line-height: 1;
    position: absolute;
    top: 10px;
    right: 10px;
}

.product-lightbox-close:hover,
.product-lightbox-close:focus-visible {
    border-color: var(--cyan-bright);
    color: var(--cyan-bright);
    outline: none;
}

@media (width <= 640px) {
    .product-lightbox {
        width: 96vw;
        height: 86vh;
        padding: 48px 12px 16px;
    }
}

/* Produk audio: gambar interaktif, warna, dan spesifikasi katalog. */
.audio-products article {
    border-bottom: 3px solid var(--selected-audio-color, #d9dde2);
}

.audio-products .prepared-visual {
    background: #fff;
    cursor: zoom-in;
}

.audio-products .prepared-visual > img {
    object-fit: contain;
    object-position: center;
}

.audio-products .prepared-visual:focus-visible {
    outline: 2px solid #147fd1;
    outline-offset: -4px;
}

.audio-color-controls {
    border-top: 1px solid #dfe3e7;
    margin-top: 15px;
    padding-top: 13px;
}

.audio-product-featured .audio-color-controls,
.audio-product-featured .audio-specifications {
    border-color: #ffffff24;
}

.audio-color-label {
    color: #697481;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 9px;
}

.audio-product-featured .audio-color-label {
    color: #aeb8c5;
}

.audio-color-swatches {
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    display: flex;
}

.audio-color-swatch {
    background: var(--swatch-color);
    border: 2px solid #fff;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    cursor: pointer;
    box-shadow: 0 0 0 1px #aeb6c0;
    transition: transform .18s, box-shadow .18s;
}

.audio-color-swatch:hover {
    transform: scale(1.1);
}

.audio-color-swatch[aria-pressed="true"] {
    box-shadow: 0 0 0 2px #147fd1, 0 0 0 4px #fff;
    transform: scale(1.08);
}

.audio-color-swatch:focus-visible,
.audio-specifications summary:focus-visible {
    outline: 2px solid #147fd1;
    outline-offset: 3px;
}

.audio-specifications {
    border-top: 1px solid #dfe3e7;
    margin-top: 14px;
    padding-top: 12px;
}

.audio-specifications summary {
    color: #18202a;
    cursor: pointer;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
}

.audio-product-featured .audio-specifications summary {
    color: #fff;
}

.audio-specifications ul {
    color: #697481;
    gap: 7px;
    margin-top: 11px;
    display: grid;
}

.audio-product-featured .audio-specifications ul {
    color: #aeb8c5;
}

.audio-specifications li {
    font-size: 9px;
    line-height: 1.35;
}

.audio-specifications li::before {
    content: "•";
    color: var(--selected-audio-color, #147fd1);
    margin-right: 5px;
}

@media (prefers-reduced-motion: reduce) {
    .audio-color-swatch {
        transition: none;
    }
}

/* Charger section */
.charger-page {
    min-height: var(--catalog-page-height);
    scroll-margin-top: var(--site-header-height);
    background:
        linear-gradient(#4b9fff0c 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(90deg, #4b9fff0c 1px, transparent 1px) 0 0 / 42px 42px,
        radial-gradient(circle at 72% 42%, #125fbb38, transparent 34%),
        #05080d;
    border-bottom: 1px solid #ffffff14;
    grid-template-columns: minmax(320px, .68fr) minmax(600px, 1.32fr);
    align-items: center;
    gap: clamp(42px, 5vw, 82px);
    padding: 118px max(7vw, 72px) 70px;
    display: grid;
    position: relative;
    overflow: hidden;
}

.charger-copy {
    z-index: 2;
    min-width: 0;
    position: relative;
}

.charger-copy h2 {
    letter-spacing: -.07em;
    margin: 18px 0 0;
    font-size: clamp(54px, 5.5vw, 90px);
    font-weight: 300;
    line-height: .92;
}

.charger-copy h2 span {
    color: #8592a3;
}

.charger-copy > p:not(.eyebrow) {
    color: #8f9cad;
    max-width: 520px;
    margin: 28px 0 0;
    font-size: 15px;
    line-height: 1.7;
}

.charger-specs {
    border-top: 1px solid #ffffff1f;
    border-bottom: 1px solid #ffffff1f;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 38px;
    display: grid;
}

.charger-specs > span {
    gap: 5px;
    min-width: 0;
    padding: 20px 12px 20px 0;
    display: grid;
}

.charger-specs > span + span {
    border-left: 1px solid #ffffff1f;
    padding-left: 16px;
}

.charger-specs strong {
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 350;
}

.charger-specs small {
    color: #667486;
    font-size: 9px;
}

.charger-gallery {
    gap: 12px;
    min-width: 0;
    display: grid;
}

.charger-hero,
.charger-product-card {
    color: inherit;
    background: #080d14;
    border: 1px solid #6fa7d957;
    cursor: zoom-in;
    text-align: left;
    min-width: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.charger-hero {
    aspect-ratio: 16 / 9;
}

.charger-hero > img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
}

.charger-hero > span {
    color: #fff;
    background: linear-gradient(transparent, #020509e8);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 42px 18px 16px;
    font-size: 9px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

.charger-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    display: grid;
}

.charger-product-card {
    background: #f7f7f5;
    grid-template-rows: minmax(180px, 1fr) auto;
    display: grid;
}

.charger-product-card > img {
    object-fit: contain;
    width: 100%;
    height: 230px;
    padding: 10px;
}

.charger-product-card > span {
    color: #0a0d12;
    background: #fff;
    border-top: 1px solid #dfe3e7;
    gap: 4px;
    padding: 15px;
    display: grid;
}

.charger-product-card strong {
    letter-spacing: -.02em;
    font-size: 17px;
}

.charger-product-card small {
    color: #6f7985;
    font-size: 9px;
}

.charger-hero:hover,
.charger-product-card:hover {
    border-color: var(--cyan-bright);
}

.charger-hero:focus-visible,
.charger-product-card:focus-visible {
    outline: 2px solid var(--cyan-bright);
    outline-offset: 3px;
}

@media (width <= 1180px) {
    .charger-page {
        padding-right: max(7vw, 72px);
        display: block;
    }

    .charger-gallery {
        margin-top: 48px;
    }
}

@media (width <= 760px) {
    .charger-page {
        padding: 92px 24px 64px;
    }

    .charger-product-grid {
        grid-template-columns: 1fr;
    }

    .charger-product-card {
        grid-template-columns: minmax(140px, .8fr) 1fr;
        grid-template-rows: 1fr;
    }

    .charger-product-card > img {
        height: 190px;
    }

    .charger-product-card > span {
        border-top: 0;
        border-left: 1px solid #dfe3e7;
        align-content: center;
    }
}

@media (width <= 520px) {
    .charger-copy h2 {
        font-size: clamp(48px, 15vw, 68px);
    }

    .charger-specs > span {
        padding: 16px 8px 16px 0;
    }

    .charger-specs > span + span {
        padding-left: 10px;
    }
}

/* Tambahkan kategori Charger ke halaman keluarga produk. */
.category-cards {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.category-card-charger > img {
    object-position: center;
}

@media (width <= 1180px) {
    .category-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (width <= 760px) {
    .category-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (width <= 520px) {
    .category-cards {
        grid-template-columns: 1fr;
    }
}

/* Katalog kabel visual: satu gambar asli untuk setiap material kabel. */
.cable-highlight-page {
    grid-template-columns: minmax(280px, .48fr) minmax(720px, 1.52fr);
    gap: clamp(38px, 4.5vw, 76px);
}

.cable-products-ready {
    min-width: 0;
    display: block;
}

.cable-products-ready .cable-hero-slot {
    display: none;
}

.cable-products-ready .cable-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    display: grid;
}

.cable-products-ready .cable-list article {
    background: #fff;
    border: 1px solid #d8d5ce;
    border-radius: 6px;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 500px;
    padding: 0;
    display: grid;
    overflow: hidden;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.cable-products-ready .cable-list article.featured {
    background: #10141a;
    border-color: #10141a;
    transform: translateY(-10px);
    box-shadow: 0 28px 65px #14181f30;
}

.cable-products-ready .cable-list article:hover {
    border-color: #c8502d;
    transform: translateY(-7px);
    box-shadow: 0 24px 52px #2820181f;
}

.cable-products-ready .cable-list article.featured:hover {
    transform: translateY(-17px);
}

.cable-product-visual {
    color: #fff;
    background: #17191d;
    border: 0;
    border-bottom: 1px solid #d8d5ce;
    width: 100%;
    height: clamp(280px, 37vh, 380px);
    cursor: zoom-in;
    padding: 0;
    position: relative;
    overflow: hidden;
}

.featured .cable-product-visual {
    border-color: #ffffff1c;
}

.cable-product-visual img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform .4s ease;
}

.cable-product-visual:hover img {
    transform: scale(1.035);
}

.cable-product-visual span {
    background: linear-gradient(transparent, #080a0dcc);
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 44px 16px 14px;
    font-size: 8px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

.cable-product-visual:focus-visible {
    outline: 2px solid #e65026;
    outline-offset: -4px;
}

.cable-product-meta {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    min-height: 160px;
    padding: 20px;
    display: grid;
}

.cable-product-meta .cable-number {
    border: 1px solid #c8c4bd;
    border-radius: 99px;
    padding: 6px 8px;
}

.featured .cable-product-meta .cable-number {
    border-color: #ffffff31;
}

.cable-product-info {
    min-width: 0;
}

.cable-products-ready .cable-product-info h3 {
    font-size: clamp(18px, 1.45vw, 24px);
}

.cable-products-ready .cable-product-info p {
    line-height: 1.5;
}

.cable-products-ready .cable-product-meta > strong {
    font-size: clamp(22px, 2vw, 32px);
    white-space: nowrap;
}

@media (width <= 1180px) {
    .cable-highlight-page {
        display: block;
    }

    .cable-products-ready {
        margin-top: 48px;
    }
}

@media (width <= 820px) {
    .cable-products-ready .cable-list {
        grid-template-columns: 1fr;
    }

    .cable-products-ready .cable-list article,
    .cable-products-ready .cable-list article.featured {
        min-height: 0;
        transform: none;
    }

    .cable-products-ready .cable-list article:hover,
    .cable-products-ready .cable-list article.featured:hover {
        transform: translateY(-4px);
    }

    .cable-product-visual {
        height: clamp(260px, 60vw, 420px);
    }
}

@media (width <= 520px) {
    .cable-product-meta {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 17px;
    }

    .cable-products-ready .cable-product-meta > strong {
        grid-column: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cable-products-ready .cable-list article,
    .cable-product-visual img {
        transition: none;
    }
}

/* Service center directory */
.service-center-page {
    color: #f8fbff;
    background: #04070c;
    min-height: var(--catalog-page-height);
    scroll-margin-top: var(--site-header-height);
    position: relative;
    overflow: hidden;
}

.service-center-hero {
    background:
        linear-gradient(#4199e20d 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, #4199e20d 1px, transparent 1px) 0 0 / 44px 44px,
        radial-gradient(circle at 78% 45%, #116fd347, transparent 30%),
        #04070c;
    min-height: 620px;
    padding: clamp(100px, 12vh, 140px) max(7vw, 72px) 62px;
    position: relative;
    display: grid;
    align-content: space-between;
}

.service-center-intro {
    z-index: 2;
    max-width: 860px;
    position: relative;
}

.service-center-intro .eyebrow {
    color: #55c9ff;
}

.service-center-intro h2 {
    letter-spacing: -.075em;
    margin: 22px 0 0;
    font-size: clamp(68px, 8.5vw, 138px);
    font-weight: 300;
    line-height: .84;
}

.service-center-intro h2 span {
    color: #8391a5;
}

.service-center-intro > p:last-child {
    color: #9aa7b9;
    max-width: 580px;
    margin: 38px 0 0;
    font-size: 15px;
    line-height: 1.75;
}

.service-center-orbit {
    aspect-ratio: 1;
    border: 1px solid #58baff35;
    border-radius: 50%;
    width: min(48vw, 640px);
    position: absolute;
    top: 50%;
    right: -8vw;
    transform: translateY(-50%);
    box-shadow: inset 0 0 100px #1269c51c, 0 0 100px #1269c51a;
}

.service-center-orbit::before,
.service-center-orbit::after,
.service-center-orbit i {
    content: "";
    border: 1px solid #58baff24;
    border-radius: 50%;
    position: absolute;
    inset: 12%;
}

.service-center-orbit::after {
    border-style: dashed;
    inset: 28%;
}

.service-center-orbit i {
    background: #63d3ff;
    border: 0;
    width: 7px;
    height: 7px;
    inset: auto;
    box-shadow: 0 0 18px #40bfff;
}

.service-center-orbit i:nth-child(1) { top: 18%; left: 22%; }
.service-center-orbit i:nth-child(2) { top: 54%; left: 7%; }
.service-center-orbit i:nth-child(3) { right: 18%; bottom: 15%; }

.service-center-stats {
    z-index: 2;
    border-top: 1px solid #ffffff1e;
    border-bottom: 1px solid #ffffff1e;
    grid-template-columns: repeat(3, minmax(0, 180px));
    width: max-content;
    max-width: 100%;
    margin-top: 70px;
    display: grid;
    position: relative;
}

.service-center-stats > span {
    gap: 6px;
    padding: 18px 34px 18px 0;
    display: grid;
}

.service-center-stats > span + span {
    border-left: 1px solid #ffffff1e;
    padding-left: 34px;
}

.service-center-stats strong {
    color: #f4f9ff;
    font-size: clamp(25px, 2.5vw, 38px);
    font-weight: 350;
}

.service-center-stats small {
    color: #68778b;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 8px;
}

.service-center-directory {
    color: #0b1017;
    background:
        linear-gradient(#1b5f9408 1px, transparent 1px) 0 0 / 38px 38px,
        linear-gradient(90deg, #1b5f9408 1px, transparent 1px) 0 0 / 38px 38px,
        #eef1f3;
    padding: 70px max(7vw, 72px) 88px;
}

.service-center-toolbar {
    grid-template-columns: minmax(320px, 1fr) minmax(210px, 280px);
    gap: 12px;
    display: grid;
}

.service-search,
.service-filter {
    background: #fff;
    border: 1px solid #cfd6dd;
    border-radius: 4px;
    align-items: center;
    min-height: 58px;
    display: flex;
}

.service-search:focus-within,
.service-filter:focus-within {
    border-color: #147fd1;
    box-shadow: 0 0 0 3px #147fd118;
}

.service-search > span {
    color: #147fd1;
    padding-left: 20px;
    font-size: 25px;
}

.service-search input,
.service-filter select {
    color: #111821;
    background: transparent;
    border: 0;
    outline: 0;
    width: 100%;
    min-width: 0;
    padding: 18px;
    font: inherit;
    font-size: 13px;
}

.service-search input::placeholder {
    color: #89939f;
}

.service-filter {
    gap: 8px;
    padding-left: 18px;
}

.service-filter > span {
    color: #7a8591;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 8px;
}

.service-filter select {
    cursor: pointer;
    padding-left: 4px;
}

.service-directory-meta {
    color: #697481;
    justify-content: space-between;
    align-items: center;
    margin: 28px 0 18px;
    display: flex;
}

.service-directory-meta p {
    margin: 0;
    font-size: 12px;
}

.service-directory-meta span {
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: 8px;
}

.service-center-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    display: grid;
}

.service-center-card {
    background: #fff;
    border: 1px solid #d2d8de;
    border-radius: 5px;
    min-width: 0;
    min-height: 292px;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.service-center-card::before {
    content: "";
    background: linear-gradient(90deg, #147fd1, #5dd7ff);
    height: 3px;
    position: absolute;
    top: 0;
    right: 100%;
    left: 0;
    transition: right .25s ease;
}

.service-center-card:hover {
    border-color: #93b9d7;
    transform: translateY(-5px);
    box-shadow: 0 22px 48px #16253417;
}

.service-center-card:hover::before {
    right: 0;
}

.service-card-top {
    color: #788491;
    justify-content: space-between;
    gap: 16px;
    display: flex;
}

.service-card-top > span {
    color: #147fd1;
    font-family: var(--font-geist-mono), monospace;
    font-size: 10px;
}

.service-card-top small {
    letter-spacing: .08em;
    text-align: right;
    text-transform: uppercase;
    font-size: 8px;
}

.service-center-card h3 {
    letter-spacing: -.035em;
    margin: 27px 0 0;
    font-size: clamp(21px, 1.8vw, 28px);
    font-weight: 450;
    line-height: 1.05;
}

.service-branch-name {
    color: #e65026;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 8px 0 0;
    font-size: 8px;
}

.service-center-card address {
    color: #687481;
    margin-top: 20px;
    font-size: 10px;
    font-style: normal;
    line-height: 1.6;
}

.service-card-actions {
    border-top: 1px solid #e0e4e8;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 17px;
    display: flex;
}

.service-card-actions a {
    color: #18212b;
    font-size: 10px;
    font-weight: 650;
}

.service-card-actions a:last-child {
    color: #147fd1;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 8px;
}

.service-card-actions a:hover {
    color: #e65026;
}

.service-contact-unavailable {
    color: #949da7;
    font-size: 9px;
}

.service-card-skeleton {
    background: linear-gradient(100deg, #fff 20%, #e5eaf0 45%, #fff 70%) 0 0 / 220% 100%;
    border: 1px solid #d2d8de;
    border-radius: 5px;
    min-height: 292px;
    animation: service-loading 1.4s linear infinite;
}

@keyframes service-loading {
    to { background-position: -220% 0; }
}

.service-load-more {
    color: #eaf7ff;
    background: #0b1119;
    border: 1px solid #284258;
    border-radius: 99px;
    cursor: pointer;
    gap: 28px;
    margin: 38px auto 0;
    padding: 14px 20px;
    font-size: 10px;
    font-weight: 650;
    display: flex;
}

.service-load-more:hover {
    border-color: #55c9ff;
}

.service-load-more[hidden] {
    display: none;
}

@media (width <= 1180px) and (width > 920px) {
    .site-header nav {
        gap: 15px;
        font-size: 9px;
    }

    .header-cta {
        padding: 9px 12px;
        font-size: 9px;
    }
}

@media (width <= 1050px) {
    .service-center-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-center-orbit {
        opacity: .62;
        right: -22vw;
    }
}

@media (width <= 760px) {
    .service-center-hero {
        min-height: 580px;
        padding: 96px 24px 46px;
    }

    .service-center-intro h2 {
        font-size: clamp(58px, 18vw, 92px);
    }

    .service-center-orbit {
        width: 92vw;
        right: -48vw;
    }

    .service-center-stats {
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .service-center-stats > span {
        padding: 15px 10px 15px 0;
    }

    .service-center-stats > span + span {
        padding-left: 12px;
    }

    .service-center-directory {
        padding: 48px 24px 66px;
    }

    .service-center-toolbar,
    .service-center-grid {
        grid-template-columns: 1fr;
    }

    .service-directory-meta {
        align-items: flex-start;
        gap: 8px;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-center-card,
    .service-center-card::before {
        transition: none;
    }

    .service-card-skeleton {
        animation: none;
    }
}

/* Shared catalogue links and static-data fallback states. */
.catalogue-link {
    color: #f5f9ff;
    background: #0c1118;
    border: 1px solid #2d465c;
    border-radius: 99px;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 40px;
    margin-top: 24px;
    padding: 10px 16px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: inline-flex;
}

.cable-copy .catalogue-link {
    color: #17120f;
    background: transparent;
    border-color: #c8bdb2;
}

.catalogue-link:hover {
    border-color: #55c9ff;
}

.product-catalog-fallback {
    color: #7c8794;
    background: #ffffff;
    border: 1px solid #d8dde3;
    border-radius: 5px;
    align-self: stretch;
    margin: 0;
    padding: 24px;
    font-size: 11px;
    line-height: 1.6;
}

/* JSON-driven Charger and Cable preview sliders. */
.charger-slider-host,
.cable-slider-showcase,
.product-preview-slider,
.product-preview-viewport {
    width: 100%;
    min-width: 0;
}

.cable-showcase.cable-slider-showcase {
    display: block;
}

.product-preview-viewport {
    cursor: grab;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
}

.product-preview-viewport::-webkit-scrollbar {
    display: none;
}

.product-preview-viewport.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.product-preview-track {
    gap: 12px;
    width: 100%;
    min-width: 0;
    display: flex;
}

.product-preview-card {
    color: #0b1017;
    background: #fff;
    border: 1px solid #d8dde3;
    border-radius: 6px;
    flex: 0 0 calc((100% - 24px) / 3);
    min-width: 0;
    scroll-snap-align: start;
    overflow: hidden;
}

.product-preview-image {
    background: #f7f7f5;
    aspect-ratio: 1.12;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
}

.product-preview-image img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block;
}

.product-preview-copy {
    border-top: 1px solid #e0e4e8;
    min-width: 0;
    padding: 16px;
    display: grid;
}

.product-preview-copy small {
    color: #147fd1;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 700;
}

.product-preview-copy strong {
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
    margin-top: 7px;
    font-size: 15px;
    line-height: 1.2;
}

.product-preview-copy p {
    color: #74808c;
    display: -webkit-box;
    min-height: 34px;
    margin: 8px 0 0;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-preview-copy span {
    color: #3e4b59;
    border-top: 1px solid #e6e9ec;
    overflow-wrap: anywhere;
    margin-top: 12px;
    padding-top: 10px;
    font-size: 9px;
    font-weight: 700;
}

.product-preview-controls {
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
    display: flex;
}

.product-preview-arrow {
    color: #eef7ff;
    background: #0b1119;
    border: 1px solid #35536d;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    cursor: pointer;
    font-size: 18px;
}

.product-preview-arrow:hover:not(:disabled),
.product-preview-arrow:focus-visible {
    border-color: var(--cyan-bright);
}

.product-preview-arrow:disabled {
    cursor: default;
    opacity: .35;
}

.cable-slider-showcase .product-preview-arrow {
    color: #151a20;
    background: #fff;
    border-color: #c5ccd3;
}

@media (width <= 1050px) {
    .product-preview-card {
        flex-basis: calc((100% - 12px) / 2);
    }
}

@media (width <= 640px) {
    .product-preview-card {
        flex-basis: 82%;
    }

    .product-preview-image {
        aspect-ratio: 1.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-preview-viewport {
        scroll-behavior: auto;
    }
}