:root
{
    --radius:8px;
    --background:#f9fafb;
    --foreground:#202228;
    --card:#fff;
    --primary:#199fe0;
    --primary-hover:#118ac5;
    --primary-foreground:#fff;
    --primary-soft:#d9f0fb;
    --muted:#eef0f3;
    --muted-foreground:#69717e;
    --border:#d7dbe0;
    --surface:#f0f2f4;
    --ink:#181a1f;
    --ink-foreground:#f7f8f9;
    --ink-muted:#a8adb7;
    --ink-card:#24272d;
    --ink-border:#373b43;
    --rating:#f2b933;
    --shadow:0 16px 35px rgba(17,28,40,.14)
}

html.dark
{
    color-scheme:dark;
    --background:#191a1d;
    --foreground:#f1f2f3;
    --card:#242529;
    --primary:#27a9e8;
    --primary-hover:#46b8ed;
    --primary-foreground:#fff;
    --primary-soft:#173c4e;
    --muted:#2b2d31;
    --muted-foreground:#a9adb5;
    --border:#393b40;
    --surface:#202124;
    --ink:#121316;
    --ink-card:#202125;
    --ink-border:#34363b
}

*
{
    box-sizing:border-box
}

html
{
    scroll-behavior:smooth
}

body
{
    margin:0;
    background:var(--background);
    color:var(--foreground);
    font-family:"DM Sans",sans-serif;
    line-height:1.5
}

button,a,summary
{
    outline-offset:3px
}

button,a
{
    font:inherit
}

button
{
    color:inherit
}

a
{
    color:inherit;
    text-decoration:none;
    transition:color .18s ease
}

img,video
{
    display:block;
    max-width:100%
}

.container
{
    width:min(100% - 40px,1216px);
    margin-inline:auto
}

.site-header
{
    position:sticky;
    top:0;
    z-index:50;
    border-bottom:1px solid var(--border);
    background:color-mix(in srgb,var(--background) 95%,transparent);
    backdrop-filter:blur(12px)
}

.nav-shell
{
    width:min(100% - 40px,1216px);
    height:72px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: auto;
  height: 65px;
  max-width: 320px;
  object-fit: contain;
}

.desktop-nav
{
    display:flex;
    gap:32px;
    font-size:14px;
    font-weight:600
}

.desktop-nav a:hover,footer a:hover
{
    color:var(--primary)
}

.nav-actions
{
    display:flex;
    align-items:center;
    gap:8px
}

.icon-button
{
    width:40px;
    height:40px;
    border:0;
    border-radius:var(--radius);
    display:grid;
    place-items:center;
    background:transparent;
    cursor:pointer
}

.icon-button:hover
{
    background:var(--muted)
}

[data-theme-icon]
{
    font-size:20px;
    line-height:1
}

.button
{
    min-height:42px;
    border:0;
    border-radius:var(--radius);
    padding:0 20px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-weight:700;
    cursor:pointer;
    transition:transform .18s ease,background .18s ease,border-color .18s ease
}

.button:hover
{
    transform:translateY(-1px)
}

.button-primary
{
    background:var(--primary);
    color:var(--primary-foreground);
    box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 25%,transparent)
}

.button-primary:hover
{
    background:var(--primary-hover)
}

.button-outline
{
    border:1px solid var(--border);
    background:var(--background)
}

.button-outline:hover
{
    border-color:var(--primary)
}

.button-large
{
    min-height:52px;
    padding:0 25px
}

.mobile-menu-button,.mobile-nav
{
    display:none
}

.menu-icon,.menu-icon:before,.menu-icon:after
{
    display:block;
    width:20px;
    height:2px;
    background:currentColor;
    position:relative
}

.menu-icon:before,.menu-icon:after
{
    content:"";
    position:absolute;
    left:0
}

.menu-icon:before
{
    top:-6px
}

.menu-icon:after
{
    top:6px
}

.section-border
{
    border-bottom:1px solid var(--border)
}

.hero-grid
{
    min-height:650px;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    align-items:center;
    gap:48px;
    padding-block:64px
}

.hero-copy
{
    max-width:576px
}

.eyebrow
{
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:800
}

.wifi-icon
{
    font-size:18px;
    transform:rotate(-35deg)
}

h1,h2,h3
{
    margin:0;
    font-family:"Manrope",sans-serif;
    letter-spacing:0
}

h1
{
    margin-top:28px;
    font-size:clamp(48px,5vw,72px);
    line-height:1.02;
    font-weight:800
}

h1 span,h2 span
{
    color:var(--muted-foreground)
}

