/* ============================================================================
   Saqar Sama Kirkuk — "Showcase" theme.
   A product-page aesthetic in the spirit of apple.com/iphone: near-white and
   near-black full-bleed acts, one blue action colour, huge tightly-tracked
   headlines centred in generous space, and photography doing the talking.
   ========================================================================= */

:root {
    --sc-white: #FFFFFF;
    --sc-mist: #F5F5F7;
    --sc-black: #000000;
    --sc-ink: #1D1D1F;
    --sc-grey: #6E6E73;
    --sc-line: #D2D2D7;
    --sc-blue: #0071E3;
    --sc-blue-hover: #0077ED;
    --sc-nav-h: 52px;
    --sc-pad: clamp(1.25rem, 5vw, 4rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--sc-white); }

body {
    margin: 0;
    background: var(--sc-white);
    color: var(--sc-ink);
    font-family: "Cairo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.08;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.sc-wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--sc-pad); }
.sc-narrow { max-width: 780px; margin-inline: auto; }
.center { text-align: center; }

/* ------------------------------------------------------------------ nav -- */
.sc-nav {
    position: sticky;
    top: 0;
    z-index: 300;
    height: var(--sc-nav-h);
    background: rgba(255, 255, 255, .78);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.sc-nav-inner {
    max-width: 1120px;
    margin-inline: auto;
    height: 100%;
    padding-inline: var(--sc-pad);
    display: flex;
    align-items: center;
    gap: clamp(.9rem, 2.4vw, 2.2rem);
}
/* The company name must never wrap: it is the anchor of the bar. */
.sc-logo { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; flex: none; }
.sc-logo img { width: 22px; height: 22px; flex: none; }
.sc-logo span { white-space: nowrap; }

/* The category links are the flexible part — they scroll instead of squeezing. */
.sc-nav-links {
    display: flex;
    align-items: center;
    gap: clamp(.8rem, 2.2vw, 2rem);
    font-size: .76rem;
    color: var(--sc-ink);
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sc-nav-links::-webkit-scrollbar { display: none; }
.sc-nav-links a { opacity: .88; transition: opacity .25s ease; white-space: nowrap; }
.sc-nav-links a:hover { opacity: 1; }

.sc-nav-tools { margin-inline-start: auto; display: flex; align-items: center; gap: .9rem; font-size: .76rem; flex: none; }
.sc-nav-tools a { opacity: .88; }
.sc-nav-tools a:hover { opacity: 1; color: var(--sc-blue); }

.sc-burger { display: none; background: none; border: 0; font-size: 1rem; cursor: pointer; color: var(--sc-ink); padding: .2rem; }

/* ---------------------------------------------------------------- links -- */
.sc-link {
    color: var(--sc-blue);
    font-size: clamp(.95rem, 1.4vw, 1.2rem);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.sc-link:hover { text-decoration: underline; }
.sc-link i { font-size: .8em; transition: transform .3s ease; }
.sc-link:hover i { transform: translateX(-4px); }

.sc-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--sc-blue);
    color: #fff;
    border: 0;
    border-radius: 980px;
    padding: .78rem 1.5rem;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}
.sc-btn:hover { background: var(--sc-blue-hover); }
.sc-btn:active { transform: scale(.97); }
.sc-btn-ghost {
    background: transparent;
    color: var(--sc-blue);
    border: 1px solid var(--sc-blue);
}
.sc-btn-ghost:hover { background: rgba(0, 113, 227, .06); }

/* ----------------------------------------------------------------- acts -- */
.act { padding: clamp(2.6rem, 5.5vw, 4.5rem) 0; }
.act-mist { background: var(--sc-mist); }

/* A dark act is never flat black: a barely-there dot field drifts across it and
   a soft blue aurora breathes underneath. Both are slow on purpose. */
.act-dark {
    position: relative;
    background: var(--sc-black);
    color: #F5F5F7;
    overflow: hidden;
    isolation: isolate;
}
/* the geometric lattice from the company's older site, redrawn as white lines on
   transparency so it sits on black without washing it grey */
/* Anchored to the viewport, so the lattice lines up across every dark act
   instead of restarting at each section edge, and animated by background
   position so the layer itself never moves and never exposes a bare edge. */
.act-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("../image/pattern-lines.png");
    background-size: 360px 360px;
    background-repeat: repeat;
    background-attachment: fixed;
    opacity: .035;
    animation: sc-drift 160s linear infinite;
}
.act-dark::after {
    content: "";
    position: absolute;
    inset: -30% -10%;
    z-index: -1;
    background:
        radial-gradient(38% 42% at 22% 28%, rgba(0, 113, 227, .11), transparent 70%),
        radial-gradient(34% 40% at 78% 74%, rgba(41, 151, 255, .07), transparent 72%);
    filter: blur(28px);
    animation: sc-breathe 26s ease-in-out infinite alternate;
}
.act-dark > * { position: relative; z-index: 1; }

@keyframes sc-drift {
    from { background-position: 0 0; }
    to { background-position: -360px -360px; }
}
@keyframes sc-breathe {
    from { transform: translate3d(-2%, 0, 0) scale(1); opacity: .85; }
    to { transform: translate3d(2%, -3%, 0) scale(1.08); opacity: 1; }
}

.act-title {
    font-size: clamp(2.2rem, 6.4vw, 4.6rem);
    letter-spacing: -.02em;
}
.act-sub {
    font-size: clamp(1.05rem, 1.9vw, 1.5rem);
    color: var(--sc-grey);
    margin-top: 1rem;
    font-weight: 400;
}
.act-dark .act-sub { color: #A1A1A6; }

/* ----------------------------------------------------------------- hero -- */
/* White stage: the devices are the subject, everything else gets out of the way. */
.sc-hero {
    position: relative;
    background:
        radial-gradient(80% 55% at 50% 88%, rgba(0, 113, 227, .10), transparent 70%),
        var(--sc-white);
    color: var(--sc-ink);
    text-align: center;
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    overflow: hidden;
}
.sc-hero .kicker {
    font-size: clamp(.98rem, 1.7vw, 1.3rem);
    color: var(--sc-grey);
    margin-bottom: .5rem;
}
.sc-hero h1 {
    font-size: clamp(2.4rem, 8vw, 5.8rem);
    letter-spacing: -.03em;
}
.sc-hero .tag {
    font-size: clamp(1.05rem, 2vw, 1.6rem);
    color: var(--sc-ink);
    margin-top: .9rem;
    font-weight: 400;
}
.sc-hero .actions { display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* ------------------------------------------------------- 3D device stage -- */
/* Two handsets built out of six faces each, so they can actually be turned in
   space. The stage owns the perspective; JS only sets the scene's rotation. */
.sc-stage3d {
    position: relative;
    margin-top: clamp(1.2rem, 3vw, 2.4rem);
    height: clamp(330px, 44vw, 500px);
    perspective: 1500px;
    perspective-origin: 50% 45%;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.sc-stage3d.is-dragging { cursor: grabbing; }

.sc-scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(-8deg) rotateY(0deg);
    will-change: transform;
}

.p3d {
    --w: 232px;
    --h: 476px;
    --d: 20px;
    --radius: 34px;
    --slabs: 18;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--w);
    height: var(--h);
    transform-style: preserve-3d;
}
.p3d-a { --w: 208px; --h: 428px; --d: 19px; --radius: 32px; transform: translate(-50%, -50%) translate3d(-128px, -12px, 32px) rotateY(-13deg); }
/* device B keeps the near-square corners of the current large Androids */
.p3d-b { --w: 196px; --h: 410px; --d: 17px; --radius: 16px; transform: translate(-50%, -50%) translate3d(130px, 18px, -32px) rotateY(11deg); }

/* The extrusion: identical rounded slabs stacked along Z. Because every layer
   carries the same border-radius, the silhouette stays rounded from any angle —
   no square corners poking out of the rounded body. */
.p3d .slab, .p3d .f {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--w);
    height: var(--h);
    border-radius: var(--radius);
}
.p3d .slab {
    --step: calc(var(--d) / (var(--slabs) - 1));
    transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2 - var(--i) * var(--step)));
}
.p3d .f { backface-visibility: hidden; }
.p3d .f-front { transform: translate(-50%, -50%) translateZ(calc(var(--d) / 2 + .2px)); }
.p3d .f-back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--d) / 2 + .2px)); }

