@font-face {
    font-family:Hajar;
    src:url('/hajar.woff2') format('woff2');
    font-display:swap
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:100px
}
body {
    margin:0;
    background:#fff;
    color:#15383c;
    font:16px/1.8 Hajar,Arial,sans-serif
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea,select {
    font:inherit
}
button,a,input,textarea,select {
    touch-action:manipulation
}
:focus-visible {
    outline:3px solid #eaa848;
    outline-offset:4px
}
.container {
    width:min(1180px,calc(100% - 48px));
    margin:auto
}
.site-header {
    position:sticky;
    top:0;
    z-index:10;
    background:#ffffffed;
    border-bottom:1px solid #e5edeb;
    backdrop-filter:blur(12px)
}
.nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:88px
}
.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    font-weight:bold;
    white-space:nowrap
}
.brand b {
    color:#00767b
}
.nav nav {
    display:flex;
    gap:28px;
    font-size:14px
}
.nav nav a:hover,footer a:hover {
    color:#00767b
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:#00767b;
    color:white;
    padding:14px 25px;
    border:1px solid #00767b;
    border-radius:10px;
    font-weight:bold;
    cursor:pointer;
    transition:background .2s,transform .2s
}
.button:hover {
    background:#005d61;
    transform:translateY(-1px)
}
.button.secondary {
    background:white;
    color:#15383c;
    border-color:#d6e4e1
}
.button.small {
    font-size:14px;
    padding:9px 18px
}
.hero {
    padding:88px 0 72px;
    background:linear-gradient(125deg,#edf7f3 0%,#fff 62%)
}
.hero-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:60px
}
.eyebrow {
    display:inline-flex;
    gap:9px;
    align-items:center;
    font-size:13px;
    color:#00767b;
    padding:5px 12px;
    border:1px solid #c8e5dd;
    border-radius:30px;
    background:#fff
}
.eyebrow:before {
    content:'';
    width:7px;
    height:7px;
    border-radius:50%;
    background:#00767b
}
h1 {
    font-size:clamp(36px,4.4vw,62px);
    line-height:1.35;
    letter-spacing:-1px;
    margin:22px 0
}
h2 {
    font-size:clamp(27px,3vw,40px);
    line-height:1.4;
    margin:0 0 18px
}
h3 {
    line-height:1.5
}
p {
    color:#61777a;
    margin:12px 0 22px
}
.hero p {
    font-size:18px;
    max-width:490px
}
.actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:25px 0
}
.meta {
    font-size:13px;
    color:#718788
}
.preview {
    position:relative;
    padding:24px 0 36px 18px
}
.terminal {
    background:white;
    border:1px solid #dce8e3;
    border-radius:16px;
    box-shadow:0 25px 60px #123f3b14;
    overflow:hidden;
    transform:rotate(-2deg)
}
.terminal-bar {
    background:#15383c;
    color:white;
    padding:14px 20px;
    display:flex;
    justify-content:space-between;
    font-size:12px
}
.terminal-body {
    display:grid;
    grid-template-columns:1.6fr 1fr;
    min-height:310px
}
.terminal-products {
    padding:22px;
    border-left:1px solid #e5edeb
}
.search-demo {
    background:#f2f6f5;
    color:#718788;
    border-radius:7px;
    padding:9px 12px;
    font-size:11px
}
.product-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:18px
}
.product {
    border:1px solid #e5edeb;
    border-radius:9px;
    padding:13px;
    font-size:11px
}
.product .shape {
    height:55px;
    background:#e6f2eb;
    border-radius:6px;
    display:grid;
    place-items:center;
    font-size:27px;
    margin-bottom:8px
}
.product:nth-child(2) .shape {
    background:#fcf1dc
}
.product:nth-child(3) .shape {
    background:#edf0fa
}
.product:nth-child(4) .shape {
    background:#f5e9e5
}
.receipt {
    padding:20px 14px;
    font-size:11px
}
.receipt hr {
    border:0;
    border-top:1px dashed #d8e3df;
    margin:18px 0
}
.receipt .line {
    display:flex;
    justify-content:space-between;
    margin:12px 0
}
.receipt strong {
    font-size:18px
}
.demo-pay {
    background:#00767b;
    color:#fff;
    padding:9px;
    text-align:center;
    border-radius:6px;
    margin-top:20px
}
.phone {
    position:absolute;
    bottom:0;
    left:-8px;
    width:135px;
    background:#15383c;
    border-radius:24px;
    padding:8px;
    border:3px solid #274d50;
    box-shadow:0 15px 35px #123f3b22;
    transform:rotate(5deg)
}
.phone-screen {
    background:#fff;
    border-radius:16px;
    padding:15px 10px;
    min-height:220px;
    font-size:10px
}
.scan {
    width:82px;
    height:66px;
    margin:18px auto;
    border:2px solid #00767b;
    background:repeating-linear-gradient(90deg,#15383c 0px,#15383c 2px,white 2px,white 5px);
    border-radius:4px
}
.preview-caption {
    text-align:center;
    font-size:11px;
    color:#718788;
    margin-top:28px
}
.strip {
    border-block:1px solid #e5edeb;
    background:#f8faf9
}
.strip .container {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding-block:23px;
    color:#4d696a;
    font-size:14px
}
.section {
    padding:85px 0
}
.section-head {
    max-width:630px;
    margin-bottom:40px
}
.feature-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0
}
.feature {
    padding:27px;
    border-top:1px solid #dce8e3
}
.feature h3 {
    margin:15px 0 10px;
    font-size:21px
}
.feature p {
    font-size:14px;
    max-width:300px
}
.feature-icon {
    color:#00767b;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid #c9dfd8;
    border-radius:9px;
    font-size:19px
}
.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center
}
.soft {
    background:#f3f8f6
}
.check-list {
    list-style:none;
    padding:0
}
.check-list li {
    padding:12px 0;
    border-bottom:1px solid #dce8e3
}
.check-list li:before {
    content:'✓';
    color:#00767b;
    margin-left:12px
}
.device-card {
    background:white;
    border:1px solid #dce8e3;
    border-radius:18px;
    padding:38px
}
.tag {
    display:inline-block;
    background:#e8f4ef;
    color:#00767b;
    padding:4px 10px;
    font-size:12px;
    border-radius:5px
}
.cta {
    background:#15383c;
    color:white;
    border-radius:20px;
    padding:48px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px
}
.cta p {
    color:#c0d5d3
}
.cta h2 {
    font-size:30px
}
.downloads {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px
}
.download {
    border:1px solid #dce8e3;
    border-radius:16px;
    padding:28px;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}