.lead
{
    margin:28px 0 0;
    max-width:560px;
    font-size:18px;
    line-height:1.75;
    color:var(--muted-foreground)
}

.button-row
{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:36px
}

.benefits
{
    display:flex;
    flex-wrap:wrap;
    gap:12px 28px;
    margin-top:40px;
    color:var(--muted-foreground);
    font-size:14px
}

.benefits span
{
    display:flex;
    align-items:center;
    gap:8px
}

.benefits b,.check-list b,.ink-list b
{
    color:var(--primary)
}

.hero-visual
{
    position:relative;
    min-height:540px;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:var(--surface)
}

.hero-visual img
{
    position:relative;
    z-index:1;
    width:100%;
    max-width:580px;
    filter:drop-shadow(0 20px 25px rgba(0,0,0,.2))
}

.media-badge
{
    position:absolute;
    left:20px;
    top:20px;
    border:1px solid var(--border);
    border-radius:999px;
    padding:8px 16px;
    background:var(--background);
    color:var(--muted-foreground);
    font-size:12px;
    font-weight:700
}

.surface
{
    background:var(--surface)
}

.feature-grid
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    padding-block:80px
}

.square-media
{
    aspect-ratio:1;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--background)
}

.square-media img
{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:32px
}

.feature-copy
{
    display:flex;
    flex-direction:column;
    justify-content:center
}

.feature-copy h2,.section-heading h2,.setup-grid h2,.why-grid h2,.cta h2
{
    margin-top:20px;
    font-size:clamp(36px,4vw,48px);
    line-height:1.1;
    font-weight:800
}

.purchase-box
{
    margin-top:32px;
    padding-block:24px;
    border-block:1px solid var(--border)
}

.price-row,.quantity-row
{
    display:flex;
    align-items:center;
    justify-content:space-between
}

.price-row
{
    margin-bottom:20px
}

.price-row span,.quantity-row>span
{
    font-size:14px;
    font-weight:600;
    color:var(--muted-foreground)
}

.price-row strong
{
    font:800 30px/1 "Manrope",sans-serif
}

.quantity-row>span
{
    color:var(--foreground)
}

.stepper
{
    height:44px;
    display:flex;
    align-items:center;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--background);
    overflow:hidden
}

.stepper button
{
    width:44px;
    height:42px;
    border:0;
    background:transparent;
    cursor:pointer;
    font-size:22px
}

.stepper button:hover
{
    background:var(--muted)
}

.stepper output
{
    width:36px;
    text-align:center;
    font-weight:700;
    font-size:14px
}

.buy-wide
{
    width:100%;
    margin-top:28px
}

.content-section
{
    padding-block:96px
}

.section-heading
{
    max-width:680px;
    margin:auto;
    text-align:center
}

.centered
{
    justify-content:center
}

.section-heading>p:last-child
{
    margin:16px 0 0;
    color:var(--muted-foreground)
}

.steps
{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:56px
}

.steps article
{
    padding:28px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface)
}

.step-number
{
    width:36px;
    height:36px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:12px;
    font-weight:700
}

.steps h3
{
    margin-top:30px;
    font-size:24px
}

.steps p,.product-body>p:not(.product-label)
{
    margin:12px 0 0;
    color:var(--muted-foreground);
    line-height:1.7
}

.products
{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:56px
}

.product
{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card)
}

.product-image
{
    aspect-ratio:1;
    overflow:hidden;
    background:var(--background)
}

.product-image img
{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:20px;
    transition:transform .5s ease
}

.product:hover .product-image img
{
    transform:scale(1.05)
}

.product-body
{
    padding:20px
}

.product-label
{
    margin:0;
    font-size:11px;
    font-weight:700
}

.product h3
{
    margin-top:8px;
    font-size:20px
}

.product-body>p:not(.product-label)
{
    min-height:80px;
    font-size:14px
}

.product-buy
{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--border)
}

.product-buy strong
{
    font:700 20px "Manrope",sans-serif
}

.product-buy button
{
    border:0;
    padding:6px 0;
    background:transparent;
    color:var(--primary);
    font-weight:700;
    cursor:pointer
}

.setup-grid,.why-grid
{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:56px
}

.check-list
{
    margin-top:32px
}

.check-list p
{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:600
}

.check-list b
{
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--primary-soft)
}

.video-frame
{
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface)
}

.video-frame video
{
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover
}

.ink
{
    background:var(--ink);
    color:var(--ink-foreground);
    border-block:1px solid var(--ink-border)
}

.ink h2 span
{
    color:var(--ink-muted)
}

.ink .lead
{
    color:var(--ink-muted)
}

.ink-list
{
    margin-top:32px
}