/* frames */
.p3d-a .slab { background: linear-gradient(150deg, #3C4149, #17191D 46%, #2B2F35 72%, #0F1115); }
.p3d-a .f-front { background: linear-gradient(150deg, #4A4F57, #16181C 42%, #2B2F35 68%, #101216); padding: 7px; }
.p3d-a .f-back { background: linear-gradient(150deg, #3A3E45, #17191D 45%, #2A2E34 72%, #0F1115); }
.p3d-b .slab { background: linear-gradient(150deg, #E2E8EF, #9BA4AF 46%, #CFD6DE 72%, #828A94); }
.p3d-b .f-front { background: linear-gradient(150deg, #E7ECF2, #97A0AB 45%, #D3DAE2 70%, #7C848E); padding: 6px; }
.p3d-b .f-back { background: linear-gradient(150deg, #DFE5EC, #A6AEB9 48%, #CBD2DA 74%, #858D97); }

/* a lit rim on the outermost slabs reads as the polished edge of the frame */
.p3d .slab:first-of-type, .p3d .slab:last-of-type { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .18); }

/* screens: the company mark on a near-black wallpaper */
.screen {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--radius) - 7px);
    overflow: hidden;
    background:
        radial-gradient(70% 55% at 50% 42%, rgba(46, 127, 176, .16), transparent 70%),
        linear-gradient(165deg, #1B1F24 0%, #0B0D10 55%, #050608 100%);
}

.wallpaper-logo {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58%;
    aspect-ratio: 1;
    background: url("../image/logo.png") center / contain no-repeat;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .55));
}
.screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .04) 38%, transparent 62%);
}
.screen-b { background: radial-gradient(70% 55% at 50% 42%, rgba(78, 163, 214, .14), transparent 70%), linear-gradient(165deg, #22262B 0%, #0E1114 58%, #06080A 100%); }

.island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 74px;
    height: 22px;
    border-radius: 12px;
    background: #05070A;
}
.punch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #05070A;
    box-shadow: inset 0 0 0 2px rgba(46, 127, 176, .55);
}

.ui { position: absolute; background: rgba(255, 255, 255, .16); border-radius: 8px; }
.ui-1 { top: 62px; inset-inline-start: 20px; width: 96px; height: 10px; background: rgba(255, 255, 255, .3); }
.ui-2 { top: 84px; inset-inline-start: 20px; width: 150px; height: 10px; }
.ui-block { top: 116px; inset-inline: 20px; height: 118px; border-radius: 14px; }
.ui-sq { top: 248px; width: 44%; height: 78px; border-radius: 12px; }
.ui-sq-1 { inset-inline-start: 20px; }
.ui-sq-2 { inset-inline-end: 20px; }
.ui-pill { bottom: 56px; inset-inline: 20px; height: 36px; border-radius: 18px; background: rgba(255, 255, 255, .22); }
.indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 84px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .5);
}

/* Camera modules, shaped after the current generations: a full-width plateau
   bar on device A, bare vertically-stacked lenses on device B. */
.cam i {
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #5A636F, #07090C 62%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14), 0 1px 3px rgba(0, 0, 0, .5);
}

.cam-a {
    position: absolute;
    top: 16px;
    inset-inline: 10px;
    height: 74px;
    padding: 12px 16px;
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .35);
    display: flex;
    align-items: center;
    gap: 10px;
}
.cam-a i { width: 44px; height: 44px; }
.cam-a i:nth-child(3) { width: 14px; height: 14px; background: radial-gradient(circle, #F2E6C8, #A8935F); margin-inline-start: auto; }

.cam-b {
    position: absolute;
    top: 22px;
    inset-inline-start: 20px;
    display: grid;
    gap: 12px;
}
.cam-b i { width: 30px; height: 30px; }
.cam-b i:nth-child(2) { width: 24px; height: 24px; margin-inline-start: 3px; }

.brand-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

/* contact shadow on the floor */
.sc-stage-shadow {
    position: absolute;
    inset-inline: 22%;
    bottom: 4%;
    height: 42px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(20, 24, 30, .30), transparent 72%);
    filter: blur(12px);
    pointer-events: none;
}

.sc-drag-hint {
    position: absolute;
    inset-inline: 0;
    bottom: -.2rem;
    font-size: .78rem;
    color: var(--sc-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    opacity: .85;
    transition: opacity .4s ease;
}
.sc-stage3d.is-dragging .sc-drag-hint { opacity: 0; }

@media (max-width: 700px) {
    .p3d { transform-origin: center; }
    .p3d-a { transform: translate(-50%, -50%) translate3d(-62px, -6px, 20px) rotateY(-12deg) scale(.74); }
    .p3d-b { transform: translate(-50%, -50%) translate3d(64px, 16px, -20px) rotateY(10deg) scale(.74); }
}

/* staged entrance */
.stage > * { animation: sc-rise 1s cubic-bezier(.28, .11, .32, 1) both; }
.stage > *:nth-child(1) { animation-delay: .05s; }
.stage > *:nth-child(2) { animation-delay: .13s; }
.stage > *:nth-child(3) { animation-delay: .21s; }
.stage > *:nth-child(4) { animation-delay: .29s; }
@keyframes sc-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- points -- */
/* A compact band, not a section: four facts on one line with tight padding. */
.act-points { padding-block: clamp(1.8rem, 3.4vw, 2.8rem); }
.sc-points {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(.8rem, 2.4vw, 2rem);
    text-align: center;
    align-items: start;
}
.sc-point b { display: block; font-size: clamp(1.05rem, 1.9vw, 1.45rem); letter-spacing: -.02em; line-height: 1.35; }
.sc-point span { color: var(--sc-grey); font-size: .88rem; }
.act-dark .sc-point span { color: #A1A1A6; }

/* ------------------------------------------------------------- showcase -- */
.sc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.8rem, 1.6vw, 1.25rem); }

.sc-card {
    position: relative;
    display: block;
    border-radius: 22px;
    overflow: hidden;
    background: var(--sc-mist);
    min-height: clamp(340px, 44vw, 520px);
    isolation: isolate;
}
.sc-card:first-child, .sc-card.is-wide { grid-column: 1 / -1; min-height: clamp(380px, 40vw, 560px); }

.sc-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    transition: transform 1.2s cubic-bezier(.28, .11, .32, 1);
}
.sc-card:hover img { transform: scale(1.045); }
.sc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .12) 46%, rgba(0, 0, 0, .06) 100%);
}
.sc-card-copy { padding: clamp(1.6rem, 3vw, 2.6rem); text-align: center; color: #fff; }
.sc-card-copy h3 { font-size: clamp(1.5rem, 3.2vw, 2.6rem); letter-spacing: -.02em; }
.sc-card-copy p { margin: .55rem 0 0; font-size: clamp(.92rem, 1.4vw, 1.1rem); opacity: .92; }
.sc-card-copy .sc-link { color: #2997FF; margin-top: .9rem; }

/* ---------------------------------------------------------------- items -- */
.sc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(1rem, 2vw, 1.8rem); }

.sc-item { display: block; text-align: center; }
.sc-item-shot {
    background: var(--sc-mist);
    border-radius: 18px;
    aspect-ratio: 1;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.sc-item-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.28, .11, .32, 1); }