.download p {
    flex:1
}
.unavailable {
    color:#718788;
    background:#f2f6f5;
    padding:10px 15px;
    border-radius:8px;
    font-size:14px
}
.gallery {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.gallery img {
    width:100%;
    height:320px;
    object-fit:contain;
    background:#f3f8f6;
    border-radius:14px
}
.form-card {
    border:1px solid #dce8e3;
    padding:32px;
    border-radius:16px;
    background:#fff
}
.field {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-bottom:20px
}
.field label {
    font-size:14px
}
.field input,.field textarea,.field select {
    width:100%;
    border:1px solid #ceded8;
    background:#fafcfb;
    color:#15383c;
    border-radius:8px;
    padding:12px
}
.field textarea {
    resize:vertical
}
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
.notice {
    padding:14px 18px;
    border-radius:9px;
    background:#e7f5ed;
    margin:15px 0;
    color:#166143
}
.error {
    background:#fff0ed;
    color:#a53320
}
.legal {
    max-width:800px;
    white-space:pre-wrap;
    line-height:2
}
.skip {
    position:fixed;
    top:-80px;
    right:20px;
    background:#15383c;
    color:#fff;
    padding:12px;
    z-index:100
}
.skip:focus {
    top:10px
}
footer {
    background:#f3f8f6;
    border-top:1px solid #e5edeb;
    padding:50px 0 20px
}
.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:40px
}
footer h3 {
    font-size:15px
}
footer a {
    display:block;
    font-size:14px;
    margin-bottom:10px
}
.copyright {
    border-top:1px solid #dce8e3;
    padding-top:20px;
    margin-top:30px;
    font-size:12px;
    color:#718788
}
section[id] {
    scroll-margin-top:100px
}
@media(max-width:900px) {
    .hero-grid,.split {
    grid-template-columns:1fr;
    gap:35px
}
.hero {
    padding-top:45px
}
.hero-copy {
    max-width:640px
}
.preview {
    max-width:540px;
    width:100%;
    margin:auto
}
.feature-grid {
    grid-template-columns:repeat(2,1fr)
}
.nav {
    gap:16px;
    flex-wrap:wrap;
    padding-block:14px
}
.nav nav {
    order:3;
    width:100%;
    justify-content:center;
    gap:22px
}
.downloads {
    grid-template-columns:1fr
}
.strip .container {
    flex-wrap:wrap;
    justify-content:center
}
.cta {
    align-items:flex-start;
    flex-direction:column
}

}
@media(max-width:540px) {
    .container {
    width:calc(100% - 32px)
}
.nav nav {
    font-size:12px;
    gap:14px
}
.brand {
    font-size:21px
}
.section {
    padding:55px 0
}
.feature-grid,.footer-grid,.form-row {
    grid-template-columns:1fr
}
.feature {
    padding:22px 0
}
.terminal-body {
    grid-template-columns:1.5fr 1fr;
    min-height:280px
}
.terminal-products {
    padding:12px
}
.product {
    padding:8px
}
.receipt {
    padding:12px 8px
}
.phone {
    left:0;
    width:115px
}
.phone-screen {
    min-height:195px
}
.preview {
    padding-left:10px
}
.cta,.device-card,.form-card {
    padding:24px
}
.gallery {
    grid-template-columns:1fr
}
.hero p {
    font-size:16px
}

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

}