.ink-list p
{
    display:flex;
    align-items:center;
    gap:12px;
    padding-bottom:16px;
    border-bottom:1px solid var(--ink-border)
}

.rating-card
{
    min-height:320px;
    border:1px solid var(--ink-border);
    border-radius:var(--radius);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:var(--ink-card);
    text-align:center
}

.rating-card>strong
{
    font:800 72px/1 "Manrope",sans-serif
}

.stars
{
    margin-top:20px;
    color:var(--rating);
    font-size:27px;
    letter-spacing:4px
}

.rating-card p
{
    margin:20px 0 0;
    color:var(--ink-muted);
    font-size:14px
}

.faq-container
{
    width:min(100% - 40px,768px);
    margin:auto
}

.faqs
{
    display:grid;
    gap:12px;
    margin-top:48px
}

.faqs details
{
    padding:20px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface)
}

.faqs summary
{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    list-style:none;
    cursor:pointer;
    font:700 18px "Manrope",sans-serif
}

.faqs summary::-webkit-details-marker
{
    display:none
}

.faqs summary span
{
    font:24px sans-serif;
    transition:transform .2s ease
}

.faqs details[open] summary span
{
    transform:rotate(180deg)
}

.faqs details p
{
    max-width:672px;
    margin:16px 0 0;
    color:var(--muted-foreground);
    line-height:1.7
}

.cta
{
    text-align:center;
    padding-block:80px
}

.cta h2
{
    max-width:880px;
    margin-inline:auto
}

.cta .container>p:not(.eyebrow)
{
    max-width:576px;
    margin:20px auto 0;
    color:var(--muted-foreground)
}

.cta .button
{
    margin-top:32px
}

footer
{
    border-top:1px solid var(--border)
}

.footer-grid
{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.4fr;
    gap:48px;
    padding-block:56px
}

footer p
{
    max-width:320px;
    color:var(--muted-foreground);
    font-size:14px;
    line-height:1.7
}

footer h3
{
    margin:0;
    font:700 12px "DM Sans",sans-serif
}

footer ul
{
    margin:16px 0 0;
    padding:0;
    list-style:none;
    color:var(--muted-foreground);
    font-size:14px
}

footer li+li
{
    margin-top:12px
}

.copyright
{
    padding:24px 20px;
    border-top:1px solid var(--border);
    text-align:center;
    color:var(--muted-foreground);
    font-size:12px
}

@media(max-width:900px)
{
    .desktop-nav
    {
        gap:18px
    }

    .hero-grid
    {
        grid-template-columns:1fr;
        min-height:auto
    }

    .hero-copy
    {
        max-width:680px
    }

    .feature-grid,.setup-grid,.why-grid
    {
        grid-template-columns:1fr
    }

    .products
    {
        grid-template-columns:repeat(2,1fr)
    }

    .footer-grid
    {
        grid-template-columns:repeat(2,1fr)
    }

}

@media(max-width:767px)
{
    .container,.nav-shell
    {
        width:min(100% - 32px,1216px)
    }

    .desktop-nav
    {
        display:none
    }

    .mobile-menu-button
    {
        display:grid
    }

    .desktop-shop
    {
        display:none
    }

    .mobile-nav
    {
        border-top:1px solid var(--border);
        padding:12px 20px;
        background:var(--background)
    }

    .mobile-nav.open
    {
        display:grid
    }

    .mobile-nav a
    {
        padding:9px 0;
        font-weight:600
    }

    .hero-grid
    {
        gap:36px;
        padding-block:48px
    }

    .hero-visual
    {
        min-height:360px
    }

    .feature-grid
    {
        padding-block:64px
    }

    .content-section
    {
        padding-block:72px
    }

    .steps
    {
        grid-template-columns:1fr
    }

    .footer-grid
    {
        gap:36px
    }

    .lead
    {
        font-size:17px
    }

}

@media(max-width:520px)
{
    h1
    {
        font-size:43px
    }

    .products,.footer-grid
    {
        grid-template-columns:1fr
    }

    .product-body>p:not(.product-label)
    {
        min-height:0
    }

    .benefits
    {
        display:grid
    }

    .hero-visual
    {
        min-height:300px
    }

    .button-row .button
    {
        width:100%
    }

    .rating-card
    {
        min-height:280px
    }

}

@media(prefers-reduced-motion:reduce)
{
    html
    {
        scroll-behavior:auto
    }

    *,*:before,*:after
    {
        animation-duration:.01ms!important;
        transition-duration:.01ms!important
    }

}

.product
{
    position:relative
}

.product-link:after
{
    content:"";
    position:absolute;
    inset:0
}