.sc-item:hover .sc-item-shot img { transform: scale(1.06); }
.sc-item h3 { font-size: 1.05rem; margin-top: 1rem; }
.sc-item p { color: var(--sc-grey); font-size: .88rem; margin: .25rem 0 0; }
.sc-item .sc-link { font-size: .92rem; margin-top: .5rem; }

/* ---------------------------------------------------------------- story -- */
.sc-story p {
    font-size: clamp(1rem, 1.7vw, 1.42rem);
    line-height: 1.7;
    letter-spacing: -.01em;
    font-weight: 400;
    max-width: 92ch;
    margin-inline: auto;
    text-align: justify;
    text-justify: inter-word;
}
.sc-story .sign { text-align: center; }
.sc-story .sign { font-size: 1rem; color: var(--sc-grey); font-weight: 400; margin-top: 1.6rem; }
.act-dark .sc-story .sign { color: #A1A1A6; }

/* -------------------------------------------------------------- contact -- */
.sc-contact { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }

.sc-panel { background: var(--sc-white); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--sc-line); }

.sc-field { margin-bottom: 1rem; }
.sc-field label { display: block; font-size: .82rem; color: var(--sc-grey); margin-bottom: .35rem; }
.sc-field input, .sc-field textarea {
    width: 100%;
    border: 1px solid var(--sc-line);
    border-radius: 12px;
    padding: .8rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--sc-ink);
    background: var(--sc-white);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.sc-field textarea { min-height: 120px; resize: vertical; }