@media(max-width:540px) {
    .phone {
    left:12px;
    transform:none
}
.hero h1 {
    text-wrap:balance
}
.nav nav {
    flex-wrap:wrap
}

}


/* Storefront: teal light, glass surfaces and deliberate depth. */
.storefront {
    --ink: #123c40;
    --muted: #526f73;
    --teal: #007b80;
    --mint: #7de3d2;
    background: #f5f9f8;
    color: var(--ink);
}
.storefront p { color: var(--muted); }
.storefront h1, .storefront h2 { text-wrap: balance; }
.storefront .site-header {
    background: rgba(247, 252, 251, .92);
    border-bottom: 1px solid rgba(17, 75, 77, .08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.storefront.is-home .site-header {
    background: rgba(255, 255, 255, .96);
    color: #15383c;
    border-color: #e1eee8;
}
.is-home .brand b { color: #00767b; }
.is-home .brand img { filter: none; }
.is-home .nav nav a:hover { color: #00767b; }
.storefront .button {
    border-radius: 13px;
    background: linear-gradient(140deg, #00868a, #00666f);
    border-color: #007b80;
    box-shadow: inset 0 1px 0 #ffffff26, 0 5px 14px #00666f13;
    transition: transform .2s, box-shadow .2s, background .2s;
}
.storefront .button:hover { transform: translateY(-2px); box-shadow: 0 9px 22px #00666f25; }
.storefront .button.secondary { background: #ffffffc9; color: var(--ink); border-color: #cddfdb; }
.storefront .hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #15383c;
    background: #fff;
    padding: 105px 0 108px;
    border-radius: 0 0 36px 36px;
}
.hero-gridlines {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .35;
    background-image: linear-gradient(#00767b0b 1px, transparent 1px), linear-gradient(90deg, #00767b0b 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(90deg, #000, transparent 90%);
    pointer-events: none;
}
.hero-light {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}
.hero-light-one {
    width: 1050px;
    height: 850px;
    left: -270px;
    top: -300px;
    background: radial-gradient(ellipse, #22b7a814, transparent 65%);
}
.hero-light-two {
    width: 850px;
    height: 650px;
    right: -300px;
    bottom: -400px;
    background: radial-gradient(ellipse, #4cb8be0c, transparent 68%);
}
.storefront .hero-grid { gap: 60px; grid-template-columns: 1fr 1.06fr; }
.storefront .hero-copy { position: relative; z-index: 2; }
.storefront .hero h1 { font-size: clamp(40px, 4.5vw, 65px); line-height: 1.4; margin: 0 0 24px; font-weight: 700; }
.storefront .hero-copy > p { color: #597576; font-size: 18px; line-height: 1.95; max-width: 490px; }
.storefront .hero .actions { margin: 32px 0 26px; }
.storefront .hero .button, .is-home .nav > .button {
    background: #00767b;
    color: #fff;
    border-color: #00767b;
    box-shadow: inset 0 1px 0 #ffffffbd, 0 5px 24px #00767b1c;
}
.storefront .hero .button:hover, .is-home .nav > .button:hover { background: #005f65; }
.storefront .hero .button.secondary { color: #15383c; background: #fff; border-color: #cddfdb; box-shadow: inset 0 1px 0 #ffffff0b; }
.hero-capabilities { display: flex; flex-wrap: wrap; gap: 0; color: #597576; font-size: 13px; }
.hero-capabilities span { padding: 0 18px; border-left: 1px solid #00767b26; }
.hero-capabilities span:first-child { padding-right: 0; }
.hero-capabilities span:last-child { border: 0; }
.storefront .preview { padding: 56px 12px 64px; perspective: 1100px; max-width: 560px; }
.preview-orbit { position: absolute; inset: -36px -18px; border: 1px solid #00767b16; border-radius: 50%; transform: rotate(-25deg); pointer-events: none; }
.preview-orbit:after { content: ''; position: absolute; inset: 30px; border: 1px dashed #00767b20; border-radius: 50%; }
.storefront .terminal {
    background: linear-gradient(140deg, #edfdf9f7, #d8ede8f7);
    border: 1px solid #dcfff299;
    border-radius: 20px;
    box-shadow: 0 32px 70px #15383c1c, inset 0 1px 0 #fff;
    transform: rotateY(-9deg) rotateX(5deg) rotateZ(-3deg);
}
.storefront .terminal-bar { background: #ffffff80; color: #214e50; padding: 18px 22px; border-bottom: 1px solid #c9dfd9; }
.terminal-state { display: inline-flex; align-items: center; gap: 6px; }
.terminal-state i { width: 6px; height: 6px; border-radius: 50%; background: #008b73; }
.storefront .terminal-body { color: #214e50; min-height: 300px; }
.storefront .terminal-products { border-color: #bed9d2; padding: 20px; }
.storefront .search-demo { border: 1px solid #d8e9e3; color: #637d7c; background: #ffffffc2; box-shadow: inset 0 1px 3px #173e3b07; }
.storefront .product { background: #ffffffc9; border-color: #dcebe5; box-shadow: 0 3px 8px #234f4605; border-radius: 11px; padding: 10px; }
.storefront .product .shape { background: #e3efe7; color: #447769; }
.storefront .product:nth-child(2) .shape { background: #f3eedf; color: #a58d50; }
.storefront .product:nth-child(3) .shape { background: #e2e9f0; color: #607d98; }
.storefront .product:nth-child(4) .shape { background: #f2e7e2; color: #b78670; }
.shape svg { width: 40px; height: 40px; }
.storefront .receipt { padding-top: 25px; }
.storefront .receipt hr { border-color: #b7d3c9; }
.storefront .demo-pay { background: #006e70; box-shadow: inset 0 1px 0 #ffffff26; }
.storefront .phone { left: 12px; bottom: 12px; width: 128px; border-color: #50867f; background: linear-gradient(140deg, #264d50, #123437); box-shadow: 0 22px 45px #15383c26, inset 0 1px 0 #ffffff40; transform: rotate(-7deg); z-index: 3; }
.storefront .phone-screen { background: #eff9f5; color: #214e50; padding-top: 23px; min-height: 225px; }
.storefront .phone-screen p { font: 10px/1.7 Hajar,Arial,sans-serif; color: #597576; margin: 9px 0; }
.storefront .phone-screen .demo-pay { font-size: 9px; margin-top: 14px; }
.storefront .scan { width: 76px; height: 57px; border: 4px solid #fff; box-shadow: 0 0 0 1px #006e70; margin: 16px auto; }
.floating-panel { position: absolute; z-index: 4; display: flex; gap: 10px; align-items: center; padding: 15px 19px; border: 1px solid #b4f0e038; border-radius: 14px; background: linear-gradient(125deg, #396864d6, #183f3bd9); box-shadow: 0 16px 28px #00000022, inset 0 1px 0 #d5fff41a; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.floating-panel strong { display: block; font-size: 13px; color: #ebfff7; }
.floating-panel span:not(.panel-icon) { display: block; font-size: 10px; color: #add2c9; }
.panel-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: #9effd71a; border: 1px solid #9effd733; color: #a4f9dc; }
.stock-panel { top: 2px; right: 10px; transform: rotate(3deg); }
.invoice-panel { bottom: 4px; right: 0; transform: rotate(2deg); }
.storefront .preview-caption { position: absolute; bottom: -32px; right: 0; width: 100%; color: #597576; font-size: 10px; }
.storefront .strip { background: transparent; border: 0; }
.storefront .strip .container { border-bottom: 1px solid #d1e2dd; padding: 30px 0; }
.storefront .section-head { margin-bottom: 45px; }
.storefront .feature-grid { gap: 20px; }
.storefront .feature {
    border: 1px solid #ffffff;
    border-radius: 18px;
    padding: 30px;
    background: linear-gradient(140deg, #ffffffdf, #eaf4f0ad);
    box-shadow: 0 8px 25px #1b615609, inset 0 1px 0 #fff;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.storefront .feature:hover { transform: translateY(-4px); border-color: #baded3; box-shadow: 0 15px 35px #1b615611; }
.storefront .feature-icon { width: 44px; height: 44px; background: linear-gradient(145deg, #f2fbf7, #d7eee6); border-color: #c0dfd2; box-shadow: inset 0 1px 0 #fff, 0 4px 8px #005d5309; color: #00766e; border-radius: 12px; }
.storefront .soft { background: radial-gradient(ellipse at 30% 50%, #d6eee5, transparent 65%), #edf5f1; border-block: 1px solid #d7e8e1; }
.storefront .device-card, .storefront .download, .storefront .form-card { background: linear-gradient(145deg, #ffffffec, #ffffff94); border-color: #fff; border-radius: 22px; box-shadow: 0 14px 35px #1454460b, inset 0 1px 0 #fff; }
.storefront .device-card { position: relative; padding: 42px; }
.storefront .device-card h3 { font-size: 27px; }
.storefront .download { transition: transform .2s, box-shadow .2s; padding: 34px; }
.storefront .download:hover { transform: translateY(-4px); box-shadow: 0 20px 40px #14544615; }
.storefront .download h3 { font-size: 24px; }
.storefront .tag { border: 1px solid #cfe5dc; background: #e8f5ef; border-radius: 7px; padding: 5px 12px; }
.storefront .field input, .storefront .field textarea, .storefront .field select { background: #f1f7f4; border-color: #d6e5de; box-shadow: inset 0 2px 4px #173e3b05; border-radius: 11px; }
.storefront .field input:focus, .storefront .field textarea:focus, .storefront .field select:focus { background: #fff; border-color: #007b80; }
.storefront .cta { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 10% 30%, #18736f70, transparent 70%), #0a3338; border: 1px solid #2b625f; border-radius: 24px; box-shadow: 0 18px 35px #0b424217, inset 0 1px 0 #a3e2cc17; padding: 54px; }
.storefront .cta p { color: #b0d1c9; }
.storefront .cta .button { background: #88edda; border-color: #a1fce9; color: #073c3e; }
.storefront footer { background: #0c2e33; color: #e8f9f4; border-top: 1px solid #204f50; padding-top: 65px; }
.storefront footer p, .storefront footer .copyright { color: #9abeba; }
.storefront footer a:hover { color: #88edda; }
.storefront .copyright { border-color: #315652; }
.storefront.inner-page #main > .section { background: radial-gradient(ellipse at 15% 10%, #d6eee566, transparent 55%); }
.storefront .unavailable { background: #eaf1ee; color: #526c64; border: 1px solid #d5e3dc; }
@media (max-width: 1050px) {
    .storefront .hero-grid { gap: 35px; }
    .storefront .hero h1 { font-size: 48px; }
    .storefront .hero .actions .button { padding-inline: 18px; font-size: 14px; }
}
@media (max-width: 900px) {
    .storefront .hero { padding: 60px 0 95px; }
    .storefront .hero-grid { grid-template-columns: 1fr; gap: 55px; }
    .storefront .hero-copy { max-width: 660px; }
    .storefront .hero h1 { max-width: 620px; font-size: 52px; }
    .storefront .preview { width: min(540px, 100%); }
    .storefront .preview-orbit { inset: 0; }
}
@media (max-width: 540px) {
    .storefront .hero { padding: 42px 0 78px; border-radius: 0 0 24px 24px; }
    .storefront .hero h1 { font-size: 40px; line-height: 1.5; }
    .storefront .hero-copy > p { font-size: 15px; line-height: 1.95; }
    .storefront .hero .actions { margin: 27px 0 22px; gap: 10px; }
    .storefront .hero .actions .button { flex: 1; font-size: 12px; white-space: nowrap; padding: 13px 10px; }
    .hero-capabilities { font-size: 12px; }
    .hero-capabilities span { padding-inline: 14px; }
    .storefront .hero-grid { gap: 35px; }
    .storefront .preview { padding: 52px 6px 70px; }
    .storefront .terminal { transform: rotate(-2deg); border-radius: 14px; }
    .storefront .terminal-bar { padding: 13px; }
    .storefront .terminal-products { padding: 10px; }
    .storefront .product { padding: 6px; }
    .storefront .product-grid { gap: 8px; }
    .storefront .shape svg { width: 32px; height: 32px; }
    .storefront .receipt { padding: 20px 8px; }
    .storefront .phone { width: 110px; left: 12px; bottom: 5px; transform: rotate(-4deg); }
    .storefront .phone-screen { padding: 14px 6px; min-height: 195px; }
    .storefront .scan { width: 68px; height: 50px; }
    .floating-panel { padding: 10px 12px; gap: 8px; }
    .floating-panel strong { font-size: 11px; }
    .floating-panel span:not(.panel-icon) { font-size: 9px; }
    .stock-panel { top: 0; right: 10px; }
    .invoice-panel { right: 2px; bottom: 10px; }
    .storefront .preview-caption { bottom: -22px; font-size: 9px; }
    .storefront .feature { padding: 25px; }
    .storefront .feature-grid { gap: 14px; }
    .storefront .device-card, .storefront .form-card, .storefront .download, .storefront .cta { padding: 26px; border-radius: 18px; }
    .storefront .strip .container { gap: 13px 20px; font-size: 12px; padding-block: 25px; }
}
@media (prefers-reduced-motion: no-preference) {
    .storefront .hero-copy { animation: hero-intro .65s ease-out both; }
    .storefront .preview { animation: hero-intro .8s .08s ease-out both; }
    @keyframes hero-intro { from { opacity: 0; translate: 0 15px; } to { opacity: 1; translate: 0 0; } }
}

/* Contact dropdowns keep native form, touch and keyboard behavior. */
.storefront .field .contact-select {
    appearance: none;
    cursor: pointer;
    min-height: 54px;
    padding-inline: 16px 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2300767b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.storefront .field .contact-select:hover {
    border-color: #9dcabd;
    background-color: #eaf4ef;
}
.storefront .field .contact-select:focus-visible {
    outline: 2px solid #007b80;
    outline-offset: 3px;
    box-shadow: 0 0 0 4px #007b8010;
}
.contact-select option { background: #f8fcfa; color: #15383c; }
@supports (appearance: base-select) {
    .storefront .field .contact-select,
    .contact-select::picker(select) {
        appearance: base-select;
    }
    .storefront .field .contact-select {
        background-image: none;
        padding-inline: 16px;
        align-items: center;
        gap: 12px;
    }
    .contact-select::picker-icon {
        color: #007b80;
        margin-inline-start: auto;
        transition: rotate .2s;
    }
    .contact-select:open::picker-icon { rotate: 180deg; }
    .storefront .field .contact-select:open {
        border-color: #007b80;
        background-color: #fff;
        box-shadow: 0 0 0 4px #007b8010;
    }
    .contact-select::picker(select) {
        font: inherit;
        color: #15383c;
        background: linear-gradient(145deg, #fffffffa, #edf7f1f5);
        border: 1px solid #c8e2d7;
        border-radius: 15px;
        padding: 7px;
        margin-block: 8px;
        box-shadow: 0 16px 36px #123f3b22, inset 0 1px 0 #fff;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        max-height: min(300px, 50vh);
        overflow-y: auto;
    }
    .contact-select option {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        padding: 10px 13px;
        border: 1px solid transparent;
        border-radius: 9px;
        background: transparent;
        cursor: pointer;
        transition: background-color .15s;
    }
    .contact-select option + option { margin-top: 3px; }
    .contact-select option:hover,
    .contact-select option:focus-visible { background: #e5f2eb; color: #005d61; }
    .contact-select option:checked {
        color: #005d61;
        background: #dff3e9;
        border-color: #bedfd0;
        font-weight: bold;
    }
    .contact-select option::checkmark {
        order: 1;
        margin-inline-start: auto;
        color: #007b80;
    }
}

/* Guided trial requests */
.trial-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}.trial-intro{position:sticky;top:120px}.trial-intro h1{font-size:clamp(38px,5vw,64px);line-height:1.25}.trial-intro p{max-width:430px}.trial-intro .tag{background:#daf1e5;color:#00767b}.trial-note{margin:28px 0;color:#00767b}.trial-intro>a{font-size:15px}.trial-card{min-width:0}.wizard-progress{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0;margin:0 0 20px;counter-reset:steps}.wizard-progress li{counter-increment:steps;text-align:center;font-size:14px;color:#627b7c;padding:12px 4px;border-bottom:3px solid #e0ebe7}.wizard-progress li:before{content:counter(steps);display:block;border-radius:50%;width:28px;height:28px;line-height:28px;margin:0 auto 8px;background:#edf5f1}.wizard-progress li.active{color:#00767b;border-color:#00767b;font-weight:bold}.wizard-progress li.active:before,.wizard-progress li.done:before{color:white;background:#00767b}.wizard-progress li.done{border-color:#9bd6bc}.wizard-status{font-size:13px;color:#627b7c}.wizard-step{border:0;padding:0;margin:0;min-width:0}.wizard-step legend{font-size:28px;color:#123c40;font-weight:bold;margin:12px 0}.wizard-step legend:focus{outline:none}.wizard-step>p{font-size:15px;margin-top:0}.wizard-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.wizard-choice{display:flex;align-items:center;gap:10px;border:1px solid #d4e7de;border-radius:14px;padding:16px;background:#f7fbf9;cursor:pointer}.wizard-choice:has(input:checked){background:#dcf3e7;border-color:#00767b;color:#005f63}.wizard-choice input,.wizard-consent input{width:18px;height:18px;accent-color:#00767b;flex-shrink:0}.wizard-consent{display:flex;gap:10px;align-items:center;font-size:14px;margin:24px 0}.wizard-actions{display:flex;justify-content:space-between;gap:12px;margin-top:28px}.wizard-actions button:last-child{margin-inline-start:auto}.wizard-feature-error{color:#b42318}.wizard-review{padding:20px;border-radius:16px;border:1px solid #c7e2d4;background:#eff9f3;margin:20px 0}.wizard-review h3{margin-top:0}.wizard-review dl{display:grid;grid-template-columns:130px 1fr;gap:10px;font-size:14px;margin-bottom:0}.wizard-review dt{color:#627b7c}.wizard-review dd{margin:0;overflow-wrap:anywhere;white-space:pre-wrap}.wizard-success h2{margin-top:0}.trial-card [hidden]{display:none!important}
@media(max-width:800px){.trial-layout{grid-template-columns:1fr;gap:28px}.trial-intro{position:static}.trial-intro h1 br{display:none}.trial-intro h1{font-size:38px}.trial-intro p{max-width:none}.trial-note{margin:16px 0}.wizard-progress li{font-size:12px}.wizard-choice{padding:12px;font-size:14px}.wizard-review dl{grid-template-columns:100px 1fr}}
@media(max-width:380px){.wizard-choices{grid-template-columns:1fr}.wizard-progress{gap:4px}.wizard-progress li{font-size:11px}}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.testimonial-card{background:linear-gradient(140deg,#ffffffec,#eff9f5de);border:1px solid #d5e9df;border-radius:22px;padding:28px;display:flex;flex-direction:column;min-width:0}.quote-symbol{font-family:serif;font-size:64px;line-height:1;color:#00767b}.testimonial-card blockquote{margin:0 0 28px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;flex:1}.testimonial-person{display:flex;align-items:center;gap:14px}.testimonial-avatar{width:48px;height:48px;border-radius:50%;background:#d5f0e2;color:#00696e;display:grid;place-items:center;font-size:22px;flex-shrink:0}.testimonial-person strong,.testimonial-person div>span{display:block}.testimonial-person div>span{font-size:14px;color:#657e80}.faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:64px;align-items:start}.faq-item{border:1px solid #d5e7de;border-radius:16px;padding:20px 24px;margin-bottom:12px;background:#ffffffd9}.faq-item summary{cursor:pointer;font-weight:bold;line-height:1.6;color:#15383c}.faq-item[open]{background:#f1faf5;border-color:#9cd3bb}.faq-item p{margin:16px 0 0;font-size:15px;line-height:1.9}.gallery a{display:block;min-width:0}.gallery a img{width:100%;object-fit:contain}.gallery{margin-bottom:24px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #00767b;outline-offset:4px}#app-gallery{scroll-margin-top:120px}
@media(max-width:900px){.testimonials-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.faq-layout{grid-template-columns:1fr;gap:28px}}
@media(max-width:600px){.testimonials-grid{grid-template-columns:1fr}.testimonial-card{padding:24px}.faq-item{padding:18px}.faq-layout h2{font-size:32px}}