.product-buy a
{
    position:relative;
    z-index:2;
    border:0;
    padding:6px 0;
    background:transparent;
    color:var(--primary);
    font-weight:700
}

.product-buy a:hover
{
    color:var(--primary-hover)
}

.product-page
{
    background:var(--ink);
    color:var(--ink-foreground)
}

.product-page .site-header
{
    background:color-mix(in srgb,var(--ink) 94%,transparent);
    border-color:var(--ink-border)
}

.product-page .mobile-nav
{
    background:var(--ink);
    border-color:var(--ink-border)
}

.product-page .icon-button:hover
{
    background:var(--ink-card)
}

.product-page footer
{
    border-color:var(--ink-border)
}

.product-breadcrumb
{
    display:flex;
    gap:10px;
    padding-top:28px;
    color:var(--ink-muted);
    font-size:13px
}

.product-breadcrumb a:hover
{
    color:var(--primary)
}

.product-detail
{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
    gap:64px;
    padding-block:40px 96px
}

.product-gallery
{
    min-width:0
}

.gallery-main
{
    aspect-ratio:1;
    overflow:hidden;
    border:1px solid var(--ink-border);
    border-radius:var(--radius);
    background:var(--ink-card)
}

.gallery-main img
{
    width:100%;
    height:100%;
    object-fit:cover
}

.gallery-thumbs
{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    margin-top:14px
}

.gallery-thumb
{
    aspect-ratio:1.55;
    overflow:hidden;
    padding:0;
    border:1px solid var(--ink-border);
    border-radius:var(--radius);
    background:var(--ink-card);
    cursor:pointer
}

.gallery-thumb.active
{
    border:2px solid var(--primary)
}

.gallery-thumb img
{
    width:100%;
    height:100%;
    object-fit:cover
}

.product-info
{
    padding-top:12px
}

.product-info h1
{
    margin-top:18px;
    font-size:clamp(42px,5vw,64px);
    line-height:1.03
}

.product-price
{
    margin:22px 0 0;
    font:800 28px "Manrope",sans-serif;
    color:var(--primary)
}

.product-price span
{
    font:600 12px "DM Sans",sans-serif;
    color:var(--ink-muted)
}

.product-info .lead
{
    color:var(--ink-muted)
}

.product-info .buy-wide
{
    margin-top:30px
}

.purchase-note
{
    text-align:center;
    color:var(--ink-muted);
    font-size:12px
}

.product-features
{
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid var(--ink-border)
}

.product-features h2
{
    font-size:20px
}

.product-features ul
{
    display:grid;
    gap:14px;
    margin:20px 0 0;
    padding:0;
    list-style:none;
    color:var(--ink-muted)
}

.product-features li
{
    display:flex;
    gap:12px
}

.product-features li span
{
    color:var(--primary);
    font-weight:800
}

.product-how
{
    color:var(--foreground);
    padding-block:72px
}

.product-how .container
{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:64px
}

.product-how h2
{
    margin-top:16px;
    font-size:36px
}

.how-copy
{
    color:var(--muted-foreground);
    line-height:1.75
}

.how-copy p:first-child
{
    margin-top:0
}

.product-more
{
    text-align:center
}

.product-more h2
{
    margin-top:16px;
    font-size:40px
}

.product-more .button
{
    margin-top:28px
}

.product-page .button-outline
{
    background:var(--ink);
    border-color:var(--ink-border)
}

@media(max-width:900px)
{
    .product-detail
    {
        grid-template-columns:1fr;
        gap:36px
    }

    .product-info
    {
        padding-top:0
    }

    .product-how .container
    {
        grid-template-columns:1fr;
        gap:22px
    }

}

@media(max-width:520px)
{
    .product-detail
    {
        padding-block:28px 64px
    }

    .product-info h1
    {
        font-size:40px
    }

    .gallery-thumbs
    {
        gap:10px
    }

    .product-how
    {
        padding-block:56px
    }

    .product-how h2,.product-more h2
    {
        font-size:32px
    }

}

.order-options
{
    margin-top:28px;
    display:grid;
    gap:18px
}

.order-field
{
    display:grid;
    gap:8px
}

.order-field label
{
    font-size:14px;
    font-weight:700
}

.order-field select,.order-field input
{
    height:48px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--card);
    color:var(--foreground);
    font:inherit
}

.order-field select:focus,.order-field input:focus
{
    outline:2px solid var(--primary);
    outline-offset:1px;
    border-color:var(--primary)
}

.order-field small
{
    color:var(--muted-foreground);
    font-size:12px
}

.order-error
{
    margin:0;
    color:#d93838;
    font-size:13px;
    font-weight:600
}