.sc-field input:focus, .sc-field textarea:focus {
    outline: none;
    border-color: var(--sc-blue);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, .12);
}
.sc-field .err { color: #D8272C; font-size: .82rem; }

.sc-info { list-style: none; margin: 0; padding: 0; }
.sc-info li { display: flex; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--sc-line); }
.sc-info li:last-child { border-bottom: 0; }
.sc-info i { color: var(--sc-grey); width: 1.1rem; text-align: center; margin-top: .3rem; }
.sc-info small { display: block; color: var(--sc-grey); font-size: .78rem; }
.sc-info a:hover { color: var(--sc-blue); }

.sc-socials { display: flex; gap: .5rem; margin-top: 1rem; }
.sc-socials a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--sc-mist);
    display: grid; place-items: center;
    color: var(--sc-ink);
    transition: background .25s ease, transform .25s ease, color .25s ease;
}
.sc-socials a:hover { background: var(--sc-blue); color: #fff; transform: translateY(-2px); }

.sc-map { width: 100%; height: 240px; border: 0; border-radius: 18px; margin-top: 1rem; }

/* --------------------------------------------------------------- footer -- */
.sc-footer { background: var(--sc-mist); color: var(--sc-grey); font-size: .78rem; padding: 2.5rem 0; }
.sc-footer-cols { display: flex; flex-wrap: wrap; gap: 2rem 3rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--sc-line); }
.sc-footer-col b { display: block; color: var(--sc-ink); font-size: .8rem; margin-bottom: .6rem; }
.sc-footer-col a { display: block; padding: .18rem 0; }
.sc-footer-col a:hover { color: var(--sc-ink); text-decoration: underline; }
.sc-footer-bottom { padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; }

/* --------------------------------------------------------- inner pages -- */
.sc-page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.sc-page-head h1 { font-size: clamp(2rem, 5.6vw, 3.8rem); }
.sc-page-head p { color: var(--sc-grey); margin: .8rem auto 0; max-width: 60ch; font-size: clamp(.98rem, 1.6vw, 1.2rem); }

.sc-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.4rem; }
.sc-chips a {
    border: 1px solid var(--sc-line);
    border-radius: 980px;
    padding: .4rem 1.1rem;
    font-size: .88rem;
    transition: all .25s ease;
}
.sc-chips a:hover { border-color: var(--sc-ink); }

.sc-pager { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 2.5rem; flex-wrap: wrap; }
.sc-pager a {
    min-width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: .9rem;
    color: var(--sc-grey);
    transition: all .25s ease;
}
.sc-pager a:hover { background: var(--sc-mist); color: var(--sc-ink); }
.sc-pager a.is-current { background: var(--sc-ink); color: #fff; }

/* product page */
.sc-product { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.sc-product-stage { background: var(--sc-mist); border-radius: 22px; padding: clamp(1rem, 2vw, 1.6rem); position: sticky; top: calc(var(--sc-nav-h) + 1rem); }
.sc-product-stage img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: #fff; }
.sc-thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; padding-bottom: .25rem; }
.sc-thumbs button {
    flex: 0 0 68px; height: 68px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: #fff;
    padding: 0; overflow: hidden; cursor: pointer;
    opacity: .7;
    transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}
.sc-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.sc-thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.sc-thumbs button.is-current { opacity: 1; border-color: var(--sc-ink); }

.sc-product-copy h1 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
.sc-eyebrow { color: var(--sc-grey); font-size: .95rem; }
.sc-price { font-size: clamp(1.2rem, 2vw, 1.6rem); margin-top: 1rem; }
.sc-desc { color: #3A3A3C; margin-top: 1.2rem; font-size: 1.02rem; line-height: 1.75; }
.sc-buy { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.sc-specs { margin-top: 2rem; border-top: 1px solid var(--sc-line); }
.sc-specs div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--sc-line); font-size: .95rem; }
.sc-specs span:first-child { color: var(--sc-grey); }

.sc-empty { text-align: center; color: var(--sc-grey); padding: 4rem 0; }

/* --------------------------------------------------------------- toast -- */
.sc-toast {
    position: fixed;
    inset-block-start: calc(var(--sc-nav-h) + 1rem);
    inset-inline-end: 1.25rem;
    z-index: 400;
    background: rgba(29, 29, 31, .92);
    color: #fff;
    border-radius: 14px;
    padding: .8rem 1.2rem;
    font-size: .92rem;
    backdrop-filter: blur(12px);
    animation: sc-rise .5s cubic-bezier(.28, .11, .32, 1) both;
}

/* -------------------------------------------------------------- reveal -- */
/* Hidden-until-revealed only when scripting is on, so the page can never end up
   blank because the observer never ran. */
html.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.28, .11, .32, 1), transform 1s cubic-bezier(.28, .11, .32, 1); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 900px) {
    .sc-points { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .sc-cards { grid-template-columns: 1fr; }
    .sc-card, .sc-card:first-child { min-height: 60vw; }
    .sc-contact, .sc-product { grid-template-columns: 1fr; }
    .sc-product-stage { position: static; }
}

@media (max-width: 720px) {
    .sc-burger { display: block; margin-inline-start: auto; }
    .sc-nav-links {
        position: fixed;
        inset: var(--sc-nav-h) 0 auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(20px);
        padding: .5rem var(--sc-pad) 1.5rem;
        font-size: 1.05rem;
        transform: translateY(-130%);
        transition: transform .5s cubic-bezier(.28, .11, .32, 1);
        border-bottom: 1px solid var(--sc-line);
        max-height: calc(100vh - var(--sc-nav-h));
        overflow-y: auto;
    }
    .sc-nav-links.is-open { transform: none; }
    .sc-nav-links a { padding: .85rem 0; border-bottom: 1px solid var(--sc-line); }
    .sc-nav-tools { margin-inline-start: 0; }
}

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